@hitachivantara/uikit-react-core 5.66.14 → 5.67.1

package/dist/cjs/Accordion/Accordion.styles.cjs

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const classes = require("../utils/classes.cjs");
 const focusUtils = require("../utils/focusUtils.cjs");
-const { staticClasses, useClasses } = classes.createClasses("HvAccordion", {
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+const { staticClasses, useClasses } = uikitReactShared.createClasses("HvAccordion", {
   root: {
     "& + root": {
       paddingTop: 8

package/dist/cjs/ActionBar/ActionBar.styles.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const classes = require("../utils/classes.cjs");
-const { staticClasses, useClasses } = classes.createClasses("HvActionBar", {
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+const { staticClasses, useClasses } = uikitReactShared.createClasses("HvActionBar", {
   root: {
     width: "100%",
     padding: uikitStyles.theme.space.sm,

package/dist/cjs/ActionsGeneric/ActionsGeneric.cjs

@@ -24,8 +24,10 @@ const HvActionsGeneric = (props) => {
     onAction,
     maxVisibleActions = Infinity,
     iconOnly: iconOnlyProp,
+    dropdownMenuProps: dropdownMenuPropsProp,
     ...others
   } = useDefaultProps.useDefaultProps("HvActionsGeneric", props);
+  const { onClick: onClickDropdownMenu, ...dropdownMenuProps } = dropdownMenuPropsProp || {};
   const variant = variantProp || category;
   const { classes, cx } = ActionsGeneric_styles.useClasses(classesProp);
   const handleCallback = (event, id, action) => {
@@ -79,10 +81,14 @@ const HvActionsGeneric = (props) => {
           },
           icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.MoreOptionsVertical, { color: iconColor }),
           placement: "left",
-          onClick: (event, action) => handleCallback(event, idProp || "", action),
+          onClick: (event, action) => {
+            handleCallback(event, idProp || "", action);
+            onClickDropdownMenu?.(event, action);
+          },
           dataList: actsDropdown,
           keepOpened: false,
-          disablePortal: false
+          disablePortal: false,
+          ...dropdownMenuProps
         }
       )
     ] });

package/dist/cjs/ActionsGeneric/ActionsGeneric.styles.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const classes = require("../utils/classes.cjs");
-const { staticClasses, useClasses } = classes.createClasses("HvActionsGeneric", {
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+const { staticClasses, useClasses } = uikitReactShared.createClasses("HvActionsGeneric", {
   root: {},
   button: {
     "&:not(:last-child)": {

package/dist/cjs/AppSwitcher/Action/Action.styles.cjs

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

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

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

package/dist/cjs/Avatar/Avatar.styles.cjs

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const classes = require("../utils/classes.cjs");
 const focusUtils = require("../utils/focusUtils.cjs");
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
 const EXTRA_SMALL = { container: "32px", avatar: "24px" };
 const SMALL = { container: "40px", avatar: "32px" };
 const MEDIUM = { container: "48px", avatar: "40px" };
 const LARGE = { container: "60px", avatar: "52px" };
 const EXTRA_LARGE = { container: "96px", avatar: "88px" };
-const { staticClasses, useClasses } = classes.createClasses("HvAvatar", {
+const { staticClasses, useClasses } = uikitReactShared.createClasses("HvAvatar", {
   root: {
     fontSize: "1rem"
   },

package/dist/cjs/AvatarGroup/AvatarGroup.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const css = require("@emotion/css");
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const Avatar = require("../Avatar/Avatar.cjs");
 const useDefaultProps = require("../hooks/useDefaultProps.cjs");
@@ -49,6 +49,7 @@ const Overflow = ({
   maxVisible,
   size
 }) => {
+  const { css } = uikitReactShared.useCss();
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -63,7 +64,7 @@ const Overflow = ({
           size,
           backgroundColor: uikitStyles.theme.colors.atmo4,
           classes: {
-            avatar: css.css({
+            avatar: css({
               [`&.HvAvatar-${size}`]: {
                 fontSize: getFontSize(size)
               }

package/dist/cjs/AvatarGroup/AvatarGroup.styles.cjs

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
 require("../Avatar/Avatar.cjs");
-const classes = require("../utils/classes.cjs");
 const Avatar_styles = require("../Avatar/Avatar.styles.cjs");
-const { staticClasses, useClasses } = classes.createClasses("HvAvatarGroup", {
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+const { staticClasses, useClasses } = uikitReactShared.createClasses("HvAvatarGroup", {
   root: {
     display: "flex",
     [`& .${Avatar_styles.staticClasses.root}`]: {

package/dist/cjs/Badge/Badge.styles.cjs

@@ -1,14 +1,14 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const classes = require("../utils/classes.cjs");
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
 const labelBaseStyle = {
   ...uikitStyles.theme.typography.label,
   padding: "0 5px",
   color: uikitStyles.theme.colors.atmo1,
   lineHeight: "16px"
 };
-const { staticClasses, useClasses } = classes.createClasses("HvBadge", {
+const { staticClasses, useClasses } = uikitReactShared.createClasses("HvBadge", {
   root: { position: "relative", "&>*": { float: "left" } },
   badgeContainer: { width: 0 },
   badgePosition: {},

package/dist/cjs/Banner/Banner.styles.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const classes = require("../utils/classes.cjs");
-const { useClasses, staticClasses } = classes.createClasses("HvBanner", {
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+const { useClasses, staticClasses } = uikitReactShared.createClasses("HvBanner", {
   /** Styles applied to the component root class when the component is closed. */
   rootClosed: {
     display: "none"

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

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const classes = require("../../../utils/classes.cjs");
 const focusUtils = require("../../../utils/focusUtils.cjs");
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
 const name = "HvBannerActionContainer";
-const { staticClasses, useClasses } = classes.createClasses(name, {
+const { staticClasses, useClasses } = uikitReactShared.createClasses(name, {
   actionContainer: {
     display: "flex",
     flexDirection: "column",

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const classes = require("../../utils/classes.cjs");
-const { useClasses, staticClasses } = classes.createClasses("HvBannerContent", {
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+const { useClasses, staticClasses } = uikitReactShared.createClasses("HvBannerContent", {
   root: {
     minWidth: "100%",
     position: "relative",

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

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const classes = require("../../../utils/classes.cjs");
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
 const name = "HvBannerMessageContainer";
-const { staticClasses, useClasses } = classes.createClasses(name, {
+const { staticClasses, useClasses } = uikitReactShared.createClasses(name, {
   message: {
     color: uikitStyles.theme.colors.base_dark,
     wordBreak: "break-word",

package/dist/cjs/BaseCheckBox/BaseCheckBox.styles.cjs

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

package/dist/cjs/BaseDropdown/BaseDropdown.cjs

@@ -7,10 +7,10 @@ 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 useControlled = require("../hooks/useControlled.cjs");
 const useDefaultProps = require("../hooks/useDefaultProps.cjs");
 const useForkRef = require("../hooks/useForkRef.cjs");
-const useTheme = require("../hooks/useTheme.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
 const focusableElementFinder = require("../utils/focusableElementFinder.cjs");
 const keyboardUtils = require("../utils/keyboardUtils.cjs");
@@ -54,7 +54,7 @@ const BaseDropdown = React.forwardRef((props, ref) => {
     setPopperElement,
     setReferenceElement
   } = BaseDropdownContext.useBaseDropdownContext();
-  const { rootId } = useTheme.useTheme();
+  const { rootId } = uikitReactShared.useTheme();
   const [isOpen, setIsOpen] = useControlled.useControlled(expanded, Boolean(defaultExpanded));
   const handleDropdownHeaderRefProp = useForkRef.useForkRef(
     dropdownHeaderRefProp,

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

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const classes = require("../utils/classes.cjs");
 const focusUtils = require("../utils/focusUtils.cjs");
-const { useClasses, staticClasses } = classes.createClasses("HvBaseDropdown", {
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+const { useClasses, staticClasses } = uikitReactShared.createClasses("HvBaseDropdown", {
   root: { width: "100%", position: "relative" },
   rootDisabled: {
     cursor: "not-allowed",

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

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

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

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

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

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

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

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

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

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const classes = require("../../utils/classes.cjs");
 const focusUtils = require("../../utils/focusUtils.cjs");
-const { staticClasses, useClasses } = classes.createClasses("HvBreadCrumbPage", {
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+const { staticClasses, useClasses } = uikitReactShared.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 classes = require("../../utils/classes.cjs");
-const { staticClasses, useClasses } = classes.createClasses("HvPathElement", {
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+const { staticClasses, useClasses } = uikitReactShared.createClasses("HvPathElement", {
   centerContainer: { display: "flex", alignItems: "center" },
   separatorContainer: {}
 });

package/dist/cjs/BulkActions/BulkActions.cjs

@@ -1,8 +1,8 @@
 "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 useTheme = require("../hooks/useTheme.cjs");
 const setId = require("../utils/setId.cjs");
 const BulkActions_styles = require("./BulkActions.styles.cjs");
 const Button = require("../Button/Button.cjs");
@@ -33,7 +33,7 @@ const HvBulkActions = (props) => {
     ...others
   } = useDefaultProps.useDefaultProps("HvBulkActions", props);
   const { classes, cx } = BulkActions_styles.useClasses(classesProp);
-  const { activeTheme } = useTheme.useTheme();
+  const { activeTheme } = uikitReactShared.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 uikitStyles = require("@hitachivantara/uikit-styles");
-const classes = require("../utils/classes.cjs");
 const ActionsGeneric_styles = require("../ActionsGeneric/ActionsGeneric.styles.cjs");
 require("react/jsx-runtime");
 require("react");
 require("@hitachivantara/uikit-react-icons");
-const { staticClasses, useClasses } = classes.createClasses("HvBulkActions", {
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+const { staticClasses, useClasses } = uikitReactShared.createClasses("HvBulkActions", {
   root: {
     display: "flex",
     alignItems: "center",

package/dist/cjs/Button/Button.cjs

@@ -2,8 +2,8 @@
 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 useTheme = require("../hooks/useTheme.cjs");
 const generic = require("../types/generic.cjs");
 const Button_styles = require("./Button.styles.cjs");
 const mapVariant = (variant, theme) => {
@@ -38,7 +38,7 @@ const HvButton = generic.fixedForwardRef(function HvButton2(props, ref) {
     ...others
   } = useDefaultProps.useDefaultProps("HvButton", props);
   const { classes, css, cx } = Button_styles.useClasses(classesProp);
-  const { activeTheme } = useTheme.useTheme();
+  const { activeTheme } = uikitReactShared.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 uikitStyles = require("@hitachivantara/uikit-styles");
-const classes = require("../utils/classes.cjs");
 const focusUtils = require("../utils/focusUtils.cjs");
-const { staticClasses, useClasses } = classes.createClasses("HvButton", {
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+const { staticClasses, useClasses } = uikitReactShared.createClasses("HvButton", {
   root: {
     display: "inline-flex",
     alignItems: "center",

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

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

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const classes = require("../../utils/classes.cjs");
-const { staticClasses, useClasses } = classes.createClasses("HvCalendarHeader", {
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+const { staticClasses, useClasses } = uikitReactShared.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 uikitStyles = require("@hitachivantara/uikit-styles");
-const classes = require("../../../utils/classes.cjs");
-const { staticClasses, useClasses } = classes.createClasses(
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+const { staticClasses, useClasses } = uikitReactShared.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 uikitStyles = require("@hitachivantara/uikit-styles");
-const classes = require("../../../utils/classes.cjs");
 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 } = classes.createClasses("HvMonthSelector", {
+const { staticClasses, useClasses } = uikitReactShared.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 uikitStyles = require("@hitachivantara/uikit-styles");
-const classes = require("../../../utils/classes.cjs");
-const { staticClasses, useClasses } = classes.createClasses("HvNavigation", {
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+const { staticClasses, useClasses } = uikitReactShared.createClasses("HvNavigation", {
   root: {
     display: "flex",
     alignItems: "center",

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

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const classes = require("../../utils/classes.cjs");
 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 } = classes.createClasses("HvCalendarCell", {
+const { staticClasses, useClasses } = uikitReactShared.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 uikitStyles = require("@hitachivantara/uikit-styles");
-const classes = require("../../utils/classes.cjs");
-const { staticClasses, useClasses } = classes.createClasses("HvSingleCalendar", {
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+const { staticClasses, useClasses } = uikitReactShared.createClasses("HvSingleCalendar", {
   calendarContainer: {
     width: "318px",
     minHeight: "440px",

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

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const classes = require("../utils/classes.cjs");
 const focusUtils = require("../utils/focusUtils.cjs");
-const { staticClasses, useClasses } = classes.createClasses("HvCard", {
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+const { staticClasses, useClasses } = uikitReactShared.createClasses("HvCard", {
   root: {
     overflow: "visible",
     position: "relative",

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

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

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const classes = require("../../utils/classes.cjs");
-const { staticClasses, useClasses } = classes.createClasses("HvCardHeader", {
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+const { staticClasses, useClasses } = uikitReactShared.createClasses("HvCardHeader", {
   root: {
     position: "relative",
     padding: uikitStyles.theme.spacing("12px", "xs", "sm", "sm")

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const classes = require("../../utils/classes.cjs");
-const { staticClasses, useClasses } = classes.createClasses("HvCardMedia", {
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+const { staticClasses, useClasses } = uikitReactShared.createClasses("HvCardMedia", {
   root: { width: "100%" },
   media: {}
 });

package/dist/cjs/Carousel/Carousel.cjs

@@ -4,9 +4,9 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const useCarousel = require("embla-carousel-react");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
 const useDefaultProps = require("../hooks/useDefaultProps.cjs");
 const useLabels = require("../hooks/useLabels.cjs");
-const useTheme = require("../hooks/useTheme.cjs");
 const helpers = require("../utils/helpers.cjs");
 const Carousel_styles = require("./Carousel.styles.cjs");
 const CarouselControls = require("./CarouselControls.cjs");
@@ -47,7 +47,7 @@ const HvCarousel = (props) => {
     onFullscreen,
     ...others
   } = useDefaultProps.useDefaultProps("HvCarousel", props);
-  const { activeTheme } = useTheme.useTheme();
+  const { activeTheme } = uikitReactShared.useTheme();
   const { classes, css, cx } = Carousel_styles.useClasses(classesProp);
   const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProps);
   const thumbnailsRef = React.useRef(null);

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const classes = require("../utils/classes.cjs");
-const { staticClasses, useClasses } = classes.createClasses("HvCarousel", {
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+const { staticClasses, useClasses } = uikitReactShared.createClasses("HvCarousel", {
   /** Styles applied to the component root class. */
   root: {
     display: "flex",

package/dist/cjs/Carousel/CarouselSlide/CarouselSlide.styles.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const classes = require("../../utils/classes.cjs");
-const { staticClasses, useClasses } = classes.createClasses("HvCarouselSlide", {
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+const { staticClasses, useClasses } = uikitReactShared.createClasses("HvCarouselSlide", {
   slide: {},
   image: {
     aspectRatio: "16/9",

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

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