@hitachivantara/uikit-react-core 5.99.0 → 5.100.0

package/dist/cjs/BaseSwitch/BaseSwitch.cjs

@@ -4,6 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const MuiSwitch = require("@mui/material/Switch");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const uikitStyles = require("@hitachivantara/uikit-styles");
 const BaseSwitch_styles = require("./BaseSwitch.styles.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const MuiSwitch__default = /* @__PURE__ */ _interopDefault(MuiSwitch);
@@ -24,9 +25,11 @@ const HvBaseSwitch = React.forwardRef(
       inputProps,
       onFocusVisible,
       onBlur,
+      size = "sm",
+      color,
       ...others
     } = uikitReactUtils.useDefaultProps("HvBaseSwitch", props);
-    const { classes, cx } = BaseSwitch_styles.useClasses(classesProp);
+    const { classes, cx, css } = BaseSwitch_styles.useClasses(classesProp);
     const [focusVisible, setFocusVisible] = React.useState(false);
     const onFocusVisibleCallback = React.useCallback(
       (evt) => {
@@ -66,7 +69,6 @@ const HvBaseSwitch = React.forwardRef(
           },
           className
         ),
-        color: "default",
         disabled,
         required,
         readOnly,
@@ -76,15 +78,27 @@ const HvBaseSwitch = React.forwardRef(
         defaultChecked,
         classes: {
           root: classes.switch,
-          switchBase: classes.switchBase,
+          switchBase: cx(classes.switchBase),
           checked: classes.checked,
-          track: classes.track,
-          thumb: classes.thumb,
+          track: cx(
+            classes.track,
+            color ? css({
+              backgroundColor: `${uikitStyles.getColor(color, "transparent")}!important`,
+              border: "none"
+            }) : void 0
+          ),
+          thumb: cx(
+            classes.thumb,
+            color ? css({
+              border: "none"
+            }) : void 0
+          ),
           disabled: classes.disabled
         },
         inputProps,
         onFocusVisible: onFocusVisibleCallback,
         onBlur: onBlurCallback,
+        "data-size": size,
         ...others
       }
     );

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

@@ -5,10 +5,10 @@ const uikitStyles = require("@hitachivantara/uikit-styles");
 const focusUtils = require("../utils/focusUtils.cjs");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseSwitch", {
   root: {
-    padding: 0,
+    padding: uikitStyles.theme.space.xs,
     cursor: "pointer",
-    width: "40px",
-    height: "32px",
+    width: "fit-content",
+    height: "fit-content",
     alignItems: "center",
     justifyContent: "center",
     borderRadius: uikitStyles.theme.radii.round,
@@ -27,7 +27,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseSwitc
           backgroundColor: uikitStyles.theme.colors.primary,
           borderColor: "transparent"
         },
-        "& $thumb:not:has($disabled)": {
+        "&:not($disabled) $thumb": {
           borderColor: "transparent"
         },
         "&:hover": {
@@ -57,7 +57,23 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseSwitc
   switchBase: {
     width: "40px",
     height: "32px",
-    padding: 0
+    padding: 0,
+    "&[data-size=medium]": {
+      "+.HvBaseSwitch-track": {
+        width: 48,
+        height: 22
+      },
+      "& $thumb": {
+        left: -2,
+        top: 3,
+        width: 18,
+        height: 18
+      },
+      "&$checked $thumb": {
+        left: 8,
+        top: 3
+      }
+    }
   },
   track: {
     opacity: 1,
@@ -69,7 +85,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseSwitc
   },
   thumb: {
     position: "relative",
-    left: "-9px",
+    left: "-5px",
     width: "10px",
     height: "10px",
     border: `solid 1px ${uikitStyles.theme.colors.borderStrong}`,

package/dist/cjs/Dialog/Title/Title.cjs

@@ -14,8 +14,8 @@ const HvDialogTitle = (props) => {
     classes: classesProp,
     className,
     children,
-    variant = "default",
-    showIcon = true,
+    variant,
+    showIcon = variant != null,
     customIcon,
     ...others
   } = uikitReactUtils.useDefaultProps("HvDialogTitle", props);

package/dist/cjs/Loading/Loading.cjs

@@ -25,6 +25,7 @@ const HvLoading = React.forwardRef(function HvLoading2(props, ref) {
     {
       ref,
       hidden: !!hidden,
+      "data-size": size,
       style: uikitReactUtils.mergeStyles(style, {
         color: uikitStyles.getColor(color, small ? "text" : "brand"),
         "--customColor": uikitStyles.getColor(color)

package/dist/cjs/Loading/Loading.styles.cjs

@@ -8,28 +8,27 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvLoading",
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "center",
-    gap: uikitStyles.theme.space.xs
+    gap: uikitStyles.theme.space.xs,
+    "&[data-size=small]": {
+      "--bar-size": "2px",
+      "--size": "18px",
+      "--height": "40%"
+    }
   },
   barContainer: {
     display: "flex",
     alignItems: "center",
     justifyContent: "space-around",
-    ":has($regular)": {
-      width: 30,
-      height: 30
-    },
-    ":has($small)": {
-      "--height": "40%",
-      width: 18,
-      height: 18
-    }
+    width: "var(--size, 30px)",
+    height: "var(--size, 30px)"
   },
   loadingBar: {
     backgroundColor: "currentcolor",
     display: "inline-block",
     animation: "loading 1s ease-in-out infinite",
     // TODO: make this the default when it has better support
-    width: "round(up, 0.11em, 2px)",
+    // width: "round(up, 0.11em, 2px)",
+    width: "var(--bar-size, 4px)",
     height: "100%",
     "@keyframes loading": {
       "50%": {
@@ -46,13 +45,13 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvLoading",
   overlay: {},
   blur: {},
   hidden: { display: "none" },
-  small: {
-    width: 2
-  },
-  regular: {
-    width: 4
-  },
+  /** @deprecated use data-size=small instead */
+  small: {},
+  /** @deprecated use data-size=regular instead */
+  regular: {},
+  /** @deprecated leverage data-size=small instead */
   smallColor: {},
+  /** @deprecated leverage data-size=regular instead */
   regularColor: {}
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/NumberInput/NumberInput.cjs

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const material = require("@mui/material");
+const utils = require("@mui/material/utils");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const icons = require("../icons.cjs");
-const utils = require("../Input/utils.cjs");
+const utils$1 = require("../Input/utils.cjs");
 const NumberInput_styles = require("./NumberInput.styles.cjs");
 const Adornment = require("../FormElement/Adornment/Adornment.cjs");
 const Input = require("../Input/Input.cjs");
@@ -18,18 +18,18 @@ const HvNumberInput = React.forwardRef(function HvNumberInput2(props, ref) {
   } = uikitReactUtils.useDefaultProps("HvNumberInput", props);
   const { classes, cx } = NumberInput_styles.useClasses(classesProp);
   const inputRef = React.useRef(null);
-  const forkedRef = material.useForkRef(ref, inputRef);
+  const forkedRef = utils.useForkRef(ref, inputRef);
   const buttons = React.useMemo(() => {
     const handleIncrease = () => {
       if (inputRef.current) {
         inputRef.current.stepUp();
-        utils.changeInputValue(inputRef.current, inputRef.current.value);
+        utils$1.changeInputValue(inputRef.current, inputRef.current.value);
       }
     };
     const handleDecrease = () => {
       if (inputRef.current) {
         inputRef.current.stepDown();
-        utils.changeInputValue(inputRef.current, inputRef.current.value);
+        utils$1.changeInputValue(inputRef.current, inputRef.current.value);
       }
     };
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [

package/dist/cjs/Pagination/Pagination.cjs

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const material = require("@mui/material");
+const styles = require("@mui/material/styles");
+const useMediaQuery = require("@mui/material/useMediaQuery");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const useLabels = require("../hooks/useLabels.cjs");
 const icons = require("../icons.cjs");
@@ -12,6 +13,8 @@ const Select = require("./Select.cjs");
 const Typography = require("../Typography/Typography.cjs");
 const IconButton = require("../IconButton/IconButton.cjs");
 const Input = require("../Input/Input.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const useMediaQuery__default = /* @__PURE__ */ _interopDefault(useMediaQuery);
 const defaultPageSizeOptions = [5, 10, 20, 25, 50, 100];
 const DEFAULT_LABELS = {
   /** The show label. */
@@ -64,8 +67,8 @@ const HvPagination = React.forwardRef(function HvPagination2(props, ref) {
   } = uikitReactUtils.useDefaultProps("HvPagination", props);
   const { classes, cx } = Pagination_styles.useClasses(classesProp);
   const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
-  const muiTheme = material.useTheme();
-  const isXsDown = material.useMediaQuery(muiTheme.breakpoints.down("xs"));
+  const muiTheme = styles.useTheme();
+  const isXsDown = useMediaQuery__default.default(muiTheme.breakpoints.down("xs"));
   const [pageInput, setPageInput] = React.useState(page);
   const changePage = React.useCallback(
     (newPage) => {

package/dist/cjs/ScrollToVertical/VerticalScrollListItem/VerticalScrollListItem.styles.cjs

@@ -26,7 +26,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(name, {
     fontSize: 4,
     color: uikitStyles.theme.colors.textDisabled
   },
-  // TODO: remove in v6 (use classes.button)
+  /** @deprecated: use classes.button instead */
   text: {},
   button: {
     display: "flex",

package/dist/cjs/Switch/Switch.cjs

@@ -3,7 +3,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const uikitStyles = require("@hitachivantara/uikit-styles");
 const useControlled = require("../hooks/useControlled.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
 const setId = require("../utils/setId.cjs");
@@ -13,7 +12,6 @@ const FormElement = require("../FormElement/FormElement.cjs");
 const Label = require("../FormElement/Label/Label.cjs");
 const utils = require("../FormElement/utils.cjs");
 const WarningText = require("../FormElement/WarningText/WarningText.cjs");
-const isSemantical = (color) => ["positive", "negative", "warning"].includes(color);
 const HvSwitch = React.forwardRef(
   function HvSwitch2(props, ref) {
     const {
@@ -37,10 +35,9 @@ const HvSwitch = React.forwardRef(
       statusMessage,
       "aria-errormessage": ariaErrorMessage,
       inputProps,
-      color,
       ...others
     } = uikitReactUtils.useDefaultProps("HvSwitch", props);
-    const { classes, cx, css } = Switch_styles.useClasses(classesProp);
+    const { classes, cx } = Switch_styles.useClasses(classesProp);
     const elementId = useUniqueId.useUniqueId(id);
     const [isChecked, setIsChecked] = useControlled.useControlled(checked, defaultChecked);
     const [validationState, setValidationState] = useControlled.useControlled(
@@ -116,16 +113,6 @@ const HvSwitch = React.forwardRef(
                     "aria-describedby": ariaDescribedBy,
                     ...inputProps
                   },
-                  ...color && {
-                    classes: {
-                      switchBase: css({
-                        "&&&+.HvBaseSwitch-track,&&&.HvBaseSwitch-checked+.HvBaseSwitch-track": {
-                          backgroundColor: uikitStyles.getColor(color),
-                          borderColor: isSemantical(color) ? uikitStyles.getColor(`${color}Deep`) : "#00000032"
-                        }
-                      })
-                    }
-                  },
                   ...others
                 }
               )

package/dist/cjs/themes/ds3.cjs

@@ -181,9 +181,7 @@ const ds3 = uikitStyles.mergeTheme(uikitStyles.ds3, {
     HvBaseSwitch: {
       classes: {
         root: {
-          width: "32px",
-          height: "16px",
-          borderRadius: 0,
+          padding: 0,
           "&:hover": {
             backgroundColor: "transparent"
           },
@@ -204,7 +202,8 @@ const ds3 = uikitStyles.mergeTheme(uikitStyles.ds3, {
         },
         thumb: {
           width: 12,
-          height: 12
+          height: 12,
+          left: -9
         }
       }
     },

package/dist/cjs/themes/pentahoPlus.cjs

@@ -114,39 +114,71 @@ const pentahoPlus = uikitStyles.mergeTheme(uikitStyles.pentahoPlus, {
     HvBaseSwitch: {
       classes: {
         root: {
-          borderRadius: uikitStyles.theme.radii.base,
+          padding: uikitStyles.theme.space.xxs,
+          borderRadius: uikitStyles.theme.radii.full,
           "&:hover": {
             backgroundColor: uikitStyles.theme.colors.bgHover
           },
           "& .HvBaseSwitch-switchBase": {
             "& .HvBaseSwitch-thumb": {
               borderColor: "transparent",
-              boxShadow: `0px 1px 1px 0px ${uikitStyles.theme.alpha(uikitStyles.slate[700], 0.16)}`
+              backgroundColor: "#FFFFFF",
+              left: -8,
+              top: -3,
+              width: 14,
+              height: 14
             },
             "+.HvBaseSwitch-track": {
-              height: 14,
               backgroundColor: uikitStyles.theme.colors.textDimmed,
-              borderColor: uikitStyles.theme.colors.textSubtle
+              border: "none",
+              width: 40,
+              height: 18
             },
             "&.HvBaseSwitch-checked": {
-              "& .HvBaseSwitch-thumb": {
-                border: `1px solid ${uikitStyles.theme.colors.bgContainer}`
-              },
               "+.HvBaseSwitch-track": {
-                borderColor: uikitStyles.theme.colors.primaryStrong
+                backgroundColor: uikitStyles.theme.colors.positive
+              },
+              "& .HvBaseSwitch-thumb": {
+                left: -2
               }
             },
             "&.HvBaseSwitch-disabled": {
               "& .HvBaseSwitch-thumb": {
-                backgroundColor: uikitStyles.theme.colors.borderDisabled,
-                borderColor: uikitStyles.theme.colors.borderDisabled
+                borderColor: uikitStyles.theme.colors.textDisabled
               },
               "+.HvBaseSwitch-track": {
-                borderColor: uikitStyles.theme.colors.borderDisabled,
-                backgroundColor: uikitStyles.theme.colors.bgDisabled
+                backgroundColor: uikitStyles.theme.colors.bgDisabled,
+                border: "none"
+              }
+            },
+            "&[data-size=medium]": {
+              "+.HvBaseSwitch-track": {
+                width: 48,
+                height: 24
+              },
+              "& .HvBaseSwitch-thumb": {
+                left: -5,
+                top: 0,
+                width: 16,
+                height: 16
+              },
+              "&.HvBaseSwitch-checked .HvBaseSwitch-thumb": {
+                left: 3,
+                top: 0
               }
             }
           }
+        },
+        readOnly: {
+          ":hover": {
+            backgroundColor: "transparent"
+          },
+          "& .HvBaseSwitch-switchBase + .HvBaseSwitch-track": {
+            backgroundColor: uikitStyles.theme.colors.border
+          },
+          "& .HvBaseSwitch-switchBase.HvBaseSwitch-checked + .HvBaseSwitch-track": {
+            backgroundColor: uikitStyles.theme.mix("positive", 0.5, "dimmer")
+          }
         }
       }
     },

package/dist/esm/BaseSwitch/BaseSwitch.js

@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { forwardRef, useState, useCallback } from "react";
 import MuiSwitch from "@mui/material/Switch";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { getColor } from "@hitachivantara/uikit-styles";
 import { useClasses } from "./BaseSwitch.styles.js";
 import { staticClasses } from "./BaseSwitch.styles.js";
 const HvBaseSwitch = forwardRef(
@@ -21,9 +22,11 @@ const HvBaseSwitch = forwardRef(
       inputProps,
       onFocusVisible,
       onBlur,
+      size = "sm",
+      color,
       ...others
     } = useDefaultProps("HvBaseSwitch", props);
-    const { classes, cx } = useClasses(classesProp);
+    const { classes, cx, css } = useClasses(classesProp);
     const [focusVisible, setFocusVisible] = useState(false);
     const onFocusVisibleCallback = useCallback(
       (evt) => {
@@ -63,7 +66,6 @@ const HvBaseSwitch = forwardRef(
           },
           className
         ),
-        color: "default",
         disabled,
         required,
         readOnly,
@@ -73,15 +75,27 @@ const HvBaseSwitch = forwardRef(
         defaultChecked,
         classes: {
           root: classes.switch,
-          switchBase: classes.switchBase,
+          switchBase: cx(classes.switchBase),
           checked: classes.checked,
-          track: classes.track,
-          thumb: classes.thumb,
+          track: cx(
+            classes.track,
+            color ? css({
+              backgroundColor: `${getColor(color, "transparent")}!important`,
+              border: "none"
+            }) : void 0
+          ),
+          thumb: cx(
+            classes.thumb,
+            color ? css({
+              border: "none"
+            }) : void 0
+          ),
           disabled: classes.disabled
         },
         inputProps,
         onFocusVisible: onFocusVisibleCallback,
         onBlur: onBlurCallback,
+        "data-size": size,
         ...others
       }
     );

package/dist/esm/BaseSwitch/BaseSwitch.styles.js

@@ -3,10 +3,10 @@ import { theme } from "@hitachivantara/uikit-styles";
 import { outlineStyles } from "../utils/focusUtils.js";
 const { staticClasses, useClasses } = createClasses("HvBaseSwitch", {
   root: {
-    padding: 0,
+    padding: theme.space.xs,
     cursor: "pointer",
-    width: "40px",
-    height: "32px",
+    width: "fit-content",
+    height: "fit-content",
     alignItems: "center",
     justifyContent: "center",
     borderRadius: theme.radii.round,
@@ -25,7 +25,7 @@ const { staticClasses, useClasses } = createClasses("HvBaseSwitch", {
           backgroundColor: theme.colors.primary,
           borderColor: "transparent"
         },
-        "& $thumb:not:has($disabled)": {
+        "&:not($disabled) $thumb": {
           borderColor: "transparent"
         },
         "&:hover": {
@@ -55,7 +55,23 @@ const { staticClasses, useClasses } = createClasses("HvBaseSwitch", {
   switchBase: {
     width: "40px",
     height: "32px",
-    padding: 0
+    padding: 0,
+    "&[data-size=medium]": {
+      "+.HvBaseSwitch-track": {
+        width: 48,
+        height: 22
+      },
+      "& $thumb": {
+        left: -2,
+        top: 3,
+        width: 18,
+        height: 18
+      },
+      "&$checked $thumb": {
+        left: 8,
+        top: 3
+      }
+    }
   },
   track: {
     opacity: 1,
@@ -67,7 +83,7 @@ const { staticClasses, useClasses } = createClasses("HvBaseSwitch", {
   },
   thumb: {
     position: "relative",
-    left: "-9px",
+    left: "-5px",
     width: "10px",
     height: "10px",
     border: `solid 1px ${theme.colors.borderStrong}`,

package/dist/esm/Dialog/Title/Title.js

@@ -11,8 +11,8 @@ const HvDialogTitle = (props) => {
     classes: classesProp,
     className,
     children,
-    variant = "default",
-    showIcon = true,
+    variant,
+    showIcon = variant != null,
     customIcon,
     ...others
   } = useDefaultProps("HvDialogTitle", props);

package/dist/esm/Loading/Loading.js

@@ -24,6 +24,7 @@ const HvLoading = forwardRef(function HvLoading2(props, ref) {
     {
       ref,
       hidden: !!hidden,
+      "data-size": size,
       style: mergeStyles(style, {
         color: getColor(color, small ? "text" : "brand"),
         "--customColor": getColor(color)

package/dist/esm/Loading/Loading.styles.js

@@ -6,28 +6,27 @@ const { staticClasses, useClasses } = createClasses("HvLoading", {
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "center",
-    gap: theme.space.xs
+    gap: theme.space.xs,
+    "&[data-size=small]": {
+      "--bar-size": "2px",
+      "--size": "18px",
+      "--height": "40%"
+    }
   },
   barContainer: {
     display: "flex",
     alignItems: "center",
     justifyContent: "space-around",
-    ":has($regular)": {
-      width: 30,
-      height: 30
-    },
-    ":has($small)": {
-      "--height": "40%",
-      width: 18,
-      height: 18
-    }
+    width: "var(--size, 30px)",
+    height: "var(--size, 30px)"
   },
   loadingBar: {
     backgroundColor: "currentcolor",
     display: "inline-block",
     animation: "loading 1s ease-in-out infinite",
     // TODO: make this the default when it has better support
-    width: "round(up, 0.11em, 2px)",
+    // width: "round(up, 0.11em, 2px)",
+    width: "var(--bar-size, 4px)",
     height: "100%",
     "@keyframes loading": {
       "50%": {
@@ -44,13 +43,13 @@ const { staticClasses, useClasses } = createClasses("HvLoading", {
   overlay: {},
   blur: {},
   hidden: { display: "none" },
-  small: {
-    width: 2
-  },
-  regular: {
-    width: 4
-  },
+  /** @deprecated use data-size=small instead */
+  small: {},
+  /** @deprecated use data-size=regular instead */
+  regular: {},
+  /** @deprecated leverage data-size=small instead */
   smallColor: {},
+  /** @deprecated leverage data-size=regular instead */
   regularColor: {}
 });
 export {

package/dist/esm/NumberInput/NumberInput.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef, useRef, useMemo } from "react";
-import { useForkRef } from "@mui/material";
+import { useForkRef } from "@mui/material/utils";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { HvIcon } from "../icons.js";
 import { changeInputValue } from "../Input/utils.js";

package/dist/esm/Pagination/Pagination.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { forwardRef, useState, useCallback, useEffect } from "react";
-import { useTheme, useMediaQuery } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
 import { useDefaultProps, clamp } from "@hitachivantara/uikit-react-utils";
 import { useLabels } from "../hooks/useLabels.js";
 import { HvIcon } from "../icons.js";

package/dist/esm/ScrollToVertical/VerticalScrollListItem/VerticalScrollListItem.styles.js

@@ -24,7 +24,7 @@ const { staticClasses, useClasses } = createClasses(name, {
     fontSize: 4,
     color: theme.colors.textDisabled
   },
-  // TODO: remove in v6 (use classes.button)
+  /** @deprecated: use classes.button instead */
   text: {},
   button: {
     display: "flex",

package/dist/esm/Switch/Switch.js

@@ -1,7 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback } from "react";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { getColor } from "@hitachivantara/uikit-styles";
 import { useControlled } from "../hooks/useControlled.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
 import { setId } from "../utils/setId.js";
@@ -12,7 +11,6 @@ import { HvFormElement } from "../FormElement/FormElement.js";
 import { HvLabel } from "../FormElement/Label/Label.js";
 import { isInvalid } from "../FormElement/utils.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
-const isSemantical = (color) => ["positive", "negative", "warning"].includes(color);
 const HvSwitch = forwardRef(
   function HvSwitch2(props, ref) {
     const {
@@ -36,10 +34,9 @@ const HvSwitch = forwardRef(
       statusMessage,
       "aria-errormessage": ariaErrorMessage,
       inputProps,
-      color,
       ...others
     } = useDefaultProps("HvSwitch", props);
-    const { classes, cx, css } = useClasses(classesProp);
+    const { classes, cx } = useClasses(classesProp);
     const elementId = useUniqueId(id);
     const [isChecked, setIsChecked] = useControlled(checked, defaultChecked);
     const [validationState, setValidationState] = useControlled(
@@ -115,16 +112,6 @@ const HvSwitch = forwardRef(
                     "aria-describedby": ariaDescribedBy,
                     ...inputProps
                   },
-                  ...color && {
-                    classes: {
-                      switchBase: css({
-                        "&&&+.HvBaseSwitch-track,&&&.HvBaseSwitch-checked+.HvBaseSwitch-track": {
-                          backgroundColor: getColor(color),
-                          borderColor: isSemantical(color) ? getColor(`${color}Deep`) : "#00000032"
-                        }
-                      })
-                    }
-                  },
                   ...others
                 }
               )

package/dist/esm/themes/ds3.js

@@ -179,9 +179,7 @@ const ds3 = mergeTheme(ds3$1, {
     HvBaseSwitch: {
       classes: {
         root: {
-          width: "32px",
-          height: "16px",
-          borderRadius: 0,
+          padding: 0,
           "&:hover": {
             backgroundColor: "transparent"
           },
@@ -202,7 +200,8 @@ const ds3 = mergeTheme(ds3$1, {
         },
         thumb: {
           width: 12,
-          height: 12
+          height: 12,
+          left: -9
         }
       }
     },

package/dist/esm/themes/pentahoPlus.js

@@ -112,39 +112,71 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
     HvBaseSwitch: {
       classes: {
         root: {
-          borderRadius: theme.radii.base,
+          padding: theme.space.xxs,
+          borderRadius: theme.radii.full,
           "&:hover": {
             backgroundColor: theme.colors.bgHover
           },
           "& .HvBaseSwitch-switchBase": {
             "& .HvBaseSwitch-thumb": {
               borderColor: "transparent",
-              boxShadow: `0px 1px 1px 0px ${theme.alpha(slate[700], 0.16)}`
+              backgroundColor: "#FFFFFF",
+              left: -8,
+              top: -3,
+              width: 14,
+              height: 14
             },
             "+.HvBaseSwitch-track": {
-              height: 14,
               backgroundColor: theme.colors.textDimmed,
-              borderColor: theme.colors.textSubtle
+              border: "none",
+              width: 40,
+              height: 18
             },
             "&.HvBaseSwitch-checked": {
-              "& .HvBaseSwitch-thumb": {
-                border: `1px solid ${theme.colors.bgContainer}`
-              },
               "+.HvBaseSwitch-track": {
-                borderColor: theme.colors.primaryStrong
+                backgroundColor: theme.colors.positive
+              },
+              "& .HvBaseSwitch-thumb": {
+                left: -2
               }
             },
             "&.HvBaseSwitch-disabled": {
               "& .HvBaseSwitch-thumb": {
-                backgroundColor: theme.colors.borderDisabled,
-                borderColor: theme.colors.borderDisabled
+                borderColor: theme.colors.textDisabled
               },
               "+.HvBaseSwitch-track": {
-                borderColor: theme.colors.borderDisabled,
-                backgroundColor: theme.colors.bgDisabled
+                backgroundColor: theme.colors.bgDisabled,
+                border: "none"
+              }
+            },
+            "&[data-size=medium]": {
+              "+.HvBaseSwitch-track": {
+                width: 48,
+                height: 24
+              },
+              "& .HvBaseSwitch-thumb": {
+                left: -5,
+                top: 0,
+                width: 16,
+                height: 16
+              },
+              "&.HvBaseSwitch-checked .HvBaseSwitch-thumb": {
+                left: 3,
+                top: 0
               }
             }
           }
+        },
+        readOnly: {
+          ":hover": {
+            backgroundColor: "transparent"
+          },
+          "& .HvBaseSwitch-switchBase + .HvBaseSwitch-track": {
+            backgroundColor: theme.colors.border
+          },
+          "& .HvBaseSwitch-switchBase.HvBaseSwitch-checked + .HvBaseSwitch-track": {
+            backgroundColor: theme.mix("positive", 0.5, "dimmer")
+          }
         }
       }
     },

package/dist/types/index.d.ts

@@ -1794,7 +1794,7 @@ export declare const HvBaseSwitch: ForwardRefExoticComponent<Omit<HvBaseSwitchPr
 
 export declare type HvBaseSwitchClasses = ExtractNames<typeof useClasses_34>;
 
-export declare interface HvBaseSwitchProps extends Omit<SwitchProps, "onChange" | "classes"> {
+export declare interface HvBaseSwitchProps extends Omit<SwitchProps, "onChange" | "classes" | "color"> {
     /**
      * Class names to be applied.
      */
@@ -1859,6 +1859,12 @@ export declare interface HvBaseSwitchProps extends Omit<SwitchProps, "onChange"
      * @ignore
      */
     onBlur?: (event: React.FocusEvent<any>) => void;
+    /**
+     * The size of the switch.
+     */
+    size?: SwitchProps["size"];
+    /** Color applied to the switch. */
+    color?: HvColorAny;
 }
 
 export { HvBaseTheme }
@@ -6122,7 +6128,7 @@ export declare interface HvSwitchColumnCellProp {
     switchProps?: HvBaseSwitchProps;
 }
 
-export declare interface HvSwitchProps extends Omit<SwitchProps, "color" | "onChange" | "classes"> {
+export declare interface HvSwitchProps extends Omit<SwitchProps, "color" | "onChange" | "classes" | "size"> {
     /**
      * A Jss Object used to override or extend the styles applied to the switch.
      */
@@ -6208,6 +6214,8 @@ export declare interface HvSwitchProps extends Omit<SwitchProps, "color" | "onCh
     component?: SwitchProps["component"];
     /** Color applied to the switch. */
     color?: HvColorAny;
+    /** The size of the switch. */
+    size?: HvBaseSwitchProps["size"];
 }
 
 export declare const HvTab: ForwardRefExoticComponent<Omit<HvTabProps, "ref"> & RefAttributes<HTMLDivElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.99.0",
+  "version": "5.100.0",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "UI Kit Core React components.",
@@ -32,9 +32,9 @@
   "dependencies": {
     "@emotion/cache": "^11.11.0",
     "@emotion/serialize": "^1.1.2",
-    "@hitachivantara/uikit-react-shared": "^5.5.2",
-    "@hitachivantara/uikit-react-utils": "^0.2.42",
-    "@hitachivantara/uikit-styles": "^5.50.0",
+    "@hitachivantara/uikit-react-shared": "^5.5.3",
+    "@hitachivantara/uikit-react-utils": "^0.2.43",
+    "@hitachivantara/uikit-styles": "^5.50.1",
     "@internationalized/date": "^3.2.0",
     "@mui/base": "5.0.0-beta.68",
     "@popperjs/core": "^2.11.8",
@@ -61,7 +61,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "ac709f3b46b8b62ea3fccfa689983b5a9b72c4ec",
+  "gitHead": "8661e8a73c6ae39431fe12f6cc95e8eb282968e2",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",