@hitachivantara/uikit-react-core 5.106.1 → 6.0.0-next.2

package/dist/cjs/ColorPicker/ColorPicker.cjs

@@ -1,234 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const LabelContainer = require("../FormElement/LabelContainer.cjs");
-const useControlled = require("../hooks/useControlled.cjs");
-const useLabels = require("../hooks/useLabels.cjs");
-const useUniqueId = require("../hooks/useUniqueId.cjs");
-const icons = require("../icons.cjs");
-const setId = require("../utils/setId.cjs");
-const ColorPicker_styles = require("./ColorPicker.styles.cjs");
-const PresetColors = require("./PresetColors/PresetColors.cjs");
-const Picker = require("./Picker/Picker.cjs");
-const SavedColors = require("./SavedColors/SavedColors.cjs");
-const FormElement = require("../FormElement/FormElement.cjs");
-const BaseDropdown = require("../BaseDropdown/BaseDropdown.cjs");
-const Panel = require("../Panel/Panel.cjs");
-const Typography = require("../Typography/Typography.cjs");
-const DEFAULT_LABELS = {
-  recommendedColorsLabel: "Recommended colors:",
-  customColorsLabel: "Custom colors:"
-};
-const HvColorPicker = React.forwardRef(
-  function HvColorPicker2(props, ref) {
-    const {
-      id,
-      name,
-      required,
-      disabled,
-      label,
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledBy,
-      description,
-      "aria-describedby": ariaDescribedBy,
-      className,
-      classes: classesProp,
-      value,
-      onChange,
-      onChangeComplete,
-      defaultValue = "",
-      expanded,
-      defaultExpanded = false,
-      recommendedColorsPosition = "top",
-      recommendedColors = [
-        "#95AFE8",
-        "#E89E5D",
-        "#83B8A6",
-        "#70759C",
-        "#C57E7E",
-        "#FADA95",
-        "#ADBFE8",
-        "#E3B386",
-        "#9AC6B7",
-        "#8B90AF",
-        "#CF9797",
-        "#FAE1AA"
-      ],
-      showLabels = true,
-      labels: labelsProp,
-      dropdownIcon = "colorPicker",
-      placeholder = "Select color...",
-      iconOnly = false,
-      showSavedColors = true,
-      showCustomColors = true,
-      savedColorsValue,
-      defaultSavedColorsValue = [],
-      onSavedColorAdded,
-      onSavedColorRemoved,
-      deleteSavedColorButtonArialLabel = "Delete saved color",
-      addSavedColorButtonAriaLabel = "Add current color to saved colors"
-    } = uikitReactUtils.useDefaultProps("HvColorPicker", props);
-    const { classes, cx } = ColorPicker_styles.useClasses(classesProp);
-    const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
-    const [isOpen, setIsOpen] = useControlled.useControlled(expanded, defaultExpanded);
-    const [color, setColor] = useControlled.useControlled(value, defaultValue);
-    const [savedColors, setSavedColors] = useControlled.useControlled(
-      savedColorsValue,
-      defaultSavedColorsValue
-    );
-    const elementId = useUniqueId.useUniqueId(id);
-    const handleToggle = (_, open) => {
-      setIsOpen(open);
-    };
-    const handleSelect = (val) => {
-      onChange?.(val.hex);
-      onChangeComplete?.(val.hex);
-      setColor(val.hex);
-    };
-    const handleOnChange = (val) => {
-      onChange?.(val.hex);
-      setColor(val.hex);
-    };
-    const handleOnChangeComplete = (val) => {
-      onChangeComplete?.(val.hex);
-      setColor(val.hex);
-    };
-    const handleAddColor = () => {
-      const colorToAdd = color || "#000000";
-      onSavedColorAdded?.(colorToAdd);
-      setSavedColors([...savedColors, colorToAdd]);
-    };
-    const handleRemoveColor = (val, position) => {
-      if (savedColors[position] === val) {
-        const sColors = [...savedColors];
-        sColors.splice(position, 1);
-        onSavedColorRemoved?.(val);
-        setSavedColors(sColors);
-      }
-    };
-    const setFocusToContent = (containerRef) => {
-      const inputs = containerRef?.getElementsByTagName("input");
-      if (inputs && inputs.length > 0) {
-        inputs[0].focus();
-      }
-    };
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      FormElement.HvFormElement,
-      {
-        id,
-        name,
-        disabled,
-        required,
-        className: cx(classes.root, className),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            LabelContainer.HvLabelContainer,
-            {
-              label,
-              description,
-              labelId: setId.setId(elementId, "label"),
-              descriptionId: setId.setId(elementId, "description"),
-              classes: {
-                root: classes.labelContainer,
-                label: classes.label,
-                description: classes.description
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            BaseDropdown.HvBaseDropdown,
-            {
-              ref,
-              variableWidth: true,
-              className,
-              expanded: isOpen,
-              onToggle: handleToggle,
-              onContainerCreation: setFocusToContent,
-              classes: {
-                root: cx({ [classes.dropdownRootIconOnly]: iconOnly })
-              },
-              adornment: iconOnly && color ? /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  style: { backgroundColor: color },
-                  className: cx(
-                    classes.headerColorIcon,
-                    classes.headerColorIconOnly
-                  )
-                }
-              ) : dropdownIcon === "colorPicker" ? /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "ColorPicker", className: classes.colorPickerIcon }) : void 0,
-              placeholder: iconOnly ? void 0 : color ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    style: { backgroundColor: color },
-                    className: classes.headerColorIcon
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  Typography.HvTypography,
-                  {
-                    className: classes.headerColorValue,
-                    variant: "label",
-                    children: color
-                  }
-                )
-              ] }) : placeholder,
-              "aria-label": ariaLabel,
-              "aria-labelledby": [label && setId.setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || void 0,
-              "aria-describedby": [description && setId.setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0,
-              children: /* @__PURE__ */ jsxRuntime.jsx(Panel.HvPanel, { className: classes.panel, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.colorPicker, children: [
-                recommendedColorsPosition === "top" && /* @__PURE__ */ jsxRuntime.jsx(
-                  PresetColors.PresetColors,
-                  {
-                    className: classes.recommendedColorsRoot,
-                    colors: recommendedColors,
-                    onClick: handleSelect,
-                    title: showLabels ? labels.recommendedColorsLabel : void 0
-                  }
-                ),
-                showCustomColors && /* @__PURE__ */ jsxRuntime.jsx(
-                  Picker.Picker,
-                  {
-                    classes: {
-                      fields: cx({
-                        [classes.pickerFields]: recommendedColorsPosition === "bottom" || showSavedColors
-                      })
-                    },
-                    title: showLabels ? labels.customColorsLabel : void 0,
-                    color,
-                    onChange: handleOnChange,
-                    onChangeComplete: handleOnChangeComplete
-                  }
-                ),
-                showSavedColors && /* @__PURE__ */ jsxRuntime.jsx(
-                  SavedColors.SavedColors,
-                  {
-                    colors: savedColors,
-                    onAddColor: handleAddColor,
-                    onClickColor: handleSelect,
-                    onRemoveColor: handleRemoveColor,
-                    deleteButtonAriaLabel: deleteSavedColorButtonArialLabel,
-                    addButtonAriaLabel: addSavedColorButtonAriaLabel
-                  }
-                ),
-                recommendedColorsPosition === "bottom" && /* @__PURE__ */ jsxRuntime.jsx(
-                  PresetColors.PresetColors,
-                  {
-                    colors: recommendedColors,
-                    onClick: handleSelect,
-                    title: showLabels ? labels.recommendedColorsLabel : void 0
-                  }
-                )
-              ] }) })
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-exports.colorPickerClasses = ColorPicker_styles.staticClasses;
-exports.HvColorPicker = HvColorPicker;

package/dist/cjs/ColorPicker/ColorPicker.styles.cjs

@@ -1,52 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvColorPicker", {
-  root: {},
-  labelContainer: {},
-  label: {},
-  description: {},
-  headerColorValue: {
-    textTransform: "uppercase",
-    minWidth: "8ch",
-    fontVariant: "tabular-nums"
-  },
-  headerColorIcon: {
-    width: 16,
-    height: 16,
-    marginRight: 8,
-    flexShrink: 0
-  },
-  panel: {
-    width: "100%",
-    minWidth: "266px",
-    display: "flex",
-    justifyContent: "center",
-    padding: "16px",
-    backgroundColor: "transparent"
-  },
-  colorPicker: {
-    width: "232px"
-  },
-  colorPickerIcon: {},
-  recommendedColorsRoot: {
-    ":not(:only-child)": {
-      paddingBottom: "24px"
-    }
-  },
-  dropdownRootIconOnly: {
-    "&,& .HvBaseDropdown-arrowContainer": {
-      width: 32,
-      height: 32
-    },
-    "& .HvBaseDropdown-selection": {
-      padding: 0
-    }
-  },
-  headerColorIconOnly: {
-    margin: 8
-  },
-  pickerFields: { paddingBottom: 20 }
-});
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/ColorPicker/Fields/Fields.cjs

@@ -1,152 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const color = require("react-color/lib/helpers/color");
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const Fields_styles = require("./Fields.styles.cjs");
-const Input = require("../../Input/Input.cjs");
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const color__namespace = /* @__PURE__ */ _interopNamespace(color);
-const Fields = (props) => {
-  const {
-    className,
-    onChange,
-    rgb,
-    hex,
-    classes: classesProp
-  } = uikitReactUtils.useDefaultProps("HvColorPickerFields", props);
-  const { classes, cx } = Fields_styles.useClasses(classesProp);
-  const [internalHex, setInternalHex] = React.useState(hex);
-  const [internalRed, setInternalRed] = React.useState(rgb?.r);
-  const [internalGreen, setInternalGreen] = React.useState(rgb?.g);
-  const [internalBlue, setInternalBlue] = React.useState(rgb?.b);
-  const hexInputRef = React.useRef(null);
-  const redInputRef = React.useRef(null);
-  const greenInputRef = React.useRef(null);
-  const blueInputRef = React.useRef(null);
-  React.useEffect(() => {
-    if (document.activeElement !== hexInputRef.current) {
-      setInternalHex(hex);
-    }
-  }, [hex]);
-  React.useEffect(() => {
-    if (document.activeElement !== redInputRef.current) {
-      setInternalRed(rgb?.r);
-    }
-    if (document.activeElement !== greenInputRef.current) {
-      setInternalGreen(rgb?.g);
-    }
-    if (document.activeElement !== blueInputRef.current) {
-      setInternalBlue(rgb?.b);
-    }
-  }, [rgb]);
-  const handleChange = (data, event) => {
-    if (data.hex && color__namespace.isValidHex(data.hex)) {
-      onChange(
-        {
-          hex: data.hex,
-          source: "hex"
-        },
-        event
-      );
-    } else if (data.r !== void 0 || data.g !== void 0 || data.b !== void 0) {
-      onChange(
-        {
-          r: data.r ?? rgb?.r,
-          g: data.g ?? rgb?.g,
-          b: data.b ?? rgb?.b,
-          source: "rgb"
-        },
-        event
-      );
-    }
-  };
-  const onChangeHex = (event, value) => {
-    setInternalHex(value);
-    handleChange({ hex: value }, event);
-  };
-  const onChangeRbg = (event, value, colorPart) => {
-    if (colorPart === "r") setInternalRed(Number(value));
-    if (colorPart === "g") setInternalGreen(Number(value));
-    if (colorPart === "b") setInternalBlue(Number(value));
-    handleChange(
-      {
-        r: colorPart === "r" ? Number(value) : rgb?.r,
-        g: colorPart === "g" ? Number(value) : rgb?.g,
-        b: colorPart === "b" ? Number(value) : rgb?.b
-      },
-      event
-    );
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(classes.fields, className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Input.HvInput,
-      {
-        ref: hexInputRef,
-        className: classes.double,
-        label: "HEX",
-        value: internalHex?.replace("#", ""),
-        onChange: onChangeHex,
-        onBlur: () => setInternalHex(hex),
-        disableClear: true
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Input.HvInput,
-      {
-        ref: redInputRef,
-        className: classes.single,
-        label: "R",
-        value: internalRed,
-        onChange: (event, value) => onChangeRbg(event, value, "r"),
-        onBlur: () => setInternalRed(rgb?.r),
-        inputProps: { type: "number", min: 0, max: 255 },
-        disableClear: true
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Input.HvInput,
-      {
-        ref: greenInputRef,
-        className: classes.single,
-        label: "G",
-        value: internalGreen,
-        onChange: (event, value) => onChangeRbg(event, value, "g"),
-        onBlur: () => setInternalGreen(rgb?.g),
-        inputProps: { type: "number", min: 0, max: 255 },
-        disableClear: true
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Input.HvInput,
-      {
-        ref: blueInputRef,
-        className: classes.single,
-        label: "B",
-        value: internalBlue,
-        onChange: (event, value) => onChangeRbg(event, value, "b"),
-        onBlur: () => setInternalBlue(rgb?.b),
-        inputProps: { type: "number", min: 0, max: 255 },
-        disableClear: true
-      }
-    )
-  ] });
-};
-exports.Fields = Fields;

package/dist/cjs/ColorPicker/Fields/Fields.styles.cjs

@@ -1,36 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const uikitStyles = require("@hitachivantara/uikit-styles");
-const { useClasses } = uikitReactUtils.createClasses("HvColorPickerFields", {
-  fields: {
-    width: "100%",
-    display: "flex",
-    paddingTop: "18px",
-    marginRight: "0px"
-  },
-  single: {
-    maxWidth: "50px",
-    paddingLeft: uikitStyles.theme.space.xxs,
-    "& input": {
-      marginLeft: 5,
-      marginRight: 5
-    },
-    "& label": {
-      paddingLeft: 5
-    }
-  },
-  double: {
-    maxWidth: "82px",
-    paddingRight: uikitStyles.theme.space.xxs,
-    "& input": {
-      textTransform: "uppercase",
-      marginLeft: 5,
-      marginRight: 5
-    },
-    "& label": {
-      paddingLeft: 5
-    }
-  }
-});
-exports.useClasses = useClasses;

package/dist/cjs/ColorPicker/Picker/Picker.cjs

@@ -1,73 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const reactColor = require("react-color");
-const common = require("react-color/lib/components/common");
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const Picker_styles = require("./Picker.styles.cjs");
-const Fields = require("../Fields/Fields.cjs");
-const Typography = require("../../Typography/Typography.cjs");
-const Component = (props) => {
-  const {
-    onChange,
-    rgb,
-    hsl,
-    hsv,
-    hex,
-    title,
-    classes: classesProp
-  } = uikitReactUtils.useDefaultProps("HvColorPickerPicker", props);
-  const { activeTheme } = uikitReactUtils.useTheme();
-  const { classes, cx } = Picker_styles.useClasses(classesProp);
-  const SaturationPointer = React.useCallback(
-    () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes?.saturationPointer }),
-    [classes?.saturationPointer]
-  );
-  const HueSlider = React.useCallback(
-    () => /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: cx(
-          classes?.hueSlider,
-          activeTheme?.colorPicker.hueDirection
-        )
-      }
-    ),
-    [activeTheme?.colorPicker.hueDirection, classes?.hueSlider, cx]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    title && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { className: classes.title, variant: "caption1", children: title }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.pickers, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.saturation, children: /* @__PURE__ */ jsxRuntime.jsx(
-        common.Saturation,
-        {
-          hsl,
-          hsv,
-          onChange,
-          pointer: SaturationPointer
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.hue, children: /* @__PURE__ */ jsxRuntime.jsx(
-        common.Hue,
-        {
-          direction: activeTheme?.colorPicker.hueDirection,
-          hsl,
-          onChange,
-          pointer: HueSlider
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Fields.Fields,
-      {
-        className: classes.fields,
-        rgb,
-        hex,
-        onChange
-      }
-    )
-  ] });
-};
-const Picker = reactColor.CustomPicker(Component);
-exports.Picker = Picker;

package/dist/cjs/ColorPicker/Picker/Picker.styles.cjs

@@ -1,65 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const uikitStyles = require("@hitachivantara/uikit-styles");
-const { useClasses } = uikitReactUtils.createClasses("HvColorPickerPicker", {
-  pickers: {
-    display: "flex",
-    flexDirection: "column"
-  },
-  saturation: {
-    width: "232px",
-    height: "140px",
-    marginRight: "0px",
-    position: "relative",
-    overflow: "visible",
-    "& > div": {
-      borderRadius: uikitStyles.theme.radii.base,
-      "& .saturation-white": {
-        borderRadius: uikitStyles.theme.radii.base,
-        "& .saturation-black": {
-          borderRadius: uikitStyles.theme.radii.base
-        }
-      }
-    }
-  },
-  saturationPointer: {
-    width: "8px",
-    height: "8px",
-    boxShadow: `0 0 0 2px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),
-            0 0 1px 2px rgba(0,0,0,.4)`,
-    borderRadius: uikitStyles.theme.radii.full,
-    transform: "translate(-3px, -3px)"
-  },
-  hue: {
-    height: "8px",
-    width: "232px",
-    position: "relative",
-    overflow: "visible",
-    marginTop: "18px",
-    "& .hue-horizontal": {
-      borderRadius: `calc(2*${uikitStyles.theme.radii.base})`
-    }
-  },
-  hueSlider: {
-    width: "12px",
-    height: "12px",
-    background: "transparent",
-    boxShadow: "0 0 2px rgb(0 0 0 / 60%)",
-    marginLeft: "0px",
-    border: "2px solid #fff",
-    borderRadius: uikitStyles.theme.radii.full,
-    "&.vertical": {
-      transform: "translate(0px, -2px)"
-    },
-    "&.horizontal": {
-      transform: "translate(-6px, -2px)"
-    }
-  },
-  title: {
-    fontWeight: uikitStyles.theme.fontWeights.semibold,
-    marginBottom: 8
-  },
-  fields: {}
-});
-exports.useClasses = useClasses;

package/dist/cjs/ColorPicker/PresetColors/PresetColors.cjs

@@ -1,46 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const common = require("react-color/lib/components/common");
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const uikitStyles = require("@hitachivantara/uikit-styles");
-const PresetColors_styles = require("./PresetColors.styles.cjs");
-const Typography = require("../../Typography/Typography.cjs");
-const PresetColors = (props) => {
-  const {
-    onClick,
-    colors,
-    title,
-    className,
-    classes: classesProp
-  } = uikitReactUtils.useDefaultProps("HvColorPickerPresetColors", props);
-  const { classes, cx } = PresetColors_styles.useClasses(classesProp);
-  const handleClick = (hex) => {
-    onClick({
-      hex,
-      source: "hex"
-    });
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(classes.root, className), children: [
-    title && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { className: classes.title, variant: "caption1", children: title }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.colors, children: colors.map((color, index) => /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: classes.swatchWrap,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          common.Swatch,
-          {
-            color,
-            style: { backgroundColor: uikitStyles.getColor(color) },
-            onClick: handleClick,
-            focusStyle: {
-              boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`
-            }
-          }
-        )
-      },
-      `recommended-color-${color}-${index}`
-    )) })
-  ] });
-};
-exports.PresetColors = PresetColors;

package/dist/cjs/ColorPicker/PresetColors/PresetColors.styles.cjs

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const uikitStyles = require("@hitachivantara/uikit-styles");
-const { useClasses } = uikitReactUtils.createClasses("HvColorPickerPresetColors", {
-  root: { width: "232px" },
-  colors: {
-    display: "flex",
-    flexWrap: "wrap",
-    position: "relative",
-    width: "calc(100% + 8px)",
-    margin: "-4px -4px",
-    padding: 0
-  },
-  title: {
-    fontWeight: uikitStyles.theme.fontWeights.semibold,
-    marginBottom: 8
-  },
-  swatchWrap: {
-    width: "32px",
-    height: "32px",
-    margin: uikitStyles.theme.space.xxs,
-    "& > span > div": {
-      borderRadius: uikitStyles.theme.radii.base
-    }
-  }
-});
-exports.useClasses = useClasses;