boreal-ui 0.0.34 → 0.0.36

package/dist/core/ThemeProvider.js

@@ -1,4 +1,4 @@
-import { a, T } from "./ThemeContext-DJ18CFaV.js";
+import { a, T } from "./ThemeContext-DSYDwr2m.js";
 export {
   a as ThemeContext,
   T as ThemeProvider

package/dist/core/{Timeline-D7fd8-u_.js → Timeline-BfJd6flB.js}

@@ -20,7 +20,7 @@ const TimelineBase = ({
       classMap[theme],
       className
     ),
-    [classMap, orientation, theme, shadow, rounding]
+    [classMap, orientation, theme, className]
   );
   const itemClassName = useMemo(
     () => combineClassNames(classMap.item, classMap[orientation], classMap[theme]),
@@ -33,7 +33,7 @@ const TimelineBase = ({
       classMap[orientation],
       shadow && classMap[`shadow${capitalize(shadow)}`]
     ),
-    [classMap, orientation, theme, shadow]
+    [classMap, theme, orientation, shadow]
   );
   const contentClassName = useMemo(
     () => combineClassNames(
@@ -44,29 +44,42 @@ const TimelineBase = ({
     ),
     [classMap, orientation, shadow, rounding]
   );
+  const setSize = items.length;
   return /* @__PURE__ */ jsx("ul", { className: outerWrapper, "data-testid": testId, "aria-label": "Timeline", children: items.map((item, index) => {
     const IconComponent = item.icon;
     const itemTestId = `${testId}-item-${index}`;
     const labelId = `${itemTestId}-title`;
+    const hasTitle = Boolean(item.title);
+    let dateTimeAttr;
+    if (item.date) {
+      const dateObj = new Date(item.date);
+      if (!isNaN(dateObj.getTime())) {
+        dateTimeAttr = dateObj.toISOString();
+      }
+    }
     return /* @__PURE__ */ jsxs(
       "li",
       {
         className: itemClassName,
         "data-testid": itemTestId,
-        "aria-labelledby": labelId,
+        "aria-labelledby": hasTitle ? labelId : void 0,
+        "aria-label": !hasTitle ? `Timeline item ${index + 1}` : void 0,
+        "aria-posinset": index + 1,
+        "aria-setsize": setSize,
         children: [
           /* @__PURE__ */ jsx(
             "div",
             {
               className: markerClassName,
               "data-testid": `${itemTestId}-marker`,
-              "aria-hidden": IconComponent ? "true" : void 0,
+              "aria-hidden": true,
               children: IconComponent ? /* @__PURE__ */ jsx(
                 "div",
                 {
                   className: classMap.icon,
                   "data-testid": `${itemTestId}-icon`,
-                  children: /* @__PURE__ */ jsx(IconComponent, {})
+                  "aria-hidden": true,
+                  children: /* @__PURE__ */ jsx(IconComponent, { "aria-hidden": "true" })
                 }
               ) : /* @__PURE__ */ jsx(
                 "div",
@@ -84,16 +97,8 @@ const TimelineBase = ({
               className: contentClassName,
               "data-testid": `${itemTestId}-content`,
               children: [
-                /* @__PURE__ */ jsx("h3", { id: labelId, className: classMap.title, children: item.title }),
-                item.date && /* @__PURE__ */ jsx(
-                  "p",
-                  {
-                    className: classMap.date,
-                    "data-testid": `${itemTestId}-date`,
-                    "aria-label": `Date: ${item.date}`,
-                    children: item.date
-                  }
-                ),
+                hasTitle && /* @__PURE__ */ jsx("h3", { id: labelId, className: classMap.title, children: item.title }),
+                item.date && /* @__PURE__ */ jsx("p", { className: classMap.date, "data-testid": `${itemTestId}-date`, children: /* @__PURE__ */ jsx("time", { dateTime: dateTimeAttr, children: item.date }) }),
                 item.description && /* @__PURE__ */ jsx(
                   "p",
                   {
@@ -111,6 +116,7 @@ const TimelineBase = ({
     );
   }) });
 };
+TimelineBase.displayName = "TimelineBase";
 const classes = {
   timeline: "timeline",
   item: "timeline_item",
@@ -144,4 +150,4 @@ const Timeline = (props) => {
 export {
   Timeline as T
 };
-//# sourceMappingURL=Timeline-D7fd8-u_.js.map
+//# sourceMappingURL=Timeline-BfJd6flB.js.map

package/dist/core/Timeline-BfJd6flB.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline-BfJd6flB.js","sources":["../../src/components/Timeline/TimelineBase.tsx","../../src/components/Timeline/core/Timeline.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\r\nimport { TimelineProps } from \"./Timeline.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\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 TimelineBase: React.FC<\r\n  TimelineProps & { classMap: Record<string, string> }\r\n> = ({\r\n  items,\r\n  orientation = \"vertical\",\r\n  theme = getDefaultTheme(),\r\n  rounding = getDefaultRounding(),\r\n  shadow = getDefaultShadow(),\r\n  classMap,\r\n  className,\r\n  \"data-testid\": testId = \"timeline\",\r\n}) => {\r\n  const outerWrapper = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.timeline,\r\n        classMap[orientation],\r\n        classMap[theme],\r\n        className\r\n      ),\r\n    [classMap, orientation, theme, className]\r\n  );\r\n\r\n  const itemClassName = useMemo(\r\n    () =>\r\n      combineClassNames(classMap.item, classMap[orientation], classMap[theme]),\r\n    [classMap, orientation, theme]\r\n  );\r\n\r\n  const markerClassName = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.marker,\r\n        classMap[theme],\r\n        classMap[orientation],\r\n        shadow && classMap[`shadow${capitalize(shadow)}`]\r\n      ),\r\n    [classMap, theme, orientation, shadow]\r\n  );\r\n\r\n  const contentClassName = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.content,\r\n        classMap[orientation],\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        rounding && classMap[`round${capitalize(rounding)}`]\r\n      ),\r\n    [classMap, orientation, shadow, rounding]\r\n  );\r\n\r\n  const setSize = items.length;\r\n\r\n  return (\r\n    <ul className={outerWrapper} data-testid={testId} aria-label=\"Timeline\">\r\n      {items.map((item, index) => {\r\n        const IconComponent = item.icon;\r\n        const itemTestId = `${testId}-item-${index}`;\r\n        const labelId = `${itemTestId}-title`;\r\n        const hasTitle = Boolean(item.title);\r\n\r\n        let dateTimeAttr: string | undefined;\r\n        if (item.date) {\r\n          const dateObj = new Date(item.date);\r\n          if (!isNaN(dateObj.getTime())) {\r\n            dateTimeAttr = dateObj.toISOString();\r\n          }\r\n        }\r\n\r\n        return (\r\n          <li\r\n            key={index}\r\n            className={itemClassName}\r\n            data-testid={itemTestId}\r\n            aria-labelledby={hasTitle ? labelId : undefined}\r\n            aria-label={!hasTitle ? `Timeline item ${index + 1}` : undefined}\r\n            aria-posinset={index + 1}\r\n            aria-setsize={setSize}\r\n          >\r\n            <div\r\n              className={markerClassName}\r\n              data-testid={`${itemTestId}-marker`}\r\n              aria-hidden={true}\r\n            >\r\n              {IconComponent ? (\r\n                <div\r\n                  className={classMap.icon}\r\n                  data-testid={`${itemTestId}-icon`}\r\n                  aria-hidden={true}\r\n                >\r\n                  <IconComponent aria-hidden=\"true\" />\r\n                </div>\r\n              ) : (\r\n                <div\r\n                  className={classMap.dot}\r\n                  data-testid={`${itemTestId}-dot`}\r\n                  aria-hidden=\"true\"\r\n                />\r\n              )}\r\n            </div>\r\n\r\n            <div\r\n              className={contentClassName}\r\n              data-testid={`${itemTestId}-content`}\r\n            >\r\n              {hasTitle && (\r\n                <h3 id={labelId} className={classMap.title}>\r\n                  {item.title}\r\n                </h3>\r\n              )}\r\n\r\n              {item.date && (\r\n                <p className={classMap.date} data-testid={`${itemTestId}-date`}>\r\n                  <time dateTime={dateTimeAttr}>{item.date}</time>\r\n                </p>\r\n              )}\r\n\r\n              {item.description && (\r\n                <p\r\n                  className={classMap.description}\r\n                  data-testid={`${itemTestId}-description`}\r\n                >\r\n                  {item.description}\r\n                </p>\r\n              )}\r\n            </div>\r\n          </li>\r\n        );\r\n      })}\r\n    </ul>\r\n  );\r\n};\r\n\r\nTimelineBase.displayName = \"TimelineBase\";\r\nexport default TimelineBase;\r\n","import React from \"react\";\r\nimport \"./Timeline.scss\";\r\nimport TimelineBase from \"../TimelineBase\";\r\nimport { TimelineProps } from \"../Timeline.types\";\r\n\r\nconst classes = {\r\n  timeline: \"timeline\",\r\n  item: \"timeline_item\",\r\n  marker: \"timeline_marker\",\r\n  icon: \"timeline_icon\",\r\n  dot: \"timeline_dot\",\r\n  content: \"timeline_content\",\r\n  title: \"timeline_title\",\r\n  date: \"timeline_date\",\r\n  description: \"timeline_description\",\r\n\r\n  vertical: \"timeline_vertical\",\r\n  horizontal: \"timeline_horizontal\",\r\n\r\n  primary: \"timeline_primary\",\r\n  secondary: \"timeline_secondary\",\r\n  tertiary: \"timeline_tertiary\",\r\n  quaternary: \"timeline_quaternary\",\r\n\r\n  clear: \"timeline_clear\",\r\n\r\n  shadowNone: \"timeline_shadow-None\",\r\n  shadowLight: \"timeline_shadow-Light\",\r\n  shadowMedium: \"timeline_shadow-Medium\",\r\n  shadowStrong: \"timeline_shadow-Strong\",\r\n  shadowIntense: \"timeline_shadow-Intense\",\r\n\r\n  roundNone: \"timeline_round-None\",\r\n  roundSmall: \"timeline_round-Small\",\r\n  roundMedium: \"timeline_round-Medium\",\r\n  roundLarge: \"timeline_round-Large\",\r\n};\r\n\r\nconst Timeline: React.FC<TimelineProps> = (props) => {\r\n  return <TimelineBase {...props} classMap={classes} />;\r\n};\r\n\r\nexport default Timeline;\r\n"],"names":[],"mappings":"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"}

package/dist/core/{Timeline-Dk0q-8BZ.cjs → Timeline-Bmnr7xnx.cjs}

@@ -21,7 +21,7 @@ const TimelineBase = ({
       classMap[theme],
       className
     ),
-    [classMap, orientation, theme, shadow, rounding]
+    [classMap, orientation, theme, className]
   );
   const itemClassName = React.useMemo(
     () => classNames.combineClassNames(classMap.item, classMap[orientation], classMap[theme]),
@@ -34,7 +34,7 @@ const TimelineBase = ({
       classMap[orientation],
       shadow && classMap[`shadow${capitalize.capitalize(shadow)}`]
     ),
-    [classMap, orientation, theme, shadow]
+    [classMap, theme, orientation, shadow]
   );
   const contentClassName = React.useMemo(
     () => classNames.combineClassNames(
@@ -45,29 +45,42 @@ const TimelineBase = ({
     ),
     [classMap, orientation, shadow, rounding]
   );
+  const setSize = items.length;
   return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: outerWrapper, "data-testid": testId, "aria-label": "Timeline", children: items.map((item, index) => {
     const IconComponent = item.icon;
     const itemTestId = `${testId}-item-${index}`;
     const labelId = `${itemTestId}-title`;
+    const hasTitle = Boolean(item.title);
+    let dateTimeAttr;
+    if (item.date) {
+      const dateObj = new Date(item.date);
+      if (!isNaN(dateObj.getTime())) {
+        dateTimeAttr = dateObj.toISOString();
+      }
+    }
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "li",
       {
         className: itemClassName,
         "data-testid": itemTestId,
-        "aria-labelledby": labelId,
+        "aria-labelledby": hasTitle ? labelId : void 0,
+        "aria-label": !hasTitle ? `Timeline item ${index + 1}` : void 0,
+        "aria-posinset": index + 1,
+        "aria-setsize": setSize,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               className: markerClassName,
               "data-testid": `${itemTestId}-marker`,
-              "aria-hidden": IconComponent ? "true" : void 0,
+              "aria-hidden": true,
               children: IconComponent ? /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
                   className: classMap.icon,
                   "data-testid": `${itemTestId}-icon`,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
+                  "aria-hidden": true,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { "aria-hidden": "true" })
                 }
               ) : /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
@@ -85,16 +98,8 @@ const TimelineBase = ({
               className: contentClassName,
               "data-testid": `${itemTestId}-content`,
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx("h3", { id: labelId, className: classMap.title, children: item.title }),
-                item.date && /* @__PURE__ */ jsxRuntime.jsx(
-                  "p",
-                  {
-                    className: classMap.date,
-                    "data-testid": `${itemTestId}-date`,
-                    "aria-label": `Date: ${item.date}`,
-                    children: item.date
-                  }
-                ),
+                hasTitle && /* @__PURE__ */ jsxRuntime.jsx("h3", { id: labelId, className: classMap.title, children: item.title }),
+                item.date && /* @__PURE__ */ jsxRuntime.jsx("p", { className: classMap.date, "data-testid": `${itemTestId}-date`, children: /* @__PURE__ */ jsxRuntime.jsx("time", { dateTime: dateTimeAttr, children: item.date }) }),
                 item.description && /* @__PURE__ */ jsxRuntime.jsx(
                   "p",
                   {
@@ -112,6 +117,7 @@ const TimelineBase = ({
     );
   }) });
 };
+TimelineBase.displayName = "TimelineBase";
 const classes = {
   timeline: "timeline",
   item: "timeline_item",
@@ -143,4 +149,4 @@ const Timeline = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(TimelineBase, { ...props, classMap: classes });
 };
 exports.Timeline = Timeline;
-//# sourceMappingURL=Timeline-Dk0q-8BZ.cjs.map
+//# sourceMappingURL=Timeline-Bmnr7xnx.cjs.map

package/dist/core/Timeline-Bmnr7xnx.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline-Bmnr7xnx.cjs","sources":["../../src/components/Timeline/TimelineBase.tsx","../../src/components/Timeline/core/Timeline.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\r\nimport { TimelineProps } from \"./Timeline.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\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 TimelineBase: React.FC<\r\n  TimelineProps & { classMap: Record<string, string> }\r\n> = ({\r\n  items,\r\n  orientation = \"vertical\",\r\n  theme = getDefaultTheme(),\r\n  rounding = getDefaultRounding(),\r\n  shadow = getDefaultShadow(),\r\n  classMap,\r\n  className,\r\n  \"data-testid\": testId = \"timeline\",\r\n}) => {\r\n  const outerWrapper = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.timeline,\r\n        classMap[orientation],\r\n        classMap[theme],\r\n        className\r\n      ),\r\n    [classMap, orientation, theme, className]\r\n  );\r\n\r\n  const itemClassName = useMemo(\r\n    () =>\r\n      combineClassNames(classMap.item, classMap[orientation], classMap[theme]),\r\n    [classMap, orientation, theme]\r\n  );\r\n\r\n  const markerClassName = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.marker,\r\n        classMap[theme],\r\n        classMap[orientation],\r\n        shadow && classMap[`shadow${capitalize(shadow)}`]\r\n      ),\r\n    [classMap, theme, orientation, shadow]\r\n  );\r\n\r\n  const contentClassName = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.content,\r\n        classMap[orientation],\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        rounding && classMap[`round${capitalize(rounding)}`]\r\n      ),\r\n    [classMap, orientation, shadow, rounding]\r\n  );\r\n\r\n  const setSize = items.length;\r\n\r\n  return (\r\n    <ul className={outerWrapper} data-testid={testId} aria-label=\"Timeline\">\r\n      {items.map((item, index) => {\r\n        const IconComponent = item.icon;\r\n        const itemTestId = `${testId}-item-${index}`;\r\n        const labelId = `${itemTestId}-title`;\r\n        const hasTitle = Boolean(item.title);\r\n\r\n        let dateTimeAttr: string | undefined;\r\n        if (item.date) {\r\n          const dateObj = new Date(item.date);\r\n          if (!isNaN(dateObj.getTime())) {\r\n            dateTimeAttr = dateObj.toISOString();\r\n          }\r\n        }\r\n\r\n        return (\r\n          <li\r\n            key={index}\r\n            className={itemClassName}\r\n            data-testid={itemTestId}\r\n            aria-labelledby={hasTitle ? labelId : undefined}\r\n            aria-label={!hasTitle ? `Timeline item ${index + 1}` : undefined}\r\n            aria-posinset={index + 1}\r\n            aria-setsize={setSize}\r\n          >\r\n            <div\r\n              className={markerClassName}\r\n              data-testid={`${itemTestId}-marker`}\r\n              aria-hidden={true}\r\n            >\r\n              {IconComponent ? (\r\n                <div\r\n                  className={classMap.icon}\r\n                  data-testid={`${itemTestId}-icon`}\r\n                  aria-hidden={true}\r\n                >\r\n                  <IconComponent aria-hidden=\"true\" />\r\n                </div>\r\n              ) : (\r\n                <div\r\n                  className={classMap.dot}\r\n                  data-testid={`${itemTestId}-dot`}\r\n                  aria-hidden=\"true\"\r\n                />\r\n              )}\r\n            </div>\r\n\r\n            <div\r\n              className={contentClassName}\r\n              data-testid={`${itemTestId}-content`}\r\n            >\r\n              {hasTitle && (\r\n                <h3 id={labelId} className={classMap.title}>\r\n                  {item.title}\r\n                </h3>\r\n              )}\r\n\r\n              {item.date && (\r\n                <p className={classMap.date} data-testid={`${itemTestId}-date`}>\r\n                  <time dateTime={dateTimeAttr}>{item.date}</time>\r\n                </p>\r\n              )}\r\n\r\n              {item.description && (\r\n                <p\r\n                  className={classMap.description}\r\n                  data-testid={`${itemTestId}-description`}\r\n                >\r\n                  {item.description}\r\n                </p>\r\n              )}\r\n            </div>\r\n          </li>\r\n        );\r\n      })}\r\n    </ul>\r\n  );\r\n};\r\n\r\nTimelineBase.displayName = \"TimelineBase\";\r\nexport default TimelineBase;\r\n","import React from \"react\";\r\nimport \"./Timeline.scss\";\r\nimport TimelineBase from \"../TimelineBase\";\r\nimport { TimelineProps } from \"../Timeline.types\";\r\n\r\nconst classes = {\r\n  timeline: \"timeline\",\r\n  item: \"timeline_item\",\r\n  marker: \"timeline_marker\",\r\n  icon: \"timeline_icon\",\r\n  dot: \"timeline_dot\",\r\n  content: \"timeline_content\",\r\n  title: \"timeline_title\",\r\n  date: \"timeline_date\",\r\n  description: \"timeline_description\",\r\n\r\n  vertical: \"timeline_vertical\",\r\n  horizontal: \"timeline_horizontal\",\r\n\r\n  primary: \"timeline_primary\",\r\n  secondary: \"timeline_secondary\",\r\n  tertiary: \"timeline_tertiary\",\r\n  quaternary: \"timeline_quaternary\",\r\n\r\n  clear: \"timeline_clear\",\r\n\r\n  shadowNone: \"timeline_shadow-None\",\r\n  shadowLight: \"timeline_shadow-Light\",\r\n  shadowMedium: \"timeline_shadow-Medium\",\r\n  shadowStrong: \"timeline_shadow-Strong\",\r\n  shadowIntense: \"timeline_shadow-Intense\",\r\n\r\n  roundNone: \"timeline_round-None\",\r\n  roundSmall: \"timeline_round-Small\",\r\n  roundMedium: \"timeline_round-Medium\",\r\n  roundLarge: \"timeline_round-Large\",\r\n};\r\n\r\nconst Timeline: React.FC<TimelineProps> = (props) => {\r\n  return <TimelineBase {...props} classMap={classes} />;\r\n};\r\n\r\nexport default Timeline;\r\n"],"names":["getDefaultTheme","getDefaultRounding","getDefaultShadow","useMemo","combineClassNames","capitalize","jsx","jsxs"],"mappings":"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"}

package/dist/core/Timeline.cjs.js

@@ -1,4 +1,4 @@
 "use strict";
-const Timeline = require("./Timeline-Dk0q-8BZ.cjs");
+const Timeline = require("./Timeline-Bmnr7xnx.cjs");
 module.exports = Timeline.Timeline;
 //# sourceMappingURL=Timeline.cjs.js.map

package/dist/core/Timeline.js

@@ -1,4 +1,4 @@
-import { T } from "./Timeline-D7fd8-u_.js";
+import { T } from "./Timeline-BfJd6flB.js";
 export {
   T as default
 };

package/dist/core/{Toggle-v31rt4Ya.cjs → Toggle-Dor7IEx3.cjs}

@@ -19,13 +19,29 @@ const ToggleBase = React.forwardRef(
     className,
     "data-testid": testId = "toggle"
   }, ref) => {
-    const handleToggle = () => {
-      if (!disabled) onChange(!checked);
+    const uid = React.useId();
+    const buttonId = `${testId}-button-${uid}`;
+    const labelId = label ? `${testId}-label-${uid}` : void 0;
+    const setOn = (next) => {
+      if (!disabled && next !== checked) onChange(next);
     };
+    const toggle = () => setOn(!checked);
     const handleKeyDown = (e) => {
-      if ((e.key === "Enter" || e.key === " ") && !disabled) {
-        e.preventDefault();
-        handleToggle();
+      if (disabled) return;
+      switch (e.key) {
+        case " ":
+        case "Enter":
+          e.preventDefault();
+          toggle();
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          setOn(true);
+          break;
+        case "ArrowLeft":
+          e.preventDefault();
+          setOn(false);
+          break;
       }
     };
     const containerClass = React.useMemo(
@@ -34,11 +50,10 @@ const ToggleBase = React.forwardRef(
         classMap[theme],
         classMap[state],
         classMap[size],
-        rounding && classMap[`round${capitalize.capitalize(rounding)}`],
         disabled && classMap.disabled,
         className
       ),
-      [classMap, size, disabled, shadow, rounding, theme, state]
+      [classMap, theme, state, size, disabled, className]
     );
     const toggleClass = React.useMemo(
       () => classNames.combineClassNames(
@@ -47,33 +62,39 @@ const ToggleBase = React.forwardRef(
         shadow && classMap[`shadow${capitalize.capitalize(shadow)}`],
         rounding && classMap[`round${capitalize.capitalize(rounding)}`]
       ),
-      [classMap, checked, rounding]
+      [classMap, checked, shadow, rounding]
     );
-    const labelId = label ? `${testId}-label` : void 0;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClass, "data-testid": `${testId}-wrapper`, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           ref,
-          id: `${testId}-button`,
+          id: buttonId,
           className: toggleClass,
           role: "switch",
           "aria-checked": checked,
-          "aria-labelledby": labelId,
+          "aria-labelledby": label ? labelId : void 0,
           "aria-label": label ? void 0 : "Toggle switch",
           type: "button",
           disabled,
-          onClick: handleToggle,
+          onClick: toggle,
           onKeyDown: handleKeyDown,
           "data-testid": testId,
-          children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: classMap.slider, "data-testid": `${testId}-slider` })
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: classMap.slider,
+              "aria-hidden": "true",
+              "data-testid": `${testId}-slider`
+            }
+          )
         }
       ),
       label && /* @__PURE__ */ jsxRuntime.jsx(
         "label",
         {
           id: labelId,
-          htmlFor: `${testId}-button`,
+          htmlFor: buttonId,
           className: classMap.label,
           "data-testid": `${testId}-label`,
           children: label
@@ -117,4 +138,4 @@ const Toggle = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(ToggleBase, { ...props, classMap: classes });
 };
 exports.Toggle = Toggle;
-//# sourceMappingURL=Toggle-v31rt4Ya.cjs.map
+//# sourceMappingURL=Toggle-Dor7IEx3.cjs.map

package/dist/core/Toggle-Dor7IEx3.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle-Dor7IEx3.cjs","sources":["../../src/components/Toggle/ToggleBase.tsx","../../src/components/Toggle/core/Toggle.tsx"],"sourcesContent":["import { forwardRef, KeyboardEvent, useId, useMemo } from \"react\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { ToggleBaseProps } from \"./Toggle.types\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n  getDefaultSize,\r\n  getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst ToggleBase = forwardRef<HTMLButtonElement, ToggleBaseProps>(\r\n  (\r\n    {\r\n      checked,\r\n      onChange,\r\n      label,\r\n      theme = getDefaultTheme(),\r\n      rounding = getDefaultRounding(),\r\n      shadow = getDefaultShadow(),\r\n      state = \"\",\r\n      size = getDefaultSize(),\r\n      disabled = false,\r\n      classMap,\r\n      className,\r\n      \"data-testid\": testId = \"toggle\",\r\n    },\r\n    ref\r\n  ) => {\r\n    const uid = useId();\r\n    const buttonId = `${testId}-button-${uid}`;\r\n    const labelId = label ? `${testId}-label-${uid}` : undefined;\r\n\r\n    const setOn = (next: boolean) => {\r\n      if (!disabled && next !== checked) onChange(next);\r\n    };\r\n    const toggle = () => setOn(!checked);\r\n\r\n    const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\r\n      if (disabled) return;\r\n      switch (e.key) {\r\n        case \" \":\r\n        case \"Enter\":\r\n          e.preventDefault();\r\n          toggle();\r\n          break;\r\n        case \"ArrowRight\":\r\n          e.preventDefault();\r\n          setOn(true);\r\n          break;\r\n        case \"ArrowLeft\":\r\n          e.preventDefault();\r\n          setOn(false);\r\n          break;\r\n      }\r\n    };\r\n\r\n    const containerClass = useMemo(\r\n      () =>\r\n        combineClassNames(\r\n          classMap.container,\r\n          classMap[theme],\r\n          classMap[state],\r\n          classMap[size],\r\n          disabled && classMap.disabled,\r\n          className\r\n        ),\r\n      [classMap, theme, state, size, disabled, className]\r\n    );\r\n\r\n    const toggleClass = useMemo(\r\n      () =>\r\n        combineClassNames(\r\n          classMap.toggle,\r\n          checked && classMap.active,\r\n          shadow && classMap[`shadow${capitalize(shadow)}`],\r\n          rounding && classMap[`round${capitalize(rounding)}`]\r\n        ),\r\n      [classMap, checked, shadow, rounding]\r\n    );\r\n\r\n    return (\r\n      <div className={containerClass} data-testid={`${testId}-wrapper`}>\r\n        <button\r\n          ref={ref}\r\n          id={buttonId}\r\n          className={toggleClass}\r\n          role=\"switch\"\r\n          aria-checked={checked}\r\n          aria-labelledby={label ? labelId : undefined}\r\n          aria-label={label ? undefined : \"Toggle switch\"}\r\n          type=\"button\"\r\n          disabled={disabled}\r\n          onClick={toggle}\r\n          onKeyDown={handleKeyDown}\r\n          data-testid={testId}\r\n        >\r\n          <span\r\n            className={classMap.slider}\r\n            aria-hidden=\"true\"\r\n            data-testid={`${testId}-slider`}\r\n          />\r\n        </button>\r\n\r\n        {label && (\r\n          <label\r\n            id={labelId}\r\n            htmlFor={buttonId}\r\n            className={classMap.label}\r\n            data-testid={`${testId}-label`}\r\n          >\r\n            {label}\r\n          </label>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n);\r\n\r\nToggleBase.displayName = \"ToggleBase\";\r\nexport default ToggleBase;\r\n","import React from \"react\";\r\nimport \"./Toggle.scss\";\r\nimport ToggleBase from \"../ToggleBase\";\r\nimport { ToggleProps } from \"../Toggle.types\";\r\n\r\nconst classes = {\r\n  container: \"container\",\r\n  toggle: \"toggle\",\r\n  active: \"toggle_active\",\r\n  slider: \"toggle_slider\",\r\n  label: \"toggle_label\",\r\n\r\n  primary: \"toggle_primary\",\r\n  secondary: \"toggle_secondary\",\r\n  tertiary: \"toggle_tertiary\",\r\n  quaternary: \"toggle_quaternary\",\r\n\r\n  success: \"toggle_success\",\r\n  warning: \"toggle_warning\",\r\n  error: \"toggle_error\",\r\n\r\n  clear: \"toggle_clear\",\r\n\r\n  disabled: \"toggle_disabled\",\r\n\r\n  xs: \"toggle_xs\",\r\n  small: \"toggle_small\",\r\n  medium: \"toggle_medium\",\r\n  large: \"toggle_large\",\r\n  xl: \"toggle_xl\",\r\n\r\n  shadowNone: \"toggle_shadow-None\",\r\n  shadowLight: \"toggle_shadow-Light\",\r\n  shadowMedium: \"toggle_shadow-Medium\",\r\n  shadowStrong: \"toggle_shadow-Strong\",\r\n  shadowIntense: \"toggle_shadow-Intense\",\r\n\r\n  roundNone: \"toggle_round-None\",\r\n  roundSmall: \"toggle_round-Small\",\r\n  roundMedium: \"toggle_round-Medium\",\r\n  roundLarge: \"toggle_round-Large\",\r\n};\r\n\r\nconst Toggle: React.FC<ToggleProps> = (props) => {\r\n  return <ToggleBase {...props} classMap={classes} />;\r\n};\r\n\r\nexport default Toggle;\r\n"],"names":["forwardRef","getDefaultTheme","getDefaultRounding","getDefaultShadow","getDefaultSize","useId","useMemo","combineClassNames","capitalize","jsx"],"mappings":"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"}

package/dist/core/{Toggle-CZftIdc3.js → Toggle-sPyKNt4P.js}

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useMemo } from "react";
+import { forwardRef, useId, useMemo } from "react";
 import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
 import { c as capitalize } from "./capitalize-C0TSQSPh.js";
-import { a as getDefaultRounding, c as getDefaultSize, d as getDefaultTheme, b as getDefaultShadow } from "./boreal-style-config-BILmxkZG.js";
+import { c as getDefaultSize, d as getDefaultTheme, a as getDefaultRounding, b as getDefaultShadow } from "./boreal-style-config-BILmxkZG.js";
 const ToggleBase = forwardRef(
   ({
     checked,
@@ -18,13 +18,29 @@ const ToggleBase = forwardRef(
     className,
     "data-testid": testId = "toggle"
   }, ref) => {
-    const handleToggle = () => {
-      if (!disabled) onChange(!checked);
+    const uid = useId();
+    const buttonId = `${testId}-button-${uid}`;
+    const labelId = label ? `${testId}-label-${uid}` : void 0;
+    const setOn = (next) => {
+      if (!disabled && next !== checked) onChange(next);
     };
+    const toggle = () => setOn(!checked);
     const handleKeyDown = (e) => {
-      if ((e.key === "Enter" || e.key === " ") && !disabled) {
-        e.preventDefault();
-        handleToggle();
+      if (disabled) return;
+      switch (e.key) {
+        case " ":
+        case "Enter":
+          e.preventDefault();
+          toggle();
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          setOn(true);
+          break;
+        case "ArrowLeft":
+          e.preventDefault();
+          setOn(false);
+          break;
       }
     };
     const containerClass = useMemo(
@@ -33,11 +49,10 @@ const ToggleBase = forwardRef(
         classMap[theme],
         classMap[state],
         classMap[size],
-        rounding && classMap[`round${capitalize(rounding)}`],
         disabled && classMap.disabled,
         className
       ),
-      [classMap, size, disabled, shadow, rounding, theme, state]
+      [classMap, theme, state, size, disabled, className]
     );
     const toggleClass = useMemo(
       () => combineClassNames(
@@ -46,33 +61,39 @@ const ToggleBase = forwardRef(
         shadow && classMap[`shadow${capitalize(shadow)}`],
         rounding && classMap[`round${capitalize(rounding)}`]
       ),
-      [classMap, checked, rounding]
+      [classMap, checked, shadow, rounding]
     );
-    const labelId = label ? `${testId}-label` : void 0;
     return /* @__PURE__ */ jsxs("div", { className: containerClass, "data-testid": `${testId}-wrapper`, children: [
       /* @__PURE__ */ jsx(
         "button",
         {
           ref,
-          id: `${testId}-button`,
+          id: buttonId,
           className: toggleClass,
           role: "switch",
           "aria-checked": checked,
-          "aria-labelledby": labelId,
+          "aria-labelledby": label ? labelId : void 0,
           "aria-label": label ? void 0 : "Toggle switch",
           type: "button",
           disabled,
-          onClick: handleToggle,
+          onClick: toggle,
           onKeyDown: handleKeyDown,
           "data-testid": testId,
-          children: /* @__PURE__ */ jsx("span", { className: classMap.slider, "data-testid": `${testId}-slider` })
+          children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: classMap.slider,
+              "aria-hidden": "true",
+              "data-testid": `${testId}-slider`
+            }
+          )
         }
       ),
       label && /* @__PURE__ */ jsx(
         "label",
         {
           id: labelId,
-          htmlFor: `${testId}-button`,
+          htmlFor: buttonId,
           className: classMap.label,
           "data-testid": `${testId}-label`,
           children: label
@@ -118,4 +139,4 @@ const Toggle = (props) => {
 export {
   Toggle as T
 };
-//# sourceMappingURL=Toggle-CZftIdc3.js.map
+//# sourceMappingURL=Toggle-sPyKNt4P.js.map

package/dist/core/Toggle-sPyKNt4P.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle-sPyKNt4P.js","sources":["../../src/components/Toggle/ToggleBase.tsx","../../src/components/Toggle/core/Toggle.tsx"],"sourcesContent":["import { forwardRef, KeyboardEvent, useId, useMemo } from \"react\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { ToggleBaseProps } from \"./Toggle.types\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n  getDefaultSize,\r\n  getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst ToggleBase = forwardRef<HTMLButtonElement, ToggleBaseProps>(\r\n  (\r\n    {\r\n      checked,\r\n      onChange,\r\n      label,\r\n      theme = getDefaultTheme(),\r\n      rounding = getDefaultRounding(),\r\n      shadow = getDefaultShadow(),\r\n      state = \"\",\r\n      size = getDefaultSize(),\r\n      disabled = false,\r\n      classMap,\r\n      className,\r\n      \"data-testid\": testId = \"toggle\",\r\n    },\r\n    ref\r\n  ) => {\r\n    const uid = useId();\r\n    const buttonId = `${testId}-button-${uid}`;\r\n    const labelId = label ? `${testId}-label-${uid}` : undefined;\r\n\r\n    const setOn = (next: boolean) => {\r\n      if (!disabled && next !== checked) onChange(next);\r\n    };\r\n    const toggle = () => setOn(!checked);\r\n\r\n    const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\r\n      if (disabled) return;\r\n      switch (e.key) {\r\n        case \" \":\r\n        case \"Enter\":\r\n          e.preventDefault();\r\n          toggle();\r\n          break;\r\n        case \"ArrowRight\":\r\n          e.preventDefault();\r\n          setOn(true);\r\n          break;\r\n        case \"ArrowLeft\":\r\n          e.preventDefault();\r\n          setOn(false);\r\n          break;\r\n      }\r\n    };\r\n\r\n    const containerClass = useMemo(\r\n      () =>\r\n        combineClassNames(\r\n          classMap.container,\r\n          classMap[theme],\r\n          classMap[state],\r\n          classMap[size],\r\n          disabled && classMap.disabled,\r\n          className\r\n        ),\r\n      [classMap, theme, state, size, disabled, className]\r\n    );\r\n\r\n    const toggleClass = useMemo(\r\n      () =>\r\n        combineClassNames(\r\n          classMap.toggle,\r\n          checked && classMap.active,\r\n          shadow && classMap[`shadow${capitalize(shadow)}`],\r\n          rounding && classMap[`round${capitalize(rounding)}`]\r\n        ),\r\n      [classMap, checked, shadow, rounding]\r\n    );\r\n\r\n    return (\r\n      <div className={containerClass} data-testid={`${testId}-wrapper`}>\r\n        <button\r\n          ref={ref}\r\n          id={buttonId}\r\n          className={toggleClass}\r\n          role=\"switch\"\r\n          aria-checked={checked}\r\n          aria-labelledby={label ? labelId : undefined}\r\n          aria-label={label ? undefined : \"Toggle switch\"}\r\n          type=\"button\"\r\n          disabled={disabled}\r\n          onClick={toggle}\r\n          onKeyDown={handleKeyDown}\r\n          data-testid={testId}\r\n        >\r\n          <span\r\n            className={classMap.slider}\r\n            aria-hidden=\"true\"\r\n            data-testid={`${testId}-slider`}\r\n          />\r\n        </button>\r\n\r\n        {label && (\r\n          <label\r\n            id={labelId}\r\n            htmlFor={buttonId}\r\n            className={classMap.label}\r\n            data-testid={`${testId}-label`}\r\n          >\r\n            {label}\r\n          </label>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n);\r\n\r\nToggleBase.displayName = \"ToggleBase\";\r\nexport default ToggleBase;\r\n","import React from \"react\";\r\nimport \"./Toggle.scss\";\r\nimport ToggleBase from \"../ToggleBase\";\r\nimport { ToggleProps } from \"../Toggle.types\";\r\n\r\nconst classes = {\r\n  container: \"container\",\r\n  toggle: \"toggle\",\r\n  active: \"toggle_active\",\r\n  slider: \"toggle_slider\",\r\n  label: \"toggle_label\",\r\n\r\n  primary: \"toggle_primary\",\r\n  secondary: \"toggle_secondary\",\r\n  tertiary: \"toggle_tertiary\",\r\n  quaternary: \"toggle_quaternary\",\r\n\r\n  success: \"toggle_success\",\r\n  warning: \"toggle_warning\",\r\n  error: \"toggle_error\",\r\n\r\n  clear: \"toggle_clear\",\r\n\r\n  disabled: \"toggle_disabled\",\r\n\r\n  xs: \"toggle_xs\",\r\n  small: \"toggle_small\",\r\n  medium: \"toggle_medium\",\r\n  large: \"toggle_large\",\r\n  xl: \"toggle_xl\",\r\n\r\n  shadowNone: \"toggle_shadow-None\",\r\n  shadowLight: \"toggle_shadow-Light\",\r\n  shadowMedium: \"toggle_shadow-Medium\",\r\n  shadowStrong: \"toggle_shadow-Strong\",\r\n  shadowIntense: \"toggle_shadow-Intense\",\r\n\r\n  roundNone: \"toggle_round-None\",\r\n  roundSmall: \"toggle_round-Small\",\r\n  roundMedium: \"toggle_round-Medium\",\r\n  roundLarge: \"toggle_round-Large\",\r\n};\r\n\r\nconst Toggle: React.FC<ToggleProps> = (props) => {\r\n  return <ToggleBase {...props} classMap={classes} />;\r\n};\r\n\r\nexport default Toggle;\r\n"],"names":[],"mappings":"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"}

package/dist/core/Toggle.cjs.js

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

package/dist/core/Toggle.js

@@ -1,4 +1,4 @@
-import { T } from "./Toggle-CZftIdc3.js";
+import { T } from "./Toggle-sPyKNt4P.js";
 export {
   T as default
 };

package/dist/core/{Toolbar-Tf01bUjT.js → Toolbar-CSDhcIPb.js}

@@ -20,8 +20,9 @@ const ToolbarBase = ({
   ariaLabel = "Toolbar",
   headingLevel = 1
 }) => {
-  const TitleTag = `h${headingLevel}`;
-  const headerClass = useMemo(
+  const safeHeading = Math.min(6, Math.max(1, headingLevel));
+  const TitleTag = `h${safeHeading}`;
+  const toolbarClass = useMemo(
     () => combineClassNames(
       classMap.toolbar,
       classMap[theme],
@@ -29,13 +30,15 @@ const ToolbarBase = ({
       shadow && classMap[`shadow${capitalize(shadow)}`],
       rounding && classMap[`round${capitalize(rounding)}`]
     ),
-    [classMap, theme, className]
+    [classMap, theme, className, shadow, rounding]
   );
+  const avatarAriaHidden = avatar && !avatar.name && !avatar.onClick ? true : void 0;
   return /* @__PURE__ */ jsxs(
-    "header",
+    "div",
     {
-      className: headerClass,
-      role: "banner",
+      className: toolbarClass,
+      role: "toolbar",
+      "aria-orientation": "horizontal",
       "aria-label": ariaLabel,
       "data-testid": testId,
       children: [
@@ -43,7 +46,7 @@ const ToolbarBase = ({
           "div",
           {
             className: classMap.section,
-            role: "navigation",
+            role: "group",
             "aria-label": "Toolbar left section",
             "data-testid": `${testId}-left`,
             children: left
@@ -53,7 +56,7 @@ const ToolbarBase = ({
           "div",
           {
             className: classMap.section,
-            role: "navigation",
+            role: "group",
             "aria-label": "Toolbar center section",
             "data-testid": `${testId}-center`,
             children: [
@@ -66,7 +69,7 @@ const ToolbarBase = ({
           "div",
           {
             className: classMap.section,
-            role: "navigation",
+            role: "group",
             "aria-label": "Toolbar right section",
             "data-testid": `${testId}-right`,
             children: [
@@ -86,7 +89,7 @@ const ToolbarBase = ({
                       theme: avatar.theme,
                       outline: avatar.outline,
                       onClick: avatar.onClick,
-                      "aria-hidden": !avatar.name
+                      "aria-hidden": avatarAriaHidden
                     }
                   )
                 }
@@ -98,6 +101,7 @@ const ToolbarBase = ({
     }
   );
 };
+ToolbarBase.displayName = "ToolbarBase";
 const classes = {
   toolbar: "toolbar",
   section: "toolbar_section",
@@ -122,4 +126,4 @@ const Toolbar = (props) => /* @__PURE__ */ jsx(ToolbarBase, { ...props, AvatarCo
 export {
   Toolbar as T
 };
-//# sourceMappingURL=Toolbar-Tf01bUjT.js.map
+//# sourceMappingURL=Toolbar-CSDhcIPb.js.map

package/dist/core/Toolbar-CSDhcIPb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar-CSDhcIPb.js","sources":["../../src/components/Toolbar/ToolbarBase.tsx","../../src/components/Toolbar/core/Toolbar.tsx"],"sourcesContent":["import React, { JSX, useMemo } from \"react\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { ToolbarBaseProps } from \"./Toolbar.types\";\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 ToolbarBase: React.FC<ToolbarBaseProps> = ({\r\n  title,\r\n  left,\r\n  center,\r\n  right,\r\n  avatar,\r\n  theme = getDefaultTheme(),\r\n  shadow = getDefaultShadow(),\r\n  rounding = getDefaultRounding(),\r\n  className = \"\",\r\n  \"data-testid\": testId = \"toolbar\",\r\n  AvatarComponent,\r\n  classMap,\r\n  ariaLabel = \"Toolbar\",\r\n  headingLevel = 1,\r\n}): JSX.Element => {\r\n  const safeHeading = Math.min(6, Math.max(1, headingLevel));\r\n  const TitleTag = `h${safeHeading}` as keyof JSX.IntrinsicElements;\r\n\r\n  const toolbarClass = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.toolbar,\r\n        classMap[theme],\r\n        className,\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        rounding && classMap[`round${capitalize(rounding)}`]\r\n      ),\r\n    [classMap, theme, className, shadow, rounding]\r\n  );\r\n\r\n  const avatarAriaHidden =\r\n    avatar && !avatar.name && !avatar.onClick ? true : undefined;\r\n\r\n  return (\r\n    <div\r\n      className={toolbarClass}\r\n      role=\"toolbar\"\r\n      aria-orientation=\"horizontal\"\r\n      aria-label={ariaLabel}\r\n      data-testid={testId}\r\n    >\r\n      <div\r\n        className={classMap.section}\r\n        role=\"group\"\r\n        aria-label=\"Toolbar left section\"\r\n        data-testid={`${testId}-left`}\r\n      >\r\n        {left}\r\n      </div>\r\n\r\n      <div\r\n        className={classMap.section}\r\n        role=\"group\"\r\n        aria-label=\"Toolbar center section\"\r\n        data-testid={`${testId}-center`}\r\n      >\r\n        {title && (\r\n          <TitleTag className={classMap.title} data-testid={`${testId}-title`}>\r\n            {title}\r\n          </TitleTag>\r\n        )}\r\n        {center}\r\n      </div>\r\n\r\n      <div\r\n        className={classMap.section}\r\n        role=\"group\"\r\n        aria-label=\"Toolbar right section\"\r\n        data-testid={`${testId}-right`}\r\n      >\r\n        {right}\r\n        {avatar && (\r\n          <div\r\n            className={classMap.avatarWrapper}\r\n            data-testid={`${testId}-avatar`}\r\n          >\r\n            <AvatarComponent\r\n              name={avatar.name}\r\n              src={avatar.src}\r\n              size={avatar.size || \"medium\"}\r\n              shape={avatar.shape || \"circle\"}\r\n              theme={avatar.theme}\r\n              outline={avatar.outline}\r\n              onClick={avatar.onClick}\r\n              aria-hidden={avatarAriaHidden}\r\n            />\r\n          </div>\r\n        )}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nToolbarBase.displayName = \"ToolbarBase\";\r\nexport default ToolbarBase;\r\n","import React from \"react\";\r\nimport \"./Toolbar.scss\";\r\nimport Avatar from \"../../Avatar/core/Avatar\";\r\nimport ToolbarBase from \"../ToolbarBase\";\r\nimport { ToolbarProps } from \"../Toolbar.types\";\r\n\r\nconst classes = {\r\n  toolbar: \"toolbar\",\r\n  section: \"toolbar_section\",\r\n  title: \"toolbar_title\",\r\n  avatarWrapper: \"toolbar_avatarWrapper\",\r\n\r\n  primary: \"toolbar_primary\",\r\n  secondary: \"toolbar_secondary\",\r\n  tertiary: \"toolbar_tertiary\",\r\n  quaternary: \"toolbar_quaternary\",\r\n\r\n  clear: \"toolbar_clear\",\r\n\r\n  shadowNone: \"toolbar_shadow-None\",\r\n  shadowLight: \"toolbar_shadow-Light\",\r\n  shadowMedium: \"toolbar_shadow-Medium\",\r\n  shadowStrong: \"toolbar_shadow-Strong\",\r\n  shadowIntense: \"toolbar_shadow-Intense\",\r\n\r\n  roundNone: \"toolbar_round-None\",\r\n  roundSmall: \"toolbar_round-Small\",\r\n  roundMedium: \"toolbar_round-Medium\",\r\n  roundLarge: \"toolbar_round-Large\",\r\n};\r\n\r\nconst Toolbar: React.FC<ToolbarProps> = (props) => (\r\n  <ToolbarBase {...props} AvatarComponent={Avatar} classMap={classes} />\r\n);\r\n\r\nexport default Toolbar;\r\n"],"names":[],"mappings":"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"}