@hitachivantara/uikit-react-core 5.90.0 → 5.91.0

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

@@ -11,7 +11,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseSwitc
     height: "32px",
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: uikitStyles.theme.radii.base,
+    borderRadius: uikitStyles.theme.radii.round,
     "&:hover": {
       backgroundColor: uikitStyles.theme.colors.bgHover
     },
@@ -24,7 +24,11 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseSwitc
         transform: "translateX(16px)",
         "& + $track": {
           opacity: 1,
-          backgroundColor: uikitStyles.theme.colors.text
+          backgroundColor: uikitStyles.theme.colors.primary,
+          borderColor: "transparent"
+        },
+        "& $thumb:not:has($disabled)": {
+          borderColor: "transparent"
         },
         "&:hover": {
           backgroundColor: "transparent"
@@ -37,7 +41,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseSwitc
         "& + $track": {
           opacity: 1,
           backgroundColor: uikitStyles.theme.colors.bgDisabled,
-          border: `solid 1px ${uikitStyles.theme.colors.textDisabled}`
+          border: `solid 1px ${uikitStyles.theme.colors.borderDisabled}`
         }
       }
     }
@@ -57,18 +61,18 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseSwitc
   },
   track: {
     opacity: 1,
-    borderRadius: "15px",
+    borderRadius: uikitStyles.theme.radii.full,
     height: "16px",
     width: "32px",
-    border: `solid 1px ${uikitStyles.theme.colors.text}`,
+    border: `solid 1px ${uikitStyles.theme.colors.borderStrong}`,
     backgroundColor: uikitStyles.theme.colors.bgContainer
   },
   thumb: {
     position: "relative",
     left: "-9px",
-    width: "12px",
-    height: "12px",
-    border: `solid 1px ${uikitStyles.theme.colors.text}`,
+    width: "10px",
+    height: "10px",
+    border: `solid 1px ${uikitStyles.theme.colors.borderStrong}`,
     backgroundColor: uikitStyles.theme.colors.bgContainer,
     marginLeft: "2px",
     marginTop: 0,

package/dist/cjs/BulkActions/BulkActions.styles.cjs

@@ -28,9 +28,10 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBulkActio
     display: "inline-flex",
     marginLeft: "auto",
     [`& .${ActionsGeneric_styles.staticClasses.dropDownMenuButton}:disabled`]: {
-      backgroundColor: "transparent",
-      borderColor: "transparent",
-      "&:hover": { backgroundColor: "transparent", borderColor: "transparent" }
+      "&,:hover": {
+        backgroundColor: "transparent",
+        borderColor: "transparent"
+      }
     }
   },
   selectAllContainer: { display: "flex", alignItems: "center" },

package/dist/cjs/Button/Button.styles.cjs

@@ -26,22 +26,24 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvButton",
     ...uikitStyles.theme.typography.label,
     color: "var(--color, currentcolor)",
     backgroundColor: "transparent",
-    height: "var(--HvButton-height)",
+    height: "var(--HvButton-height, fit-content)",
     border: "1px solid transparent",
     borderRadius: `var(--radius, ${uikitStyles.theme.radii.base})`,
-    padding: uikitStyles.theme.spacing(0, "sm")
+    padding: uikitStyles.theme.spacing(0, "sm"),
+    "& $startIcon, & $endIcon": {
+      flexShrink: 0,
+      lineHeight: 0,
+      marginTop: -1,
+      marginBottom: -1
+    }
   },
   /** applied to the _left_ icon container */
   startIcon: {
-    marginLeft: uikitStyles.theme.spacing(-1),
-    marginTop: -1,
-    marginBottom: -1
+    marginLeft: uikitStyles.theme.spacing(-1)
   },
   /** applied to the _right_ icon container */
   endIcon: {
-    marginRight: uikitStyles.theme.spacing(-1),
-    marginTop: -1,
-    marginBottom: -1
+    marginRight: uikitStyles.theme.spacing(-1)
   },
   focusVisible: {},
   /** applied to the root element when disabled */
@@ -59,10 +61,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvButton",
   icon: {
     margin: 0,
     padding: 0,
-    height: "fit-content",
-    "& > *": {
-      margin: -1
-    }
+    width: "var(--HvButton-height, fit-content)"
   },
   /** applied to the root element when using the `contained` variant */
   contained: {

package/dist/cjs/Card/Card.styles.cjs

@@ -19,12 +19,12 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCard", {
   },
   selected: {
     "&,&:hover,&:focus": {
-      outline: `1px solid ${uikitStyles.theme.colors.text}`
+      outlineColor: uikitStyles.theme.colors.text
     }
   },
   selectable: {
     "&:hover": {
-      outline: `1px solid ${uikitStyles.theme.colors.primary}`
+      outlineColor: uikitStyles.theme.colors.primary
     }
   },
   semanticContainer: {

package/dist/cjs/CheckBox/CheckBox.cjs

@@ -101,7 +101,7 @@ const HvCheckBox = React.forwardRef(
         id: hasLabel ? setId.setId(elementId, "input") : setId.setId(id, "input"),
         name,
         className: cx(classes.checkbox, {
-          [classes.invalidCheckbox]: isStateInvalid,
+          [classes.invalidCheckbox]: !label && isStateInvalid,
           [classes.checked]: isChecked,
           [classes.indeterminate]: isIndeterminate,
           [classes.semantic]: semantic

package/dist/cjs/CheckBox/CheckBox.styles.cjs

@@ -17,7 +17,10 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCheckBox"
   },
   disabled: {
     cursor: "not-allowed",
-    "& $label": { color: uikitStyles.theme.colors.textDisabled, cursor: "not-allowed" }
+    "& $label": { color: uikitStyles.theme.colors.textDisabled, cursor: "not-allowed" },
+    "&:hover": {
+      backgroundColor: "transparent"
+    }
   },
   focusVisible: {
     ...focusUtils.outlineStyles,
@@ -38,9 +41,15 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCheckBox"
   },
   checkbox: { height: "32px" },
   invalidCheckbox: {
-    borderBottom: `1px solid ${uikitStyles.theme.form.errorColor}`,
-    borderBottomLeftRadius: "0px",
-    borderBottomRightRadius: "0px"
+    "::after": {
+      content: '""',
+      position: "absolute",
+      bottom: 0,
+      left: 0,
+      width: "100%",
+      height: 1,
+      backgroundColor: uikitStyles.theme.form.errorColor
+    }
   },
   label: {
     overflow: "hidden",

package/dist/cjs/ColorPicker/PresetColors/PresetColors.cjs

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const common = require("react-color/lib/components/common");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const uikitStyles = require("@hitachivantara/uikit-styles");
 const PresetColors_styles = require("./PresetColors.styles.cjs");
 const Typography = require("../../Typography/Typography.cjs");
 const PresetColors = (props) => {
@@ -30,6 +31,7 @@ const PresetColors = (props) => {
           common.Swatch,
           {
             color,
+            style: { backgroundColor: uikitStyles.getColor(color) },
             onClick: handleClick,
             focusStyle: {
               boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`

package/dist/cjs/ColorPicker/SavedColors/SavedColors.cjs

@@ -5,7 +5,7 @@ const common = require("react-color/lib/components/common");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const SavedColors_styles = require("./SavedColors.styles.cjs");
-const Button = require("../../Button/Button.cjs");
+const IconButton = require("../../IconButton/IconButton.cjs");
 const SavedColors = (props) => {
   const {
     colors,
@@ -25,13 +25,12 @@ const SavedColors = (props) => {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.root, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      Button.HvButton,
+      IconButton.HvIconButton,
       {
         className: classes.addButton,
         variant: "secondarySubtle",
-        icon: true,
         onClick: onAddColor,
-        "aria-label": addButtonAriaLabel,
+        title: addButtonAriaLabel,
         children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Add, { "aria-hidden": true })
       }
     ),
@@ -51,12 +50,12 @@ const SavedColors = (props) => {
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.removeButtonRoot, children: /* @__PURE__ */ jsxRuntime.jsx(
-            Button.HvButton,
+            IconButton.HvIconButton,
             {
               className: classes.removeButton,
               variant: "secondarySubtle",
               onClick: () => onRemoveColor(color, index),
-              "aria-label": deleteButtonAriaLabel,
+              title: deleteButtonAriaLabel,
               children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CloseXS, { "aria-hidden": true, iconSize: "XS" })
             }
           ) })

package/dist/cjs/DatePicker/DatePicker.cjs

@@ -298,7 +298,7 @@ const HvDatePicker = React.forwardRef(
               onClickOutside: handleCalendarClose,
               onContainerCreation: focusOnContainer,
               placeholder: dateString || placeholder || "",
-              adornment: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Calendar, { className: classes.icon, color: "currentcolor" }),
+              adornment: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Calendar, { className: classes.icon }),
               popperProps: {
                 modifiers: [
                   { name: "preventOverflow", enabled: escapeWithReference }

package/dist/cjs/DatePicker/DatePicker.styles.cjs

@@ -24,7 +24,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDatePicke
   panel: {},
   dropdownHeaderInvalid: {
     "&,:hover": {
-      border: `1px solid ${uikitStyles.theme.form.errorColor}`
+      borderColor: uikitStyles.theme.form.errorColor
     }
   },
   dropdownHeaderOpen: {},

package/dist/cjs/DotPagination/DotPagination.cjs

@@ -2,23 +2,21 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const helpers = require("../utils/helpers.cjs");
 const DotPagination_styles = require("./DotPagination.styles.cjs");
 const RadioGroup = require("../RadioGroup/RadioGroup.cjs");
-const Radio = require("../Radio/Radio.cjs");
+const BaseRadio = require("../BaseRadio/BaseRadio.cjs");
+const currentStep = /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 8 }, children: /* @__PURE__ */ jsxRuntime.jsx("div", {}) });
+const otherStep = /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 4 }, children: /* @__PURE__ */ jsxRuntime.jsx("div", {}) });
 const getSelectorIcons = (radioIcon, radioCheckedIcon, classes) => {
   return {
-    radio: React.cloneElement(radioIcon || /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.OtherStep, { width: 8, height: 8 }), {
+    radio: React.cloneElement(radioIcon || otherStep, {
       className: classes?.icon
     }),
-    radioChecked: React.cloneElement(
-      radioCheckedIcon || /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CurrentStep, { width: 8, height: 8 }),
-      {
-        className: classes?.icon
-      }
-    )
+    radioChecked: React.cloneElement(radioCheckedIcon || currentStep, {
+      className: classes?.icon
+    })
   };
 };
 const HvDotPagination = (props) => {
@@ -45,18 +43,15 @@ const HvDotPagination = (props) => {
       orientation: "horizontal",
       ...others,
       children: helpers.range(pages).map((i) => /* @__PURE__ */ jsxRuntime.jsx(
-        Radio.HvRadio,
+        BaseRadio.HvBaseRadio,
         {
-          classes: {
-            radio: classes.radio,
-            root: classes.radioRoot
-          },
+          className: cx(classes.radioRoot, classes.radio),
           value: i,
           checked: page === i,
           onChange: (event) => onPageChange?.(event, i),
           icon: icons.radio,
           checkedIcon: icons.radioChecked,
-          "aria-label": getItemAriaLabel?.(i)
+          inputProps: { "aria-label": getItemAriaLabel?.(i) }
         },
         i
       ))

package/dist/cjs/DotPagination/DotPagination.styles.cjs

@@ -8,20 +8,25 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvDotPagina
     justifyContent: "center"
   },
   horizontal: {
-    width: "auto"
+    width: "auto",
+    gap: uikitStyles.theme.space.xs
   },
+  /** @deprecated use `classes.radio` instead */
   radioRoot: {},
   radio: {
     height: 16,
     width: 16,
-    minWidth: 16,
+    minWidth: 24,
+    minHeight: 24,
     color: "inherit",
     "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.infoDimmed,
       borderRadius: uikitStyles.theme.radii.full
     }
   },
   icon: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
     minWidth: 0,
     width: 16,
     height: 16,
@@ -31,6 +36,13 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvDotPagina
       border: "none",
       width: "unset",
       height: "unset"
+    },
+    "& > div": {
+      color: uikitStyles.theme.colors.text,
+      backgroundColor: "currentcolor",
+      width: "1em",
+      height: "1em",
+      borderRadius: "50%"
     }
   }
 });

package/dist/cjs/Drawer/Drawer.styles.cjs

@@ -15,8 +15,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDrawer",
   },
   closeButton: {
     position: "absolute",
-    top: uikitStyles.theme.spacing("sm"),
-    right: uikitStyles.theme.spacing("sm")
+    top: uikitStyles.theme.space.sm,
+    right: uikitStyles.theme.space.sm
   }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/DropDownMenu/DropDownMenu.cjs

@@ -84,11 +84,11 @@ const HvDropDownMenu = React.forwardRef(function HvDropDownMenu2(props, ref) {
     {
       ref,
       id,
-      className: cx(classes.container, classes.icon, className, {
+      className: cx(classes.root, classes.container, classes.icon, className, {
         [classes.iconSelected]: open
+        // TODO: rename to open
       }),
       classes: {
-        root: classes.root,
         container: classes.baseContainer,
         panel: classes.menuListRoot
       },

package/dist/cjs/DropDownMenu/DropDownMenu.styles.cjs

@@ -3,25 +3,25 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDropDownMenu", {
+  root: {},
+  /** @deprecated use `classes.root` instead */
   container: {},
   baseContainer: {
+    "--r": uikitStyles.theme.radii.base,
     "&[data-popper-placement=bottom-end] .HvBaseDropdown-panel": {
-      borderRadius: `${uikitStyles.theme.radii.base} 0 ${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base}`
+      borderRadius: "var(--r) 0 var(--r) var(--r)"
     },
     "&[data-popper-placement=bottom-start] .HvBaseDropdown-panel": {
-      borderRadius: `0 ${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base}`
+      borderRadius: "0 var(--r) var(--r) var(--r)"
     },
     "&[data-popper-placement=top-start] .HvBaseDropdown-panel": {
-      borderRadius: `${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base} 0`
+      borderRadius: "var(--r) var(--r) var(--r) 0"
     },
     "&[data-popper-placement=top-end] .HvBaseDropdown-panel": {
-      borderRadius: `${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base} 0 ${uikitStyles.theme.radii.base}`
+      borderRadius: "var(--r) var(--r) 0 var(--r)"
     }
   },
-  root: {
-    display: "inline-block",
-    width: "auto"
-  },
+  /** @deprecated use `classes.root` instead */
   icon: {},
   iconSelected: {
     boxShadow: uikitStyles.theme.colors.shadow

package/dist/cjs/Dropdown/Dropdown.styles.cjs

@@ -26,14 +26,13 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDropdown"
   },
   dropdown: {
     width: "100%",
-    borderRadius: uikitStyles.theme.radii.base,
-    "& $dropdownHeaderInvalid": {
-      border: `1px solid ${uikitStyles.theme.form.errorColor}`
-    }
+    borderRadius: uikitStyles.theme.radii.base
   },
   arrow: {},
   dropdownHeader: {},
-  dropdownHeaderInvalid: {},
+  dropdownHeaderInvalid: {
+    borderColor: uikitStyles.theme.form.errorColor
+  },
   dropdownHeaderOpen: {},
   dropdownListContainer: {},
   rootList: {},
@@ -42,7 +41,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDropdown"
   },
   readOnly: {
     "& $dropdownHeader": {
-      border: `1px solid ${uikitStyles.theme.colors.textSubtle}`,
+      borderColor: uikitStyles.theme.colors.textSubtle,
       backgroundColor: uikitStyles.theme.colors.bgContainer
     }
   }

package/dist/cjs/DropdownButton/DropdownButton.cjs

@@ -19,7 +19,7 @@ const HvDropdownButton = React.forwardRef(function HvDropdownButton2(props, ref)
     variant,
     ...others
   } = uikitReactUtils.useDefaultProps("HvDropdownButton", props);
-  const { classes, cx } = DropdownButton_styles.useClasses(classesProp);
+  const { classes, cx } = DropdownButton_styles.useClasses(classesProp, false);
   const endIcon = icon ? void 0 : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, { size: "XS", rotate: open });
   return /* @__PURE__ */ jsxRuntime.jsx(
     Button.HvButton,
@@ -27,12 +27,11 @@ const HvDropdownButton = React.forwardRef(function HvDropdownButton2(props, ref)
       ref,
       icon,
       disabled: disabled || readOnly,
+      "data-popper-placement": placement,
       className: cx(
         classes.root,
         {
           [classes.open]: open,
-          [classes.openUp]: open && placement.includes("top"),
-          [classes.openDown]: open && placement.includes("bottom"),
           [classes.disabled]: disabled,
           [classes.readOnly]: readOnly
         },

package/dist/cjs/DropdownButton/DropdownButton.styles.cjs

@@ -5,9 +5,7 @@ const uikitStyles = require("@hitachivantara/uikit-styles");
 const Button_styles = require("../Button/Button.styles.cjs");
 require("../Button/Button.cjs");
 const disabledStyle = {
-  backgroundColor: uikitStyles.theme.colors.bgDisabled,
-  borderColor: uikitStyles.theme.colors.bgDisabled,
-  [`&.${Button_styles.staticClasses.subtle},&.${Button_styles.staticClasses.ghost}`]: {
+  [`&,&.${Button_styles.staticClasses.subtle},&.${Button_styles.staticClasses.ghost}`]: {
     backgroundColor: uikitStyles.theme.colors.bgDisabled,
     borderColor: uikitStyles.theme.colors.bgDisabled,
     "&:hover": { backgroundColor: uikitStyles.theme.colors.bgDisabled }
@@ -32,13 +30,14 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDropdownB
     ...disabledStyle
   },
   open: {
-    backgroundColor: uikitStyles.theme.colors.bgContainer
-  },
-  openUp: {
-    borderRadius: `0px 0px ${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base}`
-  },
-  openDown: {
-    borderRadius: `${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base} 0px 0px`
+    "--r": uikitStyles.theme.radii.base,
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
+    "&[data-popper-placement*='top']": {
+      borderRadius: "0px 0px var(--r) var(--r)"
+    },
+    "&[data-popper-placement*='bottom']": {
+      borderRadius: "var(--r) var(--r) 0px 0px"
+    }
   },
   selection: {
     color: "inherit",

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

@@ -61,8 +61,10 @@ const HvFile = (props) => {
       }
     ),
     statusIcon,
-    /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { className: classes.nameText, variant: "label", children: data.name }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes.progressTextContainer, children: progressText }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.nameText, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { noWrap: true, variant: "label", children: data.name }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes.progressTextContainer, children: progressText })
+    ] }),
     data.preview && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.previewContainer, children: data.preview }),
     /* @__PURE__ */ jsxRuntime.jsx(
       IconButton.HvIconButton,

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

@@ -3,7 +3,16 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvFile", {
-  root: {},
+  root: {
+    position: "relative",
+    display: "flex",
+    gap: uikitStyles.theme.space.xs,
+    alignItems: "center",
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
+    padding: uikitStyles.theme.space.xs,
+    border: `1px solid ${uikitStyles.theme.colors.border}`,
+    borderRadius: `0px 0px ${uikitStyles.theme.radii.round} ${uikitStyles.theme.radii.round}`
+  },
   progressbar: {
     position: "absolute",
     top: "-1px"
@@ -13,23 +22,18 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvFile", {
   },
   progressbarBack: {},
   nameText: {
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap"
+    display: "flex",
+    alignItems: "center",
+    flex: 1
   },
   progressTextContainer: {
     display: "flex",
     flexGrow: 1,
     alignItems: "center"
   },
-  removeButton: {
-    width: 32,
-    height: 32,
-    margin: `0px ${uikitStyles.theme.space.xs}`
-  },
+  removeButton: {},
   previewContainer: {
     display: "flex",
-    margin: `0px ${uikitStyles.theme.space.xs}`,
     width: "48px",
     height: "48px",
     justifyContent: "center",
@@ -50,9 +54,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvFile", {
     }
   },
   icon: {
-    width: 32,
-    height: 32,
-    margin: `0px ${uikitStyles.theme.space.xs}`
+    margin: uikitStyles.theme.space.xs
   },
   fail: {}
 });

package/dist/cjs/FileUploader/FileList/FileList.cjs

@@ -16,7 +16,7 @@ const HvFileList = (props) => {
   const { classes } = FileList_styles.useClasses(classesProp);
   const hasFiles = list.length > 0;
   if (!hasFiles) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("ul", { id: setId.setId(id, "list"), className: classes.list, children: list.map((data) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("ul", { id: setId.setId(id, "list"), className: classes.root, children: list.map((data) => /* @__PURE__ */ jsxRuntime.jsx(
     File.HvFile,
     {
       classes: { root: classes?.listItem },

package/dist/cjs/FileUploader/FileList/FileList.styles.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvFileList", {
-  list: {
+  root: {
     display: "flex",
     flexDirection: "column",
     gap: uikitStyles.theme.space.xs,
@@ -12,15 +12,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvFileList"
     marginTop: uikitStyles.theme.space.sm,
     listStyle: "none"
   },
-  listItem: {
-    position: "relative",
-    display: "flex",
-    alignItems: "center",
-    background: uikitStyles.theme.colors.bgContainer,
-    padding: `${uikitStyles.theme.space.xs} 0px`,
-    border: `1px solid ${uikitStyles.theme.colors.border}`,
-    borderRadius: `0px 0px ${uikitStyles.theme.radii.round} ${uikitStyles.theme.radii.round}`
-  }
+  listItem: {}
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/Footer/Footer.styles.cjs

@@ -7,7 +7,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvFooter",
     display: "flex",
     alignItems: "center",
     flexDirection: "row",
-    padding: `${uikitStyles.theme.space.xs} ${uikitStyles.theme.space.sm}`,
+    gap: uikitStyles.theme.space.xs,
+    padding: uikitStyles.theme.spacing("xs", "sm"),
     height: 40,
     bottom: 0,
     zIndex: uikitStyles.theme.zIndices.base,
@@ -26,7 +27,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvFooter",
     width: 1,
     height: 16,
     backgroundColor: uikitStyles.theme.colors.text,
-    margin: `${uikitStyles.theme.space.xs} ${uikitStyles.theme.space.sm}`
+    margin: uikitStyles.theme.spacing("xs", "sm")
   },
   small: {
     "&$root": {
@@ -34,17 +35,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvFooter",
       flexDirection: "column",
       padding: uikitStyles.theme.space.xs
     },
-    "& $name": {
-      marginBottom: uikitStyles.theme.space.xs
-    },
     "& $rightContainer": {
-      flexDirection: "column",
-      textAlign: "center",
-      marginLeft: "unset"
-    },
-    "& $copyright": {
-      flexDirection: "column",
-      marginBottom: uikitStyles.theme.space.xs
+      display: "contents"
     },
     "& $separator": { display: "none" }
   }

package/dist/cjs/Header/Header.styles.cjs

@@ -20,7 +20,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvHeader",
     alignItems: "center",
     width: "100%",
     height: "100%",
-    padding: `0 ${uikitStyles.theme.space.sm}`,
+    padding: uikitStyles.theme.spacing(0, "sm"),
     "& > *:not(nav)": {
       zIndex: 2
     }