@hitachivantara/uikit-react-core 5.28.1 → 5.30.0

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"BaseInput.styles.js","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":"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"}
+{"version":3,"file":"BaseInput.styles.js","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/esm/components/BaseRadio/BaseRadio.styles.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"BaseRadio.styles.js","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,cAAc,eAAe;AAAA,EACxEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACR,WAAW;AAAA,MACTC,iBAAiBC,MAAMC,UAAUC;AAAAA,MACjCC,cAAcH,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,MAAMQ,OAAOC;AAAAA,MACrB;AAAA,IACF;AAAA,EACF;AAAA,EACAC,cAAc;AAAA,IACZ,SAAS;AAAA,MACPP,cAAc;AAAA,MACd,GAAGQ;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,MAAM,CAAC;AACT,CAAC;"}
+{"version":3,"file":"BaseRadio.styles.js","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,cAAc,eAAe;AAAA,EACxEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACR,WAAW;AAAA,MACTC,iBAAiBC,MAAMC,OAAOC;AAAAA,MAC9BC,cAAcH,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,MAAMC,OAAOQ;AAAAA,MACrB;AAAA,IACF;AAAA,EACF;AAAA,EACAC,cAAc;AAAA,IACZ,SAAS;AAAA,MACPP,cAAc;AAAA,MACd,GAAGQ;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,MAAM,CAAC;AACT,CAAC;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"BaseSwitch.styles.js","sources":["../../../../src/components/BaseSwitch/BaseSwitch.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(\"HvBaseSwitch\", {\n  root: {\n    padding: theme.baseSwitch.padding,\n    cursor: \"pointer\",\n    width: theme.baseSwitch.width,\n    height: theme.baseSwitch.height,\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    borderRadius: theme.baseSwitch.borderRadius,\n\n    \"&:hover\": {\n      backgroundColor: theme.baseSwitch.hoverBackgroundColor,\n    },\n\n    // Higher CSS specificity here\n    \"& $switchBase\": {\n      \"&:hover\": {\n        backgroundColor: theme.baseSwitch.hoverBaseBackgroundColor,\n      },\n\n      \"&$checked\": {\n        transform: \"translateX(16px)\",\n        \"& + $track\": {\n          opacity: theme.baseSwitch.checkedOpacity,\n          backgroundColor: theme.baseSwitch.checkedTrackBackgroundColor,\n        },\n        \"&:hover\": {\n          backgroundColor: theme.baseSwitch.hoverBaseBackgroundColor,\n        },\n      },\n    },\n\n    // Higher CSS specificity here\n    \"&$disabled\": {\n      \"& $switchBase\": {\n        \"& + $track\": {\n          opacity: theme.baseSwitch.disabled.trackOpacity,\n          backgroundColor: theme.baseSwitch.disabled.trackBackgroundColor,\n          border: theme.baseSwitch.disabled.trackBorder,\n        },\n      },\n    },\n  },\n  switch: {\n    width: theme.baseSwitch.width,\n    height: theme.baseSwitch.height,\n    padding: theme.baseSwitch.padding,\n\n    \"&$readOnly $switchBase\": {\n      cursor: \"default\",\n    },\n  },\n  switchBase: {\n    width: theme.baseSwitch.width,\n    height: theme.baseSwitch.height,\n    padding: theme.baseSwitch.padding,\n  },\n  track: {\n    opacity: theme.baseSwitch.track.opacity,\n    borderRadius: theme.baseSwitch.track.borderRadius,\n    height: theme.baseSwitch.track.height,\n    width: theme.baseSwitch.track.width,\n    border: theme.baseSwitch.track.border,\n    backgroundColor: theme.baseSwitch.track.backgroundColor,\n  },\n  thumb: {\n    position: \"relative\",\n    left: theme.baseSwitch.thumb.left,\n    width: theme.baseSwitch.thumb.width,\n    height: theme.baseSwitch.thumb.height,\n    border: theme.baseSwitch.thumb.border,\n    backgroundColor: theme.baseSwitch.thumb.backgroundColor,\n    marginLeft: theme.baseSwitch.thumb.marginLeft,\n    marginTop: theme.baseSwitch.thumb.marginTop,\n    boxShadow: theme.baseSwitch.thumb.boxShadow,\n  },\n  checked: {},\n  disabled: {\n    cursor: \"not-allowed\",\n\n    \"& $switch\": {\n      cursor: \"not-allowed\",\n    },\n\n    \"& $thumb\": {\n      backgroundColor: theme.baseSwitch.disabled.thumbBackgroundColor,\n      border: theme.baseSwitch.disabled.thumbBorder,\n    },\n  },\n  readOnly: {},\n  focusVisible: {\n    borderRadius: theme.baseSwitch.focusBorderRadius,\n    ...outlineStyles,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","padding","theme","baseSwitch","cursor","width","height","alignItems","justifyContent","borderRadius","backgroundColor","hoverBackgroundColor","hoverBaseBackgroundColor","transform","opacity","checkedOpacity","checkedTrackBackgroundColor","disabled","trackOpacity","trackBackgroundColor","border","trackBorder","switch","switchBase","track","thumb","position","left","marginLeft","marginTop","boxShadow","checked","thumbBackgroundColor","thumbBorder","readOnly","focusVisible","focusBorderRadius","outlineStyles"],"mappings":"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"}
+{"version":3,"file":"BaseSwitch.styles.js","sources":["../../../../src/components/BaseSwitch/BaseSwitch.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(\"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.primary_20,\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":["staticClasses","useClasses","createClasses","root","padding","cursor","width","height","alignItems","justifyContent","borderRadius","theme","radii","base","backgroundColor","colors","primary_20","transform","opacity","secondary","atmo3","border","secondary_60","switch","switchBase","track","atmo1","thumb","position","left","marginLeft","marginTop","boxShadow","checked","disabled","readOnly","focusVisible","outlineStyles"],"mappings":";;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,gBAAgB;AAAA,EACzEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,YAAY;AAAA,IACZC,gBAAgB;AAAA,IAChBC,cAAcC,MAAMC,MAAMC;AAAAA,IAE1B,WAAW;AAAA,MACTC,iBAAiBH,MAAMI,OAAOC;AAAAA,IAChC;AAAA;AAAA,IAGA,iBAAiB;AAAA,MACf,WAAW;AAAA,QACTF,iBAAiB;AAAA,MACnB;AAAA,MAEA,aAAa;AAAA,QACXG,WAAW;AAAA,QACX,cAAc;AAAA,UACZC,SAAS;AAAA,UACTJ,iBAAiBH,MAAMI,OAAOI;AAAAA,QAChC;AAAA,QACA,WAAW;AAAA,UACTL,iBAAiB;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AAAA;AAAA,IAGA,cAAc;AAAA,MACZ,iBAAiB;AAAA,QACf,cAAc;AAAA,UACZI,SAAS;AAAA,UACTJ,iBAAiBH,MAAMI,OAAOK;AAAAA,UAC9BC,QAAS,aAAYV,MAAMI,OAAOO,YAAa;AAAA,QACjD;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACAC,QAAQ;AAAA,IACNjB,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRH,SAAS;AAAA,IAET,0BAA0B;AAAA,MACxBC,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAmB,YAAY;AAAA,IACVlB,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRH,SAAS;AAAA,EACX;AAAA,EACAqB,OAAO;AAAA,IACLP,SAAS;AAAA,IACTR,cAAc;AAAA,IACdH,QAAQ;AAAA,IACRD,OAAO;AAAA,IACPe,QAAS,aAAYV,MAAMI,OAAOI,SAAU;AAAA,IAC5CL,iBAAiBH,MAAMI,OAAOW;AAAAA,EAChC;AAAA,EACAC,OAAO;AAAA,IACLC,UAAU;AAAA,IACVC,MAAM;AAAA,IACNvB,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRc,QAAS,aAAYV,MAAMI,OAAOI,SAAU;AAAA,IAC5CL,iBAAiBH,MAAMI,OAAOW;AAAAA,IAC9BI,YAAY;AAAA,IACZC,WAAW;AAAA,IACXC,WAAW;AAAA,EACb;AAAA,EACAC,SAAS,CAAC;AAAA,EACVC,UAAU;AAAA,IACR7B,QAAQ;AAAA,IAER,aAAa;AAAA,MACXA,QAAQ;AAAA,IACV;AAAA,IAEA,YAAY;AAAA,MACVS,iBAAiBH,MAAMI,OAAOK;AAAAA,MAC9BC,QAAS,aAAYV,MAAMI,OAAOO,YAAa;AAAA,IACjD;AAAA,EACF;AAAA,EACAa,UAAU,CAAC;AAAA,EACXC,cAAc;AAAA,IACZ1B,cAAc;AAAA,IACd,GAAG2B;AAAAA,EACL;AACF,CAAC;"}

package/dist/esm/components/BulkActions/BulkActions.js

@@ -53,13 +53,8 @@ const HvBulkActions = (props) => {
     [classes.semantic]: isSemantic
   }, isSemantic && css({
     [`& .${staticClasses.selectAll} div`]: {
-      color: theme.bulkActions.semanticColor,
       "&:hover:not(:disabled)": {
         backgroundColor: hexToRgbA(baseColor, 0.3)
-      },
-      "& *": {
-        color: theme.bulkActions.semanticColor,
-        backgroundColor: "transparent"
       }
     },
     [`& .${staticClasses.selectAll}:focus-within div`]: {

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

@@ -1 +1 @@
-{"version":3,"file":"BulkActions.js","sources":["../../../../src/components/BulkActions/BulkActions.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { setId } from \"@core/utils/setId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport {\n  HvButton,\n  HvButtonProps,\n  HvButtonVariant,\n} from \"@core/components/Button\";\nimport { HvCheckBox, HvCheckBoxProps } from \"@core/components/CheckBox\";\nimport {\n  HvActionGeneric,\n  HvActionsGeneric,\n  HvActionsGenericProps,\n} from \"@core/components/ActionsGeneric\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { staticClasses, useClasses } from \"./BulkActions.styles\";\n\nexport { staticClasses as bulkActionsClasses };\n\nexport type HvBulkActionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBulkActionsProps extends HvBaseProps {\n  /**\n   * Custom label for select all checkbox\n   */\n  selectAllLabel?: React.ReactNode;\n  /**\n   * Custom label for select all checkbox conjunction\n   */\n  selectAllConjunctionLabel?: string;\n  /**\n   * Custom label for select all pages button\n   */\n  selectAllPagesLabel?: React.ReactNode;\n  /**\n   * Whether select all pages element should be visible\n   */\n  showSelectAllPages?: boolean;\n  /**\n   * The total number of elements\n   */\n  numTotal?: number;\n  /**\n   * The number of elements currently selected\n   */\n  numSelected?: number;\n  /**\n   * Function called when the \"select all\" Checkbox is toggled.\n   */\n  onSelectAll?: HvCheckBoxProps[\"onChange\"];\n  /**\n   * Function called when the \"select all pages\" button is clicked toggled.\n   */\n  onSelectAllPages?: HvButtonProps[\"onClick\"];\n  /**\n   * Whether the bulk actions should use the semantic styles when there are selected elements.\n   */\n  semantic?: boolean;\n  /**\n   * The renderable content inside the right actions slot,\n   * or an Array of actions `{ id, label, icon, disabled, ... }`\n   */\n  actions?: React.ReactNode | HvActionGeneric[];\n  /**\n   *  Whether actions should be all disabled\n   */\n  actionsDisabled?: boolean;\n  /**\n   *  The callback function ran when an action is triggered, receiving `action` as param\n   */\n  actionsCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /**\n   *  The number of maximum visible actions before they're collapsed into a `DropDownMenu`.\n   */\n  maxVisibleActions?: number;\n  /**\n   * Properties to be passed onto the checkbox component, the values of the object are equivalent to the\n   * HvCheckbox API.\n   */\n  checkboxProps?: HvCheckBoxProps;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvBulkActionsClasses;\n}\n\n/**\n * Bulk Actions allow users to perform an action on a single or multiple items.\n * Also known as \"batch production\" of multiple items at once, one stage at a time.\n */\nexport const HvBulkActions = (props: HvBulkActionsProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    selectAllPagesLabel,\n    actionsDisabled,\n    maxVisibleActions,\n    checkboxProps,\n    actions,\n    numTotal = 0,\n    numSelected = 0,\n    selectAllLabel = \"All\",\n    selectAllConjunctionLabel = \"/\",\n    showSelectAllPages = false,\n    semantic = true,\n    actionsCallback,\n    onSelectAll,\n    onSelectAllPages,\n    ...others\n  } = useDefaultProps(\"HvBulkActions\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const { activeTheme, colors } = useTheme();\n\n  const baseColor = colors?.base_light || theme.colors.base_light;\n  const anySelected = numSelected > 0;\n  const isSemantic = semantic && anySelected;\n\n  const selectAllLabelComponent = (\n    <HvTypography\n      component=\"span\"\n      disabled={checkboxProps?.disabled}\n      variant=\"body\"\n    >\n      {!anySelected ? (\n        <>\n          <HvTypography variant=\"label\">{selectAllLabel}</HvTypography>\n          {` (${numTotal})`}\n        </>\n      ) : (\n        <>\n          <HvTypography variant=\"label\">{numSelected}</HvTypography>\n          {` ${selectAllConjunctionLabel} ${numTotal}`}\n        </>\n      )}\n    </HvTypography>\n  );\n\n  return (\n    <div\n      id={id}\n      className={cx(\n        classes.root,\n        { [classes.semantic]: isSemantic },\n        isSemantic &&\n          css({\n            [`& .${staticClasses.selectAll} div`]: {\n              color: theme.bulkActions.semanticColor,\n\n              \"&:hover:not(:disabled)\": {\n                backgroundColor: hexToRgbA(baseColor, 0.3),\n              },\n\n              \"& *\": {\n                color: theme.bulkActions.semanticColor,\n                backgroundColor: \"transparent\",\n              },\n            },\n\n            [`& .${staticClasses.selectAll}:focus-within div`]: {\n              backgroundColor: hexToRgbA(baseColor, 0.3),\n            },\n          }),\n        className\n      )}\n      {...others}\n    >\n      <div className={classes.selectAllContainer}>\n        <HvCheckBox\n          id={setId(id, \"select\")}\n          className={classes.selectAll}\n          checked={numSelected > 0}\n          semantic={isSemantic}\n          onChange={onSelectAll}\n          indeterminate={numSelected > 0 && numSelected < numTotal}\n          label={selectAllLabelComponent}\n          {...checkboxProps}\n        />\n        {showSelectAllPages && anySelected && numSelected < numTotal && (\n          <>\n            <div className={classes.divider} />\n            <HvButton\n              id={setId(id, \"pages\")}\n              className={classes.selectAllPages}\n              variant={\n                isSemantic\n                  ? (activeTheme?.bulkActions\n                      .actionButtonVariant as HvButtonVariant)\n                  : \"secondaryGhost\"\n              }\n              onClick={onSelectAllPages}\n            >\n              {selectAllPagesLabel ?? `Select all ${numTotal} items`}\n            </HvButton>\n          </>\n        )}\n      </div>\n      <HvActionsGeneric\n        id={setId(id, \"actions\")}\n        classes={{ root: classes.actions }}\n        category={\n          isSemantic\n            ? (activeTheme?.bulkActions.actionButtonVariant as HvButtonVariant)\n            : \"secondaryGhost\"\n        }\n        actions={actions}\n        disabled={actionsDisabled ?? numSelected === 0}\n        actionsCallback={actionsCallback}\n        maxVisibleActions={maxVisibleActions}\n      />\n    </div>\n  );\n};\n"],"names":["HvBulkActions","props","id","className","classes","classesProp","selectAllPagesLabel","actionsDisabled","maxVisibleActions","checkboxProps","actions","numTotal","numSelected","selectAllLabel","selectAllConjunctionLabel","showSelectAllPages","semantic","actionsCallback","onSelectAll","onSelectAllPages","others","useDefaultProps","cx","css","useClasses","activeTheme","colors","useTheme","baseColor","base_light","theme","anySelected","isSemantic","selectAllLabelComponent","disabled","root","staticClasses","selectAll","color","bulkActions","semanticColor","backgroundColor","hexToRgbA","selectAllContainer","setId","divider","selectAllPages","actionButtonVariant"],"mappings":"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"}
+{"version":3,"file":"BulkActions.js","sources":["../../../../src/components/BulkActions/BulkActions.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { setId } from \"@core/utils/setId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport {\n  HvButton,\n  HvButtonProps,\n  HvButtonVariant,\n} from \"@core/components/Button\";\nimport { HvCheckBox, HvCheckBoxProps } from \"@core/components/CheckBox\";\nimport {\n  HvActionGeneric,\n  HvActionsGeneric,\n  HvActionsGenericProps,\n} from \"@core/components/ActionsGeneric\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { staticClasses, useClasses } from \"./BulkActions.styles\";\n\nexport { staticClasses as bulkActionsClasses };\n\nexport type HvBulkActionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBulkActionsProps extends HvBaseProps {\n  /**\n   * Custom label for select all checkbox\n   */\n  selectAllLabel?: React.ReactNode;\n  /**\n   * Custom label for select all checkbox conjunction\n   */\n  selectAllConjunctionLabel?: string;\n  /**\n   * Custom label for select all pages button\n   */\n  selectAllPagesLabel?: React.ReactNode;\n  /**\n   * Whether select all pages element should be visible\n   */\n  showSelectAllPages?: boolean;\n  /**\n   * The total number of elements\n   */\n  numTotal?: number;\n  /**\n   * The number of elements currently selected\n   */\n  numSelected?: number;\n  /**\n   * Function called when the \"select all\" Checkbox is toggled.\n   */\n  onSelectAll?: HvCheckBoxProps[\"onChange\"];\n  /**\n   * Function called when the \"select all pages\" button is clicked toggled.\n   */\n  onSelectAllPages?: HvButtonProps[\"onClick\"];\n  /**\n   * Whether the bulk actions should use the semantic styles when there are selected elements.\n   */\n  semantic?: boolean;\n  /**\n   * The renderable content inside the right actions slot,\n   * or an Array of actions `{ id, label, icon, disabled, ... }`\n   */\n  actions?: React.ReactNode | HvActionGeneric[];\n  /**\n   *  Whether actions should be all disabled\n   */\n  actionsDisabled?: boolean;\n  /**\n   *  The callback function ran when an action is triggered, receiving `action` as param\n   */\n  actionsCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /**\n   *  The number of maximum visible actions before they're collapsed into a `DropDownMenu`.\n   */\n  maxVisibleActions?: number;\n  /**\n   * Properties to be passed onto the checkbox component, the values of the object are equivalent to the\n   * HvCheckbox API.\n   */\n  checkboxProps?: HvCheckBoxProps;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvBulkActionsClasses;\n}\n\n/**\n * Bulk Actions allow users to perform an action on a single or multiple items.\n * Also known as \"batch production\" of multiple items at once, one stage at a time.\n */\nexport const HvBulkActions = (props: HvBulkActionsProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    selectAllPagesLabel,\n    actionsDisabled,\n    maxVisibleActions,\n    checkboxProps,\n    actions,\n    numTotal = 0,\n    numSelected = 0,\n    selectAllLabel = \"All\",\n    selectAllConjunctionLabel = \"/\",\n    showSelectAllPages = false,\n    semantic = true,\n    actionsCallback,\n    onSelectAll,\n    onSelectAllPages,\n    ...others\n  } = useDefaultProps(\"HvBulkActions\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const { activeTheme, colors } = useTheme();\n\n  const baseColor = colors?.base_light || theme.colors.base_light;\n  const anySelected = numSelected > 0;\n  const isSemantic = semantic && anySelected;\n\n  const selectAllLabelComponent = (\n    <HvTypography\n      component=\"span\"\n      disabled={checkboxProps?.disabled}\n      variant=\"body\"\n    >\n      {!anySelected ? (\n        <>\n          <HvTypography variant=\"label\">{selectAllLabel}</HvTypography>\n          {` (${numTotal})`}\n        </>\n      ) : (\n        <>\n          <HvTypography variant=\"label\">{numSelected}</HvTypography>\n          {` ${selectAllConjunctionLabel} ${numTotal}`}\n        </>\n      )}\n    </HvTypography>\n  );\n\n  return (\n    <div\n      id={id}\n      className={cx(\n        classes.root,\n        { [classes.semantic]: isSemantic },\n        isSemantic &&\n          css({\n            [`& .${staticClasses.selectAll} div`]: {\n              \"&:hover:not(:disabled)\": {\n                backgroundColor: hexToRgbA(baseColor, 0.3),\n              },\n            },\n            [`& .${staticClasses.selectAll}:focus-within div`]: {\n              backgroundColor: hexToRgbA(baseColor, 0.3),\n            },\n          }),\n        className\n      )}\n      {...others}\n    >\n      <div className={classes.selectAllContainer}>\n        <HvCheckBox\n          id={setId(id, \"select\")}\n          className={classes.selectAll}\n          checked={numSelected > 0}\n          semantic={isSemantic}\n          onChange={onSelectAll}\n          indeterminate={numSelected > 0 && numSelected < numTotal}\n          label={selectAllLabelComponent}\n          {...checkboxProps}\n        />\n        {showSelectAllPages && anySelected && numSelected < numTotal && (\n          <>\n            <div className={classes.divider} />\n            <HvButton\n              id={setId(id, \"pages\")}\n              className={classes.selectAllPages}\n              variant={\n                isSemantic\n                  ? (activeTheme?.bulkActions\n                      .actionButtonVariant as HvButtonVariant)\n                  : \"secondaryGhost\"\n              }\n              onClick={onSelectAllPages}\n            >\n              {selectAllPagesLabel ?? `Select all ${numTotal} items`}\n            </HvButton>\n          </>\n        )}\n      </div>\n      <HvActionsGeneric\n        id={setId(id, \"actions\")}\n        classes={{ root: classes.actions }}\n        category={\n          isSemantic\n            ? (activeTheme?.bulkActions.actionButtonVariant as HvButtonVariant)\n            : \"secondaryGhost\"\n        }\n        actions={actions}\n        disabled={actionsDisabled ?? numSelected === 0}\n        actionsCallback={actionsCallback}\n        maxVisibleActions={maxVisibleActions}\n      />\n    </div>\n  );\n};\n"],"names":["HvBulkActions","props","id","className","classes","classesProp","selectAllPagesLabel","actionsDisabled","maxVisibleActions","checkboxProps","actions","numTotal","numSelected","selectAllLabel","selectAllConjunctionLabel","showSelectAllPages","semantic","actionsCallback","onSelectAll","onSelectAllPages","others","useDefaultProps","cx","css","useClasses","activeTheme","colors","useTheme","baseColor","base_light","theme","anySelected","isSemantic","selectAllLabelComponent","disabled","root","staticClasses","selectAll","backgroundColor","hexToRgbA","selectAllContainer","setId","divider","selectAllPages","bulkActions","actionButtonVariant"],"mappings":"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"}

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

@@ -7,13 +7,20 @@ const {
   root: {
     display: "flex",
     alignItems: "center",
-    border: theme.bulkActions.border,
-    backgroundColor: theme.bulkActions.backgroundColor,
-    padding: theme.bulkActions.padding,
+    border: `1px solid ${theme.colors.atmo4}`,
+    backgroundColor: theme.colors.atmo2,
+    padding: theme.spacing("xs", "md"),
     marginBottom: theme.space.xs
   },
   semantic: {
-    backgroundColor: theme.bulkActions.anySelectedBackgroundColor
+    backgroundColor: theme.colors.primary_20,
+    "& $selectAll div": {
+      color: "inherit",
+      "& *": {
+        color: "inherit",
+        backgroundColor: "transparent"
+      }
+    }
   },
   actions: {
     display: "inline-flex",
@@ -26,7 +33,7 @@ const {
   selectAll: {},
   selectAllPages: {},
   divider: {
-    display: theme.bulkActions.separatorDisplay,
+    display: "flex",
     backgroundColor: theme.colors.atmo4,
     width: "1px",
     height: "32px",

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

@@ -1 +1 @@
-{"version":3,"file":"BulkActions.styles.js","sources":["../../../../src/components/BulkActions/BulkActions.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBulkActions\", {\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n    border: theme.bulkActions.border,\n    backgroundColor: theme.bulkActions.backgroundColor,\n    padding: theme.bulkActions.padding,\n    marginBottom: theme.space.xs,\n  },\n  semantic: {\n    backgroundColor: theme.bulkActions.anySelectedBackgroundColor,\n  },\n  actions: { display: \"inline-flex\", marginLeft: \"auto\" },\n  selectAllContainer: { display: \"flex\", alignItems: \"center\" },\n  selectAll: {},\n  selectAllPages: {},\n  divider: {\n    display: theme.bulkActions.separatorDisplay,\n    backgroundColor: theme.colors.atmo4,\n    width: \"1px\",\n    height: \"32px\",\n    marginLeft: theme.space.sm,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","alignItems","border","theme","bulkActions","backgroundColor","padding","marginBottom","space","xs","semantic","anySelectedBackgroundColor","actions","marginLeft","selectAllContainer","selectAll","selectAllPages","divider","separatorDisplay","colors","atmo4","width","height","sm"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,iBAAiB;AAAA,EAC1EC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,QAAQC,MAAMC,YAAYF;AAAAA,IAC1BG,iBAAiBF,MAAMC,YAAYC;AAAAA,IACnCC,SAASH,MAAMC,YAAYE;AAAAA,IAC3BC,cAAcJ,MAAMK,MAAMC;AAAAA,EAC5B;AAAA,EACAC,UAAU;AAAA,IACRL,iBAAiBF,MAAMC,YAAYO;AAAAA,EACrC;AAAA,EACAC,SAAS;AAAA,IAAEZ,SAAS;AAAA,IAAea,YAAY;AAAA,EAAO;AAAA,EACtDC,oBAAoB;AAAA,IAAEd,SAAS;AAAA,IAAQC,YAAY;AAAA,EAAS;AAAA,EAC5Dc,WAAW,CAAC;AAAA,EACZC,gBAAgB,CAAC;AAAA,EACjBC,SAAS;AAAA,IACPjB,SAASG,MAAMC,YAAYc;AAAAA,IAC3Bb,iBAAiBF,MAAMgB,OAAOC;AAAAA,IAC9BC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRT,YAAYV,MAAMK,MAAMe;AAAAA,EAC1B;AACF,CAAC;"}
+{"version":3,"file":"BulkActions.styles.js","sources":["../../../../src/components/BulkActions/BulkActions.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"@core/utils/classes\";\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.primary_20,\n    \"& $selectAll div\": {\n      color: \"inherit\",\n\n      \"& *\": {\n        color: \"inherit\",\n        backgroundColor: \"transparent\",\n      },\n    },\n  },\n  actions: { display: \"inline-flex\", marginLeft: \"auto\" },\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":["staticClasses","useClasses","createClasses","root","display","alignItems","border","theme","colors","atmo4","backgroundColor","atmo2","padding","spacing","marginBottom","space","xs","semantic","primary_20","color","actions","marginLeft","selectAllContainer","selectAll","selectAllPages","divider","width","height","sm"],"mappings":";;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,iBAAiB;AAAA,EAC1EC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,QAAS,aAAYC,MAAMC,OAAOC,KAAM;AAAA,IACxCC,iBAAiBH,MAAMC,OAAOG;AAAAA,IAC9BC,SAASL,MAAMM,QAAQ,MAAM,IAAI;AAAA,IACjCC,cAAcP,MAAMQ,MAAMC;AAAAA,EAC5B;AAAA,EACAC,UAAU;AAAA,IACRP,iBAAiBH,MAAMC,OAAOU;AAAAA,IAC9B,oBAAoB;AAAA,MAClBC,OAAO;AAAA,MAEP,OAAO;AAAA,QACLA,OAAO;AAAA,QACPT,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA,EACAU,SAAS;AAAA,IAAEhB,SAAS;AAAA,IAAeiB,YAAY;AAAA,EAAO;AAAA,EACtDC,oBAAoB;AAAA,IAAElB,SAAS;AAAA,IAAQC,YAAY;AAAA,EAAS;AAAA,EAC5DkB,WAAW,CAAC;AAAA,EACZC,gBAAgB,CAAC;AAAA,EACjBC,SAAS;AAAA,IACPrB,SAAS;AAAA,IACTM,iBAAiBH,MAAMC,OAAOC;AAAAA,IAC9BiB,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRN,YAAYd,MAAMQ,MAAMa;AAAAA,EAC1B;AACF,CAAC;"}

package/dist/esm/components/Button/Button.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { forwardRef } from "react";
 import { useTheme } from "../../hooks/useTheme.js";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
-import { useClasses, getVariantStyles, getSizeStyles, getRadiusStyles, getOverrideColors } from "./Button.styles.js";
+import { useClasses, getSizeStyles, getRadiusStyles, getOverrideColors } from "./Button.styles.js";
 import { staticClasses } from "./Button.styles.js";
 const mapVariant = (variant, theme) => {
   if (theme === "ds3")
@@ -43,7 +43,7 @@ const HvButton = forwardRef((props, ref) => {
     activeTheme
   } = useTheme();
   const variant = mapVariant(variantProp ?? (icon ? "secondaryGhost" : "primary"), activeTheme == null ? void 0 : activeTheme.name);
-  return /* @__PURE__ */ jsxs(Component, { ref, className: cx(classes.root, css(getVariantStyles(variant)), size && css(getSizeStyles(size)), radius && css(getRadiusStyles(radius)), overrideIconColors && css(getOverrideColors()), {
+  return /* @__PURE__ */ jsxs(Component, { ref, className: cx(classes.root, classes[variant], size && css(getSizeStyles(size)), radius && css(getRadiusStyles(radius)), overrideIconColors && css(getOverrideColors()), {
     [classes.icon]: icon,
     [classes.disabled]: disabled
   }, className), ...Component === "button" && {

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef, ReactElement } from \"react\";\n\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { PolymorphicComponentRef, PolymorphicRef } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport {\n  staticClasses as buttonClasses,\n  getOverrideColors,\n  getRadiusStyles,\n  getSizeStyles,\n  getVariantStyles,\n  useClasses,\n} from \"./Button.styles\";\nimport { HvButtonRadius, HvButtonSize, HvButtonVariant } from \"./types\";\n\nexport { buttonClasses };\n\nexport type HvButtonClasses = ExtractNames<typeof useClasses>;\n\nexport type HvButtonProps<C extends React.ElementType = \"button\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** Use the variant prop to change the visual style of the Button. */\n      variant?: HvButtonVariant;\n      /** Whether the Button is an icon-only button. */\n      icon?: boolean;\n      /** Whether the Button is disabled or not. */\n      disabled?: boolean;\n      /** Class names to be applied. */\n      className?: string;\n      /** Element placed before the children. */\n      startIcon?: ReactElement;\n      /** Element placed after the children. */\n      endIcon?: ReactElement;\n      /** Button size. */\n      size?: HvButtonSize;\n      /** Button border radius. */\n      radius?: HvButtonRadius;\n      /** Defines the default colors of the button are forced into the icon. */\n      overrideIconColors?: boolean;\n      /** A Jss Object used to override or extend the styles applied. */\n      classes?: HvButtonClasses;\n      /** Whether the Button is selected or not. */\n      selected?: boolean;\n    }\n  >;\n\n/**\n * Normalize the button variant. It's meant to give us some retro-compatibility with\n * the DS 3.6 API.\n * @returns the normalized variant in DS 5 API\n */\nconst mapVariant = (\n  variant: HvButtonVariant,\n  theme?: string\n): HvButtonVariant => {\n  if (theme === \"ds3\") return variant;\n\n  const deprecatedVariantMap: Record<string, HvButtonVariant> = {\n    secondary: \"secondarySubtle\",\n    ghost: \"primaryGhost\",\n  };\n\n  const mappedVariant = deprecatedVariantMap[variant];\n\n  if (mappedVariant) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `Button variant '${variant}' is deprecated. Please use '${mappedVariant}'.`\n    );\n  }\n\n  return mappedVariant || variant;\n};\n\n/**\n * Button component is used to trigger an action or event.\n */\nexport const HvButton: <C extends React.ElementType = \"button\">(\n  props: HvButtonProps<C>\n) => React.ReactElement | null = forwardRef(\n  <C extends React.ElementType = \"button\">(\n    props: HvButtonProps<C>,\n    ref: PolymorphicRef<C>\n  ) => {\n    const {\n      id,\n      classes: classesProp,\n      children,\n      variant: variantProp,\n      disabled = false,\n      className,\n      startIcon,\n      endIcon,\n      icon = false,\n      size,\n      radius,\n      overrideIconColors = true,\n      component: Component = \"button\",\n      ...others\n    } = useDefaultProps(\"HvButton\", props);\n    const { classes, css, cx } = useClasses(classesProp);\n    const { activeTheme } = useTheme();\n    const variant = mapVariant(\n      variantProp ?? (icon ? \"secondaryGhost\" : \"primary\"),\n      activeTheme?.name\n    );\n\n    return (\n      <Component\n        ref={ref}\n        className={cx(\n          classes.root,\n          css(getVariantStyles(variant)),\n          size && css(getSizeStyles(size)),\n          radius && css(getRadiusStyles(radius)),\n          overrideIconColors && css(getOverrideColors()),\n          {\n            [classes.icon]: icon,\n            [classes.disabled]: disabled,\n          },\n          className\n        )}\n        {...(Component === \"button\" && { type: \"button\" })}\n        {...(disabled && {\n          disabled: true,\n          tabIndex: -1,\n          \"aria-disabled\": true,\n        })}\n        {...others}\n      >\n        {startIcon && <span className={classes.startIcon}>{startIcon}</span>}\n        {children}\n        {endIcon && <span className={classes.endIcon}>{endIcon}</span>}\n      </Component>\n    );\n  }\n);\n"],"names":["mapVariant","variant","theme","deprecatedVariantMap","secondary","ghost","mappedVariant","console","warn","HvButton","forwardRef","props","ref","id","classes","classesProp","children","variantProp","disabled","className","startIcon","endIcon","icon","size","radius","overrideIconColors","component","Component","others","useDefaultProps","css","cx","useClasses","activeTheme","useTheme","name","root","getVariantStyles","getSizeStyles","getRadiusStyles","getOverrideColors","type","tabIndex"],"mappings":";;;;;;AAuDA,MAAMA,aAAaA,CACjBC,SACAC,UACoB;AACpB,MAAIA,UAAU;AAAcD,WAAAA;AAE5B,QAAME,uBAAwD;AAAA,IAC5DC,WAAW;AAAA,IACXC,OAAO;AAAA,EAAA;AAGHC,QAAAA,gBAAgBH,qBAAqBF,OAAO;AAElD,MAAIK,eAAe;AAEjBC,YAAQC,KACL,mBAAkBP,OAAQ,gCAA+BK,aAAc,IAC1E;AAAA,EACF;AAEA,SAAOA,iBAAiBL;AAC1B;AAKO,MAAMQ,WAEoBC,WAC/B,CACEC,OACAC,QACG;AACG,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAf,SAASgB;AAAAA,IACTC,WAAW;AAAA,IACXC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC,qBAAqB;AAAA,IACrBC,WAAWC,YAAY;AAAA,IACvB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,YAAYlB,KAAK;AAC/B,QAAA;AAAA,IAAEG;AAAAA,IAASgB;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWjB,WAAW;AAC7C,QAAA;AAAA,IAAEkB;AAAAA,MAAgBC,SAAS;AACjC,QAAMjC,UAAUD,WACdiB,gBAAgBK,OAAO,mBAAmB,YAC1CW,2CAAaE,IACf;AAEA,SACG,qBAAA,WAAA,EACC,KACA,WAAWJ,GACTjB,QAAQsB,MACRN,IAAIO,iBAAiBpC,OAAO,CAAC,GAC7BsB,QAAQO,IAAIQ,cAAcf,IAAI,CAAC,GAC/BC,UAAUM,IAAIS,gBAAgBf,MAAM,CAAC,GACrCC,sBAAsBK,IAAIU,kBAAmB,CAAA,GAC7C;AAAA,IACE,CAAC1B,QAAQQ,IAAI,GAAGA;AAAAA,IAChB,CAACR,QAAQI,QAAQ,GAAGA;AAAAA,EAEtBC,GAAAA,SACF,GACKQ,GAAAA,cAAc,YAAY;AAAA,IAAEc,MAAM;AAAA,EAAS,GAC3CvB,GAAAA,YAAY;AAAA,IACfA,UAAU;AAAA,IACVwB,UAAU;AAAA,IACV,iBAAiB;AAAA,EAAA,GAEfd,GAAAA,QAEHR,UAAAA;AAAAA,IAAAA,aAAc,oBAAA,QAAA,EAAK,WAAWN,QAAQM,WAAYA,UAAU,WAAA;AAAA,IAC5DJ;AAAAA,IACAK,WAAY,oBAAA,QAAA,EAAK,WAAWP,QAAQO,SAAUA,UAAQ,SAAA;AAAA,EACzD,EAAA,CAAA;AAEJ,CACF;"}
+{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef, ReactElement } from \"react\";\n\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { PolymorphicComponentRef, PolymorphicRef } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport {\n  staticClasses as buttonClasses,\n  getOverrideColors,\n  getRadiusStyles,\n  getSizeStyles,\n  useClasses,\n} from \"./Button.styles\";\nimport { HvButtonRadius, HvButtonSize, HvButtonVariant } from \"./types\";\n\nexport { buttonClasses };\n\nexport type HvButtonClasses = ExtractNames<typeof useClasses>;\n\nexport type HvButtonProps<C extends React.ElementType = \"button\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** Use the variant prop to change the visual style of the Button. */\n      variant?: HvButtonVariant;\n      /** Whether the Button is an icon-only button. */\n      icon?: boolean;\n      /** Whether the Button is disabled or not. */\n      disabled?: boolean;\n      /** Class names to be applied. */\n      className?: string;\n      /** Element placed before the children. */\n      startIcon?: ReactElement;\n      /** Element placed after the children. */\n      endIcon?: ReactElement;\n      /** Button size. */\n      size?: HvButtonSize;\n      /** Button border radius. */\n      radius?: HvButtonRadius;\n      /** Defines the default colors of the button are forced into the icon. */\n      overrideIconColors?: boolean;\n      /** A Jss Object used to override or extend the styles applied. */\n      classes?: HvButtonClasses;\n      /** Whether the Button is selected or not. */\n      selected?: boolean;\n    }\n  >;\n\n/**\n * Normalize the button variant. It's meant to give us some retro-compatibility with\n * the DS 3.6 API.\n * @returns the normalized variant in DS 5 API\n */\nconst mapVariant = (\n  variant: HvButtonVariant,\n  theme?: string\n): HvButtonVariant => {\n  if (theme === \"ds3\") return variant;\n\n  const deprecatedVariantMap: Record<string, HvButtonVariant> = {\n    secondary: \"secondarySubtle\",\n    ghost: \"primaryGhost\",\n  };\n\n  const mappedVariant = deprecatedVariantMap[variant];\n\n  if (mappedVariant) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `Button variant '${variant}' is deprecated. Please use '${mappedVariant}'.`\n    );\n  }\n\n  return mappedVariant || variant;\n};\n\n/**\n * Button component is used to trigger an action or event.\n */\nexport const HvButton: <C extends React.ElementType = \"button\">(\n  props: HvButtonProps<C>\n) => React.ReactElement | null = forwardRef(\n  <C extends React.ElementType = \"button\">(\n    props: HvButtonProps<C>,\n    ref: PolymorphicRef<C>\n  ) => {\n    const {\n      id,\n      classes: classesProp,\n      children,\n      variant: variantProp,\n      disabled = false,\n      className,\n      startIcon,\n      endIcon,\n      icon = false,\n      size,\n      radius,\n      overrideIconColors = true,\n      component: Component = \"button\",\n      ...others\n    } = useDefaultProps(\"HvButton\", props);\n    const { classes, css, cx } = useClasses(classesProp);\n    const { activeTheme } = useTheme();\n    const variant = mapVariant(\n      variantProp ?? (icon ? \"secondaryGhost\" : \"primary\"),\n      activeTheme?.name\n    );\n\n    return (\n      <Component\n        ref={ref}\n        className={cx(\n          classes.root,\n          classes[variant],\n          size && css(getSizeStyles(size)),\n          radius && css(getRadiusStyles(radius)),\n          overrideIconColors && css(getOverrideColors()),\n          {\n            [classes.icon]: icon,\n            [classes.disabled]: disabled,\n          },\n          className\n        )}\n        {...(Component === \"button\" && { type: \"button\" })}\n        {...(disabled && {\n          disabled: true,\n          tabIndex: -1,\n          \"aria-disabled\": true,\n        })}\n        {...others}\n      >\n        {startIcon && <span className={classes.startIcon}>{startIcon}</span>}\n        {children}\n        {endIcon && <span className={classes.endIcon}>{endIcon}</span>}\n      </Component>\n    );\n  }\n);\n"],"names":["mapVariant","variant","theme","deprecatedVariantMap","secondary","ghost","mappedVariant","console","warn","HvButton","forwardRef","props","ref","id","classes","classesProp","children","variantProp","disabled","className","startIcon","endIcon","icon","size","radius","overrideIconColors","component","Component","others","useDefaultProps","css","cx","useClasses","activeTheme","useTheme","name","root","getSizeStyles","getRadiusStyles","getOverrideColors","type","tabIndex"],"mappings":";;;;;;AAsDA,MAAMA,aAAaA,CACjBC,SACAC,UACoB;AACpB,MAAIA,UAAU;AAAcD,WAAAA;AAE5B,QAAME,uBAAwD;AAAA,IAC5DC,WAAW;AAAA,IACXC,OAAO;AAAA,EAAA;AAGHC,QAAAA,gBAAgBH,qBAAqBF,OAAO;AAElD,MAAIK,eAAe;AAEjBC,YAAQC,KACL,mBAAkBP,OAAQ,gCAA+BK,aAAc,IAC1E;AAAA,EACF;AAEA,SAAOA,iBAAiBL;AAC1B;AAKO,MAAMQ,WAEoBC,WAC/B,CACEC,OACAC,QACG;AACG,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAf,SAASgB;AAAAA,IACTC,WAAW;AAAA,IACXC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC,qBAAqB;AAAA,IACrBC,WAAWC,YAAY;AAAA,IACvB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,YAAYlB,KAAK;AAC/B,QAAA;AAAA,IAAEG;AAAAA,IAASgB;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWjB,WAAW;AAC7C,QAAA;AAAA,IAAEkB;AAAAA,MAAgBC,SAAS;AACjC,QAAMjC,UAAUD,WACdiB,gBAAgBK,OAAO,mBAAmB,YAC1CW,2CAAaE,IACf;AAGE,SAAA,qBAAC,WACC,EAAA,KACA,WAAWJ,GACTjB,QAAQsB,MACRtB,QAAQb,OAAO,GACfsB,QAAQO,IAAIO,cAAcd,IAAI,CAAC,GAC/BC,UAAUM,IAAIQ,gBAAgBd,MAAM,CAAC,GACrCC,sBAAsBK,IAAIS,kBAAmB,CAAA,GAC7C;AAAA,IACE,CAACzB,QAAQQ,IAAI,GAAGA;AAAAA,IAChB,CAACR,QAAQI,QAAQ,GAAGA;AAAAA,EAEtBC,GAAAA,SACF,GACKQ,GAAAA,cAAc,YAAY;AAAA,IAAEa,MAAM;AAAA,EAAS,GAC3CtB,GAAAA,YAAY;AAAA,IACfA,UAAU;AAAA,IACVuB,UAAU;AAAA,IACV,iBAAiB;AAAA,EAAA,GAEfb,GAAAA,QAEHR,UAAAA;AAAAA,IAAAA,aAAc,oBAAA,QAAA,EAAK,WAAWN,QAAQM,WAAYA,UAAU,WAAA;AAAA,IAC5DJ;AAAAA,IACAK,WAAY,oBAAA,QAAA,EAAK,WAAWP,QAAQO,SAAUA,UAAQ,SAAA;AAAA,EACzD,EAAA,CAAA;AAEJ,CACF;"}