@hitachivantara/uikit-react-core 5.27.0 → 5.27.2

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

@@ -15,7 +15,7 @@ const {
     // padding: `${theme.spacing(2) - 4}px 0 ${theme.spacing(2) - 4}px ${
     //   theme.spacing(2) - 4
     // }px`,
-    padding: `${uikitStyles.theme.space.sm} 0 ${uikitStyles.theme.space.sm} ${uikitStyles.theme.space.sm}`
+    padding: uikitStyles.theme.spacing("sm", 0, "sm", "sm")
   },
   item: {},
   itemSelected: {},

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

@@ -1 +1 @@
-{"version":3,"file":"AppSwitcher.styles.cjs","sources":["../../../../src/components/AppSwitcher/AppSwitcher.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAppSwitcher\", {\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    backgroundColor: theme.colors.atmo1,\n    overflow: \"hidden\",\n\n    // we need to play with the 4px because of the focus ring\n    // padding: `${theme.spacing(2) - 4}px 0 ${theme.spacing(2) - 4}px ${\n    //   theme.spacing(2) - 4\n    // }px`,\n    padding: `${theme.space.sm} 0 ${theme.space.sm} ${theme.space.sm}`,\n  },\n  item: {},\n  itemSelected: {},\n  itemDisabled: {},\n  itemTrigger: {},\n  itemIcon: {},\n  itemTitle: {},\n  itemInfoIcon: {},\n  actionsContainer: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    justifyContent: \"flex-start\",\n\n    overflowY: \"auto\",\n\n    // We need to play with the 4px because of the focus ring\n    padding: \"4px 0 4px 4px\",\n  },\n  footerContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    marginTop: \"auto\",\n    height: 52,\n\n    // We need to play with the 4px because of the focus ring\n    // padding: `${theme.hv.spacing.sm - 4}px ${theme.hv.spacing.sm + 4}px 4px 4px`,\n    padding: `${theme.space.sm} ${theme.space.sm} 4px 4px`,\n  },\n  open: {\n    zIndex: \"1200\",\n    position: \"absolute\",\n    top: \"50px\",\n    overflowX: \"hidden\",\n    boxShadow: theme.colors.shadow,\n  },\n  closed: { display: \"none\" },\n  title: {\n    minHeight: 36,\n\n    // we need to play with the 4px because of the focus ring\n    // padding: `4px ${theme.hv.spacing.sm}px ${theme.hv.spacing.sm - 4}px 4px`,\n    padding: `4px ${theme.space.sm} ${theme.space.sm} 4px`,\n\n    overflow: \"hidden\",\n    whiteSpace: \"nowrap\",\n    textOverflow: \"ellipsis\",\n  },\n  single: { width: 320 },\n  dual: { width: 640 },\n  fluid: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","flexDirection","backgroundColor","theme","colors","atmo1","overflow","padding","space","sm","item","itemSelected","itemDisabled","itemTrigger","itemIcon","itemTitle","itemInfoIcon","actionsContainer","flexWrap","justifyContent","overflowY","footerContainer","alignItems","marginTop","height","open","zIndex","position","top","overflowX","boxShadow","shadow","closed","title","minHeight","whiteSpace","textOverflow","single","width","dual","fluid"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,iBAAiB;AAAA,EAC1EC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,iBAAiBC,YAAAA,MAAMC,OAAOC;AAAAA,IAC9BC,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,IAMVC,SAAU,GAAEJ,YAAAA,MAAMK,MAAMC,QAAQN,YAAAA,MAAMK,MAAMC,MAAMN,YAAAA,MAAMK,MAAMC;AAAAA,EAChE;AAAA,EACAC,MAAM,CAAC;AAAA,EACPC,cAAc,CAAC;AAAA,EACfC,cAAc,CAAC;AAAA,EACfC,aAAa,CAAC;AAAA,EACdC,UAAU,CAAC;AAAA,EACXC,WAAW,CAAC;AAAA,EACZC,cAAc,CAAC;AAAA,EACfC,kBAAkB;AAAA,IAChBjB,SAAS;AAAA,IACTkB,UAAU;AAAA,IACVC,gBAAgB;AAAA,IAEhBC,WAAW;AAAA;AAAA,IAGXb,SAAS;AAAA,EACX;AAAA,EACAc,iBAAiB;AAAA,IACfrB,SAAS;AAAA,IACTsB,YAAY;AAAA,IACZC,WAAW;AAAA,IACXC,QAAQ;AAAA;AAAA;AAAA,IAIRjB,SAAU,GAAEJ,YAAAA,MAAMK,MAAMC,MAAMN,kBAAMK,MAAMC;AAAAA,EAC5C;AAAA,EACAgB,MAAM;AAAA,IACJC,QAAQ;AAAA,IACRC,UAAU;AAAA,IACVC,KAAK;AAAA,IACLC,WAAW;AAAA,IACXC,WAAW3B,YAAAA,MAAMC,OAAO2B;AAAAA,EAC1B;AAAA,EACAC,QAAQ;AAAA,IAAEhC,SAAS;AAAA,EAAO;AAAA,EAC1BiC,OAAO;AAAA,IACLC,WAAW;AAAA;AAAA;AAAA,IAIX3B,SAAU,OAAMJ,YAAAA,MAAMK,MAAMC,MAAMN,kBAAMK,MAAMC;AAAAA,IAE9CH,UAAU;AAAA,IACV6B,YAAY;AAAA,IACZC,cAAc;AAAA,EAChB;AAAA,EACAC,QAAQ;AAAA,IAAEC,OAAO;AAAA,EAAI;AAAA,EACrBC,MAAM;AAAA,IAAED,OAAO;AAAA,EAAI;AAAA,EACnBE,OAAO,CAAC;AACV,CAAC;;;"}
+{"version":3,"file":"AppSwitcher.styles.cjs","sources":["../../../../src/components/AppSwitcher/AppSwitcher.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAppSwitcher\", {\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    backgroundColor: theme.colors.atmo1,\n    overflow: \"hidden\",\n\n    // we need to play with the 4px because of the focus ring\n    // padding: `${theme.spacing(2) - 4}px 0 ${theme.spacing(2) - 4}px ${\n    //   theme.spacing(2) - 4\n    // }px`,\n    padding: theme.spacing(\"sm\", 0, \"sm\", \"sm\"),\n  },\n  item: {},\n  itemSelected: {},\n  itemDisabled: {},\n  itemTrigger: {},\n  itemIcon: {},\n  itemTitle: {},\n  itemInfoIcon: {},\n  actionsContainer: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    justifyContent: \"flex-start\",\n\n    overflowY: \"auto\",\n\n    // We need to play with the 4px because of the focus ring\n    padding: \"4px 0 4px 4px\",\n  },\n  footerContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    marginTop: \"auto\",\n    height: 52,\n\n    // We need to play with the 4px because of the focus ring\n    // padding: `${theme.hv.spacing.sm - 4}px ${theme.hv.spacing.sm + 4}px 4px 4px`,\n    padding: `${theme.space.sm} ${theme.space.sm} 4px 4px`,\n  },\n  open: {\n    zIndex: \"1200\",\n    position: \"absolute\",\n    top: \"50px\",\n    overflowX: \"hidden\",\n    boxShadow: theme.colors.shadow,\n  },\n  closed: { display: \"none\" },\n  title: {\n    minHeight: 36,\n\n    // we need to play with the 4px because of the focus ring\n    // padding: `4px ${theme.hv.spacing.sm}px ${theme.hv.spacing.sm - 4}px 4px`,\n    padding: `4px ${theme.space.sm} ${theme.space.sm} 4px`,\n\n    overflow: \"hidden\",\n    whiteSpace: \"nowrap\",\n    textOverflow: \"ellipsis\",\n  },\n  single: { width: 320 },\n  dual: { width: 640 },\n  fluid: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","flexDirection","backgroundColor","theme","colors","atmo1","overflow","padding","spacing","item","itemSelected","itemDisabled","itemTrigger","itemIcon","itemTitle","itemInfoIcon","actionsContainer","flexWrap","justifyContent","overflowY","footerContainer","alignItems","marginTop","height","space","sm","open","zIndex","position","top","overflowX","boxShadow","shadow","closed","title","minHeight","whiteSpace","textOverflow","single","width","dual","fluid"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,iBAAiB;AAAA,EAC1EC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,iBAAiBC,YAAAA,MAAMC,OAAOC;AAAAA,IAC9BC,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,IAMVC,SAASJ,YAAMK,MAAAA,QAAQ,MAAM,GAAG,MAAM,IAAI;AAAA,EAC5C;AAAA,EACAC,MAAM,CAAC;AAAA,EACPC,cAAc,CAAC;AAAA,EACfC,cAAc,CAAC;AAAA,EACfC,aAAa,CAAC;AAAA,EACdC,UAAU,CAAC;AAAA,EACXC,WAAW,CAAC;AAAA,EACZC,cAAc,CAAC;AAAA,EACfC,kBAAkB;AAAA,IAChBhB,SAAS;AAAA,IACTiB,UAAU;AAAA,IACVC,gBAAgB;AAAA,IAEhBC,WAAW;AAAA;AAAA,IAGXZ,SAAS;AAAA,EACX;AAAA,EACAa,iBAAiB;AAAA,IACfpB,SAAS;AAAA,IACTqB,YAAY;AAAA,IACZC,WAAW;AAAA,IACXC,QAAQ;AAAA;AAAA;AAAA,IAIRhB,SAAU,GAAEJ,YAAAA,MAAMqB,MAAMC,MAAMtB,kBAAMqB,MAAMC;AAAAA,EAC5C;AAAA,EACAC,MAAM;AAAA,IACJC,QAAQ;AAAA,IACRC,UAAU;AAAA,IACVC,KAAK;AAAA,IACLC,WAAW;AAAA,IACXC,WAAW5B,YAAAA,MAAMC,OAAO4B;AAAAA,EAC1B;AAAA,EACAC,QAAQ;AAAA,IAAEjC,SAAS;AAAA,EAAO;AAAA,EAC1BkC,OAAO;AAAA,IACLC,WAAW;AAAA;AAAA;AAAA,IAIX5B,SAAU,OAAMJ,YAAAA,MAAMqB,MAAMC,MAAMtB,kBAAMqB,MAAMC;AAAAA,IAE9CnB,UAAU;AAAA,IACV8B,YAAY;AAAA,IACZC,cAAc;AAAA,EAChB;AAAA,EACAC,QAAQ;AAAA,IAAEC,OAAO;AAAA,EAAI;AAAA,EACrBC,MAAM;AAAA,IAAED,OAAO;AAAA,EAAI;AAAA,EACnBE,OAAO,CAAC;AACV,CAAC;;;"}

package/dist/cjs/components/Banner/BannerContent/BannerContent.styles.cjs

@@ -17,7 +17,7 @@ const {
   message: {
     display: "flex",
     alignItems: "center",
-    padding: uikitStyles.theme.spacing(["xs", 0]),
+    padding: uikitStyles.theme.spacing("xs", 0),
     paddingLeft: uikitStyles.theme.space.sm
   },
   action: {

package/dist/cjs/components/Banner/BannerContent/BannerContent.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BannerContent.styles.cjs","sources":["../../../../../src/components/Banner/BannerContent/BannerContent.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvBannerContent\", {\n  root: {\n    minWidth: \"100%\",\n    position: \"relative\",\n    display: \"flex\",\n    flexWrap: \"nowrap\",\n    boxShadow: \"none\",\n    borderRadius: theme.radii.none,\n  },\n  message: {\n    display: \"flex\",\n    alignItems: \"center\",\n    padding: theme.spacing([\"xs\", 0]),\n    paddingLeft: theme.space.sm,\n  },\n  action: {\n    padding: theme.spacing(\"xs\"),\n    marginRight: 0,\n    flex: \"0 0 auto\",\n    placeSelf: \"stretch\",\n  },\n  baseVariant: {\n    padding: 0,\n  },\n  success: {\n    backgroundColor: theme.colors.positive_20,\n  },\n  warning: {\n    backgroundColor: theme.colors.warning_20,\n  },\n  error: {\n    backgroundColor: theme.colors.negative_20,\n  },\n  default: {\n    backgroundColor: theme.colors.neutral_20,\n  },\n  outContainer: {\n    width: \"100%\",\n    position: \"relative\",\n  },\n});\n"],"names":["useClasses","staticClasses","createClasses","root","minWidth","position","display","flexWrap","boxShadow","borderRadius","theme","radii","none","message","alignItems","padding","spacing","paddingLeft","space","sm","action","marginRight","flex","placeSelf","baseVariant","success","backgroundColor","colors","positive_20","warning","warning_20","error","negative_20","default","neutral_20","outContainer","width"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,QAAAA,cAAc,mBAAmB;AAAA,EAC5EC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,WAAW;AAAA,IACXC,cAAcC,YAAAA,MAAMC,MAAMC;AAAAA,EAC5B;AAAA,EACAC,SAAS;AAAA,IACPP,SAAS;AAAA,IACTQ,YAAY;AAAA,IACZC,SAASL,YAAAA,MAAMM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,IAChCC,aAAaP,YAAAA,MAAMQ,MAAMC;AAAAA,EAC3B;AAAA,EACAC,QAAQ;AAAA,IACNL,SAASL,YAAAA,MAAMM,QAAQ,IAAI;AAAA,IAC3BK,aAAa;AAAA,IACbC,MAAM;AAAA,IACNC,WAAW;AAAA,EACb;AAAA,EACAC,aAAa;AAAA,IACXT,SAAS;AAAA,EACX;AAAA,EACAU,SAAS;AAAA,IACPC,iBAAiBhB,YAAAA,MAAMiB,OAAOC;AAAAA,EAChC;AAAA,EACAC,SAAS;AAAA,IACPH,iBAAiBhB,YAAAA,MAAMiB,OAAOG;AAAAA,EAChC;AAAA,EACAC,OAAO;AAAA,IACLL,iBAAiBhB,YAAAA,MAAMiB,OAAOK;AAAAA,EAChC;AAAA,EACAC,SAAS;AAAA,IACPP,iBAAiBhB,YAAAA,MAAMiB,OAAOO;AAAAA,EAChC;AAAA,EACAC,cAAc;AAAA,IACZC,OAAO;AAAA,IACP/B,UAAU;AAAA,EACZ;AACF,CAAC;;;"}
+{"version":3,"file":"BannerContent.styles.cjs","sources":["../../../../../src/components/Banner/BannerContent/BannerContent.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvBannerContent\", {\n  root: {\n    minWidth: \"100%\",\n    position: \"relative\",\n    display: \"flex\",\n    flexWrap: \"nowrap\",\n    boxShadow: \"none\",\n    borderRadius: theme.radii.none,\n  },\n  message: {\n    display: \"flex\",\n    alignItems: \"center\",\n    padding: theme.spacing(\"xs\", 0),\n    paddingLeft: theme.space.sm,\n  },\n  action: {\n    padding: theme.spacing(\"xs\"),\n    marginRight: 0,\n    flex: \"0 0 auto\",\n    placeSelf: \"stretch\",\n  },\n  baseVariant: {\n    padding: 0,\n  },\n  success: {\n    backgroundColor: theme.colors.positive_20,\n  },\n  warning: {\n    backgroundColor: theme.colors.warning_20,\n  },\n  error: {\n    backgroundColor: theme.colors.negative_20,\n  },\n  default: {\n    backgroundColor: theme.colors.neutral_20,\n  },\n  outContainer: {\n    width: \"100%\",\n    position: \"relative\",\n  },\n});\n"],"names":["useClasses","staticClasses","createClasses","root","minWidth","position","display","flexWrap","boxShadow","borderRadius","theme","radii","none","message","alignItems","padding","spacing","paddingLeft","space","sm","action","marginRight","flex","placeSelf","baseVariant","success","backgroundColor","colors","positive_20","warning","warning_20","error","negative_20","default","neutral_20","outContainer","width"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,QAAAA,cAAc,mBAAmB;AAAA,EAC5EC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,WAAW;AAAA,IACXC,cAAcC,YAAAA,MAAMC,MAAMC;AAAAA,EAC5B;AAAA,EACAC,SAAS;AAAA,IACPP,SAAS;AAAA,IACTQ,YAAY;AAAA,IACZC,SAASL,YAAAA,MAAMM,QAAQ,MAAM,CAAC;AAAA,IAC9BC,aAAaP,YAAAA,MAAMQ,MAAMC;AAAAA,EAC3B;AAAA,EACAC,QAAQ;AAAA,IACNL,SAASL,YAAAA,MAAMM,QAAQ,IAAI;AAAA,IAC3BK,aAAa;AAAA,IACbC,MAAM;AAAA,IACNC,WAAW;AAAA,EACb;AAAA,EACAC,aAAa;AAAA,IACXT,SAAS;AAAA,EACX;AAAA,EACAU,SAAS;AAAA,IACPC,iBAAiBhB,YAAAA,MAAMiB,OAAOC;AAAAA,EAChC;AAAA,EACAC,SAAS;AAAA,IACPH,iBAAiBhB,YAAAA,MAAMiB,OAAOG;AAAAA,EAChC;AAAA,EACAC,OAAO;AAAA,IACLL,iBAAiBhB,YAAAA,MAAMiB,OAAOK;AAAAA,EAChC;AAAA,EACAC,SAAS;AAAA,IACPP,iBAAiBhB,YAAAA,MAAMiB,OAAOO;AAAAA,EAChC;AAAA,EACAC,cAAc;AAAA,IACZC,OAAO;AAAA,IACP/B,UAAU;AAAA,EACZ;AACF,CAAC;;;"}

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

@@ -25,6 +25,10 @@ const {
     "&:hover $inputBorderContainer": {
       backgroundColor: uikitStyles.theme.colors.atmo4
     },
+    "&& $input": {
+      color: uikitStyles.theme.baseInput.disabledTextColor,
+      WebkitTextFillColor: uikitStyles.theme.baseInput.disabledTextColor
+    },
     "& $inputRootMultiline": {
       "& $input": {
         backgroundColor: uikitStyles.theme.baseInput.disabledBackgroundColor,
@@ -194,9 +198,7 @@ const {
       display: "none"
     }
   },
-  inputDisabled: {
-    color: uikitStyles.theme.baseInput.disabledTextColor
-  },
+  inputDisabled: {},
   inputReadOnly: {
     color: uikitStyles.theme.baseInput.readOnlyTextColor
   },

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

@@ -1 +1 @@
-{"version":3,"file":"BaseInput.styles.cjs","sources":["../../../../src/components/BaseInput/BaseInput.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseInput\", {\n  root: {\n    display: \"inline-block\",\n    width: \"100%\",\n    position: \"relative\",\n\n    \"&:hover $inputBorderContainer\": {\n      backgroundColor: theme.baseInput.hoverColor,\n    },\n\n    \"&:focus-within $inputBorderContainer\": {\n      backgroundColor: theme.baseInput.hoverColor,\n    },\n  },\n  disabled: {\n    \"& $inputBorderContainer\": {\n      backgroundColor: theme.colors.atmo4,\n    },\n\n    \"&:hover $inputBorderContainer\": {\n      backgroundColor: theme.colors.atmo4,\n    },\n\n    \"& $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    color: theme.baseInput.disabledTextColor,\n  },\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","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","color","placeholderColor","inputDisabled","disabledTextColor","inputReadOnly","readOnlyTextColor","inputResizable","resize"],"mappings":"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"}
+{"version":3,"file":"BaseInput.styles.cjs","sources":["../../../../src/components/BaseInput/BaseInput.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseInput\", {\n  root: {\n    display: \"inline-block\",\n    width: \"100%\",\n    position: \"relative\",\n\n    \"&:hover $inputBorderContainer\": {\n      backgroundColor: theme.baseInput.hoverColor,\n    },\n\n    \"&:focus-within $inputBorderContainer\": {\n      backgroundColor: theme.baseInput.hoverColor,\n    },\n  },\n  disabled: {\n    \"& $inputBorderContainer\": {\n      backgroundColor: theme.colors.atmo4,\n    },\n\n    \"&:hover $inputBorderContainer\": {\n      backgroundColor: theme.colors.atmo4,\n    },\n\n    \"&& $input\": {\n      color: theme.baseInput.disabledTextColor,\n      WebkitTextFillColor: theme.baseInput.disabledTextColor,\n    },\n\n    \"& $inputRootMultiline\": {\n      \"& $input\": {\n        backgroundColor: theme.baseInput.disabledBackgroundColor,\n        border: `1px solid ${theme.baseInput.multilineDisabledBorderColor}`,\n      },\n    },\n\n    \"&:hover $inputRootMultiline\": {\n      \"& $input\": {\n        backgroundColor: theme.baseInput.disabledBackgroundColor,\n        border: `1px solid ${theme.baseInput.multilineDisabledBorderColor}`,\n      },\n    },\n  },\n  invalid: {\n    \"&:not(.disabled)\": {\n      \"& $inputBorderContainer\": {\n        backgroundColor: theme.colors.negative,\n      },\n\n      \"&:hover $inputBorderContainer\": {\n        backgroundColor: theme.colors.negative,\n      },\n\n      \"& $inputRootMultiline\": {\n        \"& $input\": {\n          border: `1px solid ${theme.colors.negative}`,\n        },\n      },\n\n      \"&:hover $inputRootMultiline\": {\n        \"& $input\": {\n          border: `1px solid ${theme.colors.negative}`,\n        },\n      },\n\n      \"&:focus-within $inputRootMultiline\": {\n        \"& $input\": {\n          border: `1px solid ${theme.colors.negative}`,\n        },\n      },\n    },\n  },\n  resizable: { width: \"auto\" },\n  readOnly: {\n    \"& $inputBorderContainer\": {\n      backgroundColor: \"transparent\",\n    },\n\n    \"&:hover $inputBorderContainer\": {\n      backgroundColor: \"transparent\",\n    },\n\n    \"&:focus-within $inputBorderContainer\": {\n      backgroundColor: \"transparent\",\n    },\n\n    \"& $inputRootMultiline\": {\n      \"& $input\": {\n        border: `1px solid ${theme.baseInput.readOnlyBorderColor}`,\n        backgroundColor: theme.baseInput.readOnlyBackgroundColor,\n      },\n    },\n\n    \"&:hover $inputRootMultiline\": {\n      \"& $input\": {\n        border: `1px solid ${theme.baseInput.readOnlyBorderColor}`,\n        backgroundColor: theme.baseInput.readOnlyBackgroundColor,\n      },\n    },\n\n    \"&:focus-within $inputRootMultiline\": {\n      \"& $input\": {\n        border: `1px solid ${theme.baseInput.readOnlyBorderColor}`,\n        backgroundColor: theme.baseInput.readOnlyBackgroundColor,\n      },\n    },\n  },\n  inputBorderContainer: {\n    position: \"absolute\",\n    width: \"calc(100% - 4px)\",\n    height: theme.baseInput.underlineHeight,\n    top: \"31px\",\n    left: \"2px\",\n    backgroundColor: theme.colors.atmo4,\n  },\n  inputRootInvalid: { borderColor: theme.colors.negative },\n  inputRootReadOnly: {\n    borderColor: theme.baseInput.readOnlyBorderColor,\n    backgroundColor: theme.baseInput.readOnlyBackgroundColor,\n  },\n  inputRoot: {\n    margin: 0,\n    width: \"100%\",\n    borderRadius: theme.radii.base,\n    height: \"32px\",\n    border: `1px solid ${theme.baseInput.borderColor}`,\n    boxSizing: \"border-box\",\n    backgroundColor: theme.colors.atmo1,\n    fontFamily: theme.fontFamily.body,\n\n    \"&:hover:not($inputRootDisabled):not($inputRootInvalid):not($inputRootReadOnly)\":\n      {\n        borderColor: theme.baseInput.hoverColor,\n      },\n\n    \"&:hover:not($inputRootDisabled)::before\": {\n      borderBottom: \"none\",\n    },\n\n    \"&::before\": {\n      borderBottom: \"none\",\n    },\n\n    \"&::after\": {\n      borderBottom: \"none\",\n    },\n  },\n  inputRootFocused: {\n    background: theme.colors.atmo1,\n    ...outlineStyles,\n\n    \"&:hover\": {\n      background: theme.colors.atmo1,\n    },\n\n    \"& $inputRootReadOnly\": {\n      backgroundColor: theme.baseInput.readOnlyBackgroundColor,\n    },\n  },\n  inputRootDisabled: {\n    background: theme.baseInput.disabledBackgroundColor,\n    borderColor: theme.baseInput.disabledBorderColor,\n    cursor: \"not-allowed\",\n\n    \"&:hover\": {\n      background: theme.baseInput.disabledBackgroundColor,\n      cursor: \"not-allowed\",\n    },\n\n    \"&&::before\": {\n      borderBottomStyle: \"none\",\n    },\n  },\n  inputRootMultiline: {\n    padding: 0,\n    backgroundColor: \"transparent\",\n    overflow: \"auto\",\n    border: \"none\",\n    height: \"auto\",\n\n    \"& $input\": {\n      border: `1px solid ${theme.baseInput.multilineBorderColor}`,\n      borderRadius: theme.radii.base,\n      backgroundColor: theme.colors.atmo1,\n      height: \"auto\",\n      minHeight: \"21px\",\n      padding: \"5px 10px\",\n      overflow: \"auto\",\n      marginLeft: \"0px\",\n      marginRight: \"0px\",\n\n      \"&:hover\": {\n        border: `1px solid ${theme.baseInput.hoverColor}`,\n      },\n    },\n  },\n  input: {\n    height: \"19px\",\n    marginLeft: theme.space.xs,\n    marginRight: theme.space.xs,\n    padding: \"6px 0 5px\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    outline: \"none\",\n    width: \"initial\",\n    flexGrow: 1,\n    ...(theme.typography.body as CSSProperties),\n\n    \"&::placeholder\": {\n      opacity: 1,\n      color: theme.baseInput.placeholderColor,\n    },\n\n    \"&::-ms-clear\": {\n      display: \"none\",\n    },\n  },\n  inputDisabled: {},\n  inputReadOnly: {\n    color: theme.baseInput.readOnlyTextColor,\n  },\n  inputResizable: { resize: \"both\", width: \"100%\" },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","width","position","backgroundColor","theme","baseInput","hoverColor","disabled","colors","atmo4","color","disabledTextColor","WebkitTextFillColor","disabledBackgroundColor","border","multilineDisabledBorderColor","invalid","negative","resizable","readOnly","readOnlyBorderColor","readOnlyBackgroundColor","inputBorderContainer","height","underlineHeight","top","left","inputRootInvalid","borderColor","inputRootReadOnly","inputRoot","margin","borderRadius","radii","base","boxSizing","atmo1","fontFamily","body","borderBottom","inputRootFocused","background","outlineStyles","inputRootDisabled","disabledBorderColor","cursor","borderBottomStyle","inputRootMultiline","padding","overflow","multilineBorderColor","minHeight","marginLeft","marginRight","input","space","xs","textOverflow","outline","flexGrow","typography","opacity","placeholderColor","inputDisabled","inputReadOnly","readOnlyTextColor","inputResizable","resize"],"mappings":"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"}

package/dist/cjs/components/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.styles.cjs

@@ -9,7 +9,7 @@ const {
   navigationContainer: {
     display: "flex",
     justifyContent: "space-between",
-    padding: uikitStyles.theme.spacing(["xs", 0])
+    padding: uikitStyles.theme.spacing("xs", 0)
   },
   navigationMonth: {
     minWidth: "160px"

package/dist/cjs/components/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComposedNavigation.styles.cjs","sources":["../../../../../../src/components/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvComposedNavigation\",\n  {\n    navigationContainer: {\n      display: \"flex\",\n      justifyContent: \"space-between\",\n      padding: theme.spacing([\"xs\", 0]),\n    },\n    navigationMonth: {\n      minWidth: \"160px\",\n    },\n  }\n);\n"],"names":["staticClasses","useClasses","createClasses","navigationContainer","display","justifyContent","padding","theme","spacing","navigationMonth","minWidth"],"mappings":";;;;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAC3C,wBACA;AAAA,EACEC,qBAAqB;AAAA,IACnBC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,SAASC,YAAAA,MAAMC,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,EAClC;AAAA,EACAC,iBAAiB;AAAA,IACfC,UAAU;AAAA,EACZ;AACF,CACF;;;"}
+{"version":3,"file":"ComposedNavigation.styles.cjs","sources":["../../../../../../src/components/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvComposedNavigation\",\n  {\n    navigationContainer: {\n      display: \"flex\",\n      justifyContent: \"space-between\",\n      padding: theme.spacing(\"xs\", 0),\n    },\n    navigationMonth: {\n      minWidth: \"160px\",\n    },\n  }\n);\n"],"names":["staticClasses","useClasses","createClasses","navigationContainer","display","justifyContent","padding","theme","spacing","navigationMonth","minWidth"],"mappings":";;;;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAC3C,wBACA;AAAA,EACEC,qBAAqB;AAAA,IACnBC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,SAASC,YAAAA,MAAMC,QAAQ,MAAM,CAAC;AAAA,EAChC;AAAA,EACAC,iBAAiB;AAAA,IACfC,UAAU;AAAA,EACZ;AACF,CACF;;;"}

package/dist/cjs/components/Carousel/Carousel.styles.cjs

@@ -39,7 +39,7 @@ const {
     inset: 0,
     zIndex: uikitStyles.theme.zIndices.modal,
     "&:not(._)": {
-      padding: uikitStyles.theme.spacing(["xs", "xl"])
+      padding: uikitStyles.theme.spacing("xs", "xl")
     }
   },
   title: {
@@ -92,14 +92,14 @@ const {
   counter: {
     color: uikitStyles.theme.colors.base_light,
     backgroundColor: uikitStyles.theme.colors.base_dark,
-    padding: uikitStyles.theme.spacing([0, "sm"])
+    padding: uikitStyles.theme.spacing(0, "sm")
   },
   slideControls: {
     position: "absolute",
     left: 0,
     right: 0,
     top: `calc(50% - (32px / 2))`,
-    padding: uikitStyles.theme.spacing([0, "sm"]),
+    padding: uikitStyles.theme.spacing(0, "sm"),
     display: "flex",
     flexDirection: "row",
     alignItems: "center",
@@ -146,7 +146,7 @@ const {
     overflowX: "auto",
     // "hidden",
     overflowY: "hidden",
-    padding: uikitStyles.theme.spacing(["xs", "2px", "2px"])
+    padding: uikitStyles.theme.spacing("xs", "2px", "2px")
   },
   thumbnail: {
     height: "unset",

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

@@ -1 +1 @@
-{"version":3,"file":"Carousel.styles.cjs","sources":["../../../../src/components/Carousel/Carousel.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCarousel\", {\n  /** Styles applied to the component root class. */\n  root: {\n    display: \"flex\",\n    alignItems: \"stretch\",\n    flexDirection: \"column\",\n    backgroundColor: theme.colors.atmo1,\n    margin: 0,\n    paddingTop: theme.spacing(2),\n    paddingBottom: theme.spacing(2),\n  },\n  xs: {\n    \"&:not(._)\": {\n      padding: 0,\n    },\n    // put dots on top of Slide\n    \"& $dots\": {\n      position: \"relative\",\n      top: \"-40px\",\n    },\n    \"& $actions\": {\n      top: 0,\n    },\n    \"& $controls\": {\n      display: theme.carousel.xsControlsDisplay,\n    },\n  },\n  fullscreen: {\n    width: \"100vw\",\n    height: \"100vh\",\n    position: \"fixed\",\n    inset: 0,\n    zIndex: theme.zIndices.modal,\n    \"&:not(._)\": {\n      padding: theme.spacing([\"xs\", \"xl\"]),\n    },\n  },\n  title: {\n    display: \"flex\",\n    justifyContent: \"flex-start\",\n    marginBottom: theme.space.xs,\n  },\n  actions: {\n    display: \"flex\",\n    justifyContent: \"flex-end\",\n    right: 0,\n\n    position: \"relative\",\n  },\n  closeButton: {},\n\n  mainContainer: {},\n\n  controls: {\n    display: \"flex\",\n    alignItems: \"center\",\n    position: \"relative\",\n    height: 32,\n    justifyContent: theme.carousel.controlsJustifyContent,\n    backgroundColor: theme.carousel.controlsBackgroundColor,\n    border: theme.carousel.controlsBorder,\n    gap: theme.space.xs,\n    \"&:has($dots)\": {\n      justifyContent: \"center\",\n    },\n  },\n  pageCounter: {},\n\n  main: {\n    padding: 0,\n    display: \"flex\",\n    flexDirection: \"column\",\n    position: \"relative\",\n    \"&:hover $slideControls\": {\n      opacity: 1,\n    },\n  },\n  mainXs: {},\n  mainFullscreen: {\n    maxHeight: \"80vh\",\n  },\n  counterContainer: {\n    position: \"absolute\",\n    top: theme.space.xs,\n    right: theme.space.md,\n    zIndex: 1,\n    display: theme.carousel.counterContainerDisplay,\n  },\n  counter: {\n    color: theme.colors.base_light,\n    backgroundColor: theme.colors.base_dark,\n    padding: theme.spacing([0, \"sm\"]),\n  },\n  slideControls: {\n    position: \"absolute\",\n    left: 0,\n    right: 0,\n    top: `calc(50% - (32px / 2))`,\n    padding: theme.spacing([0, \"sm\"]),\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    opacity: 0,\n    \"& button\": {\n      zIndex: 1,\n    },\n    \"&:focus-within\": {\n      opacity: 1,\n    },\n  },\n  slidesViewport: {\n    overflow: \"hidden\",\n  },\n  slidesContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    height: \"100%\",\n  },\n\n  dots: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: theme.space.xs,\n    height: theme.space.md,\n  },\n  dotsXs: {},\n  dot: {\n    width: 5,\n    height: 5,\n    margin: theme.space.xs,\n    borderRadius: \"50%\",\n    backgroundColor: theme.colors.atmo4,\n  },\n  dotSelected: {\n    width: 10,\n    height: 10,\n    backgroundColor: theme.colors.secondary_80,\n  },\n\n  panel: {\n    display: \"flex\",\n    width: \"100%\",\n    overflowX: \"auto\", // \"hidden\",\n    overflowY: \"hidden\",\n    padding: theme.spacing([\"xs\", \"2px\", \"2px\"]),\n  },\n  thumbnail: {\n    height: \"unset\",\n    padding: 0,\n    \"& img\": {\n      width: \"100%\",\n      height: \"100%\",\n      textAlign: \"center\",\n      aspectRatio: \"16/9\",\n      opacity: \"50%\",\n      borderRadius: theme.carousel.thumbnailBorderRadius,\n    },\n  },\n  thumbnailSelected: {\n    \"& img\": {\n      border: theme.carousel.thumbnailSelectedBorder,\n      opacity: \"100%\",\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","alignItems","flexDirection","backgroundColor","theme","colors","atmo1","margin","paddingTop","spacing","paddingBottom","xs","padding","position","top","carousel","xsControlsDisplay","fullscreen","width","height","inset","zIndex","zIndices","modal","title","justifyContent","marginBottom","space","actions","right","closeButton","mainContainer","controls","controlsJustifyContent","controlsBackgroundColor","border","controlsBorder","gap","pageCounter","main","opacity","mainXs","mainFullscreen","maxHeight","counterContainer","md","counterContainerDisplay","counter","color","base_light","base_dark","slideControls","left","slidesViewport","overflow","slidesContainer","dots","dotsXs","dot","borderRadius","atmo4","dotSelected","secondary_80","panel","overflowX","overflowY","thumbnail","textAlign","aspectRatio","thumbnailBorderRadius","thumbnailSelected","thumbnailSelectedBorder"],"mappings":"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"}
+{"version":3,"file":"Carousel.styles.cjs","sources":["../../../../src/components/Carousel/Carousel.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCarousel\", {\n  /** Styles applied to the component root class. */\n  root: {\n    display: \"flex\",\n    alignItems: \"stretch\",\n    flexDirection: \"column\",\n    backgroundColor: theme.colors.atmo1,\n    margin: 0,\n    paddingTop: theme.spacing(2),\n    paddingBottom: theme.spacing(2),\n  },\n  xs: {\n    \"&:not(._)\": {\n      padding: 0,\n    },\n    // put dots on top of Slide\n    \"& $dots\": {\n      position: \"relative\",\n      top: \"-40px\",\n    },\n    \"& $actions\": {\n      top: 0,\n    },\n    \"& $controls\": {\n      display: theme.carousel.xsControlsDisplay,\n    },\n  },\n  fullscreen: {\n    width: \"100vw\",\n    height: \"100vh\",\n    position: \"fixed\",\n    inset: 0,\n    zIndex: theme.zIndices.modal,\n    \"&:not(._)\": {\n      padding: theme.spacing(\"xs\", \"xl\"),\n    },\n  },\n  title: {\n    display: \"flex\",\n    justifyContent: \"flex-start\",\n    marginBottom: theme.space.xs,\n  },\n  actions: {\n    display: \"flex\",\n    justifyContent: \"flex-end\",\n    right: 0,\n\n    position: \"relative\",\n  },\n  closeButton: {},\n\n  mainContainer: {},\n\n  controls: {\n    display: \"flex\",\n    alignItems: \"center\",\n    position: \"relative\",\n    height: 32,\n    justifyContent: theme.carousel.controlsJustifyContent,\n    backgroundColor: theme.carousel.controlsBackgroundColor,\n    border: theme.carousel.controlsBorder,\n    gap: theme.space.xs,\n    \"&:has($dots)\": {\n      justifyContent: \"center\",\n    },\n  },\n  pageCounter: {},\n\n  main: {\n    padding: 0,\n    display: \"flex\",\n    flexDirection: \"column\",\n    position: \"relative\",\n    \"&:hover $slideControls\": {\n      opacity: 1,\n    },\n  },\n  mainXs: {},\n  mainFullscreen: {\n    maxHeight: \"80vh\",\n  },\n  counterContainer: {\n    position: \"absolute\",\n    top: theme.space.xs,\n    right: theme.space.md,\n    zIndex: 1,\n    display: theme.carousel.counterContainerDisplay,\n  },\n  counter: {\n    color: theme.colors.base_light,\n    backgroundColor: theme.colors.base_dark,\n    padding: theme.spacing(0, \"sm\"),\n  },\n  slideControls: {\n    position: \"absolute\",\n    left: 0,\n    right: 0,\n    top: `calc(50% - (32px / 2))`,\n    padding: theme.spacing(0, \"sm\"),\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    opacity: 0,\n    \"& button\": {\n      zIndex: 1,\n    },\n    \"&:focus-within\": {\n      opacity: 1,\n    },\n  },\n  slidesViewport: {\n    overflow: \"hidden\",\n  },\n  slidesContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    height: \"100%\",\n  },\n\n  dots: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: theme.space.xs,\n    height: theme.space.md,\n  },\n  dotsXs: {},\n  dot: {\n    width: 5,\n    height: 5,\n    margin: theme.space.xs,\n    borderRadius: \"50%\",\n    backgroundColor: theme.colors.atmo4,\n  },\n  dotSelected: {\n    width: 10,\n    height: 10,\n    backgroundColor: theme.colors.secondary_80,\n  },\n\n  panel: {\n    display: \"flex\",\n    width: \"100%\",\n    overflowX: \"auto\", // \"hidden\",\n    overflowY: \"hidden\",\n    padding: theme.spacing(\"xs\", \"2px\", \"2px\"),\n  },\n  thumbnail: {\n    height: \"unset\",\n    padding: 0,\n    \"& img\": {\n      width: \"100%\",\n      height: \"100%\",\n      textAlign: \"center\",\n      aspectRatio: \"16/9\",\n      opacity: \"50%\",\n      borderRadius: theme.carousel.thumbnailBorderRadius,\n    },\n  },\n  thumbnailSelected: {\n    \"& img\": {\n      border: theme.carousel.thumbnailSelectedBorder,\n      opacity: \"100%\",\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","alignItems","flexDirection","backgroundColor","theme","colors","atmo1","margin","paddingTop","spacing","paddingBottom","xs","padding","position","top","carousel","xsControlsDisplay","fullscreen","width","height","inset","zIndex","zIndices","modal","title","justifyContent","marginBottom","space","actions","right","closeButton","mainContainer","controls","controlsJustifyContent","controlsBackgroundColor","border","controlsBorder","gap","pageCounter","main","opacity","mainXs","mainFullscreen","maxHeight","counterContainer","md","counterContainerDisplay","counter","color","base_light","base_dark","slideControls","left","slidesViewport","overflow","slidesContainer","dots","dotsXs","dot","borderRadius","atmo4","dotSelected","secondary_80","panel","overflowX","overflowY","thumbnail","textAlign","aspectRatio","thumbnailBorderRadius","thumbnailSelected","thumbnailSelectedBorder"],"mappings":"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"}

package/dist/cjs/components/FileUploader/File/File.cjs

@@ -2,9 +2,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const setId = require("../../../utils/setId.cjs");
+const css = require("@emotion/css");
 const utils = require("../utils.cjs");
 const File_styles = require("./File.styles.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
+const ProgressBar = require("../../ProgressBar/ProgressBar.cjs");
 const Button = require("../../Button/Button.cjs");
 const Typography = require("../../Typography/Typography.cjs");
 const getStatusIcon = (classes, status) => {
@@ -64,16 +66,13 @@ const HvFile = ({
   const currentProgress = getProgressBarWith(data);
   return /* @__PURE__ */ jsxRuntime.jsxs("li", {
     className: classes.root,
-    children: [!hasError && inProgress && /* @__PURE__ */ jsxRuntime.jsx("span", {
-      className: classes.progressbarBack
-    }), !hasError && inProgress && /* @__PURE__ */ jsxRuntime.jsx("progress", {
-      className: classes.progressbar,
-      "aria-valuemin": 0,
-      "aria-valuemax": 100,
-      "aria-valuenow": currentProgress,
-      style: {
-        width: `${currentProgress}%`
-      }
+    children: [!hasError && inProgress && /* @__PURE__ */ jsxRuntime.jsx(ProgressBar.HvProgressBar, {
+      classes: {
+        root: classes.progressbar,
+        progressBarContainer: css.cx(classes.progressbarContainer, classes.progressbarBack)
+      },
+      value: currentProgress,
+      hideLabel: true
     }), statusIcon, /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
       className: classes.nameText,
       variant: "label",

package/dist/cjs/components/FileUploader/File/File.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"File.cjs","sources":["../../../../../src/components/FileUploader/File/File.tsx"],"sourcesContent":["import { Close, Fail, Success } from \"@hitachivantara/uikit-react-icons\";\n\nimport { setId } from \"@core/utils/setId\";\nimport { HvButton } from \"@core/components/Button\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { convertUnits } from \"../utils\";\nimport { staticClasses, useClasses } from \"./File.styles\";\n\nexport { staticClasses as fileClasses };\n\nexport type HvFileClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFileData extends Omit<File, \"name\" | \"size\"> {\n  /**\n   * The file id.\n   */\n  id?: string;\n  /**\n   * The file name.\n   */\n  name?: string;\n  /**\n   * The upload status.\n   */\n  status?: \"progress\" | \"success\" | \"fail\";\n  /**\n   * The file size in bytes.\n   */\n  size?: number;\n  /**\n   * Upload progress in bytes.\n   */\n  progress?: number;\n  /**\n   * Optional node representing a preview of the uploaded file.\n   */\n  preview?: React.ReactNode;\n  /**\n   * Error message when the upload failed.\n   */\n  errorMessage?: string;\n}\n\nexport type HvFilesAddedEvent = (files: HvFileData[]) => void;\n\nexport type HvFileRemovedEvent = (file: HvFileData) => void;\n\nexport type HvFileProps = {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * File information to be displayed.\n   */\n  data: HvFileData;\n  /**\n   * Callback fired when file is removed from list.\n   */\n  onFileRemoved?: HvFileRemovedEvent;\n  /**\n   * Value of aria-label to apply to remove file button in file list.\n   * */\n  removeFileButtonLabel?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvFileClasses;\n};\n\nconst getStatusIcon = (\n  classes?: HvFileClasses,\n  status?: HvFileData[\"status\"]\n) => {\n  switch (status) {\n    case \"success\":\n      return <Success className={classes?.icon} color=\"positive\" />;\n    case \"fail\":\n      return <Fail className={classes?.icon} color=\"negative\" />;\n    default:\n      return <div className={classes?.icon} />;\n  }\n};\n\nconst getProgressText = (data: HvFileData, classes?: HvFileClasses) => {\n  const hasFailed = data.status === \"fail\";\n  const inProgress = data.status === \"progress\";\n\n  return (\n    <>\n      {data.progress || data.size || data.errorMessage ? `\\xa0|\\xa0` : null}\n\n      {inProgress && data.progress != null && (\n        <HvTypography variant=\"label\">\n          {`${convertUnits(data.progress)}\\xa0/\\xa0`}\n        </HvTypography>\n      )}\n\n      {!hasFailed && data.size && (\n        <HvTypography>{`${convertUnits(data.size)}`}</HvTypography>\n      )}\n\n      {hasFailed && data.errorMessage && (\n        <HvTypography className={classes?.fail}>\n          {data.errorMessage}\n        </HvTypography>\n      )}\n    </>\n  );\n};\n\nconst getProgressBarWith = ({ size, progress }: HvFileData) => {\n  const width =\n    progress != null && size != null ? Math.round((progress * 100) / size) : 0;\n\n  return width;\n};\n\nexport const HvFile = ({\n  id,\n  classes: classesProp,\n  data,\n  onFileRemoved,\n  removeFileButtonLabel,\n}: HvFileProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const hasError = data.status === \"fail\";\n\n  const inProgress = data.status === \"progress\";\n\n  const progressText = getProgressText(data, classes);\n\n  const statusIcon = getStatusIcon(classes, data.status);\n\n  const currentProgress = getProgressBarWith(data);\n\n  return (\n    <li className={classes.root}>\n      {!hasError && inProgress && <span className={classes.progressbarBack} />}\n\n      {!hasError && inProgress && (\n        <progress\n          className={classes.progressbar}\n          aria-valuemin={0}\n          aria-valuemax={100}\n          aria-valuenow={currentProgress}\n          style={{ width: `${currentProgress}%` }}\n        />\n      )}\n\n      {statusIcon}\n\n      <HvTypography className={classes.nameText} variant=\"label\">\n        {data.name}\n      </HvTypography>\n\n      <span className={classes.progressTextContainer}>{progressText}</span>\n\n      {data.preview && (\n        <div className={classes.previewContainer}>{data.preview}</div>\n      )}\n\n      <HvButton\n        id={setId(id, \"remove-button\")}\n        aria-label={removeFileButtonLabel}\n        className={classes.removeButton}\n        onClick={() => onFileRemoved?.(data)}\n        icon\n      >\n        <Close iconSize=\"XS\" />\n      </HvButton>\n    </li>\n  );\n};\n"],"names":["getStatusIcon","classes","status","Success","className","icon","color","Fail","getProgressText","data","hasFailed","inProgress","_Fragment","children","progress","size","errorMessage","HvTypography","variant","convertUnits","fail","getProgressBarWith","width","Math","round","HvFile","id","classesProp","onFileRemoved","removeFileButtonLabel","useClasses","hasError","progressText","statusIcon","currentProgress","root","progressbarBack","progressbar","style","_jsx","nameText","name","progressTextContainer","preview","previewContainer","HvButton","setId","removeButton","onClick","Close","iconSize"],"mappings":"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"}
+{"version":3,"file":"File.cjs","sources":["../../../../../src/components/FileUploader/File/File.tsx"],"sourcesContent":["import { Close, Fail, Success } from \"@hitachivantara/uikit-react-icons\";\n\nimport { setId } from \"@core/utils/setId\";\nimport { HvButton } from \"@core/components/Button\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvProgressBar } from \"@core/components/ProgressBar\";\nimport { cx } from \"@emotion/css\";\nimport { convertUnits } from \"../utils\";\nimport { staticClasses, useClasses } from \"./File.styles\";\n\nexport { staticClasses as fileClasses };\n\nexport type HvFileClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFileData extends Omit<File, \"name\" | \"size\"> {\n  /**\n   * The file id.\n   */\n  id?: string;\n  /**\n   * The file name.\n   */\n  name?: string;\n  /**\n   * The upload status.\n   */\n  status?: \"progress\" | \"success\" | \"fail\";\n  /**\n   * The file size in bytes.\n   */\n  size?: number;\n  /**\n   * Upload progress in bytes.\n   */\n  progress?: number;\n  /**\n   * Optional node representing a preview of the uploaded file.\n   */\n  preview?: React.ReactNode;\n  /**\n   * Error message when the upload failed.\n   */\n  errorMessage?: string;\n}\n\nexport type HvFilesAddedEvent = (files: HvFileData[]) => void;\n\nexport type HvFileRemovedEvent = (file: HvFileData) => void;\n\nexport type HvFileProps = {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * File information to be displayed.\n   */\n  data: HvFileData;\n  /**\n   * Callback fired when file is removed from list.\n   */\n  onFileRemoved?: HvFileRemovedEvent;\n  /**\n   * Value of aria-label to apply to remove file button in file list.\n   * */\n  removeFileButtonLabel?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvFileClasses;\n};\n\nconst getStatusIcon = (\n  classes?: HvFileClasses,\n  status?: HvFileData[\"status\"]\n) => {\n  switch (status) {\n    case \"success\":\n      return <Success className={classes?.icon} color=\"positive\" />;\n    case \"fail\":\n      return <Fail className={classes?.icon} color=\"negative\" />;\n    default:\n      return <div className={classes?.icon} />;\n  }\n};\n\nconst getProgressText = (data: HvFileData, classes?: HvFileClasses) => {\n  const hasFailed = data.status === \"fail\";\n  const inProgress = data.status === \"progress\";\n\n  return (\n    <>\n      {data.progress || data.size || data.errorMessage ? `\\xa0|\\xa0` : null}\n\n      {inProgress && data.progress != null && (\n        <HvTypography variant=\"label\">\n          {`${convertUnits(data.progress)}\\xa0/\\xa0`}\n        </HvTypography>\n      )}\n\n      {!hasFailed && data.size && (\n        <HvTypography>{`${convertUnits(data.size)}`}</HvTypography>\n      )}\n\n      {hasFailed && data.errorMessage && (\n        <HvTypography className={classes?.fail}>\n          {data.errorMessage}\n        </HvTypography>\n      )}\n    </>\n  );\n};\n\nconst getProgressBarWith = ({ size, progress }: HvFileData) => {\n  const width =\n    progress != null && size != null ? Math.round((progress * 100) / size) : 0;\n\n  return width;\n};\n\nexport const HvFile = ({\n  id,\n  classes: classesProp,\n  data,\n  onFileRemoved,\n  removeFileButtonLabel,\n}: HvFileProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const hasError = data.status === \"fail\";\n\n  const inProgress = data.status === \"progress\";\n\n  const progressText = getProgressText(data, classes);\n\n  const statusIcon = getStatusIcon(classes, data.status);\n\n  const currentProgress = getProgressBarWith(data);\n\n  return (\n    <li className={classes.root}>\n      {!hasError && inProgress && (\n        <HvProgressBar\n          classes={{\n            root: classes.progressbar,\n            progressBarContainer: cx(\n              classes.progressbarContainer,\n              classes.progressbarBack\n            ),\n          }}\n          value={currentProgress}\n          hideLabel\n        />\n      )}\n\n      {statusIcon}\n\n      <HvTypography className={classes.nameText} variant=\"label\">\n        {data.name}\n      </HvTypography>\n\n      <span className={classes.progressTextContainer}>{progressText}</span>\n\n      {data.preview && (\n        <div className={classes.previewContainer}>{data.preview}</div>\n      )}\n\n      <HvButton\n        id={setId(id, \"remove-button\")}\n        aria-label={removeFileButtonLabel}\n        className={classes.removeButton}\n        onClick={() => onFileRemoved?.(data)}\n        icon\n      >\n        <Close iconSize=\"XS\" />\n      </HvButton>\n    </li>\n  );\n};\n"],"names":["getStatusIcon","classes","status","Success","className","icon","color","Fail","getProgressText","data","hasFailed","inProgress","_Fragment","children","progress","size","errorMessage","HvTypography","variant","convertUnits","fail","getProgressBarWith","width","Math","round","HvFile","id","classesProp","onFileRemoved","removeFileButtonLabel","useClasses","hasError","progressText","statusIcon","currentProgress","root","HvProgressBar","progressbar","progressBarContainer","cx","progressbarContainer","progressbarBack","value","hideLabel","_jsx","nameText","name","progressTextContainer","preview","previewContainer","HvButton","setId","removeButton","onClick","Close","iconSize"],"mappings":"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"}

package/dist/cjs/components/FileUploader/File/File.styles.cjs

@@ -9,20 +9,12 @@ const {
   root: {},
   progressbar: {
     position: "absolute",
-    top: "-1px",
-    width: "80%",
-    height: uikitStyles.theme.fileUploader.file.progressHeight,
-    border: `${uikitStyles.theme.fileUploader.file.borderWidth} solid ${uikitStyles.theme.colors.secondary}`,
-    "&::-moz-progress-bar": {
-      background: uikitStyles.theme.colors.secondary
-    }
+    top: "-1px"
   },
-  progressbarBack: {
-    position: "absolute",
-    top: "-1px",
-    width: "100%",
-    border: `${uikitStyles.theme.fileUploader.file.borderWidth} solid ${uikitStyles.theme.colors.atmo4}`
+  progressbarContainer: {
+    height: uikitStyles.theme.fileUploader.file.progressHeight
   },
+  progressbarBack: {},
   nameText: {
     overflow: "hidden",
     textOverflow: "ellipsis",

package/dist/cjs/components/FileUploader/File/File.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"File.styles.cjs","sources":["../../../../../src/components/FileUploader/File/File.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFile\", {\n  root: {},\n  progressbar: {\n    position: \"absolute\",\n    top: \"-1px\",\n    width: \"80%\",\n    height: theme.fileUploader.file.progressHeight,\n    border: `${theme.fileUploader.file.borderWidth} solid ${theme.colors.secondary}`,\n\n    \"&::-moz-progress-bar\": {\n      background: theme.colors.secondary,\n    },\n  },\n  progressbarBack: {\n    position: \"absolute\",\n    top: \"-1px\",\n    width: \"100%\",\n    border: `${theme.fileUploader.file.borderWidth} solid ${theme.colors.atmo4}`,\n  },\n  nameText: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  progressTextContainer: {\n    display: \"flex\",\n    flexGrow: 1,\n    alignItems: \"center\",\n  },\n  removeButton: {\n    width: 32,\n    height: 32,\n    margin: `0px ${theme.space.xs}`,\n  },\n  previewContainer: {\n    display: \"flex\",\n    margin: `0px ${theme.space.xs}`,\n    width: theme.fileUploader.file.previewContainerSize,\n    height: theme.fileUploader.file.previewContainerSize,\n    justifyContent: \"center\",\n    alignItems: \"center\",\n\n    \"& span\": {\n      display: \"flex\",\n      justifyContent: \"center\",\n      alignItems: \"center\",\n      width: \"100%\",\n      height: \"100%\",\n    },\n\n    \"& img\": {\n      width: theme.fileUploader.file.imageSize,\n      height: theme.fileUploader.file.imageSize,\n      objectFit: \"cover\",\n      objectPosition: \"center\",\n      alignSelf: \"center\",\n    },\n  },\n  icon: {\n    width: 32,\n    height: 32,\n    margin: `0px ${theme.space.xs}`,\n  },\n  fail: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","progressbar","position","top","width","height","theme","fileUploader","file","progressHeight","border","borderWidth","colors","secondary","background","progressbarBack","atmo4","nameText","overflow","textOverflow","whiteSpace","progressTextContainer","display","flexGrow","alignItems","removeButton","margin","space","xs","previewContainer","previewContainerSize","justifyContent","imageSize","objectFit","objectPosition","alignSelf","icon","fail"],"mappings":";;;;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,UAAU;AAAA,EACnEC,MAAM,CAAC;AAAA,EACPC,aAAa;AAAA,IACXC,UAAU;AAAA,IACVC,KAAK;AAAA,IACLC,OAAO;AAAA,IACPC,QAAQC,YAAMC,MAAAA,aAAaC,KAAKC;AAAAA,IAChCC,QAAS,GAAEJ,kBAAMC,aAAaC,KAAKG,qBAAqBL,kBAAMM,OAAOC;AAAAA,IAErE,wBAAwB;AAAA,MACtBC,YAAYR,YAAAA,MAAMM,OAAOC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAE,iBAAiB;AAAA,IACfb,UAAU;AAAA,IACVC,KAAK;AAAA,IACLC,OAAO;AAAA,IACPM,QAAS,GAAEJ,kBAAMC,aAAaC,KAAKG,qBAAqBL,kBAAMM,OAAOI;AAAAA,EACvE;AAAA,EACAC,UAAU;AAAA,IACRC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,EACd;AAAA,EACAC,uBAAuB;AAAA,IACrBC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,YAAY;AAAA,EACd;AAAA,EACAC,cAAc;AAAA,IACZrB,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRqB,QAAS,OAAMpB,YAAAA,MAAMqB,MAAMC;AAAAA,EAC7B;AAAA,EACAC,kBAAkB;AAAA,IAChBP,SAAS;AAAA,IACTI,QAAS,OAAMpB,YAAAA,MAAMqB,MAAMC;AAAAA,IAC3BxB,OAAOE,YAAMC,MAAAA,aAAaC,KAAKsB;AAAAA,IAC/BzB,QAAQC,YAAMC,MAAAA,aAAaC,KAAKsB;AAAAA,IAChCC,gBAAgB;AAAA,IAChBP,YAAY;AAAA,IAEZ,UAAU;AAAA,MACRF,SAAS;AAAA,MACTS,gBAAgB;AAAA,MAChBP,YAAY;AAAA,MACZpB,OAAO;AAAA,MACPC,QAAQ;AAAA,IACV;AAAA,IAEA,SAAS;AAAA,MACPD,OAAOE,YAAMC,MAAAA,aAAaC,KAAKwB;AAAAA,MAC/B3B,QAAQC,YAAMC,MAAAA,aAAaC,KAAKwB;AAAAA,MAChCC,WAAW;AAAA,MACXC,gBAAgB;AAAA,MAChBC,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACAC,MAAM;AAAA,IACJhC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRqB,QAAS,OAAMpB,YAAAA,MAAMqB,MAAMC;AAAAA,EAC7B;AAAA,EACAS,MAAM,CAAC;AACT,CAAC;;;"}
+{"version":3,"file":"File.styles.cjs","sources":["../../../../../src/components/FileUploader/File/File.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFile\", {\n  root: {},\n  progressbar: {\n    position: \"absolute\",\n    top: \"-1px\",\n  },\n  progressbarContainer: {\n    height: theme.fileUploader.file.progressHeight,\n  },\n  progressbarBack: {},\n  nameText: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  progressTextContainer: {\n    display: \"flex\",\n    flexGrow: 1,\n    alignItems: \"center\",\n  },\n  removeButton: {\n    width: 32,\n    height: 32,\n    margin: `0px ${theme.space.xs}`,\n  },\n  previewContainer: {\n    display: \"flex\",\n    margin: `0px ${theme.space.xs}`,\n    width: theme.fileUploader.file.previewContainerSize,\n    height: theme.fileUploader.file.previewContainerSize,\n    justifyContent: \"center\",\n    alignItems: \"center\",\n\n    \"& span\": {\n      display: \"flex\",\n      justifyContent: \"center\",\n      alignItems: \"center\",\n      width: \"100%\",\n      height: \"100%\",\n    },\n\n    \"& img\": {\n      width: theme.fileUploader.file.imageSize,\n      height: theme.fileUploader.file.imageSize,\n      objectFit: \"cover\",\n      objectPosition: \"center\",\n      alignSelf: \"center\",\n    },\n  },\n  icon: {\n    width: 32,\n    height: 32,\n    margin: `0px ${theme.space.xs}`,\n  },\n  fail: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","progressbar","position","top","progressbarContainer","height","theme","fileUploader","file","progressHeight","progressbarBack","nameText","overflow","textOverflow","whiteSpace","progressTextContainer","display","flexGrow","alignItems","removeButton","width","margin","space","xs","previewContainer","previewContainerSize","justifyContent","imageSize","objectFit","objectPosition","alignSelf","icon","fail"],"mappings":";;;;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,UAAU;AAAA,EACnEC,MAAM,CAAC;AAAA,EACPC,aAAa;AAAA,IACXC,UAAU;AAAA,IACVC,KAAK;AAAA,EACP;AAAA,EACAC,sBAAsB;AAAA,IACpBC,QAAQC,YAAMC,MAAAA,aAAaC,KAAKC;AAAAA,EAClC;AAAA,EACAC,iBAAiB,CAAC;AAAA,EAClBC,UAAU;AAAA,IACRC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,EACd;AAAA,EACAC,uBAAuB;AAAA,IACrBC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,YAAY;AAAA,EACd;AAAA,EACAC,cAAc;AAAA,IACZC,OAAO;AAAA,IACPf,QAAQ;AAAA,IACRgB,QAAS,OAAMf,YAAAA,MAAMgB,MAAMC;AAAAA,EAC7B;AAAA,EACAC,kBAAkB;AAAA,IAChBR,SAAS;AAAA,IACTK,QAAS,OAAMf,YAAAA,MAAMgB,MAAMC;AAAAA,IAC3BH,OAAOd,YAAMC,MAAAA,aAAaC,KAAKiB;AAAAA,IAC/BpB,QAAQC,YAAMC,MAAAA,aAAaC,KAAKiB;AAAAA,IAChCC,gBAAgB;AAAA,IAChBR,YAAY;AAAA,IAEZ,UAAU;AAAA,MACRF,SAAS;AAAA,MACTU,gBAAgB;AAAA,MAChBR,YAAY;AAAA,MACZE,OAAO;AAAA,MACPf,QAAQ;AAAA,IACV;AAAA,IAEA,SAAS;AAAA,MACPe,OAAOd,YAAMC,MAAAA,aAAaC,KAAKmB;AAAAA,MAC/BtB,QAAQC,YAAMC,MAAAA,aAAaC,KAAKmB;AAAAA,MAChCC,WAAW;AAAA,MACXC,gBAAgB;AAAA,MAChBC,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACAC,MAAM;AAAA,IACJX,OAAO;AAAA,IACPf,QAAQ;AAAA,IACRgB,QAAS,OAAMf,YAAAA,MAAMgB,MAAMC;AAAAA,EAC7B;AAAA,EACAS,MAAM,CAAC;AACT,CAAC;;;"}

package/dist/cjs/components/FilterGroup/FilterContent/FilterContent.styles.cjs

@@ -18,7 +18,7 @@ const {
     height: 32
   },
   baseDropdownSelection: {
-    padding: uikitStyles.theme.spacing(["0px", "30px", "0px", "0px"])
+    padding: uikitStyles.theme.spacing("0px", "30px", "0px", "0px")
   },
   root: {
     width: 640,
@@ -38,8 +38,8 @@ const {
   },
   leftSidePanel: {
     display: "inline-block",
-    width: `calc(50% - ${uikitStyles.theme.spacing("sm")} - ${uikitStyles.theme.spacing("sm")} + 8px)`,
-    height: `calc(100% - ${uikitStyles.theme.spacing("sm")} - ${uikitStyles.theme.spacing("sm")} + 8px)`,
+    width: `calc(50% - ${uikitStyles.theme.space.sm} - ${uikitStyles.theme.space.sm} + 8px)`,
+    height: `calc(100% - ${uikitStyles.theme.space.sm} - ${uikitStyles.theme.space.sm} + 8px)`,
     verticalAlign: "top",
     maxHeight: "calc(500px - 75px)",
     minHeight: "calc(370px - 75px)",

package/dist/cjs/components/FilterGroup/FilterContent/FilterContent.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FilterContent.styles.cjs","sources":["../../../../../src/components/FilterGroup/FilterContent/FilterContent.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst name = \"HvFilterGroupContent\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  dropdown: {},\n  panel: {\n    maxHeight: 500,\n    minHeight: 370,\n  },\n  header: {\n    display: \"flex\",\n    justifyContent: \"space-between\",\n    height: 32,\n  },\n  baseDropdownSelection: {\n    padding: theme.spacing([\"0px\", \"30px\", \"0px\", \"0px\"]),\n  },\n  root: {\n    width: 640,\n    maxHeight: \"calc(500px - 75px)\",\n    minHeight: \"calc(370px - 75px)\",\n  },\n  rightSidePanel: {\n    display: \"inline-block\",\n    width: \"50%\",\n    height: \"100%\",\n    maxHeight: \"calc(500px - 75px)\",\n    minHeight: \"calc(370px - 75px)\",\n    verticalAlign: \"top\",\n    overflow: \"visible\",\n    boxShadow: theme.filterGroup.rightPanelShadow,\n    borderLeft: theme.filterGroup.rightPanelBorderLeft,\n  },\n  leftSidePanel: {\n    display: \"inline-block\",\n    width: `calc(50% - ${theme.spacing(\"sm\")} - ${theme.spacing(\"sm\")} + 8px)`,\n    height: `calc(100% - ${theme.spacing(\"sm\")} - ${theme.spacing(\n      \"sm\"\n    )} + 8px)`,\n    verticalAlign: \"top\",\n    maxHeight: \"calc(500px - 75px)\",\n    minHeight: \"calc(370px - 75px)\",\n    padding: 4,\n    margin: `calc(${theme.spacing(\"sm\")} - 4px)`,\n  },\n  actionBar: {},\n  space: {\n    flex: 1,\n  },\n  applyButton: {\n    marginRight: theme.filterGroup.applyButtonMarginRight,\n  },\n});\n"],"names":["name","staticClasses","useClasses","createClasses","dropdown","panel","maxHeight","minHeight","header","display","justifyContent","height","baseDropdownSelection","padding","theme","spacing","root","width","rightSidePanel","verticalAlign","overflow","boxShadow","filterGroup","rightPanelShadow","borderLeft","rightPanelBorderLeft","leftSidePanel","margin","actionBar","space","flex","applyButton","marginRight","applyButtonMarginRight"],"mappings":";;;;AAIA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAcH,MAAM;AAAA,EAC/DI,UAAU,CAAC;AAAA,EACXC,OAAO;AAAA,IACLC,WAAW;AAAA,IACXC,WAAW;AAAA,EACb;AAAA,EACAC,QAAQ;AAAA,IACNC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,QAAQ;AAAA,EACV;AAAA,EACAC,uBAAuB;AAAA,IACrBC,SAASC,kBAAMC,QAAQ,CAAC,OAAO,QAAQ,OAAO,KAAK,CAAC;AAAA,EACtD;AAAA,EACAC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPX,WAAW;AAAA,IACXC,WAAW;AAAA,EACb;AAAA,EACAW,gBAAgB;AAAA,IACdT,SAAS;AAAA,IACTQ,OAAO;AAAA,IACPN,QAAQ;AAAA,IACRL,WAAW;AAAA,IACXC,WAAW;AAAA,IACXY,eAAe;AAAA,IACfC,UAAU;AAAA,IACVC,WAAWP,YAAAA,MAAMQ,YAAYC;AAAAA,IAC7BC,YAAYV,YAAAA,MAAMQ,YAAYG;AAAAA,EAChC;AAAA,EACAC,eAAe;AAAA,IACbjB,SAAS;AAAA,IACTQ,OAAQ,cAAaH,YAAMC,MAAAA,QAAQ,IAAI,OAAOD,kBAAMC,QAAQ,IAAI;AAAA,IAChEJ,QAAS,eAAcG,YAAMC,MAAAA,QAAQ,IAAI,OAAOD,kBAAMC,QACpD,IACF;AAAA,IACAI,eAAe;AAAA,IACfb,WAAW;AAAA,IACXC,WAAW;AAAA,IACXM,SAAS;AAAA,IACTc,QAAS,QAAOb,YAAAA,MAAMC,QAAQ,IAAI;AAAA,EACpC;AAAA,EACAa,WAAW,CAAC;AAAA,EACZC,OAAO;AAAA,IACLC,MAAM;AAAA,EACR;AAAA,EACAC,aAAa;AAAA,IACXC,aAAalB,YAAAA,MAAMQ,YAAYW;AAAAA,EACjC;AACF,CAAC;;;"}
+{"version":3,"file":"FilterContent.styles.cjs","sources":["../../../../../src/components/FilterGroup/FilterContent/FilterContent.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst name = \"HvFilterGroupContent\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  dropdown: {},\n  panel: {\n    maxHeight: 500,\n    minHeight: 370,\n  },\n  header: {\n    display: \"flex\",\n    justifyContent: \"space-between\",\n    height: 32,\n  },\n  baseDropdownSelection: {\n    padding: theme.spacing(\"0px\", \"30px\", \"0px\", \"0px\"),\n  },\n  root: {\n    width: 640,\n    maxHeight: \"calc(500px - 75px)\",\n    minHeight: \"calc(370px - 75px)\",\n  },\n  rightSidePanel: {\n    display: \"inline-block\",\n    width: \"50%\",\n    height: \"100%\",\n    maxHeight: \"calc(500px - 75px)\",\n    minHeight: \"calc(370px - 75px)\",\n    verticalAlign: \"top\",\n    overflow: \"visible\",\n    boxShadow: theme.filterGroup.rightPanelShadow,\n    borderLeft: theme.filterGroup.rightPanelBorderLeft,\n  },\n  leftSidePanel: {\n    display: \"inline-block\",\n    width: `calc(50% - ${theme.space.sm} - ${theme.space.sm} + 8px)`,\n    height: `calc(100% - ${theme.space.sm} - ${theme.space.sm} + 8px)`,\n    verticalAlign: \"top\",\n    maxHeight: \"calc(500px - 75px)\",\n    minHeight: \"calc(370px - 75px)\",\n    padding: 4,\n    margin: `calc(${theme.spacing(\"sm\")} - 4px)`,\n  },\n  actionBar: {},\n  space: {\n    flex: 1,\n  },\n  applyButton: {\n    marginRight: theme.filterGroup.applyButtonMarginRight,\n  },\n});\n"],"names":["name","staticClasses","useClasses","createClasses","dropdown","panel","maxHeight","minHeight","header","display","justifyContent","height","baseDropdownSelection","padding","theme","spacing","root","width","rightSidePanel","verticalAlign","overflow","boxShadow","filterGroup","rightPanelShadow","borderLeft","rightPanelBorderLeft","leftSidePanel","space","sm","margin","actionBar","flex","applyButton","marginRight","applyButtonMarginRight"],"mappings":";;;;AAIA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAcH,MAAM;AAAA,EAC/DI,UAAU,CAAC;AAAA,EACXC,OAAO;AAAA,IACLC,WAAW;AAAA,IACXC,WAAW;AAAA,EACb;AAAA,EACAC,QAAQ;AAAA,IACNC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,QAAQ;AAAA,EACV;AAAA,EACAC,uBAAuB;AAAA,IACrBC,SAASC,YAAMC,MAAAA,QAAQ,OAAO,QAAQ,OAAO,KAAK;AAAA,EACpD;AAAA,EACAC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPX,WAAW;AAAA,IACXC,WAAW;AAAA,EACb;AAAA,EACAW,gBAAgB;AAAA,IACdT,SAAS;AAAA,IACTQ,OAAO;AAAA,IACPN,QAAQ;AAAA,IACRL,WAAW;AAAA,IACXC,WAAW;AAAA,IACXY,eAAe;AAAA,IACfC,UAAU;AAAA,IACVC,WAAWP,YAAAA,MAAMQ,YAAYC;AAAAA,IAC7BC,YAAYV,YAAAA,MAAMQ,YAAYG;AAAAA,EAChC;AAAA,EACAC,eAAe;AAAA,IACbjB,SAAS;AAAA,IACTQ,OAAQ,cAAaH,YAAAA,MAAMa,MAAMC,QAAQd,kBAAMa,MAAMC;AAAAA,IACrDjB,QAAS,eAAcG,YAAAA,MAAMa,MAAMC,QAAQd,kBAAMa,MAAMC;AAAAA,IACvDT,eAAe;AAAA,IACfb,WAAW;AAAA,IACXC,WAAW;AAAA,IACXM,SAAS;AAAA,IACTgB,QAAS,QAAOf,YAAAA,MAAMC,QAAQ,IAAI;AAAA,EACpC;AAAA,EACAe,WAAW,CAAC;AAAA,EACZH,OAAO;AAAA,IACLI,MAAM;AAAA,EACR;AAAA,EACAC,aAAa;AAAA,IACXC,aAAanB,YAAAA,MAAMQ,YAAYY;AAAAA,EACjC;AACF,CAAC;;;"}

package/dist/cjs/components/GlobalActions/GlobalActions.cjs

@@ -45,14 +45,6 @@ const HvGlobalActions = (props) => {
   const isUpMd = material.useMediaQuery(muiTheme.breakpoints.up("md"));
   const fixedPositionCss = positionProp === "fixed" && getBreakpointStyles(isUpMd, isSmDown);
   const headingLevelToApply = headingLevel || (variant === "global" ? 1 : 2);
-  const backButtonRenderer = () => {
-    if (backButton) {
-      return /* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: classes.backButton,
-        children: backButton
-      });
-    }
-  };
   const position = positionProp || (variant === "global" ? "sticky" : "relative");
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
     className: cx(classes.root, {
@@ -66,7 +58,10 @@ const HvGlobalActions = (props) => {
         [classes.globalWrapperComplement]: variant === "global",
         [classes.globalSectionArea]: variant === "section"
       }),
-      children: [variant === "global" && backButtonRenderer(), !isString__default.default(title) ? title : /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
+      children: [variant === "global" && backButton && /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: classes.backButton,
+        children: backButton
+      }), !isString__default.default(title) ? title : /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
         variant: variant === "global" ? "title3" : activeTheme == null ? void 0 : activeTheme.globalActions.sectionVariant,
         component: `h${headingLevelToApply}`,
         className: classes.name,

package/dist/cjs/components/GlobalActions/GlobalActions.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalActions.cjs","sources":["../../../../src/components/GlobalActions/GlobalActions.tsx"],"sourcesContent":["import { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { useTheme as useMuiTheme } from \"@mui/material/styles\";\nimport { useMediaQuery } from \"@mui/material\";\nimport isString from \"lodash/isString\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { staticClasses, useClasses } from \"./GlobalActions.styles\";\n\nexport { staticClasses as globalActionsClasses };\nexport type HvGlobalActionsClasses = ExtractNames<typeof useClasses>;\n\nexport type HvGlobalActionsVariant = \"global\" | \"section\";\nexport type HvGlobalActionsPosition = \"sticky\" | \"fixed\" | \"relative\";\nexport type HvGlobalActionsHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\nexport interface HvGlobalActionsProps\n  extends HvBaseProps<HTMLDivElement, \"title\"> {\n  /** Text to display in the component. */\n  title?: React.ReactNode;\n  /** Denotes if this is a global or section component. */\n  variant?: HvGlobalActionsVariant;\n  /** User can pass in a fully customized button or false for when the back button should not be rendered. */\n  backButton?: React.ReactNode;\n  /** Heading Level to apply to Title Area. */\n  headingLevel?: HvGlobalActionsHeadingLevel;\n  /**\n   * Position of the Global Actions.\n   * Defaults to `sticky` when it is a global title and `relative` when it's a section title.\n   */\n  position?: HvGlobalActionsPosition;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvGlobalActionsClasses;\n}\n\nconst getBreakpointStyles = (isUpMd, isSmDown) =>\n  isUpMd\n    ? {\n        width: `calc(100% - 2 * ${theme.spacing(4)})`,\n        marginLeft: `${theme.spacing(4)}`,\n        marginRight: `${theme.spacing(4)}`,\n      }\n    : isSmDown\n    ? {\n        width: `calc(100% - 2 * ${theme.spacing(2)})`,\n        marginLeft: `${theme.spacing(2)}`,\n        marginRight: `${theme.spacing(2)}`,\n      }\n    : {};\n\n/**\n * Global Actions are actions that affect the entire page they live in.\n * They should persist while scrolling down the screen.\n */\nexport const HvGlobalActions = (props: HvGlobalActionsProps) => {\n  const {\n    children,\n    classes: classesProp,\n    className,\n    title,\n    variant = \"global\",\n    backButton,\n    headingLevel,\n    position: positionProp,\n    ...others\n  } = useDefaultProps(\"HvGlobalActions\", props);\n  const muiTheme = useMuiTheme();\n  const { activeTheme } = useTheme();\n  const { classes, cx, css } = useClasses(classesProp);\n  const isSmDown = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n  const isUpMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n  const fixedPositionCss =\n    positionProp === \"fixed\" && getBreakpointStyles(isUpMd, isSmDown);\n\n  const headingLevelToApply = headingLevel || (variant === \"global\" ? 1 : 2);\n\n  const backButtonRenderer = () => {\n    if (backButton) {\n      return <div className={classes.backButton}>{backButton}</div>;\n    }\n  };\n\n  const position =\n    positionProp || (variant === \"global\" ? \"sticky\" : \"relative\");\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        {\n          [classes.positionSticky]: position === \"sticky\",\n          [classes.positionFixed]: position === \"fixed\",\n          [classes.global]: variant === \"global\",\n        },\n        css(fixedPositionCss),\n        className\n      )}\n      {...others}\n    >\n      <div\n        className={cx(classes.wrapper, {\n          [classes.globalWrapperComplement]: variant === \"global\",\n          [classes.globalSectionArea]: variant === \"section\",\n        })}\n      >\n        {variant === \"global\" && backButtonRenderer()}\n        {!isString(title) ? (\n          title\n        ) : (\n          <HvTypography\n            variant={\n              variant === \"global\"\n                ? \"title3\"\n                : activeTheme?.globalActions.sectionVariant\n            }\n            component={`h${headingLevelToApply}`}\n            className={classes.name}\n          >\n            {title}\n          </HvTypography>\n        )}\n        {children && <div className={classes.actions}>{children}</div>}\n      </div>\n    </div>\n  );\n};\n"],"names":["getBreakpointStyles","isUpMd","isSmDown","width","theme","spacing","marginLeft","marginRight","HvGlobalActions","props","children","classes","classesProp","className","title","variant","backButton","headingLevel","position","positionProp","others","useDefaultProps","muiTheme","useMuiTheme","activeTheme","useTheme","cx","css","useClasses","useMediaQuery","breakpoints","down","up","fixedPositionCss","headingLevelToApply","backButtonRenderer","root","positionSticky","positionFixed","global","wrapper","globalWrapperComplement","globalSectionArea","isString","_jsx","HvTypography","globalActions","sectionVariant","component","name","actions"],"mappings":";;;;;;;;;;;;;AAqCA,MAAMA,sBAAsBA,CAACC,QAAQC,aACnCD,SACI;AAAA,EACEE,OAAQ,mBAAkBC,YAAAA,MAAMC,QAAQ,CAAC;AAAA,EACzCC,YAAa,GAAEF,YAAAA,MAAMC,QAAQ,CAAC;AAAA,EAC9BE,aAAc,GAAEH,YAAAA,MAAMC,QAAQ,CAAC;AACjC,IACAH,WACA;AAAA,EACEC,OAAQ,mBAAkBC,YAAAA,MAAMC,QAAQ,CAAC;AAAA,EACzCC,YAAa,GAAEF,YAAAA,MAAMC,QAAQ,CAAC;AAAA,EAC9BE,aAAc,GAAEH,YAAAA,MAAMC,QAAQ,CAAC;AACjC,IACA;AAMOG,MAAAA,kBAAkBA,CAACC,UAAgC;AACxD,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,UAAU;AAAA,IACVC;AAAAA,IACAC;AAAAA,IACAC,UAAUC;AAAAA,IACV,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,mBAAmBZ,KAAK;AAC5C,QAAMa,WAAWC,OAAAA;AACX,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAS,SAAA;AAC3B,QAAA;AAAA,IAAEd;AAAAA,IAASe;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,qBAAAA,WAAWhB,WAAW;AACnD,QAAMV,WAAW2B,SAAAA,cAAcP,SAASQ,YAAYC,KAAK,IAAI,CAAC;AAC9D,QAAM9B,SAAS4B,SAAAA,cAAcP,SAASQ,YAAYE,GAAG,IAAI,CAAC;AAE1D,QAAMC,mBACJd,iBAAiB,WAAWnB,oBAAoBC,QAAQC,QAAQ;AAElE,QAAMgC,sBAAsBjB,iBAAiBF,YAAY,WAAW,IAAI;AAExE,QAAMoB,qBAAqBA,MAAM;AAC/B,QAAInB,YAAY;AACd,4CAAO,OAAA;AAAA,QAAKH,WAAWF,QAAQK;AAAAA,QAAWN,UAAEM;AAAAA,MAAAA,CAAgB;AAAA,IAC9D;AAAA,EAAA;AAGF,QAAME,WACJC,iBAAiBJ,YAAY,WAAW,WAAW;AAErD,wCACE,OAAA;AAAA,IACEF,WAAWa,GACTf,QAAQyB,MACR;AAAA,MACE,CAACzB,QAAQ0B,cAAc,GAAGnB,aAAa;AAAA,MACvC,CAACP,QAAQ2B,aAAa,GAAGpB,aAAa;AAAA,MACtC,CAACP,QAAQ4B,MAAM,GAAGxB,YAAY;AAAA,IAAA,GAEhCY,IAAIM,gBAAgB,GACpBpB,SACF;AAAA,IAAE,GACEO;AAAAA,IAAMV,0CAEV,OAAA;AAAA,MACEG,WAAWa,GAAGf,QAAQ6B,SAAS;AAAA,QAC7B,CAAC7B,QAAQ8B,uBAAuB,GAAG1B,YAAY;AAAA,QAC/C,CAACJ,QAAQ+B,iBAAiB,GAAG3B,YAAY;AAAA,MAAA,CAC1C;AAAA,MAAEL,WAEFK,YAAY,YAAYoB,mBAAmB,GAC3C,CAACQ,kBAAAA,QAAS7B,KAAK,IACdA,QAEA8B,2BAAAA,IAACC,WAAAA,cAAY;AAAA,QACX9B,SACEA,YAAY,WACR,WACAS,2CAAasB,cAAcC;AAAAA,QAEjCC,WAAY,IAAGd;AAAAA,QACfrB,WAAWF,QAAQsC;AAAAA,QAAKvC,UAEvBI;AAAAA,MAAAA,CACW,GAEfJ,YAAYkC,2BAAAA,IAAA,OAAA;AAAA,QAAK/B,WAAWF,QAAQuC;AAAAA,QAAQxC;AAAAA,MAAAA,CAAgB,CAAC;AAAA,IAAA,CAC3D;AAAA,EAAA,CACF;AAET;;;"}
+{"version":3,"file":"GlobalActions.cjs","sources":["../../../../src/components/GlobalActions/GlobalActions.tsx"],"sourcesContent":["import { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { useTheme as useMuiTheme } from \"@mui/material/styles\";\nimport { useMediaQuery } from \"@mui/material\";\nimport isString from \"lodash/isString\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { staticClasses, useClasses } from \"./GlobalActions.styles\";\n\nexport { staticClasses as globalActionsClasses };\nexport type HvGlobalActionsClasses = ExtractNames<typeof useClasses>;\n\nexport type HvGlobalActionsVariant = \"global\" | \"section\";\nexport type HvGlobalActionsPosition = \"sticky\" | \"fixed\" | \"relative\";\nexport type HvGlobalActionsHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\nexport interface HvGlobalActionsProps\n  extends HvBaseProps<HTMLDivElement, \"title\"> {\n  /** Text to display in the component. */\n  title?: React.ReactNode;\n  /** Denotes if this is a global or section component. */\n  variant?: HvGlobalActionsVariant;\n  /** User can pass in a fully customized button or false for when the back button should not be rendered. */\n  backButton?: React.ReactNode;\n  /** Heading Level to apply to Title Area. */\n  headingLevel?: HvGlobalActionsHeadingLevel;\n  /**\n   * Position of the Global Actions.\n   * Defaults to `sticky` when it is a global title and `relative` when it's a section title.\n   */\n  position?: HvGlobalActionsPosition;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvGlobalActionsClasses;\n}\n\nconst getBreakpointStyles = (isUpMd: boolean, isSmDown: boolean) =>\n  isUpMd\n    ? {\n        width: `calc(100% - 2 * ${theme.spacing(4)})`,\n        marginLeft: `${theme.spacing(4)}`,\n        marginRight: `${theme.spacing(4)}`,\n      }\n    : isSmDown\n    ? {\n        width: `calc(100% - 2 * ${theme.spacing(2)})`,\n        marginLeft: `${theme.spacing(2)}`,\n        marginRight: `${theme.spacing(2)}`,\n      }\n    : {};\n\n/**\n * Global Actions are actions that affect the entire page they live in.\n * They should persist while scrolling down the screen.\n */\nexport const HvGlobalActions = (props: HvGlobalActionsProps) => {\n  const {\n    children,\n    classes: classesProp,\n    className,\n    title,\n    variant = \"global\",\n    backButton,\n    headingLevel,\n    position: positionProp,\n    ...others\n  } = useDefaultProps(\"HvGlobalActions\", props);\n  const muiTheme = useMuiTheme();\n  const { activeTheme } = useTheme();\n  const { classes, cx, css } = useClasses(classesProp);\n  const isSmDown = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n  const isUpMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n  const fixedPositionCss =\n    positionProp === \"fixed\" && getBreakpointStyles(isUpMd, isSmDown);\n\n  const headingLevelToApply = headingLevel || (variant === \"global\" ? 1 : 2);\n\n  const position =\n    positionProp || (variant === \"global\" ? \"sticky\" : \"relative\");\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        {\n          [classes.positionSticky]: position === \"sticky\",\n          [classes.positionFixed]: position === \"fixed\",\n          [classes.global]: variant === \"global\",\n        },\n        css(fixedPositionCss),\n        className\n      )}\n      {...others}\n    >\n      <div\n        className={cx(classes.wrapper, {\n          [classes.globalWrapperComplement]: variant === \"global\",\n          [classes.globalSectionArea]: variant === \"section\",\n        })}\n      >\n        {variant === \"global\" && backButton && (\n          <div className={classes.backButton}>{backButton}</div>\n        )}\n        {!isString(title) ? (\n          title\n        ) : (\n          <HvTypography\n            variant={\n              variant === \"global\"\n                ? \"title3\"\n                : activeTheme?.globalActions.sectionVariant\n            }\n            component={`h${headingLevelToApply}`}\n            className={classes.name}\n          >\n            {title}\n          </HvTypography>\n        )}\n        {children && <div className={classes.actions}>{children}</div>}\n      </div>\n    </div>\n  );\n};\n"],"names":["getBreakpointStyles","isUpMd","isSmDown","width","theme","spacing","marginLeft","marginRight","HvGlobalActions","props","children","classes","classesProp","className","title","variant","backButton","headingLevel","position","positionProp","others","useDefaultProps","muiTheme","useMuiTheme","activeTheme","useTheme","cx","css","useClasses","useMediaQuery","breakpoints","down","up","fixedPositionCss","headingLevelToApply","root","positionSticky","positionFixed","global","wrapper","globalWrapperComplement","globalSectionArea","isString","HvTypography","globalActions","sectionVariant","component","name","_jsx","actions"],"mappings":";;;;;;;;;;;;;AAqCA,MAAMA,sBAAsBA,CAACC,QAAiBC,aAC5CD,SACI;AAAA,EACEE,OAAQ,mBAAkBC,YAAAA,MAAMC,QAAQ,CAAC;AAAA,EACzCC,YAAa,GAAEF,YAAAA,MAAMC,QAAQ,CAAC;AAAA,EAC9BE,aAAc,GAAEH,YAAAA,MAAMC,QAAQ,CAAC;AACjC,IACAH,WACA;AAAA,EACEC,OAAQ,mBAAkBC,YAAAA,MAAMC,QAAQ,CAAC;AAAA,EACzCC,YAAa,GAAEF,YAAAA,MAAMC,QAAQ,CAAC;AAAA,EAC9BE,aAAc,GAAEH,YAAAA,MAAMC,QAAQ,CAAC;AACjC,IACA;AAMOG,MAAAA,kBAAkBA,CAACC,UAAgC;AACxD,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,UAAU;AAAA,IACVC;AAAAA,IACAC;AAAAA,IACAC,UAAUC;AAAAA,IACV,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,mBAAmBZ,KAAK;AAC5C,QAAMa,WAAWC,OAAAA;AACX,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAS,SAAA;AAC3B,QAAA;AAAA,IAAEd;AAAAA,IAASe;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,qBAAAA,WAAWhB,WAAW;AACnD,QAAMV,WAAW2B,SAAAA,cAAcP,SAASQ,YAAYC,KAAK,IAAI,CAAC;AAC9D,QAAM9B,SAAS4B,SAAAA,cAAcP,SAASQ,YAAYE,GAAG,IAAI,CAAC;AAE1D,QAAMC,mBACJd,iBAAiB,WAAWnB,oBAAoBC,QAAQC,QAAQ;AAElE,QAAMgC,sBAAsBjB,iBAAiBF,YAAY,WAAW,IAAI;AAExE,QAAMG,WACJC,iBAAiBJ,YAAY,WAAW,WAAW;AAErD,wCACE,OAAA;AAAA,IACEF,WAAWa,GACTf,QAAQwB,MACR;AAAA,MACE,CAACxB,QAAQyB,cAAc,GAAGlB,aAAa;AAAA,MACvC,CAACP,QAAQ0B,aAAa,GAAGnB,aAAa;AAAA,MACtC,CAACP,QAAQ2B,MAAM,GAAGvB,YAAY;AAAA,IAAA,GAEhCY,IAAIM,gBAAgB,GACpBpB,SACF;AAAA,IAAE,GACEO;AAAAA,IAAMV,0CAEV,OAAA;AAAA,MACEG,WAAWa,GAAGf,QAAQ4B,SAAS;AAAA,QAC7B,CAAC5B,QAAQ6B,uBAAuB,GAAGzB,YAAY;AAAA,QAC/C,CAACJ,QAAQ8B,iBAAiB,GAAG1B,YAAY;AAAA,MAAA,CAC1C;AAAA,MAAEL,WAEFK,YAAY,YAAYC,6CACvB,OAAA;AAAA,QAAKH,WAAWF,QAAQK;AAAAA,QAAWN,UAAEM;AAAAA,MAAAA,CAAgB,GAEtD,CAAC0B,kBAAAA,QAAS5B,KAAK,IACdA,uCAEC6B,yBAAY;AAAA,QACX5B,SACEA,YAAY,WACR,WACAS,2CAAaoB,cAAcC;AAAAA,QAEjCC,WAAY,IAAGZ;AAAAA,QACfrB,WAAWF,QAAQoC;AAAAA,QAAKrC,UAEvBI;AAAAA,MAAAA,CACW,GAEfJ,YAAYsC,2BAAAA,IAAA,OAAA;AAAA,QAAKnC,WAAWF,QAAQsC;AAAAA,QAAQvC;AAAAA,MAAAA,CAAgB,CAAC;AAAA,IAAA,CAC3D;AAAA,EAAA,CACF;AAET;;;"}

package/dist/cjs/components/GlobalActions/GlobalActions.styles.cjs

@@ -33,8 +33,7 @@ const {
     backdropFilter: "blur(1px)"
   },
   wrapper: {
-    height: 52,
-    paddingRight: uikitStyles.theme.space.xs,
+    padding: uikitStyles.theme.space.sm,
     display: "flex",
     justifyContent: "flex-start",
     alignItems: "center",
@@ -47,7 +46,6 @@ const {
     left: 0,
     background: uikitStyles.theme.colors.atmo1,
     width: "100%",
-    padding: uikitStyles.theme.space.xs,
     marginTop: uikitStyles.theme.space.xs
   },
   globalSectionArea: {
@@ -64,11 +62,8 @@ const {
   actions: {
     display: "flex",
     alignItems: "center",
-    justifyContent: "flex-end",
     marginLeft: "auto",
-    "& > *:not(:first-child) ": {
-      marginLeft: uikitStyles.theme.space.xs
-    }
+    gap: uikitStyles.theme.space.xs
   }
 });
 exports.staticClasses = staticClasses;

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

@@ -1 +1 @@
-{"version":3,"file":"GlobalActions.styles.cjs","sources":["../../../../src/components/GlobalActions/GlobalActions.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvGlobalActions\", {\n  root: {\n    position: \"relative\",\n  },\n  positionSticky: {\n    width: \"100%\",\n    position: \"sticky\",\n  },\n  positionFixed: {\n    width: \"100%\",\n    position: \"fixed\",\n  },\n  global: {\n    zIndex: `calc(${theme.zIndices.banner} - 2)`,\n    top: 0,\n    left: 0,\n    \"&:before\": {\n      content: \"''\",\n      display: \"flex\",\n      width: \"100%\",\n      height: 72,\n      top: 0,\n      background: theme.colors.atmo2,\n      opacity: \"75%\",\n    },\n    backdropFilter: \"blur(1px)\",\n  },\n  wrapper: {\n    height: 52,\n    paddingRight: theme.space.xs,\n    display: \"flex\",\n    justifyContent: \"flex-start\",\n    alignItems: \"center\",\n    border: theme.globalActions.border,\n    borderRadius: theme.globalActions.borderRadius,\n  },\n  globalWrapperComplement: {\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    background: theme.colors.atmo1,\n    width: \"100%\",\n    padding: theme.space.xs,\n    marginTop: theme.space.xs,\n  },\n  globalSectionArea: {\n    backgroundColor: theme.globalActions.sectionBackgroundColor,\n    borderTop: `1px solid ${theme.colors.atmo4}`,\n    paddingLeft: theme.globalActions.sectionPaddingLeft,\n  },\n  backButton: {\n    marginRight: theme.space.xs,\n  },\n  name: {\n    flexGrow: 1,\n  },\n  actions: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"flex-end\",\n    marginLeft: \"auto\",\n    \"& > *:not(:first-child) \": {\n      marginLeft: theme.space.xs,\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","position","positionSticky","width","positionFixed","global","zIndex","theme","zIndices","banner","top","left","content","display","height","background","colors","atmo2","opacity","backdropFilter","wrapper","paddingRight","space","xs","justifyContent","alignItems","border","globalActions","borderRadius","globalWrapperComplement","atmo1","padding","marginTop","globalSectionArea","backgroundColor","sectionBackgroundColor","borderTop","atmo4","paddingLeft","sectionPaddingLeft","backButton","marginRight","name","flexGrow","actions","marginLeft"],"mappings":";;;;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,mBAAmB;AAAA,EAC5EC,MAAM;AAAA,IACJC,UAAU;AAAA,EACZ;AAAA,EACAC,gBAAgB;AAAA,IACdC,OAAO;AAAA,IACPF,UAAU;AAAA,EACZ;AAAA,EACAG,eAAe;AAAA,IACbD,OAAO;AAAA,IACPF,UAAU;AAAA,EACZ;AAAA,EACAI,QAAQ;AAAA,IACNC,QAAS,QAAOC,YAAAA,MAAMC,SAASC;AAAAA,IAC/BC,KAAK;AAAA,IACLC,MAAM;AAAA,IACN,YAAY;AAAA,MACVC,SAAS;AAAA,MACTC,SAAS;AAAA,MACTV,OAAO;AAAA,MACPW,QAAQ;AAAA,MACRJ,KAAK;AAAA,MACLK,YAAYR,YAAAA,MAAMS,OAAOC;AAAAA,MACzBC,SAAS;AAAA,IACX;AAAA,IACAC,gBAAgB;AAAA,EAClB;AAAA,EACAC,SAAS;AAAA,IACPN,QAAQ;AAAA,IACRO,cAAcd,YAAAA,MAAMe,MAAMC;AAAAA,IAC1BV,SAAS;AAAA,IACTW,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZC,QAAQnB,YAAAA,MAAMoB,cAAcD;AAAAA,IAC5BE,cAAcrB,YAAAA,MAAMoB,cAAcC;AAAAA,EACpC;AAAA,EACAC,yBAAyB;AAAA,IACvB5B,UAAU;AAAA,IACVS,KAAK;AAAA,IACLC,MAAM;AAAA,IACNI,YAAYR,YAAAA,MAAMS,OAAOc;AAAAA,IACzB3B,OAAO;AAAA,IACP4B,SAASxB,YAAAA,MAAMe,MAAMC;AAAAA,IACrBS,WAAWzB,YAAAA,MAAMe,MAAMC;AAAAA,EACzB;AAAA,EACAU,mBAAmB;AAAA,IACjBC,iBAAiB3B,YAAAA,MAAMoB,cAAcQ;AAAAA,IACrCC,WAAY,aAAY7B,YAAAA,MAAMS,OAAOqB;AAAAA,IACrCC,aAAa/B,YAAAA,MAAMoB,cAAcY;AAAAA,EACnC;AAAA,EACAC,YAAY;AAAA,IACVC,aAAalC,YAAAA,MAAMe,MAAMC;AAAAA,EAC3B;AAAA,EACAmB,MAAM;AAAA,IACJC,UAAU;AAAA,EACZ;AAAA,EACAC,SAAS;AAAA,IACP/B,SAAS;AAAA,IACTY,YAAY;AAAA,IACZD,gBAAgB;AAAA,IAChBqB,YAAY;AAAA,IACZ,4BAA4B;AAAA,MAC1BA,YAAYtC,YAAAA,MAAMe,MAAMC;AAAAA,IAC1B;AAAA,EACF;AACF,CAAC;;;"}
+{"version":3,"file":"GlobalActions.styles.cjs","sources":["../../../../src/components/GlobalActions/GlobalActions.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvGlobalActions\", {\n  root: {\n    position: \"relative\",\n  },\n  positionSticky: {\n    width: \"100%\",\n    position: \"sticky\",\n  },\n  positionFixed: {\n    width: \"100%\",\n    position: \"fixed\",\n  },\n  global: {\n    zIndex: `calc(${theme.zIndices.banner} - 2)`,\n    top: 0,\n    left: 0,\n    \"&:before\": {\n      content: \"''\",\n      display: \"flex\",\n      width: \"100%\",\n      height: 72,\n      top: 0,\n      background: theme.colors.atmo2,\n      opacity: \"75%\",\n    },\n    backdropFilter: \"blur(1px)\",\n  },\n  wrapper: {\n    padding: theme.space.sm,\n    display: \"flex\",\n    justifyContent: \"flex-start\",\n    alignItems: \"center\",\n    border: theme.globalActions.border,\n    borderRadius: theme.globalActions.borderRadius,\n  },\n  globalWrapperComplement: {\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    background: theme.colors.atmo1,\n    width: \"100%\",\n    marginTop: theme.space.xs,\n  },\n  globalSectionArea: {\n    backgroundColor: theme.globalActions.sectionBackgroundColor,\n    borderTop: `1px solid ${theme.colors.atmo4}`,\n    paddingLeft: theme.globalActions.sectionPaddingLeft,\n  },\n  backButton: {\n    marginRight: theme.space.xs,\n  },\n  name: {\n    flexGrow: 1,\n  },\n  actions: {\n    display: \"flex\",\n    alignItems: \"center\",\n    marginLeft: \"auto\",\n    gap: theme.space.xs,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","position","positionSticky","width","positionFixed","global","zIndex","theme","zIndices","banner","top","left","content","display","height","background","colors","atmo2","opacity","backdropFilter","wrapper","padding","space","sm","justifyContent","alignItems","border","globalActions","borderRadius","globalWrapperComplement","atmo1","marginTop","xs","globalSectionArea","backgroundColor","sectionBackgroundColor","borderTop","atmo4","paddingLeft","sectionPaddingLeft","backButton","marginRight","name","flexGrow","actions","marginLeft","gap"],"mappings":";;;;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,mBAAmB;AAAA,EAC5EC,MAAM;AAAA,IACJC,UAAU;AAAA,EACZ;AAAA,EACAC,gBAAgB;AAAA,IACdC,OAAO;AAAA,IACPF,UAAU;AAAA,EACZ;AAAA,EACAG,eAAe;AAAA,IACbD,OAAO;AAAA,IACPF,UAAU;AAAA,EACZ;AAAA,EACAI,QAAQ;AAAA,IACNC,QAAS,QAAOC,YAAAA,MAAMC,SAASC;AAAAA,IAC/BC,KAAK;AAAA,IACLC,MAAM;AAAA,IACN,YAAY;AAAA,MACVC,SAAS;AAAA,MACTC,SAAS;AAAA,MACTV,OAAO;AAAA,MACPW,QAAQ;AAAA,MACRJ,KAAK;AAAA,MACLK,YAAYR,YAAAA,MAAMS,OAAOC;AAAAA,MACzBC,SAAS;AAAA,IACX;AAAA,IACAC,gBAAgB;AAAA,EAClB;AAAA,EACAC,SAAS;AAAA,IACPC,SAASd,YAAAA,MAAMe,MAAMC;AAAAA,IACrBV,SAAS;AAAA,IACTW,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZC,QAAQnB,YAAAA,MAAMoB,cAAcD;AAAAA,IAC5BE,cAAcrB,YAAAA,MAAMoB,cAAcC;AAAAA,EACpC;AAAA,EACAC,yBAAyB;AAAA,IACvB5B,UAAU;AAAA,IACVS,KAAK;AAAA,IACLC,MAAM;AAAA,IACNI,YAAYR,YAAAA,MAAMS,OAAOc;AAAAA,IACzB3B,OAAO;AAAA,IACP4B,WAAWxB,YAAAA,MAAMe,MAAMU;AAAAA,EACzB;AAAA,EACAC,mBAAmB;AAAA,IACjBC,iBAAiB3B,YAAAA,MAAMoB,cAAcQ;AAAAA,IACrCC,WAAY,aAAY7B,YAAAA,MAAMS,OAAOqB;AAAAA,IACrCC,aAAa/B,YAAAA,MAAMoB,cAAcY;AAAAA,EACnC;AAAA,EACAC,YAAY;AAAA,IACVC,aAAalC,YAAAA,MAAMe,MAAMU;AAAAA,EAC3B;AAAA,EACAU,MAAM;AAAA,IACJC,UAAU;AAAA,EACZ;AAAA,EACAC,SAAS;AAAA,IACP/B,SAAS;AAAA,IACTY,YAAY;AAAA,IACZoB,YAAY;AAAA,IACZC,KAAKvC,YAAAA,MAAMe,MAAMU;AAAAA,EACnB;AACF,CAAC;;;"}

package/dist/cjs/components/InlineEditor/InlineEditor.styles.cjs

@@ -31,7 +31,7 @@ const {
     color: uikitStyles.theme.typography.placeholderText.color
   },
   button: {
-    padding: uikitStyles.theme.spacing(["6px", "8px", "5px", "8px"]),
+    padding: uikitStyles.theme.spacing("6px", "8px", "5px", "8px"),
     minHeight: "32px",
     boxSizing: "border-box",
     cursor: "text",
@@ -71,7 +71,7 @@ const {
     width: "32px",
     minWidth: "32px",
     "& svg": {
-      margin: uikitStyles.theme.spacing([0, "8px"])
+      margin: uikitStyles.theme.spacing(0, "xs")
     }
   },
   iconVisible: {