@hitachivantara/uikit-react-core 5.28.1 → 5.30.0

package/dist/cjs/components/ActionBar/ActionBar.styles.cjs

@@ -9,7 +9,7 @@ const {
   root: {
     width: "100%",
     padding: uikitStyles.theme.space.sm,
-    borderTop: uikitStyles.theme.actionBar.borderTop,
+    borderTop: `1px solid ${uikitStyles.theme.colors.atmo3}`,
     display: "flex",
     alignItems: "center",
     justifyContent: "flex-end"

package/dist/cjs/components/ActionBar/ActionBar.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.styles.cjs","sources":["../../../../src/components/ActionBar/ActionBar.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvActionBar\", {\n  root: {\n    width: \"100%\",\n    padding: theme.space.sm,\n    borderTop: theme.actionBar.borderTop,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"flex-end\",\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","width","padding","theme","space","sm","borderTop","actionBar","display","alignItems","justifyContent"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,eAAe;AAAA,EACxEC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,SAASC,YAAAA,MAAMC,MAAMC;AAAAA,IACrBC,WAAWH,YAAAA,MAAMI,UAAUD;AAAAA,IAC3BE,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,gBAAgB;AAAA,EAClB;AACF,CAAC;;;"}
+{"version":3,"file":"ActionBar.styles.cjs","sources":["../../../../src/components/ActionBar/ActionBar.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvActionBar\", {\n  root: {\n    width: \"100%\",\n    padding: theme.space.sm,\n    borderTop: `1px solid ${theme.colors.atmo3}`,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"flex-end\",\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","width","padding","theme","space","sm","borderTop","colors","atmo3","display","alignItems","justifyContent"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,eAAe;AAAA,EACxEC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,SAASC,YAAAA,MAAMC,MAAMC;AAAAA,IACrBC,WAAY,aAAYH,YAAMI,MAAAA,OAAOC,KAAM;AAAA,IAC3CC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,gBAAgB;AAAA,EAClB;AACF,CAAC;;;"}

package/dist/cjs/components/AppSwitcher/Action/Action.styles.cjs

@@ -47,8 +47,12 @@ const {
     margin: `0 ${uikitStyles.theme.space.xs}`,
     textAlign: "left",
     overflow: "hidden",
-    whiteSpace: "nowrap",
+    whiteSpace: "normal",
     textOverflow: "ellipsis",
+    display: "-webkit-box",
+    "-webkit-line-clamp": "2",
+    "-webkit-box-orient": "vertical",
+    textWrap: "balance",
     color: "inherit"
   }
 });

package/dist/cjs/components/AppSwitcher/Action/Action.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Action.styles.cjs","sources":["../../../../../src/components/AppSwitcher/Action/Action.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvAppSwitcher-Action\",\n  {\n    root: {\n      width: \"100%\",\n      maxWidth: 280,\n      minHeight: 52,\n      marginRight: theme.space.sm,\n    },\n    icon: { display: \"flex\", minWidth: 40, justifyContent: \"center\" },\n    iconUrl: { width: 32 },\n    iconInfo: { minWidth: 32 },\n    disabled: {},\n    selected: {},\n    typography: {\n      display: \"flex\",\n      justifyContent: \"flex-start\",\n      alignItems: \"center\",\n\n      width: \"100%\",\n      minHeight: 52,\n\n      padding: `6px ${theme.space.xs}`,\n\n      border: \"none\",\n      borderLeft: `solid 2px ${theme.colors.secondary}`,\n\n      cursor: \"pointer\",\n\n      textDecoration: \"inherit\",\n      color: \"inherit\",\n      backgroundColor: \"inherit\",\n\n      \"$disabled &\": {\n        cursor: \"not-allowed\",\n      },\n    },\n    title: {\n      flexGrow: 1,\n      margin: `0 ${theme.space.xs}`,\n\n      textAlign: \"left\",\n\n      overflow: \"hidden\",\n      whiteSpace: \"nowrap\",\n      textOverflow: \"ellipsis\",\n\n      color: \"inherit\",\n    },\n  }\n);\n"],"names":["staticClasses","useClasses","createClasses","root","width","maxWidth","minHeight","marginRight","theme","space","sm","icon","display","minWidth","justifyContent","iconUrl","iconInfo","disabled","selected","typography","alignItems","padding","xs","border","borderLeft","colors","secondary","cursor","textDecoration","color","backgroundColor","title","flexGrow","margin","textAlign","overflow","whiteSpace","textOverflow"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAC3C,wBACA;AAAA,EACEC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,UAAU;AAAA,IACVC,WAAW;AAAA,IACXC,aAAaC,YAAAA,MAAMC,MAAMC;AAAAA,EAC3B;AAAA,EACAC,MAAM;AAAA,IAAEC,SAAS;AAAA,IAAQC,UAAU;AAAA,IAAIC,gBAAgB;AAAA,EAAS;AAAA,EAChEC,SAAS;AAAA,IAAEX,OAAO;AAAA,EAAG;AAAA,EACrBY,UAAU;AAAA,IAAEH,UAAU;AAAA,EAAG;AAAA,EACzBI,UAAU,CAAC;AAAA,EACXC,UAAU,CAAC;AAAA,EACXC,YAAY;AAAA,IACVP,SAAS;AAAA,IACTE,gBAAgB;AAAA,IAChBM,YAAY;AAAA,IAEZhB,OAAO;AAAA,IACPE,WAAW;AAAA,IAEXe,SAAU,OAAMb,YAAMC,MAAAA,MAAMa,EAAG;AAAA,IAE/BC,QAAQ;AAAA,IACRC,YAAa,aAAYhB,YAAMiB,MAAAA,OAAOC,SAAU;AAAA,IAEhDC,QAAQ;AAAA,IAERC,gBAAgB;AAAA,IAChBC,OAAO;AAAA,IACPC,iBAAiB;AAAA,IAEjB,eAAe;AAAA,MACbH,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAI,OAAO;AAAA,IACLC,UAAU;AAAA,IACVC,QAAS,KAAIzB,YAAMC,MAAAA,MAAMa,EAAG;AAAA,IAE5BY,WAAW;AAAA,IAEXC,UAAU;AAAA,IACVC,YAAY;AAAA,IACZC,cAAc;AAAA,IAEdR,OAAO;AAAA,EACT;AACF,CACF;;;"}
+{"version":3,"file":"Action.styles.cjs","sources":["../../../../../src/components/AppSwitcher/Action/Action.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvAppSwitcher-Action\",\n  {\n    root: {\n      width: \"100%\",\n      maxWidth: 280,\n      minHeight: 52,\n      marginRight: theme.space.sm,\n    },\n    icon: { display: \"flex\", minWidth: 40, justifyContent: \"center\" },\n    iconUrl: { width: 32 },\n    iconInfo: { minWidth: 32 },\n    disabled: {},\n    selected: {},\n    typography: {\n      display: \"flex\",\n      justifyContent: \"flex-start\",\n      alignItems: \"center\",\n\n      width: \"100%\",\n      minHeight: 52,\n\n      padding: `6px ${theme.space.xs}`,\n\n      border: \"none\",\n      borderLeft: `solid 2px ${theme.colors.secondary}`,\n\n      cursor: \"pointer\",\n\n      textDecoration: \"inherit\",\n      color: \"inherit\",\n      backgroundColor: \"inherit\",\n\n      \"$disabled &\": {\n        cursor: \"not-allowed\",\n      },\n    },\n    title: {\n      flexGrow: 1,\n      margin: `0 ${theme.space.xs}`,\n\n      textAlign: \"left\",\n\n      overflow: \"hidden\",\n      whiteSpace: \"normal\",\n      textOverflow: \"ellipsis\",\n      display: \"-webkit-box\",\n      \"-webkit-line-clamp\": \"2\",\n      \"-webkit-box-orient\": \"vertical\",\n      textWrap: \"balance\",\n\n      color: \"inherit\",\n    },\n  }\n);\n"],"names":["staticClasses","useClasses","createClasses","root","width","maxWidth","minHeight","marginRight","theme","space","sm","icon","display","minWidth","justifyContent","iconUrl","iconInfo","disabled","selected","typography","alignItems","padding","xs","border","borderLeft","colors","secondary","cursor","textDecoration","color","backgroundColor","title","flexGrow","margin","textAlign","overflow","whiteSpace","textOverflow","textWrap"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAC3C,wBACA;AAAA,EACEC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,UAAU;AAAA,IACVC,WAAW;AAAA,IACXC,aAAaC,YAAAA,MAAMC,MAAMC;AAAAA,EAC3B;AAAA,EACAC,MAAM;AAAA,IAAEC,SAAS;AAAA,IAAQC,UAAU;AAAA,IAAIC,gBAAgB;AAAA,EAAS;AAAA,EAChEC,SAAS;AAAA,IAAEX,OAAO;AAAA,EAAG;AAAA,EACrBY,UAAU;AAAA,IAAEH,UAAU;AAAA,EAAG;AAAA,EACzBI,UAAU,CAAC;AAAA,EACXC,UAAU,CAAC;AAAA,EACXC,YAAY;AAAA,IACVP,SAAS;AAAA,IACTE,gBAAgB;AAAA,IAChBM,YAAY;AAAA,IAEZhB,OAAO;AAAA,IACPE,WAAW;AAAA,IAEXe,SAAU,OAAMb,YAAMC,MAAAA,MAAMa,EAAG;AAAA,IAE/BC,QAAQ;AAAA,IACRC,YAAa,aAAYhB,YAAMiB,MAAAA,OAAOC,SAAU;AAAA,IAEhDC,QAAQ;AAAA,IAERC,gBAAgB;AAAA,IAChBC,OAAO;AAAA,IACPC,iBAAiB;AAAA,IAEjB,eAAe;AAAA,MACbH,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAI,OAAO;AAAA,IACLC,UAAU;AAAA,IACVC,QAAS,KAAIzB,YAAMC,MAAAA,MAAMa,EAAG;AAAA,IAE5BY,WAAW;AAAA,IAEXC,UAAU;AAAA,IACVC,YAAY;AAAA,IACZC,cAAc;AAAA,IACdzB,SAAS;AAAA,IACT,sBAAsB;AAAA,IACtB,sBAAsB;AAAA,IACtB0B,UAAU;AAAA,IAEVT,OAAO;AAAA,EACT;AACF,CACF;;;"}

package/dist/cjs/components/BaseCheckBox/BaseCheckBox.styles.cjs

@@ -9,10 +9,10 @@ const {
 } = classes.createClasses("HvBaseCheckBox", {
   root: {
     padding: 0,
-    borderRadius: uikitStyles.theme.baseCheckBox.borderRadius,
+    borderRadius: uikitStyles.theme.radii.base,
     cursor: "pointer",
     "&:hover": {
-      backgroundColor: uikitStyles.theme.baseCheckBox.hoverColor
+      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
     }
   },
   disabled: {

package/dist/cjs/components/BaseCheckBox/BaseCheckBox.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BaseCheckBox.styles.cjs","sources":["../../../../src/components/BaseCheckBox/BaseCheckBox.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseCheckBox\", {\n  root: {\n    padding: 0,\n    borderRadius: theme.baseCheckBox.borderRadius,\n    cursor: \"pointer\",\n    \"&:hover\": {\n      backgroundColor: theme.baseCheckBox.hoverColor,\n    },\n  },\n  disabled: {\n    \"&$root\": {\n      cursor: \"not-allowed\",\n      pointerEvents: \"initial\",\n    },\n\n    \"& svg\": {\n      \"& path:nth-of-type(2)\": {\n        fill: theme.colors.secondary_60,\n      },\n    },\n  },\n  focusVisible: {\n    \"& svg\": {\n      ...outlineStyles,\n    },\n  },\n  icon: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","padding","borderRadius","theme","baseCheckBox","cursor","backgroundColor","hoverColor","disabled","pointerEvents","fill","colors","secondary_60","focusVisible","outlineStyles","icon"],"mappings":";;;;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,kBAAkB;AAAA,EAC3EC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,cAAcC,YAAAA,MAAMC,aAAaF;AAAAA,IACjCG,QAAQ;AAAA,IACR,WAAW;AAAA,MACTC,iBAAiBH,YAAAA,MAAMC,aAAaG;AAAAA,IACtC;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IACR,UAAU;AAAA,MACRH,QAAQ;AAAA,MACRI,eAAe;AAAA,IACjB;AAAA,IAEA,SAAS;AAAA,MACP,yBAAyB;AAAA,QACvBC,MAAMP,YAAAA,MAAMQ,OAAOC;AAAAA,MACrB;AAAA,IACF;AAAA,EACF;AAAA,EACAC,cAAc;AAAA,IACZ,SAAS;AAAA,MACP,GAAGC,WAAAA;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,MAAM,CAAC;AACT,CAAC;;;"}
+{"version":3,"file":"BaseCheckBox.styles.cjs","sources":["../../../../src/components/BaseCheckBox/BaseCheckBox.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseCheckBox\", {\n  root: {\n    padding: 0,\n    borderRadius: theme.radii.base,\n    cursor: \"pointer\",\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n  },\n  disabled: {\n    \"&$root\": {\n      cursor: \"not-allowed\",\n      pointerEvents: \"initial\",\n    },\n\n    \"& svg\": {\n      \"& path:nth-of-type(2)\": {\n        fill: theme.colors.secondary_60,\n      },\n    },\n  },\n  focusVisible: {\n    \"& svg\": {\n      ...outlineStyles,\n    },\n  },\n  icon: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","padding","borderRadius","theme","radii","base","cursor","backgroundColor","colors","containerBackgroundHover","disabled","pointerEvents","fill","secondary_60","focusVisible","outlineStyles","icon"],"mappings":";;;;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,kBAAkB;AAAA,EAC3EC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,cAAcC,YAAAA,MAAMC,MAAMC;AAAAA,IAC1BC,QAAQ;AAAA,IACR,WAAW;AAAA,MACTC,iBAAiBJ,YAAAA,MAAMK,OAAOC;AAAAA,IAChC;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IACR,UAAU;AAAA,MACRJ,QAAQ;AAAA,MACRK,eAAe;AAAA,IACjB;AAAA,IAEA,SAAS;AAAA,MACP,yBAAyB;AAAA,QACvBC,MAAMT,YAAAA,MAAMK,OAAOK;AAAAA,MACrB;AAAA,IACF;AAAA,EACF;AAAA,EACAC,cAAc;AAAA,IACZ,SAAS;AAAA,MACP,GAAGC,WAAAA;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,MAAM,CAAC;AACT,CAAC;;;"}

package/dist/cjs/components/BaseDropdown/BaseDropdown.styles.cjs

@@ -31,25 +31,23 @@ const {
     position: "relative",
     background: uikitStyles.theme.colors.atmo1,
     boxSizing: "border-box",
-    border: `1px solid ${uikitStyles.theme.baseDropdown.borderColor}`,
+    border: `1px solid ${uikitStyles.theme.colors.secondary_80}`,
     borderRadius: uikitStyles.theme.radii.base,
     "&:hover": {
-      border: `1px solid ${uikitStyles.theme.baseDropdown.hoverBorderColor}`
+      border: `1px solid ${uikitStyles.theme.colors.primary}`
     },
     "&:focus": {
       outline: "none"
     },
     "&:focus-visible": {
       ...focusUtils.outlineStyles,
-      border: `1px solid ${uikitStyles.theme.baseDropdown.hoverBorderColor}`
+      border: `1px solid ${uikitStyles.theme.colors.primary}`
     }
   },
   headerOpen: {
-    border: `1px solid ${uikitStyles.theme.baseDropdown.openBorderColor}`,
-    boxShadow: uikitStyles.theme.baseDropdown.shadow,
+    border: `1px solid ${uikitStyles.theme.colors.secondary_80}`,
     "&:hover": {
-      border: `1px solid ${uikitStyles.theme.baseDropdown.openBorderColor}`,
-      boxShadow: uikitStyles.theme.baseDropdown.shadow
+      border: `1px solid ${uikitStyles.theme.colors.secondary_80}`
     }
   },
   headerOpenUp: {
@@ -61,21 +59,21 @@ const {
   headerDisabled: {
     cursor: "not-allowed",
     pointerEvents: "none",
-    border: `1px solid ${uikitStyles.theme.baseDropdown.disabledBorderColor}`,
-    background: uikitStyles.theme.baseDropdown.disabledBackgroundColor,
+    border: `1px solid ${uikitStyles.theme.colors.secondary_60}`,
+    background: uikitStyles.theme.colors.atmo2,
     "&:hover": {
-      border: `1px solid ${uikitStyles.theme.baseDropdown.disabledBorderColor}`
+      border: `1px solid ${uikitStyles.theme.colors.secondary_60}`
     }
   },
   headerReadOnly: {
     cursor: "not-allowed",
     pointerEvents: "none",
-    border: uikitStyles.theme.baseDropdown.readOnlyBorder,
-    background: uikitStyles.theme.baseDropdown.readOnlyBackgroundColor,
+    border: `1px solid ${uikitStyles.theme.colors.secondary_60}`,
+    background: uikitStyles.theme.colors.atmo2,
     userSelect: "text",
     "&:focus-visible": {
       outline: "none",
-      border: uikitStyles.theme.baseDropdown.readOnlyBorder
+      border: `1px solid ${uikitStyles.theme.colors.secondary_60}`
     }
   },
   arrowContainer: {
@@ -98,16 +96,15 @@ const {
     textOverflow: "ellipsis",
     whiteSpace: "nowrap",
     ...uikitStyles.theme.typography.body,
-    color: uikitStyles.theme.baseDropdown.placeholderColor
+    color: uikitStyles.theme.colors.secondary_80
   },
   selectionDisabled: {
     color: uikitStyles.theme.colors.secondary_60
   },
   panel: {
     position: "relative",
-    boxShadow: uikitStyles.theme.baseDropdown.shadow,
     backgroundColor: uikitStyles.theme.colors.atmo1,
-    border: `1px solid ${uikitStyles.theme.baseDropdown.openBorderColor}`
+    border: `1px solid ${uikitStyles.theme.colors.secondary_80}`
   },
   panelOpenedUp: {
     top: 1,
@@ -118,12 +115,12 @@ const {
     borderRadius: `0 0 ${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base}`
   },
   inputExtensionOpen: {
-    height: uikitStyles.theme.dropDownMenu.extensionHeight,
+    height: "0px",
     backgroundColor: uikitStyles.theme.colors.atmo1,
     borderTop: "none",
     borderBottom: "none",
-    borderRight: `1px solid ${uikitStyles.theme.dropDownMenu.extensionBorderColor}`,
-    borderLeft: `1px solid ${uikitStyles.theme.dropDownMenu.extensionBorderColor}`
+    borderRight: `1px solid ${uikitStyles.theme.colors.secondary_80}`,
+    borderLeft: `1px solid ${uikitStyles.theme.colors.secondary_80}`
   },
   inputExtensionLeftPosition: {
     marginLeft: "auto"

package/dist/cjs/components/BaseDropdown/BaseDropdown.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BaseDropdown.styles.cjs","sources":["../../../../src/components/BaseDropdown/BaseDropdown.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\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.baseDropdown.borderColor}`,\n    borderRadius: theme.radii.base,\n    \"&:hover\": {\n      border: `1px solid ${theme.baseDropdown.hoverBorderColor}`,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n      border: `1px solid ${theme.baseDropdown.hoverBorderColor}`,\n    },\n  },\n  headerOpen: {\n    border: `1px solid ${theme.baseDropdown.openBorderColor}`,\n    boxShadow: theme.baseDropdown.shadow,\n    \"&:hover\": {\n      border: `1px solid ${theme.baseDropdown.openBorderColor}`,\n      boxShadow: theme.baseDropdown.shadow,\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    border: `1px solid ${theme.baseDropdown.disabledBorderColor}`,\n    background: theme.baseDropdown.disabledBackgroundColor,\n    \"&:hover\": {\n      border: `1px solid ${theme.baseDropdown.disabledBorderColor}`,\n    },\n  },\n  headerReadOnly: {\n    cursor: \"not-allowed\",\n    pointerEvents: \"none\",\n    border: theme.baseDropdown.readOnlyBorder,\n    background: theme.baseDropdown.readOnlyBackgroundColor,\n    userSelect: \"text\",\n    \"&:focus-visible\": {\n      outline: \"none\",\n      border: theme.baseDropdown.readOnlyBorder,\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  },\n  placeholder: {\n    display: \"block\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    ...theme.typography.body,\n    color: theme.baseDropdown.placeholderColor,\n  },\n  selectionDisabled: { color: theme.colors.secondary_60 },\n  panel: {\n    position: \"relative\",\n    boxShadow: theme.baseDropdown.shadow,\n    backgroundColor: theme.colors.atmo1,\n    border: `1px solid ${theme.baseDropdown.openBorderColor}`,\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: theme.dropDownMenu.extensionHeight,\n    backgroundColor: theme.colors.atmo1,\n    borderTop: \"none\",\n    borderBottom: \"none\",\n    borderRight: `1px solid ${theme.dropDownMenu.extensionBorderColor}`,\n    borderLeft: `1px solid ${theme.dropDownMenu.extensionBorderColor}`,\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":["useClasses","staticClasses","createClasses","root","width","position","rootDisabled","cursor","outline","anchor","display","container","zIndex","theme","zIndices","popover","header","userSelect","background","colors","atmo1","boxSizing","border","baseDropdown","borderColor","borderRadius","radii","base","hoverBorderColor","outlineStyles","headerOpen","openBorderColor","boxShadow","shadow","headerOpenUp","headerOpenDown","headerDisabled","pointerEvents","disabledBorderColor","disabledBackgroundColor","headerReadOnly","readOnlyBorder","readOnlyBackgroundColor","arrowContainer","top","right","arrow","selection","alignItems","height","paddingLeft","space","xs","placeholder","overflow","textOverflow","whiteSpace","typography","body","color","placeholderColor","selectionDisabled","secondary_60","panel","backgroundColor","panelOpenedUp","panelOpenedDown","inputExtensionOpen","dropDownMenu","extensionHeight","borderTop","borderBottom","borderRight","extensionBorderColor","borderLeft","inputExtensionLeftPosition","marginLeft","inputExtensionOpenShadow","inputExtensionFloatRight","float","inputExtensionFloatLeft"],"mappings":";;;;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,QAAAA,cAAc,kBAAkB;AAAA,EAC3EC,MAAM;AAAA,IAAEC,OAAO;AAAA,IAAQC,UAAU;AAAA,EAAW;AAAA,EAC5CC,cAAc;AAAA,IACZC,QAAQ;AAAA,IACR,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACAC,QAAQ;AAAA,IAAEC,SAAS;AAAA,IAAgBN,OAAO;AAAA,EAAO;AAAA,EACjDO,WAAW;AAAA,IAAEC,QAAQC,YAAAA,MAAMC,SAASC;AAAAA,IAASX,OAAO;AAAA,EAAO;AAAA,EAC3DY,QAAQ;AAAA,IACNT,QAAQ;AAAA,IACRU,YAAY;AAAA,IACZZ,UAAU;AAAA,IACVa,YAAYL,YAAAA,MAAMM,OAAOC;AAAAA,IACzBC,WAAW;AAAA,IACXC,QAAS,aAAYT,YAAMU,MAAAA,aAAaC,WAAY;AAAA,IACpDC,cAAcZ,YAAAA,MAAMa,MAAMC;AAAAA,IAC1B,WAAW;AAAA,MACTL,QAAS,aAAYT,YAAMU,MAAAA,aAAaK,gBAAiB;AAAA,IAC3D;AAAA,IACA,WAAW;AAAA,MACTpB,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGqB,WAAAA;AAAAA,MACHP,QAAS,aAAYT,YAAMU,MAAAA,aAAaK,gBAAiB;AAAA,IAC3D;AAAA,EACF;AAAA,EACAE,YAAY;AAAA,IACVR,QAAS,aAAYT,YAAMU,MAAAA,aAAaQ,eAAgB;AAAA,IACxDC,WAAWnB,YAAAA,MAAMU,aAAaU;AAAAA,IAC9B,WAAW;AAAA,MACTX,QAAS,aAAYT,YAAMU,MAAAA,aAAaQ,eAAgB;AAAA,MACxDC,WAAWnB,YAAAA,MAAMU,aAAaU;AAAAA,IAChC;AAAA,EACF;AAAA,EACAC,cAAc;AAAA,IACZT,cAAe,WAAUZ,YAAAA,MAAMa,MAAMC,IAAK,IAAGd,YAAAA,MAAMa,MAAMC,IAAK;AAAA,EAChE;AAAA,EACAQ,gBAAgB;AAAA,IACdV,cAAe,GAAEZ,YAAMa,MAAAA,MAAMC,IAAK,IAAGd,kBAAMa,MAAMC,IAAK;AAAA,EACxD;AAAA,EACAS,gBAAgB;AAAA,IACd7B,QAAQ;AAAA,IACR8B,eAAe;AAAA,IACff,QAAS,aAAYT,YAAMU,MAAAA,aAAae,mBAAoB;AAAA,IAC5DpB,YAAYL,YAAAA,MAAMU,aAAagB;AAAAA,IAC/B,WAAW;AAAA,MACTjB,QAAS,aAAYT,YAAMU,MAAAA,aAAae,mBAAoB;AAAA,IAC9D;AAAA,EACF;AAAA,EACAE,gBAAgB;AAAA,IACdjC,QAAQ;AAAA,IACR8B,eAAe;AAAA,IACff,QAAQT,YAAAA,MAAMU,aAAakB;AAAAA,IAC3BvB,YAAYL,YAAAA,MAAMU,aAAamB;AAAAA,IAC/BzB,YAAY;AAAA,IACZ,mBAAmB;AAAA,MACjBT,SAAS;AAAA,MACTc,QAAQT,YAAAA,MAAMU,aAAakB;AAAAA,IAC7B;AAAA,EACF;AAAA,EACAE,gBAAgB;AAAA,IACdtC,UAAU;AAAA,IACVgC,eAAe;AAAA,IACfO,KAAK;AAAA,IACLC,OAAO;AAAA,EACT;AAAA,EACAC,OAAO,CAAC;AAAA,EACRC,WAAW;AAAA,IACTrC,SAAS;AAAA,IACTsC,YAAY;AAAA,IACZC,QAAQ;AAAA,IACR5B,WAAW;AAAA,IACX6B,aAAarC,YAAAA,MAAMsC,MAAMC;AAAAA,EAC3B;AAAA,EACAC,aAAa;AAAA,IACX3C,SAAS;AAAA,IACT4C,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,IACZ,GAAG3C,YAAAA,MAAM4C,WAAWC;AAAAA,IACpBC,OAAO9C,YAAAA,MAAMU,aAAaqC;AAAAA,EAC5B;AAAA,EACAC,mBAAmB;AAAA,IAAEF,OAAO9C,YAAAA,MAAMM,OAAO2C;AAAAA,EAAa;AAAA,EACtDC,OAAO;AAAA,IACL1D,UAAU;AAAA,IACV2B,WAAWnB,YAAAA,MAAMU,aAAaU;AAAAA,IAC9B+B,iBAAiBnD,YAAAA,MAAMM,OAAOC;AAAAA,IAC9BE,QAAS,aAAYT,YAAMU,MAAAA,aAAaQ,eAAgB;AAAA,EAC1D;AAAA,EACAkC,eAAe;AAAA,IACbrB,KAAK;AAAA,IACLnB,cAAe,GAAEZ,YAAMa,MAAAA,MAAMC,IAAK,IAAGd,kBAAMa,MAAMC,IAAK;AAAA,EACxD;AAAA,EACAuC,iBAAiB;AAAA,IACftB,KAAK;AAAA,IACLnB,cAAe,OAAMZ,YAAAA,MAAMa,MAAMC,IAAK,IAAGd,YAAAA,MAAMa,MAAMC,IAAK;AAAA,EAC5D;AAAA,EACAwC,oBAAoB;AAAA,IAClBlB,QAAQpC,YAAAA,MAAMuD,aAAaC;AAAAA,IAC3BL,iBAAiBnD,YAAAA,MAAMM,OAAOC;AAAAA,IAC9BkD,WAAW;AAAA,IACXC,cAAc;AAAA,IACdC,aAAc,aAAY3D,YAAMuD,MAAAA,aAAaK,oBAAqB;AAAA,IAClEC,YAAa,aAAY7D,YAAMuD,MAAAA,aAAaK,oBAAqB;AAAA,EACnE;AAAA,EACAE,4BAA4B;AAAA,IAAEC,YAAY;AAAA,EAAO;AAAA,EACjDC,0BAA0B;AAAA,IACxB7C,WAAY,eAAcnB,YAAAA,MAAMM,OAAOC,KAAM;AAAA,EAC/C;AAAA,EACA0D,0BAA0B;AAAA,IAAEC,OAAO;AAAA,EAAQ;AAAA,EAC3CC,yBAAyB;AAAA,IAAED,OAAO;AAAA,EAAO;AAC3C,CAAC;;;"}
+{"version":3,"file":"BaseDropdown.styles.cjs","sources":["../../../../src/components/BaseDropdown/BaseDropdown.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\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_80}`,\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_80}`,\n\n    \"&:hover\": {\n      border: `1px solid ${theme.colors.secondary_80}`,\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    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    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  },\n  placeholder: {\n    display: \"block\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    ...theme.typography.body,\n    color: theme.colors.secondary_80,\n  },\n  selectionDisabled: { color: theme.colors.secondary_60 },\n  panel: {\n    position: \"relative\",\n\n    backgroundColor: theme.colors.atmo1,\n    border: `1px solid ${theme.colors.secondary_80}`,\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_80}`,\n    borderLeft: `1px solid ${theme.colors.secondary_80}`,\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":["useClasses","staticClasses","createClasses","root","width","position","rootDisabled","cursor","outline","anchor","display","container","zIndex","theme","zIndices","popover","header","userSelect","background","colors","atmo1","boxSizing","border","secondary_80","borderRadius","radii","base","primary","outlineStyles","headerOpen","headerOpenUp","headerOpenDown","headerDisabled","pointerEvents","secondary_60","atmo2","headerReadOnly","arrowContainer","top","right","arrow","selection","alignItems","height","paddingLeft","space","xs","placeholder","overflow","textOverflow","whiteSpace","typography","body","color","selectionDisabled","panel","backgroundColor","panelOpenedUp","panelOpenedDown","inputExtensionOpen","borderTop","borderBottom","borderRight","borderLeft","inputExtensionLeftPosition","marginLeft","inputExtensionOpenShadow","boxShadow","inputExtensionFloatRight","float","inputExtensionFloatLeft"],"mappings":";;;;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,QAAAA,cAAc,kBAAkB;AAAA,EAC3EC,MAAM;AAAA,IAAEC,OAAO;AAAA,IAAQC,UAAU;AAAA,EAAW;AAAA,EAC5CC,cAAc;AAAA,IACZC,QAAQ;AAAA,IACR,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACAC,QAAQ;AAAA,IAAEC,SAAS;AAAA,IAAgBN,OAAO;AAAA,EAAO;AAAA,EACjDO,WAAW;AAAA,IAAEC,QAAQC,YAAAA,MAAMC,SAASC;AAAAA,IAASX,OAAO;AAAA,EAAO;AAAA,EAC3DY,QAAQ;AAAA,IACNT,QAAQ;AAAA,IACRU,YAAY;AAAA,IACZZ,UAAU;AAAA,IACVa,YAAYL,YAAAA,MAAMM,OAAOC;AAAAA,IACzBC,WAAW;AAAA,IACXC,QAAS,aAAYT,YAAMM,MAAAA,OAAOI,YAAa;AAAA,IAC/CC,cAAcX,YAAAA,MAAMY,MAAMC;AAAAA,IAC1B,WAAW;AAAA,MACTJ,QAAS,aAAYT,YAAMM,MAAAA,OAAOQ,OAAQ;AAAA,IAC5C;AAAA,IACA,WAAW;AAAA,MACTnB,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGoB,WAAAA;AAAAA,MACHN,QAAS,aAAYT,YAAMM,MAAAA,OAAOQ,OAAQ;AAAA,IAC5C;AAAA,EACF;AAAA,EACAE,YAAY;AAAA,IACVP,QAAS,aAAYT,YAAMM,MAAAA,OAAOI,YAAa;AAAA,IAE/C,WAAW;AAAA,MACTD,QAAS,aAAYT,YAAMM,MAAAA,OAAOI,YAAa;AAAA,IACjD;AAAA,EACF;AAAA,EACAO,cAAc;AAAA,IACZN,cAAe,WAAUX,YAAAA,MAAMY,MAAMC,IAAK,IAAGb,YAAAA,MAAMY,MAAMC,IAAK;AAAA,EAChE;AAAA,EACAK,gBAAgB;AAAA,IACdP,cAAe,GAAEX,YAAMY,MAAAA,MAAMC,IAAK,IAAGb,kBAAMY,MAAMC,IAAK;AAAA,EACxD;AAAA,EACAM,gBAAgB;AAAA,IACdzB,QAAQ;AAAA,IACR0B,eAAe;AAAA,IACfX,QAAS,aAAYT,YAAMM,MAAAA,OAAOe,YAAa;AAAA,IAC/ChB,YAAYL,YAAAA,MAAMM,OAAOgB;AAAAA,IACzB,WAAW;AAAA,MACTb,QAAS,aAAYT,YAAMM,MAAAA,OAAOe,YAAa;AAAA,IACjD;AAAA,EACF;AAAA,EACAE,gBAAgB;AAAA,IACd7B,QAAQ;AAAA,IACR0B,eAAe;AAAA,IACfX,QAAS,aAAYT,YAAMM,MAAAA,OAAOe,YAAa;AAAA,IAC/ChB,YAAYL,YAAAA,MAAMM,OAAOgB;AAAAA,IACzBlB,YAAY;AAAA,IACZ,mBAAmB;AAAA,MACjBT,SAAS;AAAA,MACTc,QAAS,aAAYT,YAAMM,MAAAA,OAAOe,YAAa;AAAA,IACjD;AAAA,EACF;AAAA,EACAG,gBAAgB;AAAA,IACdhC,UAAU;AAAA,IACV4B,eAAe;AAAA,IACfK,KAAK;AAAA,IACLC,OAAO;AAAA,EACT;AAAA,EACAC,OAAO,CAAC;AAAA,EACRC,WAAW;AAAA,IACT/B,SAAS;AAAA,IACTgC,YAAY;AAAA,IACZC,QAAQ;AAAA,IACRtB,WAAW;AAAA,IACXuB,aAAa/B,YAAAA,MAAMgC,MAAMC;AAAAA,EAC3B;AAAA,EACAC,aAAa;AAAA,IACXrC,SAAS;AAAA,IACTsC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,IACZ,GAAGrC,YAAAA,MAAMsC,WAAWC;AAAAA,IACpBC,OAAOxC,YAAAA,MAAMM,OAAOI;AAAAA,EACtB;AAAA,EACA+B,mBAAmB;AAAA,IAAED,OAAOxC,YAAAA,MAAMM,OAAOe;AAAAA,EAAa;AAAA,EACtDqB,OAAO;AAAA,IACLlD,UAAU;AAAA,IAEVmD,iBAAiB3C,YAAAA,MAAMM,OAAOC;AAAAA,IAC9BE,QAAS,aAAYT,YAAMM,MAAAA,OAAOI,YAAa;AAAA,EACjD;AAAA,EACAkC,eAAe;AAAA,IACbnB,KAAK;AAAA,IACLd,cAAe,GAAEX,YAAMY,MAAAA,MAAMC,IAAK,IAAGb,kBAAMY,MAAMC,IAAK;AAAA,EACxD;AAAA,EACAgC,iBAAiB;AAAA,IACfpB,KAAK;AAAA,IACLd,cAAe,OAAMX,YAAAA,MAAMY,MAAMC,IAAK,IAAGb,YAAAA,MAAMY,MAAMC,IAAK;AAAA,EAC5D;AAAA,EACAiC,oBAAoB;AAAA,IAClBhB,QAAQ;AAAA,IACRa,iBAAiB3C,YAAAA,MAAMM,OAAOC;AAAAA,IAC9BwC,WAAW;AAAA,IACXC,cAAc;AAAA,IACdC,aAAc,aAAYjD,YAAMM,MAAAA,OAAOI,YAAa;AAAA,IACpDwC,YAAa,aAAYlD,YAAMM,MAAAA,OAAOI,YAAa;AAAA,EACrD;AAAA,EACAyC,4BAA4B;AAAA,IAAEC,YAAY;AAAA,EAAO;AAAA,EACjDC,0BAA0B;AAAA,IACxBC,WAAY,eAActD,YAAAA,MAAMM,OAAOC,KAAM;AAAA,EAC/C;AAAA,EACAgD,0BAA0B;AAAA,IAAEC,OAAO;AAAA,EAAQ;AAAA,EAC3CC,yBAAyB;AAAA,IAAED,OAAO;AAAA,EAAO;AAC3C,CAAC;;;"}

package/dist/cjs/components/BaseInput/BaseInput.styles.cjs

@@ -12,10 +12,10 @@ const {
     width: "100%",
     position: "relative",
     "&:hover $inputBorderContainer": {
-      backgroundColor: uikitStyles.theme.baseInput.hoverColor
+      backgroundColor: uikitStyles.theme.colors.primary
     },
     "&:focus-within $inputBorderContainer": {
-      backgroundColor: uikitStyles.theme.baseInput.hoverColor
+      backgroundColor: uikitStyles.theme.colors.primary
     }
   },
   disabled: {
@@ -26,19 +26,19 @@ const {
       backgroundColor: uikitStyles.theme.colors.atmo4
     },
     "&& $input": {
-      color: uikitStyles.theme.baseInput.disabledTextColor,
-      WebkitTextFillColor: uikitStyles.theme.baseInput.disabledTextColor
+      color: uikitStyles.theme.colors.secondary_60,
+      WebkitTextFillColor: uikitStyles.theme.colors.secondary_60
     },
     "& $inputRootMultiline": {
       "& $input": {
-        backgroundColor: uikitStyles.theme.baseInput.disabledBackgroundColor,
-        border: `1px solid ${uikitStyles.theme.baseInput.multilineDisabledBorderColor}`
+        backgroundColor: uikitStyles.theme.colors.atmo2,
+        border: `1px solid ${uikitStyles.theme.colors.secondary_60}`
       }
     },
     "&:hover $inputRootMultiline": {
       "& $input": {
-        backgroundColor: uikitStyles.theme.baseInput.disabledBackgroundColor,
-        border: `1px solid ${uikitStyles.theme.baseInput.multilineDisabledBorderColor}`
+        backgroundColor: uikitStyles.theme.colors.atmo2,
+        border: `1px solid ${uikitStyles.theme.colors.secondary_60}`
       }
     }
   },
@@ -82,27 +82,27 @@ const {
     },
     "& $inputRootMultiline": {
       "& $input": {
-        border: `1px solid ${uikitStyles.theme.baseInput.readOnlyBorderColor}`,
-        backgroundColor: uikitStyles.theme.baseInput.readOnlyBackgroundColor
+        border: `1px solid ${uikitStyles.theme.colors.secondary_60}`,
+        backgroundColor: "transparent"
       }
     },
     "&:hover $inputRootMultiline": {
       "& $input": {
-        border: `1px solid ${uikitStyles.theme.baseInput.readOnlyBorderColor}`,
-        backgroundColor: uikitStyles.theme.baseInput.readOnlyBackgroundColor
+        border: `1px solid ${uikitStyles.theme.colors.secondary_60}`,
+        backgroundColor: "transparent"
       }
     },
     "&:focus-within $inputRootMultiline": {
       "& $input": {
-        border: `1px solid ${uikitStyles.theme.baseInput.readOnlyBorderColor}`,
-        backgroundColor: uikitStyles.theme.baseInput.readOnlyBackgroundColor
+        border: `1px solid ${uikitStyles.theme.colors.secondary_60}`,
+        backgroundColor: "transparent"
       }
     }
   },
   inputBorderContainer: {
     position: "absolute",
     width: "calc(100% - 4px)",
-    height: uikitStyles.theme.baseInput.underlineHeight,
+    height: "0px",
     top: "31px",
     left: "2px",
     backgroundColor: uikitStyles.theme.colors.atmo4
@@ -111,20 +111,20 @@ const {
     borderColor: uikitStyles.theme.colors.negative
   },
   inputRootReadOnly: {
-    borderColor: uikitStyles.theme.baseInput.readOnlyBorderColor,
-    backgroundColor: uikitStyles.theme.baseInput.readOnlyBackgroundColor
+    borderColor: uikitStyles.theme.colors.secondary_60,
+    backgroundColor: "transparent"
   },
   inputRoot: {
     margin: 0,
     width: "100%",
     borderRadius: uikitStyles.theme.radii.base,
     height: "32px",
-    border: `1px solid ${uikitStyles.theme.baseInput.borderColor}`,
+    border: `1px solid ${uikitStyles.theme.colors.secondary_80}`,
     boxSizing: "border-box",
     backgroundColor: uikitStyles.theme.colors.atmo1,
     fontFamily: uikitStyles.theme.fontFamily.body,
     "&:hover:not($inputRootDisabled):not($inputRootInvalid):not($inputRootReadOnly)": {
-      borderColor: uikitStyles.theme.baseInput.hoverColor
+      borderColor: uikitStyles.theme.colors.primary
     },
     "&:hover:not($inputRootDisabled)::before": {
       borderBottom: "none"
@@ -143,15 +143,15 @@ const {
       background: uikitStyles.theme.colors.atmo1
     },
     "& $inputRootReadOnly": {
-      backgroundColor: uikitStyles.theme.baseInput.readOnlyBackgroundColor
+      backgroundColor: "transparent"
     }
   },
   inputRootDisabled: {
-    background: uikitStyles.theme.baseInput.disabledBackgroundColor,
-    borderColor: uikitStyles.theme.baseInput.disabledBorderColor,
+    background: uikitStyles.theme.colors.atmo2,
+    borderColor: uikitStyles.theme.colors.secondary_60,
     cursor: "not-allowed",
     "&:hover": {
-      background: uikitStyles.theme.baseInput.disabledBackgroundColor,
+      background: uikitStyles.theme.colors.atmo2,
       cursor: "not-allowed"
     },
     "&&::before": {
@@ -165,7 +165,7 @@ const {
     border: "none",
     height: "auto",
     "& $input": {
-      border: `1px solid ${uikitStyles.theme.baseInput.multilineBorderColor}`,
+      border: `1px solid ${uikitStyles.theme.colors.secondary_80}`,
       borderRadius: uikitStyles.theme.radii.base,
       backgroundColor: uikitStyles.theme.colors.atmo1,
       height: "auto",
@@ -175,7 +175,7 @@ const {
       marginLeft: "0px",
       marginRight: "0px",
       "&:hover": {
-        border: `1px solid ${uikitStyles.theme.baseInput.hoverColor}`
+        border: `1px solid ${uikitStyles.theme.colors.primary}`
       }
     }
   },
@@ -192,7 +192,7 @@ const {
     ...uikitStyles.theme.typography.body,
     "&::placeholder": {
       opacity: 1,
-      color: uikitStyles.theme.baseInput.placeholderColor
+      color: uikitStyles.theme.colors.secondary_80
     },
     "&::-ms-clear": {
       display: "none"
@@ -200,7 +200,7 @@ const {
   },
   inputDisabled: {},
   inputReadOnly: {
-    color: uikitStyles.theme.baseInput.readOnlyTextColor
+    color: uikitStyles.theme.colors.secondary_80
   },
   inputResizable: {
     resize: "both",

package/dist/cjs/components/BaseInput/BaseInput.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BaseInput.styles.cjs","sources":["../../../../src/components/BaseInput/BaseInput.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseInput\", {\n  root: {\n    display: \"inline-block\",\n    width: \"100%\",\n    position: \"relative\",\n\n    \"&:hover $inputBorderContainer\": {\n      backgroundColor: theme.baseInput.hoverColor,\n    },\n\n    \"&:focus-within $inputBorderContainer\": {\n      backgroundColor: theme.baseInput.hoverColor,\n    },\n  },\n  disabled: {\n    \"& $inputBorderContainer\": {\n      backgroundColor: theme.colors.atmo4,\n    },\n\n    \"&:hover $inputBorderContainer\": {\n      backgroundColor: theme.colors.atmo4,\n    },\n\n    \"&& $input\": {\n      color: theme.baseInput.disabledTextColor,\n      WebkitTextFillColor: theme.baseInput.disabledTextColor,\n    },\n\n    \"& $inputRootMultiline\": {\n      \"& $input\": {\n        backgroundColor: theme.baseInput.disabledBackgroundColor,\n        border: `1px solid ${theme.baseInput.multilineDisabledBorderColor}`,\n      },\n    },\n\n    \"&:hover $inputRootMultiline\": {\n      \"& $input\": {\n        backgroundColor: theme.baseInput.disabledBackgroundColor,\n        border: `1px solid ${theme.baseInput.multilineDisabledBorderColor}`,\n      },\n    },\n  },\n  invalid: {\n    \"&:not(.disabled)\": {\n      \"& $inputBorderContainer\": {\n        backgroundColor: theme.colors.negative,\n      },\n\n      \"&:hover $inputBorderContainer\": {\n        backgroundColor: theme.colors.negative,\n      },\n\n      \"& $inputRootMultiline\": {\n        \"& $input\": {\n          border: `1px solid ${theme.colors.negative}`,\n        },\n      },\n\n      \"&:hover $inputRootMultiline\": {\n        \"& $input\": {\n          border: `1px solid ${theme.colors.negative}`,\n        },\n      },\n\n      \"&:focus-within $inputRootMultiline\": {\n        \"& $input\": {\n          border: `1px solid ${theme.colors.negative}`,\n        },\n      },\n    },\n  },\n  resizable: { width: \"auto\" },\n  readOnly: {\n    \"& $inputBorderContainer\": {\n      backgroundColor: \"transparent\",\n    },\n\n    \"&:hover $inputBorderContainer\": {\n      backgroundColor: \"transparent\",\n    },\n\n    \"&:focus-within $inputBorderContainer\": {\n      backgroundColor: \"transparent\",\n    },\n\n    \"& $inputRootMultiline\": {\n      \"& $input\": {\n        border: `1px solid ${theme.baseInput.readOnlyBorderColor}`,\n        backgroundColor: theme.baseInput.readOnlyBackgroundColor,\n      },\n    },\n\n    \"&:hover $inputRootMultiline\": {\n      \"& $input\": {\n        border: `1px solid ${theme.baseInput.readOnlyBorderColor}`,\n        backgroundColor: theme.baseInput.readOnlyBackgroundColor,\n      },\n    },\n\n    \"&:focus-within $inputRootMultiline\": {\n      \"& $input\": {\n        border: `1px solid ${theme.baseInput.readOnlyBorderColor}`,\n        backgroundColor: theme.baseInput.readOnlyBackgroundColor,\n      },\n    },\n  },\n  inputBorderContainer: {\n    position: \"absolute\",\n    width: \"calc(100% - 4px)\",\n    height: theme.baseInput.underlineHeight,\n    top: \"31px\",\n    left: \"2px\",\n    backgroundColor: theme.colors.atmo4,\n  },\n  inputRootInvalid: { borderColor: theme.colors.negative },\n  inputRootReadOnly: {\n    borderColor: theme.baseInput.readOnlyBorderColor,\n    backgroundColor: theme.baseInput.readOnlyBackgroundColor,\n  },\n  inputRoot: {\n    margin: 0,\n    width: \"100%\",\n    borderRadius: theme.radii.base,\n    height: \"32px\",\n    border: `1px solid ${theme.baseInput.borderColor}`,\n    boxSizing: \"border-box\",\n    backgroundColor: theme.colors.atmo1,\n    fontFamily: theme.fontFamily.body,\n\n    \"&:hover:not($inputRootDisabled):not($inputRootInvalid):not($inputRootReadOnly)\":\n      {\n        borderColor: theme.baseInput.hoverColor,\n      },\n\n    \"&:hover:not($inputRootDisabled)::before\": {\n      borderBottom: \"none\",\n    },\n\n    \"&::before\": {\n      borderBottom: \"none\",\n    },\n\n    \"&::after\": {\n      borderBottom: \"none\",\n    },\n  },\n  inputRootFocused: {\n    background: theme.colors.atmo1,\n    ...outlineStyles,\n\n    \"&:hover\": {\n      background: theme.colors.atmo1,\n    },\n\n    \"& $inputRootReadOnly\": {\n      backgroundColor: theme.baseInput.readOnlyBackgroundColor,\n    },\n  },\n  inputRootDisabled: {\n    background: theme.baseInput.disabledBackgroundColor,\n    borderColor: theme.baseInput.disabledBorderColor,\n    cursor: \"not-allowed\",\n\n    \"&:hover\": {\n      background: theme.baseInput.disabledBackgroundColor,\n      cursor: \"not-allowed\",\n    },\n\n    \"&&::before\": {\n      borderBottomStyle: \"none\",\n    },\n  },\n  inputRootMultiline: {\n    padding: 0,\n    backgroundColor: \"transparent\",\n    overflow: \"auto\",\n    border: \"none\",\n    height: \"auto\",\n\n    \"& $input\": {\n      border: `1px solid ${theme.baseInput.multilineBorderColor}`,\n      borderRadius: theme.radii.base,\n      backgroundColor: theme.colors.atmo1,\n      height: \"auto\",\n      minHeight: \"21px\",\n      padding: \"5px 10px\",\n      overflow: \"auto\",\n      marginLeft: \"0px\",\n      marginRight: \"0px\",\n\n      \"&:hover\": {\n        border: `1px solid ${theme.baseInput.hoverColor}`,\n      },\n    },\n  },\n  input: {\n    height: \"19px\",\n    marginLeft: theme.space.xs,\n    marginRight: theme.space.xs,\n    padding: \"6px 0 5px\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    outline: \"none\",\n    width: \"initial\",\n    flexGrow: 1,\n    ...(theme.typography.body as CSSProperties),\n\n    \"&::placeholder\": {\n      opacity: 1,\n      color: theme.baseInput.placeholderColor,\n    },\n\n    \"&::-ms-clear\": {\n      display: \"none\",\n    },\n  },\n  inputDisabled: {},\n  inputReadOnly: {\n    color: theme.baseInput.readOnlyTextColor,\n  },\n  inputResizable: { resize: \"both\", width: \"100%\" },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","width","position","backgroundColor","theme","baseInput","hoverColor","disabled","colors","atmo4","color","disabledTextColor","WebkitTextFillColor","disabledBackgroundColor","border","multilineDisabledBorderColor","invalid","negative","resizable","readOnly","readOnlyBorderColor","readOnlyBackgroundColor","inputBorderContainer","height","underlineHeight","top","left","inputRootInvalid","borderColor","inputRootReadOnly","inputRoot","margin","borderRadius","radii","base","boxSizing","atmo1","fontFamily","body","borderBottom","inputRootFocused","background","outlineStyles","inputRootDisabled","disabledBorderColor","cursor","borderBottomStyle","inputRootMultiline","padding","overflow","multilineBorderColor","minHeight","marginLeft","marginRight","input","space","xs","textOverflow","outline","flexGrow","typography","opacity","placeholderColor","inputDisabled","inputReadOnly","readOnlyTextColor","inputResizable","resize"],"mappings":";;;;;AAOa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,eAAe;AAAA,EACxEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,OAAO;AAAA,IACPC,UAAU;AAAA,IAEV,iCAAiC;AAAA,MAC/BC,iBAAiBC,YAAAA,MAAMC,UAAUC;AAAAA,IACnC;AAAA,IAEA,wCAAwC;AAAA,MACtCH,iBAAiBC,YAAAA,MAAMC,UAAUC;AAAAA,IACnC;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IACR,2BAA2B;AAAA,MACzBJ,iBAAiBC,YAAAA,MAAMI,OAAOC;AAAAA,IAChC;AAAA,IAEA,iCAAiC;AAAA,MAC/BN,iBAAiBC,YAAAA,MAAMI,OAAOC;AAAAA,IAChC;AAAA,IAEA,aAAa;AAAA,MACXC,OAAON,YAAAA,MAAMC,UAAUM;AAAAA,MACvBC,qBAAqBR,YAAAA,MAAMC,UAAUM;AAAAA,IACvC;AAAA,IAEA,yBAAyB;AAAA,MACvB,YAAY;AAAA,QACVR,iBAAiBC,YAAAA,MAAMC,UAAUQ;AAAAA,QACjCC,QAAS,aAAYV,YAAMC,MAAAA,UAAUU,4BAA6B;AAAA,MACpE;AAAA,IACF;AAAA,IAEA,+BAA+B;AAAA,MAC7B,YAAY;AAAA,QACVZ,iBAAiBC,YAAAA,MAAMC,UAAUQ;AAAAA,QACjCC,QAAS,aAAYV,YAAMC,MAAAA,UAAUU,4BAA6B;AAAA,MACpE;AAAA,IACF;AAAA,EACF;AAAA,EACAC,SAAS;AAAA,IACP,oBAAoB;AAAA,MAClB,2BAA2B;AAAA,QACzBb,iBAAiBC,YAAAA,MAAMI,OAAOS;AAAAA,MAChC;AAAA,MAEA,iCAAiC;AAAA,QAC/Bd,iBAAiBC,YAAAA,MAAMI,OAAOS;AAAAA,MAChC;AAAA,MAEA,yBAAyB;AAAA,QACvB,YAAY;AAAA,UACVH,QAAS,aAAYV,YAAMI,MAAAA,OAAOS,QAAS;AAAA,QAC7C;AAAA,MACF;AAAA,MAEA,+BAA+B;AAAA,QAC7B,YAAY;AAAA,UACVH,QAAS,aAAYV,YAAMI,MAAAA,OAAOS,QAAS;AAAA,QAC7C;AAAA,MACF;AAAA,MAEA,sCAAsC;AAAA,QACpC,YAAY;AAAA,UACVH,QAAS,aAAYV,YAAMI,MAAAA,OAAOS,QAAS;AAAA,QAC7C;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACAC,WAAW;AAAA,IAAEjB,OAAO;AAAA,EAAO;AAAA,EAC3BkB,UAAU;AAAA,IACR,2BAA2B;AAAA,MACzBhB,iBAAiB;AAAA,IACnB;AAAA,IAEA,iCAAiC;AAAA,MAC/BA,iBAAiB;AAAA,IACnB;AAAA,IAEA,wCAAwC;AAAA,MACtCA,iBAAiB;AAAA,IACnB;AAAA,IAEA,yBAAyB;AAAA,MACvB,YAAY;AAAA,QACVW,QAAS,aAAYV,YAAMC,MAAAA,UAAUe,mBAAoB;AAAA,QACzDjB,iBAAiBC,YAAAA,MAAMC,UAAUgB;AAAAA,MACnC;AAAA,IACF;AAAA,IAEA,+BAA+B;AAAA,MAC7B,YAAY;AAAA,QACVP,QAAS,aAAYV,YAAMC,MAAAA,UAAUe,mBAAoB;AAAA,QACzDjB,iBAAiBC,YAAAA,MAAMC,UAAUgB;AAAAA,MACnC;AAAA,IACF;AAAA,IAEA,sCAAsC;AAAA,MACpC,YAAY;AAAA,QACVP,QAAS,aAAYV,YAAMC,MAAAA,UAAUe,mBAAoB;AAAA,QACzDjB,iBAAiBC,YAAAA,MAAMC,UAAUgB;AAAAA,MACnC;AAAA,IACF;AAAA,EACF;AAAA,EACAC,sBAAsB;AAAA,IACpBpB,UAAU;AAAA,IACVD,OAAO;AAAA,IACPsB,QAAQnB,YAAAA,MAAMC,UAAUmB;AAAAA,IACxBC,KAAK;AAAA,IACLC,MAAM;AAAA,IACNvB,iBAAiBC,YAAAA,MAAMI,OAAOC;AAAAA,EAChC;AAAA,EACAkB,kBAAkB;AAAA,IAAEC,aAAaxB,YAAAA,MAAMI,OAAOS;AAAAA,EAAS;AAAA,EACvDY,mBAAmB;AAAA,IACjBD,aAAaxB,YAAAA,MAAMC,UAAUe;AAAAA,IAC7BjB,iBAAiBC,YAAAA,MAAMC,UAAUgB;AAAAA,EACnC;AAAA,EACAS,WAAW;AAAA,IACTC,QAAQ;AAAA,IACR9B,OAAO;AAAA,IACP+B,cAAc5B,YAAAA,MAAM6B,MAAMC;AAAAA,IAC1BX,QAAQ;AAAA,IACRT,QAAS,aAAYV,YAAMC,MAAAA,UAAUuB,WAAY;AAAA,IACjDO,WAAW;AAAA,IACXhC,iBAAiBC,YAAAA,MAAMI,OAAO4B;AAAAA,IAC9BC,YAAYjC,YAAAA,MAAMiC,WAAWC;AAAAA,IAE7B,kFACE;AAAA,MACEV,aAAaxB,YAAAA,MAAMC,UAAUC;AAAAA,IAC/B;AAAA,IAEF,2CAA2C;AAAA,MACzCiC,cAAc;AAAA,IAChB;AAAA,IAEA,aAAa;AAAA,MACXA,cAAc;AAAA,IAChB;AAAA,IAEA,YAAY;AAAA,MACVA,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EACAC,kBAAkB;AAAA,IAChBC,YAAYrC,YAAAA,MAAMI,OAAO4B;AAAAA,IACzB,GAAGM,WAAAA;AAAAA,IAEH,WAAW;AAAA,MACTD,YAAYrC,YAAAA,MAAMI,OAAO4B;AAAAA,IAC3B;AAAA,IAEA,wBAAwB;AAAA,MACtBjC,iBAAiBC,YAAAA,MAAMC,UAAUgB;AAAAA,IACnC;AAAA,EACF;AAAA,EACAsB,mBAAmB;AAAA,IACjBF,YAAYrC,YAAAA,MAAMC,UAAUQ;AAAAA,IAC5Be,aAAaxB,YAAAA,MAAMC,UAAUuC;AAAAA,IAC7BC,QAAQ;AAAA,IAER,WAAW;AAAA,MACTJ,YAAYrC,YAAAA,MAAMC,UAAUQ;AAAAA,MAC5BgC,QAAQ;AAAA,IACV;AAAA,IAEA,cAAc;AAAA,MACZC,mBAAmB;AAAA,IACrB;AAAA,EACF;AAAA,EACAC,oBAAoB;AAAA,IAClBC,SAAS;AAAA,IACT7C,iBAAiB;AAAA,IACjB8C,UAAU;AAAA,IACVnC,QAAQ;AAAA,IACRS,QAAQ;AAAA,IAER,YAAY;AAAA,MACVT,QAAS,aAAYV,YAAMC,MAAAA,UAAU6C,oBAAqB;AAAA,MAC1DlB,cAAc5B,YAAAA,MAAM6B,MAAMC;AAAAA,MAC1B/B,iBAAiBC,YAAAA,MAAMI,OAAO4B;AAAAA,MAC9Bb,QAAQ;AAAA,MACR4B,WAAW;AAAA,MACXH,SAAS;AAAA,MACTC,UAAU;AAAA,MACVG,YAAY;AAAA,MACZC,aAAa;AAAA,MAEb,WAAW;AAAA,QACTvC,QAAS,aAAYV,YAAMC,MAAAA,UAAUC,UAAW;AAAA,MAClD;AAAA,IACF;AAAA,EACF;AAAA,EACAgD,OAAO;AAAA,IACL/B,QAAQ;AAAA,IACR6B,YAAYhD,YAAAA,MAAMmD,MAAMC;AAAAA,IACxBH,aAAajD,YAAAA,MAAMmD,MAAMC;AAAAA,IACzBR,SAAS;AAAA,IACTC,UAAU;AAAA,IACVQ,cAAc;AAAA,IACdC,SAAS;AAAA,IACTzD,OAAO;AAAA,IACP0D,UAAU;AAAA,IACV,GAAIvD,YAAAA,MAAMwD,WAAWtB;AAAAA,IAErB,kBAAkB;AAAA,MAChBuB,SAAS;AAAA,MACTnD,OAAON,YAAAA,MAAMC,UAAUyD;AAAAA,IACzB;AAAA,IAEA,gBAAgB;AAAA,MACd9D,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA+D,eAAe,CAAC;AAAA,EAChBC,eAAe;AAAA,IACbtD,OAAON,YAAAA,MAAMC,UAAU4D;AAAAA,EACzB;AAAA,EACAC,gBAAgB;AAAA,IAAEC,QAAQ;AAAA,IAAQlE,OAAO;AAAA,EAAO;AAClD,CAAC;;;"}
+{"version":3,"file":"BaseInput.styles.cjs","sources":["../../../../src/components/BaseInput/BaseInput.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseInput\", {\n  root: {\n    display: \"inline-block\",\n    width: \"100%\",\n    position: \"relative\",\n\n    \"&:hover $inputBorderContainer\": {\n      backgroundColor: theme.colors.primary,\n    },\n\n    \"&:focus-within $inputBorderContainer\": {\n      backgroundColor: theme.colors.primary,\n    },\n  },\n  disabled: {\n    \"& $inputBorderContainer\": {\n      backgroundColor: theme.colors.atmo4,\n    },\n\n    \"&:hover $inputBorderContainer\": {\n      backgroundColor: theme.colors.atmo4,\n    },\n\n    \"&& $input\": {\n      color: theme.colors.secondary_60,\n      WebkitTextFillColor: theme.colors.secondary_60,\n    },\n\n    \"& $inputRootMultiline\": {\n      \"& $input\": {\n        backgroundColor: theme.colors.atmo2,\n        border: `1px solid ${theme.colors.secondary_60}`,\n      },\n    },\n\n    \"&:hover $inputRootMultiline\": {\n      \"& $input\": {\n        backgroundColor: theme.colors.atmo2,\n        border: `1px solid ${theme.colors.secondary_60}`,\n      },\n    },\n  },\n  invalid: {\n    \"&:not(.disabled)\": {\n      \"& $inputBorderContainer\": {\n        backgroundColor: theme.colors.negative,\n      },\n\n      \"&:hover $inputBorderContainer\": {\n        backgroundColor: theme.colors.negative,\n      },\n\n      \"& $inputRootMultiline\": {\n        \"& $input\": {\n          border: `1px solid ${theme.colors.negative}`,\n        },\n      },\n\n      \"&:hover $inputRootMultiline\": {\n        \"& $input\": {\n          border: `1px solid ${theme.colors.negative}`,\n        },\n      },\n\n      \"&:focus-within $inputRootMultiline\": {\n        \"& $input\": {\n          border: `1px solid ${theme.colors.negative}`,\n        },\n      },\n    },\n  },\n  resizable: { width: \"auto\" },\n  readOnly: {\n    \"& $inputBorderContainer\": {\n      backgroundColor: \"transparent\",\n    },\n\n    \"&:hover $inputBorderContainer\": {\n      backgroundColor: \"transparent\",\n    },\n\n    \"&:focus-within $inputBorderContainer\": {\n      backgroundColor: \"transparent\",\n    },\n\n    \"& $inputRootMultiline\": {\n      \"& $input\": {\n        border: `1px solid ${theme.colors.secondary_60}`,\n        backgroundColor: \"transparent\",\n      },\n    },\n\n    \"&:hover $inputRootMultiline\": {\n      \"& $input\": {\n        border: `1px solid ${theme.colors.secondary_60}`,\n        backgroundColor: \"transparent\",\n      },\n    },\n\n    \"&:focus-within $inputRootMultiline\": {\n      \"& $input\": {\n        border: `1px solid ${theme.colors.secondary_60}`,\n        backgroundColor: \"transparent\",\n      },\n    },\n  },\n  inputBorderContainer: {\n    position: \"absolute\",\n    width: \"calc(100% - 4px)\",\n    height: \"0px\",\n    top: \"31px\",\n    left: \"2px\",\n    backgroundColor: theme.colors.atmo4,\n  },\n  inputRootInvalid: { borderColor: theme.colors.negative },\n  inputRootReadOnly: {\n    borderColor: theme.colors.secondary_60,\n    backgroundColor: \"transparent\",\n  },\n  inputRoot: {\n    margin: 0,\n    width: \"100%\",\n    borderRadius: theme.radii.base,\n    height: \"32px\",\n    border: `1px solid ${theme.colors.secondary_80}`,\n    boxSizing: \"border-box\",\n    backgroundColor: theme.colors.atmo1,\n    fontFamily: theme.fontFamily.body,\n\n    \"&:hover:not($inputRootDisabled):not($inputRootInvalid):not($inputRootReadOnly)\":\n      {\n        borderColor: theme.colors.primary,\n      },\n\n    \"&:hover:not($inputRootDisabled)::before\": {\n      borderBottom: \"none\",\n    },\n\n    \"&::before\": {\n      borderBottom: \"none\",\n    },\n\n    \"&::after\": {\n      borderBottom: \"none\",\n    },\n  },\n  inputRootFocused: {\n    background: theme.colors.atmo1,\n    ...outlineStyles,\n\n    \"&:hover\": {\n      background: theme.colors.atmo1,\n    },\n\n    \"& $inputRootReadOnly\": {\n      backgroundColor: \"transparent\",\n    },\n  },\n  inputRootDisabled: {\n    background: theme.colors.atmo2,\n    borderColor: theme.colors.secondary_60,\n    cursor: \"not-allowed\",\n\n    \"&:hover\": {\n      background: theme.colors.atmo2,\n      cursor: \"not-allowed\",\n    },\n\n    \"&&::before\": {\n      borderBottomStyle: \"none\",\n    },\n  },\n  inputRootMultiline: {\n    padding: 0,\n    backgroundColor: \"transparent\",\n    overflow: \"auto\",\n    border: \"none\",\n    height: \"auto\",\n\n    \"& $input\": {\n      border: `1px solid ${theme.colors.secondary_80}`,\n      borderRadius: theme.radii.base,\n      backgroundColor: theme.colors.atmo1,\n      height: \"auto\",\n      minHeight: \"21px\",\n      padding: \"5px 10px\",\n      overflow: \"auto\",\n      marginLeft: \"0px\",\n      marginRight: \"0px\",\n\n      \"&:hover\": {\n        border: `1px solid ${theme.colors.primary}`,\n      },\n    },\n  },\n  input: {\n    height: \"19px\",\n    marginLeft: theme.space.xs,\n    marginRight: theme.space.xs,\n    padding: \"6px 0 5px\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    outline: \"none\",\n    width: \"initial\",\n    flexGrow: 1,\n    ...(theme.typography.body as CSSProperties),\n\n    \"&::placeholder\": {\n      opacity: 1,\n      color: theme.colors.secondary_80,\n    },\n\n    \"&::-ms-clear\": {\n      display: \"none\",\n    },\n  },\n  inputDisabled: {},\n  inputReadOnly: {\n    color: theme.colors.secondary_80,\n  },\n  inputResizable: { resize: \"both\", width: \"100%\" },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","width","position","backgroundColor","theme","colors","primary","disabled","atmo4","color","secondary_60","WebkitTextFillColor","atmo2","border","invalid","negative","resizable","readOnly","inputBorderContainer","height","top","left","inputRootInvalid","borderColor","inputRootReadOnly","inputRoot","margin","borderRadius","radii","base","secondary_80","boxSizing","atmo1","fontFamily","body","borderBottom","inputRootFocused","background","outlineStyles","inputRootDisabled","cursor","borderBottomStyle","inputRootMultiline","padding","overflow","minHeight","marginLeft","marginRight","input","space","xs","textOverflow","outline","flexGrow","typography","opacity","inputDisabled","inputReadOnly","inputResizable","resize"],"mappings":"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"}

package/dist/cjs/components/BaseRadio/BaseRadio.styles.cjs

@@ -11,8 +11,8 @@ const {
     padding: 0,
     cursor: "pointer",
     "&:hover": {
-      backgroundColor: uikitStyles.theme.baseRadio.hoverColor,
-      borderRadius: uikitStyles.theme.baseRadio.hoverBorderRadius
+      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover,
+      borderRadius: uikitStyles.theme.radii.base
     },
     borderRadius: 0
   },

package/dist/cjs/components/BaseRadio/BaseRadio.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BaseRadio.styles.cjs","sources":["../../../../src/components/BaseRadio/BaseRadio.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseRadio\", {\n  root: {\n    padding: 0,\n    cursor: \"pointer\",\n    \"&:hover\": {\n      backgroundColor: theme.baseRadio.hoverColor,\n      borderRadius: theme.baseRadio.hoverBorderRadius,\n    },\n    borderRadius: 0,\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n    pointerEvents: \"initial\",\n    \"& svg\": {\n      \"& path:nth-of-type(2)\": {\n        fill: theme.colors.secondary_60,\n      },\n    },\n  },\n  focusVisible: {\n    \"& svg\": {\n      borderRadius: \"8px\",\n      ...outlineStyles,\n    },\n  },\n  icon: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","padding","cursor","backgroundColor","theme","baseRadio","hoverColor","borderRadius","hoverBorderRadius","disabled","pointerEvents","fill","colors","secondary_60","focusVisible","outlineStyles","icon"],"mappings":";;;;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,eAAe;AAAA,EACxEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACR,WAAW;AAAA,MACTC,iBAAiBC,YAAAA,MAAMC,UAAUC;AAAAA,MACjCC,cAAcH,YAAAA,MAAMC,UAAUG;AAAAA,IAChC;AAAA,IACAD,cAAc;AAAA,EAChB;AAAA,EACAE,UAAU;AAAA,IACRP,QAAQ;AAAA,IACRQ,eAAe;AAAA,IACf,SAAS;AAAA,MACP,yBAAyB;AAAA,QACvBC,MAAMP,YAAAA,MAAMQ,OAAOC;AAAAA,MACrB;AAAA,IACF;AAAA,EACF;AAAA,EACAC,cAAc;AAAA,IACZ,SAAS;AAAA,MACPP,cAAc;AAAA,MACd,GAAGQ,WAAAA;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,MAAM,CAAC;AACT,CAAC;;;"}
+{"version":3,"file":"BaseRadio.styles.cjs","sources":["../../../../src/components/BaseRadio/BaseRadio.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseRadio\", {\n  root: {\n    padding: 0,\n    cursor: \"pointer\",\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n      borderRadius: theme.radii.base,\n    },\n    borderRadius: 0,\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n    pointerEvents: \"initial\",\n    \"& svg\": {\n      \"& path:nth-of-type(2)\": {\n        fill: theme.colors.secondary_60,\n      },\n    },\n  },\n  focusVisible: {\n    \"& svg\": {\n      borderRadius: \"8px\",\n      ...outlineStyles,\n    },\n  },\n  icon: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","padding","cursor","backgroundColor","theme","colors","containerBackgroundHover","borderRadius","radii","base","disabled","pointerEvents","fill","secondary_60","focusVisible","outlineStyles","icon"],"mappings":";;;;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,eAAe;AAAA,EACxEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACR,WAAW;AAAA,MACTC,iBAAiBC,YAAAA,MAAMC,OAAOC;AAAAA,MAC9BC,cAAcH,YAAAA,MAAMI,MAAMC;AAAAA,IAC5B;AAAA,IACAF,cAAc;AAAA,EAChB;AAAA,EACAG,UAAU;AAAA,IACRR,QAAQ;AAAA,IACRS,eAAe;AAAA,IACf,SAAS;AAAA,MACP,yBAAyB;AAAA,QACvBC,MAAMR,YAAAA,MAAMC,OAAOQ;AAAAA,MACrB;AAAA,IACF;AAAA,EACF;AAAA,EACAC,cAAc;AAAA,IACZ,SAAS;AAAA,MACPP,cAAc;AAAA,MACd,GAAGQ,WAAAA;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,MAAM,CAAC;AACT,CAAC;;;"}

package/dist/cjs/components/BaseSwitch/BaseSwitch.styles.cjs

@@ -8,29 +8,29 @@ const {
   useClasses
 } = classes.createClasses("HvBaseSwitch", {
   root: {
-    padding: uikitStyles.theme.baseSwitch.padding,
+    padding: 0,
     cursor: "pointer",
-    width: uikitStyles.theme.baseSwitch.width,
-    height: uikitStyles.theme.baseSwitch.height,
+    width: "40px",
+    height: "32px",
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: uikitStyles.theme.baseSwitch.borderRadius,
+    borderRadius: uikitStyles.theme.radii.base,
     "&:hover": {
-      backgroundColor: uikitStyles.theme.baseSwitch.hoverBackgroundColor
+      backgroundColor: uikitStyles.theme.colors.primary_20
     },
     // Higher CSS specificity here
     "& $switchBase": {
       "&:hover": {
-        backgroundColor: uikitStyles.theme.baseSwitch.hoverBaseBackgroundColor
+        backgroundColor: "transparent"
       },
       "&$checked": {
         transform: "translateX(16px)",
         "& + $track": {
-          opacity: uikitStyles.theme.baseSwitch.checkedOpacity,
-          backgroundColor: uikitStyles.theme.baseSwitch.checkedTrackBackgroundColor
+          opacity: 1,
+          backgroundColor: uikitStyles.theme.colors.secondary
         },
         "&:hover": {
-          backgroundColor: uikitStyles.theme.baseSwitch.hoverBaseBackgroundColor
+          backgroundColor: "transparent"
         }
       }
     },
@@ -38,44 +38,44 @@ const {
     "&$disabled": {
       "& $switchBase": {
         "& + $track": {
-          opacity: uikitStyles.theme.baseSwitch.disabled.trackOpacity,
-          backgroundColor: uikitStyles.theme.baseSwitch.disabled.trackBackgroundColor,
-          border: uikitStyles.theme.baseSwitch.disabled.trackBorder
+          opacity: 1,
+          backgroundColor: uikitStyles.theme.colors.atmo3,
+          border: `solid 1px ${uikitStyles.theme.colors.secondary_60}`
         }
       }
     }
   },
   switch: {
-    width: uikitStyles.theme.baseSwitch.width,
-    height: uikitStyles.theme.baseSwitch.height,
-    padding: uikitStyles.theme.baseSwitch.padding,
+    width: "40px",
+    height: "32px",
+    padding: 0,
     "&$readOnly $switchBase": {
       cursor: "default"
     }
   },
   switchBase: {
-    width: uikitStyles.theme.baseSwitch.width,
-    height: uikitStyles.theme.baseSwitch.height,
-    padding: uikitStyles.theme.baseSwitch.padding
+    width: "40px",
+    height: "32px",
+    padding: 0
   },
   track: {
-    opacity: uikitStyles.theme.baseSwitch.track.opacity,
-    borderRadius: uikitStyles.theme.baseSwitch.track.borderRadius,
-    height: uikitStyles.theme.baseSwitch.track.height,
-    width: uikitStyles.theme.baseSwitch.track.width,
-    border: uikitStyles.theme.baseSwitch.track.border,
-    backgroundColor: uikitStyles.theme.baseSwitch.track.backgroundColor
+    opacity: 1,
+    borderRadius: "15px",
+    height: "16px",
+    width: "32px",
+    border: `solid 1px ${uikitStyles.theme.colors.secondary}`,
+    backgroundColor: uikitStyles.theme.colors.atmo1
   },
   thumb: {
     position: "relative",
-    left: uikitStyles.theme.baseSwitch.thumb.left,
-    width: uikitStyles.theme.baseSwitch.thumb.width,
-    height: uikitStyles.theme.baseSwitch.thumb.height,
-    border: uikitStyles.theme.baseSwitch.thumb.border,
-    backgroundColor: uikitStyles.theme.baseSwitch.thumb.backgroundColor,
-    marginLeft: uikitStyles.theme.baseSwitch.thumb.marginLeft,
-    marginTop: uikitStyles.theme.baseSwitch.thumb.marginTop,
-    boxShadow: uikitStyles.theme.baseSwitch.thumb.boxShadow
+    left: "-9px",
+    width: "12px",
+    height: "12px",
+    border: `solid 1px ${uikitStyles.theme.colors.secondary}`,
+    backgroundColor: uikitStyles.theme.colors.atmo1,
+    marginLeft: "2px",
+    marginTop: 0,
+    boxShadow: "none"
   },
   checked: {},
   disabled: {
@@ -84,13 +84,13 @@ const {
       cursor: "not-allowed"
     },
     "& $thumb": {
-      backgroundColor: uikitStyles.theme.baseSwitch.disabled.thumbBackgroundColor,
-      border: uikitStyles.theme.baseSwitch.disabled.thumbBorder
+      backgroundColor: uikitStyles.theme.colors.atmo3,
+      border: `solid 1px ${uikitStyles.theme.colors.secondary_60}`
     }
   },
   readOnly: {},
   focusVisible: {
-    borderRadius: uikitStyles.theme.baseSwitch.focusBorderRadius,
+    borderRadius: "8px",
     ...focusUtils.outlineStyles
   }
 });