@itcase/ui 1.1.6 → 1.1.8

package/dist/cjs/constants/componentProps/textTag.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const textTagProps = ['p', 'span'];
+
+exports.default = textTagProps;

package/dist/cjs/constants/componentProps/textWeight.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const textWeightProps = ['normal', 'bold', 'light', 'lighter', 'bolder', /* eslint-disable */
+'100', 100, '200', 200, '300', 300, '400', 400, '500', 500, '600', 600, '700', 700, '800', 800, '900', 900, '950', 950
+/* eslint-enable */];
+
+exports.default = textWeightProps;

package/dist/cjs/constants/componentProps/textWrap.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const textWrapProps = [null, 'wrap', 'nowrap'];
+
+exports.default = textWrapProps;

package/dist/cjs/constants/componentProps/titleSize.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const titleSizeProps = [null, 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+
+exports.default = titleSizeProps;

package/dist/cjs/constants/componentProps/type.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const typeProps = [null, 'accent', 'primary', 'secondary', 'tertiary', 'surface', 'error', 'success'];
+
+exports.default = typeProps;

package/dist/cjs/constants/componentProps/underline.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const underlineProps = [null, 'false', 'none', 'underline'];
+
+exports.default = underlineProps;

package/dist/cjs/constants/componentProps/verticalContentAlign.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const verticalContentAlignProps = [null, 'center'];
+
+exports.default = verticalContentAlignProps;

package/dist/cjs/constants/componentProps/verticalResizeMode.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const verticalResizeModeProps = [null, 'fixed', 'hug', 'fill'];
+
+exports.default = verticalResizeModeProps;

package/dist/cjs/constants/componentProps/width.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const widthProps = [null, 'fixed', 'hug', 'fill'];
+
+exports.default = widthProps;

package/dist/cjs/constants/componentProps/wrap.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const wrapProps = [null, 'wrap', 'no-wrap', 'nowrap', 'wrap-reverse'];
+
+exports.default = wrapProps;

package/dist/cjs/constants.js

@@ -0,0 +1,111 @@
+'use strict';
+
+var alignDirection = require('./constants/componentProps/alignDirection.js');
+var align = require('./constants/componentProps/align.js');
+var alignment = require('./constants/componentProps/alignment.js');
+var borderColorHover = require('./constants/componentProps/borderColorHover.js');
+var borderColor = require('./constants/componentProps/borderColor.js');
+var borderType = require('./constants/componentProps/borderType.js');
+var borderWidth = require('./constants/componentProps/borderWidth.js');
+var captionPosition = require('./constants/componentProps/captionPosition.js');
+var direction = require('./constants/componentProps/direction.js');
+var emojiSize = require('./constants/componentProps/emojiSize.js');
+var fillGradient = require('./constants/componentProps/fillGradient.js');
+var fillHover = require('./constants/componentProps/fillHover.js');
+var fill = require('./constants/componentProps/fill.js');
+var fillType = require('./constants/componentProps/fillType.js');
+var flexAlign = require('./constants/componentProps/flexAlign.js');
+var flexJustifyContent = require('./constants/componentProps/flexJustifyContent.js');
+var flexWrap = require('./constants/componentProps/flexWrap.js');
+var gridAlign = require('./constants/componentProps/gridAlign.js');
+var gridAlignSelf = require('./constants/componentProps/gridAlignSelf.js');
+var gridJustifyItems = require('./constants/componentProps/gridJustifyItems.js');
+var gridJustifySelf = require('./constants/componentProps/gridJustifySelf.js');
+var height = require('./constants/componentProps/height.js');
+var horizontalContentAlign = require('./constants/componentProps/horizontalContentAlign.js');
+var horizontalResizeMode = require('./constants/componentProps/horizontalResizeMode.js');
+var iconFillSize = require('./constants/componentProps/iconFillSize.js');
+var iconSize = require('./constants/componentProps/iconSize.js');
+var itemColor = require('./constants/componentProps/itemColor.js');
+var position = require('./constants/componentProps/position.js');
+var resizeMode = require('./constants/componentProps/resizeMode.js');
+var shape = require('./constants/componentProps/shape.js');
+var sizeInterface = require('./constants/componentProps/sizeInterface.js');
+var sizePX = require('./constants/componentProps/sizePX.js');
+var size = require('./constants/componentProps/size.js');
+var stacking = require('./constants/componentProps/stacking.js');
+var state = require('./constants/componentProps/state.js');
+var strokeColor = require('./constants/componentProps/strokeColor.js');
+var textAlign = require('./constants/componentProps/textAlign.js');
+var textColorActive = require('./constants/componentProps/textColorActive.js');
+var textColorHover = require('./constants/componentProps/textColorHover.js');
+var textColor = require('./constants/componentProps/textColor.js');
+var textGradient = require('./constants/componentProps/textGradient.js');
+var textSize = require('./constants/componentProps/textSize.js');
+var textStyle = require('./constants/componentProps/textStyle.js');
+var textTag = require('./constants/componentProps/textTag.js');
+var textWeight = require('./constants/componentProps/textWeight.js');
+var textWrap = require('./constants/componentProps/textWrap.js');
+var titleSize = require('./constants/componentProps/titleSize.js');
+var type = require('./constants/componentProps/type.js');
+var underline = require('./constants/componentProps/underline.js');
+var verticalContentAlign = require('./constants/componentProps/verticalContentAlign.js');
+var verticalResizeMode = require('./constants/componentProps/verticalResizeMode.js');
+var width = require('./constants/componentProps/width.js');
+var wrap = require('./constants/componentProps/wrap.js');
+
+
+
+exports.alignDirectionProps = alignDirection.default;
+exports.alignProps = align.default;
+exports.alignmentProps = alignment.default;
+exports.borderColorHoverProps = borderColorHover.default;
+exports.borderColorProps = borderColor.default;
+exports.borderTypeProps = borderType.default;
+exports.borderWidthProps = borderWidth.default;
+exports.captionPositionProps = captionPosition.default;
+exports.directionProps = direction.default;
+exports.emojiSizeProps = emojiSize.default;
+exports.fillGradientProps = fillGradient.default;
+exports.fillHoverProps = fillHover.default;
+exports.fillProps = fill.default;
+exports.fillTypeProps = fillType.default;
+exports.flexAlignProps = flexAlign.default;
+exports.flexJustifyContentProps = flexJustifyContent.default;
+exports.flexWrapProps = flexWrap.default;
+exports.gridAlignProps = gridAlign.default;
+exports.gridAlignSelfProps = gridAlignSelf.default;
+exports.gridJustifyItemsProps = gridJustifyItems.default;
+exports.gridJustifySelfProps = gridJustifySelf.default;
+exports.heightProps = height.default;
+exports.horizontalContentAlignProps = horizontalContentAlign.default;
+exports.horizontalResizeModeProps = horizontalResizeMode.default;
+exports.iconFillSizeProps = iconFillSize.default;
+exports.iconSizeProps = iconSize.default;
+exports.itemColorProps = itemColor.default;
+exports.positionProps = position.default;
+exports.resizeModeProps = resizeMode.default;
+exports.shapeProps = shape.default;
+exports.sizeInterfaceProps = sizeInterface.default;
+exports.sizePXProps = sizePX.default;
+exports.sizeProps = size.default;
+exports.stackingProps = stacking.default;
+exports.stateProps = state.default;
+exports.strokeColorProps = strokeColor.default;
+exports.textAlignProps = textAlign.default;
+exports.textColorActiveProps = textColorActive.default;
+exports.textColorHoverProps = textColorHover.default;
+exports.textColorProps = textColor.default;
+exports.textGradientProps = textGradient.default;
+exports.textSizeProps = textSize.default;
+exports.textStyleProps = textStyle.default;
+exports.textTagProps = textTag.default;
+exports.textWeightProps = textWeight.default;
+exports.textWrapProps = textWrap.default;
+exports.titleSizeProps = titleSize.default;
+exports.typeProps = type.default;
+exports.underlineProps = underline.default;
+exports.verticalContentAlignProps = verticalContentAlign.default;
+exports.verticalResizeModeProps = verticalResizeMode.default;
+exports.widthProps = width.default;
+exports.wrapProps = wrap.default;

package/dist/cjs/context/Notifications.js

@@ -0,0 +1,123 @@
+'use client';
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var uuid = require('uuid');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+
+const STATUSES = {
+  success: 'success',
+  info: 'info',
+  error: 'error',
+  warning: 'warning'
+};
+const NotificationsContext = /*#__PURE__*/React.createContext([]);
+const NotificationsAPIContext = /*#__PURE__*/React.createContext({
+  showNotification: () => {},
+  hideNotifications: () => {},
+  notificationStatuses: STATUSES
+});
+function NotificationsProvider(props) {
+  const [notifications, setNotifications] = React.useState([]);
+  const hideNotifications = React.useCallback(id => {
+    setNotifications(prevState => {
+      const currentNotification = prevState.find(notification => notification.id === id);
+      if (currentNotification) {
+        if (typeof currentNotification.onClose === 'function') {
+          currentNotification.onClose();
+        }
+        return prevState.filter(notification => notification.id !== id);
+      }
+      return prevState;
+    });
+  }, []);
+  const showNotification = React.useCallback((notification, onClose) => {
+    let id = uuid.v4().split('-')[0];
+    let title = '';
+    let text = '';
+    let status = STATUSES.warning;
+    let closeByTime = 4500;
+    let textColor = '';
+    if (typeof notification === 'string') {
+      text = notification;
+    } else if (typeof notification === 'object') {
+      id = notification.id ?? id;
+      title = notification.title ?? title;
+      text = notification.text ?? text;
+      status = notification.status ?? status;
+      closeByTime = notification.closeByTime ?? closeByTime;
+    }
+    switch (status) {
+      case 'success':
+        textColor = 'successTextPrimary';
+        break;
+      case 'info':
+        textColor = 'infoTextPrimary';
+        break;
+      case 'error':
+        textColor = 'errorTextPrimary';
+        break;
+      case 'warning':
+        textColor = 'warningTextPrimary';
+        break;
+    }
+    setNotifications(prevState => [...prevState, {
+      id: id,
+      title: title,
+      text: text,
+      status: status,
+      textColor: textColor,
+      onClose: onClose
+    }]);
+    if (closeByTime) {
+      setTimeout(() => hideNotifications(id), closeByTime);
+    }
+    return id;
+    // eslint-disable-next-line
+  }, []);
+  const notificationsAPI = React.useMemo(() => ({
+    showNotification: showNotification,
+    hideNotifications: hideNotifications,
+    notificationStatuses: STATUSES
+  }),
+  // Functions is never changes, no sense to set as dependencies
+  // eslint-disable-next-line
+  []);
+  return /*#__PURE__*/React__default.default.createElement(NotificationsAPIContext.Provider, {
+    value: notificationsAPI
+  }, /*#__PURE__*/React__default.default.createElement(NotificationsContext.Provider, {
+    value: notifications
+  }, props.children));
+}
+NotificationsProvider.propTypes = {
+  children: PropTypes__default.default.any
+};
+function useNotifications() {
+  return React.useContext(NotificationsContext);
+}
+function useNotificationsAPI() {
+  return React.useContext(NotificationsAPIContext);
+}
+NotificationsProvider.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "NotificationsProvider",
+  "props": {
+    "children": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    }
+  }
+};
+
+exports.NotificationsProvider = NotificationsProvider;
+exports.useNotifications = useNotifications;
+exports.useNotificationsAPI = useNotificationsAPI;

package/dist/cjs/context/UIContext.js

@@ -0,0 +1,57 @@
+'use client';
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var useMediaQueries = require('../hooks/useMediaQueries.js');
+require('react-responsive');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+
+const UserDeviceContext = /*#__PURE__*/React.createContext({
+  isMobile: false,
+  isTablet: false,
+  isDesktop: false
+});
+const SiteMenuContext = /*#__PURE__*/React.createContext({
+  isSiteMenuOpen: false,
+  setIsSiteMenuOpen: () => {}
+});
+function useUserDeviceContext() {
+  return React.useContext(UserDeviceContext);
+}
+function useSiteMenuContext() {
+  return React.useContext(SiteMenuContext);
+}
+const UIProvider = /*#__PURE__*/React.memo(function UIProvider(props) {
+  const {
+    children,
+    userDeviceState = {}
+  } = props;
+  const [isSiteMenuOpen, setIsSiteMenuOpen] = React.useState(false);
+  const siteMenuContextState = React.useMemo(() => ({
+    isSiteMenuOpen,
+    setIsSiteMenuOpen
+  }), [isSiteMenuOpen]);
+  const mediaQueriesDevices = useMediaQueries.useMediaQueries(userDeviceState);
+  return /*#__PURE__*/React__default.default.createElement(UserDeviceContext.Provider, {
+    value: mediaQueriesDevices
+  }, /*#__PURE__*/React__default.default.createElement(SiteMenuContext.Provider, {
+    value: siteMenuContextState
+  }, children));
+});
+UIProvider.propTypes = {
+  children: PropTypes__default.default.any,
+  userDeviceState: PropTypes__default.default.shape({
+    isMobile: PropTypes__default.default.bool,
+    isTablet: PropTypes__default.default.bool,
+    isDesktop: PropTypes__default.default.bool
+  })
+};
+
+exports.UIProvider = UIProvider;
+exports.useSiteMenuContext = useSiteMenuContext;
+exports.useUserDeviceContext = useUserDeviceContext;

package/dist/cjs/context/index.d.ts

@@ -0,0 +1,2 @@
+export { NotificationsProvider, useNotifications, useNotificationsAPI } from './Notifications';
+export { UIProvider, useSiteMenuContext, useUserDeviceContext } from './UIContext';

package/dist/cjs/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { useDeviceTargetClass } from './useDeviceTargetClass';
+export { useMediaQueries } from './useMediaQueries';
+export { useStyles } from './useStyles';

package/dist/cjs/hooks/styleAttributes.interface.d.ts

@@ -0,0 +1,143 @@
+export interface TypeStyleAttributes {
+    /**
+     * Layout
+     */
+    alignContent?: string;
+    alignItems?: string;
+    alignSelf?: string;
+    aspectRatio?: string;
+    border?: string;
+    borderBottomWidth?: string;
+    borderEndWidth?: string;
+    borderLeftWidth?: string;
+    borderRightWidth?: string;
+    borderStartWidth?: string;
+    borderTopWidth?: string;
+    bottom?: string;
+    columnGap?: string;
+    columnWidth?: string;
+    display?: string;
+    end?: string;
+    flex?: string;
+    flexBasis?: string;
+    flexDirection?: string;
+    flexShrink?: string;
+    flexWrap?: string;
+    gap?: string;
+    height?: string;
+    left?: string;
+    margin?: string;
+    marginBottom?: string;
+    marginEnd?: string;
+    marginHorizontal?: string;
+    marginLeft?: string;
+    marginRight?: string;
+    marginStart?: string;
+    marginTop?: string;
+    marginVertical?: string;
+    maxHeight?: string;
+    maxWidth?: string;
+    minHeight?: string;
+    minWidth?: string;
+    order?: string;
+    overflow?: string;
+    padding?: string;
+    paddingBottom?: string;
+    paddingEnd?: string;
+    paddingHorizontal?: string;
+    paddingLeft?: string;
+    paddingRight?: string;
+    paddingStart?: string;
+    paddingTop?: string;
+    paddingVertical?: string;
+    position?: string;
+    right?: string;
+    rowGap?: string;
+    start?: string;
+    top?: string;
+    width?: string;
+    zIndex?: string;
+    /**
+     * Shadow
+     */
+    shadowColor?: string;
+    shadowOffset?: string;
+    shadowOpacity?: string;
+    shadowRadius?: string;
+    /**
+     * Transform
+     */
+    transform?: string;
+    /**
+     * View
+     */
+    background?: string;
+    backgroundColor?: string;
+    borderBottomColor?: string;
+    borderBottomEndRadius?: string;
+    borderBottomLeftRadius?: string;
+    borderBottomRightRadius?: string;
+    borderBottomStartRadius?: string;
+    borderCurve?: string;
+    borderEndColor?: string;
+    borderLeftColor?: string;
+    borderRadius?: string;
+    borderRightColor?: string;
+    borderStartColor?: string;
+    borderStyle?: string;
+    borderTopColor?: string;
+    borderTopEndRadius?: string;
+    borderTopLeftRadius?: string;
+    borderTopRightRadius?: string;
+    borderTopStartRadius?: string;
+    cursor?: string;
+    opacity?: string;
+    /**
+     * Text
+     */
+    color?: string;
+    fontFamily?: string;
+    fontSize?: string;
+    fontStyle?: string;
+    fontVariant?: string;
+    fontWeight?: string;
+    letterSpacing?: string;
+    lineHeight?: string;
+    textAlign?: string;
+    textDecorationColor?: string;
+    textDecorationLine?: string;
+    textDecorationStyle?: string;
+    textShadowColor?: string;
+    textShadowOffset?: string;
+    textShadowRadius?: string;
+    textTransform?: string;
+    verticalAlign?: string;
+    writingMode?: string;
+    whiteSpace?: string;
+    /**
+     * Image
+     */
+    objectFit?: string;
+    overlayColor?: string;
+    resizeMode?: string;
+    tintColor?: string;
+    /**
+     * Grid
+     */
+    gridArea?: string;
+    gridAutoColumns?: string;
+    gridAutoFlow?: string;
+    gridAutoRows?: string;
+    gridColumn?: string;
+    gridColumnGap?: string;
+    gridRow?: string;
+    gridRowGap?: string;
+    gridTemplate?: string;
+    gridTemplateAreas?: string;
+    gridTemplateColumns?: string;
+    gridTemplateRows?: string;
+    /**
+     * Filter
+     */
+    backdropFilter?: string;
+}

package/dist/cjs/hooks/styleAttributes.js

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styleAttributes = [
+/**
+ * Layout
+ */
+'alignContent', 'alignItems', 'alignSelf', 'aspectRatio', 'border', 'borderBottomWidth', 'borderEndWidth', 'borderLeftWidth', 'borderRightWidth', 'borderStartWidth', 'borderTopWidth', 'borderWidth', 'bottom', 'display', 'flex', 'flexBasis', 'flexDirection', 'flexGrow', 'flexShrink', 'flexWrap', 'gap', 'rowGap', 'columnGap', 'columnWidth', 'height', 'justifyContent', 'left', 'margin', 'marginBottom', 'marginEnd', 'marginHorizontal', 'marginLeft', 'marginRight', 'marginStart', 'marginTop', 'marginVertical', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'overflow', 'padding', 'paddingBottom', 'paddingEnd', 'paddingHorizontal', 'paddingLeft', 'paddingRight', 'paddingStart', 'paddingTop', 'paddingVertical', 'position', 'right', 'top', 'width', 'zIndex', 'order',
+/**
+ * Shadow
+ */
+'elevation', 'shadowColor', 'shadowOffset', 'shadowOpacity', 'shadowRadius',
+/**
+ * Transform
+ */
+'transform',
+/**
+ * View
+ */
+'background', 'backgroundColor', 'borderBottomColor', 'borderBottomEndRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderBottomStartRadius', 'borderColor', 'borderCurve', 'borderEndColor', 'borderLeftColor', 'borderRadius', 'borderRightColor', 'borderStartColor', 'borderStyle', 'borderTopColor', 'borderTopEndRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderTopStartRadius', 'opacity', 'cursor',
+/**
+ * Text
+ */
+'color', 'fontFamily', 'fontSize', 'fontStyle', 'fontVariant', 'fontWeight', 'letterSpacing', 'lineHeight', 'textAlign', 'textDecorationColor', 'textDecorationLine', 'textDecorationStyle', 'textShadowColor', 'textShadowOffset', 'textShadowRadius', 'textTransform', 'verticalAlign', 'writingMode', 'whiteSpace',
+/**
+ * Image
+ */
+'overlayColor', 'resizeMode', 'tintColor', 'objectFit',
+/**
+ * Grid
+ */
+'gridTemplateColumns', 'gridArea', 'gridAutoColumns', 'gridAutoFlow', 'gridAutoRows', 'gridTemplate', 'gridTemplateAreas', 'gridTemplateRows', 'gridColumn', 'gridColumnGap', 'gridRow', 'gridRowGap',
+/**
+ * Filter
+ */
+'backdropFilter'];
+
+exports.default = styleAttributes;

package/dist/cjs/hooks/useDeviceTargetClass.js

@@ -0,0 +1,61 @@
+'use strict';
+
+var React = require('react');
+var castArray = require('lodash/castArray');
+var camelCase = require('lodash/camelCase');
+var UIContext = require('../context/UIContext.js');
+require('prop-types');
+require('./useMediaQueries.js');
+require('react-responsive');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var castArray__default = /*#__PURE__*/_interopDefault(castArray);
+var camelCase__default = /*#__PURE__*/_interopDefault(camelCase);
+
+function useDeviceTargetClass(componentProps, hookProps) {
+  /** Generate a class depending on the user's device.
+   *
+   * Usage:
+   *  const sizeClass = useDeviceTargetClass(props, {
+   *    prefix: 'some-item_size_',
+   *    propsKey: 'size',
+   *  })
+   * Return: "some-item_size_m" (or "s", or "l", or something else)
+   *
+   * "componentProps" - "props" from component
+   * "hookProps" - special props for generating class
+   **/
+
+  const {
+    prefix = '',
+    propsKey,
+    replace = [/([A-Z])/g, '-$1']
+  } = hookProps;
+  const {
+    isMobile,
+    isTablet,
+    isDesktop
+  } = UIContext.useUserDeviceContext();
+  const targetClassValue = React.useMemo(() => {
+    // prettier-ignore
+    const deviceBasePart = isMobile && 'Mobile' || isTablet && 'Tablet' || isDesktop && 'Desktop' || '';
+    const valueForDevice = componentProps[`${propsKey}${deviceBasePart}`];
+    const valueDefault = componentProps[propsKey];
+    return valueForDevice || valueDefault;
+  }, [isMobile, isTablet, isDesktop, componentProps[propsKey], componentProps[`${propsKey}Mobile`], componentProps[`${propsKey}Tablet`], componentProps[`${propsKey}Desktop`]]);
+  const targetClass = React.useMemo(() => {
+    if (targetClassValue) {
+      let cleanClassValue = camelCase__default.default(String(targetClassValue));
+      if (replace) {
+        const replaceList = castArray__default.default(replace);
+        cleanClassValue = cleanClassValue.replace(replaceList[0], replaceList[1] || '');
+      }
+      return `${prefix}${cleanClassValue}`.toLowerCase();
+    }
+    return null;
+  }, [targetClassValue, prefix, replace]);
+  return targetClass;
+}
+
+exports.useDeviceTargetClass = useDeviceTargetClass;