@hitachivantara/uikit-react-core 5.68.0 → 5.69.0

package/dist/cjs/Button/Button.cjs

@@ -40,7 +40,7 @@ const HvButton = generic.fixedForwardRef(function HvButton2(props, ref) {
   const { activeTheme } = uikitReactUtils.useTheme();
   const variant = mapVariant(
     variantProp ?? (icon ? "secondaryGhost" : "primary"),
-    activeTheme?.name
+    activeTheme?.base
   );
   const handleClick = (e) => {
     if (disabled) return;

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

@@ -4,7 +4,7 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCalendarHeader", {
   root: {
-    paddingBottom: uikitStyles.theme.space.md,
+    paddingBottom: uikitStyles.theme.space.sm,
     "&$invalid": {
       paddingBottom: 0
     }

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

@@ -8,7 +8,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
     navigationContainer: {
       display: "flex",
       justifyContent: "space-between",
-      padding: uikitStyles.theme.spacing("xs", 0)
+      paddingBottom: uikitStyles.theme.space.xs
     },
     navigationMonth: {
       minWidth: "160px"

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

@@ -11,6 +11,7 @@ const CalendarCell = require("./CalendarCell.cjs");
 const SingleCalendar_styles = require("./SingleCalendar.styles.cjs");
 const ComposedNavigation = require("../CalendarNavigation/ComposedNavigation/ComposedNavigation.cjs");
 const MonthSelector = require("../CalendarNavigation/MonthSelector/MonthSelector.cjs");
+const Panel = require("../../Panel/Panel.cjs");
 const Typography = require("../../Typography/Typography.cjs");
 const HvSingleCalendar = ({
   classes: classesProp,
@@ -98,7 +99,7 @@ const HvSingleCalendar = ({
       currentDate.toString()
     );
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.calendarContainer, className), ...others, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { id, className: classes.calendarWrapper, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Panel.HvPanel, { id, className: cx(classes.root, className), ...others, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       CalendarHeader.HvCalendarHeader,
       {
@@ -110,7 +111,7 @@ const HvSingleCalendar = ({
         invalidDateLabel
       }
     ),
-    calViewMode === "calendar" && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    calViewMode === "calendar" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         ComposedNavigation.HvComposedNavigation,
         {
@@ -145,7 +146,7 @@ const HvSingleCalendar = ({
         rangeMode
       }
     )
-  ] }) });
+  ] });
 };
 exports.singleCalendarClasses = SingleCalendar_styles.staticClasses;
 exports.HvSingleCalendar = HvSingleCalendar;

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

@@ -3,20 +3,12 @@ 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("HvSingleCalendar", {
-  calendarContainer: {
-    width: "318px",
-    minHeight: "440px",
-    position: "relative"
-  },
-  calendarWrapper: {
-    overflow: "hidden",
-    backgroundColor: uikitStyles.theme.colors.atmo1,
-    padding: uikitStyles.theme.spacing("sm")
+  root: {
+    overflow: "hidden"
   },
   calendarGrid: {
-    display: "flex",
-    flexFlow: "wrap",
-    width: "280px",
+    display: "grid",
+    gridTemplateColumns: "repeat(7, 1fr)",
     "& $cellsInRange": {
       backgroundColor: uikitStyles.theme.colors.atmo3,
       "& $startBookend": {

package/dist/cjs/Calendar/utils.cjs

@@ -30,7 +30,7 @@ const getNextMonth = (month, year) => {
 };
 const getMonthNamesList = (locale, representationValue = "long") => {
   const options = { month: representationValue, timeZone: "UTC" };
-  return [...new Array(12)].map((n, index) => {
+  return [...Array(12).keys()].map((index) => {
     const auxDate = makeUTCDate(1970, index, 1);
     return helpers.capitalize(Intl.DateTimeFormat(locale, options).format(auxDate));
   });
@@ -40,7 +40,7 @@ const getWeekdayNamesList = (locale) => {
     weekday: "narrow",
     timeZone: "UTC"
   });
-  return [...new Array(7)].map((n, index) => {
+  return [...Array(7).keys()].map((index) => {
     return formatter.format(makeUTCDate(1970, 0, 4 + index));
   });
 };
@@ -53,15 +53,15 @@ const createDatesArray = (month, year) => {
   const prevMonthYear = getPreviousMonth(month, year);
   const nextMonthYear = getNextMonth(month, year);
   const prevMonthDays = getMonthDays(prevMonthYear.month, prevMonthYear.year);
-  const prevMonthDates = [...new Array(daysFromPrevMonth)].map((n, index) => {
+  const prevMonthDates = [...Array(daysFromPrevMonth).keys()].map((index) => {
     const day = index + 1 + (prevMonthDays - daysFromPrevMonth);
     return new Date(prevMonthYear.year, prevMonthYear.month - 1, day);
   });
-  const currentMonthDates = [...new Array(monthDays)].map((n, index) => {
+  const currentMonthDates = [...Array(monthDays).keys()].map((index) => {
     const day = index + 1;
     return new Date(year, month - 1, day);
   });
-  const nextMonthDates = [...new Array(daysFromNextMonth)].map((n, index) => {
+  const nextMonthDates = [...Array(daysFromNextMonth).keys()].map((index) => {
     const day = index + 1;
     return new Date(nextMonthYear.year, nextMonthYear.month - 1, day);
   });

package/dist/cjs/Carousel/Carousel.cjs

@@ -6,7 +6,6 @@ const useCarousel = require("embla-carousel-react");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const useLabels = require("../hooks/useLabels.cjs");
-const helpers = require("../utils/helpers.cjs");
 const Carousel_styles = require("./Carousel.styles.cjs");
 const CarouselControls = require("./CarouselControls.cjs");
 const CarouselThumbnails = require("./CarouselThumbnails.cjs");
@@ -51,7 +50,7 @@ const HvCarousel = (props) => {
   const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProps);
   const thumbnailsRef = React.useRef(null);
   const [isFullscreen, setIsFullscreen] = React.useState(false);
-  const isDs3 = activeTheme?.name === "ds3";
+  const isDs3 = activeTheme?.base === "ds3";
   const actionsPosition = isDs3 ? "header" : "controls";
   const controlsPosition = controlsPositionProp ?? (isDs3 ? "bottom" : "top");
   const thumbnailsPosition = thumbnailsPositionProp ?? "bottom";
@@ -93,7 +92,7 @@ const HvCarousel = (props) => {
   React.useEffect(() => {
     if (!controller) return;
     controller.reInit();
-    setSelectedIndex((currentIndex) => helpers.clamp(currentIndex, numSlides));
+    setSelectedIndex((currentIndex) => uikitReactUtils.clamp(currentIndex, numSlides));
   }, [numSlides, controller]);
   const handleFullscreen = (event) => {
     onFullscreen?.(event, !isFullscreen);

package/dist/cjs/Dropdown/List/List.cjs

@@ -31,12 +31,12 @@ const HvDropdownList = (props) => {
     notifyChangesOnFirstRender = false,
     hasTooltips = false,
     singleSelectionToggle,
-    height: dropdownHeight,
+    height: heightProp,
     maxHeight,
     virtualized = false,
     ...others
   } = uikitReactUtils.useDefaultProps("HvDropdownList", props);
-  const { classes, cx, css } = List_styles.useClasses(classesProp);
+  const { classes, cx } = List_styles.useClasses(classesProp);
   const [searchStr, setSearchStr] = React.useState("");
   const [list, setList] = React.useState(clone(values));
   const [allSelected, setAllSelected] = React.useState(false);
@@ -169,6 +169,9 @@ const HvDropdownList = (props) => {
     ] });
   };
   const showList = valuesExist(values);
+  const elementsSize = uikitStyles.theme.spacing(
+    5 + 2 + (showSearch ? 5 : 0) + (showList && multiSelect ? 4 + 6 : 0)
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.rootList, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.listBorderDown }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.listContainer, children: [
@@ -178,26 +181,15 @@ const HvDropdownList = (props) => {
         List.HvList,
         {
           id: setId.setId(id, "list"),
+          style: uikitReactUtils.mergeStyles(void 0, {
+            height: heightProp,
+            "--maxW": width,
+            "--maxH": maxHeight ?? `calc(${height}px - ${elementsSize})`
+          }),
           classes: {
-            root: cx(
-              classes.dropdownListContainer,
-              css({
-                maxWidth: width,
-                maxHeight: maxHeight ?? `calc(${height}px - 32px - ${uikitStyles.theme.space.xs} - ${uikitStyles.theme.space.sm})`,
-                overflow: "auto",
-                padding: 4,
-                margin: -4
-              }),
-              dropdownHeight && css({
-                height: dropdownHeight
-              }),
-              virtualized && css({
-                maxWidth: "inherit",
-                maxHeight: "inherit",
-                overflow: "inherit",
-                padding: 0
-              })
-            )
+            root: cx(classes.dropdownListContainer, {
+              [classes.virtualized]: virtualized
+            })
           },
           values: list,
           multiSelect,
@@ -209,7 +201,7 @@ const HvDropdownList = (props) => {
           selectable: true,
           condensed: true,
           singleSelectionToggle,
-          height: dropdownHeight,
+          height: heightProp,
           virtualized,
           ...others
         }

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

@@ -4,7 +4,19 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDropdownList", {
   rootList: {},
-  dropdownListContainer: {},
+  dropdownListContainer: {
+    overflow: "auto",
+    padding: 4,
+    margin: -4,
+    maxWidth: "var(--maxW)",
+    maxHeight: "var(--maxH)"
+  },
+  virtualized: {
+    maxWidth: "inherit",
+    maxHeight: "inherit",
+    overflow: "inherit",
+    padding: 0
+  },
   searchContainer: { marginBottom: uikitStyles.theme.space.xs },
   listBorderDown: {},
   listContainer: { padding: uikitStyles.theme.space.sm },

package/dist/cjs/Pagination/Pagination.cjs

@@ -6,7 +6,6 @@ const Hidden = require("@mui/material/Hidden");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const useLabels = require("../hooks/useLabels.cjs");
-const helpers = require("../utils/helpers.cjs");
 const setId = require("../utils/setId.cjs");
 const Pagination_styles = require("./Pagination.styles.cjs");
 const Select = require("./Select.cjs");
@@ -70,7 +69,7 @@ const HvPagination = (props) => {
   const [pageInput, setPageInput] = React.useState(page);
   const changePage = React.useCallback(
     (newPage) => {
-      const safePage = Number.isNaN(newPage) ? page : helpers.clamp(newPage, pages - 1);
+      const safePage = Number.isNaN(newPage) ? page : uikitReactUtils.clamp(newPage, pages - 1);
       onPageChange?.(safePage);
       setPageInput(safePage);
     },

package/dist/cjs/ProgressBar/ProgressBar.cjs

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const helpers = require("../utils/helpers.cjs");
 const ProgressBar_styles = require("./ProgressBar.styles.cjs");
 const Typography = require("../Typography/Typography.cjs");
 const HvProgressBar = (props) => {
@@ -16,7 +15,7 @@ const HvProgressBar = (props) => {
     ...others
   } = uikitReactUtils.useDefaultProps("HvProgressBar", props);
   const { classes, cx } = ProgressBar_styles.useClasses(classesProp);
-  const clampedValue = helpers.clamp(value, 100);
+  const clampedValue = uikitReactUtils.clamp(value, 100);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {

package/dist/cjs/Table/TableBody/TableBody.cjs

@@ -26,7 +26,7 @@ const HvTableBody = React.forwardRef(
     const bodyRef = React.useRef(null);
     const handleRef = useForkRef.useForkRef(externalRef, bodyRef);
     const Component = component || tableContext?.components?.TBody || defaultComponent;
-    return /* @__PURE__ */ jsxRuntime.jsx(TableSectionContext.default.Provider, { value: tableSectionContext, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(TableSectionContext.TableSectionContext.Provider, { value: tableSectionContext, children: /* @__PURE__ */ jsxRuntime.jsx(
       Component,
       {
         className: cx(classes.root, className),

package/dist/cjs/Table/TableCell/TableCell.cjs

@@ -31,7 +31,7 @@ const HvTableCell = React.forwardRef(
     } = uikitReactUtils.useDefaultProps("HvTableCell", props);
     const { classes, cx } = TableCell_styles.useClasses(classesProp);
     const tableContext = React.useContext(TableContext.default);
-    const tableSectionContext = React.useContext(TableSectionContext.default);
+    const tableSectionContext = React.useContext(TableSectionContext.TableSectionContext);
     const type = typeProp || tableSectionContext?.type || "body";
     const Component = component || tableContext?.components?.Td || defaultComponent;
     return /* @__PURE__ */ jsxRuntime.jsx(

package/dist/cjs/Table/TableHead/TableHead.cjs

@@ -14,7 +14,7 @@ const HvTableHead = React.forwardRef(
     const { classes, cx } = TableHead_styles.useClasses(classesProp);
     const tableContext = React.useContext(TableContext.default);
     const Component = component || tableContext?.components?.THead || defaultComponent;
-    return /* @__PURE__ */ jsxRuntime.jsx(TableSectionContext.default.Provider, { value: tableSectionContext, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(TableSectionContext.TableSectionContext.Provider, { value: tableSectionContext, children: /* @__PURE__ */ jsxRuntime.jsx(
       Component,
       {
         className: cx(

package/dist/cjs/Table/TableHeader/TableHeader.cjs

@@ -43,7 +43,7 @@ const HvTableHeader = React.forwardRef(
     const { classes, cx, css } = TableHeader_styles.useClasses(classesProp);
     const { colors } = uikitReactUtils.useTheme();
     const tableContext = React.useContext(TableContext.default);
-    const tableSectionContext = React.useContext(TableSectionContext.default);
+    const tableSectionContext = React.useContext(TableSectionContext.TableSectionContext);
     const type = typeProp || tableSectionContext?.type || "body";
     const isHeadCell = type === "head";
     const scope = scopeProp ?? (isHeadCell ? "col" : "row");

package/dist/cjs/Table/TableRow/TableRow.cjs

@@ -21,7 +21,7 @@ const HvTableRow = React.forwardRef(
     } = uikitReactUtils.useDefaultProps("HvTableRow", props);
     const { classes, cx } = TableRow_styles.useClasses(classesProp);
     const tableContext = React.useContext(TableContext.default);
-    const tableSectionContext = React.useContext(TableSectionContext.default);
+    const tableSectionContext = React.useContext(TableSectionContext.TableSectionContext);
     const type = tableSectionContext?.type || "body";
     const isList = tableContext.variant === "listrow";
     const Component = component || tableContext?.components?.Tr || defaultComponent;

package/dist/cjs/Table/TableSectionContext.cjs

@@ -1,5 +1,5 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const TableSectionContext = React.createContext({});
-exports.default = TableSectionContext;
+exports.TableSectionContext = TableSectionContext;

package/dist/cjs/Typography/Typography.cjs

@@ -52,7 +52,7 @@ const HvTypography = generic.fixedForwardRef(function HvTypography2(props, ref)
   } = uikitReactUtils.useDefaultProps("HvTypography", props);
   const { classes, cx } = Typography_styles.useClasses(classesProp);
   const { activeTheme } = uikitReactUtils.useTheme();
-  const variant = utils.mapVariant(variantProp, activeTheme?.name);
+  const variant = utils.mapVariant(variantProp, activeTheme?.base);
   const Component = ComponentProp || paragraph && "p" || HvTypographyMap[variant] || "span";
   return /* @__PURE__ */ jsxRuntime.jsx(
     Component,

package/dist/cjs/providers/ThemeProvider.cjs

@@ -59,7 +59,36 @@ const HvThemeProvider = ({
     ]
   );
   const muiTheme = React.useMemo(() => {
+    const colors = activeTheme.colors.modes[colorMode];
     return styles.createTheme({
+      spacing: activeTheme.space.base,
+      typography: {
+        fontFamily: activeTheme.fontFamily.body
+      },
+      palette: {
+        primary: { main: colors.primary },
+        success: { main: colors.positive },
+        warning: { main: colors.warning },
+        error: { main: colors.negative },
+        info: { main: colors.primary },
+        text: {
+          primary: colors.secondary,
+          secondary: colors.secondary_80,
+          disabled: colors.secondary_60
+        },
+        background: {
+          default: colors.atmo2,
+          paper: colors.atmo1
+        },
+        divider: colors.atmo4,
+        action: {
+          active: colors.primary,
+          hover: colors.primary_80,
+          selected: colors.primary_80,
+          disabled: colors.secondary_60,
+          disabledBackground: colors.atmo3
+        }
+      },
       components: {
         MuiButtonBase: {
           defaultProps: {
@@ -67,11 +96,9 @@ const HvThemeProvider = ({
           }
         }
       },
-      breakpoints: {
-        ...activeTheme.breakpoints
-      }
+      breakpoints: activeTheme.breakpoints
     });
-  }, [activeTheme.breakpoints]);
+  }, [activeTheme, colorMode]);
   const emotionCacheValue = React.useMemo(
     () => ({ cache: emotionCache }),
     [emotionCache]

package/dist/cjs/utils/helpers.cjs

@@ -9,9 +9,6 @@ const range = (length, start = 0) => {
 const capitalize = (string = "") => {
   return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
 };
-const clamp = (value, max = 100, min = 0) => {
-  return Math.min(Math.max(value, min), max);
-};
 function isEqual(obj1, obj2) {
   if (!obj1 || !obj2 || typeof obj1 !== "object" || typeof obj2 !== "object") {
     return obj1 === obj2;
@@ -26,7 +23,6 @@ function isEqual(obj1, obj2) {
   return true;
 }
 exports.capitalize = capitalize;
-exports.clamp = clamp;
 exports.isEqual = isEqual;
 exports.range = range;
 exports.uniqueId = uniqueId;

package/dist/esm/BaseSwitch/BaseSwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseSwitch.js","sources":["../../../src/BaseSwitch/BaseSwitch.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\nimport MuiSwitch, { SwitchProps as MuiSwitchProps } from \"@mui/material/Switch\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { staticClasses, useClasses } from \"./BaseSwitch.styles\";\n\nexport { staticClasses as baseSwitchClasses };\n\nexport type HvBaseSwitchClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseSwitchProps\n  extends Omit<MuiSwitchProps, \"onChange\" | \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the switch.\n   */\n  classes?: HvBaseSwitchClasses;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * The input name.\n   */\n  name?: string;\n  /**\n   * The value of the input.\n   *\n   * Is up to the application's logic when to consider the submission of this value.\n   * Generally it should be used only when the switch is neither unchecked nor indeterminate.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * Indicates that user input is required.\n   */\n  required?: boolean;\n  /**\n   * Indicates that the input is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that the input is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the switch is selected, if set to `false` the switch is not selected.\n   *\n   * When defined the switch state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * The callback fired when the switch is pressed.\n   */\n  onChange?: (event: React.ChangeEvent, checked: boolean, value: any) => void;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible?: (event: React.FocusEvent<any>) => void;\n  /**\n   * @ignore\n   */\n  onBlur?: (event: React.FocusEvent<any>) => void;\n}\n\n/**\n * A Switch is <b>binary</b> and work as a digital on/off button.\n *\n * The Base Switch is a building block of the Switch form element. Don't use unless\n * implementing a custom use case not covered by the Switch form element.\n */\nexport const HvBaseSwitch = forwardRef<HTMLButtonElement, HvBaseSwitchProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n\n      id,\n      name,\n      value = \"on\",\n\n      required = false,\n      readOnly = false,\n      disabled = false,\n\n      checked,\n      defaultChecked,\n\n      onChange,\n\n      inputProps,\n\n      onFocusVisible,\n      onBlur,\n\n      ...others\n    } = useDefaultProps(\"HvBaseSwitch\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const [focusVisible, setFocusVisible] = useState(false);\n\n    const onFocusVisibleCallback = useCallback(\n      (evt: React.FocusEvent<any, Element>) => {\n        setFocusVisible(true);\n        onFocusVisible?.(evt);\n      },\n      [onFocusVisible],\n    );\n\n    const onBlurCallback = useCallback(\n      (evt: React.FocusEvent<any, Element>) => {\n        setFocusVisible(false);\n        onBlur?.(evt);\n      },\n      [onBlur],\n    );\n\n    const onLocalChange = useCallback(\n      (evt: React.ChangeEvent<HTMLInputElement>) => {\n        if (readOnly) {\n          return;\n        }\n\n        onChange?.(evt, evt.target.checked, value);\n      },\n      [onChange, readOnly, value],\n    );\n\n    return (\n      <MuiSwitch\n        ref={ref}\n        id={id}\n        name={name}\n        className={cx(\n          classes.root,\n          {\n            [classes.disabled]: disabled,\n            [classes.readOnly]: readOnly,\n            [classes.focusVisible]: focusVisible,\n          },\n          className,\n        )}\n        color=\"default\"\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        disableRipple\n        onChange={onLocalChange}\n        value={value}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        classes={{\n          root: classes.switch,\n          switchBase: classes.switchBase,\n          checked: classes.checked,\n          track: classes.track,\n          thumb: classes.thumb,\n          disabled: classes.disabled,\n        }}\n        inputProps={inputProps}\n        onFocusVisible={onFocusVisibleCallback}\n        onBlur={onBlurCallback}\n        {...others}\n      />\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;AAuFO,MAAM,eAAe;AAAA,EAC1B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MAEA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MAER,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MAEX;AAAA,MACA;AAAA,MAEA;AAAA,MAEA;AAAA,MAEA;AAAA,MACA;AAAA,MAEA,GAAG;AAAA,IAAA,IACD,gBAAgB,gBAAgB,KAAK;AAEzC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,UAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,UAAM,yBAAyB;AAAA,MAC7B,CAAC,QAAwC;AACvC,wBAAgB,IAAI;AACpB,yBAAiB,GAAG;AAAA,MACtB;AAAA,MACA,CAAC,cAAc;AAAA,IAAA;AAGjB,UAAM,iBAAiB;AAAA,MACrB,CAAC,QAAwC;AACvC,wBAAgB,KAAK;AACrB,iBAAS,GAAG;AAAA,MACd;AAAA,MACA,CAAC,MAAM;AAAA,IAAA;AAGT,UAAM,gBAAgB;AAAA,MACpB,CAAC,QAA6C;AAC5C,YAAI,UAAU;AACZ;AAAA,QACF;AAEA,mBAAW,KAAK,IAAI,OAAO,SAAS,KAAK;AAAA,MAC3C;AAAA,MACA,CAAC,UAAU,UAAU,KAAK;AAAA,IAAA;AAI1B,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR;AAAA,YACE,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,YAAY,GAAG;AAAA,UAC1B;AAAA,UACA;AAAA,QACF;AAAA,QACA,OAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAa;AAAA,QACb,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS;AAAA,UACP,MAAM,QAAQ;AAAA,UACd,YAAY,QAAQ;AAAA,UACpB,SAAS,QAAQ;AAAA,UACjB,OAAO,QAAQ;AAAA,UACf,OAAO,QAAQ;AAAA,UACf,UAAU,QAAQ;AAAA,QACpB;AAAA,QACA;AAAA,QACA,gBAAgB;AAAA,QAChB,QAAQ;AAAA,QACP,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}
+{"version":3,"file":"BaseSwitch.js","sources":["../../../src/BaseSwitch/BaseSwitch.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\nimport MuiSwitch, { SwitchProps as MuiSwitchProps } from \"@mui/material/Switch\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { staticClasses, useClasses } from \"./BaseSwitch.styles\";\n\nexport { staticClasses as baseSwitchClasses };\n\nexport type HvBaseSwitchClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseSwitchProps\n  extends Omit<MuiSwitchProps, \"onChange\" | \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the switch.\n   */\n  classes?: HvBaseSwitchClasses;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * The input name.\n   */\n  name?: string;\n  /**\n   * The value of the input.\n   *\n   * Is up to the application's logic when to consider the submission of this value.\n   * Generally it should be used only when the switch is neither unchecked nor indeterminate.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * Indicates that user input is required.\n   */\n  required?: boolean;\n  /**\n   * Indicates that the input is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that the input is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the switch is selected, if set to `false` the switch is not selected.\n   *\n   * When defined the switch state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * The callback fired when the switch is pressed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n    value: any,\n  ) => void;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible?: (event: React.FocusEvent<any>) => void;\n  /**\n   * @ignore\n   */\n  onBlur?: (event: React.FocusEvent<any>) => void;\n}\n\n/**\n * A Switch is <b>binary</b> and work as a digital on/off button.\n *\n * The Base Switch is a building block of the Switch form element. Don't use unless\n * implementing a custom use case not covered by the Switch form element.\n */\nexport const HvBaseSwitch = forwardRef<HTMLButtonElement, HvBaseSwitchProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n\n      id,\n      name,\n      value = \"on\",\n\n      required = false,\n      readOnly = false,\n      disabled = false,\n\n      checked,\n      defaultChecked,\n\n      onChange,\n\n      inputProps,\n\n      onFocusVisible,\n      onBlur,\n\n      ...others\n    } = useDefaultProps(\"HvBaseSwitch\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const [focusVisible, setFocusVisible] = useState(false);\n\n    const onFocusVisibleCallback = useCallback(\n      (evt: React.FocusEvent<any, Element>) => {\n        setFocusVisible(true);\n        onFocusVisible?.(evt);\n      },\n      [onFocusVisible],\n    );\n\n    const onBlurCallback = useCallback(\n      (evt: React.FocusEvent<any, Element>) => {\n        setFocusVisible(false);\n        onBlur?.(evt);\n      },\n      [onBlur],\n    );\n\n    const onLocalChange = useCallback(\n      (evt: React.ChangeEvent<HTMLInputElement>) => {\n        if (readOnly) {\n          return;\n        }\n\n        onChange?.(evt, evt.target.checked, value);\n      },\n      [onChange, readOnly, value],\n    );\n\n    return (\n      <MuiSwitch\n        ref={ref}\n        id={id}\n        name={name}\n        className={cx(\n          classes.root,\n          {\n            [classes.disabled]: disabled,\n            [classes.readOnly]: readOnly,\n            [classes.focusVisible]: focusVisible,\n          },\n          className,\n        )}\n        color=\"default\"\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        disableRipple\n        onChange={onLocalChange}\n        value={value}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        classes={{\n          root: classes.switch,\n          switchBase: classes.switchBase,\n          checked: classes.checked,\n          track: classes.track,\n          thumb: classes.thumb,\n          disabled: classes.disabled,\n        }}\n        inputProps={inputProps}\n        onFocusVisible={onFocusVisibleCallback}\n        onBlur={onBlurCallback}\n        {...others}\n      />\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;AA2FO,MAAM,eAAe;AAAA,EAC1B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MAEA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MAER,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MAEX;AAAA,MACA;AAAA,MAEA;AAAA,MAEA;AAAA,MAEA;AAAA,MACA;AAAA,MAEA,GAAG;AAAA,IAAA,IACD,gBAAgB,gBAAgB,KAAK;AAEzC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,UAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,UAAM,yBAAyB;AAAA,MAC7B,CAAC,QAAwC;AACvC,wBAAgB,IAAI;AACpB,yBAAiB,GAAG;AAAA,MACtB;AAAA,MACA,CAAC,cAAc;AAAA,IAAA;AAGjB,UAAM,iBAAiB;AAAA,MACrB,CAAC,QAAwC;AACvC,wBAAgB,KAAK;AACrB,iBAAS,GAAG;AAAA,MACd;AAAA,MACA,CAAC,MAAM;AAAA,IAAA;AAGT,UAAM,gBAAgB;AAAA,MACpB,CAAC,QAA6C;AAC5C,YAAI,UAAU;AACZ;AAAA,QACF;AAEA,mBAAW,KAAK,IAAI,OAAO,SAAS,KAAK;AAAA,MAC3C;AAAA,MACA,CAAC,UAAU,UAAU,KAAK;AAAA,IAAA;AAI1B,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR;AAAA,YACE,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,YAAY,GAAG;AAAA,UAC1B;AAAA,UACA;AAAA,QACF;AAAA,QACA,OAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAa;AAAA,QACb,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS;AAAA,UACP,MAAM,QAAQ;AAAA,UACd,YAAY,QAAQ;AAAA,UACpB,SAAS,QAAQ;AAAA,UACjB,OAAO,QAAQ;AAAA,UACf,OAAO,QAAQ;AAAA,UACf,UAAU,QAAQ;AAAA,QACpB;AAAA,QACA;AAAA,QACA,gBAAgB;AAAA,QAChB,QAAQ;AAAA,QACP,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}

package/dist/esm/Button/Button.js

@@ -39,7 +39,7 @@ const HvButton = fixedForwardRef(function HvButton2(props, ref) {
   const { activeTheme } = useTheme();
   const variant = mapVariant(
     variantProp ?? (icon ? "secondaryGhost" : "primary"),
-    activeTheme?.name
+    activeTheme?.base
   );
   const handleClick = (e) => {
     if (disabled) return;

package/dist/esm/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/Button/Button.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n  fixedForwardRef,\n  PolymorphicComponentRef,\n  PolymorphicRef,\n} from \"../types/generic\";\nimport {\n  staticClasses as buttonClasses,\n  getColoringStyle,\n  getIconSizeStyles,\n  getOverrideColors,\n  getRadiusStyles,\n  getSizeStyles,\n  useClasses,\n} from \"./Button.styles\";\nimport { HvButtonRadius, HvButtonSize, HvButtonVariant } from \"./types\";\n\nexport { buttonClasses };\n\nexport type HvButtonClasses = ExtractNames<typeof useClasses>;\n\nexport type HvButtonProps<C extends React.ElementType = \"button\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** Use the variant prop to change the visual style of the button. */\n      variant?: HvButtonVariant;\n      /** Whether the button is an icon-only button. */\n      icon?: boolean;\n      /** Whether the button is disabled or not. */\n      disabled?: boolean;\n      /** Class names to be applied. */\n      className?: string;\n      /** Element placed before the children. */\n      startIcon?: React.ReactNode;\n      /** Element placed after the children. */\n      endIcon?: React.ReactNode;\n      /** Button size. */\n      size?: HvButtonSize;\n      /** Button border radius. */\n      radius?: HvButtonRadius;\n      /** Defines the default colors of the button are forced into the icon. */\n      overrideIconColors?: boolean;\n      /** A Jss Object used to override or extend the styles applied. */\n      classes?: HvButtonClasses;\n      /** Whether the button is selected or not. */\n      selected?: boolean;\n      /**\n       * Whether the button is focusable when disabled.\n       * Without this property, the accessibility of the button decreases when disabled since it's not read by screen readers.\n       * Set this property to `true` when you need the button to still be focusable when disabled for accessibility purposes.\n       */\n      focusableWhenDisabled?: boolean;\n    }\n  >;\n\n/**\n * Normalize the button variant. It's meant to give us some retro-compatibility with\n * the DS 3.6 API.\n * @returns the normalized variant in DS 5 API\n */\nconst mapVariant = (\n  variant: HvButtonVariant,\n  theme?: string,\n): HvButtonVariant => {\n  if (theme === \"ds3\") return variant;\n\n  const deprecatedVariantMap: Record<string, HvButtonVariant> = {\n    secondary: \"secondarySubtle\",\n    ghost: \"primaryGhost\",\n  };\n\n  const mappedVariant = deprecatedVariantMap[variant];\n\n  if (import.meta.env.DEV && mappedVariant) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `Button variant '${variant}' is deprecated. Please use '${mappedVariant}'.`,\n    );\n  }\n\n  return mappedVariant || variant;\n};\n\n/**\n * Button component is used to trigger an action or event.\n */\nexport const HvButton = fixedForwardRef(function HvButton<\n  C extends React.ElementType = \"button\",\n>(props: HvButtonProps<C>, ref: PolymorphicRef<C>) {\n  const {\n    classes: classesProp,\n    children,\n    variant: variantProp, // TODO - should we split into two props (color and type) in v6?\n    disabled = false,\n    className,\n    startIcon,\n    endIcon,\n    icon = false,\n    size,\n    radius,\n    overrideIconColors = true,\n    component: Component = \"button\",\n    focusableWhenDisabled,\n    onClick: onClickProp,\n    onMouseDown: onMouseDownProp,\n    selected,\n    style,\n    ...others\n  } = useDefaultProps(\"HvButton\", props);\n  const { classes, css, cx } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n  const variant = mapVariant(\n    variantProp ?? (icon ? \"secondaryGhost\" : \"primary\"),\n    activeTheme?.name,\n  );\n\n  const handleClick: HvButtonProps[\"onClick\"] = (e) => {\n    if (disabled) return;\n    onClickProp?.(e);\n  };\n\n  const handleMouseDown: HvButtonProps[\"onMouseDown\"] = (e) => {\n    if (disabled) return;\n    onMouseDownProp?.(e);\n  };\n\n  const [color, type] = useMemo(() => {\n    const result = variant.split(/(?=[A-Z])/);\n    if (\n      result[0] === \"ghost\" ||\n      result[0] === \"semantic\" ||\n      (result[0] === \"secondary\" && !result[1])\n    )\n      return [];\n    return result.map((x) => x.toLowerCase());\n  }, [variant]);\n\n  const sizeStyles = useMemo(\n    () =>\n      size ? (icon ? getIconSizeStyles(size) : getSizeStyles(size)) : undefined,\n    [size, icon],\n  );\n\n  return (\n    <Component\n      ref={ref}\n      style={{\n        ...style,\n        \"--HvButton-height\": sizeStyles ? sizeStyles.height : \"32px\",\n      }}\n      className={cx(\n        classes.root,\n        type && classes[type as keyof HvButtonClasses],\n        color && css(getColoringStyle(color, type)),\n        classes[variant as keyof HvButtonClasses], // Placed after type and color CSS for DS3 override\n        radius && css(getRadiusStyles(radius)),\n        overrideIconColors && css(getOverrideColors()),\n        {\n          [classes.icon]: icon,\n          [classes.disabled]: disabled,\n        },\n        sizeStyles && css(sizeStyles),\n        className,\n      )}\n      onClick={handleClick}\n      onMouseDown={handleMouseDown}\n      {...(Component === \"button\" && { type: \"button\" })}\n      {...(disabled && {\n        disabled: !focusableWhenDisabled,\n        tabIndex: focusableWhenDisabled ? 0 : -1,\n        \"aria-disabled\": true,\n      })}\n      {...(selected && { \"aria-pressed\": selected })}\n      {...others}\n    >\n      {startIcon && <span className={classes.startIcon}>{startIcon}</span>}\n      {children}\n      {endIcon && <span className={classes.endIcon}>{endIcon}</span>}\n    </Component>\n  );\n});\n"],"names":["HvButton"],"mappings":";;;;;;AAmEA,MAAM,aAAa,CACjB,SACA,UACoB;AAChB,MAAA,UAAU,MAAc,QAAA;AAE5B,QAAM,uBAAwD;AAAA,IAC5D,WAAW;AAAA,IACX,OAAO;AAAA,EAAA;AAGH,QAAA,gBAAgB,qBAAqB,OAAO;AASlD,SAAO,iBAAiB;AAC1B;AAKO,MAAM,WAAW,gBAAgB,SAASA,UAE/C,OAAyB,KAAwB;AAC3C,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,SAAS;AAAA;AAAA,IACT,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB,WAAW,YAAY;AAAA,IACvB;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAC7C,QAAA,EAAE,gBAAgB;AACxB,QAAM,UAAU;AAAA,IACd,gBAAgB,OAAO,mBAAmB;AAAA,IAC1C,aAAa;AAAA,EAAA;AAGT,QAAA,cAAwC,CAAC,MAAM;AACnD,QAAI,SAAU;AACd,kBAAc,CAAC;AAAA,EAAA;AAGX,QAAA,kBAAgD,CAAC,MAAM;AAC3D,QAAI,SAAU;AACd,sBAAkB,CAAC;AAAA,EAAA;AAGrB,QAAM,CAAC,OAAO,IAAI,IAAI,QAAQ,MAAM;AAC5B,UAAA,SAAS,QAAQ,MAAM,WAAW;AACxC,QACE,OAAO,CAAC,MAAM,WACd,OAAO,CAAC,MAAM,cACb,OAAO,CAAC,MAAM,eAAe,CAAC,OAAO,CAAC;AAEvC,aAAO;AACT,WAAO,OAAO,IAAI,CAAC,MAAM,EAAE,aAAa;AAAA,EAAA,GACvC,CAAC,OAAO,CAAC;AAEZ,QAAM,aAAa;AAAA,IACjB,MACE,OAAQ,OAAO,kBAAkB,IAAI,IAAI,cAAc,IAAI,IAAK;AAAA,IAClE,CAAC,MAAM,IAAI;AAAA,EAAA;AAIX,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,QACL,GAAG;AAAA,QACH,qBAAqB,aAAa,WAAW,SAAS;AAAA,MACxD;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,QAAQ,IAA6B;AAAA,QAC7C,SAAS,IAAI,iBAAiB,OAAO,IAAI,CAAC;AAAA,QAC1C,QAAQ,OAAgC;AAAA;AAAA,QACxC,UAAU,IAAI,gBAAgB,MAAM,CAAC;AAAA,QACrC,sBAAsB,IAAI,mBAAmB;AAAA,QAC7C;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA,cAAc,IAAI,UAAU;AAAA,QAC5B;AAAA,MACF;AAAA,MACA,SAAS;AAAA,MACT,aAAa;AAAA,MACZ,GAAI,cAAc,YAAY,EAAE,MAAM,SAAS;AAAA,MAC/C,GAAI,YAAY;AAAA,QACf,UAAU,CAAC;AAAA,QACX,UAAU,wBAAwB,IAAI;AAAA,QACtC,iBAAiB;AAAA,MACnB;AAAA,MACC,GAAI,YAAY,EAAE,gBAAgB,SAAS;AAAA,MAC3C,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,aAAc,oBAAA,QAAA,EAAK,WAAW,QAAQ,WAAY,UAAU,WAAA;AAAA,QAC5D;AAAA,QACA,WAAY,oBAAA,QAAA,EAAK,WAAW,QAAQ,SAAU,UAAQ,SAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7D,CAAC;"}
+{"version":3,"file":"Button.js","sources":["../../../src/Button/Button.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { HvBaseTheme } from \"@hitachivantara/uikit-styles\";\n\nimport {\n  fixedForwardRef,\n  PolymorphicComponentRef,\n  PolymorphicRef,\n} from \"../types/generic\";\nimport {\n  staticClasses as buttonClasses,\n  getColoringStyle,\n  getIconSizeStyles,\n  getOverrideColors,\n  getRadiusStyles,\n  getSizeStyles,\n  useClasses,\n} from \"./Button.styles\";\nimport { HvButtonRadius, HvButtonSize, HvButtonVariant } from \"./types\";\n\nexport { buttonClasses };\n\nexport type HvButtonClasses = ExtractNames<typeof useClasses>;\n\nexport type HvButtonProps<C extends React.ElementType = \"button\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** Use the variant prop to change the visual style of the button. */\n      variant?: HvButtonVariant;\n      /** Whether the button is an icon-only button. */\n      icon?: boolean;\n      /** Whether the button is disabled or not. */\n      disabled?: boolean;\n      /** Class names to be applied. */\n      className?: string;\n      /** Element placed before the children. */\n      startIcon?: React.ReactNode;\n      /** Element placed after the children. */\n      endIcon?: React.ReactNode;\n      /** Button size. */\n      size?: HvButtonSize;\n      /** Button border radius. */\n      radius?: HvButtonRadius;\n      /** Defines the default colors of the button are forced into the icon. */\n      overrideIconColors?: boolean;\n      /** A Jss Object used to override or extend the styles applied. */\n      classes?: HvButtonClasses;\n      /** Whether the button is selected or not. */\n      selected?: boolean;\n      /**\n       * Whether the button is focusable when disabled.\n       * Without this property, the accessibility of the button decreases when disabled since it's not read by screen readers.\n       * Set this property to `true` when you need the button to still be focusable when disabled for accessibility purposes.\n       */\n      focusableWhenDisabled?: boolean;\n    }\n  >;\n\n/**\n * Normalize the button variant. It's meant to give us some retro-compatibility with\n * the DS 3.6 API.\n * @returns the normalized variant in DS 5 API\n */\nconst mapVariant = (\n  variant: HvButtonVariant,\n  theme?: HvBaseTheme,\n): HvButtonVariant => {\n  if (theme === \"ds3\") return variant;\n\n  const deprecatedVariantMap: Record<string, HvButtonVariant> = {\n    secondary: \"secondarySubtle\",\n    ghost: \"primaryGhost\",\n  };\n\n  const mappedVariant = deprecatedVariantMap[variant];\n\n  if (import.meta.env.DEV && mappedVariant) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `Button variant '${variant}' is deprecated. Please use '${mappedVariant}'.`,\n    );\n  }\n\n  return mappedVariant || variant;\n};\n\n/**\n * Button component is used to trigger an action or event.\n */\nexport const HvButton = fixedForwardRef(function HvButton<\n  C extends React.ElementType = \"button\",\n>(props: HvButtonProps<C>, ref: PolymorphicRef<C>) {\n  const {\n    classes: classesProp,\n    children,\n    variant: variantProp, // TODO - should we split into two props (color and type) in v6?\n    disabled = false,\n    className,\n    startIcon,\n    endIcon,\n    icon = false,\n    size,\n    radius,\n    overrideIconColors = true,\n    component: Component = \"button\",\n    focusableWhenDisabled,\n    onClick: onClickProp,\n    onMouseDown: onMouseDownProp,\n    selected,\n    style,\n    ...others\n  } = useDefaultProps(\"HvButton\", props);\n  const { classes, css, cx } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n  const variant = mapVariant(\n    variantProp ?? (icon ? \"secondaryGhost\" : \"primary\"),\n    activeTheme?.base,\n  );\n\n  const handleClick: HvButtonProps[\"onClick\"] = (e) => {\n    if (disabled) return;\n    onClickProp?.(e);\n  };\n\n  const handleMouseDown: HvButtonProps[\"onMouseDown\"] = (e) => {\n    if (disabled) return;\n    onMouseDownProp?.(e);\n  };\n\n  const [color, type] = useMemo(() => {\n    const result = variant.split(/(?=[A-Z])/);\n    if (\n      result[0] === \"ghost\" ||\n      result[0] === \"semantic\" ||\n      (result[0] === \"secondary\" && !result[1])\n    )\n      return [];\n    return result.map((x) => x.toLowerCase());\n  }, [variant]);\n\n  const sizeStyles = useMemo(\n    () =>\n      size ? (icon ? getIconSizeStyles(size) : getSizeStyles(size)) : undefined,\n    [size, icon],\n  );\n\n  return (\n    <Component\n      ref={ref}\n      style={{\n        ...style,\n        \"--HvButton-height\": sizeStyles ? sizeStyles.height : \"32px\",\n      }}\n      className={cx(\n        classes.root,\n        type && classes[type as keyof HvButtonClasses],\n        color && css(getColoringStyle(color, type)),\n        classes[variant as keyof HvButtonClasses], // Placed after type and color CSS for DS3 override\n        radius && css(getRadiusStyles(radius)),\n        overrideIconColors && css(getOverrideColors()),\n        {\n          [classes.icon]: icon,\n          [classes.disabled]: disabled,\n        },\n        sizeStyles && css(sizeStyles),\n        className,\n      )}\n      onClick={handleClick}\n      onMouseDown={handleMouseDown}\n      {...(Component === \"button\" && { type: \"button\" })}\n      {...(disabled && {\n        disabled: !focusableWhenDisabled,\n        tabIndex: focusableWhenDisabled ? 0 : -1,\n        \"aria-disabled\": true,\n      })}\n      {...(selected && { \"aria-pressed\": selected })}\n      {...others}\n    >\n      {startIcon && <span className={classes.startIcon}>{startIcon}</span>}\n      {children}\n      {endIcon && <span className={classes.endIcon}>{endIcon}</span>}\n    </Component>\n  );\n});\n"],"names":["HvButton"],"mappings":";;;;;;AAoEA,MAAM,aAAa,CACjB,SACA,UACoB;AAChB,MAAA,UAAU,MAAc,QAAA;AAE5B,QAAM,uBAAwD;AAAA,IAC5D,WAAW;AAAA,IACX,OAAO;AAAA,EAAA;AAGH,QAAA,gBAAgB,qBAAqB,OAAO;AASlD,SAAO,iBAAiB;AAC1B;AAKO,MAAM,WAAW,gBAAgB,SAASA,UAE/C,OAAyB,KAAwB;AAC3C,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,SAAS;AAAA;AAAA,IACT,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB,WAAW,YAAY;AAAA,IACvB;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAC7C,QAAA,EAAE,gBAAgB;AACxB,QAAM,UAAU;AAAA,IACd,gBAAgB,OAAO,mBAAmB;AAAA,IAC1C,aAAa;AAAA,EAAA;AAGT,QAAA,cAAwC,CAAC,MAAM;AACnD,QAAI,SAAU;AACd,kBAAc,CAAC;AAAA,EAAA;AAGX,QAAA,kBAAgD,CAAC,MAAM;AAC3D,QAAI,SAAU;AACd,sBAAkB,CAAC;AAAA,EAAA;AAGrB,QAAM,CAAC,OAAO,IAAI,IAAI,QAAQ,MAAM;AAC5B,UAAA,SAAS,QAAQ,MAAM,WAAW;AACxC,QACE,OAAO,CAAC,MAAM,WACd,OAAO,CAAC,MAAM,cACb,OAAO,CAAC,MAAM,eAAe,CAAC,OAAO,CAAC;AAEvC,aAAO;AACT,WAAO,OAAO,IAAI,CAAC,MAAM,EAAE,aAAa;AAAA,EAAA,GACvC,CAAC,OAAO,CAAC;AAEZ,QAAM,aAAa;AAAA,IACjB,MACE,OAAQ,OAAO,kBAAkB,IAAI,IAAI,cAAc,IAAI,IAAK;AAAA,IAClE,CAAC,MAAM,IAAI;AAAA,EAAA;AAIX,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,QACL,GAAG;AAAA,QACH,qBAAqB,aAAa,WAAW,SAAS;AAAA,MACxD;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,QAAQ,IAA6B;AAAA,QAC7C,SAAS,IAAI,iBAAiB,OAAO,IAAI,CAAC;AAAA,QAC1C,QAAQ,OAAgC;AAAA;AAAA,QACxC,UAAU,IAAI,gBAAgB,MAAM,CAAC;AAAA,QACrC,sBAAsB,IAAI,mBAAmB;AAAA,QAC7C;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA,cAAc,IAAI,UAAU;AAAA,QAC5B;AAAA,MACF;AAAA,MACA,SAAS;AAAA,MACT,aAAa;AAAA,MACZ,GAAI,cAAc,YAAY,EAAE,MAAM,SAAS;AAAA,MAC/C,GAAI,YAAY;AAAA,QACf,UAAU,CAAC;AAAA,QACX,UAAU,wBAAwB,IAAI;AAAA,QACtC,iBAAiB;AAAA,MACnB;AAAA,MACC,GAAI,YAAY,EAAE,gBAAgB,SAAS;AAAA,MAC3C,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,aAAc,oBAAA,QAAA,EAAK,WAAW,QAAQ,WAAY,UAAU,WAAA;AAAA,QAC5D;AAAA,QACA,WAAY,oBAAA,QAAA,EAAK,WAAW,QAAQ,SAAU,UAAQ,SAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7D,CAAC;"}

package/dist/esm/Calendar/CalendarHeader/CalendarHeader.styles.js

@@ -2,7 +2,7 @@ import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvCalendarHeader", {
   root: {
-    paddingBottom: theme.space.md,
+    paddingBottom: theme.space.sm,
     "&$invalid": {
       paddingBottom: 0
     }

package/dist/esm/Calendar/CalendarHeader/CalendarHeader.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarHeader.styles.js","sources":["../../../../src/Calendar/CalendarHeader/CalendarHeader.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCalendarHeader\", {\n  root: {\n    paddingBottom: theme.space.md,\n\n    \"&$invalid\": {\n      paddingBottom: 0,\n    },\n  },\n  invalid: {},\n  headerDayOfWeek: {\n    color: theme.colors.secondary_80,\n  },\n  headerDate: {},\n  input: {},\n  inputBorderContainer: {},\n  invalidMessageStyling: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,eAAe,MAAM,MAAM;AAAA,IAE3B,aAAa;AAAA,MACX,eAAe;AAAA,IACjB;AAAA,EACF;AAAA,EACA,SAAS,CAAC;AAAA,EACV,iBAAiB;AAAA,IACf,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,YAAY,CAAC;AAAA,EACb,OAAO,CAAC;AAAA,EACR,sBAAsB,CAAC;AAAA,EACvB,uBAAuB,CAAC;AAC1B,CAAC;"}
+{"version":3,"file":"CalendarHeader.styles.js","sources":["../../../../src/Calendar/CalendarHeader/CalendarHeader.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCalendarHeader\", {\n  root: {\n    paddingBottom: theme.space.sm,\n\n    \"&$invalid\": {\n      paddingBottom: 0,\n    },\n  },\n  invalid: {},\n  headerDayOfWeek: {\n    color: theme.colors.secondary_80,\n  },\n  headerDate: {},\n  input: {},\n  inputBorderContainer: {},\n  invalidMessageStyling: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,eAAe,MAAM,MAAM;AAAA,IAE3B,aAAa;AAAA,MACX,eAAe;AAAA,IACjB;AAAA,EACF;AAAA,EACA,SAAS,CAAC;AAAA,EACV,iBAAiB;AAAA,IACf,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,YAAY,CAAC;AAAA,EACb,OAAO,CAAC;AAAA,EACR,sBAAsB,CAAC;AAAA,EACvB,uBAAuB,CAAC;AAC1B,CAAC;"}

package/dist/esm/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.styles.js

@@ -6,7 +6,7 @@ const { staticClasses, useClasses } = createClasses(
     navigationContainer: {
       display: "flex",
       justifyContent: "space-between",
-      padding: theme.spacing("xs", 0)
+      paddingBottom: theme.space.xs
     },
     navigationMonth: {
       minWidth: "160px"

package/dist/esm/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComposedNavigation.styles.js","sources":["../../../../../src/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\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":[],"mappings":";;AAGa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,qBAAqB;AAAA,MACnB,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,SAAS,MAAM,QAAQ,MAAM,CAAC;AAAA,IAChC;AAAA,IACA,iBAAiB;AAAA,MACf,UAAU;AAAA,IACZ;AAAA,EACF;AACF;"}
+{"version":3,"file":"ComposedNavigation.styles.js","sources":["../../../../../src/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\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      paddingBottom: theme.space.xs,\n    },\n    navigationMonth: {\n      minWidth: \"160px\",\n    },\n  },\n);\n"],"names":[],"mappings":";;AAGa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,qBAAqB;AAAA,MACnB,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,eAAe,MAAM,MAAM;AAAA,IAC7B;AAAA,IACA,iBAAiB;AAAA,MACf,UAAU;AAAA,IACZ;AAAA,EACF;AACF;"}

package/dist/esm/Calendar/SingleCalendar/SingleCalendar.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useMemo } from "react";
 import { isKey } from "../../utils/keyboardUtils.js";
 import { setId } from "../../utils/setId.js";
@@ -10,6 +10,7 @@ import { useClasses } from "./SingleCalendar.styles.js";
 import { staticClasses } from "./SingleCalendar.styles.js";
 import { HvComposedNavigation } from "../CalendarNavigation/ComposedNavigation/ComposedNavigation.js";
 import { HvMonthSelector } from "../CalendarNavigation/MonthSelector/MonthSelector.js";
+import { HvPanel } from "../../Panel/Panel.js";
 import { HvTypography } from "../../Typography/Typography.js";
 const HvSingleCalendar = ({
   classes: classesProp,
@@ -97,7 +98,7 @@ const HvSingleCalendar = ({
       currentDate.toString()
     );
   };
-  return /* @__PURE__ */ jsx("div", { className: cx(classes.calendarContainer, className), ...others, children: /* @__PURE__ */ jsxs("div", { id, className: classes.calendarWrapper, children: [
+  return /* @__PURE__ */ jsxs(HvPanel, { id, className: cx(classes.root, className), ...others, children: [
     /* @__PURE__ */ jsx(
       HvCalendarHeader,
       {
@@ -109,7 +110,7 @@ const HvSingleCalendar = ({
         invalidDateLabel
       }
     ),
-    calViewMode === "calendar" && /* @__PURE__ */ jsxs("div", { children: [
+    calViewMode === "calendar" && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         HvComposedNavigation,
         {
@@ -144,7 +145,7 @@ const HvSingleCalendar = ({
         rangeMode
       }
     )
-  ] }) });
+  ] });
 };
 export {
   HvSingleCalendar,