@hitachivantara/uikit-react-core 5.89.0 → 5.91.0

package/dist/esm/BaseRadio/BaseRadio.js

@@ -5,11 +5,9 @@ import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./BaseRadio.styles.js";
 import { staticClasses } from "./BaseRadio.styles.js";
 import { Selected, Unselected } from "./icons.js";
-const getSelectorIcons = () => {
-  return {
-    radio: /* @__PURE__ */ jsx(Unselected, {}),
-    radioChecked: /* @__PURE__ */ jsx(Selected, {})
-  };
+const icons = {
+  radio: /* @__PURE__ */ jsx(Unselected, {}),
+  radioChecked: /* @__PURE__ */ jsx(Selected, {})
 };
 const HvBaseRadio = forwardRef(
   function HvBaseRadio2(props, ref) {
@@ -49,7 +47,6 @@ const HvBaseRadio = forwardRef(
       },
       [onBlur]
     );
-    const icons = getSelectorIcons();
     const onLocalChange = useCallback(
       (evt) => {
         if (readOnly) {
@@ -95,6 +92,5 @@ const HvBaseRadio = forwardRef(
 );
 export {
   HvBaseRadio,
-  staticClasses as baseRadioClasses,
-  getSelectorIcons
+  staticClasses as baseRadioClasses
 };

package/dist/esm/BaseRadio/BaseRadio.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseRadio.js","sources":["../../../src/BaseRadio/BaseRadio.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\nimport MuiRadio, { RadioProps as MuiRadioProps } from \"@mui/material/Radio\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { staticClasses, useClasses } from \"./BaseRadio.styles\";\nimport { Selected, Unselected } from \"./icons\";\n\nexport { staticClasses as baseRadioClasses };\n\nexport type HvBaseRadioClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseRadioProps\n  extends Omit<MuiRadioProps, \"onChange\" | \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the radio button.\n   */\n  classes?: HvBaseRadioClasses;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * The input name.\n   */\n  name?: string;\n  /**\n   * The value of the input.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * Indicates that user input is required.\n   */\n  required?: boolean;\n  /**\n   * Indicates that the input is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that the input is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the radio button is selected, if set to `false` the radio button is not selected.\n   *\n   * When defined the radio button state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * The callback fired when the radio button is pressed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n    value: any,\n  ) => void;\n  /**\n   * Whether the selector should use semantic colors.\n   */\n  semantic?: boolean;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible?: (event: React.FocusEvent<any>) => void;\n  /**\n   * @ignore\n   */\n  onBlur?: (event: React.FocusEvent<any>) => void;\n}\n\nexport const getSelectorIcons = () => {\n  return {\n    radio: <Unselected />,\n    radioChecked: <Selected />,\n  };\n};\n\n/**\n * A Radio Button is a mechanism that allows user to select one or more options.\n *\n * The Base Radio Button is a building block of the Radio Button form element. Don't\n * use unless implementing a custom use case not covered by the Radio Button form element.\n */\nexport const HvBaseRadio = forwardRef<HTMLButtonElement, HvBaseRadioProps>(\n  function HvBaseRadio(props, ref) {\n    const {\n      classes: classesProp,\n      className,\n      id,\n      name,\n      value = \"on\",\n      required = false,\n      readOnly = false,\n      disabled = false,\n      checked,\n      defaultChecked,\n      onChange,\n      semantic = false,\n      inputProps,\n      onFocusVisible,\n      onBlur,\n      icon,\n      checkedIcon,\n      ...others\n    } = useDefaultProps(\"HvBaseRadio\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const [focusVisible, setFocusVisible] = useState(false);\n\n    const onFocusVisibleCallback = useCallback(\n      (evt: React.FocusEvent<any>) => {\n        setFocusVisible(true);\n        onFocusVisible?.(evt);\n      },\n      [onFocusVisible],\n    );\n\n    const onBlurCallback = useCallback(\n      (evt: React.FocusEvent<any>) => {\n        setFocusVisible(false);\n        onBlur?.(evt);\n      },\n      [onBlur],\n    );\n\n    const icons = getSelectorIcons();\n\n    const onLocalChange = useCallback(\n      (evt: React.ChangeEvent<HTMLInputElement>) => {\n        if (readOnly) {\n          return;\n        }\n\n        onChange?.(evt, evt.target.checked, value);\n      },\n      [onChange, readOnly, value],\n    );\n\n    return (\n      <MuiRadio\n        ref={ref}\n        id={id}\n        name={name}\n        className={cx(\n          classes.root,\n          {\n            [classes.disabled]: disabled,\n            [classes.focusVisible]: focusVisible,\n            [classes.checked]: checked,\n            [classes.semantic]: semantic,\n          },\n          className,\n        )}\n        icon={icon || icons.radio}\n        checkedIcon={checkedIcon || icons.radioChecked}\n        color=\"default\"\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        onChange={onLocalChange}\n        value={value}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        inputProps={inputProps}\n        onFocusVisible={onFocusVisibleCallback}\n        onBlur={onBlurCallback}\n        {...others}\n      />\n    );\n  },\n);\n"],"names":["HvBaseRadio"],"mappings":";;;;;;;AAuFO,MAAM,mBAAmB,MAAM;AAC7B,SAAA;AAAA,IACL,2BAAQ,YAAW,EAAA;AAAA,IACnB,kCAAe,UAAS,CAAA,CAAA;AAAA,EAC1B;AACF;AAQO,MAAM,cAAc;AAAA,EACzB,SAASA,aAAY,OAAO,KAAK;AACzB,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,eAAe,KAAK;AAExC,UAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,UAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,UAAM,yBAAyB;AAAA,MAC7B,CAAC,QAA+B;AAC9B,wBAAgB,IAAI;AACpB,yBAAiB,GAAG;AAAA,MACtB;AAAA,MACA,CAAC,cAAc;AAAA,IACjB;AAEA,UAAM,iBAAiB;AAAA,MACrB,CAAC,QAA+B;AAC9B,wBAAgB,KAAK;AACrB,iBAAS,GAAG;AAAA,MACd;AAAA,MACA,CAAC,MAAM;AAAA,IACT;AAEA,UAAM,QAAQ,iBAAiB;AAE/B,UAAM,gBAAgB;AAAA,MACpB,CAAC,QAA6C;AAC5C,YAAI,UAAU;AACZ;AAAA,QAAA;AAGF,mBAAW,KAAK,IAAI,OAAO,SAAS,KAAK;AAAA,MAC3C;AAAA,MACA,CAAC,UAAU,UAAU,KAAK;AAAA,IAC5B;AAGE,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR;AAAA,YACE,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,YAAY,GAAG;AAAA,YACxB,CAAC,QAAQ,OAAO,GAAG;AAAA,YACnB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACtB;AAAA,UACA;AAAA,QACF;AAAA,QACA,MAAM,QAAQ,MAAM;AAAA,QACpB,aAAa,eAAe,MAAM;AAAA,QAClC,OAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAgB;AAAA,QAChB,QAAQ;AAAA,QACP,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"BaseRadio.js","sources":["../../../src/BaseRadio/BaseRadio.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\nimport MuiRadio, { RadioProps as MuiRadioProps } from \"@mui/material/Radio\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { staticClasses, useClasses } from \"./BaseRadio.styles\";\nimport { Selected, Unselected } from \"./icons\";\n\nexport { staticClasses as baseRadioClasses };\n\nexport type HvBaseRadioClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseRadioProps\n  extends Omit<MuiRadioProps, \"onChange\" | \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the radio button.\n   */\n  classes?: HvBaseRadioClasses;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * The input name.\n   */\n  name?: string;\n  /**\n   * The value of the input.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * Indicates that user input is required.\n   */\n  required?: boolean;\n  /**\n   * Indicates that the input is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that the input is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the radio button is selected, if set to `false` the radio button is not selected.\n   *\n   * When defined the radio button state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * The callback fired when the radio button is pressed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n    value: any,\n  ) => void;\n  /**\n   * Whether the selector should use semantic colors.\n   */\n  semantic?: boolean;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible?: (event: React.FocusEvent<any>) => void;\n  /**\n   * @ignore\n   */\n  onBlur?: (event: React.FocusEvent<any>) => void;\n}\n\nconst icons = {\n  radio: <Unselected />,\n  radioChecked: <Selected />,\n};\n\n/**\n * A Radio Button is a mechanism that allows user to select one or more options.\n *\n * The Base Radio Button is a building block of the Radio Button form element. Don't\n * use unless implementing a custom use case not covered by the Radio Button form element.\n */\nexport const HvBaseRadio = forwardRef<HTMLButtonElement, HvBaseRadioProps>(\n  function HvBaseRadio(props, ref) {\n    const {\n      classes: classesProp,\n      className,\n      id,\n      name,\n      value = \"on\",\n      required = false,\n      readOnly = false,\n      disabled = false,\n      checked,\n      defaultChecked,\n      onChange,\n      semantic = false,\n      inputProps,\n      onFocusVisible,\n      onBlur,\n      icon,\n      checkedIcon,\n      ...others\n    } = useDefaultProps(\"HvBaseRadio\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const [focusVisible, setFocusVisible] = useState(false);\n\n    const onFocusVisibleCallback = useCallback(\n      (evt: React.FocusEvent<any>) => {\n        setFocusVisible(true);\n        onFocusVisible?.(evt);\n      },\n      [onFocusVisible],\n    );\n\n    const onBlurCallback = useCallback(\n      (evt: React.FocusEvent<any>) => {\n        setFocusVisible(false);\n        onBlur?.(evt);\n      },\n      [onBlur],\n    );\n\n    const onLocalChange = useCallback(\n      (evt: React.ChangeEvent<HTMLInputElement>) => {\n        if (readOnly) {\n          return;\n        }\n\n        onChange?.(evt, evt.target.checked, value);\n      },\n      [onChange, readOnly, value],\n    );\n\n    return (\n      <MuiRadio\n        ref={ref}\n        id={id}\n        name={name}\n        className={cx(\n          classes.root,\n          {\n            [classes.disabled]: disabled,\n            [classes.focusVisible]: focusVisible,\n            [classes.checked]: checked,\n            [classes.semantic]: semantic,\n          },\n          className,\n        )}\n        icon={icon || icons.radio}\n        checkedIcon={checkedIcon || icons.radioChecked}\n        color=\"default\"\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        onChange={onLocalChange}\n        value={value}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        inputProps={inputProps}\n        onFocusVisible={onFocusVisibleCallback}\n        onBlur={onBlurCallback}\n        {...others}\n      />\n    );\n  },\n);\n"],"names":["HvBaseRadio"],"mappings":";;;;;;;AAuFA,MAAM,QAAQ;AAAA,EACZ,2BAAQ,YAAW,EAAA;AAAA,EACnB,kCAAe,UAAS,CAAA,CAAA;AAC1B;AAQO,MAAM,cAAc;AAAA,EACzB,SAASA,aAAY,OAAO,KAAK;AACzB,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,eAAe,KAAK;AAExC,UAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,UAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,UAAM,yBAAyB;AAAA,MAC7B,CAAC,QAA+B;AAC9B,wBAAgB,IAAI;AACpB,yBAAiB,GAAG;AAAA,MACtB;AAAA,MACA,CAAC,cAAc;AAAA,IACjB;AAEA,UAAM,iBAAiB;AAAA,MACrB,CAAC,QAA+B;AAC9B,wBAAgB,KAAK;AACrB,iBAAS,GAAG;AAAA,MACd;AAAA,MACA,CAAC,MAAM;AAAA,IACT;AAEA,UAAM,gBAAgB;AAAA,MACpB,CAAC,QAA6C;AAC5C,YAAI,UAAU;AACZ;AAAA,QAAA;AAGF,mBAAW,KAAK,IAAI,OAAO,SAAS,KAAK;AAAA,MAC3C;AAAA,MACA,CAAC,UAAU,UAAU,KAAK;AAAA,IAC5B;AAGE,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR;AAAA,YACE,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,YAAY,GAAG;AAAA,YACxB,CAAC,QAAQ,OAAO,GAAG;AAAA,YACnB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACtB;AAAA,UACA;AAAA,QACF;AAAA,QACA,MAAM,QAAQ,MAAM;AAAA,QACpB,aAAa,eAAe,MAAM;AAAA,QAClC,OAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAgB;AAAA,QAChB,QAAQ;AAAA,QACP,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAGN;"}

package/dist/esm/BaseRadio/BaseRadio.styles.js

@@ -8,62 +8,48 @@ const { staticClasses, useClasses } = createClasses("HvBaseRadio", {
     minWidth: 32,
     height: 32,
     cursor: "pointer",
-    "&:hover": {
-      backgroundColor: theme.colors.containerBackgroundHover,
-      borderRadius: theme.radii.base
-    },
     "& svg": {
       width: 16,
       height: 16,
-      borderRadius: theme.radii.circle,
-      borderWidth: 1,
-      borderColor: theme.colors.secondary,
-      backgroundColor: theme.colors.atmo1
+      borderRadius: theme.radii.full,
+      border: `1px solid ${theme.colors.borderStrong}`,
+      backgroundColor: theme.colors.bgContainer
     },
-    borderRadius: 0
+    "&:hover": {
+      backgroundColor: theme.colors.bgHover,
+      borderRadius: theme.radii.round
+    }
   },
   disabled: {
     cursor: "not-allowed",
     pointerEvents: "initial",
     "& svg": {
-      borderColor: theme.colors.secondary_60,
-      backgroundColor: theme.colors.atmo3
+      borderColor: theme.colors.textDisabled,
+      backgroundColor: theme.colors.bgDisabled
     }
   },
   focusVisible: {
     "& svg": {
-      borderRadius: "8px",
+      borderRadius: theme.radii.full,
       ...outlineStyles
     }
   },
   icon: {},
   checked: {
     "& svg": {
-      borderColor: theme.colors.secondary,
-      backgroundColor: theme.colors.secondary,
-      color: theme.colors.atmo2
-    },
-    "&$semantic": {
-      "& svg": {
-        borderColor: theme.colors.base_dark,
-        backgroundColor: theme.colors.base_light,
-        color: theme.colors.base_dark
-      }
+      borderColor: "transparent",
+      backgroundColor: theme.colors.primaryStrong,
+      color: theme.colors.bgContainer
     },
     "&$disabled": {
       "& svg": {
-        borderColor: theme.colors.secondary_60,
-        backgroundColor: theme.colors.secondary_60,
-        color: theme.colors.atmo3
+        borderColor: "transparent",
+        backgroundColor: theme.colors.borderDisabled,
+        color: theme.colors.bgDisabled
       }
     }
   },
-  semantic: {
-    "& svg": {
-      borderColor: theme.colors.base_dark,
-      backgroundColor: theme.colors.base_light
-    }
-  }
+  semantic: {}
 });
 export {
   staticClasses,

package/dist/esm/BaseRadio/BaseRadio.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseRadio.styles.js","sources":["../../../src/BaseRadio/BaseRadio.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseRadio\", {\n  root: {\n    padding: 0,\n    width: 32,\n    minWidth: 32,\n    height: 32,\n    cursor: \"pointer\",\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n      borderRadius: theme.radii.base,\n    },\n    \"& svg\": {\n      width: 16,\n      height: 16,\n      borderRadius: theme.radii.circle,\n      borderWidth: 1,\n      borderColor: theme.colors.secondary,\n      backgroundColor: theme.colors.atmo1,\n    },\n    borderRadius: 0,\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n    pointerEvents: \"initial\",\n    \"& svg\": {\n      borderColor: theme.colors.secondary_60,\n      backgroundColor: theme.colors.atmo3,\n    },\n  },\n  focusVisible: {\n    \"& svg\": {\n      borderRadius: \"8px\",\n      ...outlineStyles,\n    },\n  },\n  icon: {},\n  checked: {\n    \"& svg\": {\n      borderColor: theme.colors.secondary,\n      backgroundColor: theme.colors.secondary,\n      color: theme.colors.atmo2,\n    },\n    \"&$semantic\": {\n      \"& svg\": {\n        borderColor: theme.colors.base_dark,\n        backgroundColor: theme.colors.base_light,\n        color: theme.colors.base_dark,\n      },\n    },\n    \"&$disabled\": {\n      \"& svg\": {\n        borderColor: theme.colors.secondary_60,\n        backgroundColor: theme.colors.secondary_60,\n        color: theme.colors.atmo3,\n      },\n    },\n  },\n  semantic: {\n    \"& svg\": {\n      borderColor: theme.colors.base_dark,\n      backgroundColor: theme.colors.base_light,\n    },\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,QAAQ;AAAA,IAER,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAC9B,cAAc,MAAM,MAAM;AAAA,IAC5B;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,cAAc,MAAM,MAAM;AAAA,MAC1B,aAAa;AAAA,MACb,aAAa,MAAM,OAAO;AAAA,MAC1B,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,cAAc;AAAA,EAChB;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,SAAS;AAAA,MACP,aAAa,MAAM,OAAO;AAAA,MAC1B,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAElC;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,MACP,cAAc;AAAA,MACd,GAAG;AAAA,IAAA;AAAA,EAEP;AAAA,EACA,MAAM,CAAC;AAAA,EACP,SAAS;AAAA,IACP,SAAS;AAAA,MACP,aAAa,MAAM,OAAO;AAAA,MAC1B,iBAAiB,MAAM,OAAO;AAAA,MAC9B,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,QACP,aAAa,MAAM,OAAO;AAAA,QAC1B,iBAAiB,MAAM,OAAO;AAAA,QAC9B,OAAO,MAAM,OAAO;AAAA,MAAA;AAAA,IAExB;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,QACP,aAAa,MAAM,OAAO;AAAA,QAC1B,iBAAiB,MAAM,OAAO;AAAA,QAC9B,OAAO,MAAM,OAAO;AAAA,MAAA;AAAA,IACtB;AAAA,EAEJ;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,MACP,aAAa,MAAM,OAAO;AAAA,MAC1B,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAChC;AAEJ,CAAC;"}
+{"version":3,"file":"BaseRadio.styles.js","sources":["../../../src/BaseRadio/BaseRadio.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseRadio\", {\n  root: {\n    padding: 0,\n    width: 32,\n    minWidth: 32,\n    height: 32,\n    cursor: \"pointer\",\n    \"& svg\": {\n      width: 16,\n      height: 16,\n      borderRadius: theme.radii.full,\n      border: `1px solid ${theme.colors.borderStrong}`,\n      backgroundColor: theme.colors.bgContainer,\n    },\n    \"&:hover\": {\n      backgroundColor: theme.colors.bgHover,\n      borderRadius: theme.radii.round,\n    },\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n    pointerEvents: \"initial\",\n    \"& svg\": {\n      borderColor: theme.colors.textDisabled,\n      backgroundColor: theme.colors.bgDisabled,\n    },\n  },\n  focusVisible: {\n    \"& svg\": {\n      borderRadius: theme.radii.full,\n      ...outlineStyles,\n    },\n  },\n  icon: {},\n  checked: {\n    \"& svg\": {\n      borderColor: \"transparent\",\n      backgroundColor: theme.colors.primaryStrong,\n      color: theme.colors.bgContainer,\n    },\n    \"&$disabled\": {\n      \"& svg\": {\n        borderColor: \"transparent\",\n        backgroundColor: theme.colors.borderDisabled,\n        color: theme.colors.bgDisabled,\n      },\n    },\n  },\n  semantic: {},\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,cAAc,MAAM,MAAM;AAAA,MAC1B,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,MAC9C,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAC9B,cAAc,MAAM,MAAM;AAAA,IAAA;AAAA,EAE9B;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,SAAS;AAAA,MACP,aAAa,MAAM,OAAO;AAAA,MAC1B,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAElC;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,MACP,cAAc,MAAM,MAAM;AAAA,MAC1B,GAAG;AAAA,IAAA;AAAA,EAEP;AAAA,EACA,MAAM,CAAC;AAAA,EACP,SAAS;AAAA,IACP,SAAS;AAAA,MACP,aAAa;AAAA,MACb,iBAAiB,MAAM,OAAO;AAAA,MAC9B,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,QACP,aAAa;AAAA,QACb,iBAAiB,MAAM,OAAO;AAAA,QAC9B,OAAO,MAAM,OAAO;AAAA,MAAA;AAAA,IACtB;AAAA,EAEJ;AAAA,EACA,UAAU,CAAA;AACZ,CAAC;"}

package/dist/esm/BaseSwitch/BaseSwitch.styles.js

@@ -9,9 +9,9 @@ const { staticClasses, useClasses } = createClasses("HvBaseSwitch", {
     height: "32px",
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.round,
     "&:hover": {
-      backgroundColor: theme.colors.containerBackgroundHover
+      backgroundColor: theme.colors.bgHover
     },
     // Higher CSS specificity here
     "& $switchBase": {
@@ -22,7 +22,11 @@ const { staticClasses, useClasses } = createClasses("HvBaseSwitch", {
         transform: "translateX(16px)",
         "& + $track": {
           opacity: 1,
-          backgroundColor: theme.colors.secondary
+          backgroundColor: theme.colors.primary,
+          borderColor: "transparent"
+        },
+        "& $thumb:not:has($disabled)": {
+          borderColor: "transparent"
         },
         "&:hover": {
           backgroundColor: "transparent"
@@ -34,8 +38,8 @@ const { staticClasses, useClasses } = createClasses("HvBaseSwitch", {
       "& $switchBase": {
         "& + $track": {
           opacity: 1,
-          backgroundColor: theme.colors.atmo3,
-          border: `solid 1px ${theme.colors.secondary_60}`
+          backgroundColor: theme.colors.bgDisabled,
+          border: `solid 1px ${theme.colors.borderDisabled}`
         }
       }
     }
@@ -55,19 +59,19 @@ const { staticClasses, useClasses } = createClasses("HvBaseSwitch", {
   },
   track: {
     opacity: 1,
-    borderRadius: "15px",
+    borderRadius: theme.radii.full,
     height: "16px",
     width: "32px",
-    border: `solid 1px ${theme.colors.secondary}`,
-    backgroundColor: theme.colors.atmo1
+    border: `solid 1px ${theme.colors.borderStrong}`,
+    backgroundColor: theme.colors.bgContainer
   },
   thumb: {
     position: "relative",
     left: "-9px",
-    width: "12px",
-    height: "12px",
-    border: `solid 1px ${theme.colors.secondary}`,
-    backgroundColor: theme.colors.atmo1,
+    width: "10px",
+    height: "10px",
+    border: `solid 1px ${theme.colors.borderStrong}`,
+    backgroundColor: theme.colors.bgContainer,
     marginLeft: "2px",
     marginTop: 0,
     boxShadow: "none"
@@ -79,8 +83,8 @@ const { staticClasses, useClasses } = createClasses("HvBaseSwitch", {
       cursor: "not-allowed"
     },
     "& $thumb": {
-      backgroundColor: theme.colors.atmo3,
-      border: `solid 1px ${theme.colors.secondary_60}`
+      backgroundColor: theme.colors.bgPageSecondary,
+      border: `solid 1px ${theme.colors.textDisabled}`
     }
   },
   readOnly: {},

package/dist/esm/BaseSwitch/BaseSwitch.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseSwitch.styles.js","sources":["../../../src/BaseSwitch/BaseSwitch.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseSwitch\", {\n  root: {\n    padding: 0,\n    cursor: \"pointer\",\n    width: \"40px\",\n    height: \"32px\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    borderRadius: theme.radii.base,\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n\n    // Higher CSS specificity here\n    \"& $switchBase\": {\n      \"&:hover\": {\n        backgroundColor: \"transparent\",\n      },\n\n      \"&$checked\": {\n        transform: \"translateX(16px)\",\n        \"& + $track\": {\n          opacity: 1,\n          backgroundColor: theme.colors.secondary,\n        },\n        \"&:hover\": {\n          backgroundColor: \"transparent\",\n        },\n      },\n    },\n\n    // Higher CSS specificity here\n    \"&$disabled\": {\n      \"& $switchBase\": {\n        \"& + $track\": {\n          opacity: 1,\n          backgroundColor: theme.colors.atmo3,\n          border: `solid 1px ${theme.colors.secondary_60}`,\n        },\n      },\n    },\n  },\n  switch: {\n    width: \"40px\",\n    height: \"32px\",\n    padding: 0,\n\n    \"&$readOnly $switchBase\": {\n      cursor: \"default\",\n    },\n  },\n  switchBase: {\n    width: \"40px\",\n    height: \"32px\",\n    padding: 0,\n  },\n  track: {\n    opacity: 1,\n    borderRadius: \"15px\",\n    height: \"16px\",\n    width: \"32px\",\n    border: `solid 1px ${theme.colors.secondary}`,\n    backgroundColor: theme.colors.atmo1,\n  },\n  thumb: {\n    position: \"relative\",\n    left: \"-9px\",\n    width: \"12px\",\n    height: \"12px\",\n    border: `solid 1px ${theme.colors.secondary}`,\n    backgroundColor: theme.colors.atmo1,\n    marginLeft: \"2px\",\n    marginTop: 0,\n    boxShadow: \"none\",\n  },\n  checked: {},\n  disabled: {\n    cursor: \"not-allowed\",\n\n    \"& $switch\": {\n      cursor: \"not-allowed\",\n    },\n\n    \"& $thumb\": {\n      backgroundColor: theme.colors.atmo3,\n      border: `solid 1px ${theme.colors.secondary_60}`,\n    },\n  },\n  readOnly: {},\n  focusVisible: {\n    borderRadius: \"8px\",\n    ...outlineStyles,\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,cAAc,MAAM,MAAM;AAAA,IAE1B,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA;AAAA,IAGA,iBAAiB;AAAA,MACf,WAAW;AAAA,QACT,iBAAiB;AAAA,MACnB;AAAA,MAEA,aAAa;AAAA,QACX,WAAW;AAAA,QACX,cAAc;AAAA,UACZ,SAAS;AAAA,UACT,iBAAiB,MAAM,OAAO;AAAA,QAChC;AAAA,QACA,WAAW;AAAA,UACT,iBAAiB;AAAA,QAAA;AAAA,MACnB;AAAA,IAEJ;AAAA;AAAA,IAGA,cAAc;AAAA,MACZ,iBAAiB;AAAA,QACf,cAAc;AAAA,UACZ,SAAS;AAAA,UACT,iBAAiB,MAAM,OAAO;AAAA,UAC9B,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,QAAA;AAAA,MAChD;AAAA,IACF;AAAA,EAEJ;AAAA,EACA,QAAQ;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IAET,0BAA0B;AAAA,MACxB,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,SAAS;AAAA,IACT,cAAc;AAAA,IACd,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,IAC3C,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,OAAO;AAAA,IACL,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,IAC3C,iBAAiB,MAAM,OAAO;AAAA,IAC9B,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,WAAW;AAAA,EACb;AAAA,EACA,SAAS,CAAC;AAAA,EACV,UAAU;AAAA,IACR,QAAQ;AAAA,IAER,aAAa;AAAA,MACX,QAAQ;AAAA,IACV;AAAA,IAEA,YAAY;AAAA,MACV,iBAAiB,MAAM,OAAO;AAAA,MAC9B,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,IAAA;AAAA,EAElD;AAAA,EACA,UAAU,CAAC;AAAA,EACX,cAAc;AAAA,IACZ,cAAc;AAAA,IACd,GAAG;AAAA,EAAA;AAEP,CAAC;"}
+{"version":3,"file":"BaseSwitch.styles.js","sources":["../../../src/BaseSwitch/BaseSwitch.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseSwitch\", {\n  root: {\n    padding: 0,\n    cursor: \"pointer\",\n    width: \"40px\",\n    height: \"32px\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    borderRadius: theme.radii.round,\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.bgHover,\n    },\n\n    // Higher CSS specificity here\n    \"& $switchBase\": {\n      \"&:hover\": {\n        backgroundColor: \"transparent\",\n      },\n\n      \"&$checked\": {\n        transform: \"translateX(16px)\",\n        \"& + $track\": {\n          opacity: 1,\n          backgroundColor: theme.colors.primary,\n          borderColor: \"transparent\",\n        },\n        \"& $thumb:not:has($disabled)\": {\n          borderColor: \"transparent\",\n        },\n        \"&:hover\": {\n          backgroundColor: \"transparent\",\n        },\n      },\n    },\n\n    // Higher CSS specificity here\n    \"&$disabled\": {\n      \"& $switchBase\": {\n        \"& + $track\": {\n          opacity: 1,\n          backgroundColor: theme.colors.bgDisabled,\n          border: `solid 1px ${theme.colors.borderDisabled}`,\n        },\n      },\n    },\n  },\n  switch: {\n    width: \"40px\",\n    height: \"32px\",\n    padding: 0,\n\n    \"&$readOnly $switchBase\": {\n      cursor: \"default\",\n    },\n  },\n  switchBase: {\n    width: \"40px\",\n    height: \"32px\",\n    padding: 0,\n  },\n  track: {\n    opacity: 1,\n    borderRadius: theme.radii.full,\n    height: \"16px\",\n    width: \"32px\",\n    border: `solid 1px ${theme.colors.borderStrong}`,\n    backgroundColor: theme.colors.bgContainer,\n  },\n  thumb: {\n    position: \"relative\",\n    left: \"-9px\",\n    width: \"10px\",\n    height: \"10px\",\n    border: `solid 1px ${theme.colors.borderStrong}`,\n    backgroundColor: theme.colors.bgContainer,\n    marginLeft: \"2px\",\n    marginTop: 0,\n    boxShadow: \"none\",\n  },\n  checked: {},\n  disabled: {\n    cursor: \"not-allowed\",\n\n    \"& $switch\": {\n      cursor: \"not-allowed\",\n    },\n\n    \"& $thumb\": {\n      backgroundColor: theme.colors.bgPageSecondary,\n      border: `solid 1px ${theme.colors.textDisabled}`,\n    },\n  },\n  readOnly: {},\n  focusVisible: {\n    borderRadius: \"8px\",\n    ...outlineStyles,\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,cAAc,MAAM,MAAM;AAAA,IAE1B,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA;AAAA,IAGA,iBAAiB;AAAA,MACf,WAAW;AAAA,QACT,iBAAiB;AAAA,MACnB;AAAA,MAEA,aAAa;AAAA,QACX,WAAW;AAAA,QACX,cAAc;AAAA,UACZ,SAAS;AAAA,UACT,iBAAiB,MAAM,OAAO;AAAA,UAC9B,aAAa;AAAA,QACf;AAAA,QACA,+BAA+B;AAAA,UAC7B,aAAa;AAAA,QACf;AAAA,QACA,WAAW;AAAA,UACT,iBAAiB;AAAA,QAAA;AAAA,MACnB;AAAA,IAEJ;AAAA;AAAA,IAGA,cAAc;AAAA,MACZ,iBAAiB;AAAA,QACf,cAAc;AAAA,UACZ,SAAS;AAAA,UACT,iBAAiB,MAAM,OAAO;AAAA,UAC9B,QAAQ,aAAa,MAAM,OAAO,cAAc;AAAA,QAAA;AAAA,MAClD;AAAA,IACF;AAAA,EAEJ;AAAA,EACA,QAAQ;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IAET,0BAA0B;AAAA,MACxB,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,SAAS;AAAA,IACT,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,IAC9C,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,OAAO;AAAA,IACL,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,IAC9C,iBAAiB,MAAM,OAAO;AAAA,IAC9B,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,WAAW;AAAA,EACb;AAAA,EACA,SAAS,CAAC;AAAA,EACV,UAAU;AAAA,IACR,QAAQ;AAAA,IAER,aAAa;AAAA,MACX,QAAQ;AAAA,IACV;AAAA,IAEA,YAAY;AAAA,MACV,iBAAiB,MAAM,OAAO;AAAA,MAC9B,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,IAAA;AAAA,EAElD;AAAA,EACA,UAAU,CAAC;AAAA,EACX,cAAc;AAAA,IACZ,cAAc;AAAA,IACd,GAAG;AAAA,EAAA;AAEP,CAAC;"}

package/dist/esm/BreadCrumb/Page/Page.styles.js

@@ -9,10 +9,10 @@ const { staticClasses, useClasses } = createClasses("HvBreadCrumbPage", {
     textTransform: "capitalize",
     "&:hover": {
       cursor: "pointer",
-      backgroundColor: theme.colors.containerBackgroundHover
+      backgroundColor: theme.colors.bgHover
     },
     "&:focus": {
-      backgroundColor: theme.colors.containerBackgroundHover
+      backgroundColor: theme.colors.bgHover
     },
     "&:focus-visible": {
       ...outlineStyles

package/dist/esm/BreadCrumb/Page/Page.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Page.styles.js","sources":["../../../../src/BreadCrumb/Page/Page.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBreadCrumbPage\", {\n  link: {\n    padding: `8px ${theme.space.xs}`,\n    borderRadius: theme.radii.base,\n    maxWidth: 170 + 16,\n    textTransform: \"capitalize\",\n    \"&:hover\": {\n      cursor: \"pointer\",\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n    \"&:focus\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n  label: {},\n  a: {},\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,SAAS,OAAO,MAAM,MAAM,EAAE;AAAA,IAC9B,cAAc,MAAM,MAAM;AAAA,IAC1B,UAAU,MAAM;AAAA,IAChB,eAAe;AAAA,IACf,WAAW;AAAA,MACT,QAAQ;AAAA,MACR,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAG;AAAA,IAAA;AAAA,EAEP;AAAA,EACA,OAAO,CAAC;AAAA,EACR,GAAG,CAAA;AACL,CAAC;"}
+{"version":3,"file":"Page.styles.js","sources":["../../../../src/BreadCrumb/Page/Page.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBreadCrumbPage\", {\n  link: {\n    padding: `8px ${theme.space.xs}`,\n    borderRadius: theme.radii.base,\n    maxWidth: 170 + 16,\n    textTransform: \"capitalize\",\n    \"&:hover\": {\n      cursor: \"pointer\",\n      backgroundColor: theme.colors.bgHover,\n    },\n    \"&:focus\": {\n      backgroundColor: theme.colors.bgHover,\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n  label: {},\n  a: {},\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,SAAS,OAAO,MAAM,MAAM,EAAE;AAAA,IAC9B,cAAc,MAAM,MAAM;AAAA,IAC1B,UAAU,MAAM;AAAA,IAChB,eAAe;AAAA,IACf,WAAW;AAAA,MACT,QAAQ;AAAA,MACR,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAG;AAAA,IAAA;AAAA,EAEP;AAAA,EACA,OAAO,CAAC;AAAA,EACR,GAAG,CAAA;AACL,CAAC;"}

package/dist/esm/BreadCrumb/PathElement/PathElement.js

@@ -14,7 +14,7 @@ const HvPathElement = ({
       DropRightXS,
       {
         className: classes.separatorContainer,
-        color: "secondary_60"
+        color: "textDisabled"
       }
     )
   ] });

package/dist/esm/BreadCrumb/PathElement/PathElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"PathElement.js","sources":["../../../../src/BreadCrumb/PathElement/PathElement.tsx"],"sourcesContent":["import { DropRightXS } from \"@hitachivantara/uikit-react-icons\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { staticClasses, useClasses } from \"./PathElement.styles\";\n\nexport { staticClasses as pathElementClasses };\n\nexport type HvPathElementClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvPathElementProps {\n  last?: boolean;\n  classes?: HvPathElementClasses;\n  children: React.ReactElement;\n}\n\nexport const HvPathElement = ({\n  classes: classesProp,\n  last = false,\n  children,\n}: HvPathElementProps) => {\n  const { classes } = useClasses(classesProp);\n\n  return (\n    <li className={classes.centerContainer}>\n      {children}\n      {!last && (\n        <DropRightXS\n          className={classes.separatorContainer}\n          color=\"secondary_60\"\n        />\n      )}\n    </li>\n  );\n};\n"],"names":[],"mappings":";;;;AAeO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,SAAS;AAAA,EACT,OAAO;AAAA,EACP;AACF,MAA0B;AACxB,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,SACG,qBAAA,MAAA,EAAG,WAAW,QAAQ,iBACpB,UAAA;AAAA,IAAA;AAAA,IACA,CAAC,QACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB,OAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EACR,GAEJ;AAEJ;"}
+{"version":3,"file":"PathElement.js","sources":["../../../../src/BreadCrumb/PathElement/PathElement.tsx"],"sourcesContent":["import { DropRightXS } from \"@hitachivantara/uikit-react-icons\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { staticClasses, useClasses } from \"./PathElement.styles\";\n\nexport { staticClasses as pathElementClasses };\n\nexport type HvPathElementClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvPathElementProps {\n  last?: boolean;\n  classes?: HvPathElementClasses;\n  children: React.ReactElement;\n}\n\nexport const HvPathElement = ({\n  classes: classesProp,\n  last = false,\n  children,\n}: HvPathElementProps) => {\n  const { classes } = useClasses(classesProp);\n\n  return (\n    <li className={classes.centerContainer}>\n      {children}\n      {!last && (\n        <DropRightXS\n          className={classes.separatorContainer}\n          color=\"textDisabled\"\n        />\n      )}\n    </li>\n  );\n};\n"],"names":[],"mappings":";;;;AAeO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,SAAS;AAAA,EACT,OAAO;AAAA,EACP;AACF,MAA0B;AACxB,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,SACG,qBAAA,MAAA,EAAG,WAAW,QAAQ,iBACpB,UAAA;AAAA,IAAA;AAAA,IACA,CAAC,QACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB,OAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EACR,GAEJ;AAEJ;"}

package/dist/esm/BreadCrumb/utils.js

@@ -17,7 +17,7 @@ const pathWithSubMenu = (id, listRoute, maxVisible, onClick, dropDownMenuProps)
       HvDropDownMenu,
       {
         id: setId(id, "submenu"),
-        icon: /* @__PURE__ */ jsx(MoreOptionsHorizontal, { iconSize: "S", color: "secondary" }),
+        icon: /* @__PURE__ */ jsx(MoreOptionsHorizontal, { iconSize: "S", color: "text" }),
         dataList: subMenuList,
         ...dropDownMenuProps,
         onClick: onClick != null ? handleClick : void 0

package/dist/esm/BreadCrumb/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../src/BreadCrumb/utils.tsx"],"sourcesContent":["import { MoreOptionsHorizontal } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvDropDownMenu, HvDropDownMenuProps } from \"../DropDownMenu\";\nimport { setId } from \"../utils/setId\";\n\nexport const removeExtension = (label: string) =>\n  label.includes(\".\") ? label.substring(0, label.lastIndexOf(\".\")) : label;\n\nexport const pathWithSubMenu = (\n  id: string | undefined,\n  listRoute: any,\n  maxVisible: number,\n  onClick?: (event: React.MouseEvent<HTMLElement>, data: any) => void,\n  dropDownMenuProps?: Partial<HvDropDownMenuProps>,\n) => {\n  const nbrElemToSubMenu = listRoute.length - maxVisible;\n  const subMenuList = listRoute.slice(1, nbrElemToSubMenu + 1);\n\n  const handleClick = (event: any, data: any) => {\n    event.preventDefault();\n\n    onClick?.(event, data);\n  };\n\n  listRoute.splice(\n    1,\n    nbrElemToSubMenu,\n    <HvDropDownMenu\n      id={setId(id, \"submenu\")}\n      icon={<MoreOptionsHorizontal iconSize=\"S\" color=\"secondary\" />}\n      dataList={subMenuList}\n      {...dropDownMenuProps}\n      onClick={onClick != null ? handleClick : undefined}\n    />,\n  );\n\n  return listRoute;\n};\n"],"names":[],"mappings":";;;;AAKO,MAAM,kBAAkB,CAAC,UAC9B,MAAM,SAAS,GAAG,IAAI,MAAM,UAAU,GAAG,MAAM,YAAY,GAAG,CAAC,IAAI;AAE9D,MAAM,kBAAkB,CAC7B,IACA,WACA,YACA,SACA,sBACG;AACG,QAAA,mBAAmB,UAAU,SAAS;AAC5C,QAAM,cAAc,UAAU,MAAM,GAAG,mBAAmB,CAAC;AAErD,QAAA,cAAc,CAAC,OAAY,SAAc;AAC7C,UAAM,eAAe;AAErB,cAAU,OAAO,IAAI;AAAA,EACvB;AAEU,YAAA;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,IAAI,SAAS;AAAA,QACvB,MAAO,oBAAA,uBAAA,EAAsB,UAAS,KAAI,OAAM,aAAY;AAAA,QAC5D,UAAU;AAAA,QACT,GAAG;AAAA,QACJ,SAAS,WAAW,OAAO,cAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EAE7C;AAEO,SAAA;AACT;"}
+{"version":3,"file":"utils.js","sources":["../../../src/BreadCrumb/utils.tsx"],"sourcesContent":["import { MoreOptionsHorizontal } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvDropDownMenu, HvDropDownMenuProps } from \"../DropDownMenu\";\nimport { setId } from \"../utils/setId\";\n\nexport const removeExtension = (label: string) =>\n  label.includes(\".\") ? label.substring(0, label.lastIndexOf(\".\")) : label;\n\nexport const pathWithSubMenu = (\n  id: string | undefined,\n  listRoute: any,\n  maxVisible: number,\n  onClick?: (event: React.MouseEvent<HTMLElement>, data: any) => void,\n  dropDownMenuProps?: Partial<HvDropDownMenuProps>,\n) => {\n  const nbrElemToSubMenu = listRoute.length - maxVisible;\n  const subMenuList = listRoute.slice(1, nbrElemToSubMenu + 1);\n\n  const handleClick = (event: any, data: any) => {\n    event.preventDefault();\n\n    onClick?.(event, data);\n  };\n\n  listRoute.splice(\n    1,\n    nbrElemToSubMenu,\n    <HvDropDownMenu\n      id={setId(id, \"submenu\")}\n      icon={<MoreOptionsHorizontal iconSize=\"S\" color=\"text\" />}\n      dataList={subMenuList}\n      {...dropDownMenuProps}\n      onClick={onClick != null ? handleClick : undefined}\n    />,\n  );\n\n  return listRoute;\n};\n"],"names":[],"mappings":";;;;AAKO,MAAM,kBAAkB,CAAC,UAC9B,MAAM,SAAS,GAAG,IAAI,MAAM,UAAU,GAAG,MAAM,YAAY,GAAG,CAAC,IAAI;AAE9D,MAAM,kBAAkB,CAC7B,IACA,WACA,YACA,SACA,sBACG;AACG,QAAA,mBAAmB,UAAU,SAAS;AAC5C,QAAM,cAAc,UAAU,MAAM,GAAG,mBAAmB,CAAC;AAErD,QAAA,cAAc,CAAC,OAAY,SAAc;AAC7C,UAAM,eAAe;AAErB,cAAU,OAAO,IAAI;AAAA,EACvB;AAEU,YAAA;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,IAAI,SAAS;AAAA,QACvB,MAAO,oBAAA,uBAAA,EAAsB,UAAS,KAAI,OAAM,QAAO;AAAA,QACvD,UAAU;AAAA,QACT,GAAG;AAAA,QACJ,SAAS,WAAW,OAAO,cAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EAE7C;AAEO,SAAA;AACT;"}

package/dist/esm/BulkActions/BulkActions.styles.js

@@ -6,29 +6,30 @@ const { staticClasses, useClasses } = createClasses("HvBulkActions", {
   root: {
     display: "flex",
     alignItems: "center",
-    border: `1px solid ${theme.colors.atmo4}`,
-    backgroundColor: theme.colors.atmo2,
+    border: `1px solid ${theme.colors.border}`,
+    backgroundColor: theme.colors.bgPage,
     padding: theme.spacing("xs", "md"),
     marginBottom: theme.space.xs
   },
   semantic: {
-    backgroundColor: theme.colors.containerBackgroundHover,
+    backgroundColor: theme.colors.bgHover,
     "& $selectAll div": {
       "&:hover:not(:disabled)": {
-        backgroundColor: theme.alpha("base_light", 0.3)
+        backgroundColor: theme.alpha("textLight", 0.3)
       }
     },
     "& $selectAll:focus-within div": {
-      backgroundColor: theme.alpha("base_light", 0.3)
+      backgroundColor: theme.alpha("textLight", 0.3)
     }
   },
   actions: {
     display: "inline-flex",
     marginLeft: "auto",
     [`& .${staticClasses$1.dropDownMenuButton}:disabled`]: {
-      backgroundColor: "transparent",
-      borderColor: "transparent",
-      "&:hover": { backgroundColor: "transparent", borderColor: "transparent" }
+      "&,:hover": {
+        backgroundColor: "transparent",
+        borderColor: "transparent"
+      }
     }
   },
   selectAllContainer: { display: "flex", alignItems: "center" },
@@ -36,7 +37,7 @@ const { staticClasses, useClasses } = createClasses("HvBulkActions", {
   selectAllPages: {},
   divider: {
     display: "flex",
-    backgroundColor: theme.colors.atmo4,
+    backgroundColor: theme.colors.border,
     width: "1px",
     height: "32px",
     marginLeft: theme.space.sm

package/dist/esm/BulkActions/BulkActions.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"BulkActions.styles.js","sources":["../../../src/BulkActions/BulkActions.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { actionsGenericClasses } from \"../ActionsGeneric\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBulkActions\", {\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n    border: `1px solid ${theme.colors.atmo4}`,\n    backgroundColor: theme.colors.atmo2,\n    padding: theme.spacing(\"xs\", \"md\"),\n    marginBottom: theme.space.xs,\n  },\n  semantic: {\n    backgroundColor: theme.colors.containerBackgroundHover,\n    \"& $selectAll div\": {\n      \"&:hover:not(:disabled)\": {\n        backgroundColor: theme.alpha(\"base_light\", 0.3),\n      },\n    },\n    \"& $selectAll:focus-within div\": {\n      backgroundColor: theme.alpha(\"base_light\", 0.3),\n    },\n  },\n  actions: {\n    display: \"inline-flex\",\n    marginLeft: \"auto\",\n    [`& .${actionsGenericClasses.dropDownMenuButton}:disabled`]: {\n      backgroundColor: \"transparent\",\n      borderColor: \"transparent\",\n      \"&:hover\": { backgroundColor: \"transparent\", borderColor: \"transparent\" },\n    },\n  },\n  selectAllContainer: { display: \"flex\", alignItems: \"center\" },\n  selectAll: {},\n  selectAllPages: {},\n  divider: {\n    display: \"flex\",\n    backgroundColor: theme.colors.atmo4,\n    width: \"1px\",\n    height: \"32px\",\n    marginLeft: theme.space.sm,\n  },\n});\n"],"names":["actionsGenericClasses"],"mappings":";;;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ,aAAa,MAAM,OAAO,KAAK;AAAA,IACvC,iBAAiB,MAAM,OAAO;AAAA,IAC9B,SAAS,MAAM,QAAQ,MAAM,IAAI;AAAA,IACjC,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,UAAU;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,IAC9B,oBAAoB;AAAA,MAClB,0BAA0B;AAAA,QACxB,iBAAiB,MAAM,MAAM,cAAc,GAAG;AAAA,MAAA;AAAA,IAElD;AAAA,IACA,iCAAiC;AAAA,MAC/B,iBAAiB,MAAM,MAAM,cAAc,GAAG;AAAA,IAAA;AAAA,EAElD;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,CAAC,MAAMA,gBAAsB,kBAAkB,WAAW,GAAG;AAAA,MAC3D,iBAAiB;AAAA,MACjB,aAAa;AAAA,MACb,WAAW,EAAE,iBAAiB,eAAe,aAAa,cAAc;AAAA,IAAA;AAAA,EAE5E;AAAA,EACA,oBAAoB,EAAE,SAAS,QAAQ,YAAY,SAAS;AAAA,EAC5D,WAAW,CAAC;AAAA,EACZ,gBAAgB,CAAC;AAAA,EACjB,SAAS;AAAA,IACP,SAAS;AAAA,IACT,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY,MAAM,MAAM;AAAA,EAAA;AAE5B,CAAC;"}
+{"version":3,"file":"BulkActions.styles.js","sources":["../../../src/BulkActions/BulkActions.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { actionsGenericClasses } from \"../ActionsGeneric\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBulkActions\", {\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n    border: `1px solid ${theme.colors.border}`,\n    backgroundColor: theme.colors.bgPage,\n    padding: theme.spacing(\"xs\", \"md\"),\n    marginBottom: theme.space.xs,\n  },\n  semantic: {\n    backgroundColor: theme.colors.bgHover,\n    \"& $selectAll div\": {\n      \"&:hover:not(:disabled)\": {\n        backgroundColor: theme.alpha(\"textLight\", 0.3),\n      },\n    },\n    \"& $selectAll:focus-within div\": {\n      backgroundColor: theme.alpha(\"textLight\", 0.3),\n    },\n  },\n  actions: {\n    display: \"inline-flex\",\n    marginLeft: \"auto\",\n    [`& .${actionsGenericClasses.dropDownMenuButton}:disabled`]: {\n      \"&,:hover\": {\n        backgroundColor: \"transparent\",\n        borderColor: \"transparent\",\n      },\n    },\n  },\n  selectAllContainer: { display: \"flex\", alignItems: \"center\" },\n  selectAll: {},\n  selectAllPages: {},\n  divider: {\n    display: \"flex\",\n    backgroundColor: theme.colors.border,\n    width: \"1px\",\n    height: \"32px\",\n    marginLeft: theme.space.sm,\n  },\n});\n"],"names":["actionsGenericClasses"],"mappings":";;;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ,aAAa,MAAM,OAAO,MAAM;AAAA,IACxC,iBAAiB,MAAM,OAAO;AAAA,IAC9B,SAAS,MAAM,QAAQ,MAAM,IAAI;AAAA,IACjC,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,UAAU;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,IAC9B,oBAAoB;AAAA,MAClB,0BAA0B;AAAA,QACxB,iBAAiB,MAAM,MAAM,aAAa,GAAG;AAAA,MAAA;AAAA,IAEjD;AAAA,IACA,iCAAiC;AAAA,MAC/B,iBAAiB,MAAM,MAAM,aAAa,GAAG;AAAA,IAAA;AAAA,EAEjD;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,CAAC,MAAMA,gBAAsB,kBAAkB,WAAW,GAAG;AAAA,MAC3D,YAAY;AAAA,QACV,iBAAiB;AAAA,QACjB,aAAa;AAAA,MAAA;AAAA,IACf;AAAA,EAEJ;AAAA,EACA,oBAAoB,EAAE,SAAS,QAAQ,YAAY,SAAS;AAAA,EAC5D,WAAW,CAAC;AAAA,EACZ,gBAAgB,CAAC;AAAA,EACjB,SAAS;AAAA,IACP,SAAS;AAAA,IACT,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY,MAAM,MAAM;AAAA,EAAA;AAE5B,CAAC;"}

package/dist/esm/Button/Button.styles.js

@@ -13,7 +13,7 @@ const { staticClasses, useClasses } = createClasses("HvButton", {
     // Background color common for almost all variants
     ":where(:not($disabled))": {
       ":hover, :focus-visible": {
-        backgroundColor: theme.colors.containerBackgroundHover
+        backgroundColor: theme.colors.bgHover
       }
     },
     ":focus-visible": {
@@ -24,28 +24,30 @@ const { staticClasses, useClasses } = createClasses("HvButton", {
     ...theme.typography.label,
     color: "var(--color, currentcolor)",
     backgroundColor: "transparent",
-    height: "var(--HvButton-height)",
+    height: "var(--HvButton-height, fit-content)",
     border: "1px solid transparent",
     borderRadius: `var(--radius, ${theme.radii.base})`,
-    padding: theme.spacing(0, "sm")
+    padding: theme.spacing(0, "sm"),
+    "& $startIcon, & $endIcon": {
+      flexShrink: 0,
+      lineHeight: 0,
+      marginTop: -1,
+      marginBottom: -1
+    }
   },
   /** applied to the _left_ icon container */
   startIcon: {
-    marginLeft: theme.spacing(-1),
-    marginTop: -1,
-    marginBottom: -1
+    marginLeft: theme.spacing(-1)
   },
   /** applied to the _right_ icon container */
   endIcon: {
-    marginRight: theme.spacing(-1),
-    marginTop: -1,
-    marginBottom: -1
+    marginRight: theme.spacing(-1)
   },
   focusVisible: {},
   /** applied to the root element when disabled */
   disabled: {
     cursor: "not-allowed",
-    color: theme.colors.secondary_60,
+    color: theme.colors.textDisabled,
     backgroundColor: "transparent",
     borderColor: "transparent",
     ":hover, :focus-visible": {
@@ -57,15 +59,12 @@ const { staticClasses, useClasses } = createClasses("HvButton", {
   icon: {
     margin: 0,
     padding: 0,
-    height: "fit-content",
-    "& > *": {
-      margin: -1
-    }
+    width: "var(--HvButton-height, fit-content)"
   },
   /** applied to the root element when using the `contained` variant */
   contained: {
-    color: theme.colors.atmo1,
-    // `color-contrast(var(--color) vs ${colors.atmo1}, ${colors.base_light}, ${colors.base_dark})`,
+    color: theme.colors.textDimmed,
+    // `color-contrast(var(--color) vs ${colors.textDimmed}, ${colors.textLight}, ${colors.textDark})`,
     backgroundColor: "var(--color)",
     ":where(:not($disabled))": {
       ":hover, :focus-visible": {
@@ -84,17 +83,17 @@ const { staticClasses, useClasses } = createClasses("HvButton", {
   ghost: {},
   /** applied to the root element when using the `semantic` variant */
   semantic: {
-    color: theme.colors.base_dark,
+    color: theme.colors.textDark,
     backgroundColor: "transparent",
     borderColor: "transparent",
     "&:hover, &:focus-visible": {
-      backgroundColor: theme.alpha("base_light", 0.3)
+      backgroundColor: theme.alpha("textLight", 0.3)
     },
     "&:active": {
-      backgroundColor: theme.alpha("base_light", 0.5)
+      backgroundColor: theme.alpha("textLight", 0.5)
     },
     "&$disabled": {
-      backgroundColor: theme.alpha("base_light", 0.1)
+      backgroundColor: theme.alpha("textLight", 0.1)
     }
   },
   // TODO - remove in v6

package/dist/esm/Button/Button.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.styles.js","sources":["../../../src/Button/Button.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme, type HvSize } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvButton\", {\n  /** applied to the root element */\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    textTransform: \"none\",\n    cursor: \"pointer\",\n    whiteSpace: \"nowrap\",\n\n    // Background color common for almost all variants\n    \":where(:not($disabled))\": {\n      \":hover, :focus-visible\": {\n        backgroundColor: theme.colors.containerBackgroundHover,\n      },\n    },\n    \":focus-visible\": {\n      ...outlineStyles,\n    },\n\n    // Default button - no size specified\n    fontFamily: theme.fontFamily.body,\n    ...theme.typography.label,\n    color: \"var(--color, currentcolor)\",\n    backgroundColor: \"transparent\",\n    height: \"var(--HvButton-height)\",\n    border: \"1px solid transparent\",\n    borderRadius: `var(--radius, ${theme.radii.base})`,\n    padding: theme.spacing(0, \"sm\"),\n  },\n  /** applied to the _left_ icon container */\n  startIcon: {\n    marginLeft: theme.spacing(-1),\n    marginTop: -1,\n    marginBottom: -1,\n  },\n  /** applied to the _right_ icon container */\n  endIcon: {\n    marginRight: theme.spacing(-1),\n    marginTop: -1,\n    marginBottom: -1,\n  },\n  focusVisible: {},\n  /** applied to the root element when disabled */\n  disabled: {\n    cursor: \"not-allowed\",\n    color: theme.colors.secondary_60,\n    backgroundColor: \"transparent\",\n    borderColor: \"transparent\",\n    \":hover, :focus-visible\": {\n      backgroundColor: \"transparent\",\n      borderColor: \"transparent\",\n    },\n  },\n  /** applied to the root element when is icon-only */\n  icon: {\n    margin: 0,\n    padding: 0,\n    height: \"fit-content\",\n    \"& > *\": {\n      margin: -1,\n    },\n  },\n  /** applied to the root element when using the `contained` variant */\n  contained: {\n    color: theme.colors.atmo1, // `color-contrast(var(--color) vs ${colors.atmo1}, ${colors.base_light}, ${colors.base_dark})`,\n    backgroundColor: \"var(--color)\",\n    \":where(:not($disabled))\": {\n      \":hover, :focus-visible\": {\n        backgroundColor: \"color-mix(in srgb, var(--color), black 20%)\",\n      },\n      \":active\": {\n        backgroundColor: \"color-mix(in srgb, var(--color), black 30%)\",\n      },\n    },\n  },\n  /** applied to the root element when using the `subtle` variant */\n  subtle: {\n    borderColor: \"currentcolor\",\n  },\n  /** applied to the root element when using the `ghost` variant */\n  ghost: {},\n  /** applied to the root element when using the `semantic` variant */\n  semantic: {\n    color: theme.colors.base_dark,\n    backgroundColor: \"transparent\",\n    borderColor: \"transparent\",\n    \"&:hover, &:focus-visible\": {\n      backgroundColor: theme.alpha(\"base_light\", 0.3),\n    },\n    \"&:active\": {\n      backgroundColor: theme.alpha(\"base_light\", 0.5),\n    },\n    \"&$disabled\": {\n      backgroundColor: theme.alpha(\"base_light\", 0.1),\n    },\n  },\n\n  // TODO - remove in v6\n  primary: {},\n  primarySubtle: {},\n  primaryGhost: {},\n  secondarySubtle: {},\n  secondaryGhost: {},\n\n  // Deprecated (DS3)\n  secondary: {},\n});\n\n// TODO - remove xs and xl in v6 since they are not DS spec\nconst sizes: Record<\n  HvSize,\n  { height: string; space?: HvSize; fontSize?: keyof typeof theme.fontSizes }\n> = {\n  xs: { height: \"24px\", fontSize: \"sm\" },\n  sm: { height: \"24px\", fontSize: \"sm\" },\n  md: { height: \"32px\" },\n  lg: { height: \"48px\", space: \"md\" },\n  xl: { height: \"48px\", space: \"md\" },\n};\n\nexport const getSizeStyles = (size: HvSize) => {\n  const { height, space = \"sm\", fontSize } = sizes[size];\n  return {\n    height,\n    padding: theme.spacing(0, space),\n    fontSize: fontSize && theme.fontSizes[fontSize],\n  };\n};\n\nexport const getIconSizeStyles = (size: HvSize) => {\n  const { height } = sizes[size];\n  return {\n    height,\n    width: height,\n  };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Button.styles.js","sources":["../../../src/Button/Button.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme, type HvSize } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvButton\", {\n  /** applied to the root element */\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    textTransform: \"none\",\n    cursor: \"pointer\",\n    whiteSpace: \"nowrap\",\n\n    // Background color common for almost all variants\n    \":where(:not($disabled))\": {\n      \":hover, :focus-visible\": {\n        backgroundColor: theme.colors.bgHover,\n      },\n    },\n    \":focus-visible\": {\n      ...outlineStyles,\n    },\n\n    // Default button - no size specified\n    fontFamily: theme.fontFamily.body,\n    ...theme.typography.label,\n    color: \"var(--color, currentcolor)\",\n    backgroundColor: \"transparent\",\n    height: \"var(--HvButton-height, fit-content)\",\n    border: \"1px solid transparent\",\n    borderRadius: `var(--radius, ${theme.radii.base})`,\n    padding: theme.spacing(0, \"sm\"),\n\n    \"& $startIcon, & $endIcon\": {\n      flexShrink: 0,\n      lineHeight: 0,\n      marginTop: -1,\n      marginBottom: -1,\n    },\n  },\n  /** applied to the _left_ icon container */\n  startIcon: {\n    marginLeft: theme.spacing(-1),\n  },\n  /** applied to the _right_ icon container */\n  endIcon: {\n    marginRight: theme.spacing(-1),\n  },\n  focusVisible: {},\n  /** applied to the root element when disabled */\n  disabled: {\n    cursor: \"not-allowed\",\n    color: theme.colors.textDisabled,\n    backgroundColor: \"transparent\",\n    borderColor: \"transparent\",\n    \":hover, :focus-visible\": {\n      backgroundColor: \"transparent\",\n      borderColor: \"transparent\",\n    },\n  },\n  /** applied to the root element when is icon-only */\n  icon: {\n    margin: 0,\n    padding: 0,\n    width: \"var(--HvButton-height, fit-content)\",\n  },\n  /** applied to the root element when using the `contained` variant */\n  contained: {\n    color: theme.colors.textDimmed, // `color-contrast(var(--color) vs ${colors.textDimmed}, ${colors.textLight}, ${colors.textDark})`,\n    backgroundColor: \"var(--color)\",\n    \":where(:not($disabled))\": {\n      \":hover, :focus-visible\": {\n        backgroundColor: \"color-mix(in srgb, var(--color), black 20%)\",\n      },\n      \":active\": {\n        backgroundColor: \"color-mix(in srgb, var(--color), black 30%)\",\n      },\n    },\n  },\n  /** applied to the root element when using the `subtle` variant */\n  subtle: {\n    borderColor: \"currentcolor\",\n  },\n  /** applied to the root element when using the `ghost` variant */\n  ghost: {},\n  /** applied to the root element when using the `semantic` variant */\n  semantic: {\n    color: theme.colors.textDark,\n    backgroundColor: \"transparent\",\n    borderColor: \"transparent\",\n    \"&:hover, &:focus-visible\": {\n      backgroundColor: theme.alpha(\"textLight\", 0.3),\n    },\n    \"&:active\": {\n      backgroundColor: theme.alpha(\"textLight\", 0.5),\n    },\n    \"&$disabled\": {\n      backgroundColor: theme.alpha(\"textLight\", 0.1),\n    },\n  },\n\n  // TODO - remove in v6\n  primary: {},\n  primarySubtle: {},\n  primaryGhost: {},\n  secondarySubtle: {},\n  secondaryGhost: {},\n\n  // Deprecated (DS3)\n  secondary: {},\n});\n\n// TODO - remove xs and xl in v6 since they are not DS spec\nconst sizes: Record<\n  HvSize,\n  { height: string; space?: HvSize; fontSize?: keyof typeof theme.fontSizes }\n> = {\n  xs: { height: \"24px\", fontSize: \"sm\" },\n  sm: { height: \"24px\", fontSize: \"sm\" },\n  md: { height: \"32px\" },\n  lg: { height: \"48px\", space: \"md\" },\n  xl: { height: \"48px\", space: \"md\" },\n};\n\nexport const getSizeStyles = (size: HvSize) => {\n  const { height, space = \"sm\", fontSize } = sizes[size];\n  return {\n    height,\n    padding: theme.spacing(0, space),\n    fontSize: fontSize && theme.fontSizes[fontSize],\n  };\n};\n\nexport const getIconSizeStyles = (size: HvSize) => {\n  const { height } = sizes[size];\n  return {\n    height,\n    width: height,\n  };\n};\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA;AAAA,EAErE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,YAAY;AAAA;AAAA,IAGZ,2BAA2B;AAAA,MACzB,0BAA0B;AAAA,QACxB,iBAAiB,MAAM,OAAO;AAAA,MAAA;AAAA,IAElC;AAAA,IACA,kBAAkB;AAAA,MAChB,GAAG;AAAA,IACL;AAAA;AAAA,IAGA,YAAY,MAAM,WAAW;AAAA,IAC7B,GAAG,MAAM,WAAW;AAAA,IACpB,OAAO;AAAA,IACP,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,cAAc,iBAAiB,MAAM,MAAM,IAAI;AAAA,IAC/C,SAAS,MAAM,QAAQ,GAAG,IAAI;AAAA,IAE9B,4BAA4B;AAAA,MAC1B,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,cAAc;AAAA,IAAA;AAAA,EAElB;AAAA;AAAA,EAEA,WAAW;AAAA,IACT,YAAY,MAAM,QAAQ,EAAE;AAAA,EAC9B;AAAA;AAAA,EAEA,SAAS;AAAA,IACP,aAAa,MAAM,QAAQ,EAAE;AAAA,EAC/B;AAAA,EACA,cAAc,CAAC;AAAA;AAAA,EAEf,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,0BAA0B;AAAA,MACxB,iBAAiB;AAAA,MACjB,aAAa;AAAA,IAAA;AAAA,EAEjB;AAAA;AAAA,EAEA,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA;AAAA,EAEA,WAAW;AAAA,IACT,OAAO,MAAM,OAAO;AAAA;AAAA,IACpB,iBAAiB;AAAA,IACjB,2BAA2B;AAAA,MACzB,0BAA0B;AAAA,QACxB,iBAAiB;AAAA,MACnB;AAAA,MACA,WAAW;AAAA,QACT,iBAAiB;AAAA,MAAA;AAAA,IACnB;AAAA,EAEJ;AAAA;AAAA,EAEA,QAAQ;AAAA,IACN,aAAa;AAAA,EACf;AAAA;AAAA,EAEA,OAAO,CAAC;AAAA;AAAA,EAER,UAAU;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,4BAA4B;AAAA,MAC1B,iBAAiB,MAAM,MAAM,aAAa,GAAG;AAAA,IAC/C;AAAA,IACA,YAAY;AAAA,MACV,iBAAiB,MAAM,MAAM,aAAa,GAAG;AAAA,IAC/C;AAAA,IACA,cAAc;AAAA,MACZ,iBAAiB,MAAM,MAAM,aAAa,GAAG;AAAA,IAAA;AAAA,EAEjD;AAAA;AAAA,EAGA,SAAS,CAAC;AAAA,EACV,eAAe,CAAC;AAAA,EAChB,cAAc,CAAC;AAAA,EACf,iBAAiB,CAAC;AAAA,EAClB,gBAAgB,CAAC;AAAA;AAAA,EAGjB,WAAW,CAAA;AACb,CAAC;AAGD,MAAM,QAGF;AAAA,EACF,IAAI,EAAE,QAAQ,QAAQ,UAAU,KAAK;AAAA,EACrC,IAAI,EAAE,QAAQ,QAAQ,UAAU,KAAK;AAAA,EACrC,IAAI,EAAE,QAAQ,OAAO;AAAA,EACrB,IAAI,EAAE,QAAQ,QAAQ,OAAO,KAAK;AAAA,EAClC,IAAI,EAAE,QAAQ,QAAQ,OAAO,KAAK;AACpC;AAEa,MAAA,gBAAgB,CAAC,SAAiB;AAC7C,QAAM,EAAE,QAAQ,QAAQ,MAAM,SAAS,IAAI,MAAM,IAAI;AAC9C,SAAA;AAAA,IACL;AAAA,IACA,SAAS,MAAM,QAAQ,GAAG,KAAK;AAAA,IAC/B,UAAU,YAAY,MAAM,UAAU,QAAQ;AAAA,EAChD;AACF;AAEa,MAAA,oBAAoB,CAAC,SAAiB;AACjD,QAAM,EAAE,OAAA,IAAW,MAAM,IAAI;AACtB,SAAA;AAAA,IACL;AAAA,IACA,OAAO;AAAA,EACT;AACF;"}

package/dist/esm/ButtonBase/ButtonBase.styles.js

@@ -10,7 +10,7 @@ const { staticClasses, useClasses } = createClasses("HvButtonBase", {
     // Background color common for almost all variants
     ":where(:not($disabled))": {
       ":hover, :focus-visible": {
-        backgroundColor: theme.colors.containerBackgroundHover
+        backgroundColor: theme.colors.bgHover
       }
     },
     ":focus-visible": {
@@ -23,7 +23,7 @@ const { staticClasses, useClasses } = createClasses("HvButtonBase", {
   },
   disabled: {
     cursor: "not-allowed",
-    color: theme.colors.secondary_60,
+    color: theme.colors.textDisabled,
     "&:hover, &:focus-visible": {
       backgroundColor: "transparent"
     }

package/dist/esm/ButtonBase/ButtonBase.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.styles.js","sources":["../../../src/ButtonBase/ButtonBase.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvButtonBase\", {\n  root: {\n    display: \"inline-flex\",\n    cursor: \"pointer\",\n    background: \"none\",\n    padding: 0,\n\n    // Background color common for almost all variants\n    \":where(:not($disabled))\": {\n      \":hover, :focus-visible\": {\n        backgroundColor: theme.colors.containerBackgroundHover,\n      },\n    },\n    \":focus-visible\": {\n      ...outlineStyles,\n    },\n\n    // Default button - no size specified\n    fontFamily: theme.fontFamily.body,\n    fontSize: \"inherit\",\n    color: \"inherit\",\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n    color: theme.colors.secondary_60,\n    \"&:hover, &:focus-visible\": {\n      backgroundColor: \"transparent\",\n    },\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,SAAS;AAAA;AAAA,IAGT,2BAA2B;AAAA,MACzB,0BAA0B;AAAA,QACxB,iBAAiB,MAAM,OAAO;AAAA,MAAA;AAAA,IAElC;AAAA,IACA,kBAAkB;AAAA,MAChB,GAAG;AAAA,IACL;AAAA;AAAA,IAGA,YAAY,MAAM,WAAW;AAAA,IAC7B,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,4BAA4B;AAAA,MAC1B,iBAAiB;AAAA,IAAA;AAAA,EACnB;AAEJ,CAAC;"}
+{"version":3,"file":"ButtonBase.styles.js","sources":["../../../src/ButtonBase/ButtonBase.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvButtonBase\", {\n  root: {\n    display: \"inline-flex\",\n    cursor: \"pointer\",\n    background: \"none\",\n    padding: 0,\n\n    // Background color common for almost all variants\n    \":where(:not($disabled))\": {\n      \":hover, :focus-visible\": {\n        backgroundColor: theme.colors.bgHover,\n      },\n    },\n    \":focus-visible\": {\n      ...outlineStyles,\n    },\n\n    // Default button - no size specified\n    fontFamily: theme.fontFamily.body,\n    fontSize: \"inherit\",\n    color: \"inherit\",\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n    color: theme.colors.textDisabled,\n    \"&:hover, &:focus-visible\": {\n      backgroundColor: \"transparent\",\n    },\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,SAAS;AAAA;AAAA,IAGT,2BAA2B;AAAA,MACzB,0BAA0B;AAAA,QACxB,iBAAiB,MAAM,OAAO;AAAA,MAAA;AAAA,IAElC;AAAA,IACA,kBAAkB;AAAA,MAChB,GAAG;AAAA,IACL;AAAA;AAAA,IAGA,YAAY,MAAM,WAAW;AAAA,IAC7B,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,4BAA4B;AAAA,MAC1B,iBAAiB;AAAA,IAAA;AAAA,EACnB;AAEJ,CAAC;"}

package/dist/esm/Calendar/Calendar.styles.js

@@ -16,7 +16,7 @@ const { staticClasses, useClasses } = createClasses("HvCalendar", {
           "& > div:nth-of-type(3)": {
             "& > div": {
               "& > div[data-calendar-cell='calendarCell']": {
-                backgroundColor: theme.colors.atmo1
+                backgroundColor: theme.colors.bgContainer
               }
             }
           }

package/dist/esm/Calendar/Calendar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.styles.js","sources":["../../../src/Calendar/Calendar.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCalendar\", {\n  root: {\n    display: \"flex\",\n    justifyContent: \"center\",\n  },\n  rangeCalendarContainer: {\n    display: \"flex\",\n  },\n  singleCalendar: {\n    \"&:hover\": {\n      \"& ~ $singleCalendar\": {\n        // target the next calendar when the former is hovered\n        \"& > div\": {\n          \"& > div:nth-of-type(3)\": {\n            \"& > div\": {\n              \"& > div[data-calendar-cell='calendarCell']\": {\n                backgroundColor: theme.colors.atmo1,\n              },\n            },\n          },\n        },\n      },\n    },\n  },\n  focusSelection: {},\n  calendarMonthlyCell: {},\n  calendarMonthlyCellSelected: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,gBAAgB;AAAA,EAClB;AAAA,EACA,wBAAwB;AAAA,IACtB,SAAS;AAAA,EACX;AAAA,EACA,gBAAgB;AAAA,IACd,WAAW;AAAA,MACT,uBAAuB;AAAA;AAAA,QAErB,WAAW;AAAA,UACT,0BAA0B;AAAA,YACxB,WAAW;AAAA,cACT,8CAA8C;AAAA,gBAC5C,iBAAiB,MAAM,OAAO;AAAA,cAAA;AAAA,YAChC;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EAEJ;AAAA,EACA,gBAAgB,CAAC;AAAA,EACjB,qBAAqB,CAAC;AAAA,EACtB,6BAA6B,CAAA;AAC/B,CAAC;"}
+{"version":3,"file":"Calendar.styles.js","sources":["../../../src/Calendar/Calendar.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCalendar\", {\n  root: {\n    display: \"flex\",\n    justifyContent: \"center\",\n  },\n  rangeCalendarContainer: {\n    display: \"flex\",\n  },\n  singleCalendar: {\n    \"&:hover\": {\n      \"& ~ $singleCalendar\": {\n        // target the next calendar when the former is hovered\n        \"& > div\": {\n          \"& > div:nth-of-type(3)\": {\n            \"& > div\": {\n              \"& > div[data-calendar-cell='calendarCell']\": {\n                backgroundColor: theme.colors.bgContainer,\n              },\n            },\n          },\n        },\n      },\n    },\n  },\n  focusSelection: {},\n  calendarMonthlyCell: {},\n  calendarMonthlyCellSelected: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,gBAAgB;AAAA,EAClB;AAAA,EACA,wBAAwB;AAAA,IACtB,SAAS;AAAA,EACX;AAAA,EACA,gBAAgB;AAAA,IACd,WAAW;AAAA,MACT,uBAAuB;AAAA;AAAA,QAErB,WAAW;AAAA,UACT,0BAA0B;AAAA,YACxB,WAAW;AAAA,cACT,8CAA8C;AAAA,gBAC5C,iBAAiB,MAAM,OAAO;AAAA,cAAA;AAAA,YAChC;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EAEJ;AAAA,EACA,gBAAgB,CAAC;AAAA,EACjB,qBAAqB,CAAC;AAAA,EACtB,6BAA6B,CAAA;AAC/B,CAAC;"}

package/dist/esm/Calendar/CalendarHeader/CalendarHeader.styles.js

@@ -9,7 +9,7 @@ const { staticClasses, useClasses } = createClasses("HvCalendarHeader", {
   },
   invalid: {},
   headerDayOfWeek: {
-    color: theme.colors.secondary_80
+    color: theme.colors.textSubtle
   }
 });
 export {

package/dist/esm/Calendar/CalendarHeader/CalendarHeader.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarHeader.styles.js","sources":["../../../../src/Calendar/CalendarHeader/CalendarHeader.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCalendarHeader\", {\n  root: {\n    paddingBottom: theme.space.sm,\n\n    \"&$invalid\": {\n      paddingBottom: 0,\n    },\n  },\n  invalid: {},\n  headerDayOfWeek: {\n    color: theme.colors.secondary_80,\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,eAAe,MAAM,MAAM;AAAA,IAE3B,aAAa;AAAA,MACX,eAAe;AAAA,IAAA;AAAA,EAEnB;AAAA,EACA,SAAS,CAAC;AAAA,EACV,iBAAiB;AAAA,IACf,OAAO,MAAM,OAAO;AAAA,EAAA;AAExB,CAAC;"}
+{"version":3,"file":"CalendarHeader.styles.js","sources":["../../../../src/Calendar/CalendarHeader/CalendarHeader.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCalendarHeader\", {\n  root: {\n    paddingBottom: theme.space.sm,\n\n    \"&$invalid\": {\n      paddingBottom: 0,\n    },\n  },\n  invalid: {},\n  headerDayOfWeek: {\n    color: theme.colors.textSubtle,\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,eAAe,MAAM,MAAM;AAAA,IAE3B,aAAa;AAAA,MACX,eAAe;AAAA,IAAA;AAAA,EAEnB;AAAA,EACA,SAAS,CAAC;AAAA,EACV,iBAAiB;AAAA,IACf,OAAO,MAAM,OAAO;AAAA,EAAA;AAExB,CAAC;"}

package/dist/esm/Calendar/CalendarNavigation/MonthSelector/MonthSelector.styles.js

@@ -17,7 +17,7 @@ const { staticClasses, useClasses } = createClasses("HvMonthSelector", {
     width: "92px"
   },
   calendarMonthlyCellSelected: {
-    backgroundColor: theme.colors.atmo3
+    backgroundColor: theme.colors.bgPageSecondary
   }
 });
 export {

package/dist/esm/Calendar/CalendarNavigation/MonthSelector/MonthSelector.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"MonthSelector.styles.js","sources":["../../../../../src/Calendar/CalendarNavigation/MonthSelector/MonthSelector.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvMonthSelector\", {\n  calendarMonthlyGrid: {\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(3, 1fr)\",\n    zIndex: \"10\",\n    alignContent: \"center\",\n  },\n  rangeModeWidth: {},\n  normalWidth: {},\n  calendarMonthlyCell: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    height: \"40px\",\n    width: \"92px\",\n  },\n  calendarMonthlyCellSelected: {\n    backgroundColor: theme.colors.atmo3,\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,qBAAqB;AAAA,IACnB,SAAS;AAAA,IACT,qBAAqB;AAAA,IACrB,QAAQ;AAAA,IACR,cAAc;AAAA,EAChB;AAAA,EACA,gBAAgB,CAAC;AAAA,EACjB,aAAa,CAAC;AAAA,EACd,qBAAqB;AAAA,IACnB,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA,EACA,6BAA6B;AAAA,IAC3B,iBAAiB,MAAM,OAAO;AAAA,EAAA;AAElC,CAAC;"}
+{"version":3,"file":"MonthSelector.styles.js","sources":["../../../../../src/Calendar/CalendarNavigation/MonthSelector/MonthSelector.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvMonthSelector\", {\n  calendarMonthlyGrid: {\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(3, 1fr)\",\n    zIndex: \"10\",\n    alignContent: \"center\",\n  },\n  rangeModeWidth: {},\n  normalWidth: {},\n  calendarMonthlyCell: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    height: \"40px\",\n    width: \"92px\",\n  },\n  calendarMonthlyCellSelected: {\n    backgroundColor: theme.colors.bgPageSecondary,\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,qBAAqB;AAAA,IACnB,SAAS;AAAA,IACT,qBAAqB;AAAA,IACrB,QAAQ;AAAA,IACR,cAAc;AAAA,EAChB;AAAA,EACA,gBAAgB,CAAC;AAAA,EACjB,aAAa,CAAC;AAAA,EACd,qBAAqB;AAAA,IACnB,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA,EACA,6BAA6B;AAAA,IAC3B,iBAAiB,MAAM,OAAO;AAAA,EAAA;AAElC,CAAC;"}

package/dist/esm/Calendar/CalendarNavigation/Navigation/Navigation.styles.js

@@ -12,7 +12,7 @@ const { staticClasses, useClasses } = createClasses("HvNavigation", {
   text: {
     minWidth: "unset",
     flex: 1,
-    color: theme.colors.secondary,
+    color: theme.colors.text,
     fontWeight: theme.typography.body.fontWeight,
     padding: 0
   },