@hitachivantara/uikit-react-core 5.79.0 → 5.80.1

package/dist/cjs/BaseCheckBox/BaseCheckBox.cjs

@@ -93,7 +93,6 @@ const HvBaseCheckBox = React.forwardRef((props, ref) => {
       onFocusVisible: onFocusVisibleCallback,
       onBlur: onBlurCallback,
       color: "default",
-      disableRipple: true,
       ...others
     }
   );

package/dist/cjs/BaseRadio/BaseRadio.cjs

@@ -84,7 +84,6 @@ const HvBaseRadio = React.forwardRef(
         disabled,
         required,
         readOnly,
-        disableRipple: true,
         onChange: onLocalChange,
         value,
         checked,

package/dist/cjs/BaseSwitch/BaseSwitch.cjs

@@ -70,7 +70,6 @@ const HvBaseSwitch = React.forwardRef(
         disabled,
         required,
         readOnly,
-        disableRipple: true,
         onChange: onLocalChange,
         value,
         checked,

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

@@ -80,10 +80,13 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvButton",
     backgroundColor: "transparent",
     borderColor: "transparent",
     "&:hover, &:focus-visible": {
-      backgroundColor: "rgba(251, 252, 252, 0.3)"
+      backgroundColor: uikitStyles.theme.alpha("base_light", 0.3)
+    },
+    "&:active": {
+      backgroundColor: uikitStyles.theme.alpha("base_light", 0.5)
     },
     "&$disabled": {
-      backgroundColor: "rgba(251, 252, 252, 0.1)"
+      backgroundColor: uikitStyles.theme.alpha("base_light", 0.1)
     }
   },
   // TODO - remove in v6

package/dist/cjs/Skeleton/Skeleton.styles.cjs

@@ -1,35 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("@emotion/react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const pulse = react.keyframes`
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-`;
-const wave = react.keyframes`
-  0% {
-    transform: translateX(-100%);
-  }
-  50% {
-    transform: translateX(100%);
-  }
-  100% {
-    transform: translateX(100%);
-  }
-`;
-const fadeIn = react.keyframes`
-  from {
-      opacity: 0;
-  }
-  to {
-      opacity: 1;
-  }
-`;
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSkeleton", {
   root: {
     backgroundColor: uikitStyles.theme.colors.atmo3,
@@ -40,7 +12,12 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSkeleton"
   },
   content: {
     opacity: 0,
-    animation: `${fadeIn} 0.5s ease forwards`
+    animation: "fadeIn 0.5s ease forwards",
+    "@keyframes fadeIn": {
+      to: {
+        opacity: 1
+      }
+    }
   },
   circle: {
     borderRadius: uikitStyles.theme.radii.circle
@@ -54,13 +31,18 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSkeleton"
     height: "1.5em"
   },
   pulse: {
-    animation: `${pulse} 2s infinite`
+    animation: "pulse 2s infinite",
+    "@keyframes pulse": {
+      "50%": {
+        opacity: "0.5"
+      }
+    }
   },
   wave: {
     overflow: "hidden",
     position: "relative",
     "&::after": {
-      animation: `${wave} 2s linear 0.5s infinite`,
+      animation: "wave 2s linear 0.5s infinite",
       background: `linear-gradient(
             90deg,
             transparent,
@@ -70,7 +52,20 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSkeleton"
       content: "''",
       position: "absolute",
       transform: "translateX(-100%)",
-      inset: 0
+      inset: 0,
+      // Animation taken from Material UI:
+      // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Skeleton/Skeleton.js
+      "@keyframes wave": {
+        "0%": {
+          transform: "translateX(-100%)"
+        },
+        "50%": {
+          transform: "translateX(100%)"
+        },
+        "100%": {
+          transform: "translateX(100%)"
+        }
+      }
     }
   }
 });

package/dist/cjs/Tab/Tab.cjs

@@ -22,8 +22,6 @@ const HvTab = (props) => {
         selected: classes.selected,
         disabled: classes.disabled
       },
-      disableRipple: true,
-      disableTouchRipple: true,
       focusVisibleClassName: cx("HvIsFocusVisible", classes.focusVisible),
       disabled,
       iconPosition,

package/dist/cjs/Tab/Tab.styles.cjs

@@ -6,11 +6,10 @@ const focusUtils = require("../utils/focusUtils.cjs");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTab", {
   root: {
     marginTop: "3px",
-    padding: "0 16px",
+    padding: uikitStyles.theme.spacing(0, "sm"),
     minWidth: 70,
     minHeight: 32,
     textTransform: "none",
-    fontFamily: uikitStyles.theme.fontFamily.body,
     ...uikitStyles.theme.typography.body,
     "&:hover": {
       backgroundColor: uikitStyles.theme.colors.containerBackgroundHover,
@@ -21,10 +20,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTab", {
       }
     },
     "&$selected": {
-      color: uikitStyles.theme.typography.label.color,
-      fontWeight: uikitStyles.theme.typography.label.fontWeight,
-      lineHeight: uikitStyles.theme.typography.label.lineHeight,
-      letterSpacing: uikitStyles.theme.typography.label.letterSpacing
+      fontWeight: uikitStyles.theme.typography.label.fontWeight
     },
     "&$disabled": {
       color: uikitStyles.theme.colors.secondary_60,
@@ -48,6 +44,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTab", {
     // Override Mui styling: https://mui.com/material-ui/api/tab/#css
     "& .MuiTab-iconWrapper": {
       margin: 0
+    },
+    "& svg .color0": {
+      fill: "currentcolor"
     }
   },
   focusVisible: {

package/dist/cjs/Tabs/Tabs.cjs

@@ -7,18 +7,21 @@ const Tabs_styles = require("./Tabs.styles.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const Tabs__default = /* @__PURE__ */ _interopDefault(Tabs);
 const HvTabs = (props) => {
-  const { classes: classesProp, ...others } = uikitReactUtils.useDefaultProps("HvTabs", props);
-  const { classes } = Tabs_styles.useClasses(classesProp);
+  const {
+    classes: classesProp,
+    floating = false,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvTabs", props);
+  const { classes, cx } = Tabs_styles.useClasses(classesProp);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Tabs__default.default,
     {
       classes: {
-        root: classes.root,
+        root: cx(classes.root, { [classes.floating]: floating }),
         flexContainer: classes.flexContainer,
         indicator: classes.indicator,
         scroller: classes.scroller
       },
-      TabIndicatorProps: { children: /* @__PURE__ */ jsxRuntime.jsx("div", {}) },
       ...others
     }
   );

package/dist/cjs/Tabs/Tabs.styles.cjs

@@ -1,30 +1,19 @@
 "use strict";
 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("HvTabs", {
   root: {
     minHeight: 0,
     overflow: "visible"
   },
-  indicator: {
-    display: "flex",
-    justifyContent: "center",
-    backgroundColor: "transparent",
-    "& > div": {
-      width: "100%",
-      backgroundColor: `${uikitStyles.theme.colors.secondary}`
-    },
-    height: 2
-  },
+  indicator: {},
   scroller: {
     overflow: "visible !important"
   },
   flexContainer: {
-    "& button:first-of-type": {
-      marginLeft: "3px"
-    }
-  }
+    marginLeft: "3px"
+  },
+  floating: {}
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/providers/ThemeProvider.cjs

@@ -92,7 +92,8 @@ const HvThemeProvider = ({
       components: {
         MuiButtonBase: {
           defaultProps: {
-            disableRipple: true
+            disableRipple: true,
+            disableTouchRipple: true
           }
         }
       },

package/dist/esm/BaseCheckBox/BaseCheckBox.js

@@ -90,7 +90,6 @@ const HvBaseCheckBox = forwardRef((props, ref) => {
       onFocusVisible: onFocusVisibleCallback,
       onBlur: onBlurCallback,
       color: "default",
-      disableRipple: true,
       ...others
     }
   );

package/dist/esm/BaseCheckBox/BaseCheckBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseCheckBox.js","sources":["../../../src/BaseCheckBox/BaseCheckBox.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\nimport MuiCheckbox, {\n  CheckboxProps as MuiCheckboxProps,\n} from \"@mui/material/Checkbox\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { staticClasses, useClasses } from \"./BaseCheckBox.styles\";\nimport { Box, Check, Partial } from \"./icons\";\n\nexport { staticClasses as baseCheckBoxClasses };\n\nexport type HvBaseCheckBoxClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseCheckBoxProps\n  extends Omit<MuiCheckboxProps, \"onChange\" | \"classes\"> {\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 checkbox is neither unchecked nor indeterminate.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * Indicates that the input is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the input is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required.\n   */\n  required?: boolean;\n  /**\n   * If `true` the checkbox is selected, if set to `false` the checkbox is not selected.\n   *\n   * When defined the checkbox state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * If `true` the checkbox visually shows the indeterminate state.\n   */\n  indeterminate?: boolean;\n  /**\n   * The callback fired when the checkbox is pressed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n    value: any,\n  ) => void;\n  /**\n   * Whether the selector should use semantic colors.\n   */\n  semantic?: boolean;\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   * Callback fired when the component is blurred.\n   */\n  onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n  /**\n   * A Jss Object used to override or extend the styles applied to the checkbox.\n   */\n  classes?: HvBaseCheckBoxClasses;\n}\n\nconst getSelectorIcons = () => {\n  return {\n    checkbox: <Box />,\n    checkboxPartial: <Partial />,\n    checkboxChecked: <Check />,\n  };\n};\n\n/**\n * A Checkbox is a mechanism that allows user to select one or more options.\n *\n * The Base Checkbox is a building block of the Checkbox form element. Don't use unless\n * implementing a custom use case not covered by the Checkbox form element.\n */\nexport const HvBaseCheckBox = forwardRef<\n  HTMLButtonElement,\n  HvBaseCheckBoxProps\n>((props, ref) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    name,\n    inputProps,\n    onChange,\n    onFocusVisible,\n    onBlur,\n    checked,\n    indeterminate,\n    defaultChecked,\n    value = \"on\",\n    required = false,\n    readOnly = false,\n    disabled = false,\n    semantic = false,\n    ...others\n  } = useDefaultProps(\"HvBaseCheckBox\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [focusVisible, setFocusVisible] = useState<boolean>(false);\n\n  const icons = getSelectorIcons();\n\n  const onChangeCallback = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (readOnly) {\n        return;\n      }\n\n      onChange?.(event, event.target.checked, value);\n    },\n    [onChange, readOnly, value],\n  );\n\n  const onBlurCallback = useCallback(\n    (event: React.FocusEvent<HTMLButtonElement>) => {\n      setFocusVisible(false);\n      onBlur?.(event);\n    },\n    [onBlur],\n  );\n\n  const onFocusVisibleCallback = useCallback(\n    (event: React.FocusEvent<any>) => {\n      setFocusVisible(true);\n      onFocusVisible?.(event);\n    },\n    [onFocusVisible],\n  );\n\n  return (\n    <MuiCheckbox\n      ref={ref}\n      id={id}\n      name={name}\n      value={value}\n      className={cx(\n        classes.root,\n        {\n          [classes.disabled]: disabled,\n          [classes.focusVisible]: focusVisible,\n          [classes.checked]: checked,\n          [classes.indeterminate]: indeterminate,\n          [classes.semantic]: semantic,\n        },\n        className,\n      )}\n      icon={icons.checkbox}\n      indeterminateIcon={icons.checkboxPartial}\n      checkedIcon={icons.checkboxChecked}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      indeterminate={indeterminate}\n      inputProps={inputProps}\n      onChange={onChangeCallback}\n      onFocusVisible={onFocusVisibleCallback}\n      onBlur={onBlurCallback}\n      color=\"default\"\n      disableRipple\n      {...others}\n    />\n  );\n});\n"],"names":[],"mappings":";;;;;;;AAwFA,MAAM,mBAAmB,MAAM;AACtB,SAAA;AAAA,IACL,8BAAW,KAAI,EAAA;AAAA,IACf,qCAAkB,SAAQ,EAAA;AAAA,IAC1B,qCAAkB,OAAM,EAAA;AAAA,EAAA;AAE5B;AAQO,MAAM,iBAAiB,WAG5B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD,gBAAgB,kBAAkB,KAAK;AAE3C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,KAAK;AAE/D,QAAM,QAAQ;AAEd,QAAM,mBAAmB;AAAA,IACvB,CAAC,UAA+C;AAC9C,UAAI,UAAU;AACZ;AAAA,MACF;AAEA,iBAAW,OAAO,MAAM,OAAO,SAAS,KAAK;AAAA,IAC/C;AAAA,IACA,CAAC,UAAU,UAAU,KAAK;AAAA,EAAA;AAG5B,QAAM,iBAAiB;AAAA,IACrB,CAAC,UAA+C;AAC9C,sBAAgB,KAAK;AACrB,eAAS,KAAK;AAAA,IAChB;AAAA,IACA,CAAC,MAAM;AAAA,EAAA;AAGT,QAAM,yBAAyB;AAAA,IAC7B,CAAC,UAAiC;AAChC,sBAAgB,IAAI;AACpB,uBAAiB,KAAK;AAAA,IACxB;AAAA,IACA,CAAC,cAAc;AAAA,EAAA;AAIf,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,YAAY,GAAG;AAAA,UACxB,CAAC,QAAQ,OAAO,GAAG;AAAA,UACnB,CAAC,QAAQ,aAAa,GAAG;AAAA,UACzB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACA,MAAM,MAAM;AAAA,MACZ,mBAAmB,MAAM;AAAA,MACzB,aAAa,MAAM;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,QAAQ;AAAA,MACR,OAAM;AAAA,MACN,eAAa;AAAA,MACZ,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}
+{"version":3,"file":"BaseCheckBox.js","sources":["../../../src/BaseCheckBox/BaseCheckBox.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\nimport MuiCheckbox, {\n  CheckboxProps as MuiCheckboxProps,\n} from \"@mui/material/Checkbox\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { staticClasses, useClasses } from \"./BaseCheckBox.styles\";\nimport { Box, Check, Partial } from \"./icons\";\n\nexport { staticClasses as baseCheckBoxClasses };\n\nexport type HvBaseCheckBoxClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseCheckBoxProps\n  extends Omit<MuiCheckboxProps, \"onChange\" | \"classes\"> {\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 checkbox is neither unchecked nor indeterminate.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * Indicates that the input is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the input is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required.\n   */\n  required?: boolean;\n  /**\n   * If `true` the checkbox is selected, if set to `false` the checkbox is not selected.\n   *\n   * When defined the checkbox state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * If `true` the checkbox visually shows the indeterminate state.\n   */\n  indeterminate?: boolean;\n  /**\n   * The callback fired when the checkbox is pressed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n    value: any,\n  ) => void;\n  /**\n   * Whether the selector should use semantic colors.\n   */\n  semantic?: boolean;\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   * Callback fired when the component is blurred.\n   */\n  onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n  /**\n   * A Jss Object used to override or extend the styles applied to the checkbox.\n   */\n  classes?: HvBaseCheckBoxClasses;\n}\n\nconst getSelectorIcons = () => {\n  return {\n    checkbox: <Box />,\n    checkboxPartial: <Partial />,\n    checkboxChecked: <Check />,\n  };\n};\n\n/**\n * A Checkbox is a mechanism that allows user to select one or more options.\n *\n * The Base Checkbox is a building block of the Checkbox form element. Don't use unless\n * implementing a custom use case not covered by the Checkbox form element.\n */\nexport const HvBaseCheckBox = forwardRef<\n  HTMLButtonElement,\n  HvBaseCheckBoxProps\n>((props, ref) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    name,\n    inputProps,\n    onChange,\n    onFocusVisible,\n    onBlur,\n    checked,\n    indeterminate,\n    defaultChecked,\n    value = \"on\",\n    required = false,\n    readOnly = false,\n    disabled = false,\n    semantic = false,\n    ...others\n  } = useDefaultProps(\"HvBaseCheckBox\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [focusVisible, setFocusVisible] = useState<boolean>(false);\n\n  const icons = getSelectorIcons();\n\n  const onChangeCallback = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (readOnly) {\n        return;\n      }\n\n      onChange?.(event, event.target.checked, value);\n    },\n    [onChange, readOnly, value],\n  );\n\n  const onBlurCallback = useCallback(\n    (event: React.FocusEvent<HTMLButtonElement>) => {\n      setFocusVisible(false);\n      onBlur?.(event);\n    },\n    [onBlur],\n  );\n\n  const onFocusVisibleCallback = useCallback(\n    (event: React.FocusEvent<any>) => {\n      setFocusVisible(true);\n      onFocusVisible?.(event);\n    },\n    [onFocusVisible],\n  );\n\n  return (\n    <MuiCheckbox\n      ref={ref}\n      id={id}\n      name={name}\n      value={value}\n      className={cx(\n        classes.root,\n        {\n          [classes.disabled]: disabled,\n          [classes.focusVisible]: focusVisible,\n          [classes.checked]: checked,\n          [classes.indeterminate]: indeterminate,\n          [classes.semantic]: semantic,\n        },\n        className,\n      )}\n      icon={icons.checkbox}\n      indeterminateIcon={icons.checkboxPartial}\n      checkedIcon={icons.checkboxChecked}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      indeterminate={indeterminate}\n      inputProps={inputProps}\n      onChange={onChangeCallback}\n      onFocusVisible={onFocusVisibleCallback}\n      onBlur={onBlurCallback}\n      color=\"default\"\n      {...others}\n    />\n  );\n});\n"],"names":[],"mappings":";;;;;;;AAwFA,MAAM,mBAAmB,MAAM;AACtB,SAAA;AAAA,IACL,8BAAW,KAAI,EAAA;AAAA,IACf,qCAAkB,SAAQ,EAAA;AAAA,IAC1B,qCAAkB,OAAM,EAAA;AAAA,EAAA;AAE5B;AAQO,MAAM,iBAAiB,WAG5B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD,gBAAgB,kBAAkB,KAAK;AAE3C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,KAAK;AAE/D,QAAM,QAAQ;AAEd,QAAM,mBAAmB;AAAA,IACvB,CAAC,UAA+C;AAC9C,UAAI,UAAU;AACZ;AAAA,MACF;AAEA,iBAAW,OAAO,MAAM,OAAO,SAAS,KAAK;AAAA,IAC/C;AAAA,IACA,CAAC,UAAU,UAAU,KAAK;AAAA,EAAA;AAG5B,QAAM,iBAAiB;AAAA,IACrB,CAAC,UAA+C;AAC9C,sBAAgB,KAAK;AACrB,eAAS,KAAK;AAAA,IAChB;AAAA,IACA,CAAC,MAAM;AAAA,EAAA;AAGT,QAAM,yBAAyB;AAAA,IAC7B,CAAC,UAAiC;AAChC,sBAAgB,IAAI;AACpB,uBAAiB,KAAK;AAAA,IACxB;AAAA,IACA,CAAC,cAAc;AAAA,EAAA;AAIf,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,YAAY,GAAG;AAAA,UACxB,CAAC,QAAQ,OAAO,GAAG;AAAA,UACnB,CAAC,QAAQ,aAAa,GAAG;AAAA,UACzB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACA,MAAM,MAAM;AAAA,MACZ,mBAAmB,MAAM;AAAA,MACzB,aAAa,MAAM;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,QAAQ;AAAA,MACR,OAAM;AAAA,MACL,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}

package/dist/esm/BaseRadio/BaseRadio.js

@@ -81,7 +81,6 @@ const HvBaseRadio = forwardRef(
         disabled,
         required,
         readOnly,
-        disableRipple: true,
         onChange: onLocalChange,
         value,
         checked,

package/dist/esm/BaseRadio/BaseRadio.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseRadio.js","sources":["../../../src/BaseRadio/BaseRadio.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\nimport MuiRadio, { RadioProps as MuiRadioProps } from \"@mui/material/Radio\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { staticClasses, useClasses } from \"./BaseRadio.styles\";\nimport { Selected, Unselected } from \"./icons\";\n\nexport { staticClasses as baseRadioClasses };\n\nexport type HvBaseRadioClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseRadioProps\n  extends Omit<MuiRadioProps, \"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 radio button.\n   */\n  classes?: HvBaseRadioClasses;\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   * 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 radio button is selected, if set to `false` the radio button is not selected.\n   *\n   * When defined the radio button 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 radio button is pressed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n    value: any,\n  ) => void;\n  /**\n   * Whether the selector should use semantic colors.\n   */\n  semantic?: boolean;\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\nexport const getSelectorIcons = () => {\n  return {\n    radio: <Unselected />,\n    radioChecked: <Selected />,\n  };\n};\n\n/**\n * A Radio Button is a mechanism that allows user to select one or more options.\n *\n * The Base Radio Button is a building block of the Radio Button form element. Don't\n * use unless implementing a custom use case not covered by the Radio Button form element.\n */\nexport const HvBaseRadio = forwardRef<HTMLButtonElement, HvBaseRadioProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n      id,\n      name,\n      value = \"on\",\n      required = false,\n      readOnly = false,\n      disabled = false,\n      checked,\n      defaultChecked,\n      onChange,\n      semantic = false,\n      inputProps,\n      onFocusVisible,\n      onBlur,\n      icon,\n      checkedIcon,\n      ...others\n    } = useDefaultProps(\"HvBaseRadio\", 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>) => {\n        setFocusVisible(true);\n        onFocusVisible?.(evt);\n      },\n      [onFocusVisible],\n    );\n\n    const onBlurCallback = useCallback(\n      (evt: React.FocusEvent<any>) => {\n        setFocusVisible(false);\n        onBlur?.(evt);\n      },\n      [onBlur],\n    );\n\n    const icons = getSelectorIcons();\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      <MuiRadio\n        ref={ref}\n        id={id}\n        name={name}\n        className={cx(\n          classes.root,\n          {\n            [classes.disabled]: disabled,\n            [classes.focusVisible]: focusVisible,\n            [classes.checked]: checked,\n            [classes.semantic]: semantic,\n          },\n          className,\n        )}\n        icon={icon || icons.radio}\n        checkedIcon={checkedIcon || icons.radioChecked}\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        inputProps={inputProps}\n        onFocusVisible={onFocusVisibleCallback}\n        onBlur={onBlurCallback}\n        {...others}\n      />\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;AAuFO,MAAM,mBAAmB,MAAM;AAC7B,SAAA;AAAA,IACL,2BAAQ,YAAW,EAAA;AAAA,IACnB,kCAAe,UAAS,EAAA;AAAA,EAAA;AAE5B;AAQO,MAAM,cAAc;AAAA,EACzB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,eAAe,KAAK;AAExC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,UAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,UAAM,yBAAyB;AAAA,MAC7B,CAAC,QAA+B;AAC9B,wBAAgB,IAAI;AACpB,yBAAiB,GAAG;AAAA,MACtB;AAAA,MACA,CAAC,cAAc;AAAA,IAAA;AAGjB,UAAM,iBAAiB;AAAA,MACrB,CAAC,QAA+B;AAC9B,wBAAgB,KAAK;AACrB,iBAAS,GAAG;AAAA,MACd;AAAA,MACA,CAAC,MAAM;AAAA,IAAA;AAGT,UAAM,QAAQ;AAEd,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,YAAY,GAAG;AAAA,YACxB,CAAC,QAAQ,OAAO,GAAG;AAAA,YACnB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACtB;AAAA,UACA;AAAA,QACF;AAAA,QACA,MAAM,QAAQ,MAAM;AAAA,QACpB,aAAa,eAAe,MAAM;AAAA,QAClC,OAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAa;AAAA,QACb,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAgB;AAAA,QAChB,QAAQ;AAAA,QACP,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}
+{"version":3,"file":"BaseRadio.js","sources":["../../../src/BaseRadio/BaseRadio.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\nimport MuiRadio, { RadioProps as MuiRadioProps } from \"@mui/material/Radio\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { staticClasses, useClasses } from \"./BaseRadio.styles\";\nimport { Selected, Unselected } from \"./icons\";\n\nexport { staticClasses as baseRadioClasses };\n\nexport type HvBaseRadioClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseRadioProps\n  extends Omit<MuiRadioProps, \"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 radio button.\n   */\n  classes?: HvBaseRadioClasses;\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   * 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 radio button is selected, if set to `false` the radio button is not selected.\n   *\n   * When defined the radio button 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 radio button is pressed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n    value: any,\n  ) => void;\n  /**\n   * Whether the selector should use semantic colors.\n   */\n  semantic?: boolean;\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\nexport const getSelectorIcons = () => {\n  return {\n    radio: <Unselected />,\n    radioChecked: <Selected />,\n  };\n};\n\n/**\n * A Radio Button is a mechanism that allows user to select one or more options.\n *\n * The Base Radio Button is a building block of the Radio Button form element. Don't\n * use unless implementing a custom use case not covered by the Radio Button form element.\n */\nexport const HvBaseRadio = forwardRef<HTMLButtonElement, HvBaseRadioProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n      id,\n      name,\n      value = \"on\",\n      required = false,\n      readOnly = false,\n      disabled = false,\n      checked,\n      defaultChecked,\n      onChange,\n      semantic = false,\n      inputProps,\n      onFocusVisible,\n      onBlur,\n      icon,\n      checkedIcon,\n      ...others\n    } = useDefaultProps(\"HvBaseRadio\", 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>) => {\n        setFocusVisible(true);\n        onFocusVisible?.(evt);\n      },\n      [onFocusVisible],\n    );\n\n    const onBlurCallback = useCallback(\n      (evt: React.FocusEvent<any>) => {\n        setFocusVisible(false);\n        onBlur?.(evt);\n      },\n      [onBlur],\n    );\n\n    const icons = getSelectorIcons();\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      <MuiRadio\n        ref={ref}\n        id={id}\n        name={name}\n        className={cx(\n          classes.root,\n          {\n            [classes.disabled]: disabled,\n            [classes.focusVisible]: focusVisible,\n            [classes.checked]: checked,\n            [classes.semantic]: semantic,\n          },\n          className,\n        )}\n        icon={icon || icons.radio}\n        checkedIcon={checkedIcon || icons.radioChecked}\n        color=\"default\"\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        onChange={onLocalChange}\n        value={value}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        inputProps={inputProps}\n        onFocusVisible={onFocusVisibleCallback}\n        onBlur={onBlurCallback}\n        {...others}\n      />\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;AAuFO,MAAM,mBAAmB,MAAM;AAC7B,SAAA;AAAA,IACL,2BAAQ,YAAW,EAAA;AAAA,IACnB,kCAAe,UAAS,EAAA;AAAA,EAAA;AAE5B;AAQO,MAAM,cAAc;AAAA,EACzB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,eAAe,KAAK;AAExC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,UAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,UAAM,yBAAyB;AAAA,MAC7B,CAAC,QAA+B;AAC9B,wBAAgB,IAAI;AACpB,yBAAiB,GAAG;AAAA,MACtB;AAAA,MACA,CAAC,cAAc;AAAA,IAAA;AAGjB,UAAM,iBAAiB;AAAA,MACrB,CAAC,QAA+B;AAC9B,wBAAgB,KAAK;AACrB,iBAAS,GAAG;AAAA,MACd;AAAA,MACA,CAAC,MAAM;AAAA,IAAA;AAGT,UAAM,QAAQ;AAEd,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,YAAY,GAAG;AAAA,YACxB,CAAC,QAAQ,OAAO,GAAG;AAAA,YACnB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACtB;AAAA,UACA;AAAA,QACF;AAAA,QACA,MAAM,QAAQ,MAAM;AAAA,QACpB,aAAa,eAAe,MAAM;AAAA,QAClC,OAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAgB;AAAA,QAChB,QAAQ;AAAA,QACP,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}

package/dist/esm/BaseSwitch/BaseSwitch.js

@@ -67,7 +67,6 @@ const HvBaseSwitch = forwardRef(
         disabled,
         required,
         readOnly,
-        disableRipple: true,
         onChange: onLocalChange,
         value,
         checked,

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?: (\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;"}
+{"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        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,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.styles.js

@@ -78,10 +78,13 @@ const { staticClasses, useClasses } = createClasses("HvButton", {
     backgroundColor: "transparent",
     borderColor: "transparent",
     "&:hover, &:focus-visible": {
-      backgroundColor: "rgba(251, 252, 252, 0.3)"
+      backgroundColor: theme.alpha("base_light", 0.3)
+    },
+    "&:active": {
+      backgroundColor: theme.alpha("base_light", 0.5)
     },
     "&$disabled": {
-      backgroundColor: "rgba(251, 252, 252, 0.1)"
+      backgroundColor: theme.alpha("base_light", 0.1)
     }
   },
   // TODO - remove in v6

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

@@ -1 +1 @@
-{"version":3,"file":"Button.styles.js","sources":["../../../src/Button/Button.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme, type HvSize } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvButton\", {\n  /**\n   * Classes applied to the root element\n   */\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    textTransform: \"none\",\n    cursor: \"pointer\",\n    whiteSpace: \"nowrap\",\n\n    // Background color common for almost all variants\n    \":where(:not($disabled))\": {\n      \":hover, :focus-visible\": {\n        backgroundColor: theme.colors.containerBackgroundHover,\n      },\n    },\n    \":focus-visible\": {\n      ...outlineStyles,\n    },\n\n    // Default button - no size specified\n    fontFamily: theme.fontFamily.body,\n    ...theme.typography.label,\n    color: \"var(--color, currentcolor)\",\n    backgroundColor: \"transparent\",\n    height: \"var(--HvButton-height)\",\n    border: \"1px solid transparent\",\n    borderRadius: `var(--radius, ${theme.radii.base})`,\n    padding: theme.spacing(0, \"sm\"),\n  },\n  startIcon: {\n    marginLeft: `calc(-1 * ${theme.space.xs})`,\n  },\n  endIcon: {\n    marginRight: `calc(-1 * ${theme.space.xs})`,\n  },\n  focusVisible: {},\n  disabled: {\n    cursor: \"not-allowed\",\n    color: theme.colors.secondary_60,\n    backgroundColor: \"transparent\",\n    borderColor: \"transparent\",\n    \":hover, :focus-visible\": {\n      backgroundColor: \"transparent\",\n      borderColor: \"transparent\",\n    },\n  },\n  icon: {\n    margin: 0,\n    padding: 0,\n    height: \"fit-content\",\n    \"& > *\": {\n      margin: -1,\n    },\n  },\n  contained: {\n    color: theme.colors.atmo1, // `color-contrast(var(--color) vs ${colors.atmo1}, ${colors.base_light}, ${colors.base_dark})`,\n    backgroundColor: \"var(--color)\",\n    \":where(:not($disabled))\": {\n      \":hover, :focus-visible\": {\n        backgroundColor: \"color-mix(in srgb, var(--color), black 20%)\",\n      },\n      \":active\": {\n        backgroundColor: \"color-mix(in srgb, var(--color), black 30%)\",\n      },\n    },\n  },\n  subtle: {\n    borderColor: \"currentcolor\",\n  },\n  ghost: {},\n  semantic: {\n    color: theme.colors.base_dark,\n    backgroundColor: \"transparent\",\n    borderColor: \"transparent\",\n    \"&:hover, &:focus-visible\": {\n      backgroundColor: \"rgba(251, 252, 252, 0.3)\",\n    },\n    \"&$disabled\": {\n      backgroundColor: \"rgba(251, 252, 252, 0.1)\",\n    },\n  },\n\n  // TODO - remove in v6\n  primary: {},\n  primarySubtle: {},\n  primaryGhost: {},\n  secondarySubtle: {},\n  secondaryGhost: {},\n\n  // Deprecated (DS3)\n  secondary: {},\n});\n\n// TODO - remove xs and xl in v6 since they are not DS spec\nconst sizes: Record<\n  HvSize,\n  { height: string; space?: HvSize; fontSize?: keyof typeof theme.fontSizes }\n> = {\n  xs: { height: \"24px\", fontSize: \"sm\" },\n  sm: { height: \"24px\", fontSize: \"sm\" },\n  md: { height: \"32px\" },\n  lg: { height: \"48px\", space: \"md\" },\n  xl: { height: \"48px\", space: \"md\" },\n};\n\nexport const getSizeStyles = (size: HvSize) => {\n  const { height, space = \"sm\", fontSize } = sizes[size];\n  return {\n    height,\n    padding: theme.spacing(0, space),\n    fontSize: fontSize && theme.fontSizes[fontSize],\n  };\n};\n\nexport const getIconSizeStyles = (size: HvSize) => {\n  const { height } = sizes[size];\n  return {\n    height,\n    width: height,\n  };\n};\n\nexport const getOverrideColors = () => ({\n  \"& svg .color0\": {\n    fill: \"currentcolor\",\n  },\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Button.styles.js","sources":["../../../src/Button/Button.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme, type HvSize } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvButton\", {\n  /**\n   * Classes applied to the root element\n   */\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    textTransform: \"none\",\n    cursor: \"pointer\",\n    whiteSpace: \"nowrap\",\n\n    // Background color common for almost all variants\n    \":where(:not($disabled))\": {\n      \":hover, :focus-visible\": {\n        backgroundColor: theme.colors.containerBackgroundHover,\n      },\n    },\n    \":focus-visible\": {\n      ...outlineStyles,\n    },\n\n    // Default button - no size specified\n    fontFamily: theme.fontFamily.body,\n    ...theme.typography.label,\n    color: \"var(--color, currentcolor)\",\n    backgroundColor: \"transparent\",\n    height: \"var(--HvButton-height)\",\n    border: \"1px solid transparent\",\n    borderRadius: `var(--radius, ${theme.radii.base})`,\n    padding: theme.spacing(0, \"sm\"),\n  },\n  startIcon: {\n    marginLeft: `calc(-1 * ${theme.space.xs})`,\n  },\n  endIcon: {\n    marginRight: `calc(-1 * ${theme.space.xs})`,\n  },\n  focusVisible: {},\n  disabled: {\n    cursor: \"not-allowed\",\n    color: theme.colors.secondary_60,\n    backgroundColor: \"transparent\",\n    borderColor: \"transparent\",\n    \":hover, :focus-visible\": {\n      backgroundColor: \"transparent\",\n      borderColor: \"transparent\",\n    },\n  },\n  icon: {\n    margin: 0,\n    padding: 0,\n    height: \"fit-content\",\n    \"& > *\": {\n      margin: -1,\n    },\n  },\n  contained: {\n    color: theme.colors.atmo1, // `color-contrast(var(--color) vs ${colors.atmo1}, ${colors.base_light}, ${colors.base_dark})`,\n    backgroundColor: \"var(--color)\",\n    \":where(:not($disabled))\": {\n      \":hover, :focus-visible\": {\n        backgroundColor: \"color-mix(in srgb, var(--color), black 20%)\",\n      },\n      \":active\": {\n        backgroundColor: \"color-mix(in srgb, var(--color), black 30%)\",\n      },\n    },\n  },\n  subtle: {\n    borderColor: \"currentcolor\",\n  },\n  ghost: {},\n  semantic: {\n    color: theme.colors.base_dark,\n    backgroundColor: \"transparent\",\n    borderColor: \"transparent\",\n    \"&:hover, &:focus-visible\": {\n      backgroundColor: theme.alpha(\"base_light\", 0.3),\n    },\n    \"&:active\": {\n      backgroundColor: theme.alpha(\"base_light\", 0.5),\n    },\n    \"&$disabled\": {\n      backgroundColor: theme.alpha(\"base_light\", 0.1),\n    },\n  },\n\n  // TODO - remove in v6\n  primary: {},\n  primarySubtle: {},\n  primaryGhost: {},\n  secondarySubtle: {},\n  secondaryGhost: {},\n\n  // Deprecated (DS3)\n  secondary: {},\n});\n\n// TODO - remove xs and xl in v6 since they are not DS spec\nconst sizes: Record<\n  HvSize,\n  { height: string; space?: HvSize; fontSize?: keyof typeof theme.fontSizes }\n> = {\n  xs: { height: \"24px\", fontSize: \"sm\" },\n  sm: { height: \"24px\", fontSize: \"sm\" },\n  md: { height: \"32px\" },\n  lg: { height: \"48px\", space: \"md\" },\n  xl: { height: \"48px\", space: \"md\" },\n};\n\nexport const getSizeStyles = (size: HvSize) => {\n  const { height, space = \"sm\", fontSize } = sizes[size];\n  return {\n    height,\n    padding: theme.spacing(0, space),\n    fontSize: fontSize && theme.fontSizes[fontSize],\n  };\n};\n\nexport const getIconSizeStyles = (size: HvSize) => {\n  const { height } = sizes[size];\n  return {\n    height,\n    width: height,\n  };\n};\n\nexport const getOverrideColors = () => ({\n  \"& svg .color0\": {\n    fill: \"currentcolor\",\n  },\n});\n"],"names":[],"mappings":"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"}

package/dist/esm/Skeleton/Skeleton.styles.js

@@ -1,33 +1,5 @@
-import { keyframes } from "@emotion/react";
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const pulse = keyframes`
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-`;
-const wave = keyframes`
-  0% {
-    transform: translateX(-100%);
-  }
-  50% {
-    transform: translateX(100%);
-  }
-  100% {
-    transform: translateX(100%);
-  }
-`;
-const fadeIn = keyframes`
-  from {
-      opacity: 0;
-  }
-  to {
-      opacity: 1;
-  }
-`;
 const { staticClasses, useClasses } = createClasses("HvSkeleton", {
   root: {
     backgroundColor: theme.colors.atmo3,
@@ -38,7 +10,12 @@ const { staticClasses, useClasses } = createClasses("HvSkeleton", {
   },
   content: {
     opacity: 0,
-    animation: `${fadeIn} 0.5s ease forwards`
+    animation: "fadeIn 0.5s ease forwards",
+    "@keyframes fadeIn": {
+      to: {
+        opacity: 1
+      }
+    }
   },
   circle: {
     borderRadius: theme.radii.circle
@@ -52,13 +29,18 @@ const { staticClasses, useClasses } = createClasses("HvSkeleton", {
     height: "1.5em"
   },
   pulse: {
-    animation: `${pulse} 2s infinite`
+    animation: "pulse 2s infinite",
+    "@keyframes pulse": {
+      "50%": {
+        opacity: "0.5"
+      }
+    }
   },
   wave: {
     overflow: "hidden",
     position: "relative",
     "&::after": {
-      animation: `${wave} 2s linear 0.5s infinite`,
+      animation: "wave 2s linear 0.5s infinite",
       background: `linear-gradient(
             90deg,
             transparent,
@@ -68,7 +50,20 @@ const { staticClasses, useClasses } = createClasses("HvSkeleton", {
       content: "''",
       position: "absolute",
       transform: "translateX(-100%)",
-      inset: 0
+      inset: 0,
+      // Animation taken from Material UI:
+      // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Skeleton/Skeleton.js
+      "@keyframes wave": {
+        "0%": {
+          transform: "translateX(-100%)"
+        },
+        "50%": {
+          transform: "translateX(100%)"
+        },
+        "100%": {
+          transform: "translateX(100%)"
+        }
+      }
     }
   }
 });

package/dist/esm/Skeleton/Skeleton.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.styles.js","sources":["../../../src/Skeleton/Skeleton.styles.tsx"],"sourcesContent":["import { keyframes } from \"@emotion/react\";\nimport { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst pulse = keyframes`\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n`;\n\n// Animation taken from Material UI:\n// https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Skeleton/Skeleton.js\nconst wave = keyframes`\n  0% {\n    transform: translateX(-100%);\n  }\n  50% {\n    transform: translateX(100%);\n  }\n  100% {\n    transform: translateX(100%);\n  }\n`;\n\nconst fadeIn = keyframes`\n  from {\n      opacity: 0;\n  }\n  to {\n      opacity: 1;\n  }\n`;\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSkeleton\", {\n  root: {\n    backgroundColor: theme.colors.atmo3,\n    width: \"fit-content\",\n    \"& > *\": {\n      visibility: \"hidden\",\n    },\n  },\n  content: {\n    opacity: 0,\n    animation: `${fadeIn} 0.5s ease forwards`,\n  },\n  circle: {\n    borderRadius: theme.radii.circle,\n  },\n  square: {\n    borderRadius: theme.radii.base,\n  },\n  text: {\n    borderRadius: theme.radii.full,\n    width: \"100%\",\n    height: \"1.5em\",\n  },\n  pulse: {\n    animation: `${pulse} 2s infinite`,\n  },\n  wave: {\n    overflow: \"hidden\",\n    position: \"relative\",\n    \"&::after\": {\n      animation: `${wave} 2s linear 0.5s infinite`,\n      background: `linear-gradient(\n            90deg,\n            transparent,\n            ${theme.colors.atmo4},\n            transparent\n          )`,\n      content: \"''\",\n      position: \"absolute\",\n      transform: \"translateX(-100%)\",\n      inset: 0,\n    },\n  },\n});\n"],"names":[],"mappings":";;;AAIA,MAAM,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWd,MAAM,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYb,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASR,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM;AAAA,IACJ,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO;AAAA,IACP,SAAS;AAAA,MACP,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,WAAW,GAAG,MAAM;AAAA,EACtB;AAAA,EACA,QAAQ;AAAA,IACN,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,QAAQ;AAAA,IACN,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,MAAM;AAAA,IACJ,cAAc,MAAM,MAAM;AAAA,IAC1B,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,OAAO;AAAA,IACL,WAAW,GAAG,KAAK;AAAA,EACrB;AAAA,EACA,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,MACV,WAAW,GAAG,IAAI;AAAA,MAClB,YAAY;AAAA;AAAA;AAAA,cAGJ,MAAM,OAAO,KAAK;AAAA;AAAA;AAAA,MAG1B,SAAS;AAAA,MACT,UAAU;AAAA,MACV,WAAW;AAAA,MACX,OAAO;AAAA,IACT;AAAA,EACF;AACF,CAAC;"}
+{"version":3,"file":"Skeleton.styles.js","sources":["../../../src/Skeleton/Skeleton.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSkeleton\", {\n  root: {\n    backgroundColor: theme.colors.atmo3,\n    width: \"fit-content\",\n    \"& > *\": {\n      visibility: \"hidden\",\n    },\n  },\n  content: {\n    opacity: 0,\n    animation: \"fadeIn 0.5s ease forwards\",\n\n    \"@keyframes fadeIn\": {\n      to: {\n        opacity: 1,\n      },\n    },\n  },\n  circle: {\n    borderRadius: theme.radii.circle,\n  },\n  square: {\n    borderRadius: theme.radii.base,\n  },\n  text: {\n    borderRadius: theme.radii.full,\n    width: \"100%\",\n    height: \"1.5em\",\n  },\n  pulse: {\n    animation: \"pulse 2s infinite\",\n\n    \"@keyframes pulse\": {\n      \"50%\": {\n        opacity: \"0.5\",\n      },\n    },\n  },\n  wave: {\n    overflow: \"hidden\",\n    position: \"relative\",\n    \"&::after\": {\n      animation: \"wave 2s linear 0.5s infinite\",\n      background: `linear-gradient(\n            90deg,\n            transparent,\n            ${theme.colors.atmo4},\n            transparent\n          )`,\n      content: \"''\",\n      position: \"absolute\",\n      transform: \"translateX(-100%)\",\n      inset: 0,\n\n      // Animation taken from Material UI:\n      // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Skeleton/Skeleton.js\n      \"@keyframes wave\": {\n        \"0%\": {\n          transform: \"translateX(-100%)\",\n        },\n        \"50%\": {\n          transform: \"translateX(100%)\",\n        },\n        \"100%\": {\n          transform: \"translateX(100%)\",\n        },\n      },\n    },\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM;AAAA,IACJ,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO;AAAA,IACP,SAAS;AAAA,MACP,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,WAAW;AAAA,IAEX,qBAAqB;AAAA,MACnB,IAAI;AAAA,QACF,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EACA,QAAQ;AAAA,IACN,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,QAAQ;AAAA,IACN,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,MAAM;AAAA,IACJ,cAAc,MAAM,MAAM;AAAA,IAC1B,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,OAAO;AAAA,IACL,WAAW;AAAA,IAEX,oBAAoB;AAAA,MAClB,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,MACV,WAAW;AAAA,MACX,YAAY;AAAA;AAAA;AAAA,cAGJ,MAAM,OAAO,KAAK;AAAA;AAAA;AAAA,MAG1B,SAAS;AAAA,MACT,UAAU;AAAA,MACV,WAAW;AAAA,MACX,OAAO;AAAA;AAAA;AAAA,MAIP,mBAAmB;AAAA,QACjB,MAAM;AAAA,UACJ,WAAW;AAAA,QACb;AAAA,QACA,OAAO;AAAA,UACL,WAAW;AAAA,QACb;AAAA,QACA,QAAQ;AAAA,UACN,WAAW;AAAA,QACb;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/Tab/Tab.js

@@ -19,8 +19,6 @@ const HvTab = (props) => {
         selected: classes.selected,
         disabled: classes.disabled
       },
-      disableRipple: true,
-      disableTouchRipple: true,
       focusVisibleClassName: cx("HvIsFocusVisible", classes.focusVisible),
       disabled,
       iconPosition,

package/dist/esm/Tab/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../../../src/Tab/Tab.tsx"],"sourcesContent":["import Tab, { TabProps as MuiTabProps } from \"@mui/material/Tab\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { staticClasses, useClasses } from \"./Tab.styles\";\n\nexport { staticClasses as tabClasses };\n\nexport type HvTabClasses = ExtractNames<typeof useClasses>;\n\n// Mui Tab props: https://mui.com/material-ui/api/tab/#props\nexport interface HvTabProps extends Omit<MuiTabProps, \"children\"> {\n  /** If `true`, the tab will be disabled. */\n  disabled?: boolean;\n  /** The icon element. */\n  icon?: React.ReactElement | string;\n  /** The label element. */\n  label?: React.ReactNode;\n  /** The position of the icon relative to the label. */\n  iconPosition?: \"bottom\" | \"end\" | \"start\" | \"top\";\n  /** A Jss Object used to override or extend the component styles. */\n  classes?: HvTabClasses;\n}\n\nexport const HvTab = (props: HvTabProps) => {\n  const {\n    classes: classesProp,\n    iconPosition = \"top\",\n    disabled = false,\n    ...others\n  } = useDefaultProps(\"HvTab\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <Tab\n      classes={{\n        root: classes.root,\n        selected: classes.selected,\n        disabled: classes.disabled,\n      }}\n      disableRipple\n      disableTouchRipple\n      // expose the global class HvIsFocusVisible as a marker\n      // not to be styled directly, only as helper in specific css queries\n      focusVisibleClassName={cx(\"HvIsFocusVisible\", classes.focusVisible)}\n      disabled={disabled}\n      iconPosition={iconPosition}\n      {...others}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;AA0Ba,MAAA,QAAQ,CAAC,UAAsB;AACpC,QAAA;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD,gBAAgB,SAAS,KAAK;AAClC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,UAAU,QAAQ;AAAA,QAClB,UAAU,QAAQ;AAAA,MACpB;AAAA,MACA,eAAa;AAAA,MACb,oBAAkB;AAAA,MAGlB,uBAAuB,GAAG,oBAAoB,QAAQ,YAAY;AAAA,MAClE;AAAA,MACA;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}
+{"version":3,"file":"Tab.js","sources":["../../../src/Tab/Tab.tsx"],"sourcesContent":["import Tab, { TabProps as MuiTabProps } from \"@mui/material/Tab\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { staticClasses, useClasses } from \"./Tab.styles\";\n\nexport { staticClasses as tabClasses };\n\nexport type HvTabClasses = ExtractNames<typeof useClasses>;\n\n// Mui Tab props: https://mui.com/material-ui/api/tab/#props\nexport interface HvTabProps extends Omit<MuiTabProps, \"children\"> {\n  /** If `true`, the tab will be disabled. */\n  disabled?: boolean;\n  /** The icon element. */\n  icon?: React.ReactElement | string;\n  /** The label element. */\n  label?: React.ReactNode;\n  /** The position of the icon relative to the label. */\n  iconPosition?: \"bottom\" | \"end\" | \"start\" | \"top\";\n  /** A Jss Object used to override or extend the component styles. */\n  classes?: HvTabClasses;\n}\n\nexport const HvTab = (props: HvTabProps) => {\n  const {\n    classes: classesProp,\n    iconPosition = \"top\",\n    disabled = false,\n    ...others\n  } = useDefaultProps(\"HvTab\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <Tab\n      classes={{\n        root: classes.root,\n        selected: classes.selected,\n        disabled: classes.disabled,\n      }}\n      // expose the global class HvIsFocusVisible as a marker\n      // not to be styled directly, only as helper in specific css queries\n      focusVisibleClassName={cx(\"HvIsFocusVisible\", classes.focusVisible)}\n      disabled={disabled}\n      iconPosition={iconPosition}\n      {...others}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;AA0Ba,MAAA,QAAQ,CAAC,UAAsB;AACpC,QAAA;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD,gBAAgB,SAAS,KAAK;AAClC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,UAAU,QAAQ;AAAA,QAClB,UAAU,QAAQ;AAAA,MACpB;AAAA,MAGA,uBAAuB,GAAG,oBAAoB,QAAQ,YAAY;AAAA,MAClE;AAAA,MACA;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/esm/Tab/Tab.styles.js

@@ -4,11 +4,10 @@ import { outlineStyles } from "../utils/focusUtils.js";
 const { staticClasses, useClasses } = createClasses("HvTab", {
   root: {
     marginTop: "3px",
-    padding: "0 16px",
+    padding: theme.spacing(0, "sm"),
     minWidth: 70,
     minHeight: 32,
     textTransform: "none",
-    fontFamily: theme.fontFamily.body,
     ...theme.typography.body,
     "&:hover": {
       backgroundColor: theme.colors.containerBackgroundHover,
@@ -19,10 +18,7 @@ const { staticClasses, useClasses } = createClasses("HvTab", {
       }
     },
     "&$selected": {
-      color: theme.typography.label.color,
-      fontWeight: theme.typography.label.fontWeight,
-      lineHeight: theme.typography.label.lineHeight,
-      letterSpacing: theme.typography.label.letterSpacing
+      fontWeight: theme.typography.label.fontWeight
     },
     "&$disabled": {
       color: theme.colors.secondary_60,
@@ -46,6 +42,9 @@ const { staticClasses, useClasses } = createClasses("HvTab", {
     // Override Mui styling: https://mui.com/material-ui/api/tab/#css
     "& .MuiTab-iconWrapper": {
       margin: 0
+    },
+    "& svg .color0": {
+      fill: "currentcolor"
     }
   },
   focusVisible: {

package/dist/esm/Tab/Tab.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.styles.js","sources":["../../../src/Tab/Tab.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTab\", {\n  root: {\n    marginTop: \"3px\",\n    padding: \"0 16px\",\n    minWidth: 70,\n    minHeight: 32,\n    textTransform: \"none\",\n    fontFamily: theme.fontFamily.body,\n    ...(theme.typography.body as React.CSSProperties),\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n      borderRadius: theme.radii.base,\n      \"&::after\": {\n        height: \"1px\",\n        backgroundColor: theme.colors.atmo4,\n      },\n    },\n    \"&$selected\": {\n      color: theme.typography.label.color,\n      fontWeight: theme.typography.label.fontWeight,\n      lineHeight: theme.typography.label.lineHeight,\n      letterSpacing: theme.typography.label.letterSpacing,\n    },\n    \"&$disabled\": {\n      color: theme.colors.secondary_60,\n      cursor: \"not-allowed\",\n      pointerEvents: \"all\",\n      opacity: 1,\n      \"&:hover\": {\n        background: \"none\",\n      },\n    },\n    opacity: 1,\n    \"&::after\": {\n      position: \"absolute\",\n      left: 0,\n      top: \"calc(100% - 1px)\",\n      height: \"1px\",\n      width: \"100%\",\n      backgroundColor: theme.colors.atmo4,\n      content: \"''\",\n    },\n    // Override Mui styling: https://mui.com/material-ui/api/tab/#css\n    \"& .MuiTab-iconWrapper\": {\n      margin: 0,\n    },\n  },\n  focusVisible: {\n    ...outlineStyles,\n  },\n  selected: {},\n  disabled: {},\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,SAAS;AAAA,EAClE,MAAM;AAAA,IACJ,WAAW;AAAA,IACX,SAAS;AAAA,IACT,UAAU;AAAA,IACV,WAAW;AAAA,IACX,eAAe;AAAA,IACf,YAAY,MAAM,WAAW;AAAA,IAC7B,GAAI,MAAM,WAAW;AAAA,IACrB,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAC9B,cAAc,MAAM,MAAM;AAAA,MAC1B,YAAY;AAAA,QACV,QAAQ;AAAA,QACR,iBAAiB,MAAM,OAAO;AAAA,MAChC;AAAA,IACF;AAAA,IACA,cAAc;AAAA,MACZ,OAAO,MAAM,WAAW,MAAM;AAAA,MAC9B,YAAY,MAAM,WAAW,MAAM;AAAA,MACnC,YAAY,MAAM,WAAW,MAAM;AAAA,MACnC,eAAe,MAAM,WAAW,MAAM;AAAA,IACxC;AAAA,IACA,cAAc;AAAA,MACZ,OAAO,MAAM,OAAO;AAAA,MACpB,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,SAAS;AAAA,MACT,WAAW;AAAA,QACT,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,SAAS;AAAA,IACT,YAAY;AAAA,MACV,UAAU;AAAA,MACV,MAAM;AAAA,MACN,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,iBAAiB,MAAM,OAAO;AAAA,MAC9B,SAAS;AAAA,IACX;AAAA;AAAA,IAEA,yBAAyB;AAAA,MACvB,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,cAAc;AAAA,IACZ,GAAG;AAAA,EACL;AAAA,EACA,UAAU,CAAC;AAAA,EACX,UAAU,CAAC;AACb,CAAC;"}
+{"version":3,"file":"Tab.styles.js","sources":["../../../src/Tab/Tab.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTab\", {\n  root: {\n    marginTop: \"3px\",\n    padding: theme.spacing(0, \"sm\"),\n    minWidth: 70,\n    minHeight: 32,\n    textTransform: \"none\",\n    ...theme.typography.body,\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n      borderRadius: theme.radii.base,\n      \"&::after\": {\n        height: \"1px\",\n        backgroundColor: theme.colors.atmo4,\n      },\n    },\n    \"&$selected\": {\n      fontWeight: theme.typography.label.fontWeight,\n    },\n    \"&$disabled\": {\n      color: theme.colors.secondary_60,\n      cursor: \"not-allowed\",\n      pointerEvents: \"all\",\n      opacity: 1,\n      \"&:hover\": {\n        background: \"none\",\n      },\n    },\n    opacity: 1,\n    \"&::after\": {\n      position: \"absolute\",\n      left: 0,\n      top: \"calc(100% - 1px)\",\n      height: \"1px\",\n      width: \"100%\",\n      backgroundColor: theme.colors.atmo4,\n      content: \"''\",\n    },\n    // Override Mui styling: https://mui.com/material-ui/api/tab/#css\n    \"& .MuiTab-iconWrapper\": {\n      margin: 0,\n    },\n    \"& svg .color0\": {\n      fill: \"currentcolor\",\n    },\n  },\n  focusVisible: {\n    ...outlineStyles,\n  },\n  selected: {},\n  disabled: {},\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,SAAS;AAAA,EAClE,MAAM;AAAA,IACJ,WAAW;AAAA,IACX,SAAS,MAAM,QAAQ,GAAG,IAAI;AAAA,IAC9B,UAAU;AAAA,IACV,WAAW;AAAA,IACX,eAAe;AAAA,IACf,GAAG,MAAM,WAAW;AAAA,IACpB,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAC9B,cAAc,MAAM,MAAM;AAAA,MAC1B,YAAY;AAAA,QACV,QAAQ;AAAA,QACR,iBAAiB,MAAM,OAAO;AAAA,MAChC;AAAA,IACF;AAAA,IACA,cAAc;AAAA,MACZ,YAAY,MAAM,WAAW,MAAM;AAAA,IACrC;AAAA,IACA,cAAc;AAAA,MACZ,OAAO,MAAM,OAAO;AAAA,MACpB,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,SAAS;AAAA,MACT,WAAW;AAAA,QACT,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,SAAS;AAAA,IACT,YAAY;AAAA,MACV,UAAU;AAAA,MACV,MAAM;AAAA,MACN,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,iBAAiB,MAAM,OAAO;AAAA,MAC9B,SAAS;AAAA,IACX;AAAA;AAAA,IAEA,yBAAyB;AAAA,MACvB,QAAQ;AAAA,IACV;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,cAAc;AAAA,IACZ,GAAG;AAAA,EACL;AAAA,EACA,UAAU,CAAC;AAAA,EACX,UAAU,CAAC;AACb,CAAC;"}

package/dist/esm/Tabs/Tabs.js

@@ -4,18 +4,21 @@ import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./Tabs.styles.js";
 import { staticClasses } from "./Tabs.styles.js";
 const HvTabs = (props) => {
-  const { classes: classesProp, ...others } = useDefaultProps("HvTabs", props);
-  const { classes } = useClasses(classesProp);
+  const {
+    classes: classesProp,
+    floating = false,
+    ...others
+  } = useDefaultProps("HvTabs", props);
+  const { classes, cx } = useClasses(classesProp);
   return /* @__PURE__ */ jsx(
     Tabs,
     {
       classes: {
-        root: classes.root,
+        root: cx(classes.root, { [classes.floating]: floating }),
         flexContainer: classes.flexContainer,
         indicator: classes.indicator,
         scroller: classes.scroller
       },
-      TabIndicatorProps: { children: /* @__PURE__ */ jsx("div", {}) },
       ...others
     }
   );

package/dist/esm/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../src/Tabs/Tabs.tsx"],"sourcesContent":["import Tabs, { TabsProps as MuiTabsProps } from \"@mui/material/Tabs\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { staticClasses, useClasses } from \"./Tabs.styles\";\n\nexport { staticClasses as tabsClasses };\n\nexport type HvTabsClasses = ExtractNames<typeof useClasses>;\n\n// Mui Tabs props: https://mui.com/material-ui/api/tabs/#props\nexport interface HvTabsProps extends Omit<MuiTabsProps, \"onChange\"> {\n  /**\n   * The value of the currently selected Tab. If you don't want any selected Tab, you can set this property to `false`.\n   */\n  value?: any;\n  /**\n   * Callback fired when the value changes.\n   */\n  onChange?: (event: React.SyntheticEvent, value: any) => void;\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvTabsClasses;\n  /** @ignore */\n  ref?: MuiTabsProps[\"ref\"];\n  /** @ignore */\n  component?: MuiTabsProps[\"component\"];\n}\n\n/**\n * A Tab is a graphical control element that allows multiple documents or panels to be contained within a single window.\n * Tabs can be used as a navigational widget for switching between sets of documents.\n */\nexport const HvTabs = (props: HvTabsProps) => {\n  const { classes: classesProp, ...others } = useDefaultProps(\"HvTabs\", props);\n\n  const { classes } = useClasses(classesProp);\n\n  return (\n    <Tabs\n      classes={{\n        root: classes.root,\n        flexContainer: classes.flexContainer,\n        indicator: classes.indicator,\n        scroller: classes.scroller,\n      }}\n      TabIndicatorProps={{ children: <div /> }}\n      {...others}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;AAoCa,MAAA,SAAS,CAAC,UAAuB;AACtC,QAAA,EAAE,SAAS,aAAa,GAAG,OAAW,IAAA,gBAAgB,UAAU,KAAK;AAE3E,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAGxC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,eAAe,QAAQ;AAAA,QACvB,WAAW,QAAQ;AAAA,QACnB,UAAU,QAAQ;AAAA,MACpB;AAAA,MACA,mBAAmB,EAAE,UAAU,oBAAC,QAAI,CAAA,EAAG;AAAA,MACtC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}
+{"version":3,"file":"Tabs.js","sources":["../../../src/Tabs/Tabs.tsx"],"sourcesContent":["import Tabs, { TabsProps as MuiTabsProps } from \"@mui/material/Tabs\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { staticClasses, useClasses } from \"./Tabs.styles\";\n\nexport { staticClasses as tabsClasses };\n\nexport type HvTabsClasses = ExtractNames<typeof useClasses>;\n\n// Mui Tabs props: https://mui.com/material-ui/api/tabs/#props\nexport interface HvTabsProps extends Omit<MuiTabsProps, \"onChange\"> {\n  /**\n   * The value of the currently selected Tab. If you don't want any selected Tab, you can set this property to `false`.\n   */\n  value?: any;\n  /**\n   * Callback fired when the value changes.\n   */\n  onChange?: (event: React.SyntheticEvent, value: any) => void;\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvTabsClasses;\n  /** @ignore */\n  ref?: MuiTabsProps[\"ref\"];\n  /** @ignore */\n  component?: MuiTabsProps[\"component\"];\n\n  floating?: boolean;\n}\n\n/**\n * A Tab is a graphical control element that allows multiple documents or panels to be contained within a single window.\n * Tabs can be used as a navigational widget for switching between sets of documents.\n */\nexport const HvTabs = (props: HvTabsProps) => {\n  const {\n    classes: classesProp,\n    floating = false,\n    ...others\n  } = useDefaultProps(\"HvTabs\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <Tabs\n      classes={{\n        root: cx(classes.root, { [classes.floating]: floating }),\n        flexContainer: classes.flexContainer,\n        indicator: classes.indicator,\n        scroller: classes.scroller,\n      }}\n      {...others}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;AAsCa,MAAA,SAAS,CAAC,UAAuB;AACtC,QAAA;AAAA,IACJ,SAAS;AAAA,IACT,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD,gBAAgB,UAAU,KAAK;AAEnC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,QACP,MAAM,GAAG,QAAQ,MAAM,EAAE,CAAC,QAAQ,QAAQ,GAAG,UAAU;AAAA,QACvD,eAAe,QAAQ;AAAA,QACvB,WAAW,QAAQ;AAAA,QACnB,UAAU,QAAQ;AAAA,MACpB;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/esm/Tabs/Tabs.styles.js

@@ -1,28 +1,17 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvTabs", {
   root: {
     minHeight: 0,
     overflow: "visible"
   },
-  indicator: {
-    display: "flex",
-    justifyContent: "center",
-    backgroundColor: "transparent",
-    "& > div": {
-      width: "100%",
-      backgroundColor: `${theme.colors.secondary}`
-    },
-    height: 2
-  },
+  indicator: {},
   scroller: {
     overflow: "visible !important"
   },
   flexContainer: {
-    "& button:first-of-type": {
-      marginLeft: "3px"
-    }
-  }
+    marginLeft: "3px"
+  },
+  floating: {}
 });
 export {
   staticClasses,

package/dist/esm/Tabs/Tabs.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.styles.js","sources":["../../../src/Tabs/Tabs.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTabs\", {\n  root: {\n    minHeight: 0,\n    overflow: \"visible\",\n  },\n  indicator: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    backgroundColor: \"transparent\",\n    \"& > div\": {\n      width: \"100%\",\n      backgroundColor: `${theme.colors.secondary}`,\n    },\n    height: 2,\n  },\n  scroller: {\n    overflow: \"visible !important\",\n  },\n  flexContainer: {\n    \"& button:first-of-type\": {\n      marginLeft: \"3px\",\n    },\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,UAAU;AAAA,EACnE,MAAM;AAAA,IACJ,WAAW;AAAA,IACX,UAAU;AAAA,EACZ;AAAA,EACA,WAAW;AAAA,IACT,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,WAAW;AAAA,MACT,OAAO;AAAA,MACP,iBAAiB,GAAG,MAAM,OAAO,SAAS;AAAA,IAC5C;AAAA,IACA,QAAQ;AAAA,EACV;AAAA,EACA,UAAU;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EACA,eAAe;AAAA,IACb,0BAA0B;AAAA,MACxB,YAAY;AAAA,IACd;AAAA,EACF;AACF,CAAC;"}
+{"version":3,"file":"Tabs.styles.js","sources":["../../../src/Tabs/Tabs.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTabs\", {\n  root: {\n    minHeight: 0,\n    overflow: \"visible\",\n  },\n  indicator: {},\n  scroller: {\n    overflow: \"visible !important\",\n  },\n  flexContainer: {\n    marginLeft: \"3px\",\n  },\n  floating: {},\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,UAAU;AAAA,EACnE,MAAM;AAAA,IACJ,WAAW;AAAA,IACX,UAAU;AAAA,EACZ;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,UAAU;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EACA,eAAe;AAAA,IACb,YAAY;AAAA,EACd;AAAA,EACA,UAAU,CAAC;AACb,CAAC;"}

package/dist/esm/providers/ThemeProvider.js

@@ -91,7 +91,8 @@ const HvThemeProvider = ({
       components: {
         MuiButtonBase: {
           defaultProps: {
-            disableRipple: true
+            disableRipple: true,
+            disableTouchRipple: true
           }
         }
       },

package/dist/esm/providers/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","sources":["../../../src/providers/ThemeProvider.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { EmotionCache } from \"@emotion/cache\";\nimport {\n  createTheme,\n  ThemeProvider as MuiThemeProvider,\n} from \"@mui/material/styles\";\nimport {\n  defaultCacheKey,\n  defaultEmotionCache,\n  EmotionContext,\n  HvThemeContext,\n  type HvThemeContextValue,\n} from \"@hitachivantara/uikit-react-shared\";\nimport { HvThemeStructure, parseTheme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvTheme } from \"../types/theme\";\nimport { setElementAttrs } from \"../utils/theme\";\n\nexport { HvThemeContext };\nexport type { HvThemeContextValue };\n\nexport { defaultCacheKey, defaultEmotionCache, EmotionContext };\n\ninterface HvThemeProviderProps {\n  children: React.ReactNode;\n  themes: (HvTheme | HvThemeStructure)[];\n  theme: string;\n  emotionCache: EmotionCache;\n  colorMode: string;\n  themeRootId?: string;\n}\n\nexport const HvThemeProvider = ({\n  children,\n  themes: themesList,\n  theme: themeProp,\n  emotionCache,\n  colorMode: colorModeProp,\n  themeRootId: rootId,\n}: HvThemeProviderProps) => {\n  const [theme, setTheme] = useState(themeProp);\n  const [colorMode, setColorMode] = useState(colorModeProp);\n\n  const {\n    theme: activeTheme,\n    selectedTheme,\n    selectedMode,\n    colorModes,\n    colorScheme,\n  } = parseTheme(themesList, theme, colorMode);\n\n  const themes = themesList.map((t) => t.name);\n\n  // review in v6 so that theme/colorMode isn't both controlled & uncontrolled\n  useEffect(() => {\n    setTheme(themeProp);\n    setColorMode(colorModeProp);\n  }, [colorModeProp, themeProp]);\n\n  useEffect(() => {\n    setElementAttrs(selectedTheme, selectedMode, colorScheme, rootId);\n  }, [colorScheme, rootId, selectedMode, selectedTheme]);\n\n  const changeTheme = useCallback(\n    (newTheme = selectedTheme, newMode = selectedMode) => {\n      setTheme(newTheme);\n      setColorMode(newMode);\n    },\n    [selectedMode, selectedTheme],\n  );\n\n  const value = useMemo<HvThemeContextValue>(\n    () => ({\n      themes,\n      colorModes,\n      activeTheme: activeTheme as HvTheme,\n      selectedTheme,\n      selectedMode,\n      changeTheme,\n      rootId,\n    }),\n    [\n      themes,\n      colorModes,\n      activeTheme,\n      selectedTheme,\n      selectedMode,\n      changeTheme,\n      rootId,\n    ],\n  );\n\n  const muiTheme = useMemo(() => {\n    const colors = activeTheme.colors.modes[colorMode];\n    return createTheme({\n      spacing: activeTheme.space.base,\n      typography: {\n        fontFamily: activeTheme.fontFamily.body,\n      },\n      palette: {\n        primary: { main: colors.primary },\n        success: { main: colors.positive },\n        warning: { main: colors.warning },\n        error: { main: colors.negative },\n        info: { main: colors.primary },\n        text: {\n          primary: colors.secondary,\n          secondary: colors.secondary_80,\n          disabled: colors.secondary_60,\n        },\n        background: {\n          default: colors.atmo2,\n          paper: colors.atmo1,\n        },\n        divider: colors.atmo4,\n        action: {\n          active: colors.primary,\n          hover: colors.primary_80,\n          selected: colors.primary_80,\n          disabled: colors.secondary_60,\n          disabledBackground: colors.atmo3,\n        },\n      },\n      components: {\n        MuiButtonBase: {\n          defaultProps: {\n            disableRipple: true,\n          },\n        },\n      },\n      breakpoints: activeTheme.breakpoints,\n    });\n  }, [activeTheme, colorMode]);\n\n  const emotionCacheValue = useMemo(\n    () => ({ cache: emotionCache }),\n    [emotionCache],\n  );\n\n  return (\n    <MuiThemeProvider theme={muiTheme}>\n      <HvThemeContext.Provider value={value}>\n        <EmotionContext.Provider value={emotionCacheValue}>\n          {children}\n        </EmotionContext.Provider>\n      </HvThemeContext.Provider>\n    </MuiThemeProvider>\n  );\n};\n"],"names":["MuiThemeProvider"],"mappings":";;;;;;;AAgCO,MAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AACf,MAA4B;AAC1B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,SAAS;AAC5C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,aAAa;AAElD,QAAA;AAAA,IACJ,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACE,IAAA,WAAW,YAAY,OAAO,SAAS;AAE3C,QAAM,SAAS,WAAW,IAAI,CAAC,MAAM,EAAE,IAAI;AAG3C,YAAU,MAAM;AACd,aAAS,SAAS;AAClB,iBAAa,aAAa;AAAA,EAAA,GACzB,CAAC,eAAe,SAAS,CAAC;AAE7B,YAAU,MAAM;AACE,oBAAA,eAAe,cAAc,aAAa,MAAM;AAAA,KAC/D,CAAC,aAAa,QAAQ,cAAc,aAAa,CAAC;AAErD,QAAM,cAAc;AAAA,IAClB,CAAC,WAAW,eAAe,UAAU,iBAAiB;AACpD,eAAS,QAAQ;AACjB,mBAAa,OAAO;AAAA,IACtB;AAAA,IACA,CAAC,cAAc,aAAa;AAAA,EAAA;AAG9B,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGI,QAAA,WAAW,QAAQ,MAAM;AAC7B,UAAM,SAAS,YAAY,OAAO,MAAM,SAAS;AACjD,WAAO,YAAY;AAAA,MACjB,SAAS,YAAY,MAAM;AAAA,MAC3B,YAAY;AAAA,QACV,YAAY,YAAY,WAAW;AAAA,MACrC;AAAA,MACA,SAAS;AAAA,QACP,SAAS,EAAE,MAAM,OAAO,QAAQ;AAAA,QAChC,SAAS,EAAE,MAAM,OAAO,SAAS;AAAA,QACjC,SAAS,EAAE,MAAM,OAAO,QAAQ;AAAA,QAChC,OAAO,EAAE,MAAM,OAAO,SAAS;AAAA,QAC/B,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,QAC7B,MAAM;AAAA,UACJ,SAAS,OAAO;AAAA,UAChB,WAAW,OAAO;AAAA,UAClB,UAAU,OAAO;AAAA,QACnB;AAAA,QACA,YAAY;AAAA,UACV,SAAS,OAAO;AAAA,UAChB,OAAO,OAAO;AAAA,QAChB;AAAA,QACA,SAAS,OAAO;AAAA,QAChB,QAAQ;AAAA,UACN,QAAQ,OAAO;AAAA,UACf,OAAO,OAAO;AAAA,UACd,UAAU,OAAO;AAAA,UACjB,UAAU,OAAO;AAAA,UACjB,oBAAoB,OAAO;AAAA,QAC7B;AAAA,MACF;AAAA,MACA,YAAY;AAAA,QACV,eAAe;AAAA,UACb,cAAc;AAAA,YACZ,eAAe;AAAA,UACjB;AAAA,QACF;AAAA,MACF;AAAA,MACA,aAAa,YAAY;AAAA,IAAA,CAC1B;AAAA,EAAA,GACA,CAAC,aAAa,SAAS,CAAC;AAE3B,QAAM,oBAAoB;AAAA,IACxB,OAAO,EAAE,OAAO;IAChB,CAAC,YAAY;AAAA,EAAA;AAGf,6BACGA,eAAiB,EAAA,OAAO,UACvB,UAAA,oBAAC,eAAe,UAAf,EAAwB,OACvB,UAAA,oBAAC,eAAe,UAAf,EAAwB,OAAO,mBAC7B,SACH,CAAA,GACF,EACF,CAAA;AAEJ;"}
+{"version":3,"file":"ThemeProvider.js","sources":["../../../src/providers/ThemeProvider.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { EmotionCache } from \"@emotion/cache\";\nimport {\n  createTheme,\n  ThemeProvider as MuiThemeProvider,\n} from \"@mui/material/styles\";\nimport {\n  defaultCacheKey,\n  defaultEmotionCache,\n  EmotionContext,\n  HvThemeContext,\n  type HvThemeContextValue,\n} from \"@hitachivantara/uikit-react-shared\";\nimport { HvThemeStructure, parseTheme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvTheme } from \"../types/theme\";\nimport { setElementAttrs } from \"../utils/theme\";\n\nexport { HvThemeContext };\nexport type { HvThemeContextValue };\n\nexport { defaultCacheKey, defaultEmotionCache, EmotionContext };\n\ninterface HvThemeProviderProps {\n  children: React.ReactNode;\n  themes: (HvTheme | HvThemeStructure)[];\n  theme: string;\n  emotionCache: EmotionCache;\n  colorMode: string;\n  themeRootId?: string;\n}\n\nexport const HvThemeProvider = ({\n  children,\n  themes: themesList,\n  theme: themeProp,\n  emotionCache,\n  colorMode: colorModeProp,\n  themeRootId: rootId,\n}: HvThemeProviderProps) => {\n  const [theme, setTheme] = useState(themeProp);\n  const [colorMode, setColorMode] = useState(colorModeProp);\n\n  const {\n    theme: activeTheme,\n    selectedTheme,\n    selectedMode,\n    colorModes,\n    colorScheme,\n  } = parseTheme(themesList, theme, colorMode);\n\n  const themes = themesList.map((t) => t.name);\n\n  // review in v6 so that theme/colorMode isn't both controlled & uncontrolled\n  useEffect(() => {\n    setTheme(themeProp);\n    setColorMode(colorModeProp);\n  }, [colorModeProp, themeProp]);\n\n  useEffect(() => {\n    setElementAttrs(selectedTheme, selectedMode, colorScheme, rootId);\n  }, [colorScheme, rootId, selectedMode, selectedTheme]);\n\n  const changeTheme = useCallback(\n    (newTheme = selectedTheme, newMode = selectedMode) => {\n      setTheme(newTheme);\n      setColorMode(newMode);\n    },\n    [selectedMode, selectedTheme],\n  );\n\n  const value = useMemo<HvThemeContextValue>(\n    () => ({\n      themes,\n      colorModes,\n      activeTheme: activeTheme as HvTheme,\n      selectedTheme,\n      selectedMode,\n      changeTheme,\n      rootId,\n    }),\n    [\n      themes,\n      colorModes,\n      activeTheme,\n      selectedTheme,\n      selectedMode,\n      changeTheme,\n      rootId,\n    ],\n  );\n\n  const muiTheme = useMemo(() => {\n    const colors = activeTheme.colors.modes[colorMode];\n    return createTheme({\n      spacing: activeTheme.space.base,\n      typography: {\n        fontFamily: activeTheme.fontFamily.body,\n      },\n      palette: {\n        primary: { main: colors.primary },\n        success: { main: colors.positive },\n        warning: { main: colors.warning },\n        error: { main: colors.negative },\n        info: { main: colors.primary },\n        text: {\n          primary: colors.secondary,\n          secondary: colors.secondary_80,\n          disabled: colors.secondary_60,\n        },\n        background: {\n          default: colors.atmo2,\n          paper: colors.atmo1,\n        },\n        divider: colors.atmo4,\n        action: {\n          active: colors.primary,\n          hover: colors.primary_80,\n          selected: colors.primary_80,\n          disabled: colors.secondary_60,\n          disabledBackground: colors.atmo3,\n        },\n      },\n      components: {\n        MuiButtonBase: {\n          defaultProps: {\n            disableRipple: true,\n            disableTouchRipple: true,\n          },\n        },\n      },\n      breakpoints: activeTheme.breakpoints,\n    });\n  }, [activeTheme, colorMode]);\n\n  const emotionCacheValue = useMemo(\n    () => ({ cache: emotionCache }),\n    [emotionCache],\n  );\n\n  return (\n    <MuiThemeProvider theme={muiTheme}>\n      <HvThemeContext.Provider value={value}>\n        <EmotionContext.Provider value={emotionCacheValue}>\n          {children}\n        </EmotionContext.Provider>\n      </HvThemeContext.Provider>\n    </MuiThemeProvider>\n  );\n};\n"],"names":["MuiThemeProvider"],"mappings":";;;;;;;AAgCO,MAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AACf,MAA4B;AAC1B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,SAAS;AAC5C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,aAAa;AAElD,QAAA;AAAA,IACJ,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACE,IAAA,WAAW,YAAY,OAAO,SAAS;AAE3C,QAAM,SAAS,WAAW,IAAI,CAAC,MAAM,EAAE,IAAI;AAG3C,YAAU,MAAM;AACd,aAAS,SAAS;AAClB,iBAAa,aAAa;AAAA,EAAA,GACzB,CAAC,eAAe,SAAS,CAAC;AAE7B,YAAU,MAAM;AACE,oBAAA,eAAe,cAAc,aAAa,MAAM;AAAA,KAC/D,CAAC,aAAa,QAAQ,cAAc,aAAa,CAAC;AAErD,QAAM,cAAc;AAAA,IAClB,CAAC,WAAW,eAAe,UAAU,iBAAiB;AACpD,eAAS,QAAQ;AACjB,mBAAa,OAAO;AAAA,IACtB;AAAA,IACA,CAAC,cAAc,aAAa;AAAA,EAAA;AAG9B,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGI,QAAA,WAAW,QAAQ,MAAM;AAC7B,UAAM,SAAS,YAAY,OAAO,MAAM,SAAS;AACjD,WAAO,YAAY;AAAA,MACjB,SAAS,YAAY,MAAM;AAAA,MAC3B,YAAY;AAAA,QACV,YAAY,YAAY,WAAW;AAAA,MACrC;AAAA,MACA,SAAS;AAAA,QACP,SAAS,EAAE,MAAM,OAAO,QAAQ;AAAA,QAChC,SAAS,EAAE,MAAM,OAAO,SAAS;AAAA,QACjC,SAAS,EAAE,MAAM,OAAO,QAAQ;AAAA,QAChC,OAAO,EAAE,MAAM,OAAO,SAAS;AAAA,QAC/B,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,QAC7B,MAAM;AAAA,UACJ,SAAS,OAAO;AAAA,UAChB,WAAW,OAAO;AAAA,UAClB,UAAU,OAAO;AAAA,QACnB;AAAA,QACA,YAAY;AAAA,UACV,SAAS,OAAO;AAAA,UAChB,OAAO,OAAO;AAAA,QAChB;AAAA,QACA,SAAS,OAAO;AAAA,QAChB,QAAQ;AAAA,UACN,QAAQ,OAAO;AAAA,UACf,OAAO,OAAO;AAAA,UACd,UAAU,OAAO;AAAA,UACjB,UAAU,OAAO;AAAA,UACjB,oBAAoB,OAAO;AAAA,QAC7B;AAAA,MACF;AAAA,MACA,YAAY;AAAA,QACV,eAAe;AAAA,UACb,cAAc;AAAA,YACZ,eAAe;AAAA,YACf,oBAAoB;AAAA,UACtB;AAAA,QACF;AAAA,MACF;AAAA,MACA,aAAa,YAAY;AAAA,IAAA,CAC1B;AAAA,EAAA,GACA,CAAC,aAAa,SAAS,CAAC;AAE3B,QAAM,oBAAoB;AAAA,IACxB,OAAO,EAAE,OAAO;IAChB,CAAC,YAAY;AAAA,EAAA;AAGf,6BACGA,eAAiB,EAAA,OAAO,UACvB,UAAA,oBAAC,eAAe,UAAf,EAAwB,OACvB,UAAA,oBAAC,eAAe,UAAf,EAAwB,OAAO,mBAC7B,SACH,CAAA,GACF,EACF,CAAA;AAEJ;"}

package/dist/types/index.d.ts

@@ -6567,6 +6567,7 @@ export declare interface HvTabsProps extends Omit<TabsProps, "onChange"> {
     ref?: TabsProps["ref"];
     /** @ignore */
     component?: TabsProps["component"];
+    floating?: boolean;
 }
 
 /**
@@ -8189,6 +8190,7 @@ export declare const tabsClasses: {
     indicator: string;
     scroller: string;
     flexContainer: string;
+    floating: string;
 };
 
 export declare const tagClasses: {
@@ -8632,12 +8634,13 @@ declare const useClasses_112: (classesProp?: Partial<Record<"label" | "root" | "
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_113: (classesProp?: Partial<Record<"root" | "flexContainer" | "scroller" | "indicator", string>>, addStatic?: boolean) => {
+declare const useClasses_113: (classesProp?: Partial<Record<"root" | "floating" | "flexContainer" | "scroller" | "indicator", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         indicator: string;
         scroller: string;
         flexContainer: string;
+        floating: string;
     };
     readonly css: any;
     readonly cx: (...args: any) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.79.0",
+  "version": "5.80.1",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Core React components for the NEXT Design System.",
@@ -32,10 +32,10 @@
   "dependencies": {
     "@emotion/cache": "^11.11.0",
     "@emotion/serialize": "^1.1.2",
-    "@hitachivantara/uikit-react-icons": "^5.12.5",
-    "@hitachivantara/uikit-react-shared": "^5.3.10",
-    "@hitachivantara/uikit-react-utils": "^0.2.10",
-    "@hitachivantara/uikit-styles": "^5.37.0",
+    "@hitachivantara/uikit-react-icons": "^5.12.7",
+    "@hitachivantara/uikit-react-shared": "^5.3.12",
+    "@hitachivantara/uikit-react-utils": "^0.2.12",
+    "@hitachivantara/uikit-styles": "^5.39.0",
     "@internationalized/date": "^3.2.0",
     "@mui/base": "^5.0.0-beta.40",
     "@popperjs/core": "^2.11.8",
@@ -62,7 +62,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "2245f2d1fa289ab8eab0c4efa73729e121bb4cf3",
+  "gitHead": "a677a5f1ef6b7c24a13d838d1bdc0f0aeab34405",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",