npm - @hitachivantara/uikit-react-core - Versions diffs - 5.28.1 → 5.29.0 - Mend

@hitachivantara/uikit-react-core 5.28.1 → 5.29.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (434) hide show

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

	@@ -1 +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":";;;AAOa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,eAAe;AAAA,EACxEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,OAAO;AAAA,IACPC,UAAU;AAAA,IAEV,iCAAiC;AAAA,MAC/BC,iBAAiBC,MAAMC,UAAUC;AAAAA,IACnC;AAAA,IAEA,wCAAwC;AAAA,MACtCH,iBAAiBC,MAAMC,UAAUC;AAAAA,IACnC;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IACR,2BAA2B;AAAA,MACzBJ,iBAAiBC,MAAMI,OAAOC;AAAAA,IAChC;AAAA,IAEA,iCAAiC;AAAA,MAC/BN,iBAAiBC,MAAMI,OAAOC;AAAAA,IAChC;AAAA,IAEA,aAAa;AAAA,MACXC,OAAON,MAAMC,UAAUM;AAAAA,MACvBC,qBAAqBR,MAAMC,UAAUM;AAAAA,IACvC;AAAA,IAEA,yBAAyB;AAAA,MACvB,YAAY;AAAA,QACVR,iBAAiBC,MAAMC,UAAUQ;AAAAA,QACjCC,QAAS,aAAYV,MAAMC,UAAUU,4BAA6B;AAAA,MACpE;AAAA,IACF;AAAA,IAEA,+BAA+B;AAAA,MAC7B,YAAY;AAAA,QACVZ,iBAAiBC,MAAMC,UAAUQ;AAAAA,QACjCC,QAAS,aAAYV,MAAMC,UAAUU,4BAA6B;AAAA,MACpE;AAAA,IACF;AAAA,EACF;AAAA,EACAC,SAAS;AAAA,IACP,oBAAoB;AAAA,MAClB,2BAA2B;AAAA,QACzBb,iBAAiBC,MAAMI,OAAOS;AAAAA,MAChC;AAAA,MAEA,iCAAiC;AAAA,QAC/Bd,iBAAiBC,MAAMI,OAAOS;AAAAA,MAChC;AAAA,MAEA,yBAAyB;AAAA,QACvB,YAAY;AAAA,UACVH,QAAS,aAAYV,MAAMI,OAAOS,QAAS;AAAA,QAC7C;AAAA,MACF;AAAA,MAEA,+BAA+B;AAAA,QAC7B,YAAY;AAAA,UACVH,QAAS,aAAYV,MAAMI,OAAOS,QAAS;AAAA,QAC7C;AAAA,MACF;AAAA,MAEA,sCAAsC;AAAA,QACpC,YAAY;AAAA,UACVH,QAAS,aAAYV,MAAMI,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,MAAMC,UAAUe,mBAAoB;AAAA,QACzDjB,iBAAiBC,MAAMC,UAAUgB;AAAAA,MACnC;AAAA,IACF;AAAA,IAEA,+BAA+B;AAAA,MAC7B,YAAY;AAAA,QACVP,QAAS,aAAYV,MAAMC,UAAUe,mBAAoB;AAAA,QACzDjB,iBAAiBC,MAAMC,UAAUgB;AAAAA,MACnC;AAAA,IACF;AAAA,IAEA,sCAAsC;AAAA,MACpC,YAAY;AAAA,QACVP,QAAS,aAAYV,MAAMC,UAAUe,mBAAoB;AAAA,QACzDjB,iBAAiBC,MAAMC,UAAUgB;AAAAA,MACnC;AAAA,IACF;AAAA,EACF;AAAA,EACAC,sBAAsB;AAAA,IACpBpB,UAAU;AAAA,IACVD,OAAO;AAAA,IACPsB,QAAQnB,MAAMC,UAAUmB;AAAAA,IACxBC,KAAK;AAAA,IACLC,MAAM;AAAA,IACNvB,iBAAiBC,MAAMI,OAAOC;AAAAA,EAChC;AAAA,EACAkB,kBAAkB;AAAA,IAAEC,aAAaxB,MAAMI,OAAOS;AAAAA,EAAS;AAAA,EACvDY,mBAAmB;AAAA,IACjBD,aAAaxB,MAAMC,UAAUe;AAAAA,IAC7BjB,iBAAiBC,MAAMC,UAAUgB;AAAAA,EACnC;AAAA,EACAS,WAAW;AAAA,IACTC,QAAQ;AAAA,IACR9B,OAAO;AAAA,IACP+B,cAAc5B,MAAM6B,MAAMC;AAAAA,IAC1BX,QAAQ;AAAA,IACRT,QAAS,aAAYV,MAAMC,UAAUuB,WAAY;AAAA,IACjDO,WAAW;AAAA,IACXhC,iBAAiBC,MAAMI,OAAO4B;AAAAA,IAC9BC,YAAYjC,MAAMiC,WAAWC;AAAAA,IAE7B,kFACE;AAAA,MACEV,aAAaxB,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,MAAMI,OAAO4B;AAAAA,IACzB,GAAGM;AAAAA,IAEH,WAAW;AAAA,MACTD,YAAYrC,MAAMI,OAAO4B;AAAAA,IAC3B;AAAA,IAEA,wBAAwB;AAAA,MACtBjC,iBAAiBC,MAAMC,UAAUgB;AAAAA,IACnC;AAAA,EACF;AAAA,EACAsB,mBAAmB;AAAA,IACjBF,YAAYrC,MAAMC,UAAUQ;AAAAA,IAC5Be,aAAaxB,MAAMC,UAAUuC;AAAAA,IAC7BC,QAAQ;AAAA,IAER,WAAW;AAAA,MACTJ,YAAYrC,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,MAAMC,UAAU6C,oBAAqB;AAAA,MAC1DlB,cAAc5B,MAAM6B,MAAMC;AAAAA,MAC1B/B,iBAAiBC,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,MAAMC,UAAUC,UAAW;AAAA,MAClD;AAAA,IACF;AAAA,EACF;AAAA,EACAgD,OAAO;AAAA,IACL/B,QAAQ;AAAA,IACR6B,YAAYhD,MAAMmD,MAAMC;AAAAA,IACxBH,aAAajD,MAAMmD,MAAMC;AAAAA,IACzBR,SAAS;AAAA,IACTC,UAAU;AAAA,IACVQ,cAAc;AAAA,IACdC,SAAS;AAAA,IACTzD,OAAO;AAAA,IACP0D,UAAU;AAAA,IACV,GAAIvD,MAAMwD,WAAWtB;AAAAA,IAErB,kBAAkB;AAAA,MAChBuB,SAAS;AAAA,MACTnD,OAAON,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,MAAMC,UAAU4D;AAAAA,EACzB;AAAA,EACAC,gBAAgB;AAAA,IAAEC,QAAQ;AAAA,IAAQlE,OAAO;AAAA,EAAO;AAClD,CAAC;"}
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.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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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;"}
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.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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":";;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,gBAAgB;AAAA,EACzEC,MAAM;AAAA,IACJC,~~SAASC,MAAMC,WAAWF~~;~~AAAAA~~,~~IAC1BG~~,QAAQ;AAAA,IACRC,~~OAAOH,MAAMC,WAAWE~~;~~AAAAA~~,~~IACxBC~~,~~QAAQJ,MAAMC,WAAWG~~;~~AAAAA~~,~~IACzBC~~,YAAY;AAAA,IACZC,gBAAgB;AAAA,IAChBC,~~cAAcP~~,MAAMC,~~WAAWM~~;AAAAA,~~IAE/B~~,WAAW;AAAA,MACTC,~~iBAAiBR~~,~~MAAMC~~,~~WAAWQ~~;AAAAA,~~IACpC~~;AAAA;AAAA,IAGA,iBAAiB;AAAA,MACf,WAAW;AAAA,~~QACTD~~,~~iBAAiBR,MAAMC,WAAWS~~;~~AAAAA~~,~~MACpC~~;AAAA,MAEA,aAAa;AAAA,~~QACXC~~,WAAW;AAAA,QACX,cAAc;AAAA,UACZC,~~SAASZ,MAAMC,WAAWY~~;~~AAAAA~~,~~UAC1BL~~,~~iBAAiBR~~,~~MAAMC~~,~~WAAWa~~;AAAAA,~~QACpC~~;AAAA,QACA,WAAW;AAAA,~~UACTN~~,~~iBAAiBR,MAAMC,WAAWS~~;~~AAAAA~~,~~QACpC~~;AAAA,MACF;AAAA,IACF;AAAA;AAAA,IAGA,cAAc;AAAA,MACZ,iBAAiB;AAAA,QACf,cAAc;AAAA,~~UACZE~~,~~SAASZ,MAAMC,WAAWc,SAASC~~;~~AAAAA~~,~~UACnCR~~,~~iBAAiBR~~,~~MAAMC~~,~~WAAWc,SAASE~~;AAAAA,~~UAC3CC~~,~~QAAQlB~~,~~MAAMC~~,~~WAAWc~~,~~SAASI~~;~~AAAAA~~,~~QACpC~~;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACAC,QAAQ;AAAA,IACNjB,~~OAAOH,MAAMC,WAAWE~~;~~AAAAA~~,~~IACxBC~~,~~QAAQJ,MAAMC,WAAWG~~;~~AAAAA~~,~~IACzBL~~,~~SAASC,MAAMC,WAAWF~~;~~AAAAA~~,~~IAE1B~~,0BAA0B;AAAA,~~MACxBG~~,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAmB,YAAY;AAAA,IACVlB,~~OAAOH,MAAMC,WAAWE~~;~~AAAAA~~,~~IACxBC~~,~~QAAQJ,MAAMC,WAAWG~~;~~AAAAA~~,~~IACzBL~~,~~SAASC,MAAMC,WAAWF~~;~~AAAAA~~,~~EAC5B~~;AAAA,~~EACAuB~~,OAAO;AAAA,~~IACLV~~,~~SAASZ~~,~~MAAMC~~,~~WAAWqB,MAAMV~~;~~AAAAA~~,~~IAChCL~~,~~cAAcP,MAAMC,WAAWqB,MAAMf~~;~~AAAAA~~,~~IACrCH~~,~~QAAQJ,MAAMC,WAAWqB,MAAMlB~~;~~AAAAA~~,~~IAC/BD~~,~~OAAOH~~,~~MAAMC~~,~~WAAWqB~~,~~MAAMnB;AAAAA~~,~~IAC9Be,QAAQlB,MAAMC,WAAWqB,MAAMJ~~;~~AAAAA~~,~~IAC/BV~~,~~iBAAiBR~~,~~MAAMC~~,~~WAAWqB,MAAMd~~;AAAAA,~~EAC1C~~;AAAA,~~EACAe~~,OAAO;AAAA,IACLC,UAAU;AAAA,IACVC,~~MAAMzB~~,~~MAAMC~~,~~WAAWsB,MAAME~~;~~AAAAA~~,~~IAC7BtB~~,~~OAAOH,MAAMC,WAAWsB,MAAMpB~~;~~AAAAA~~,~~IAC9BC~~,~~QAAQJ~~,~~MAAMC~~,~~WAAWsB~~,~~MAAMnB;AAAAA~~,~~IAC/Bc,QAAQlB,MAAMC,WAAWsB,MAAML~~;~~AAAAA~~,~~IAC/BV~~,~~iBAAiBR~~,~~MAAMC~~,~~WAAWsB,MAAMf~~;AAAAA,~~IACxCkB~~,~~YAAY1B,MAAMC,WAAWsB,MAAMG~~;~~AAAAA~~,~~IACnCC~~,~~WAAW3B,MAAMC,WAAWsB,MAAMI~~;~~AAAAA~~,~~IAClCC~~,~~WAAW5B,MAAMC,WAAWsB,MAAMK~~;~~AAAAA~~,~~EACpC~~;AAAA,EACAC,SAAS,CAAC;AAAA,~~EACVd~~,UAAU;AAAA,~~IACRb~~,QAAQ;AAAA,IAER,aAAa;AAAA,MACXA,QAAQ;AAAA,IACV;AAAA,IAEA,YAAY;AAAA,~~MACVM~~,~~iBAAiBR~~,~~MAAMC~~,~~WAAWc,SAASe~~;AAAAA,~~MAC3CZ~~,~~QAAQlB~~,~~MAAMC~~,~~WAAWc~~,~~SAASgB~~;~~AAAAA~~,~~IACpC~~;AAAA,EACF;AAAA,~~EACAC~~,UAAU,CAAC;AAAA,EACXC,cAAc;AAAA,IACZ1B,~~cAAcP,MAAMC,WAAWiC~~;~~AAAAA~~,~~IAC/B~~,~~GAAGC~~;AAAAA,EACL;AACF,CAAC;"}
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: 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":";;;;;;;;;;;AAgGaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,WAAW;AAAA,IACXC,cAAc;AAAA,IACdC,iBAAiB;AAAA,IACjBC,4BAA4B;AAAA,IAC5BC,qBAAqB;AAAA,IACrBC,WAAW;AAAA,IACXC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,iBAAiBpB,KAAK;AAEpC,QAAA;AAAA,IAAEG;AAAAA,IAASkB;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWnB,WAAW;AAE7C,QAAA;AAAA,IAAEoB;AAAAA,IAAaC;AAAAA,MAAWC,SAAS;AAEzC,QAAMC,aAAYF,iCAAQG,eAAcC,MAAMJ,OAAOG;AACrD,QAAME,cAAcnB,cAAc;AAClC,QAAMoB,aAAahB,YAAYe;AAE/B,QAAME,0BACJ,oBAAC,cACC,EAAA,WAAU,QACV,UAAUxB,+CAAeyB,UACzB,SAAQ,QAEP,UAACH,CAAAA,cAEE,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAC,oBAAA,cAAA,EAAa,SAAQ,SAASlB,UAAe,gBAAA;AAAA,IAC5C,KAAIF,QAAS;AAAA,EAAA,EAAA,CACjB,IAGE,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAC,oBAAA,cAAA,EAAa,SAAQ,SAASC,UAAY,aAAA;AAAA,IACzC,IAAGE,yBAA0B,IAAGH,QAAS;AAAA,EAAA,EAC7C,CAAA,EAEJ,CAAA;AAGF,8BACG,OACC,EAAA,IACA,WAAWW,GACTlB,QAAQ+B,MACR;AAAA,IAAE,CAAC/B,QAAQY,QAAQ,GAAGgB;AAAAA,EAAAA,GACtBA,cACET,IAAI;AAAA,IACF,CAAE,MAAKa,cAAcC,SAAU,MAAK,GAAG;AAAA,~~MACrCC~~,~~OAAOR,MAAMS,YAAYC;AAAAA,MAEzB,~~0BAA0B;AAAA,QACxBC,iBAAiBC,~~UAAUd~~,WAAW,GAAG;AAAA,MAC3C;AAAA,~~MAEA,OAAO;AAAA,QACLU,OAAOR,MAAMS,YAAYC;AAAAA,QACzBC,iBAAiB;AAAA,MACnB;AAAA,~~IACF;AAAA,~~IAEA~~,CAAE,~~MAAKL~~,cAAcC,SAAU,mBAAkB,GAAG;AAAA,~~MAClDI~~,iBAAiBC,~~UAAUd~~,WAAW,GAAG;AAAA,IAC3C;AAAA,EACD,CAAA,GACHzB,SACF,GACA,GAAIiB,QAEJ,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,WAAWhB,~~QAAQuC~~,oBACtB,UAAA;AAAA,MAAC,oBAAA,YAAA,EACC,IAAIC,~~MAAM1C~~,IAAI,QAAQ,GACtB,WAAWE,QAAQiC,WACnB,SAASzB,cAAc,GACvB,UAAUoB,YACV,UAAUd,aACV,eAAeN,cAAc,KAAKA,cAAcD,UAChD,OAAOsB,yBACP,GAAIxB,cAAc,CAAA;AAAA,MAEnBM,sBAAsBgB,eAAenB,cAAcD,YAEhD,qBAAA,UAAA,EAAA,UAAA;AAAA,QAAC,oBAAA,OAAA,EAAI,WAAWP,~~QAAQyC~~,QAAQ,CAAA;AAAA,QAChC,oBAAC,YACC,IAAID,~~MAAM1C~~,IAAI,OAAO,GACrB,WAAWE,~~QAAQ0C~~,gBACnB,~~SACEd~~,aACKP,~~2CAAac~~,~~YACXQ~~,sBACH,kBAEN,~~SAAS5B~~,kBAERb,UAAAA,uBAAwB,cAAaK,QAAS,SACjD,CAAA;AAAA,MAAA,GACF;AAAA,IAAA,GAEJ;AAAA,wBACC,kBACC,EAAA,~~IAAIiC~~,~~MAAM1C~~,IAAI,SAAS,GACvB,SAAS;AAAA,MAAEiC,MAAM/B,QAAQM;AAAAA,IACzB,GAAA,UACEsB,aACKP,~~2CAAac~~,~~YAAYQ~~,sBAC1B,kBAEN,SACA,~~UAAUxC~~,mBAAmBK,gBAAgB,GAC7C,iBACA,kBAAqC,CAAA;AAAA,EAEzC,EAAA,CAAA;AAEJ;"}
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 \"&: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":";;;;;;;;;;;AAgGaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,WAAW;AAAA,IACXC,cAAc;AAAA,IACdC,iBAAiB;AAAA,IACjBC,4BAA4B;AAAA,IAC5BC,qBAAqB;AAAA,IACrBC,WAAW;AAAA,IACXC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,iBAAiBpB,KAAK;AAEpC,QAAA;AAAA,IAAEG;AAAAA,IAASkB;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWnB,WAAW;AAE7C,QAAA;AAAA,IAAEoB;AAAAA,IAAaC;AAAAA,MAAWC,SAAS;AAEzC,QAAMC,aAAYF,iCAAQG,eAAcC,MAAMJ,OAAOG;AACrD,QAAME,cAAcnB,cAAc;AAClC,QAAMoB,aAAahB,YAAYe;AAE/B,QAAME,0BACJ,oBAAC,cACC,EAAA,WAAU,QACV,UAAUxB,+CAAeyB,UACzB,SAAQ,QAEP,UAACH,CAAAA,cAEE,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAC,oBAAA,cAAA,EAAa,SAAQ,SAASlB,UAAe,gBAAA;AAAA,IAC5C,KAAIF,QAAS;AAAA,EAAA,EAAA,CACjB,IAGE,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAC,oBAAA,cAAA,EAAa,SAAQ,SAASC,UAAY,aAAA;AAAA,IACzC,IAAGE,yBAA0B,IAAGH,QAAS;AAAA,EAAA,EAC7C,CAAA,EAEJ,CAAA;AAGF,8BACG,OACC,EAAA,IACA,WAAWW,GACTlB,QAAQ+B,MACR;AAAA,IAAE,CAAC/B,QAAQY,QAAQ,GAAGgB;AAAAA,EAAAA,GACtBA,cACET,IAAI;AAAA,IACF,CAAE,MAAKa,cAAcC,SAAU,MAAK,GAAG;AAAA,MACrC,0BAA0B;AAAA,QACxBC,iBAAiBC,UAAUX,WAAW,GAAG;AAAA,MAC3C;AAAA,IACF;AAAA,IACA,CAAE,MAAKQ,cAAcC,SAAU,mBAAkB,GAAG;AAAA,MAClDC,iBAAiBC,UAAUX,WAAW,GAAG;AAAA,IAC3C;AAAA,EACD,CAAA,GACHzB,SACF,GACA,GAAIiB,QAEJ,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,WAAWhB,QAAQoC,oBACtB,UAAA;AAAA,MAAC,oBAAA,YAAA,EACC,IAAIC,MAAMvC,IAAI,QAAQ,GACtB,WAAWE,QAAQiC,WACnB,SAASzB,cAAc,GACvB,UAAUoB,YACV,UAAUd,aACV,eAAeN,cAAc,KAAKA,cAAcD,UAChD,OAAOsB,yBACP,GAAIxB,cAAc,CAAA;AAAA,MAEnBM,sBAAsBgB,eAAenB,cAAcD,YAEhD,qBAAA,UAAA,EAAA,UAAA;AAAA,QAAC,oBAAA,OAAA,EAAI,WAAWP,QAAQsC,QAAQ,CAAA;AAAA,QAChC,oBAAC,YACC,IAAID,MAAMvC,IAAI,OAAO,GACrB,WAAWE,QAAQuC,gBACnB,SACEX,aACKP,2CAAamB,YACXC,sBACH,kBAEN,SAAS1B,kBAERb,UAAAA,uBAAwB,cAAaK,QAAS,SACjD,CAAA;AAAA,MAAA,GACF;AAAA,IAAA,GAEJ;AAAA,wBACC,kBACC,EAAA,IAAI8B,MAAMvC,IAAI,SAAS,GACvB,SAAS;AAAA,MAAEiC,MAAM/B,QAAQM;AAAAA,IACzB,GAAA,UACEsB,aACKP,2CAAamB,YAAYC,sBAC1B,kBAEN,SACA,UAAUtC,mBAAmBK,gBAAgB,GAC7C,iBACA,kBAAqC,CAAA;AAAA,EAEzC,EAAA,CAAA;AAEJ;"}

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

@@ -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 CHANGED Viewed

	@@ -1 +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;"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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;"}
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 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;"}

package/dist/esm/components/Button/Button.styles.js CHANGED Viewed

@@ -26,8 +26,8 @@ const {
     lineHeight: "11px",
     letterSpacing: 0,
     height: "32px",
-    borderRadius: theme.button.borderRadius,
-    padding: theme.button.padding
+    borderRadius: theme.radii.base,
+    padding: theme.spacing("xs", "sm")
   },
   startIcon: {
     marginLeft: `calc(-1 * ${theme.space.xs})`
@@ -48,68 +48,63 @@ const {
     padding: 0,
     height: "fit-content",
     minWidth: "unset"
-  }
-});
-const getVariantStyles = (variant) => {
-  const variantStyles = {
-    primary: {
-      color: theme.colors.atmo1,
-      backgroundColor: theme.colors.primary,
-      "&:hover, &:focus-visible": {
-        backgroundColor: theme.colors.primary_80
-      }
-    },
-    primarySubtle: {
-      color: theme.colors.primary,
-      backgroundColor: "transparent",
-      border: `1px solid ${theme.colors.primary}`,
-      "&:hover, &:focus-visible": {
-        backgroundColor: theme.button.hoverColor
-      }
-    },
-    primaryGhost: {
-      color: theme.colors.primary,
-      backgroundColor: "transparent",
-      "&:hover, &:focus-visible": {
-        backgroundColor: theme.button.hoverColor
-      },
-      "&:disabled": {
-        backgroundColor: "transparent"
-      }
-    },
-    secondarySubtle: {
-      color: theme.colors.secondary,
-      backgroundColor: theme.button.secondaryBackgroundColor,
-      border: `1px solid ${theme.button.secondarySubtleBorderColor}`,
-      "&:hover, &:focus-visible": {
-        backgroundColor: theme.button.hoverColor
-      }
+  },
+  primary: {
+    color: theme.colors.atmo1,
+    backgroundColor: theme.colors.primary,
+    "&:hover, &:focus-visible": {
+      backgroundColor: theme.colors.primary_80
+    }
+  },
+  primarySubtle: {
+    color: theme.colors.primary,
+    backgroundColor: "transparent",
+    border: `1px solid ${theme.colors.primary}`,
+    "&:hover, &:focus-visible": {
+      backgroundColor: theme.colors.containerBackgroundHover
+    }
+  },
+  primaryGhost: {
+    color: theme.colors.primary,
+    backgroundColor: "transparent",
+    "&:hover, &:focus-visible": {
+      backgroundColor: theme.colors.containerBackgroundHover
     },
-    secondaryGhost: {
-      color: theme.colors.secondary,
-      backgroundColor: "transparent",
-      "&:hover, &:focus-visible": {
-        backgroundColor: theme.button.hoverColor
-      },
-      "&:disabled": {
-        backgroundColor: "transparent"
-      }
+    "&:disabled": {
+      backgroundColor: "transparent"
+    }
+  },
+  secondarySubtle: {
+    color: theme.colors.secondary,
+    backgroundColor: "transparent",
+    border: `1px solid ${theme.colors.secondary}`,
+    "&:hover, &:focus-visible": {
+      backgroundColor: theme.colors.containerBackgroundHover
+    }
+  },
+  secondaryGhost: {
+    color: theme.colors.secondary,
+    backgroundColor: "transparent",
+    "&:hover, &:focus-visible": {
+      backgroundColor: theme.colors.containerBackgroundHover
     },
-    semantic: {
-      color: theme.colors.base_dark,
-      backgroundColor: "transparent",
-      "&:hover, &:focus-visible": {
-        backgroundColor: theme.button.semanticColor
-      },
-      "&:disabled": {
-        backgroundColor: theme.button.semanticColorDisabled
-      }
+    "&:disabled": {
+      backgroundColor: "transparent"
+    }
+  },
+  semantic: {
+    color: theme.colors.base_dark,
+    backgroundColor: "transparent",
+    "&:hover, &:focus-visible": {
+      backgroundColor: "rgba(251, 252, 252, 0.3)"
     },
-    secondary: void 0,
-    ghost: void 0
-  };
-  return variantStyles[variant];
-};
+    "&:disabled": {
+      backgroundColor: "rgba(251, 252, 252, 0.1)"
+    }
+  },
+  secondary: {},
+  ghost: {}
+});
 const getRadiusStyles = (radius) => ({
   borderRadius: theme.radii[radius]
 });
@@ -128,7 +123,6 @@ export {
   getOverrideColors,
   getRadiusStyles,
   getSizeStyles,
-  getVariantStyles,
   staticClasses,
   useClasses
 };

package/dist/esm/components/Button/Button.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.styles.js","sources":["../../../../src/components/Button/Button.styles.ts"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nimport { HvButtonRadius, HvButtonSize, ~~HvButtonVariant~~ } from \"./types\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvButton\", {\n root: {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n textTransform: \"none\",\n cursor: \"pointer\",\n minWidth: \"70px\",\n\n whiteSpace: \"nowrap\",\n\n \"&:hover\": {},\n \"&:focus\": {},\n \"&:focus-visible\": { ...outlineStyles },\n \"&:active\": {},\n\n // default button - no size specified\n fontFamily: theme.fontFamily.body,\n fontSize: theme.fontSizes.base,\n fontWeight: theme.fontWeights.semibold,\n lineHeight: \"11px\",\n letterSpacing: 0,\n height: \"32px\",\n borderRadius: theme.~~button~~.~~borderRadius~~,\n padding: theme.~~button.padding~~,\n },\n startIcon: {\n marginLeft: `calc(-1 * ${theme.space.xs})`,\n },\n endIcon: {\n marginRight: `calc(-1 * ${theme.space.xs})`,\n },\n focusVisible: {},\n\n disabled: {\n color: theme.colors.secondary_60,\n borderColor: theme.colors.atmo4,\n backgroundColor: theme.colors.atmo3,\n cursor: \"not-allowed\",\n pointerEvents: \"none\",\n },\n\n icon: {\n margin: 0,\n padding: 0,\n height: \"fit-content\",\n minWidth: \"unset\",\n },\n~~});\n~~\~~nexport const getVariantStyles = (variant: HvButtonVariant) => {\~~n ~~const variantStyles~~: ~~Record<HvButtonVariant, CSSInterpolation> =~~ {\n ~~primary: {\n~~ color: theme.colors.atmo1,\n backgroundColor: theme.colors.primary,\n \"&:hover, &:focus-visible\": {\n backgroundColor: theme.colors.primary_80,\n },\n },\n primarySubtle: {\n color: theme.colors.primary,\n backgroundColor: \"transparent\",\n border: `1px solid ${theme.colors.primary}`,\n \"&:hover, &:focus-visible\": {\n backgroundColor: theme.~~button~~.~~hoverColor~~,\n },\n },\n primaryGhost: {\n color: theme.colors.primary,\n backgroundColor: \"transparent\",\n \"&:hover, &:focus-visible\": {\n backgroundColor: theme.~~button~~.~~hoverColor~~,\n },\n \"&:disabled\": {\n backgroundColor: \"transparent\",\n },\n },\n secondarySubtle: {\n color: theme.colors.secondary,\n backgroundColor: ~~theme.button.secondaryBackgroundColor~~,\n border: `1px solid ${theme.~~button~~.~~secondarySubtleBorderColor~~}`,\n \"&:hover, &:focus-visible\": {\n backgroundColor: theme.~~button~~.~~hoverColor~~,\n },\n },\n secondaryGhost: {\n color: theme.colors.secondary,\n backgroundColor: \"transparent\",\n \"&:hover, &:focus-visible\": {\n backgroundColor: theme.~~button~~.~~hoverColor~~,\n },\n \"&:disabled\": {\n backgroundColor: \"transparent\",\n },\n },\n semantic: {\n color: theme.colors.base_dark,\n backgroundColor: \"transparent\",\n \"&:hover, &:focus-visible\": {\n backgroundColor: ~~theme~~.~~button.semanticColor~~,\n },\n \"&:disabled\": {\n backgroundColor: ~~theme~~.~~button.semanticColorDisabled~~,\n },\n },\n secondary: ~~undefined~~,\n ghost: ~~undefined~~,\n };\n\~~n return variantStyles[variant];\n};\n\~~nexport const getRadiusStyles = (radius: HvButtonRadius): CSSInterpolation => ({\n borderRadius: theme.radii[radius],\n});\n\nexport const getSizeStyles = (size: HvButtonSize): CSSInterpolation => ({\n height: theme.sizes[size],\n paddingLeft: theme.space[size],\n paddingRight: theme.space[size],\n fontSize: theme.fontSizes[size],\n});\n\nexport const getOverrideColors = (): CSSInterpolation => ({\n \"& svg .color0\": {\n fill: \"currentcolor\",\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","alignItems","justifyContent","textTransform","cursor","minWidth","whiteSpace","outlineStyles","fontFamily","theme","body","fontSize","fontSizes","base","fontWeight","fontWeights","semibold","lineHeight","letterSpacing","height","borderRadius","~~button~~","padding","startIcon","marginLeft","space","xs","endIcon","marginRight","focusVisible","disabled","color","colors","secondary_60","borderColor","atmo4","backgroundColor","atmo3","pointerEvents","icon","margin","~~getVariantStyles","variant","variantStyles","~~primary","atmo1","primary_80","primarySubtle","border","~~hoverColor~~","primaryGhost","secondarySubtle","secondary","~~secondaryBackgroundColor","secondarySubtleBorderColor","~~secondaryGhost","semantic","base_dark","~~semanticColor","semanticColorDisabled","undefined","~~ghost","getRadiusStyles","radius","~~radii","~~getSizeStyles","size","sizes","paddingLeft","paddingRight","getOverrideColors","fill"],"mappings":";;;AASa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,YAAY;AAAA,EACrEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,gBAAgB;AAAA,IAChBC,eAAe;AAAA,IACfC,QAAQ;AAAA,IACRC,UAAU;AAAA,IAEVC,YAAY;AAAA,IAEZ,WAAW,CAAC;AAAA,IACZ,WAAW,CAAC;AAAA,IACZ,mBAAmB;AAAA,MAAE,GAAGC;AAAAA,IAAc;AAAA,IACtC,YAAY,CAAC;AAAA;AAAA,IAGbC,YAAYC,MAAMD,WAAWE;AAAAA,IAC7BC,UAAUF,MAAMG,UAAUC;AAAAA,IAC1BC,YAAYL,MAAMM,YAAYC;AAAAA,IAC9BC,YAAY;AAAA,IACZC,eAAe;AAAA,IACfC,QAAQ;AAAA,IACRC,cAAcX,MAAMY,~~OAAOD~~;AAAAA,~~IAC3BE~~,SAASb,~~MAAMY~~,~~OAAOC~~;~~AAAAA~~,~~EACxB~~;AAAA,EACAC,WAAW;AAAA,IACTC,YAAa,~~aAAYf~~,~~MAAMgB~~,MAAMC,EAAG;AAAA,EAC1C;AAAA,EACAC,SAAS;AAAA,IACPC,aAAc,~~aAAYnB~~,~~MAAMgB~~,MAAMC,EAAG;AAAA,EAC3C;AAAA,EACAG,cAAc,CAAC;AAAA,EAEfC,UAAU;AAAA,IACRC,~~OAAOtB~~,~~MAAMuB~~,OAAOC;AAAAA,IACpBC,~~aAAazB~~,~~MAAMuB~~,OAAOG;AAAAA,IAC1BC,~~iBAAiB3B~~,~~MAAMuB~~,OAAOK;AAAAA,~~IAC9BjC~~,QAAQ;AAAA,~~IACRkC~~,eAAe;AAAA,EACjB;AAAA,EAEAC,MAAM;AAAA,IACJC,QAAQ;AAAA,~~IACRlB~~,SAAS;AAAA,IACTH,QAAQ;AAAA,IACRd,UAAU;AAAA,EACZ;~~AACF,CAAC;AAEYoC,MAAAA,mBAAmBA,CAACC,YAA6B;AAC5D,QAAMC,gBAA2D;~~AAAA,~~IAC/DC~~,SAAS;AAAA,~~MACPb~~,~~OAAOtB~~,~~MAAMuB~~,~~OAAOa~~;AAAAA,~~MACpBT~~,~~iBAAiB3B~~,~~MAAMuB~~,~~OAAOY~~;AAAAA,~~MAC9B~~,4BAA4B;AAAA,~~QAC1BR~~,~~iBAAiB3B~~,~~MAAMuB~~,~~OAAOc~~;AAAAA,~~MAChC~~;AAAA,~~IACF~~;AAAA,~~IACAC~~,eAAe;AAAA,~~MACbhB~~,~~OAAOtB~~,~~MAAMuB~~,~~OAAOY~~;AAAAA,~~MACpBR~~,iBAAiB;AAAA,~~MACjBY~~,QAAS,~~aAAYvC~~,~~MAAMuB~~,~~OAAOY~~,OAAQ;AAAA,~~MAC1C~~,4BAA4B;AAAA,~~QAC1BR~~,~~iBAAiB3B~~,~~MAAMY~~,~~OAAO4B~~;AAAAA,~~MAChC~~;AAAA,~~IACF~~;AAAA,~~IACAC~~,cAAc;AAAA,~~MACZnB~~,~~OAAOtB~~,~~MAAMuB~~,~~OAAOY~~;AAAAA,~~MACpBR~~,iBAAiB;AAAA,~~MACjB~~,4BAA4B;AAAA,~~QAC1BA~~,~~iBAAiB3B~~,~~MAAMY~~,~~OAAO4B~~;AAAAA,~~MAChC~~;AAAA,~~MACA~~,cAAc;AAAA,~~QACZb~~,iBAAiB;AAAA,~~MACnB~~;AAAA,~~IACF~~;AAAA,~~IACAe~~,iBAAiB;AAAA,~~MACfpB~~,~~OAAOtB~~,~~MAAMuB~~,~~OAAOoB~~;AAAAA,~~MACpBhB~~,~~iBAAiB3B,MAAMY,OAAOgC~~;~~AAAAA~~,~~MAC9BL~~,QAAS,~~aAAYvC~~,~~MAAMY~~,~~OAAOiC~~,~~0BAA2B~~;AAAA,~~MAC7D~~,4BAA4B;AAAA,~~QAC1BlB~~,~~iBAAiB3B~~,~~MAAMY~~,~~OAAO4B~~;AAAAA,~~MAChC~~;AAAA,~~IACF~~;AAAA,~~IACAM~~,gBAAgB;AAAA,~~MACdxB~~,~~OAAOtB~~,~~MAAMuB~~,~~OAAOoB~~;AAAAA,~~MACpBhB~~,iBAAiB;AAAA,~~MACjB~~,4BAA4B;AAAA,~~QAC1BA~~,~~iBAAiB3B~~,~~MAAMY~~,~~OAAO4B~~;AAAAA,~~MAChC~~;AAAA,~~MACA~~,cAAc;AAAA,~~QACZb~~,iBAAiB;AAAA,~~MACnB~~;AAAA,~~IACF~~;AAAA,~~IACAoB~~,UAAU;AAAA,~~MACRzB~~,~~OAAOtB~~,~~MAAMuB~~,~~OAAOyB~~;AAAAA,~~MACpBrB~~,iBAAiB;AAAA,~~MACjB~~,4BAA4B;AAAA,~~QAC1BA~~,~~iBAAiB3B,MAAMY,OAAOqC~~;~~AAAAA~~,~~MAChC~~;AAAA,~~MACA~~,cAAc;AAAA,~~QACZtB~~,~~iBAAiB3B,MAAMY,OAAOsC~~;~~AAAAA~~,~~MAChC~~;AAAA,~~IACF~~;AAAA,~~IACAP~~,~~WAAWQ~~;~~AAAAA~~,~~IACXC~~,~~OAAOD;AAAAA~~,~~EAAAA~~;~~AAGT~~,~~SAAOjB,cAAcD,OAAO~~;~~AAC9B;AAEaoB~~,MAAAA,kBAAkBA,CAACC,YAA8C;AAAA,~~EAC5E3C~~,cAAcX,~~MAAMuD~~,~~MAAMD~~,MAAM;AAClC;~~AAEaE~~,MAAAA,gBAAgBA,CAACC,UAA0C;AAAA,~~EACtE/C~~,QAAQV,~~MAAM0D~~,MAAMD,IAAI;AAAA,EACxBE,~~aAAa3D~~,~~MAAMgB~~,~~MAAMyC~~,IAAI;AAAA,EAC7BG,~~cAAc5D~~,~~MAAMgB~~,~~MAAMyC~~,IAAI;AAAA,~~EAC9BvD~~,UAAUF,MAAMG,~~UAAUsD~~,IAAI;AAChC;AAEO,MAAMI,oBAAoBA,OAAyB;AAAA,EACxD,iBAAiB;AAAA,IACfC,MAAM;AAAA,EACR;AACF;"}
1	+ {"version":3,"file":"Button.styles.js","sources":["../../../../src/components/Button/Button.styles.ts"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nimport { HvButtonRadius, HvButtonSize } from \"./types\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvButton\", {\n root: {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n textTransform: \"none\",\n cursor: \"pointer\",\n minWidth: \"70px\",\n\n whiteSpace: \"nowrap\",\n\n \"&:hover\": {},\n \"&:focus\": {},\n \"&:focus-visible\": { ...outlineStyles },\n \"&:active\": {},\n\n // default button - no size specified\n fontFamily: theme.fontFamily.body,\n fontSize: theme.fontSizes.base,\n fontWeight: theme.fontWeights.semibold,\n lineHeight: \"11px\",\n letterSpacing: 0,\n height: \"32px\",\n borderRadius: theme.radii.base,\n padding: theme.spacing(\"xs\", \"sm\"),\n },\n startIcon: {\n marginLeft: `calc(-1 * ${theme.space.xs})`,\n },\n endIcon: {\n marginRight: `calc(-1 * ${theme.space.xs})`,\n },\n focusVisible: {},\n\n disabled: {\n color: theme.colors.secondary_60,\n borderColor: theme.colors.atmo4,\n backgroundColor: theme.colors.atmo3,\n cursor: \"not-allowed\",\n pointerEvents: \"none\",\n },\n\n icon: {\n margin: 0,\n padding: 0,\n height: \"fit-content\",\n minWidth: \"unset\",\n },\n\n primary: {\n color: theme.colors.atmo1,\n backgroundColor: theme.colors.primary,\n \"&:hover, &:focus-visible\": {\n backgroundColor: theme.colors.primary_80,\n },\n },\n primarySubtle: {\n color: theme.colors.primary,\n backgroundColor: \"transparent\",\n border: `1px solid ${theme.colors.primary}`,\n \"&:hover, &:focus-visible\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n },\n primaryGhost: {\n color: theme.colors.primary,\n backgroundColor: \"transparent\",\n \"&:hover, &:focus-visible\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n \"&:disabled\": {\n backgroundColor: \"transparent\",\n },\n },\n secondarySubtle: {\n color: theme.colors.secondary,\n backgroundColor: \"transparent\",\n border: `1px solid ${theme.colors.secondary}`,\n \"&:hover, &:focus-visible\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n },\n secondaryGhost: {\n color: theme.colors.secondary,\n backgroundColor: \"transparent\",\n \"&:hover, &:focus-visible\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n \"&:disabled\": {\n backgroundColor: \"transparent\",\n },\n },\n semantic: {\n color: theme.colors.base_dark,\n backgroundColor: \"transparent\",\n \"&:hover, &:focus-visible\": {\n backgroundColor: \"rgba(251, 252, 252, 0.3)\",\n },\n \"&:disabled\": {\n backgroundColor: \"rgba(251, 252, 252, 0.1)\",\n },\n },\n secondary: {},\n ghost: {},\n});\n\nexport const getRadiusStyles = (radius: HvButtonRadius): CSSInterpolation => ({\n borderRadius: theme.radii[radius],\n});\n\nexport const getSizeStyles = (size: HvButtonSize): CSSInterpolation => ({\n height: theme.sizes[size],\n paddingLeft: theme.space[size],\n paddingRight: theme.space[size],\n fontSize: theme.fontSizes[size],\n});\n\nexport const getOverrideColors = (): CSSInterpolation => ({\n \"& svg .color0\": {\n fill: \"currentcolor\",\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","alignItems","justifyContent","textTransform","cursor","minWidth","whiteSpace","outlineStyles","fontFamily","theme","body","fontSize","fontSizes","base","fontWeight","fontWeights","semibold","lineHeight","letterSpacing","height","borderRadius","radii","padding","spacing","startIcon","marginLeft","space","xs","endIcon","marginRight","focusVisible","disabled","color","colors","secondary_60","borderColor","atmo4","backgroundColor","atmo3","pointerEvents","icon","margin","primary","atmo1","primary_80","primarySubtle","border","containerBackgroundHover","primaryGhost","secondarySubtle","secondary","secondaryGhost","semantic","base_dark","ghost","getRadiusStyles","radius","getSizeStyles","size","sizes","paddingLeft","paddingRight","getOverrideColors","fill"],"mappings":"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"}