@hitachivantara/uikit-react-core 5.67.0 → 5.68.0

package/dist/cjs/BaseDropdown/BaseDropdown.cjs

@@ -7,9 +7,8 @@ const reactPopper = require("react-popper");
 const ClickAwayListener = require("@mui/material/ClickAwayListener");
 const core = require("@popperjs/core");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
-const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const useControlled = require("../hooks/useControlled.cjs");
-const useDefaultProps = require("../hooks/useDefaultProps.cjs");
 const useForkRef = require("../hooks/useForkRef.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
 const focusableElementFinder = require("../utils/focusableElementFinder.cjs");
@@ -54,7 +53,7 @@ const BaseDropdown = React.forwardRef((props, ref) => {
     setPopperElement,
     setReferenceElement
   } = BaseDropdownContext.useBaseDropdownContext();
-  const { rootId } = uikitReactShared.useTheme();
+  const { rootId } = uikitReactUtils.useTheme();
   const [isOpen, setIsOpen] = useControlled.useControlled(expanded, Boolean(defaultExpanded));
   const handleDropdownHeaderRefProp = useForkRef.useForkRef(
     dropdownHeaderRefProp,
@@ -119,16 +118,15 @@ const BaseDropdown = React.forwardRef((props, ref) => {
       ref: handleDropdownHeaderRef,
       ...dropdownHeaderProps,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.selection, children: placeholder && typeof placeholder === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-          Typography.HvTypography,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
           {
-            className: cx(classes.placeholder, {
+            className: cx(classes.selection, {
               [classes.selectionDisabled]: disabled
             }),
-            variant: "body",
-            children: placeholder
+            children: placeholder && typeof placeholder === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { noWrap: true, className: classes.placeholder, children: placeholder }) : placeholder
           }
-        ) : placeholder }),
+        ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.arrowContainer, children: adornment || /* @__PURE__ */ jsxRuntime.jsx(
           ExpanderComponent,
           {
@@ -252,7 +250,7 @@ const HvBaseDropdown = React.forwardRef(
       placement: placementProp = "right",
       onContainerCreation,
       ...others
-    } = useDefaultProps.useDefaultProps("HvBaseDropdown", props);
+    } = uikitReactUtils.useDefaultProps("HvBaseDropdown", props);
     const placement = `bottom-${placementProp === "right" ? "start" : "end"}`;
     const { modifiers: popperPropsModifiers = [], ...otherPopperProps } = popperProps;
     const [referenceElement, setReferenceElement] = React.useState(null);

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

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const focusUtils = require("../utils/focusUtils.cjs");
-const uikitReactShared = require("@hitachivantara/uikit-react-shared");
-const { useClasses, staticClasses } = uikitReactShared.createClasses("HvBaseDropdown", {
+const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvBaseDropdown", {
   root: { width: "100%", position: "relative" },
   rootDisabled: {
     cursor: "not-allowed",
@@ -47,6 +47,7 @@ const { useClasses, staticClasses } = uikitReactShared.createClasses("HvBaseDrop
   headerDisabled: {
     cursor: "not-allowed",
     pointerEvents: "none",
+    color: uikitStyles.theme.colors.secondary_60,
     border: `1px solid ${uikitStyles.theme.colors.secondary_60}`,
     background: uikitStyles.theme.colors.atmo2,
     "&:hover": {
@@ -56,6 +57,7 @@ const { useClasses, staticClasses } = uikitReactShared.createClasses("HvBaseDrop
   headerReadOnly: {
     cursor: "not-allowed",
     pointerEvents: "none",
+    color: uikitStyles.theme.colors.secondary_80,
     border: `1px solid ${uikitStyles.theme.colors.secondary_60}`,
     background: uikitStyles.theme.colors.atmo2,
     userSelect: "text",
@@ -77,17 +79,14 @@ const { useClasses, staticClasses } = uikitReactShared.createClasses("HvBaseDrop
     height: "30px",
     boxSizing: "border-box",
     paddingLeft: uikitStyles.theme.space.xs,
-    paddingRight: uikitStyles.theme.sizes.sm
+    paddingRight: uikitStyles.theme.sizes.sm,
+    color: "inherit"
   },
+  selectionDisabled: {},
   placeholder: {
     display: "block",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    ...uikitStyles.theme.typography.body,
     color: uikitStyles.theme.colors.secondary_80
   },
-  selectionDisabled: { color: uikitStyles.theme.colors.secondary_60 },
   panel: {
     position: "relative",
     backgroundColor: uikitStyles.theme.colors.atmo1,

package/dist/cjs/BaseInput/BaseInput.cjs

@@ -4,8 +4,8 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const react = require("@emotion/react");
 const MuiInput = require("@mui/material/Input");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const useDefaultProps = require("../hooks/useDefaultProps.cjs");
 const BaseInput_styles = require("./BaseInput.styles.cjs");
 const FormUtils = require("../Forms/FormElement/utils/FormUtils.cjs");
 const FormElementContext = require("../Forms/FormElement/context/FormElementContext.cjs");
@@ -54,7 +54,7 @@ const HvBaseInput = (props) => {
     inputRef,
     inputProps = {},
     ...others
-  } = useDefaultProps.useDefaultProps("HvBaseInput", props);
+  } = uikitReactUtils.useDefaultProps("HvBaseInput", props);
   const { classes, cx } = BaseInput_styles.useClasses(classesProp);
   const formElementContext = React.useContext(FormElementContext.HvFormElementContext);
   const formElementProps = FormUtils.buildFormElementPropsFromContext(

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

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const focusUtils = require("../utils/focusUtils.cjs");
-const uikitReactShared = require("@hitachivantara/uikit-react-shared");
-const { staticClasses, useClasses } = uikitReactShared.createClasses("HvBaseInput", {
+const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseInput", {
   root: {
     display: "inline-block",
     width: "100%",

package/dist/cjs/BaseRadio/BaseRadio.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const MuiRadio = require("@mui/material/Radio");
-const useDefaultProps = require("../hooks/useDefaultProps.cjs");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const BaseRadio_styles = require("./BaseRadio.styles.cjs");
 const icons = require("./icons.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
@@ -35,7 +35,7 @@ const HvBaseRadio = React.forwardRef(
       icon,
       checkedIcon,
       ...others
-    } = useDefaultProps.useDefaultProps("HvBaseRadio", props);
+    } = uikitReactUtils.useDefaultProps("HvBaseRadio", props);
     const { classes, cx } = BaseRadio_styles.useClasses(classesProp);
     const [focusVisible, setFocusVisible] = React.useState(false);
     const onFocusVisibleCallback = React.useCallback(

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

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const focusUtils = require("../utils/focusUtils.cjs");
-const uikitReactShared = require("@hitachivantara/uikit-react-shared");
-const { staticClasses, useClasses } = uikitReactShared.createClasses("HvBaseRadio", {
+const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseRadio", {
   root: {
     padding: 0,
     width: 32,

package/dist/cjs/BaseSwitch/BaseSwitch.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const MuiSwitch = require("@mui/material/Switch");
-const useDefaultProps = require("../hooks/useDefaultProps.cjs");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const BaseSwitch_styles = require("./BaseSwitch.styles.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const MuiSwitch__default = /* @__PURE__ */ _interopDefault(MuiSwitch);
@@ -25,7 +25,7 @@ const HvBaseSwitch = React.forwardRef(
       onFocusVisible,
       onBlur,
       ...others
-    } = useDefaultProps.useDefaultProps("HvBaseSwitch", props);
+    } = uikitReactUtils.useDefaultProps("HvBaseSwitch", props);
     const { classes, cx } = BaseSwitch_styles.useClasses(classesProp);
     const [focusVisible, setFocusVisible] = React.useState(false);
     const onFocusVisibleCallback = React.useCallback(

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

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const focusUtils = require("../utils/focusUtils.cjs");
-const uikitReactShared = require("@hitachivantara/uikit-react-shared");
-const { staticClasses, useClasses } = uikitReactShared.createClasses("HvBaseSwitch", {
+const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseSwitch", {
   root: {
     padding: 0,
     cursor: "pointer",

package/dist/cjs/Box/Box.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const useDefaultProps = require("../hooks/useDefaultProps.cjs");
 const generic = require("../types/generic.cjs");
 const sxFn = (sx) => {
   return typeof sx === "function" ? sx(uikitStyles.theme) : sx;
@@ -16,7 +16,7 @@ const HvBox = generic.fixedForwardRef(function HvBox2(props, ref) {
     classes,
     // Extracted since useDefaultProps creates this prop even if it's not part of the component's API
     ...restProps
-  } = useDefaultProps.useDefaultProps("HvBox", props);
+  } = uikitReactUtils.useDefaultProps("HvBox", props);
   return /* @__PURE__ */ jsxRuntime.jsx(Component, { style: sx ? sxFn(sx) : style, ref, ...restProps, children });
 });
 exports.HvBox = HvBox;

package/dist/cjs/BreadCrumb/BreadCrumb.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const useDefaultProps = require("../hooks/useDefaultProps.cjs");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const BreadCrumb_styles = require("./BreadCrumb.styles.cjs");
 const utils = require("./utils.cjs");
 const PathElement = require("./PathElement/PathElement.cjs");
@@ -20,7 +20,7 @@ const HvBreadCrumb = (props) => {
     component,
     dropDownMenuProps,
     ...others
-  } = useDefaultProps.useDefaultProps("HvBreadCrumb", props);
+  } = uikitReactUtils.useDefaultProps("HvBreadCrumb", props);
   const { classes, cx } = BreadCrumb_styles.useClasses(classesProp);
   const maxVisibleElem = maxVisible && maxVisible < 2 ? 2 : maxVisible;
   let listPath = listRoute.slice();

package/dist/cjs/BreadCrumb/BreadCrumb.styles.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const uikitReactShared = require("@hitachivantara/uikit-react-shared");
-const { staticClasses, useClasses } = uikitReactShared.createClasses("HvBreadCrumb", {
+const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBreadCrumb", {
   root: { display: "flex", alignItems: "center", zIndex: 0 },
   link: {},
   orderedList: {

package/dist/cjs/BreadCrumb/Page/Page.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const Page_styles = require("./Page.styles.cjs");
 const Typography = require("../../Typography/Typography.cjs");
 const OverflowTooltip = require("../../OverflowTooltip/OverflowTooltip.cjs");
@@ -11,7 +11,7 @@ const HvBreadCrumbPage = (props) => {
     onClick,
     elem,
     classes: classesProp
-  } = useDefaultProps.useDefaultProps("HvBreadCrumbPage", props);
+  } = uikitReactUtils.useDefaultProps("HvBreadCrumbPage", props);
   const { classes, cx } = Page_styles.useClasses(classesProp);
   const { label, path, ...others } = elem;
   const handleClick = (event) => {

package/dist/cjs/BreadCrumb/Page/Page.styles.cjs

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const focusUtils = require("../../utils/focusUtils.cjs");
-const uikitReactShared = require("@hitachivantara/uikit-react-shared");
-const { staticClasses, useClasses } = uikitReactShared.createClasses("HvBreadCrumbPage", {
+const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBreadCrumbPage", {
   link: {
     padding: `8px ${uikitStyles.theme.space.xs}`,
     borderRadius: uikitStyles.theme.radii.base,

package/dist/cjs/BreadCrumb/PathElement/PathElement.styles.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactShared = require("@hitachivantara/uikit-react-shared");
-const { staticClasses, useClasses } = uikitReactShared.createClasses("HvPathElement", {
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvPathElement", {
   centerContainer: { display: "flex", alignItems: "center" },
   separatorContainer: {}
 });

package/dist/cjs/BulkActions/BulkActions.cjs

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const uikitReactShared = require("@hitachivantara/uikit-react-shared");
-const useDefaultProps = require("../hooks/useDefaultProps.cjs");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const setId = require("../utils/setId.cjs");
 const BulkActions_styles = require("./BulkActions.styles.cjs");
 const Button = require("../Button/Button.cjs");
@@ -31,9 +30,9 @@ const HvBulkActions = (props) => {
     onSelectAll,
     onSelectAllPages,
     ...others
-  } = useDefaultProps.useDefaultProps("HvBulkActions", props);
+  } = uikitReactUtils.useDefaultProps("HvBulkActions", props);
   const { classes, cx } = BulkActions_styles.useClasses(classesProp);
-  const { activeTheme } = uikitReactShared.useTheme();
+  const { activeTheme } = uikitReactUtils.useTheme();
   const anySelected = numSelected > 0;
   const isSemantic = semantic && anySelected;
   const selectAllLabelComponent = /* @__PURE__ */ jsxRuntime.jsx(

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

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const ActionsGeneric_styles = require("../ActionsGeneric/ActionsGeneric.styles.cjs");
 require("react/jsx-runtime");
 require("react");
 require("@hitachivantara/uikit-react-icons");
-const uikitReactShared = require("@hitachivantara/uikit-react-shared");
-const { staticClasses, useClasses } = uikitReactShared.createClasses("HvBulkActions", {
+const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBulkActions", {
   root: {
     display: "flex",
     alignItems: "center",

package/dist/cjs/Button/Button.cjs

@@ -2,8 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const uikitReactShared = require("@hitachivantara/uikit-react-shared");
-const useDefaultProps = require("../hooks/useDefaultProps.cjs");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const generic = require("../types/generic.cjs");
 const Button_styles = require("./Button.styles.cjs");
 const mapVariant = (variant, theme) => {
@@ -36,9 +35,9 @@ const HvButton = generic.fixedForwardRef(function HvButton2(props, ref) {
     selected,
     style,
     ...others
-  } = useDefaultProps.useDefaultProps("HvButton", props);
+  } = uikitReactUtils.useDefaultProps("HvButton", props);
   const { classes, css, cx } = Button_styles.useClasses(classesProp);
-  const { activeTheme } = uikitReactShared.useTheme();
+  const { activeTheme } = uikitReactUtils.useTheme();
   const variant = mapVariant(
     variantProp ?? (icon ? "secondaryGhost" : "primary"),
     activeTheme?.name

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

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const focusUtils = require("../utils/focusUtils.cjs");
-const uikitReactShared = require("@hitachivantara/uikit-react-shared");
-const { staticClasses, useClasses } = uikitReactShared.createClasses("HvButton", {
+const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvButton", {
   root: {
     display: "inline-flex",
     alignItems: "center",

package/dist/cjs/Calendar/Calendar.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const useDefaultProps = require("../hooks/useDefaultProps.cjs");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const setId = require("../utils/setId.cjs");
 const Calendar_styles = require("./Calendar.styles.cjs");
 const utils = require("./utils.cjs");
@@ -27,7 +27,7 @@ const HvCalendar = (props) => {
     onVisibleDateChange,
     invalidDateLabel,
     ...others
-  } = useDefaultProps.useDefaultProps("HvCalendar", props);
+  } = uikitReactUtils.useDefaultProps("HvCalendar", props);
   const { classes } = Calendar_styles.useClasses(classesProp);
   const { elementId } = React.useContext(FormElementContext.HvFormElementContext);
   const elementValue = React.useContext(FormElementValueContext.HvFormElementValueContext);

package/dist/cjs/Calendar/Calendar.styles.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const uikitReactShared = require("@hitachivantara/uikit-react-shared");
-const { staticClasses, useClasses } = uikitReactShared.createClasses("HvCalendar", {
+const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCalendar", {
   root: {
     display: "flex",
     justifyContent: "center"

package/dist/cjs/Calendar/CalendarHeader/CalendarHeader.cjs

@@ -6,7 +6,7 @@ const dayjs = require("dayjs");
 const customParseFormat = require("dayjs/plugin/customParseFormat");
 const localeData = require("dayjs/plugin/localeData");
 const localizedFormat = require("dayjs/plugin/localizedFormat");
-const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const keyboardUtils = require("../../utils/keyboardUtils.cjs");
 const setId = require("../../utils/setId.cjs");
 const utils = require("../utils.cjs");
@@ -35,7 +35,7 @@ const HvCalendarHeader = (props) => {
     showDayOfWeek = false,
     onFocus,
     invalidDateLabel = "Invalid Date"
-  } = useDefaultProps.useDefaultProps("HvCalendarHeader", props);
+  } = uikitReactUtils.useDefaultProps("HvCalendarHeader", props);
   const { classes, cx } = CalendarHeader_styles.useClasses(classesProp);
   const { elementId } = React.useContext(FormElementContext.HvFormElementContext);
   const elementValue = React.useContext(FormElementValueContext.HvFormElementValueContext);

package/dist/cjs/Calendar/CalendarHeader/CalendarHeader.styles.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const uikitReactShared = require("@hitachivantara/uikit-react-shared");
-const { staticClasses, useClasses } = uikitReactShared.createClasses("HvCalendarHeader", {
+const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCalendarHeader", {
   root: {
     paddingBottom: uikitStyles.theme.space.md,
     "&$invalid": {

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const uikitReactShared = require("@hitachivantara/uikit-react-shared");
-const { staticClasses, useClasses } = uikitReactShared.createClasses(
+const { staticClasses, useClasses } = uikitReactUtils.createClasses(
   "HvComposedNavigation",
   {
     navigationContainer: {

package/dist/cjs/Calendar/CalendarNavigation/MonthSelector/MonthSelector.styles.cjs

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const focusUtils = require("../../../utils/focusUtils.cjs");
-const uikitReactShared = require("@hitachivantara/uikit-react-shared");
 const hover = {
   backgroundColor: uikitStyles.theme.colors.atmo3,
   cursor: "pointer"
 };
-const { staticClasses, useClasses } = uikitReactShared.createClasses("HvMonthSelector", {
+const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvMonthSelector", {
   calendarMonthlyGrid: {
     marginTop: "50px",
     marginLeft: "-16px",

package/dist/cjs/Calendar/CalendarNavigation/Navigation/Navigation.styles.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const uikitReactShared = require("@hitachivantara/uikit-react-shared");
-const { staticClasses, useClasses } = uikitReactShared.createClasses("HvNavigation", {
+const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvNavigation", {
   root: {
     display: "flex",
     alignItems: "center",

package/dist/cjs/Calendar/SingleCalendar/CalendarCell.cjs

@@ -2,7 +2,7 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const utils = require("../utils.cjs");
 const CalendarCell_styles = require("./CalendarCell.styles.cjs");
 const Typography = require("../../Typography/Typography.cjs");
@@ -21,7 +21,7 @@ const HvCalendarCell = (props) => {
     maximumDate,
     rangeMode = false,
     ...others
-  } = useDefaultProps.useDefaultProps("HvCalendarCell", props);
+  } = uikitReactUtils.useDefaultProps("HvCalendarCell", props);
   const { classes, cx } = CalendarCell_styles.useClasses(classesProp);
   const buttonEl = React.useRef(null);
   const startDate = utils.isDateRangeProp(calendarValue) ? calendarValue.startDate : void 0;

package/dist/cjs/Calendar/SingleCalendar/CalendarCell.styles.cjs

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const focusUtils = require("../../utils/focusUtils.cjs");
-const uikitReactShared = require("@hitachivantara/uikit-react-shared");
 const hover = {
   backgroundColor: uikitStyles.theme.colors.containerBackgroundHover,
   cursor: "pointer"
 };
-const { staticClasses, useClasses } = uikitReactShared.createClasses("HvCalendarCell", {
+const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCalendarCell", {
   cellContainer: {
     cursor: "pointer",
     border: 0,

package/dist/cjs/Calendar/SingleCalendar/SingleCalendar.styles.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const uikitReactShared = require("@hitachivantara/uikit-react-shared");
-const { staticClasses, useClasses } = uikitReactShared.createClasses("HvSingleCalendar", {
+const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSingleCalendar", {
   calendarContainer: {
     width: "318px",
     minHeight: "440px",

package/dist/cjs/Card/Card.cjs

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const useDefaultProps = require("../hooks/useDefaultProps.cjs");
 const Card_styles = require("./Card.styles.cjs");
 const HvCard = (props) => {
   const {
     classes: classesProp,
+    style,
     className,
     children,
     icon,
@@ -15,17 +16,20 @@ const HvCard = (props) => {
     statusColor = "sema0",
     bgcolor,
     ...others
-  } = useDefaultProps.useDefaultProps("HvCard", props);
-  const { classes, css, cx } = Card_styles.useClasses(classesProp);
+  } = uikitReactUtils.useDefaultProps("HvCard", props);
+  const { classes, cx } = Card_styles.useClasses(classesProp);
+  const barColor = statusColor !== "sema0" && statusColor || selected && "secondary" || "atmo4";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
+      style: uikitReactUtils.mergeStyles(style, {
+        "--bg-color": uikitStyles.getColor(bgcolor),
+        "--bar-height": `${selected ? 4 : 2}px`,
+        "--bar-color": uikitStyles.getColor(barColor)
+      }),
       className: cx(
         "HvIsCardGridElement",
         classes.root,
-        css({
-          backgroundColor: uikitStyles.getColor(bgcolor)
-        }),
         {
           [classes.selectable]: selectable,
           [classes.selected]: selected
@@ -35,18 +39,7 @@ const HvCard = (props) => {
       ...others,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.semanticContainer, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: cx(
-                css({
-                  height: selected ? 4 : 2,
-                  backgroundColor: statusColor === "sema0" ? selected ? uikitStyles.theme.colors.secondary : uikitStyles.theme.colors.atmo4 : uikitStyles.theme.colors[statusColor]
-                }),
-                classes.semanticBar
-              )
-            }
-          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.semanticBar }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.icon, children: icon })
         ] }),
         children

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

@@ -1,14 +1,15 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const focusUtils = require("../utils/focusUtils.cjs");
-const uikitReactShared = require("@hitachivantara/uikit-react-shared");
-const { staticClasses, useClasses } = uikitReactShared.createClasses("HvCard", {
+const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCard", {
   root: {
     overflow: "visible",
     position: "relative",
     outline: `1px solid ${uikitStyles.theme.colors.atmo4}`,
     borderRadius: `0px 0px ${uikitStyles.theme.radii.round} ${uikitStyles.theme.radii.round}`,
+    backgroundColor: "var(--bg-color)",
     "&:focus-visible": {
       ...focusUtils.outlineStyles
     },
@@ -42,6 +43,8 @@ const { staticClasses, useClasses } = uikitReactShared.createClasses("HvCard", {
     right: uikitStyles.theme.space.xs
   },
   semanticBar: {
+    backgroundColor: "var(--bar-color)",
+    height: "var(--bar-height)",
     width: "100%",
     top: -1,
     right: 0

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const uikitReactShared = require("@hitachivantara/uikit-react-shared");
-const { staticClasses, useClasses } = uikitReactShared.createClasses("HvCardContent", {
+const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCardContent", {
   content: {
     padding: `0 ${uikitStyles.theme.space.sm} 15px ${uikitStyles.theme.space.sm}`,
     "&:last-child": {