@hitachivantara/uikit-react-core 5.89.0 → 5.90.0

package/dist/esm/BaseDropdown/BaseDropdown.styles.js

@@ -15,9 +15,9 @@ const { useClasses, staticClasses } = createClasses("HvBaseDropdown", {
     cursor: "pointer",
     userSelect: "none",
     position: "relative",
-    background: theme.colors.atmo1,
+    background: theme.colors.bgContainer,
     boxSizing: "border-box",
-    border: `1px solid ${theme.colors.secondary}`,
+    border: `1px solid ${theme.colors.text}`,
     borderRadius: theme.radii.base,
     "&:hover": {
       border: `1px solid ${theme.colors.primary}`
@@ -31,9 +31,9 @@ const { useClasses, staticClasses } = createClasses("HvBaseDropdown", {
     }
   },
   headerOpen: {
-    border: `1px solid ${theme.colors.secondary}`,
+    border: `1px solid ${theme.colors.text}`,
     "&:hover": {
-      border: `1px solid ${theme.colors.secondary}`
+      border: `1px solid ${theme.colors.text}`
     }
   },
   headerOpenUp: {
@@ -45,23 +45,23 @@ const { useClasses, staticClasses } = createClasses("HvBaseDropdown", {
   headerDisabled: {
     cursor: "not-allowed",
     pointerEvents: "none",
-    color: theme.colors.secondary_60,
-    border: `1px solid ${theme.colors.secondary_60}`,
-    background: theme.colors.atmo2,
+    color: theme.colors.textDisabled,
+    border: `1px solid currentcolor`,
+    background: theme.colors.bgPage,
     "&:hover": {
-      border: `1px solid ${theme.colors.secondary_60}`
+      border: `1px solid currentcolor`
     }
   },
   headerReadOnly: {
     cursor: "not-allowed",
     pointerEvents: "none",
-    color: theme.colors.secondary_80,
-    border: `1px solid ${theme.colors.secondary_60}`,
-    background: theme.colors.atmo2,
+    color: theme.colors.textSubtle,
+    border: `1px solid currentcolor`,
+    background: theme.colors.bgPage,
     userSelect: "text",
     "&:focus-visible": {
       outline: "none",
-      border: `1px solid ${theme.colors.secondary_60}`
+      border: `1px solid currentcolor`
     }
   },
   arrowContainer: {
@@ -77,17 +77,17 @@ const { useClasses, staticClasses } = createClasses("HvBaseDropdown", {
     height: "30px",
     boxSizing: "border-box",
     paddingLeft: theme.space.xs,
-    paddingRight: theme.sizes.sm
+    paddingRight: 32
   },
   selectionDisabled: {},
   placeholder: {
     display: "block",
-    color: theme.colors.secondary_80
+    color: theme.colors.textSubtle
   },
   panel: {
     // TODO: remove padding override in v6 (most elements need it)
     padding: 0,
-    border: `1px solid ${theme.colors.secondary}`
+    border: `1px solid ${theme.colors.text}`
   },
   panelOpenedUp: {
     top: 1,
@@ -99,15 +99,15 @@ const { useClasses, staticClasses } = createClasses("HvBaseDropdown", {
   },
   inputExtensionOpen: {
     height: "0px",
-    backgroundColor: theme.colors.atmo1,
+    backgroundColor: theme.colors.bgContainer,
     borderTop: "none",
     borderBottom: "none",
-    borderRight: `1px solid ${theme.colors.secondary}`,
-    borderLeft: `1px solid ${theme.colors.secondary}`
+    borderRight: `1px solid ${theme.colors.text}`,
+    borderLeft: `1px solid ${theme.colors.text}`
   },
   inputExtensionLeftPosition: { marginLeft: "auto" },
   inputExtensionOpenShadow: {
-    boxShadow: `0px 8px 0px ${theme.colors.atmo1}, 0px 0px 9px 0px rgba(65,65,65,.12)`
+    boxShadow: `0px 8px 0px ${theme.colors.textDimmed}, 0px 0px 9px 0px rgba(65,65,65,.12)`
   },
   inputExtensionFloatRight: { float: "right" },
   inputExtensionFloatLeft: { float: "left" }

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

@@ -1 +1 @@
-{"version":3,"file":"BaseDropdown.styles.js","sources":["../../../src/BaseDropdown/BaseDropdown.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 { useClasses, staticClasses } = createClasses(\"HvBaseDropdown\", {\n  root: { width: \"100%\", position: \"relative\" },\n  rootDisabled: {\n    cursor: \"not-allowed\",\n    \"&:focus\": {\n      outline: \"none\",\n    },\n  },\n  anchor: { display: \"inline-block\", width: \"100%\" },\n  container: { zIndex: theme.zIndices.popover, width: \"auto\" },\n  header: {\n    cursor: \"pointer\",\n    userSelect: \"none\",\n    position: \"relative\",\n    background: theme.colors.atmo1,\n    boxSizing: \"border-box\",\n    border: `1px solid ${theme.colors.secondary}`,\n    borderRadius: theme.radii.base,\n    \"&:hover\": {\n      border: `1px solid ${theme.colors.primary}`,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n      border: `1px solid ${theme.colors.primary}`,\n    },\n  },\n  headerOpen: {\n    border: `1px solid ${theme.colors.secondary}`,\n\n    \"&:hover\": {\n      border: `1px solid ${theme.colors.secondary}`,\n    },\n  },\n  headerOpenUp: {\n    borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,\n  },\n  headerOpenDown: {\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,\n  },\n  headerDisabled: {\n    cursor: \"not-allowed\",\n    pointerEvents: \"none\",\n    color: theme.colors.secondary_60,\n    border: `1px solid ${theme.colors.secondary_60}`,\n    background: theme.colors.atmo2,\n    \"&:hover\": {\n      border: `1px solid ${theme.colors.secondary_60}`,\n    },\n  },\n  headerReadOnly: {\n    cursor: \"not-allowed\",\n    pointerEvents: \"none\",\n    color: theme.colors.secondary_80,\n    border: `1px solid ${theme.colors.secondary_60}`,\n    background: theme.colors.atmo2,\n    userSelect: \"text\",\n    \"&:focus-visible\": {\n      outline: \"none\",\n      border: `1px solid ${theme.colors.secondary_60}`,\n    },\n  },\n  arrowContainer: {\n    position: \"absolute\",\n    pointerEvents: \"none\",\n    top: -1,\n    right: -1,\n  },\n  arrow: {},\n  selection: {\n    display: \"flex\",\n    alignItems: \"center\",\n    height: \"30px\",\n    boxSizing: \"border-box\",\n    paddingLeft: theme.space.xs,\n    paddingRight: theme.sizes.sm,\n  },\n  selectionDisabled: {},\n  placeholder: {\n    display: \"block\",\n    color: theme.colors.secondary_80,\n  },\n  panel: {\n    // TODO: remove padding override in v6 (most elements need it)\n    padding: 0,\n    border: `1px solid ${theme.colors.secondary}`,\n  },\n  panelOpenedUp: {\n    top: 1,\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0 0`,\n  },\n  panelOpenedDown: {\n    top: -1,\n    borderRadius: `0 0 ${theme.radii.base} ${theme.radii.base}`,\n  },\n  inputExtensionOpen: {\n    height: \"0px\",\n    backgroundColor: theme.colors.atmo1,\n    borderTop: \"none\",\n    borderBottom: \"none\",\n    borderRight: `1px solid ${theme.colors.secondary}`,\n    borderLeft: `1px solid ${theme.colors.secondary}`,\n  },\n  inputExtensionLeftPosition: { marginLeft: \"auto\" },\n  inputExtensionOpenShadow: {\n    boxShadow: `0px 8px 0px ${theme.colors.atmo1}, 0px 0px 9px 0px rgba(65,65,65,.12)`,\n  },\n  inputExtensionFloatRight: { float: \"right\" },\n  inputExtensionFloatLeft: { float: \"left\" },\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"BaseDropdown.styles.js","sources":["../../../src/BaseDropdown/BaseDropdown.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 { useClasses, staticClasses } = createClasses(\"HvBaseDropdown\", {\n  root: { width: \"100%\", position: \"relative\" },\n  rootDisabled: {\n    cursor: \"not-allowed\",\n    \"&:focus\": {\n      outline: \"none\",\n    },\n  },\n  anchor: { display: \"inline-block\", width: \"100%\" },\n  container: { zIndex: theme.zIndices.popover, width: \"auto\" },\n  header: {\n    cursor: \"pointer\",\n    userSelect: \"none\",\n    position: \"relative\",\n    background: theme.colors.bgContainer,\n    boxSizing: \"border-box\",\n    border: `1px solid ${theme.colors.text}`,\n    borderRadius: theme.radii.base,\n    \"&:hover\": {\n      border: `1px solid ${theme.colors.primary}`,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n      border: `1px solid ${theme.colors.primary}`,\n    },\n  },\n  headerOpen: {\n    border: `1px solid ${theme.colors.text}`,\n\n    \"&:hover\": {\n      border: `1px solid ${theme.colors.text}`,\n    },\n  },\n  headerOpenUp: {\n    borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,\n  },\n  headerOpenDown: {\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,\n  },\n  headerDisabled: {\n    cursor: \"not-allowed\",\n    pointerEvents: \"none\",\n    color: theme.colors.textDisabled,\n    border: `1px solid currentcolor`,\n    background: theme.colors.bgPage,\n    \"&:hover\": {\n      border: `1px solid currentcolor`,\n    },\n  },\n  headerReadOnly: {\n    cursor: \"not-allowed\",\n    pointerEvents: \"none\",\n    color: theme.colors.textSubtle,\n    border: `1px solid currentcolor`,\n    background: theme.colors.bgPage,\n    userSelect: \"text\",\n    \"&:focus-visible\": {\n      outline: \"none\",\n      border: `1px solid currentcolor`,\n    },\n  },\n  arrowContainer: {\n    position: \"absolute\",\n    pointerEvents: \"none\",\n    top: -1,\n    right: -1,\n  },\n  arrow: {},\n  selection: {\n    display: \"flex\",\n    alignItems: \"center\",\n    height: \"30px\",\n    boxSizing: \"border-box\",\n    paddingLeft: theme.space.xs,\n    paddingRight: 32,\n  },\n  selectionDisabled: {},\n  placeholder: {\n    display: \"block\",\n    color: theme.colors.textSubtle,\n  },\n  panel: {\n    // TODO: remove padding override in v6 (most elements need it)\n    padding: 0,\n    border: `1px solid ${theme.colors.text}`,\n  },\n  panelOpenedUp: {\n    top: 1,\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0 0`,\n  },\n  panelOpenedDown: {\n    top: -1,\n    borderRadius: `0 0 ${theme.radii.base} ${theme.radii.base}`,\n  },\n  inputExtensionOpen: {\n    height: \"0px\",\n    backgroundColor: theme.colors.bgContainer,\n    borderTop: \"none\",\n    borderBottom: \"none\",\n    borderRight: `1px solid ${theme.colors.text}`,\n    borderLeft: `1px solid ${theme.colors.text}`,\n  },\n  inputExtensionLeftPosition: { marginLeft: \"auto\" },\n  inputExtensionOpenShadow: {\n    boxShadow: `0px 8px 0px ${theme.colors.textDimmed}, 0px 0px 9px 0px rgba(65,65,65,.12)`,\n  },\n  inputExtensionFloatRight: { float: \"right\" },\n  inputExtensionFloatLeft: { float: \"left\" },\n});\n"],"names":[],"mappings":"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"}

package/dist/esm/BaseInput/BaseInput.styles.js

@@ -5,8 +5,8 @@ const { staticClasses, useClasses } = createClasses("HvBaseInput", {
   root: {
     // #region `input` style reset
     "input:-webkit-autofill": {
-      WebkitBoxShadow: `0 0 0px 1000px ${theme.colors.atmo1} inset`,
-      WebkitTextFillColor: theme.colors.secondary
+      WebkitBoxShadow: `0 0 0px 1000px ${theme.colors.textDimmed} inset`,
+      WebkitTextFillColor: theme.colors.text
     },
     // Clears number input up/down arrows in Chrome and Firefox
     "input[type=number]": {
@@ -32,9 +32,9 @@ const { staticClasses, useClasses } = createClasses("HvBaseInput", {
     borderRadius: theme.radii.base,
     height: "32px",
     borderWidth: 1,
-    borderColor: theme.colors.secondary,
+    borderColor: theme.colors.text,
     boxSizing: "border-box",
-    backgroundColor: theme.colors.atmo1,
+    backgroundColor: theme.colors.bgContainer,
     fontFamily: theme.fontFamily.body,
     ":hover:not($disabled,$invalid,$readOnly)": {
       borderColor: theme.colors.primary
@@ -44,15 +44,15 @@ const { staticClasses, useClasses } = createClasses("HvBaseInput", {
     }
   },
   disabled: {
-    backgroundColor: theme.colors.atmo2,
-    borderColor: theme.colors.secondary_60,
+    backgroundColor: theme.colors.bgPage,
+    borderColor: theme.colors.textDisabled,
     cursor: "not-allowed",
     "&&::before": {
       borderBottomStyle: "none"
     }
   },
   invalid: {
-    borderColor: theme.colors.negative_120
+    borderColor: theme.form.errorColor
   },
   multiline: {
     padding: 0,
@@ -69,19 +69,16 @@ const { staticClasses, useClasses } = createClasses("HvBaseInput", {
   },
   resizable: { width: "auto" },
   readOnly: {
-    borderColor: theme.colors.secondary_60,
-    backgroundColor: theme.colors.atmo2
+    borderColor: theme.colors.textDisabled,
+    backgroundColor: theme.colors.bgPage
   },
   focused: {},
   /** @deprecated unused. use `::after` instead */
   inputBorderContainer: {},
   /** @deprecated use `classes.invalid` instead */
-  inputRootInvalid: { borderColor: theme.colors.negative_120 },
+  inputRootInvalid: {},
   /** @deprecated use `classes.readOnly` instead */
-  inputRootReadOnly: {
-    borderColor: theme.colors.secondary_60,
-    backgroundColor: theme.colors.atmo2
-  },
+  inputRootReadOnly: {},
   /** @deprecated use `classes.root` instead */
   inputRoot: {},
   /** @deprecated unused */
@@ -104,15 +101,15 @@ const { staticClasses, useClasses } = createClasses("HvBaseInput", {
     ...theme.typography.body,
     "&::placeholder": {
       opacity: 1,
-      color: theme.colors.secondary_80
+      color: theme.colors.textSubtle
     }
   },
   inputDisabled: {
-    color: theme.colors.secondary_60,
-    WebkitTextFillColor: theme.colors.secondary_60
+    color: theme.colors.textDisabled,
+    WebkitTextFillColor: theme.colors.textDisabled
   },
   inputReadOnly: {
-    color: theme.colors.secondary_80
+    color: theme.colors.textSubtle
   },
   inputResizable: {
     resize: "both",

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

@@ -1 +1 @@
-{"version":3,"file":"BaseInput.styles.js","sources":["../../../src/BaseInput/BaseInput.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(\"HvBaseInput\", {\n  root: {\n    // #region `input` style reset\n    \"input:-webkit-autofill\": {\n      WebkitBoxShadow: `0 0 0px 1000px ${theme.colors.atmo1} inset`,\n      WebkitTextFillColor: theme.colors.secondary,\n    },\n\n    // Clears number input up/down arrows in Chrome and Firefox\n    \"input[type=number]\": {\n      MozAppearance: \"textfield\",\n      \"&::-webkit-outer-spin-button,&::-webkit-inner-spin-button\": {\n        WebkitAppearance: \"none\",\n        margin: 0,\n      },\n    },\n\n    // Clears time input clock in Chrome\n    \"input::-webkit-calendar-picker-indicator\": {\n      display: \"none\",\n    },\n\n    // Clears search input clear button in Chrome\n    \"input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration\":\n      {\n        display: \"none\",\n      },\n    // #endregion\n\n    display: \"inline-flex\",\n    width: \"100%\",\n    position: \"relative\",\n    margin: 0,\n    borderRadius: theme.radii.base,\n    height: \"32px\",\n    borderWidth: 1,\n    borderColor: theme.colors.secondary,\n    boxSizing: \"border-box\",\n    backgroundColor: theme.colors.atmo1,\n    fontFamily: theme.fontFamily.body,\n\n    \":hover:not($disabled,$invalid,$readOnly)\": {\n      borderColor: theme.colors.primary,\n    },\n    \":focus-within:not($disabled)\": {\n      ...outlineStyles,\n    },\n  },\n  disabled: {\n    backgroundColor: theme.colors.atmo2,\n    borderColor: theme.colors.secondary_60,\n\n    cursor: \"not-allowed\",\n\n    \"&&::before\": {\n      borderBottomStyle: \"none\",\n    },\n  },\n  invalid: {\n    borderColor: theme.colors.negative_120,\n  },\n  multiline: {\n    padding: 0,\n    overflow: \"auto\",\n    height: \"auto\",\n\n    \"& $input\": {\n      borderRadius: theme.radii.base,\n      height: \"auto\",\n      minHeight: \"21px\",\n      padding: \"5px 10px\",\n      overflow: \"auto\",\n      margin: 0,\n    },\n  },\n  resizable: { width: \"auto\" },\n  readOnly: {\n    borderColor: theme.colors.secondary_60,\n    backgroundColor: theme.colors.atmo2,\n  },\n  focused: {},\n  /** @deprecated unused. use `::after` instead */\n  inputBorderContainer: {},\n  /** @deprecated use `classes.invalid` instead */\n  inputRootInvalid: { borderColor: theme.colors.negative_120 },\n  /** @deprecated use `classes.readOnly` instead */\n  inputRootReadOnly: {\n    borderColor: theme.colors.secondary_60,\n    backgroundColor: theme.colors.atmo2,\n  },\n  /** @deprecated use `classes.root` instead */\n  inputRoot: {},\n  /** @deprecated unused */\n  inputRootFocused: {},\n  /** @deprecated use `classes.disabled` instead */\n  inputRootDisabled: {},\n  /** @deprecated use `classes.multiline` instead */\n  inputRootMultiline: {},\n  input: {\n    height: \"100%\",\n    marginLeft: theme.space.xs,\n    marginRight: theme.space.xs,\n    padding: 0,\n    backgroundColor: \"transparent\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    outline: \"none\",\n    width: \"initial\",\n    flexGrow: 1,\n    ...theme.typography.body,\n\n    \"&::placeholder\": {\n      opacity: 1,\n      color: theme.colors.secondary_80,\n    },\n  },\n  inputDisabled: {\n    color: theme.colors.secondary_60,\n    WebkitTextFillColor: theme.colors.secondary_60,\n  },\n  inputReadOnly: {\n    color: theme.colors.secondary_80,\n  },\n  inputResizable: {\n    resize: \"both\",\n    width: \"100%\",\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA;AAAA,IAEJ,0BAA0B;AAAA,MACxB,iBAAiB,kBAAkB,MAAM,OAAO,KAAK;AAAA,MACrD,qBAAqB,MAAM,OAAO;AAAA,IACpC;AAAA;AAAA,IAGA,sBAAsB;AAAA,MACpB,eAAe;AAAA,MACf,6DAA6D;AAAA,QAC3D,kBAAkB;AAAA,QAClB,QAAQ;AAAA,MAAA;AAAA,IAEZ;AAAA;AAAA,IAGA,4CAA4C;AAAA,MAC1C,SAAS;AAAA,IACX;AAAA;AAAA,IAGA,0MACE;AAAA,MACE,SAAS;AAAA,IACX;AAAA;AAAA,IAGF,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,aAAa,MAAM,OAAO;AAAA,IAC1B,WAAW;AAAA,IACX,iBAAiB,MAAM,OAAO;AAAA,IAC9B,YAAY,MAAM,WAAW;AAAA,IAE7B,4CAA4C;AAAA,MAC1C,aAAa,MAAM,OAAO;AAAA,IAC5B;AAAA,IACA,gCAAgC;AAAA,MAC9B,GAAG;AAAA,IAAA;AAAA,EAEP;AAAA,EACA,UAAU;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,IAC9B,aAAa,MAAM,OAAO;AAAA,IAE1B,QAAQ;AAAA,IAER,cAAc;AAAA,MACZ,mBAAmB;AAAA,IAAA;AAAA,EAEvB;AAAA,EACA,SAAS;AAAA,IACP,aAAa,MAAM,OAAO;AAAA,EAC5B;AAAA,EACA,WAAW;AAAA,IACT,SAAS;AAAA,IACT,UAAU;AAAA,IACV,QAAQ;AAAA,IAER,YAAY;AAAA,MACV,cAAc,MAAM,MAAM;AAAA,MAC1B,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,WAAW,EAAE,OAAO,OAAO;AAAA,EAC3B,UAAU;AAAA,IACR,aAAa,MAAM,OAAO;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,SAAS,CAAC;AAAA;AAAA,EAEV,sBAAsB,CAAC;AAAA;AAAA,EAEvB,kBAAkB,EAAE,aAAa,MAAM,OAAO,aAAa;AAAA;AAAA,EAE3D,mBAAmB;AAAA,IACjB,aAAa,MAAM,OAAO;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA;AAAA,EAEA,WAAW,CAAC;AAAA;AAAA,EAEZ,kBAAkB,CAAC;AAAA;AAAA,EAEnB,mBAAmB,CAAC;AAAA;AAAA,EAEpB,oBAAoB,CAAC;AAAA,EACrB,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,YAAY,MAAM,MAAM;AAAA,IACxB,aAAa,MAAM,MAAM;AAAA,IACzB,SAAS;AAAA,IACT,iBAAiB;AAAA,IACjB,UAAU;AAAA,IACV,cAAc;AAAA,IACd,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,GAAG,MAAM,WAAW;AAAA,IAEpB,kBAAkB;AAAA,MAChB,SAAS;AAAA,MACT,OAAO,MAAM,OAAO;AAAA,IAAA;AAAA,EAExB;AAAA,EACA,eAAe;AAAA,IACb,OAAO,MAAM,OAAO;AAAA,IACpB,qBAAqB,MAAM,OAAO;AAAA,EACpC;AAAA,EACA,eAAe;AAAA,IACb,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,gBAAgB;AAAA,IACd,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAEX,CAAC;"}
+{"version":3,"file":"BaseInput.styles.js","sources":["../../../src/BaseInput/BaseInput.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(\"HvBaseInput\", {\n  root: {\n    // #region `input` style reset\n    \"input:-webkit-autofill\": {\n      WebkitBoxShadow: `0 0 0px 1000px ${theme.colors.textDimmed} inset`,\n      WebkitTextFillColor: theme.colors.text,\n    },\n\n    // Clears number input up/down arrows in Chrome and Firefox\n    \"input[type=number]\": {\n      MozAppearance: \"textfield\",\n      \"&::-webkit-outer-spin-button,&::-webkit-inner-spin-button\": {\n        WebkitAppearance: \"none\",\n        margin: 0,\n      },\n    },\n\n    // Clears time input clock in Chrome\n    \"input::-webkit-calendar-picker-indicator\": {\n      display: \"none\",\n    },\n\n    // Clears search input clear button in Chrome\n    \"input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration\":\n      {\n        display: \"none\",\n      },\n    // #endregion\n\n    display: \"inline-flex\",\n    width: \"100%\",\n    position: \"relative\",\n    margin: 0,\n    borderRadius: theme.radii.base,\n    height: \"32px\",\n    borderWidth: 1,\n    borderColor: theme.colors.text,\n    boxSizing: \"border-box\",\n    backgroundColor: theme.colors.bgContainer,\n    fontFamily: theme.fontFamily.body,\n\n    \":hover:not($disabled,$invalid,$readOnly)\": {\n      borderColor: theme.colors.primary,\n    },\n    \":focus-within:not($disabled)\": {\n      ...outlineStyles,\n    },\n  },\n  disabled: {\n    backgroundColor: theme.colors.bgPage,\n    borderColor: theme.colors.textDisabled,\n\n    cursor: \"not-allowed\",\n\n    \"&&::before\": {\n      borderBottomStyle: \"none\",\n    },\n  },\n  invalid: {\n    borderColor: theme.form.errorColor,\n  },\n  multiline: {\n    padding: 0,\n    overflow: \"auto\",\n    height: \"auto\",\n\n    \"& $input\": {\n      borderRadius: theme.radii.base,\n      height: \"auto\",\n      minHeight: \"21px\",\n      padding: \"5px 10px\",\n      overflow: \"auto\",\n      margin: 0,\n    },\n  },\n  resizable: { width: \"auto\" },\n  readOnly: {\n    borderColor: theme.colors.textDisabled,\n    backgroundColor: theme.colors.bgPage,\n  },\n  focused: {},\n  /** @deprecated unused. use `::after` instead */\n  inputBorderContainer: {},\n  /** @deprecated use `classes.invalid` instead */\n  inputRootInvalid: {},\n  /** @deprecated use `classes.readOnly` instead */\n  inputRootReadOnly: {},\n  /** @deprecated use `classes.root` instead */\n  inputRoot: {},\n  /** @deprecated unused */\n  inputRootFocused: {},\n  /** @deprecated use `classes.disabled` instead */\n  inputRootDisabled: {},\n  /** @deprecated use `classes.multiline` instead */\n  inputRootMultiline: {},\n  input: {\n    height: \"100%\",\n    marginLeft: theme.space.xs,\n    marginRight: theme.space.xs,\n    padding: 0,\n    backgroundColor: \"transparent\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    outline: \"none\",\n    width: \"initial\",\n    flexGrow: 1,\n    ...theme.typography.body,\n\n    \"&::placeholder\": {\n      opacity: 1,\n      color: theme.colors.textSubtle,\n    },\n  },\n  inputDisabled: {\n    color: theme.colors.textDisabled,\n    WebkitTextFillColor: theme.colors.textDisabled,\n  },\n  inputReadOnly: {\n    color: theme.colors.textSubtle,\n  },\n  inputResizable: {\n    resize: \"both\",\n    width: \"100%\",\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA;AAAA,IAEJ,0BAA0B;AAAA,MACxB,iBAAiB,kBAAkB,MAAM,OAAO,UAAU;AAAA,MAC1D,qBAAqB,MAAM,OAAO;AAAA,IACpC;AAAA;AAAA,IAGA,sBAAsB;AAAA,MACpB,eAAe;AAAA,MACf,6DAA6D;AAAA,QAC3D,kBAAkB;AAAA,QAClB,QAAQ;AAAA,MAAA;AAAA,IAEZ;AAAA;AAAA,IAGA,4CAA4C;AAAA,MAC1C,SAAS;AAAA,IACX;AAAA;AAAA,IAGA,0MACE;AAAA,MACE,SAAS;AAAA,IACX;AAAA;AAAA,IAGF,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,aAAa,MAAM,OAAO;AAAA,IAC1B,WAAW;AAAA,IACX,iBAAiB,MAAM,OAAO;AAAA,IAC9B,YAAY,MAAM,WAAW;AAAA,IAE7B,4CAA4C;AAAA,MAC1C,aAAa,MAAM,OAAO;AAAA,IAC5B;AAAA,IACA,gCAAgC;AAAA,MAC9B,GAAG;AAAA,IAAA;AAAA,EAEP;AAAA,EACA,UAAU;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,IAC9B,aAAa,MAAM,OAAO;AAAA,IAE1B,QAAQ;AAAA,IAER,cAAc;AAAA,MACZ,mBAAmB;AAAA,IAAA;AAAA,EAEvB;AAAA,EACA,SAAS;AAAA,IACP,aAAa,MAAM,KAAK;AAAA,EAC1B;AAAA,EACA,WAAW;AAAA,IACT,SAAS;AAAA,IACT,UAAU;AAAA,IACV,QAAQ;AAAA,IAER,YAAY;AAAA,MACV,cAAc,MAAM,MAAM;AAAA,MAC1B,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,WAAW,EAAE,OAAO,OAAO;AAAA,EAC3B,UAAU;AAAA,IACR,aAAa,MAAM,OAAO;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,SAAS,CAAC;AAAA;AAAA,EAEV,sBAAsB,CAAC;AAAA;AAAA,EAEvB,kBAAkB,CAAC;AAAA;AAAA,EAEnB,mBAAmB,CAAC;AAAA;AAAA,EAEpB,WAAW,CAAC;AAAA;AAAA,EAEZ,kBAAkB,CAAC;AAAA;AAAA,EAEnB,mBAAmB,CAAC;AAAA;AAAA,EAEpB,oBAAoB,CAAC;AAAA,EACrB,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,YAAY,MAAM,MAAM;AAAA,IACxB,aAAa,MAAM,MAAM;AAAA,IACzB,SAAS;AAAA,IACT,iBAAiB;AAAA,IACjB,UAAU;AAAA,IACV,cAAc;AAAA,IACd,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,GAAG,MAAM,WAAW;AAAA,IAEpB,kBAAkB;AAAA,MAChB,SAAS;AAAA,MACT,OAAO,MAAM,OAAO;AAAA,IAAA;AAAA,EAExB;AAAA,EACA,eAAe;AAAA,IACb,OAAO,MAAM,OAAO;AAAA,IACpB,qBAAqB,MAAM,OAAO;AAAA,EACpC;AAAA,EACA,eAAe;AAAA,IACb,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,gBAAgB;AAAA,IACd,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAEX,CAAC;"}

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

@@ -9,16 +9,16 @@ const { staticClasses, useClasses } = createClasses("HvBaseRadio", {
     height: 32,
     cursor: "pointer",
     "&:hover": {
-      backgroundColor: theme.colors.containerBackgroundHover,
+      backgroundColor: theme.colors.bgHover,
       borderRadius: theme.radii.base
     },
     "& svg": {
       width: 16,
       height: 16,
-      borderRadius: theme.radii.circle,
+      borderRadius: theme.radii.full,
       borderWidth: 1,
-      borderColor: theme.colors.secondary,
-      backgroundColor: theme.colors.atmo1
+      borderColor: theme.colors.text,
+      backgroundColor: theme.colors.bgContainer
     },
     borderRadius: 0
   },
@@ -26,8 +26,8 @@ const { staticClasses, useClasses } = createClasses("HvBaseRadio", {
     cursor: "not-allowed",
     pointerEvents: "initial",
     "& svg": {
-      borderColor: theme.colors.secondary_60,
-      backgroundColor: theme.colors.atmo3
+      borderColor: theme.colors.textDisabled,
+      backgroundColor: theme.colors.bgDisabled
     }
   },
   focusVisible: {
@@ -39,29 +39,29 @@ const { staticClasses, useClasses } = createClasses("HvBaseRadio", {
   icon: {},
   checked: {
     "& svg": {
-      borderColor: theme.colors.secondary,
-      backgroundColor: theme.colors.secondary,
-      color: theme.colors.atmo2
+      borderColor: theme.colors.text,
+      backgroundColor: theme.colors.text,
+      color: theme.colors.bgPage
     },
     "&$semantic": {
       "& svg": {
-        borderColor: theme.colors.base_dark,
-        backgroundColor: theme.colors.base_light,
-        color: theme.colors.base_dark
+        borderColor: theme.colors.textDark,
+        backgroundColor: theme.colors.textLight,
+        color: theme.colors.textDark
       }
     },
     "&$disabled": {
       "& svg": {
-        borderColor: theme.colors.secondary_60,
-        backgroundColor: theme.colors.secondary_60,
-        color: theme.colors.atmo3
+        borderColor: theme.colors.textDisabled,
+        backgroundColor: theme.colors.textDisabled,
+        color: theme.colors.bgDisabled
       }
     }
   },
   semantic: {
     "& svg": {
-      borderColor: theme.colors.base_dark,
-      backgroundColor: theme.colors.base_light
+      borderColor: theme.colors.textDark,
+      backgroundColor: theme.colors.textLight
     }
   }
 });

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\n    \"&:hover\": {\n      backgroundColor: theme.colors.bgHover,\n      borderRadius: theme.radii.base,\n    },\n    \"& svg\": {\n      width: 16,\n      height: 16,\n      borderRadius: theme.radii.full,\n      borderWidth: 1,\n      borderColor: theme.colors.text,\n      backgroundColor: theme.colors.bgContainer,\n    },\n    borderRadius: 0,\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: \"8px\",\n      ...outlineStyles,\n    },\n  },\n  icon: {},\n  checked: {\n    \"& svg\": {\n      borderColor: theme.colors.text,\n      backgroundColor: theme.colors.text,\n      color: theme.colors.bgPage,\n    },\n    \"&$semantic\": {\n      \"& svg\": {\n        borderColor: theme.colors.textDark,\n        backgroundColor: theme.colors.textLight,\n        color: theme.colors.textDark,\n      },\n    },\n    \"&$disabled\": {\n      \"& svg\": {\n        borderColor: theme.colors.textDisabled,\n        backgroundColor: theme.colors.textDisabled,\n        color: theme.colors.bgDisabled,\n      },\n    },\n  },\n  semantic: {\n    \"& svg\": {\n      borderColor: theme.colors.textDark,\n      backgroundColor: theme.colors.textLight,\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;"}

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

@@ -11,7 +11,7 @@ const { staticClasses, useClasses } = createClasses("HvBaseSwitch", {
     justifyContent: "center",
     borderRadius: theme.radii.base,
     "&:hover": {
-      backgroundColor: theme.colors.containerBackgroundHover
+      backgroundColor: theme.colors.bgHover
     },
     // Higher CSS specificity here
     "& $switchBase": {
@@ -22,7 +22,7 @@ const { staticClasses, useClasses } = createClasses("HvBaseSwitch", {
         transform: "translateX(16px)",
         "& + $track": {
           opacity: 1,
-          backgroundColor: theme.colors.secondary
+          backgroundColor: theme.colors.text
         },
         "&:hover": {
           backgroundColor: "transparent"
@@ -34,8 +34,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.textDisabled}`
         }
       }
     }
@@ -58,16 +58,16 @@ const { staticClasses, useClasses } = createClasses("HvBaseSwitch", {
     borderRadius: "15px",
     height: "16px",
     width: "32px",
-    border: `solid 1px ${theme.colors.secondary}`,
-    backgroundColor: theme.colors.atmo1
+    border: `solid 1px ${theme.colors.text}`,
+    backgroundColor: theme.colors.bgContainer
   },
   thumb: {
     position: "relative",
     left: "-9px",
     width: "12px",
     height: "12px",
-    border: `solid 1px ${theme.colors.secondary}`,
-    backgroundColor: theme.colors.atmo1,
+    border: `solid 1px ${theme.colors.text}`,
+    backgroundColor: theme.colors.bgContainer,
     marginLeft: "2px",
     marginTop: 0,
     boxShadow: "none"
@@ -79,8 +79,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.base,\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.text,\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.textDisabled}`,\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.text}`,\n    backgroundColor: theme.colors.bgContainer,\n  },\n  thumb: {\n    position: \"relative\",\n    left: \"-9px\",\n    width: \"12px\",\n    height: \"12px\",\n    border: `solid 1px ${theme.colors.text}`,\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,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,IAAI;AAAA,IACtC,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,IAAI;AAAA,IACtC,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,20 +6,20 @@ 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: {
@@ -36,7 +36,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      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.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,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;"}

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": {
@@ -45,7 +45,7 @@ const { staticClasses, useClasses } = createClasses("HvButton", {
   /** 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": {
@@ -64,8 +64,8 @@ const { staticClasses, useClasses } = createClasses("HvButton", {
   },
   /** 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 +84,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)\",\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.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    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.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":"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"}