@hitachivantara/uikit-react-core 5.62.1 → 5.63.0

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

@@ -127,15 +127,14 @@ const HvAppSwitcherAction = ({
               disableFocusListener: true,
               disableTouchListener: true,
               title: description,
-              children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+              children: /* @__PURE__ */ jsxRuntime.jsx(
                 uikitReactIcons.Info,
                 {
                   className: classes.iconInfo,
-                  role: "img",
-                  "aria-label": description,
+                  title: description,
                   id: descriptionElementId
                 }
-              ) })
+              )
             }
           )
         ] })

package/dist/cjs/AvatarGroup/AvatarGroup.cjs

@@ -35,6 +35,7 @@ const HvAvatarGroup = React.forwardRef(
       toBack = true,
       maxVisible = 3,
       overflowComponent,
+      highlight = false,
       ...others
     } = useDefaultProps.useDefaultProps("HvAvatarGroup", props);
     const { classes, cx } = AvatarGroup_styles.useClasses(classesProp);
@@ -52,13 +53,18 @@ const HvAvatarGroup = React.forwardRef(
           React.Children.map(children, (child, index) => {
             if (index < maxVisible) {
               return React.cloneElement(child, {
-                style: {
-                  zIndex: 100 + index * zIndexMultiplier
-                },
                 classes: {
                   container: css.css({
                     marginLeft: direction === "row" ? index !== 0 ? -spacingValue : 0 : 0,
                     marginTop: direction === "column" ? index !== 0 ? -spacingValue : 0 : 0
+                  }),
+                  root: css.css({
+                    zIndex: 100 + index * zIndexMultiplier,
+                    ...highlight && {
+                      "&:hover": {
+                        zIndex: 100 + totalChildren + 1
+                      }
+                    }
                   })
                 },
                 size

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

@@ -28,7 +28,8 @@ const { staticClasses, useClasses } = classes.createClasses("HvBaseCheckBox", {
       pointerEvents: "initial",
       "& svg": {
         color: uikitStyles.theme.colors.atmo3,
-        borderColor: uikitStyles.theme.colors.secondary_60
+        borderColor: uikitStyles.theme.colors.secondary_60,
+        backgroundColor: uikitStyles.theme.colors.atmo3
       }
     }
   },
@@ -46,8 +47,6 @@ const { staticClasses, useClasses } = classes.createClasses("HvBaseCheckBox", {
     },
     "&$disabled": {
       "& svg": {
-        backgroundColor: uikitStyles.theme.colors.atmo3,
-        borderColor: uikitStyles.theme.colors.atmo3,
         color: uikitStyles.theme.colors.secondary_60
       }
     }
@@ -58,8 +57,6 @@ const { staticClasses, useClasses } = classes.createClasses("HvBaseCheckBox", {
     },
     "&$disabled": {
       "& svg": {
-        backgroundColor: uikitStyles.theme.colors.atmo3,
-        borderColor: uikitStyles.theme.colors.secondary_60,
         color: uikitStyles.theme.colors.secondary_60
       }
     }

package/dist/cjs/BaseCheckBox/icons.cjs

@@ -2,19 +2,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Box = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "currentcolor", d: "m0,0l16,0l0,16l-16,0l0,-16z" }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 14 14", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m0,0l16,0l0,16l-16,0l0,-16z" }) });
 };
 const Check = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx(
-    "path",
-    {
-      d: "m5.03,12.06l-3.76,-3.75l1.42,-1.42l2.24,2.25l6.3,-7.2l1.5,1.31l-7.7,8.81z",
-      fill: "currentcolor"
-    }
-  ) });
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 14 14", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m5.03,12.06l-3.76,-3.75l1.42,-1.42l2.24,2.25l6.3,-7.2l1.5,1.31l-7.7,8.81z" }) });
 };
 const Partial = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { id: "svg_2", d: "m3,8l8,0l0,-2l-8,0l0,2z", fill: "currentcolor" }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 14 14", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m3,8l8,0l0,-2l-8,0l0,2z" }) });
 };
 exports.Box = Box;
 exports.Check = Check;

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

@@ -18,7 +18,8 @@ const { staticClasses, useClasses } = classes.createClasses("HvBaseRadio", {
       width: 16,
       height: 16,
       borderRadius: uikitStyles.theme.radii.circle,
-      border: `1px solid ${uikitStyles.theme.colors.secondary}`
+      border: `1px solid ${uikitStyles.theme.colors.secondary}`,
+      backgroundColor: uikitStyles.theme.colors.atmo1
     },
     borderRadius: 0
   },

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

@@ -28,7 +28,7 @@ const Navigation = ({
           [classes.disabled]: !isPreviousEnabled
         }),
         onClick: onNavigatePrevious,
-        children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropLeftXS, { role: "none" })
+        children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropLeftXS, {})
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -55,7 +55,7 @@ const Navigation = ({
           [classes.disabled]: !isNextEnabled
         }),
         onClick: onNavigateNext,
-        children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropRightXS, { role: "none" })
+        children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropRightXS, {})
       }
     )
   ] });

package/dist/cjs/Dialog/Dialog.cjs

@@ -81,7 +81,7 @@ const HvDialog = (props) => {
             id: setId.setId(id, "close"),
             className: classes.closeButton,
             onClick: (event) => onClose?.(event, void 0),
-            children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Close, { role: "none" })
+            children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Close, {})
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(context.DialogContext.Provider, { value: contextValue, children })

package/dist/cjs/Drawer/Drawer.cjs

@@ -66,7 +66,7 @@ const HvDrawer = (props) => {
             className: classes.closeButton,
             onClick: onClose,
             title: buttonTitle,
-            children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Close, { role: "none" })
+            children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Close, {})
           }
         ),
         children

package/dist/cjs/FileUploader/File/File.cjs

@@ -3,12 +3,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
-const setId = require("../../utils/setId.cjs");
 const utils = require("../utils.cjs");
 const File_styles = require("./File.styles.cjs");
 const ProgressBar = require("../../ProgressBar/ProgressBar.cjs");
-const Button = require("../../Button/Button.cjs");
 const Typography = require("../../Typography/Typography.cjs");
+const IconButton = require("../../IconButton/IconButton.cjs");
 const getStatusIcon = (classes, status) => {
   switch (status) {
     case "success":
@@ -35,7 +34,6 @@ const getProgressBarWith = ({ size, progress }) => {
 };
 const HvFile = (props) => {
   const {
-    id,
     classes: classesProp,
     data,
     onFileRemoved,
@@ -67,13 +65,11 @@ const HvFile = (props) => {
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes.progressTextContainer, children: progressText }),
     data.preview && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.previewContainer, children: data.preview }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      Button.HvButton,
+      IconButton.HvIconButton,
       {
-        id: setId.setId(id, "remove-button"),
-        "aria-label": removeFileButtonLabel,
+        title: removeFileButtonLabel,
         className: classes.removeButton,
         onClick: () => onFileRemoved?.(data),
-        icon: true,
         children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Close, { iconSize: "XS" })
       }
     )

package/dist/cjs/FileUploader/FileList/FileList.cjs

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
-const useUniqueId = require("../../hooks/useUniqueId.cjs");
 const setId = require("../../utils/setId.cjs");
 const FileList_styles = require("./FileList.styles.cjs");
 const File = require("../File/File.cjs");
@@ -15,7 +14,6 @@ const HvFileList = (props) => {
     onFileRemoved
   } = useDefaultProps.useDefaultProps("HvFileList", props);
   const { classes } = FileList_styles.useClasses(classesProp);
-  const elementId = useUniqueId.useUniqueId(id);
   const hasFiles = list.length > 0;
   if (!hasFiles)
     return null;
@@ -23,7 +21,6 @@ const HvFileList = (props) => {
     File.HvFile,
     {
       classes: { root: classes?.listItem },
-      id: setId.setId(elementId, "values"),
       data,
       onFileRemoved,
       removeFileButtonLabel

package/dist/cjs/InlineEditor/InlineEditor.cjs

@@ -95,7 +95,6 @@ const HvInlineEditor = (props) => {
         uikitReactIcons.Edit,
         {
           color: "secondary_60",
-          role: "none",
           className: cx(classes.icon, {
             [classes.iconVisible]: showIcon
           })

package/dist/cjs/LoadingContainer/LoadingContainer.styles.cjs

@@ -5,11 +5,11 @@ const classes = require("../utils/classes.cjs");
 const { staticClasses, useClasses } = classes.createClasses("HvLoadingContainer", {
   root: {
     position: "relative",
-    height: "inherit",
-    userSelect: "none"
+    height: "inherit"
   },
   loading: {
     position: "absolute",
+    userSelect: "none",
     inset: 0,
     zIndex: uikitStyles.theme.zIndices.overlay,
     transition: "background-color .2s ease",

package/dist/cjs/Pagination/Pagination.cjs

@@ -158,7 +158,6 @@ const HvPagination = (props) => {
           children: /* @__PURE__ */ jsxRuntime.jsx(
             uikitReactIcons.Start,
             {
-              role: "none",
               className: classes.icon,
               color: utils.setColor(!canPrevious),
               iconSize: "XS"
@@ -177,7 +176,6 @@ const HvPagination = (props) => {
           children: /* @__PURE__ */ jsxRuntime.jsx(
             uikitReactIcons.Backwards,
             {
-              role: "none",
               className: classes.icon,
               color: utils.setColor(!canPrevious),
               iconSize: "XS"
@@ -209,7 +207,6 @@ const HvPagination = (props) => {
           children: /* @__PURE__ */ jsxRuntime.jsx(
             uikitReactIcons.Forwards,
             {
-              role: "none",
               className: classes.icon,
               color: utils.setColor(!canNext),
               iconSize: "XS"

package/dist/cjs/QueryBuilder/Rule/Rule.cjs

@@ -95,7 +95,7 @@ const Rule = (props) => {
               dialog: labels.rule.delete
             }),
             disabled: readOnly,
-            children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Delete, { role: "none" })
+            children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Delete, {})
           }
         ) })
       ]

package/dist/cjs/QueryBuilder/RuleGroup/RuleGroup.cjs

@@ -106,7 +106,6 @@ const RuleGroup = ({
             children: /* @__PURE__ */ jsxRuntime.jsx(
               uikitReactIcons.Delete,
               {
-                role: "none",
                 className: cx({ [classes.topRemoveButtonDisabled]: readOnly })
               }
             )

package/dist/cjs/Select/Select.cjs

@@ -7,6 +7,7 @@ const useSelect = require("@mui/base/useSelect");
 const utils = require("@mui/material/utils");
 const clsx = require("clsx");
 const useDefaultProps = require("../hooks/useDefaultProps.cjs");
+const useTheme = require("../hooks/useTheme.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
 const generic = require("../types/generic.cjs");
 const setId = require("../utils/setId.cjs");
@@ -51,6 +52,8 @@ const HvSelect = generic.fixedForwardRef(function HvSelect2(props, ref) {
     value: valueProp,
     defaultValue,
     placeholder,
+    inputProps,
+    enablePortal,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
     description,
@@ -65,6 +68,7 @@ const HvSelect = generic.fixedForwardRef(function HvSelect2(props, ref) {
     ...others
   } = useDefaultProps.useDefaultProps("HvSelect", props);
   const { classes, cx } = Select_styles.useClasses(classesProp);
+  const { rootId } = useTheme.useTheme();
   const [placement, setPlacement] = React.useState("bottom-start");
   const buttonRef = React.useRef(null);
   const handleButtonRef = utils.useForkRef(ref, buttonRef);
@@ -174,7 +178,8 @@ const HvSelect = generic.fixedForwardRef(function HvSelect2(props, ref) {
           {
             open: isOpen,
             keepMounted: true,
-            disablePortal: true,
+            disablePortal: !enablePortal,
+            container: enablePortal ? document.getElementById(rootId || "") || document.body : void 0,
             anchorEl: buttonRef.current,
             className: classes.popper,
             placement,
@@ -200,7 +205,14 @@ const HvSelect = generic.fixedForwardRef(function HvSelect2(props, ref) {
             )
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("input", { ...getHiddenInputProps(), autoComplete }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ...getHiddenInputProps(),
+            autoComplete,
+            ...inputProps
+          }
+        ),
         canShowError && /* @__PURE__ */ jsxRuntime.jsx(
           WarningText.HvWarningText,
           {

package/dist/cjs/Tag/Tag.cjs

@@ -44,7 +44,6 @@ const HvTag = React.forwardRef((props, ref) => {
   const defaultDeleteIcon = /* @__PURE__ */ jsxRuntime.jsx(
     uikitReactIcons.CloseXS,
     {
-      role: "none",
       className: cx(classes.button, classes.tagButton),
       iconSize: "XS",
       ...deleteButtonProps

package/dist/cjs/TreeView/TreeView.cjs

@@ -22,8 +22,8 @@ const HvTreeView = generic.fixedForwardRef(function HvTreeView2(props, ref) {
     selected,
     defaultSelected,
     disableSelection,
-    defaultCollapseIcon = /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, { role: "none" }),
-    defaultExpandIcon = /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropRightXS, { role: "none" }),
+    defaultCollapseIcon = /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, {}),
+    defaultExpandIcon = /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropRightXS, {}),
     defaultEndIcon,
     defaultParentIcon,
     onNodeSelect,

package/dist/cjs/VerticalNavigation/Navigation/Navigation.cjs

@@ -5,7 +5,6 @@ const React = require("react");
 const useControlled = require("../../hooks/useControlled.cjs");
 const helpers = require("../../utils/helpers.cjs");
 const setId = require("../../utils/setId.cjs");
-const wrapperTooltip = require("../../utils/wrapperTooltip.cjs");
 const NavigationPopupContainer = require("../NavigationPopup/NavigationPopupContainer.cjs");
 const NavigationSlider_utils = require("../NavigationSlider/utils/NavigationSlider.utils.cjs");
 const VerticalNavigationContext = require("../VerticalNavigationContext.cjs");
@@ -24,7 +23,6 @@ const createListHierarchy = (items, id, classes, mouseEnterHandler, disableToolt
     href,
     target
   } = item;
-  const ItemText = wrapperTooltip.wrapperTooltip(true, itemLabel, itemLabel);
   const itemMouseEnterHandler = (event) => {
     mouseEnterHandler?.(event, item);
   };
@@ -36,7 +34,7 @@ const createListHierarchy = (items, id, classes, mouseEnterHandler, disableToolt
       href,
       target,
       nodeId: itemId,
-      label: /* @__PURE__ */ jsxRuntime.jsx(ItemText, {}),
+      label: itemLabel,
       icon,
       payload: item,
       selectable,

package/dist/cjs/VerticalNavigation/TreeView/TreeViewItem.cjs

@@ -13,6 +13,7 @@ const TreeViewItem_styles = require("./TreeViewItem.styles.cjs");
 const IconWrapper = require("./IconWrapper/IconWrapper.cjs");
 const Tooltip = require("../../Tooltip/Tooltip.cjs");
 const Typography = require("../../Typography/Typography.cjs");
+const OverflowTooltip = require("../../OverflowTooltip/OverflowTooltip.cjs");
 const preventSelection = (event, disabled) => {
   if (event.shiftKey || event.ctrlKey || event.metaKey || disabled) {
     event.preventDefault();
@@ -312,7 +313,7 @@ const HvVerticalNavigationTreeViewItem = React.forwardRef(
                   [classes.labelIcon]: useIcons,
                   [classes.labelExpandable]: !!expandable
                 }),
-                children: label
+                children: /* @__PURE__ */ jsxRuntime.jsx(OverflowTooltip.HvOverflowTooltip, { data: label })
               }
             ),
             isOpen && expandable && (expanded ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropUpXS, {}) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, {}))

package/dist/esm/AppSwitcher/Action/Action.js

@@ -126,15 +126,14 @@ const HvAppSwitcherAction = ({
               disableFocusListener: true,
               disableTouchListener: true,
               title: description,
-              children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              children: /* @__PURE__ */ jsx(
                 Info,
                 {
                   className: classes.iconInfo,
-                  role: "img",
-                  "aria-label": description,
+                  title: description,
                   id: descriptionElementId
                 }
-              ) })
+              )
             }
           )
         ] })

package/dist/esm/AppSwitcher/Action/Action.js.map

@@ -1 +1 @@
-{"version":3,"file":"Action.js","sources":["../../../../src/AppSwitcher/Action/Action.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\nimport { getColor, HvColorAny, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvAvatar } from \"../../Avatar\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { HvListItem } from \"../../ListContainer\";\nimport { HvOverflowTooltip } from \"../../OverflowTooltip\";\nimport { HvTooltip } from \"../../Tooltip\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { staticClasses, useClasses } from \"./Action.styles\";\n\nexport { staticClasses as appSwitcherActionClasses };\n\nexport type HvAppSwitcherActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherActionApplication {\n  /** Id of the application. */\n  id?: string;\n  /** Name of the application, this is the value that will be displayed on the component. */\n  name: string;\n  /** URL with the icon location to be used to represent the application. iconUrl will only be used if no iconElement is provided. */\n  iconUrl?: string;\n  /** Element to be added as the icon representing the application. The iconElement will be the primary option to be displayed. */\n  iconElement?: React.ReactElement;\n  /** Small description of the application. */\n  description?: string;\n  /**  URL where the application is accessible. */\n  url?: string;\n  /** Defines if the application should be opened in the same tab or in a new one. */\n  target?: \"_top\" | \"_blank\";\n  /** If true, the item will be disabled. */\n  disabled?: boolean;\n  /** True when the application is selected, false otherwise. */\n  isSelected?: boolean;\n  /** The color of the application. */\n  color?: HvColorAny;\n}\n\nexport interface HvAppSwitcherActionProps extends HvBaseProps {\n  /** The application data to be used to render the Action object. */\n  application: HvAppSwitcherActionApplication;\n  /** Callback triggered when the action is clicked. */\n  onClickCallback?: (\n    event: React.MouseEvent,\n    application: HvAppSwitcherActionApplication,\n  ) => void;\n  /** Must return a boolean stating if the action element is selected or not. */\n  isSelectedCallback?: (application: HvAppSwitcherActionApplication) => boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAppSwitcherActionClasses;\n}\n\nexport const HvAppSwitcherAction = ({\n  id,\n  className,\n  classes: classesProp,\n  application,\n  onClickCallback = () => {},\n  isSelectedCallback = () => false,\n}: HvAppSwitcherActionProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const { name, description, disabled, iconElement, iconUrl, url, target } =\n    application;\n\n  const color = disabled\n    ? theme.colors.secondary_60\n    : getColor(application?.color, theme.colors.secondary);\n\n  const [validIconUrl, setValidIconUrl] = useState<boolean>(true);\n\n  const renderApplicationIcon = () => {\n    if (iconElement) {\n      return iconElement;\n    }\n\n    if (iconUrl && validIconUrl) {\n      return (\n        <img\n          className={classes.iconUrl}\n          src={iconUrl}\n          onError={() => {\n            setValidIconUrl(false);\n          }}\n          alt={description}\n        />\n      );\n    }\n\n    const brokenTitle = name.split(\" \");\n    const initials =\n      brokenTitle[0].substring(0, 1) +\n      (brokenTitle[1] ? brokenTitle[1].substring(0, 1) : \"\");\n\n    return (\n      <HvAvatar size=\"sm\" backgroundColor={color} variant=\"square\" aria-hidden>\n        {initials}\n      </HvAvatar>\n    );\n  };\n\n  const isSelected = isSelectedCallback(application);\n\n  /**\n   * Handles the onClick event and triggers the appropriate callback if it exists.\n   */\n  const handleOnClick = useCallback(\n    (event: React.MouseEvent) => {\n      if (disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      onClickCallback?.(event, { ...application, isSelected });\n    },\n    [application, disabled, isSelected, onClickCallback],\n  );\n\n  const isLink = url != null;\n  const descriptionElementId = useUniqueId(id);\n\n  const renderApplication = useCallback(\n    (children: React.ReactNode) => {\n      const typographyProps = {\n        className: classes.typography,\n        onClick: handleOnClick,\n        style: { borderColor: color },\n        \"aria-label\": name,\n        ...(description && { \"aria-describedby\": descriptionElementId }),\n      };\n\n      if (isLink) {\n        return (\n          <HvTypography\n            component=\"a\"\n            href={url}\n            target={target || \"_top\"}\n            {...typographyProps}\n          >\n            {children}\n          </HvTypography>\n        );\n      }\n\n      return (\n        <HvTypography component=\"button\" {...typographyProps}>\n          {children}\n        </HvTypography>\n      );\n    },\n    [\n      classes.typography,\n      color,\n      description,\n      descriptionElementId,\n      handleOnClick,\n      isLink,\n      name,\n      target,\n      url,\n    ],\n  );\n\n  return (\n    <HvListItem\n      id={id}\n      interactive\n      tabIndex={0}\n      selected={isSelected}\n      disabled={disabled}\n      className={cx(\n        classes.root,\n        { [classes.disabled]: disabled, [classes.selected]: isSelected },\n        className,\n      )}\n    >\n      {/* As HvTooltip don't have the id prop, is not possible to use the aria-labelledby to reference it.\n       In substitution is used the aria-label with the \"title\" value */}\n      {renderApplication(\n        <>\n          <div className={classes.icon}>{renderApplicationIcon()}</div>\n\n          <HvOverflowTooltip\n            paragraphOverflow\n            className={classes.title}\n            placement=\"top-start\"\n            data={name}\n            classes={{\n              tooltipAnchorParagraph: classes.titleAnchor,\n            }}\n          />\n\n          {description && (\n            <HvTooltip\n              disableFocusListener\n              disableTouchListener\n              title={description}\n            >\n              <div>\n                <Info\n                  className={classes.iconInfo}\n                  role=\"img\"\n                  aria-label={description}\n                  id={descriptionElementId}\n                />\n              </div>\n            </HvTooltip>\n          )}\n        </>,\n      )}\n    </HvListItem>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Action.js","sources":["../../../../src/AppSwitcher/Action/Action.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\nimport { getColor, HvColorAny, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvAvatar } from \"../../Avatar\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { HvListItem } from \"../../ListContainer\";\nimport { HvOverflowTooltip } from \"../../OverflowTooltip\";\nimport { HvTooltip } from \"../../Tooltip\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { staticClasses, useClasses } from \"./Action.styles\";\n\nexport { staticClasses as appSwitcherActionClasses };\n\nexport type HvAppSwitcherActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherActionApplication {\n  /** Id of the application. */\n  id?: string;\n  /** Name of the application, this is the value that will be displayed on the component. */\n  name: string;\n  /** URL with the icon location to be used to represent the application. iconUrl will only be used if no iconElement is provided. */\n  iconUrl?: string;\n  /** Element to be added as the icon representing the application. The iconElement will be the primary option to be displayed. */\n  iconElement?: React.ReactElement;\n  /** Small description of the application. */\n  description?: string;\n  /**  URL where the application is accessible. */\n  url?: string;\n  /** Defines if the application should be opened in the same tab or in a new one. */\n  target?: \"_top\" | \"_blank\";\n  /** If true, the item will be disabled. */\n  disabled?: boolean;\n  /** True when the application is selected, false otherwise. */\n  isSelected?: boolean;\n  /** The color of the application. */\n  color?: HvColorAny;\n}\n\nexport interface HvAppSwitcherActionProps extends HvBaseProps {\n  /** The application data to be used to render the Action object. */\n  application: HvAppSwitcherActionApplication;\n  /** Callback triggered when the action is clicked. */\n  onClickCallback?: (\n    event: React.MouseEvent,\n    application: HvAppSwitcherActionApplication,\n  ) => void;\n  /** Must return a boolean stating if the action element is selected or not. */\n  isSelectedCallback?: (application: HvAppSwitcherActionApplication) => boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAppSwitcherActionClasses;\n}\n\nexport const HvAppSwitcherAction = ({\n  id,\n  className,\n  classes: classesProp,\n  application,\n  onClickCallback = () => {},\n  isSelectedCallback = () => false,\n}: HvAppSwitcherActionProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const { name, description, disabled, iconElement, iconUrl, url, target } =\n    application;\n\n  const color = disabled\n    ? theme.colors.secondary_60\n    : getColor(application?.color, theme.colors.secondary);\n\n  const [validIconUrl, setValidIconUrl] = useState<boolean>(true);\n\n  const renderApplicationIcon = () => {\n    if (iconElement) {\n      return iconElement;\n    }\n\n    if (iconUrl && validIconUrl) {\n      return (\n        <img\n          className={classes.iconUrl}\n          src={iconUrl}\n          onError={() => {\n            setValidIconUrl(false);\n          }}\n          alt={description}\n        />\n      );\n    }\n\n    const brokenTitle = name.split(\" \");\n    const initials =\n      brokenTitle[0].substring(0, 1) +\n      (brokenTitle[1] ? brokenTitle[1].substring(0, 1) : \"\");\n\n    return (\n      <HvAvatar size=\"sm\" backgroundColor={color} variant=\"square\" aria-hidden>\n        {initials}\n      </HvAvatar>\n    );\n  };\n\n  const isSelected = isSelectedCallback(application);\n\n  /**\n   * Handles the onClick event and triggers the appropriate callback if it exists.\n   */\n  const handleOnClick = useCallback(\n    (event: React.MouseEvent) => {\n      if (disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      onClickCallback?.(event, { ...application, isSelected });\n    },\n    [application, disabled, isSelected, onClickCallback],\n  );\n\n  const isLink = url != null;\n  const descriptionElementId = useUniqueId(id);\n\n  const renderApplication = useCallback(\n    (children: React.ReactNode) => {\n      const typographyProps = {\n        className: classes.typography,\n        onClick: handleOnClick,\n        style: { borderColor: color },\n        \"aria-label\": name,\n        ...(description && { \"aria-describedby\": descriptionElementId }),\n      };\n\n      if (isLink) {\n        return (\n          <HvTypography\n            component=\"a\"\n            href={url}\n            target={target || \"_top\"}\n            {...typographyProps}\n          >\n            {children}\n          </HvTypography>\n        );\n      }\n\n      return (\n        <HvTypography component=\"button\" {...typographyProps}>\n          {children}\n        </HvTypography>\n      );\n    },\n    [\n      classes.typography,\n      color,\n      description,\n      descriptionElementId,\n      handleOnClick,\n      isLink,\n      name,\n      target,\n      url,\n    ],\n  );\n\n  return (\n    <HvListItem\n      id={id}\n      interactive\n      tabIndex={0}\n      selected={isSelected}\n      disabled={disabled}\n      className={cx(\n        classes.root,\n        { [classes.disabled]: disabled, [classes.selected]: isSelected },\n        className,\n      )}\n    >\n      {/* As HvTooltip don't have the id prop, is not possible to use the aria-labelledby to reference it.\n       In substitution is used the aria-label with the \"title\" value */}\n      {renderApplication(\n        <>\n          <div className={classes.icon}>{renderApplicationIcon()}</div>\n\n          <HvOverflowTooltip\n            paragraphOverflow\n            className={classes.title}\n            placement=\"top-start\"\n            data={name}\n            classes={{\n              tooltipAnchorParagraph: classes.titleAnchor,\n            }}\n          />\n\n          {description && (\n            <HvTooltip\n              disableFocusListener\n              disableTouchListener\n              title={description}\n            >\n              <Info\n                className={classes.iconInfo}\n                title={description}\n                id={descriptionElementId}\n              />\n            </HvTooltip>\n          )}\n        </>,\n      )}\n    </HvListItem>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/AvatarGroup/AvatarGroup.js

@@ -34,6 +34,7 @@ const HvAvatarGroup = forwardRef(
       toBack = true,
       maxVisible = 3,
       overflowComponent,
+      highlight = false,
       ...others
     } = useDefaultProps("HvAvatarGroup", props);
     const { classes, cx } = useClasses(classesProp);
@@ -51,13 +52,18 @@ const HvAvatarGroup = forwardRef(
           Children.map(children, (child, index) => {
             if (index < maxVisible) {
               return cloneElement(child, {
-                style: {
-                  zIndex: 100 + index * zIndexMultiplier
-                },
                 classes: {
                   container: css({
                     marginLeft: direction === "row" ? index !== 0 ? -spacingValue : 0 : 0,
                     marginTop: direction === "column" ? index !== 0 ? -spacingValue : 0 : 0
+                  }),
+                  root: css({
+                    zIndex: 100 + index * zIndexMultiplier,
+                    ...highlight && {
+                      "&:hover": {
+                        zIndex: 100 + totalChildren + 1
+                      }
+                    }
                   })
                 },
                 size

package/dist/esm/AvatarGroup/AvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","sources":["../../../src/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import { Children, cloneElement, forwardRef } from \"react\";\nimport { css } from \"@emotion/css\";\nimport { HvSize, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvAvatar } from \"../Avatar/Avatar\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { staticClasses, useClasses } from \"./AvatarGroup.styles\";\n\nexport { staticClasses as avatarGroupClasses };\n\nexport type HvAvatarGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAvatarGroupProps extends HvBaseProps {\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAvatarGroupClasses;\n  /** The avatar size. */\n  size?: HvSize;\n  /** The spacing between avatars. */\n  spacing?: \"compact\" | \"loose\";\n  /** The direction of the group. */\n  direction?: \"row\" | \"column\";\n  /** Whether the avatars display behind the previous avatar or on top. */\n  toBack?: boolean;\n  /**\n   * The maximum number of visible avatars. If there are more avatars then the value of this property, an added avatar will\n   * be added to the end of the list, indicating the number of hidden avatars.\n   */\n  maxVisible?: number;\n  /**\n   * What to show as an overflow representation.\n   * If `undefined` a default `HvAvatar` will be displayed along with a HvTooltip with the count of overflowing items.\n   * */\n  overflowComponent?: (overflowCount: number) => React.ReactNode;\n}\n\nconst getSpacingValue = (\n  spacing: HvAvatarGroupProps[\"spacing\"],\n  size: HvAvatarGroupProps[\"size\"],\n) => {\n  switch (size) {\n    case \"xs\":\n      return spacing === \"compact\" ? 24 : 16;\n    case \"sm\":\n      return spacing === \"compact\" ? 30 : 18;\n    case \"md\":\n      return spacing === \"compact\" ? 36 : 20;\n    case \"lg\":\n      return spacing === \"compact\" ? 44 : 24;\n    case \"xl\":\n      return spacing === \"compact\" ? 72 : 34;\n    default:\n      return spacing === \"compact\" ? 30 : 18;\n  }\n};\n\n/**\n * The AvatarGroup component is used to group multiple avatars.\n */\nexport const HvAvatarGroup = forwardRef<HTMLDivElement, HvAvatarGroupProps>(\n  (props, ref) => {\n    const {\n      className,\n      classes: classesProp,\n      children,\n      size = \"sm\",\n      spacing = \"loose\",\n      direction = \"row\",\n      toBack = true,\n      maxVisible = 3,\n      overflowComponent,\n      ...others\n    } = useDefaultProps(\"HvAvatarGroup\", props);\n    const { classes, cx } = useClasses(classesProp);\n\n    const spacingValue = getSpacingValue(spacing, size);\n\n    const totalChildren = Children.count(children);\n    const zIndexMultiplier = toBack ? -1 : 1;\n    const willOverflow = totalChildren > maxVisible;\n\n    return (\n      <div\n        className={cx(classes.root, classes[direction], className)}\n        ref={ref}\n        {...others}\n      >\n        {Children.map(children, (child: any, index: number) => {\n          if (index < maxVisible) {\n            return cloneElement(child, {\n              style: {\n                zIndex: 100 + index * zIndexMultiplier,\n              },\n              classes: {\n                container: css({\n                  marginLeft:\n                    direction === \"row\" ? (index !== 0 ? -spacingValue : 0) : 0,\n                  marginTop:\n                    direction === \"column\"\n                      ? index !== 0\n                        ? -spacingValue\n                        : 0\n                      : 0,\n                }),\n              },\n              size,\n            });\n          }\n        })}\n        {willOverflow && (\n          <div\n            style={{\n              marginLeft: direction === \"row\" ? -spacingValue : 0,\n              marginTop: direction === \"column\" ? -spacingValue : 0,\n              zIndex: 100 + maxVisible * zIndexMultiplier,\n            }}\n          >\n            {overflowComponent ? (\n              overflowComponent(totalChildren - maxVisible)\n            ) : (\n              <HvAvatar\n                size={size}\n                backgroundColor={theme.colors.atmo4}\n                classes={{\n                  avatar: css({\n                    [`&.HvAvatar-${size}`]: {\n                      fontSize: \"unset\",\n                    },\n                  }),\n                }}\n              >\n                +{totalChildren - maxVisible}\n              </HvAvatar>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;;AAqCA,MAAM,kBAAkB,CACtB,SACA,SACG;AACH,UAAQ,MAAM;AAAA,IACZ,KAAK;AACI,aAAA,YAAY,YAAY,KAAK;AAAA,IACtC,KAAK;AACI,aAAA,YAAY,YAAY,KAAK;AAAA,IACtC,KAAK;AACI,aAAA,YAAY,YAAY,KAAK;AAAA,IACtC,KAAK;AACI,aAAA,YAAY,YAAY,KAAK;AAAA,IACtC,KAAK;AACI,aAAA,YAAY,YAAY,KAAK;AAAA,IACtC;AACS,aAAA,YAAY,YAAY,KAAK;AAAA,EACxC;AACF;AAKO,MAAM,gBAAgB;AAAA,EAC3B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA,OAAO;AAAA,MACP,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,aAAa;AAAA,MACb;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,iBAAiB,KAAK;AAC1C,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,UAAA,eAAe,gBAAgB,SAAS,IAAI;AAE5C,UAAA,gBAAgB,SAAS,MAAM,QAAQ;AACvC,UAAA,mBAAmB,SAAS,KAAK;AACvC,UAAM,eAAe,gBAAgB;AAGnC,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,MAAM,QAAQ,SAAS,GAAG,SAAS;AAAA,QACzD;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,SAAS,IAAI,UAAU,CAAC,OAAY,UAAkB;AACrD,gBAAI,QAAQ,YAAY;AACtB,qBAAO,aAAa,OAAO;AAAA,gBACzB,OAAO;AAAA,kBACL,QAAQ,MAAM,QAAQ;AAAA,gBACxB;AAAA,gBACA,SAAS;AAAA,kBACP,WAAW,IAAI;AAAA,oBACb,YACE,cAAc,QAAS,UAAU,IAAI,CAAC,eAAe,IAAK;AAAA,oBAC5D,WACE,cAAc,WACV,UAAU,IACR,CAAC,eACD,IACF;AAAA,kBAAA,CACP;AAAA,gBACH;AAAA,gBACA;AAAA,cAAA,CACD;AAAA,YACH;AAAA,UAAA,CACD;AAAA,UACA,gBACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,gBACL,YAAY,cAAc,QAAQ,CAAC,eAAe;AAAA,gBAClD,WAAW,cAAc,WAAW,CAAC,eAAe;AAAA,gBACpD,QAAQ,MAAM,aAAa;AAAA,cAC7B;AAAA,cAEC,UACC,oBAAA,kBAAkB,gBAAgB,UAAU,IAE5C;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC;AAAA,kBACA,iBAAiB,MAAM,OAAO;AAAA,kBAC9B,SAAS;AAAA,oBACP,QAAQ,IAAI;AAAA,sBACV,CAAC,cAAc,IAAI,EAAE,GAAG;AAAA,wBACtB,UAAU;AAAA,sBACZ;AAAA,oBAAA,CACD;AAAA,kBACH;AAAA,kBACD,UAAA;AAAA,oBAAA;AAAA,oBACG,gBAAgB;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACpB;AAAA,YAAA;AAAA,UAEJ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;"}
+{"version":3,"file":"AvatarGroup.js","sources":["../../../src/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import { Children, cloneElement, forwardRef } from \"react\";\nimport { css } from \"@emotion/css\";\nimport { HvSize, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvAvatar } from \"../Avatar/Avatar\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { staticClasses, useClasses } from \"./AvatarGroup.styles\";\n\nexport { staticClasses as avatarGroupClasses };\n\nexport type HvAvatarGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAvatarGroupProps extends HvBaseProps {\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAvatarGroupClasses;\n  /** The avatar size. */\n  size?: HvSize;\n  /** The spacing between avatars. */\n  spacing?: \"compact\" | \"loose\";\n  /** The direction of the group. */\n  direction?: \"row\" | \"column\";\n  /** Whether the avatars display behind the previous avatar or on top. */\n  toBack?: boolean;\n  /**\n   * The maximum number of visible avatars. If there are more avatars then the value of this property, an added avatar will\n   * be added to the end of the list, indicating the number of hidden avatars.\n   */\n  maxVisible?: number;\n  /**\n   * What to show as an overflow representation.\n   * If `undefined` a default `HvAvatar` will be displayed along with a HvTooltip with the count of overflowing items.\n   * */\n  overflowComponent?: (overflowCount: number) => React.ReactNode;\n  /**\n   * If `true` the avatars will be brought to the front when hovered.\n   */\n  highlight?: boolean;\n}\n\nconst getSpacingValue = (\n  spacing: HvAvatarGroupProps[\"spacing\"],\n  size: HvAvatarGroupProps[\"size\"],\n) => {\n  switch (size) {\n    case \"xs\":\n      return spacing === \"compact\" ? 24 : 16;\n    case \"sm\":\n      return spacing === \"compact\" ? 30 : 18;\n    case \"md\":\n      return spacing === \"compact\" ? 36 : 20;\n    case \"lg\":\n      return spacing === \"compact\" ? 44 : 24;\n    case \"xl\":\n      return spacing === \"compact\" ? 72 : 34;\n    default:\n      return spacing === \"compact\" ? 30 : 18;\n  }\n};\n\n/**\n * The AvatarGroup component is used to group multiple avatars.\n */\nexport const HvAvatarGroup = forwardRef<HTMLDivElement, HvAvatarGroupProps>(\n  (props, ref) => {\n    const {\n      className,\n      classes: classesProp,\n      children,\n      size = \"sm\",\n      spacing = \"loose\",\n      direction = \"row\",\n      toBack = true,\n      maxVisible = 3,\n      overflowComponent,\n      highlight = false,\n      ...others\n    } = useDefaultProps(\"HvAvatarGroup\", props);\n    const { classes, cx } = useClasses(classesProp);\n\n    const spacingValue = getSpacingValue(spacing, size);\n\n    const totalChildren = Children.count(children);\n    const zIndexMultiplier = toBack ? -1 : 1;\n    const willOverflow = totalChildren > maxVisible;\n\n    return (\n      <div\n        className={cx(classes.root, classes[direction], className)}\n        ref={ref}\n        {...others}\n      >\n        {Children.map(children, (child: any, index: number) => {\n          if (index < maxVisible) {\n            return cloneElement(child, {\n              classes: {\n                container: css({\n                  marginLeft:\n                    direction === \"row\" ? (index !== 0 ? -spacingValue : 0) : 0,\n                  marginTop:\n                    direction === \"column\"\n                      ? index !== 0\n                        ? -spacingValue\n                        : 0\n                      : 0,\n                }),\n                root: css({\n                  zIndex: 100 + index * zIndexMultiplier,\n                  ...(highlight && {\n                    \"&:hover\": {\n                      zIndex: 100 + totalChildren + 1,\n                    },\n                  }),\n                }),\n              },\n              size,\n            });\n          }\n        })}\n        {willOverflow && (\n          <div\n            style={{\n              marginLeft: direction === \"row\" ? -spacingValue : 0,\n              marginTop: direction === \"column\" ? -spacingValue : 0,\n              zIndex: 100 + maxVisible * zIndexMultiplier,\n            }}\n          >\n            {overflowComponent ? (\n              overflowComponent(totalChildren - maxVisible)\n            ) : (\n              <HvAvatar\n                size={size}\n                backgroundColor={theme.colors.atmo4}\n                classes={{\n                  avatar: css({\n                    [`&.HvAvatar-${size}`]: {\n                      fontSize: \"unset\",\n                    },\n                  }),\n                }}\n              >\n                +{totalChildren - maxVisible}\n              </HvAvatar>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;;AAyCA,MAAM,kBAAkB,CACtB,SACA,SACG;AACH,UAAQ,MAAM;AAAA,IACZ,KAAK;AACI,aAAA,YAAY,YAAY,KAAK;AAAA,IACtC,KAAK;AACI,aAAA,YAAY,YAAY,KAAK;AAAA,IACtC,KAAK;AACI,aAAA,YAAY,YAAY,KAAK;AAAA,IACtC,KAAK;AACI,aAAA,YAAY,YAAY,KAAK;AAAA,IACtC,KAAK;AACI,aAAA,YAAY,YAAY,KAAK;AAAA,IACtC;AACS,aAAA,YAAY,YAAY,KAAK;AAAA,EACxC;AACF;AAKO,MAAM,gBAAgB;AAAA,EAC3B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA,OAAO;AAAA,MACP,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,aAAa;AAAA,MACb;AAAA,MACA,YAAY;AAAA,MACZ,GAAG;AAAA,IAAA,IACD,gBAAgB,iBAAiB,KAAK;AAC1C,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,UAAA,eAAe,gBAAgB,SAAS,IAAI;AAE5C,UAAA,gBAAgB,SAAS,MAAM,QAAQ;AACvC,UAAA,mBAAmB,SAAS,KAAK;AACvC,UAAM,eAAe,gBAAgB;AAGnC,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,MAAM,QAAQ,SAAS,GAAG,SAAS;AAAA,QACzD;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,SAAS,IAAI,UAAU,CAAC,OAAY,UAAkB;AACrD,gBAAI,QAAQ,YAAY;AACtB,qBAAO,aAAa,OAAO;AAAA,gBACzB,SAAS;AAAA,kBACP,WAAW,IAAI;AAAA,oBACb,YACE,cAAc,QAAS,UAAU,IAAI,CAAC,eAAe,IAAK;AAAA,oBAC5D,WACE,cAAc,WACV,UAAU,IACR,CAAC,eACD,IACF;AAAA,kBAAA,CACP;AAAA,kBACD,MAAM,IAAI;AAAA,oBACR,QAAQ,MAAM,QAAQ;AAAA,oBACtB,GAAI,aAAa;AAAA,sBACf,WAAW;AAAA,wBACT,QAAQ,MAAM,gBAAgB;AAAA,sBAChC;AAAA,oBACF;AAAA,kBAAA,CACD;AAAA,gBACH;AAAA,gBACA;AAAA,cAAA,CACD;AAAA,YACH;AAAA,UAAA,CACD;AAAA,UACA,gBACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,gBACL,YAAY,cAAc,QAAQ,CAAC,eAAe;AAAA,gBAClD,WAAW,cAAc,WAAW,CAAC,eAAe;AAAA,gBACpD,QAAQ,MAAM,aAAa;AAAA,cAC7B;AAAA,cAEC,UACC,oBAAA,kBAAkB,gBAAgB,UAAU,IAE5C;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC;AAAA,kBACA,iBAAiB,MAAM,OAAO;AAAA,kBAC9B,SAAS;AAAA,oBACP,QAAQ,IAAI;AAAA,sBACV,CAAC,cAAc,IAAI,EAAE,GAAG;AAAA,wBACtB,UAAU;AAAA,sBACZ;AAAA,oBAAA,CACD;AAAA,kBACH;AAAA,kBACD,UAAA;AAAA,oBAAA;AAAA,oBACG,gBAAgB;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACpB;AAAA,YAAA;AAAA,UAEJ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;"}

package/dist/esm/BaseCheckBox/BaseCheckBox.styles.js

@@ -26,7 +26,8 @@ const { staticClasses, useClasses } = createClasses("HvBaseCheckBox", {
       pointerEvents: "initial",
       "& svg": {
         color: theme.colors.atmo3,
-        borderColor: theme.colors.secondary_60
+        borderColor: theme.colors.secondary_60,
+        backgroundColor: theme.colors.atmo3
       }
     }
   },
@@ -44,8 +45,6 @@ const { staticClasses, useClasses } = createClasses("HvBaseCheckBox", {
     },
     "&$disabled": {
       "& svg": {
-        backgroundColor: theme.colors.atmo3,
-        borderColor: theme.colors.atmo3,
         color: theme.colors.secondary_60
       }
     }
@@ -56,8 +55,6 @@ const { staticClasses, useClasses } = createClasses("HvBaseCheckBox", {
     },
     "&$disabled": {
       "& svg": {
-        backgroundColor: theme.colors.atmo3,
-        borderColor: theme.colors.secondary_60,
         color: theme.colors.secondary_60
       }
     }

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

@@ -1 +1 @@
-{"version":3,"file":"BaseCheckBox.styles.js","sources":["../../../src/BaseCheckBox/BaseCheckBox.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseCheckBox\", {\n  root: {\n    padding: 0,\n    width: 32,\n    minWidth: 32,\n    height: 32,\n    borderRadius: theme.radii.base,\n    cursor: \"pointer\",\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n\n    \"& svg\": {\n      width: 16,\n      height: 16,\n      color: theme.colors.atmo1,\n      borderRadius: theme.radii.none,\n      border: `1px solid ${theme.colors.secondary}`,\n    },\n  },\n  disabled: {\n    \"&$root\": {\n      cursor: \"not-allowed\",\n      pointerEvents: \"initial\",\n      \"& svg\": {\n        color: theme.colors.atmo3,\n        borderColor: theme.colors.secondary_60,\n      },\n    },\n  },\n  focusVisible: {\n    \"& svg\": {\n      ...outlineStyles,\n    },\n  },\n  icon: {},\n  checked: {\n    \"& svg\": {\n      border: `1px solid ${theme.colors.secondary}`,\n      backgroundColor: theme.colors.secondary,\n      color: theme.colors.atmo1,\n    },\n    \"&$disabled\": {\n      \"& svg\": {\n        backgroundColor: theme.colors.atmo3,\n        borderColor: theme.colors.atmo3,\n        color: theme.colors.secondary_60,\n      },\n    },\n  },\n  indeterminate: {\n    \"& svg\": {\n      color: theme.colors.secondary,\n    },\n    \"&$disabled\": {\n      \"& svg\": {\n        backgroundColor: theme.colors.atmo3,\n        borderColor: theme.colors.secondary_60,\n        color: theme.colors.secondary_60,\n      },\n    },\n  },\n  semantic: {\n    \"& svg\": {\n      border: `1px solid ${theme.colors.base_dark}`,\n      color: theme.colors.base_light,\n      backgroundColor: theme.colors.base_dark,\n    },\n    \"&$indeterminate\": {\n      \"& svg\": {\n        color: theme.colors.base_dark,\n        backgroundColor: theme.colors.base_light,\n      },\n    },\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IAEA,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO,MAAM,OAAO;AAAA,MACpB,cAAc,MAAM,MAAM;AAAA,MAC1B,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,IAC7C;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,UAAU;AAAA,MACR,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,SAAS;AAAA,QACP,OAAO,MAAM,OAAO;AAAA,QACpB,aAAa,MAAM,OAAO;AAAA,MAC5B;AAAA,IACF;AAAA,EACF;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,MACP,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EACA,MAAM,CAAC;AAAA,EACP,SAAS;AAAA,IACP,SAAS;AAAA,MACP,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,MAC3C,iBAAiB,MAAM,OAAO;AAAA,MAC9B,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,QACP,iBAAiB,MAAM,OAAO;AAAA,QAC9B,aAAa,MAAM,OAAO;AAAA,QAC1B,OAAO,MAAM,OAAO;AAAA,MACtB;AAAA,IACF;AAAA,EACF;AAAA,EACA,eAAe;AAAA,IACb,SAAS;AAAA,MACP,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,QACP,iBAAiB,MAAM,OAAO;AAAA,QAC9B,aAAa,MAAM,OAAO;AAAA,QAC1B,OAAO,MAAM,OAAO;AAAA,MACtB;AAAA,IACF;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,MACP,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,MAC3C,OAAO,MAAM,OAAO;AAAA,MACpB,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,mBAAmB;AAAA,MACjB,SAAS;AAAA,QACP,OAAO,MAAM,OAAO;AAAA,QACpB,iBAAiB,MAAM,OAAO;AAAA,MAChC;AAAA,IACF;AAAA,EACF;AACF,CAAC;"}
+{"version":3,"file":"BaseCheckBox.styles.js","sources":["../../../src/BaseCheckBox/BaseCheckBox.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseCheckBox\", {\n  root: {\n    padding: 0,\n    width: 32,\n    minWidth: 32,\n    height: 32,\n    borderRadius: theme.radii.base,\n    cursor: \"pointer\",\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n\n    \"& svg\": {\n      width: 16,\n      height: 16,\n      color: theme.colors.atmo1,\n      borderRadius: theme.radii.none,\n      border: `1px solid ${theme.colors.secondary}`,\n    },\n  },\n  disabled: {\n    \"&$root\": {\n      cursor: \"not-allowed\",\n      pointerEvents: \"initial\",\n      \"& svg\": {\n        color: theme.colors.atmo3,\n        borderColor: theme.colors.secondary_60,\n        backgroundColor: theme.colors.atmo3,\n      },\n    },\n  },\n  focusVisible: {\n    \"& svg\": {\n      ...outlineStyles,\n    },\n  },\n  icon: {},\n  checked: {\n    \"& svg\": {\n      border: `1px solid ${theme.colors.secondary}`,\n      backgroundColor: theme.colors.secondary,\n      color: theme.colors.atmo1,\n    },\n    \"&$disabled\": {\n      \"& svg\": {\n        color: theme.colors.secondary_60,\n      },\n    },\n  },\n  indeterminate: {\n    \"& svg\": {\n      color: theme.colors.secondary,\n    },\n    \"&$disabled\": {\n      \"& svg\": {\n        color: theme.colors.secondary_60,\n      },\n    },\n  },\n  semantic: {\n    \"& svg\": {\n      border: `1px solid ${theme.colors.base_dark}`,\n      color: theme.colors.base_light,\n      backgroundColor: theme.colors.base_dark,\n    },\n    \"&$indeterminate\": {\n      \"& svg\": {\n        color: theme.colors.base_dark,\n        backgroundColor: theme.colors.base_light,\n      },\n    },\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IAEA,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO,MAAM,OAAO;AAAA,MACpB,cAAc,MAAM,MAAM;AAAA,MAC1B,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,IAC7C;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,UAAU;AAAA,MACR,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,SAAS;AAAA,QACP,OAAO,MAAM,OAAO;AAAA,QACpB,aAAa,MAAM,OAAO;AAAA,QAC1B,iBAAiB,MAAM,OAAO;AAAA,MAChC;AAAA,IACF;AAAA,EACF;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,MACP,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EACA,MAAM,CAAC;AAAA,EACP,SAAS;AAAA,IACP,SAAS;AAAA,MACP,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,MAC3C,iBAAiB,MAAM,OAAO;AAAA,MAC9B,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,QACP,OAAO,MAAM,OAAO;AAAA,MACtB;AAAA,IACF;AAAA,EACF;AAAA,EACA,eAAe;AAAA,IACb,SAAS;AAAA,MACP,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,QACP,OAAO,MAAM,OAAO;AAAA,MACtB;AAAA,IACF;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,MACP,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,MAC3C,OAAO,MAAM,OAAO;AAAA,MACpB,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,mBAAmB;AAAA,MACjB,SAAS;AAAA,QACP,OAAO,MAAM,OAAO;AAAA,QACpB,iBAAiB,MAAM,OAAO;AAAA,MAChC;AAAA,IACF;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/BaseCheckBox/icons.js

@@ -1,18 +1,12 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 const Box = () => {
-  return /* @__PURE__ */ jsx("svg", { width: "14", height: "14", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { fill: "currentcolor", d: "m0,0l16,0l0,16l-16,0l0,-16z" }) });
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 14 14", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "m0,0l16,0l0,16l-16,0l0,-16z" }) });
 };
 const Check = () => {
-  return /* @__PURE__ */ jsx("svg", { width: "14", height: "14", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
-    "path",
-    {
-      d: "m5.03,12.06l-3.76,-3.75l1.42,-1.42l2.24,2.25l6.3,-7.2l1.5,1.31l-7.7,8.81z",
-      fill: "currentcolor"
-    }
-  ) });
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 14 14", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "m5.03,12.06l-3.76,-3.75l1.42,-1.42l2.24,2.25l6.3,-7.2l1.5,1.31l-7.7,8.81z" }) });
 };
 const Partial = () => {
-  return /* @__PURE__ */ jsx("svg", { width: "14", height: "14", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { id: "svg_2", d: "m3,8l8,0l0,-2l-8,0l0,2z", fill: "currentcolor" }) });
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 14 14", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "m3,8l8,0l0,-2l-8,0l0,2z" }) });
 };
 export {
   Box,

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

@@ -1 +1 @@
-{"version":3,"file":"icons.js","sources":["../../../src/BaseCheckBox/icons.tsx"],"sourcesContent":["export const Box = () => {\n  return (\n    <svg width=\"14\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill=\"currentcolor\" d=\"m0,0l16,0l0,16l-16,0l0,-16z\" />\n    </svg>\n  );\n};\n\nexport const Check = () => {\n  return (\n    <svg width=\"14\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"m5.03,12.06l-3.76,-3.75l1.42,-1.42l2.24,2.25l6.3,-7.2l1.5,1.31l-7.7,8.81z\"\n        fill=\"currentcolor\"\n      />\n    </svg>\n  );\n};\n\nexport const Partial = () => {\n  return (\n    <svg width=\"14\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path id=\"svg_2\" d=\"m3,8l8,0l0,-2l-8,0l0,2z\" fill=\"currentcolor\" />\n    </svg>\n  );\n};\n"],"names":[],"mappings":";AAAO,MAAM,MAAM,MAAM;AACvB,SACG,oBAAA,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,OAAM,8BAChC,UAAA,oBAAC,QAAK,EAAA,MAAK,gBAAe,GAAE,+BAA8B,EAC5D,CAAA;AAEJ;AAEO,MAAM,QAAQ,MAAM;AACzB,6BACG,OAAI,EAAA,OAAM,MAAK,QAAO,MAAK,OAAM,8BAChC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,GAAE;AAAA,MACF,MAAK;AAAA,IAAA;AAAA,EAET,EAAA,CAAA;AAEJ;AAEO,MAAM,UAAU,MAAM;AAC3B,6BACG,OAAI,EAAA,OAAM,MAAK,QAAO,MAAK,OAAM,8BAChC,UAAC,oBAAA,QAAA,EAAK,IAAG,SAAQ,GAAE,2BAA0B,MAAK,gBAAe,EACnE,CAAA;AAEJ;"}
+{"version":3,"file":"icons.js","sources":["../../../src/BaseCheckBox/icons.tsx"],"sourcesContent":["export const Box = () => {\n  return (\n    <svg viewBox=\"0 0 14 14\" fill=\"currentColor\">\n      <path d=\"m0,0l16,0l0,16l-16,0l0,-16z\" />\n    </svg>\n  );\n};\n\nexport const Check = () => {\n  return (\n    <svg viewBox=\"0 0 14 14\" fill=\"currentColor\">\n      <path d=\"m5.03,12.06l-3.76,-3.75l1.42,-1.42l2.24,2.25l6.3,-7.2l1.5,1.31l-7.7,8.81z\" />\n    </svg>\n  );\n};\n\nexport const Partial = () => {\n  return (\n    <svg viewBox=\"0 0 14 14\" fill=\"currentColor\">\n      <path d=\"m3,8l8,0l0,-2l-8,0l0,2z\" />\n    </svg>\n  );\n};\n"],"names":[],"mappings":";AAAO,MAAM,MAAM,MAAM;AAErB,SAAA,oBAAC,OAAI,EAAA,SAAQ,aAAY,MAAK,gBAC5B,UAAC,oBAAA,QAAA,EAAK,GAAE,8BAA8B,CAAA,EACxC,CAAA;AAEJ;AAEO,MAAM,QAAQ,MAAM;AAEvB,SAAA,oBAAC,OAAI,EAAA,SAAQ,aAAY,MAAK,gBAC5B,UAAC,oBAAA,QAAA,EAAK,GAAE,4EAA4E,CAAA,EACtF,CAAA;AAEJ;AAEO,MAAM,UAAU,MAAM;AAEzB,SAAA,oBAAC,OAAI,EAAA,SAAQ,aAAY,MAAK,gBAC5B,UAAC,oBAAA,QAAA,EAAK,GAAE,0BAA0B,CAAA,EACpC,CAAA;AAEJ;"}

package/dist/esm/BaseRadio/BaseRadio.styles.js

@@ -16,7 +16,8 @@ const { staticClasses, useClasses } = createClasses("HvBaseRadio", {
       width: 16,
       height: 16,
       borderRadius: theme.radii.circle,
-      border: `1px solid ${theme.colors.secondary}`
+      border: `1px solid ${theme.colors.secondary}`,
+      backgroundColor: theme.colors.atmo1
     },
     borderRadius: 0
   },