How to use the wix-ui-test-utils/unidriver.StylableUnidriverUtil function in wix-ui-test-utils

export const statesButtonDriverFactory = (
  base: UniDriver,
): StatesButtonDriver => {
  const stylableUtil = new StylableUnidriverUtil(style);

  return {
    ...buttonNextDriverFactory(base),
    checkIconExists: () => base.$('[data-hook="checkIcon"]').exists(),
  };
};

export const labelUniDriverFactory = (base: UniDriver): LabelDriver => {
  const stylableUnidriverUtil = new StylableUnidriverUtil(styles);

  return {
    ...coreLabelUniDriverFactory(base),
    getSize: () => stylableUnidriverUtil.getStyleState(base, 'size') as Promise
  }
};

export const overlappingCardDriverFactory = (
  base: UniDriver,
): OverlappingCardDriver => {
  const stylableUtil = new StylableUnidriverUtil(style);

  const getMediaContainerElement = () => base.$(`.${style.mediaContainer} > *`);
  const getInfoContainerElement = () => base.$(`.${style.infoContainer} > *`);

  return {
    ...baseUniDriverFactory(base),
    getMediaContent: async () => getMediaContainerElement().getNative(),
    isMediaContentExist: async () => getMediaContainerElement().exists(),
    getInfoContent: async () => getInfoContainerElement().getNative(),
    isInfoContentExist: async () => getInfoContainerElement().exists(),
    getRatio: async () => stylableUtil.getStyleState(base, 'ratio'),
    isFlippedRatio: async () =>
      stylableUtil.hasStyleState(base, 'flippedRatio'),
    isImagePositionInverted: async () =>
      stylableUtil.hasStyleState(base, 'invertInfoPosition'),
  };

export const textButtonDriverFactory = (base: UniDriver): TextButtonDriver => {
  const stylableUtil = new StylableUnidriverUtil(style);

  return {
    ...buttonNextDriverFactory(base),
    isMobile: async () => stylableUtil.hasStyleState(base, 'mobile'),
    hasPriority: async (priority: TEXT_BUTTON_PRIORITY) =>
      (await stylableUtil.getStyleState(base, 'priority')) === priority,
  };
};