@hitachivantara/uikit-react-core 5.99.1 → 5.100.1

package/dist/cjs/BaseSwitch/BaseSwitch.cjs

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

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

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

package/dist/cjs/Header/Navigation/MenuBar/Bar.cjs

@@ -7,7 +7,6 @@ const SelectionContext = require("../utils/SelectionContext.cjs");
 const Bar_styles = require("./Bar.styles.cjs");
 const Bar = (props) => {
   const {
-    id,
     data = [],
     type = "menubar",
     className,
@@ -30,7 +29,7 @@ const Bar = (props) => {
         },
         className
       ),
-      children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: classes.list, id, onFocus: () => {
+      children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: classes.list, onFocus: () => {
       }, children })
     }
   );

package/dist/cjs/Header/Navigation/MenuBar/Bar.styles.cjs

@@ -4,14 +4,14 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const show = {
   top: uikitStyles.theme.header.height,
-  transition: ["top"],
+  transitionProperty: "top",
   boxShadow: uikitStyles.theme.colors.shadow,
   transitionDuration: "500ms",
   backgroundColor: uikitStyles.theme.colors.bgPage
 };
 const hide = {
   top: 0,
-  transition: ["top"],
+  transitionProperty: "top",
   boxShadow: "none",
   transitionDuration: "300ms"
 };

package/dist/cjs/Loading/Loading.cjs

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

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

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

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

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

package/dist/cjs/StatusIcon/StatusIcon.styles.cjs

@@ -41,7 +41,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvStatusIco
     ),
     [`&[data-variant="default"]`]: {
       color: uikitStyles.theme.colors.text,
-      backgroundColor: uikitStyles.theme.colors.bgContainerSecondary,
+      backgroundColor: uikitStyles.theme.colors.bgPage,
       outline: `1px solid ${uikitStyles.theme.colors.borderSubtle}`,
       [`&[data-type="simple"]`]: {
         outline: "none",

package/dist/cjs/Switch/Switch.cjs

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

package/dist/cjs/Tag/Tag.cjs

@@ -11,6 +11,12 @@ const keyboardUtils = require("../utils/keyboardUtils.cjs");
 const Tag_styles = require("./Tag.styles.cjs");
 const ButtonBase = require("../ButtonBase/ButtonBase.cjs");
 const Typography = require("../Typography/Typography.cjs");
+const colorMap = {
+  positive_20: "positive",
+  negative_20: "negative",
+  warning_20: "warning",
+  neutral_20: "info"
+};
 const HvTag = React.forwardRef(function HvTag2(props, ref) {
   const {
     classes: classesProp,
@@ -26,7 +32,7 @@ const HvTag = React.forwardRef(function HvTag2(props, ref) {
     selected,
     defaultSelected = false,
     showSelectIcon = selectable,
-    color,
+    color: colorProp,
     icon: iconProp,
     deleteIcon: deleteIconProp,
     onDelete,
@@ -38,6 +44,7 @@ const HvTag = React.forwardRef(function HvTag2(props, ref) {
     ...others
   } = uikitReactUtils.useDefaultProps("HvTag", props);
   const { classes, cx } = Tag_styles.useClasses(classesProp);
+  const { activeTheme } = uikitReactUtils.useTheme();
   const [isSelected, setIsSelected] = useControlled.useControlled(
     selected,
     Boolean(defaultSelected)
@@ -46,6 +53,7 @@ const HvTag = React.forwardRef(function HvTag2(props, ref) {
     event.stopPropagation();
     onDelete?.(event);
   };
+  const color = activeTheme?.name === "pentahoPlus" && colorMap[colorProp] || colorProp;
   const tagColor = (
     // backwards-compatibility for `type` prop
     type === "categorical" && uikitStyles.theme.alpha(color || "cat1", 0.2) || // use the palette color if it matches

package/dist/cjs/themes/ds3.cjs

@@ -181,9 +181,7 @@ const ds3 = uikitStyles.mergeTheme(uikitStyles.ds3, {
     HvBaseSwitch: {
       classes: {
         root: {
-          width: "32px",
-          height: "16px",
-          borderRadius: 0,
+          padding: 0,
           "&:hover": {
             backgroundColor: "transparent"
           },
@@ -204,7 +202,8 @@ const ds3 = uikitStyles.mergeTheme(uikitStyles.ds3, {
         },
         thumb: {
           width: 12,
-          height: 12
+          height: 12,
+          left: -9
         }
       }
     },
@@ -1154,9 +1153,6 @@ const ds3 = uikitStyles.mergeTheme(uikitStyles.ds3, {
           "& button&.HvMultiButton-button&.HvMultiButton-selected": {
             height: 32
           }
-        },
-        splitDisabled: {
-          backgroundColor: uikitStyles.theme.colors.atmo3
         }
       }
     },

package/dist/cjs/themes/ds5.cjs

@@ -46,33 +46,33 @@ const ds5 = uikitStyles.mergeTheme(uikitStyles.ds5, {
       classes: {
         root: {
           ":where(:not(.HvButton-disabled,.HvButton-contained))": {
-            "&[data-color=warning]": { color: uikitStyles.theme.colors.warning_140 }
+            "&[data-color=warning]": { color: uikitStyles.theme.colors.warningDeep }
           }
         },
         contained: {
           ":where([data-color=primary]:not(.HvButton-disabled))": {
             ":hover, &:focus-visible": {
-              backgroundColor: uikitStyles.theme.colors.primary_80,
-              borderColor: uikitStyles.theme.colors.primary_80
+              backgroundColor: uikitStyles.theme.colors.primaryStrong,
+              borderColor: uikitStyles.theme.colors.primaryStrong
             }
           },
           ":where([data-color=positive]:not(.HvButton-disabled))": {
             ":hover, &:focus-visible": {
-              backgroundColor: uikitStyles.theme.colors.positive_80,
-              borderColor: uikitStyles.theme.colors.positive_80
+              backgroundColor: uikitStyles.theme.colors.positiveStrong,
+              borderColor: uikitStyles.theme.colors.positiveStrong
             }
           },
           ":where([data-color=warning]:not(.HvButton-disabled))": {
-            backgroundColor: uikitStyles.theme.colors.warning_120,
+            backgroundColor: uikitStyles.theme.colors.warningStrong,
             ":hover, &:focus-visible": {
-              backgroundColor: uikitStyles.theme.colors.warning_140,
-              borderColor: uikitStyles.theme.colors.warning_140
+              backgroundColor: uikitStyles.theme.colors.warningDeep,
+              borderColor: uikitStyles.theme.colors.warningDeep
             }
           },
           ":where([data-color=negative]:not(.HvButton-disabled))": {
             ":hover, &:focus-visible": {
-              backgroundColor: uikitStyles.theme.colors.negative_80,
-              borderColor: uikitStyles.theme.colors.negative_80
+              backgroundColor: uikitStyles.theme.colors.negativeStrong,
+              borderColor: uikitStyles.theme.colors.negativeStrong
             }
           }
         }
@@ -105,10 +105,10 @@ const ds5 = uikitStyles.mergeTheme(uikitStyles.ds5, {
         splitGroup: {
           // NEXT5 subtle multi-buttons have a custom background
           "& .HvButton-subtle": {
-            backgroundColor: uikitStyles.theme.colors.atmo1
+            backgroundColor: uikitStyles.theme.colors.bgContainer
           },
           "&& .HvButton-disabled": {
-            backgroundColor: uikitStyles.theme.colors.atmo3
+            backgroundColor: uikitStyles.theme.colors.bgDisabled
           }
         }
       }
@@ -133,7 +133,7 @@ const ds5 = uikitStyles.mergeTheme(uikitStyles.ds5, {
       classes: {
         root: {
           "&.HvTab-selected": {
-            color: uikitStyles.theme.colors.secondary
+            color: uikitStyles.theme.colors.text
           }
         }
       }
@@ -155,7 +155,7 @@ const ds5 = uikitStyles.mergeTheme(uikitStyles.ds5, {
             padding: 0
           },
           "& .HvIconContainer-root": {
-            color: `${uikitStyles.theme.colors.secondary}!important`
+            color: `${uikitStyles.theme.colors.text}!important`
           }
         }
       }

package/dist/cjs/themes/pentahoPlus.cjs

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

package/dist/esm/BaseSwitch/BaseSwitch.js

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

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

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

package/dist/esm/Header/Navigation/MenuBar/Bar.js

@@ -6,7 +6,6 @@ import { useClasses } from "./Bar.styles.js";
 import { staticClasses } from "./Bar.styles.js";
 const Bar = (props) => {
   const {
-    id,
     data = [],
     type = "menubar",
     className,
@@ -29,7 +28,7 @@ const Bar = (props) => {
         },
         className
       ),
-      children: /* @__PURE__ */ jsx("ul", { className: classes.list, id, onFocus: () => {
+      children: /* @__PURE__ */ jsx("ul", { className: classes.list, onFocus: () => {
       }, children })
     }
   );