boreal-ui 0.0.31 → 0.0.33

package/dist/core/{Divider-An2VsXog.js → Divider-BxiplAj2.js}

@@ -18,13 +18,26 @@ const DividerBase = forwardRef(
     ...rest
   }, ref) => {
     const isVertical = orientation === "vertical";
-    const style = {
+    const ComponentTag = as;
+    const needsExplicitRole = ComponentTag !== "hr" || isVertical;
+    const role = needsExplicitRole ? "separator" : void 0;
+    const style = ComponentTag === "hr" ? {
+      border: 0,
+      margin: 0,
+      ...isVertical ? {
+        width: 0,
+        height: length,
+        borderLeft: `${thickness} ${dashed ? "dashed" : "solid"} currentColor`
+      } : {
+        height: 0,
+        width: length,
+        borderTop: `${thickness} ${dashed ? "dashed" : "solid"} currentColor`
+      }
+    } : {
       width: isVertical ? thickness : length,
       height: isVertical ? length : thickness,
       backgroundColor: dashed ? "transparent" : void 0
     };
-    const ComponentTag = as;
-    const role = ComponentTag === "hr" ? void 0 : "separator";
     return /* @__PURE__ */ jsx(
       ComponentTag,
       {
@@ -38,8 +51,9 @@ const DividerBase = forwardRef(
           className
         ),
         ...role && { role },
-        ...role && isVertical && { "aria-orientation": "vertical" },
+        ...isVertical && { "aria-orientation": "vertical" },
         ...ariaHidden !== void 0 && { "aria-hidden": ariaHidden },
+        "data-orientation": orientation,
         style,
         "data-testid": testId,
         ...rest
@@ -66,4 +80,4 @@ const Divider = (props) => /* @__PURE__ */ jsx(DividerBase, { ...props, classMap
 export {
   Divider as D
 };
-//# sourceMappingURL=Divider-An2VsXog.js.map
+//# sourceMappingURL=Divider-BxiplAj2.js.map

package/dist/core/Divider-BxiplAj2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider-BxiplAj2.js","sources":["../../src/components/Divider/DividerBase.tsx","../../src/components/Divider/core/Divider.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\r\nimport { DividerBaseProps } from \"./Divider.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { getDefaultTheme } from \"../../config/boreal-style-config\";\r\n\r\nconst DividerBase = forwardRef<HTMLElement, DividerBaseProps>(\r\n  (\r\n    {\r\n      orientation = \"horizontal\",\r\n      thickness = \"1px\",\r\n      length = \"100%\",\r\n      className = \"\",\r\n      dashed = false,\r\n      theme = getDefaultTheme(),\r\n      state = \"\",\r\n      as = \"div\",\r\n      classMap,\r\n      \"data-testid\": testId = \"divider\",\r\n      \"aria-hidden\": ariaHidden,\r\n      ...rest\r\n    },\r\n    ref\r\n  ) => {\r\n    const isVertical = orientation === \"vertical\";\r\n\r\n    const ComponentTag = as;\r\n\r\n    const needsExplicitRole = ComponentTag !== \"hr\" || isVertical;\r\n    const role = needsExplicitRole ? \"separator\" : undefined;\r\n\r\n    const style: React.CSSProperties =\r\n      ComponentTag === \"hr\"\r\n        ? {\r\n            border: 0,\r\n            margin: 0,\r\n            ...(isVertical\r\n              ? {\r\n                  width: 0,\r\n                  height: length,\r\n                  borderLeft: `${thickness} ${dashed ? \"dashed\" : \"solid\"} currentColor`,\r\n                }\r\n              : {\r\n                  height: 0,\r\n                  width: length,\r\n                  borderTop: `${thickness} ${dashed ? \"dashed\" : \"solid\"} currentColor`,\r\n                }),\r\n          }\r\n        : {\r\n            width: isVertical ? thickness : length,\r\n            height: isVertical ? length : thickness,\r\n            backgroundColor: dashed ? \"transparent\" : undefined,\r\n          };\r\n\r\n    return (\r\n      <ComponentTag\r\n        ref={ref as never}\r\n        className={combineClassNames(\r\n          classMap.divider,\r\n          classMap[orientation],\r\n          theme && classMap[theme],\r\n          state && classMap[state],\r\n          dashed && classMap.dashed,\r\n          className\r\n        )}\r\n        {...(role && { role })}\r\n        {...(isVertical && { \"aria-orientation\": \"vertical\" })}\r\n        {...(ariaHidden !== undefined && { \"aria-hidden\": ariaHidden })}\r\n        data-orientation={orientation}\r\n        style={style}\r\n        data-testid={testId}\r\n        {...rest}\r\n      />\r\n    );\r\n  }\r\n);\r\n\r\nDividerBase.displayName = \"DividerBase\";\r\n\r\nexport default DividerBase;\r\n","import React from \"react\";\r\nimport DividerBase from \"../DividerBase\";\r\nimport \"./Divider.scss\";\r\nimport { DividerProps } from \"../Divider.types\";\r\n\r\nconst classes = {\r\n  divider: \"divider\",\r\n  horizontal: \"divider_horizontal\",\r\n  vertical: \"divider_vertical\",\r\n  dashed: \"divider_dashed\",\r\n  primary: \"divider_primary\",\r\n  secondary: \"divider_secondary\",\r\n  tertiary: \"divider_tertiary\",\r\n  quaternary: \"divider_quaternary\",\r\n  clear: \"divider_clear\",\r\n  success: \"divider_success\",\r\n  warning: \"divider_warning\",\r\n  error: \"divider_error\",\r\n};\r\n\r\nconst Divider: React.FC<DividerProps> = (props) => (\r\n  <DividerBase {...props} classMap={classes} />\r\n);\r\n\r\nexport default Divider;\r\n"],"names":[],"mappings":";;;;AAKA,MAAM,cAAc;AAAA,EAClB,CACE;AAAA,IACE,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,QAAQ,gBAAA;AAAA,IACR,QAAQ;AAAA,IACR,KAAK;AAAA,IACL;AAAA,IACA,eAAe,SAAS;AAAA,IACxB,eAAe;AAAA,IACf,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,aAAa,gBAAgB;AAEnC,UAAM,eAAe;AAErB,UAAM,oBAAoB,iBAAiB,QAAQ;AACnD,UAAM,OAAO,oBAAoB,cAAc;AAE/C,UAAM,QACJ,iBAAiB,OACb;AAAA,MACE,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,GAAI,aACA;AAAA,QACE,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAY,GAAG,SAAS,IAAI,SAAS,WAAW,OAAO;AAAA,MAAA,IAEzD;AAAA,QACE,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,WAAW,GAAG,SAAS,IAAI,SAAS,WAAW,OAAO;AAAA,MAAA;AAAA,IACxD,IAEN;AAAA,MACE,OAAO,aAAa,YAAY;AAAA,MAChC,QAAQ,aAAa,SAAS;AAAA,MAC9B,iBAAiB,SAAS,gBAAgB;AAAA,IAAA;AAGlD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT,SAAS;AAAA,UACT,SAAS,WAAW;AAAA,UACpB,SAAS,SAAS,KAAK;AAAA,UACvB,SAAS,SAAS,KAAK;AAAA,UACvB,UAAU,SAAS;AAAA,UACnB;AAAA,QAAA;AAAA,QAED,GAAI,QAAQ,EAAE,KAAA;AAAA,QACd,GAAI,cAAc,EAAE,oBAAoB,WAAA;AAAA,QACxC,GAAI,eAAe,UAAa,EAAE,eAAe,WAAA;AAAA,QAClD,oBAAkB;AAAA,QAClB;AAAA,QACA,eAAa;AAAA,QACZ,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,YAAY,cAAc;ACvE1B,MAAM,UAAU;AAAA,EACd,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,WAAW;AAAA,EACX,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT;AAEA,MAAM,UAAkC,CAAC,UACvC,oBAAC,eAAa,GAAG,OAAO,UAAU,QAAA,CAAS;"}

package/dist/core/Divider.cjs.js

@@ -1,4 +1,4 @@
 "use strict";
-const Divider = require("./Divider-TtfSFBcp.cjs");
+const Divider = require("./Divider-Bn7ghdiP.cjs");
 module.exports = Divider.Divider;
 //# sourceMappingURL=Divider.cjs.js.map

package/dist/core/Divider.js

@@ -1,4 +1,4 @@
-import { D } from "./Divider-An2VsXog.js";
+import { D } from "./Divider-BxiplAj2.js";
 export {
   D as default
 };

package/dist/core/{Dropdown-iTrhrEMO.cjs → Dropdown-CJo6T9__.cjs}

@@ -5,7 +5,7 @@ const classNames = require("./classNames-BcWMx052.cjs");
 const capitalize = require("./capitalize-DoV-nOmN.cjs");
 const borealStyleConfig = require("./boreal-style-config-Rr5d5Qts.cjs");
 ;/* empty css                   */
-const IconButton = require("./IconButton-BADgP1DD.cjs");
+const IconButton = require("./IconButton-D_W4nsPZ.cjs");
 const MenuIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
   "svg",
   {
@@ -73,33 +73,32 @@ const BaseDropdown = ({
   const [activeIndex, setActiveIndex] = React.useState(-1);
   const dropdownRef = React.useRef(null);
   const menuRef = React.useRef(null);
+  const triggerRef = React.useRef(null);
   const menuId = React.useId();
   const Icon = triggerIcon ?? MenuIcon;
   const toggleDropdown = () => setOpen((prev) => !prev);
   const closeDropdown = () => {
+    var _a, _b;
     setOpen(false);
     setActiveIndex(-1);
+    (_b = (_a = triggerRef.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
   };
-  const handleKeyDown = (e) => {
+  React.useEffect(() => {
     var _a;
     if (!open) return;
-    if (e.key === "Escape") {
-      e.preventDefault();
-      closeDropdown();
-    } else if (e.key === "ArrowDown") {
-      e.preventDefault();
-      setActiveIndex((prev) => (prev + 1) % items.length);
-    } else if (e.key === "ArrowUp") {
-      e.preventDefault();
-      setActiveIndex((prev) => (prev - 1 + items.length) % items.length);
-    } else if (e.key === "Enter" || e.key === " ") {
-      const item = items[activeIndex];
-      if (item) {
-        (_a = item.onClick) == null ? void 0 : _a.call(item);
-        closeDropdown();
-      }
+    const menuItems = (_a = menuRef.current) == null ? void 0 : _a.querySelectorAll('[role="menuitem"]');
+    if (menuItems && menuItems.length > 0) {
+      setActiveIndex(0);
+    } else {
+      setActiveIndex(-1);
     }
-  };
+  }, [open]);
+  React.useEffect(() => {
+    var _a, _b;
+    if (!open || activeIndex < 0) return;
+    const menuItems = (_a = menuRef.current) == null ? void 0 : _a.querySelectorAll('[role="menuitem"]');
+    (_b = menuItems == null ? void 0 : menuItems[activeIndex]) == null ? void 0 : _b.focus();
+  }, [activeIndex, open]);
   React.useEffect(() => {
     const handleClickOutside = (e) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
@@ -109,12 +108,12 @@ const BaseDropdown = ({
     document.addEventListener("mousedown", handleClickOutside);
     if (open && menuRef.current) {
       const rect = menuRef.current.getBoundingClientRect();
-      const isOverflowingRight = rect.right > window.innerWidth;
-      const isOverflowingLeft = rect.left < 0;
-      if (isOverflowingRight) {
+      const right = rect.right > window.innerWidth;
+      const left = rect.left < 0;
+      if (right) {
         menuRef.current.setAttribute("data-overflow-right", "true");
         menuRef.current.removeAttribute("data-overflow-left");
-      } else if (isOverflowingLeft) {
+      } else if (left) {
         menuRef.current.setAttribute("data-overflow-left", "true");
         menuRef.current.removeAttribute("data-overflow-right");
       } else {
@@ -123,14 +122,45 @@ const BaseDropdown = ({
       }
     }
     return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [open, menuRef]);
-  React.useEffect(() => {
-    var _a, _b;
-    const menuItems = (_a = menuRef.current) == null ? void 0 : _a.querySelectorAll('[role="menuitem"]');
-    if (open && menuItems && activeIndex >= 0) {
-      (_b = menuItems[activeIndex]) == null ? void 0 : _b.focus();
-    }
-  }, [activeIndex, open]);
+  }, [open]);
+  const handleKeyDown = React.useCallback(
+    (e) => {
+      var _a;
+      if (!open) return;
+      const len = items.length;
+      const hasItems = len > 0;
+      if (e.key === "Escape") {
+        e.preventDefault();
+        closeDropdown();
+        return;
+      }
+      if (e.key === "Tab") {
+        closeDropdown();
+        return;
+      }
+      if (!hasItems) return;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveIndex((prev) => prev < 0 ? 0 : (prev + 1) % len);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveIndex((prev) => prev < 0 ? len - 1 : (prev - 1 + len) % len);
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        setActiveIndex(0);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        setActiveIndex(len - 1);
+      } else if ((e.key === "Enter" || e.key === " ") && activeIndex >= 0) {
+        const item = items[activeIndex];
+        if (item) {
+          (_a = item.onClick) == null ? void 0 : _a.call(item);
+          closeDropdown();
+        }
+      }
+    },
+    [open, items, activeIndex]
+  );
   const menuClassNames = React.useMemo(
     () => classNames.combineClassNames(
       classMap.menu,
@@ -152,6 +182,7 @@ const BaseDropdown = ({
         /* @__PURE__ */ jsxRuntime.jsx(
           IconButton2,
           {
+            ref: triggerRef,
             icon: Icon,
             ariaLabel,
             "aria-haspopup": "menu",
@@ -173,6 +204,7 @@ const BaseDropdown = ({
             ref: menuRef,
             role: "menu",
             "aria-label": ariaLabel,
+            "aria-orientation": "vertical",
             className: menuClassNames,
             "data-testid": `${testId}-menu`,
             children: items.map(
@@ -183,9 +215,14 @@ const BaseDropdown = ({
                   className: classMap.item,
                   role: "menuitem",
                   tabIndex: -1,
+                  onClick: () => {
+                    var _a;
+                    (_a = item.onClick) == null ? void 0 : _a.call(item);
+                    closeDropdown();
+                  },
                   "data-testid": item["data-testid"],
                   children: [
-                    item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: classMap.icon, children: item.icon }),
+                    item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: classMap.icon, "aria-hidden": "true", children: item.icon }),
                     item.label
                   ]
                 },
@@ -204,7 +241,7 @@ const BaseDropdown = ({
                   },
                   "data-testid": item["data-testid"],
                   children: [
-                    item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: classMap.icon, children: item.icon }),
+                    item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: classMap.icon, "aria-hidden": "true", children: item.icon }),
                     item.label
                   ]
                 },
@@ -217,6 +254,7 @@ const BaseDropdown = ({
     }
   );
 };
+BaseDropdown.displayName = "BaseDropdown";
 const classes = {
   wrapper: "dropdown",
   menu: "dropdown_menu",
@@ -238,4 +276,4 @@ const Dropdown = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown, { ...props, IconButton: IconButton.IconButton, classMap: classes });
 };
 exports.Dropdown = Dropdown;
-//# sourceMappingURL=Dropdown-iTrhrEMO.cjs.map
+//# sourceMappingURL=Dropdown-CJo6T9__.cjs.map

package/dist/core/Dropdown-CJo6T9__.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown-CJo6T9__.cjs","sources":["../../src/Icons/MenuIcon.tsx","../../src/components/Dropdown/DropdownBase.tsx","../../src/components/Dropdown/core/Dropdown.tsx"],"sourcesContent":["const MenuIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (\r\n  <svg\r\n    width=\"24px\"\r\n    height=\"24px\"\r\n    strokeWidth=\"1.5\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"none\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    color=\"currentColor\"\r\n    {...props}\r\n  >\r\n    <path\r\n      d=\"M3 5H21\"\r\n      stroke=\"currentColor\"\r\n      strokeWidth=\"1.5\"\r\n      strokeLinecap=\"round\"\r\n      strokeLinejoin=\"round\"\r\n    ></path>\r\n    <path\r\n      d=\"M3 12H21\"\r\n      stroke=\"currentColor\"\r\n      strokeWidth=\"1.5\"\r\n      strokeLinecap=\"round\"\r\n      strokeLinejoin=\"round\"\r\n    ></path>\r\n    <path\r\n      d=\"M3 19H21\"\r\n      stroke=\"currentColor\"\r\n      strokeWidth=\"1.5\"\r\n      strokeLinecap=\"round\"\r\n      strokeLinejoin=\"round\"\r\n    ></path>\r\n  </svg>\r\n);\r\n\r\nexport default MenuIcon;\r\n","import React, {\r\n  useState,\r\n  useRef,\r\n  useEffect,\r\n  useCallback,\r\n  KeyboardEvent,\r\n  useId,\r\n  JSX,\r\n  ComponentType,\r\n  useMemo,\r\n} from \"react\";\r\nimport { BaseDropdownProps, DropdownProps } from \"./Dropdown.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport MenuIcon from \"../../Icons/MenuIcon\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n  getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst BaseDropdown: React.FC<BaseDropdownProps> = ({\r\n  triggerIcon,\r\n  items,\r\n  align = \"right\",\r\n  className = \"\",\r\n  menuClassName = \"\",\r\n  ariaLabel = \"Dropdown menu\",\r\n  theme = getDefaultTheme(),\r\n  toggleRounding = getDefaultRounding(),\r\n  menuRounding = getDefaultRounding(),\r\n  toggleShadow = getDefaultShadow(),\r\n  menuShadow = getDefaultShadow(),\r\n  toggleOutline = false,\r\n  state = \"\",\r\n  \"data-testid\": testId = \"dropdown\",\r\n  IconButton,\r\n  classMap,\r\n}: BaseDropdownProps): JSX.Element => {\r\n  const [open, setOpen] = useState(false);\r\n  const [activeIndex, setActiveIndex] = useState<number>(-1);\r\n  const dropdownRef = useRef<HTMLDivElement>(null);\r\n  const menuRef = useRef<HTMLDivElement>(null);\r\n  const triggerRef = useRef<HTMLElement | null>(null);\r\n  const menuId = useId();\r\n\r\n  const Icon = triggerIcon ?? MenuIcon;\r\n\r\n  const toggleDropdown = () => setOpen((prev) => !prev);\r\n  const closeDropdown = () => {\r\n    setOpen(false);\r\n    setActiveIndex(-1);\r\n    triggerRef.current?.focus?.();\r\n  };\r\n\r\n  useEffect(() => {\r\n    if (!open) return;\r\n    const menuItems =\r\n      menuRef.current?.querySelectorAll<HTMLElement>('[role=\"menuitem\"]');\r\n    if (menuItems && menuItems.length > 0) {\r\n      setActiveIndex(0);\r\n    } else {\r\n      setActiveIndex(-1);\r\n    }\r\n  }, [open]);\r\n\r\n  useEffect(() => {\r\n    if (!open || activeIndex < 0) return;\r\n    const menuItems =\r\n      menuRef.current?.querySelectorAll<HTMLElement>('[role=\"menuitem\"]');\r\n    menuItems?.[activeIndex]?.focus();\r\n  }, [activeIndex, open]);\r\n\r\n  useEffect(() => {\r\n    const handleClickOutside = (e: MouseEvent) => {\r\n      if (\r\n        dropdownRef.current &&\r\n        !dropdownRef.current.contains(e.target as Node)\r\n      ) {\r\n        closeDropdown();\r\n      }\r\n    };\r\n    document.addEventListener(\"mousedown\", handleClickOutside);\r\n\r\n    if (open && menuRef.current) {\r\n      const rect = menuRef.current.getBoundingClientRect();\r\n      const right = rect.right > window.innerWidth;\r\n      const left = rect.left < 0;\r\n      if (right) {\r\n        menuRef.current.setAttribute(\"data-overflow-right\", \"true\");\r\n        menuRef.current.removeAttribute(\"data-overflow-left\");\r\n      } else if (left) {\r\n        menuRef.current.setAttribute(\"data-overflow-left\", \"true\");\r\n        menuRef.current.removeAttribute(\"data-overflow-right\");\r\n      } else {\r\n        menuRef.current.removeAttribute(\"data-overflow-right\");\r\n        menuRef.current.removeAttribute(\"data-overflow-left\");\r\n      }\r\n    }\r\n\r\n    return () => document.removeEventListener(\"mousedown\", handleClickOutside);\r\n  }, [open]);\r\n\r\n  const handleKeyDown = useCallback(\r\n    (e: KeyboardEvent<HTMLDivElement>) => {\r\n      if (!open) return;\r\n\r\n      const len = items.length;\r\n      const hasItems = len > 0;\r\n\r\n      if (e.key === \"Escape\") {\r\n        e.preventDefault();\r\n        closeDropdown();\r\n        return;\r\n      }\r\n      if (e.key === \"Tab\") {\r\n        closeDropdown();\r\n        return;\r\n      }\r\n\r\n      if (!hasItems) return;\r\n\r\n      if (e.key === \"ArrowDown\") {\r\n        e.preventDefault();\r\n        setActiveIndex((prev) => (prev < 0 ? 0 : (prev + 1) % len));\r\n      } else if (e.key === \"ArrowUp\") {\r\n        e.preventDefault();\r\n        setActiveIndex((prev) => (prev < 0 ? len - 1 : (prev - 1 + len) % len));\r\n      } else if (e.key === \"Home\") {\r\n        e.preventDefault();\r\n        setActiveIndex(0);\r\n      } else if (e.key === \"End\") {\r\n        e.preventDefault();\r\n        setActiveIndex(len - 1);\r\n      } else if ((e.key === \"Enter\" || e.key === \" \") && activeIndex >= 0) {\r\n        const item = items[activeIndex];\r\n        if (item) {\r\n          item.onClick?.();\r\n          closeDropdown();\r\n        }\r\n      }\r\n    },\r\n    [open, items, activeIndex]\r\n  );\r\n\r\n  const menuClassNames = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.menu,\r\n        align === \"right\" ? classMap.alignRight : classMap.alignLeft,\r\n        menuShadow && classMap[`shadow${capitalize(menuShadow)}`],\r\n        menuRounding && classMap[`round${capitalize(menuRounding)}`],\r\n        menuClassName\r\n      ),\r\n    [classMap, align, menuShadow, menuRounding, menuClassName]\r\n  );\r\n\r\n  return (\r\n    <div\r\n      ref={dropdownRef}\r\n      className={combineClassNames(classMap.wrapper, className)}\r\n      onKeyDown={handleKeyDown}\r\n      data-testid={testId}\r\n    >\r\n      <IconButton\r\n        ref={triggerRef as any}\r\n        icon={Icon}\r\n        ariaLabel={ariaLabel}\r\n        aria-haspopup=\"menu\"\r\n        aria-expanded={open}\r\n        aria-controls={menuId}\r\n        rounding={toggleRounding}\r\n        shadow={toggleShadow}\r\n        outline={toggleOutline}\r\n        theme={theme}\r\n        state={state}\r\n        onClick={toggleDropdown}\r\n        data-testid={`${testId}-trigger`}\r\n      />\r\n\r\n      {open && (\r\n        <div\r\n          id={menuId}\r\n          ref={menuRef}\r\n          role=\"menu\"\r\n          aria-label={ariaLabel}\r\n          aria-orientation=\"vertical\"\r\n          className={menuClassNames}\r\n          data-testid={`${testId}-menu`}\r\n        >\r\n          {items.map((item, index) =>\r\n            item.href ? (\r\n              <a\r\n                key={index}\r\n                href={item.href}\r\n                className={classMap.item}\r\n                role=\"menuitem\"\r\n                tabIndex={-1}\r\n                onClick={() => {\r\n                  item.onClick?.();\r\n                  closeDropdown();\r\n                }}\r\n                data-testid={item[\"data-testid\"]}\r\n              >\r\n                {item.icon && (\r\n                  <span className={classMap.icon} aria-hidden=\"true\">\r\n                    {item.icon}\r\n                  </span>\r\n                )}\r\n                {item.label}\r\n              </a>\r\n            ) : (\r\n              <button\r\n                key={index}\r\n                type=\"button\"\r\n                role=\"menuitem\"\r\n                tabIndex={-1}\r\n                className={classMap.item}\r\n                onClick={() => {\r\n                  item.onClick?.();\r\n                  closeDropdown();\r\n                }}\r\n                data-testid={item[\"data-testid\"]}\r\n              >\r\n                {item.icon && (\r\n                  <span className={classMap.icon} aria-hidden=\"true\">\r\n                    {item.icon}\r\n                  </span>\r\n                )}\r\n                {item.label}\r\n              </button>\r\n            )\r\n          )}\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\nBaseDropdown.displayName = \"BaseDropdown\";\r\nexport default BaseDropdown;\r\n","import React from \"react\";\r\nimport BaseDropdown from \"../DropdownBase\";\r\nimport { DropdownProps } from \"../Dropdown.types\";\r\nimport { IconButton } from \"@/index.core\";\r\nimport \"./Dropdown.scss\";\r\n\r\nconst classes = {\r\n  wrapper: \"dropdown\",\r\n  menu: \"dropdown_menu\",\r\n  item: \"dropdown_item\",\r\n  icon: \"dropdown_icon\",\r\n\r\n  alignRight: \"dropdown_menu_right\",\r\n  alignLeft: \"dropdown_menu_left\",\r\n\r\n  shadowNone: \"menu_shadow-None\",\r\n  shadowLight: \"menu_shadow-Light\",\r\n  shadowMedium: \"menu_shadow-Medium\",\r\n  shadowStrong: \"menu_shadow-Strong\",\r\n  shadowIntense: \"menu_shadow-Intense\",\r\n\r\n  roundNone: \"menu_round-None\",\r\n  roundSmall: \"menu_round-Small\",\r\n  roundMedium: \"menu_round-Medium\",\r\n  roundLarge: \"menu_round-Large\",\r\n};\r\n\r\nconst Dropdown: React.FC<DropdownProps> = (props) => {\r\n  return <BaseDropdown {...props} IconButton={IconButton} classMap={classes} />;\r\n};\r\n\r\nexport default Dropdown;\r\n"],"names":["jsxs","jsx","getDefaultTheme","getDefaultRounding","getDefaultShadow","IconButton","useState","useRef","useId","useEffect","useCallback","useMemo","combineClassNames","capitalize"],"mappings":"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"}

package/dist/core/{Dropdown-CPKkSeq2.js → Dropdown-Dzjmt9gx.js}

@@ -1,10 +1,10 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useRef, useId, useEffect, useMemo } from "react";
+import { useState, useRef, useId, useEffect, useCallback, useMemo } from "react";
 import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
 import { c as capitalize } from "./capitalize-C0TSQSPh.js";
 import { a as getDefaultRounding, b as getDefaultShadow, d as getDefaultTheme } from "./boreal-style-config-BILmxkZG.js";
 /* empty css                 */
-import { I as IconButton } from "./IconButton-Dsw2M1s8.js";
+import { I as IconButton } from "./IconButton-B9WWbeSM.js";
 const MenuIcon = (props) => /* @__PURE__ */ jsxs(
   "svg",
   {
@@ -72,33 +72,32 @@ const BaseDropdown = ({
   const [activeIndex, setActiveIndex] = useState(-1);
   const dropdownRef = useRef(null);
   const menuRef = useRef(null);
+  const triggerRef = useRef(null);
   const menuId = useId();
   const Icon = triggerIcon ?? MenuIcon;
   const toggleDropdown = () => setOpen((prev) => !prev);
   const closeDropdown = () => {
+    var _a, _b;
     setOpen(false);
     setActiveIndex(-1);
+    (_b = (_a = triggerRef.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
   };
-  const handleKeyDown = (e) => {
+  useEffect(() => {
     var _a;
     if (!open) return;
-    if (e.key === "Escape") {
-      e.preventDefault();
-      closeDropdown();
-    } else if (e.key === "ArrowDown") {
-      e.preventDefault();
-      setActiveIndex((prev) => (prev + 1) % items.length);
-    } else if (e.key === "ArrowUp") {
-      e.preventDefault();
-      setActiveIndex((prev) => (prev - 1 + items.length) % items.length);
-    } else if (e.key === "Enter" || e.key === " ") {
-      const item = items[activeIndex];
-      if (item) {
-        (_a = item.onClick) == null ? void 0 : _a.call(item);
-        closeDropdown();
-      }
+    const menuItems = (_a = menuRef.current) == null ? void 0 : _a.querySelectorAll('[role="menuitem"]');
+    if (menuItems && menuItems.length > 0) {
+      setActiveIndex(0);
+    } else {
+      setActiveIndex(-1);
     }
-  };
+  }, [open]);
+  useEffect(() => {
+    var _a, _b;
+    if (!open || activeIndex < 0) return;
+    const menuItems = (_a = menuRef.current) == null ? void 0 : _a.querySelectorAll('[role="menuitem"]');
+    (_b = menuItems == null ? void 0 : menuItems[activeIndex]) == null ? void 0 : _b.focus();
+  }, [activeIndex, open]);
   useEffect(() => {
     const handleClickOutside = (e) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
@@ -108,12 +107,12 @@ const BaseDropdown = ({
     document.addEventListener("mousedown", handleClickOutside);
     if (open && menuRef.current) {
       const rect = menuRef.current.getBoundingClientRect();
-      const isOverflowingRight = rect.right > window.innerWidth;
-      const isOverflowingLeft = rect.left < 0;
-      if (isOverflowingRight) {
+      const right = rect.right > window.innerWidth;
+      const left = rect.left < 0;
+      if (right) {
         menuRef.current.setAttribute("data-overflow-right", "true");
         menuRef.current.removeAttribute("data-overflow-left");
-      } else if (isOverflowingLeft) {
+      } else if (left) {
         menuRef.current.setAttribute("data-overflow-left", "true");
         menuRef.current.removeAttribute("data-overflow-right");
       } else {
@@ -122,14 +121,45 @@ const BaseDropdown = ({
       }
     }
     return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [open, menuRef]);
-  useEffect(() => {
-    var _a, _b;
-    const menuItems = (_a = menuRef.current) == null ? void 0 : _a.querySelectorAll('[role="menuitem"]');
-    if (open && menuItems && activeIndex >= 0) {
-      (_b = menuItems[activeIndex]) == null ? void 0 : _b.focus();
-    }
-  }, [activeIndex, open]);
+  }, [open]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      var _a;
+      if (!open) return;
+      const len = items.length;
+      const hasItems = len > 0;
+      if (e.key === "Escape") {
+        e.preventDefault();
+        closeDropdown();
+        return;
+      }
+      if (e.key === "Tab") {
+        closeDropdown();
+        return;
+      }
+      if (!hasItems) return;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveIndex((prev) => prev < 0 ? 0 : (prev + 1) % len);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveIndex((prev) => prev < 0 ? len - 1 : (prev - 1 + len) % len);
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        setActiveIndex(0);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        setActiveIndex(len - 1);
+      } else if ((e.key === "Enter" || e.key === " ") && activeIndex >= 0) {
+        const item = items[activeIndex];
+        if (item) {
+          (_a = item.onClick) == null ? void 0 : _a.call(item);
+          closeDropdown();
+        }
+      }
+    },
+    [open, items, activeIndex]
+  );
   const menuClassNames = useMemo(
     () => combineClassNames(
       classMap.menu,
@@ -151,6 +181,7 @@ const BaseDropdown = ({
         /* @__PURE__ */ jsx(
           IconButton2,
           {
+            ref: triggerRef,
             icon: Icon,
             ariaLabel,
             "aria-haspopup": "menu",
@@ -172,6 +203,7 @@ const BaseDropdown = ({
             ref: menuRef,
             role: "menu",
             "aria-label": ariaLabel,
+            "aria-orientation": "vertical",
             className: menuClassNames,
             "data-testid": `${testId}-menu`,
             children: items.map(
@@ -182,9 +214,14 @@ const BaseDropdown = ({
                   className: classMap.item,
                   role: "menuitem",
                   tabIndex: -1,
+                  onClick: () => {
+                    var _a;
+                    (_a = item.onClick) == null ? void 0 : _a.call(item);
+                    closeDropdown();
+                  },
                   "data-testid": item["data-testid"],
                   children: [
-                    item.icon && /* @__PURE__ */ jsx("span", { className: classMap.icon, children: item.icon }),
+                    item.icon && /* @__PURE__ */ jsx("span", { className: classMap.icon, "aria-hidden": "true", children: item.icon }),
                     item.label
                   ]
                 },
@@ -203,7 +240,7 @@ const BaseDropdown = ({
                   },
                   "data-testid": item["data-testid"],
                   children: [
-                    item.icon && /* @__PURE__ */ jsx("span", { className: classMap.icon, children: item.icon }),
+                    item.icon && /* @__PURE__ */ jsx("span", { className: classMap.icon, "aria-hidden": "true", children: item.icon }),
                     item.label
                   ]
                 },
@@ -216,6 +253,7 @@ const BaseDropdown = ({
     }
   );
 };
+BaseDropdown.displayName = "BaseDropdown";
 const classes = {
   wrapper: "dropdown",
   menu: "dropdown_menu",
@@ -239,4 +277,4 @@ const Dropdown = (props) => {
 export {
   Dropdown as D
 };
-//# sourceMappingURL=Dropdown-CPKkSeq2.js.map
+//# sourceMappingURL=Dropdown-Dzjmt9gx.js.map

package/dist/core/Dropdown-Dzjmt9gx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown-Dzjmt9gx.js","sources":["../../src/Icons/MenuIcon.tsx","../../src/components/Dropdown/DropdownBase.tsx","../../src/components/Dropdown/core/Dropdown.tsx"],"sourcesContent":["const MenuIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (\r\n  <svg\r\n    width=\"24px\"\r\n    height=\"24px\"\r\n    strokeWidth=\"1.5\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"none\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    color=\"currentColor\"\r\n    {...props}\r\n  >\r\n    <path\r\n      d=\"M3 5H21\"\r\n      stroke=\"currentColor\"\r\n      strokeWidth=\"1.5\"\r\n      strokeLinecap=\"round\"\r\n      strokeLinejoin=\"round\"\r\n    ></path>\r\n    <path\r\n      d=\"M3 12H21\"\r\n      stroke=\"currentColor\"\r\n      strokeWidth=\"1.5\"\r\n      strokeLinecap=\"round\"\r\n      strokeLinejoin=\"round\"\r\n    ></path>\r\n    <path\r\n      d=\"M3 19H21\"\r\n      stroke=\"currentColor\"\r\n      strokeWidth=\"1.5\"\r\n      strokeLinecap=\"round\"\r\n      strokeLinejoin=\"round\"\r\n    ></path>\r\n  </svg>\r\n);\r\n\r\nexport default MenuIcon;\r\n","import React, {\r\n  useState,\r\n  useRef,\r\n  useEffect,\r\n  useCallback,\r\n  KeyboardEvent,\r\n  useId,\r\n  JSX,\r\n  ComponentType,\r\n  useMemo,\r\n} from \"react\";\r\nimport { BaseDropdownProps, DropdownProps } from \"./Dropdown.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport MenuIcon from \"../../Icons/MenuIcon\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n  getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst BaseDropdown: React.FC<BaseDropdownProps> = ({\r\n  triggerIcon,\r\n  items,\r\n  align = \"right\",\r\n  className = \"\",\r\n  menuClassName = \"\",\r\n  ariaLabel = \"Dropdown menu\",\r\n  theme = getDefaultTheme(),\r\n  toggleRounding = getDefaultRounding(),\r\n  menuRounding = getDefaultRounding(),\r\n  toggleShadow = getDefaultShadow(),\r\n  menuShadow = getDefaultShadow(),\r\n  toggleOutline = false,\r\n  state = \"\",\r\n  \"data-testid\": testId = \"dropdown\",\r\n  IconButton,\r\n  classMap,\r\n}: BaseDropdownProps): JSX.Element => {\r\n  const [open, setOpen] = useState(false);\r\n  const [activeIndex, setActiveIndex] = useState<number>(-1);\r\n  const dropdownRef = useRef<HTMLDivElement>(null);\r\n  const menuRef = useRef<HTMLDivElement>(null);\r\n  const triggerRef = useRef<HTMLElement | null>(null);\r\n  const menuId = useId();\r\n\r\n  const Icon = triggerIcon ?? MenuIcon;\r\n\r\n  const toggleDropdown = () => setOpen((prev) => !prev);\r\n  const closeDropdown = () => {\r\n    setOpen(false);\r\n    setActiveIndex(-1);\r\n    triggerRef.current?.focus?.();\r\n  };\r\n\r\n  useEffect(() => {\r\n    if (!open) return;\r\n    const menuItems =\r\n      menuRef.current?.querySelectorAll<HTMLElement>('[role=\"menuitem\"]');\r\n    if (menuItems && menuItems.length > 0) {\r\n      setActiveIndex(0);\r\n    } else {\r\n      setActiveIndex(-1);\r\n    }\r\n  }, [open]);\r\n\r\n  useEffect(() => {\r\n    if (!open || activeIndex < 0) return;\r\n    const menuItems =\r\n      menuRef.current?.querySelectorAll<HTMLElement>('[role=\"menuitem\"]');\r\n    menuItems?.[activeIndex]?.focus();\r\n  }, [activeIndex, open]);\r\n\r\n  useEffect(() => {\r\n    const handleClickOutside = (e: MouseEvent) => {\r\n      if (\r\n        dropdownRef.current &&\r\n        !dropdownRef.current.contains(e.target as Node)\r\n      ) {\r\n        closeDropdown();\r\n      }\r\n    };\r\n    document.addEventListener(\"mousedown\", handleClickOutside);\r\n\r\n    if (open && menuRef.current) {\r\n      const rect = menuRef.current.getBoundingClientRect();\r\n      const right = rect.right > window.innerWidth;\r\n      const left = rect.left < 0;\r\n      if (right) {\r\n        menuRef.current.setAttribute(\"data-overflow-right\", \"true\");\r\n        menuRef.current.removeAttribute(\"data-overflow-left\");\r\n      } else if (left) {\r\n        menuRef.current.setAttribute(\"data-overflow-left\", \"true\");\r\n        menuRef.current.removeAttribute(\"data-overflow-right\");\r\n      } else {\r\n        menuRef.current.removeAttribute(\"data-overflow-right\");\r\n        menuRef.current.removeAttribute(\"data-overflow-left\");\r\n      }\r\n    }\r\n\r\n    return () => document.removeEventListener(\"mousedown\", handleClickOutside);\r\n  }, [open]);\r\n\r\n  const handleKeyDown = useCallback(\r\n    (e: KeyboardEvent<HTMLDivElement>) => {\r\n      if (!open) return;\r\n\r\n      const len = items.length;\r\n      const hasItems = len > 0;\r\n\r\n      if (e.key === \"Escape\") {\r\n        e.preventDefault();\r\n        closeDropdown();\r\n        return;\r\n      }\r\n      if (e.key === \"Tab\") {\r\n        closeDropdown();\r\n        return;\r\n      }\r\n\r\n      if (!hasItems) return;\r\n\r\n      if (e.key === \"ArrowDown\") {\r\n        e.preventDefault();\r\n        setActiveIndex((prev) => (prev < 0 ? 0 : (prev + 1) % len));\r\n      } else if (e.key === \"ArrowUp\") {\r\n        e.preventDefault();\r\n        setActiveIndex((prev) => (prev < 0 ? len - 1 : (prev - 1 + len) % len));\r\n      } else if (e.key === \"Home\") {\r\n        e.preventDefault();\r\n        setActiveIndex(0);\r\n      } else if (e.key === \"End\") {\r\n        e.preventDefault();\r\n        setActiveIndex(len - 1);\r\n      } else if ((e.key === \"Enter\" || e.key === \" \") && activeIndex >= 0) {\r\n        const item = items[activeIndex];\r\n        if (item) {\r\n          item.onClick?.();\r\n          closeDropdown();\r\n        }\r\n      }\r\n    },\r\n    [open, items, activeIndex]\r\n  );\r\n\r\n  const menuClassNames = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.menu,\r\n        align === \"right\" ? classMap.alignRight : classMap.alignLeft,\r\n        menuShadow && classMap[`shadow${capitalize(menuShadow)}`],\r\n        menuRounding && classMap[`round${capitalize(menuRounding)}`],\r\n        menuClassName\r\n      ),\r\n    [classMap, align, menuShadow, menuRounding, menuClassName]\r\n  );\r\n\r\n  return (\r\n    <div\r\n      ref={dropdownRef}\r\n      className={combineClassNames(classMap.wrapper, className)}\r\n      onKeyDown={handleKeyDown}\r\n      data-testid={testId}\r\n    >\r\n      <IconButton\r\n        ref={triggerRef as any}\r\n        icon={Icon}\r\n        ariaLabel={ariaLabel}\r\n        aria-haspopup=\"menu\"\r\n        aria-expanded={open}\r\n        aria-controls={menuId}\r\n        rounding={toggleRounding}\r\n        shadow={toggleShadow}\r\n        outline={toggleOutline}\r\n        theme={theme}\r\n        state={state}\r\n        onClick={toggleDropdown}\r\n        data-testid={`${testId}-trigger`}\r\n      />\r\n\r\n      {open && (\r\n        <div\r\n          id={menuId}\r\n          ref={menuRef}\r\n          role=\"menu\"\r\n          aria-label={ariaLabel}\r\n          aria-orientation=\"vertical\"\r\n          className={menuClassNames}\r\n          data-testid={`${testId}-menu`}\r\n        >\r\n          {items.map((item, index) =>\r\n            item.href ? (\r\n              <a\r\n                key={index}\r\n                href={item.href}\r\n                className={classMap.item}\r\n                role=\"menuitem\"\r\n                tabIndex={-1}\r\n                onClick={() => {\r\n                  item.onClick?.();\r\n                  closeDropdown();\r\n                }}\r\n                data-testid={item[\"data-testid\"]}\r\n              >\r\n                {item.icon && (\r\n                  <span className={classMap.icon} aria-hidden=\"true\">\r\n                    {item.icon}\r\n                  </span>\r\n                )}\r\n                {item.label}\r\n              </a>\r\n            ) : (\r\n              <button\r\n                key={index}\r\n                type=\"button\"\r\n                role=\"menuitem\"\r\n                tabIndex={-1}\r\n                className={classMap.item}\r\n                onClick={() => {\r\n                  item.onClick?.();\r\n                  closeDropdown();\r\n                }}\r\n                data-testid={item[\"data-testid\"]}\r\n              >\r\n                {item.icon && (\r\n                  <span className={classMap.icon} aria-hidden=\"true\">\r\n                    {item.icon}\r\n                  </span>\r\n                )}\r\n                {item.label}\r\n              </button>\r\n            )\r\n          )}\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\nBaseDropdown.displayName = \"BaseDropdown\";\r\nexport default BaseDropdown;\r\n","import React from \"react\";\r\nimport BaseDropdown from \"../DropdownBase\";\r\nimport { DropdownProps } from \"../Dropdown.types\";\r\nimport { IconButton } from \"@/index.core\";\r\nimport \"./Dropdown.scss\";\r\n\r\nconst classes = {\r\n  wrapper: \"dropdown\",\r\n  menu: \"dropdown_menu\",\r\n  item: \"dropdown_item\",\r\n  icon: \"dropdown_icon\",\r\n\r\n  alignRight: \"dropdown_menu_right\",\r\n  alignLeft: \"dropdown_menu_left\",\r\n\r\n  shadowNone: \"menu_shadow-None\",\r\n  shadowLight: \"menu_shadow-Light\",\r\n  shadowMedium: \"menu_shadow-Medium\",\r\n  shadowStrong: \"menu_shadow-Strong\",\r\n  shadowIntense: \"menu_shadow-Intense\",\r\n\r\n  roundNone: \"menu_round-None\",\r\n  roundSmall: \"menu_round-Small\",\r\n  roundMedium: \"menu_round-Medium\",\r\n  roundLarge: \"menu_round-Large\",\r\n};\r\n\r\nconst Dropdown: React.FC<DropdownProps> = (props) => {\r\n  return <BaseDropdown {...props} IconButton={IconButton} classMap={classes} />;\r\n};\r\n\r\nexport default Dropdown;\r\n"],"names":["IconButton"],"mappings":"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"}

package/dist/core/Dropdown.cjs.js

@@ -1,4 +1,4 @@
 "use strict";
-const Dropdown = require("./Dropdown-iTrhrEMO.cjs");
+const Dropdown = require("./Dropdown-CJo6T9__.cjs");
 module.exports = Dropdown.Dropdown;
 //# sourceMappingURL=Dropdown.cjs.js.map

package/dist/core/Dropdown.js

@@ -1,4 +1,4 @@
-import { D } from "./Dropdown-CPKkSeq2.js";
+import { D } from "./Dropdown-Dzjmt9gx.js";
 export {
   D as default
 };

package/dist/core/{EmptyState-C0TYr_9h.cjs → EmptyState-1ZbzRKLl.cjs}

@@ -5,7 +5,7 @@ const classNames = require("./classNames-BcWMx052.cjs");
 const capitalize = require("./capitalize-DoV-nOmN.cjs");
 const borealStyleConfig = require("./boreal-style-config-Rr5d5Qts.cjs");
 ;/* empty css                   */
-const Button = require("./Button-BnyCKkUs.cjs");
+const Button = require("./Button-CD1ETVvS.cjs");
 const BaseEmptyState = ({
   icon: Icon,
   title = "Nothing Here Yet",
@@ -23,8 +23,9 @@ const BaseEmptyState = ({
   Button: Button2,
   classMap
 }) => {
-  const titleId = `${testId}-title`;
-  const descId = `${testId}-message`;
+  const uid = React.useId();
+  const titleId = `${testId}-title-${uid}`;
+  const descId = message ? `${testId}-message-${uid}` : void 0;
   const sectionClassNames = React.useMemo(
     () => classNames.combineClassNames(
       classMap.empty_state,
@@ -38,7 +39,8 @@ const BaseEmptyState = ({
     ),
     [classMap, rounding, shadow, size, state, theme, outline, className]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  const buttonAriaLabel = typeof actionLabel === "string" ? void 0 : "Perform action";
+  return title ? /* @__PURE__ */ jsxRuntime.jsxs(
     "section",
     {
       className: sectionClassNames,
@@ -47,7 +49,7 @@ const BaseEmptyState = ({
       "aria-describedby": descId,
       "data-testid": testId,
       children: [
-        Icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classMap.icon, "data-testid": `${testId}-icon`, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { "aria-hidden": "true" }) }),
+        Icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classMap.icon, "data-testid": `${testId}-icon`, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { "aria-hidden": "true", focusable: false }) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "h2",
           {
@@ -57,7 +59,37 @@ const BaseEmptyState = ({
             children: title
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        message && /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            id: descId,
+            className: classMap.message,
+            "data-testid": `${testId}-message`,
+            children: message
+          }
+        ),
+        actionLabel && onActionClick && /* @__PURE__ */ jsxRuntime.jsx(
+          Button2,
+          {
+            theme: "clear",
+            outline,
+            onClick: onActionClick,
+            "aria-label": buttonAriaLabel,
+            "data-testid": `${testId}-action`,
+            children: actionLabel
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      className: sectionClassNames,
+      "aria-describedby": descId,
+      "data-testid": testId,
+      children: [
+        Icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classMap.icon, "data-testid": `${testId}-icon`, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { "aria-hidden": "true", focusable: false }) }),
+        message && /* @__PURE__ */ jsxRuntime.jsx(
           "p",
           {
             id: descId,
@@ -72,7 +104,7 @@ const BaseEmptyState = ({
             theme: "clear",
             outline,
             onClick: onActionClick,
-            "aria-label": typeof actionLabel === "string" ? actionLabel : "Perform action",
+            "aria-label": buttonAriaLabel,
             "data-testid": `${testId}-action`,
             children: actionLabel
           }
@@ -81,6 +113,7 @@ const BaseEmptyState = ({
     }
   );
 };
+BaseEmptyState.displayName = "BaseEmptyState";
 const classes = {
   empty_state: "empty_state",
   title: "empty_state_title",
@@ -115,4 +148,4 @@ const EmptyState = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(BaseEmptyState, { ...props, Button: Button.Button, classMap: classes });
 };
 exports.EmptyState = EmptyState;
-//# sourceMappingURL=EmptyState-C0TYr_9h.cjs.map
+//# sourceMappingURL=EmptyState-1ZbzRKLl.cjs.map