boreal-ui 0.0.72 → 0.0.74

package/dist/core/Timeline-5mzFplzB.js

@@ -0,0 +1,194 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
+import { c as capitalize } from "./capitalize-C0TSQSPh.js";
+import { d as getDefaultTheme, a as getDefaultRounding, b as getDefaultShadow } from "./boreal-style-config-DsaRlxmw.js";
+const TimelineBase = ({
+  items,
+  orientation = "vertical",
+  "aria-label": ariaLabel = "Timeline",
+  "aria-label": ariaLabelOverride,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  role = "list",
+  theme = getDefaultTheme(),
+  rounding = getDefaultRounding(),
+  shadow = getDefaultShadow(),
+  classMap,
+  className,
+  "data-testid": testId = "timeline",
+  ...rest
+}) => {
+  const outerWrapper = useMemo(
+    () => combineClassNames(
+      classMap.timeline,
+      classMap[orientation],
+      classMap[theme],
+      className
+    ),
+    [classMap, orientation, theme, className]
+  );
+  const itemClassName = useMemo(
+    () => combineClassNames(classMap.item, classMap[orientation], classMap[theme]),
+    [classMap, orientation, theme]
+  );
+  const markerClassName = useMemo(
+    () => combineClassNames(
+      classMap.marker,
+      classMap[theme],
+      classMap[orientation],
+      shadow && classMap[`shadow${capitalize(shadow)}`]
+    ),
+    [classMap, theme, orientation, shadow]
+  );
+  const contentClassName = useMemo(
+    () => combineClassNames(
+      classMap.content,
+      classMap[orientation],
+      shadow && classMap[`shadow${capitalize(shadow)}`],
+      rounding && classMap[`round${capitalize(rounding)}`]
+    ),
+    [classMap, orientation, shadow, rounding]
+  );
+  const setSize = items.length;
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      className: outerWrapper,
+      "data-testid": testId,
+      role,
+      "aria-label": ariaLabelledBy ? void 0 : ariaLabelOverride ?? ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      ...rest,
+      children: items.map((item, index) => {
+        const IconComponent = item.icon;
+        const itemTestId = `${testId}-item-${index}`;
+        const labelId = `${itemTestId}-title`;
+        const descriptionId = item.description ? `${itemTestId}-description` : void 0;
+        const dateId = item.date ? `${itemTestId}-date` : void 0;
+        const hasTitle = Boolean(item.title);
+        let dateTimeAttr;
+        if (item.date) {
+          const dateObj = new Date(item.date);
+          if (!isNaN(dateObj.getTime())) {
+            dateTimeAttr = dateObj.toISOString();
+          }
+        }
+        const describedBy = [dateId, descriptionId].filter(Boolean).join(" ") || void 0;
+        return /* @__PURE__ */ jsxs(
+          "li",
+          {
+            role: "listitem",
+            className: itemClassName,
+            "data-testid": itemTestId,
+            "aria-labelledby": hasTitle ? labelId : void 0,
+            "aria-label": !hasTitle ? `Timeline item ${index + 1}` : void 0,
+            "aria-describedby": describedBy,
+            "aria-posinset": index + 1,
+            "aria-setsize": setSize,
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: markerClassName,
+                  "data-testid": `${itemTestId}-marker`,
+                  "aria-hidden": true,
+                  children: IconComponent ? /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: classMap.icon,
+                      "data-testid": `${itemTestId}-icon`,
+                      "aria-hidden": true,
+                      children: /* @__PURE__ */ jsx(IconComponent, { "aria-hidden": true })
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: classMap.dot,
+                      "data-testid": `${itemTestId}-dot`,
+                      "aria-hidden": true
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: contentClassName,
+                  "data-testid": `${itemTestId}-content`,
+                  children: [
+                    hasTitle && /* @__PURE__ */ jsx(
+                      "h3",
+                      {
+                        id: labelId,
+                        className: classMap.title,
+                        "data-testid": `${itemTestId}-title`,
+                        children: item.title
+                      }
+                    ),
+                    item.date && /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        id: dateId,
+                        className: classMap.date,
+                        "data-testid": `${itemTestId}-date`,
+                        children: /* @__PURE__ */ jsx("time", { dateTime: dateTimeAttr, children: item.date })
+                      }
+                    ),
+                    item.description && /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        id: descriptionId,
+                        className: classMap.description,
+                        "data-testid": `${itemTestId}-description`,
+                        children: item.description
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          },
+          index
+        );
+      })
+    }
+  );
+};
+TimelineBase.displayName = "TimelineBase";
+const classes = {
+  timeline: "timeline",
+  item: "timeline_item",
+  marker: "timeline_marker",
+  icon: "timeline_icon",
+  dot: "timeline_dot",
+  content: "timeline_content",
+  title: "timeline_title",
+  date: "timeline_date",
+  description: "timeline_description",
+  vertical: "timeline_vertical",
+  horizontal: "timeline_horizontal",
+  primary: "timeline_primary",
+  secondary: "timeline_secondary",
+  tertiary: "timeline_tertiary",
+  quaternary: "timeline_quaternary",
+  clear: "timeline_clear",
+  shadowNone: "timeline_shadow-None",
+  shadowLight: "timeline_shadow-Light",
+  shadowMedium: "timeline_shadow-Medium",
+  shadowStrong: "timeline_shadow-Strong",
+  shadowIntense: "timeline_shadow-Intense",
+  roundNone: "timeline_round-None",
+  roundSmall: "timeline_round-Small",
+  roundMedium: "timeline_round-Medium",
+  roundLarge: "timeline_round-Large"
+};
+const Timeline = (props) => {
+  return /* @__PURE__ */ jsx(TimelineBase, { ...props, classMap: classes });
+};
+Timeline.displayName = "Timeline";
+export {
+  Timeline as T
+};
+//# sourceMappingURL=Timeline-5mzFplzB.js.map

package/dist/core/Timeline-5mzFplzB.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline-5mzFplzB.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  \"aria-label\": ariaLabel = \"Timeline\",\r\n  \"aria-label\": ariaLabelOverride,\r\n  \"aria-labelledby\": ariaLabelledBy,\r\n  \"aria-describedby\": ariaDescribedBy,\r\n  role = \"list\",\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  ...rest\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\r\n      className={outerWrapper}\r\n      data-testid={testId}\r\n      role={role}\r\n      aria-label={ariaLabelledBy ? undefined : (ariaLabelOverride ?? ariaLabel)}\r\n      aria-labelledby={ariaLabelledBy}\r\n      aria-describedby={ariaDescribedBy}\r\n      {...rest}\r\n    >\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 descriptionId = item.description\r\n          ? `${itemTestId}-description`\r\n          : undefined;\r\n        const dateId = item.date ? `${itemTestId}-date` : undefined;\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        const describedBy =\r\n          [dateId, descriptionId].filter(Boolean).join(\" \") || undefined;\r\n\r\n        return (\r\n          <li\r\n            key={index}\r\n            role=\"listitem\"\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-describedby={describedBy}\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\r\n                  id={labelId}\r\n                  className={classMap.title}\r\n                  data-testid={`${itemTestId}-title`}\r\n                >\r\n                  {item.title}\r\n                </h3>\r\n              )}\r\n\r\n              {item.date && (\r\n                <p\r\n                  id={dateId}\r\n                  className={classMap.date}\r\n                  data-testid={`${itemTestId}-date`}\r\n                >\r\n                  <time dateTime={dateTimeAttr}>{item.date}</time>\r\n                </p>\r\n              )}\r\n\r\n              {item.description && (\r\n                <p\r\n                  id={descriptionId}\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\nTimeline.displayName = \"Timeline\";\r\nexport default Timeline;\r\n"],"names":[],"mappings":"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"}

package/dist/core/Timeline-CfTmjEVS.cjs

@@ -0,0 +1,193 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const classNames = require("./classNames-BcWMx052.cjs");
+const capitalize = require("./capitalize-DoV-nOmN.cjs");
+const borealStyleConfig = require("./boreal-style-config-C1UIwOFN.cjs");
+const TimelineBase = ({
+  items,
+  orientation = "vertical",
+  "aria-label": ariaLabel = "Timeline",
+  "aria-label": ariaLabelOverride,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  role = "list",
+  theme = borealStyleConfig.getDefaultTheme(),
+  rounding = borealStyleConfig.getDefaultRounding(),
+  shadow = borealStyleConfig.getDefaultShadow(),
+  classMap,
+  className,
+  "data-testid": testId = "timeline",
+  ...rest
+}) => {
+  const outerWrapper = React.useMemo(
+    () => classNames.combineClassNames(
+      classMap.timeline,
+      classMap[orientation],
+      classMap[theme],
+      className
+    ),
+    [classMap, orientation, theme, className]
+  );
+  const itemClassName = React.useMemo(
+    () => classNames.combineClassNames(classMap.item, classMap[orientation], classMap[theme]),
+    [classMap, orientation, theme]
+  );
+  const markerClassName = React.useMemo(
+    () => classNames.combineClassNames(
+      classMap.marker,
+      classMap[theme],
+      classMap[orientation],
+      shadow && classMap[`shadow${capitalize.capitalize(shadow)}`]
+    ),
+    [classMap, theme, orientation, shadow]
+  );
+  const contentClassName = React.useMemo(
+    () => classNames.combineClassNames(
+      classMap.content,
+      classMap[orientation],
+      shadow && classMap[`shadow${capitalize.capitalize(shadow)}`],
+      rounding && classMap[`round${capitalize.capitalize(rounding)}`]
+    ),
+    [classMap, orientation, shadow, rounding]
+  );
+  const setSize = items.length;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "ul",
+    {
+      className: outerWrapper,
+      "data-testid": testId,
+      role,
+      "aria-label": ariaLabelledBy ? void 0 : ariaLabelOverride ?? ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      ...rest,
+      children: items.map((item, index) => {
+        const IconComponent = item.icon;
+        const itemTestId = `${testId}-item-${index}`;
+        const labelId = `${itemTestId}-title`;
+        const descriptionId = item.description ? `${itemTestId}-description` : void 0;
+        const dateId = item.date ? `${itemTestId}-date` : void 0;
+        const hasTitle = Boolean(item.title);
+        let dateTimeAttr;
+        if (item.date) {
+          const dateObj = new Date(item.date);
+          if (!isNaN(dateObj.getTime())) {
+            dateTimeAttr = dateObj.toISOString();
+          }
+        }
+        const describedBy = [dateId, descriptionId].filter(Boolean).join(" ") || void 0;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "li",
+          {
+            role: "listitem",
+            className: itemClassName,
+            "data-testid": itemTestId,
+            "aria-labelledby": hasTitle ? labelId : void 0,
+            "aria-label": !hasTitle ? `Timeline item ${index + 1}` : void 0,
+            "aria-describedby": describedBy,
+            "aria-posinset": index + 1,
+            "aria-setsize": setSize,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: markerClassName,
+                  "data-testid": `${itemTestId}-marker`,
+                  "aria-hidden": true,
+                  children: IconComponent ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: classMap.icon,
+                      "data-testid": `${itemTestId}-icon`,
+                      "aria-hidden": true,
+                      children: /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { "aria-hidden": true })
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: classMap.dot,
+                      "data-testid": `${itemTestId}-dot`,
+                      "aria-hidden": true
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: contentClassName,
+                  "data-testid": `${itemTestId}-content`,
+                  children: [
+                    hasTitle && /* @__PURE__ */ jsxRuntime.jsx(
+                      "h3",
+                      {
+                        id: labelId,
+                        className: classMap.title,
+                        "data-testid": `${itemTestId}-title`,
+                        children: item.title
+                      }
+                    ),
+                    item.date && /* @__PURE__ */ jsxRuntime.jsx(
+                      "p",
+                      {
+                        id: dateId,
+                        className: classMap.date,
+                        "data-testid": `${itemTestId}-date`,
+                        children: /* @__PURE__ */ jsxRuntime.jsx("time", { dateTime: dateTimeAttr, children: item.date })
+                      }
+                    ),
+                    item.description && /* @__PURE__ */ jsxRuntime.jsx(
+                      "p",
+                      {
+                        id: descriptionId,
+                        className: classMap.description,
+                        "data-testid": `${itemTestId}-description`,
+                        children: item.description
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          },
+          index
+        );
+      })
+    }
+  );
+};
+TimelineBase.displayName = "TimelineBase";
+const classes = {
+  timeline: "timeline",
+  item: "timeline_item",
+  marker: "timeline_marker",
+  icon: "timeline_icon",
+  dot: "timeline_dot",
+  content: "timeline_content",
+  title: "timeline_title",
+  date: "timeline_date",
+  description: "timeline_description",
+  vertical: "timeline_vertical",
+  horizontal: "timeline_horizontal",
+  primary: "timeline_primary",
+  secondary: "timeline_secondary",
+  tertiary: "timeline_tertiary",
+  quaternary: "timeline_quaternary",
+  clear: "timeline_clear",
+  shadowNone: "timeline_shadow-None",
+  shadowLight: "timeline_shadow-Light",
+  shadowMedium: "timeline_shadow-Medium",
+  shadowStrong: "timeline_shadow-Strong",
+  shadowIntense: "timeline_shadow-Intense",
+  roundNone: "timeline_round-None",
+  roundSmall: "timeline_round-Small",
+  roundMedium: "timeline_round-Medium",
+  roundLarge: "timeline_round-Large"
+};
+const Timeline = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(TimelineBase, { ...props, classMap: classes });
+};
+Timeline.displayName = "Timeline";
+exports.Timeline = Timeline;
+//# sourceMappingURL=Timeline-CfTmjEVS.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline-CfTmjEVS.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  \"aria-label\": ariaLabel = \"Timeline\",\r\n  \"aria-label\": ariaLabelOverride,\r\n  \"aria-labelledby\": ariaLabelledBy,\r\n  \"aria-describedby\": ariaDescribedBy,\r\n  role = \"list\",\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  ...rest\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\r\n      className={outerWrapper}\r\n      data-testid={testId}\r\n      role={role}\r\n      aria-label={ariaLabelledBy ? undefined : (ariaLabelOverride ?? ariaLabel)}\r\n      aria-labelledby={ariaLabelledBy}\r\n      aria-describedby={ariaDescribedBy}\r\n      {...rest}\r\n    >\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 descriptionId = item.description\r\n          ? `${itemTestId}-description`\r\n          : undefined;\r\n        const dateId = item.date ? `${itemTestId}-date` : undefined;\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        const describedBy =\r\n          [dateId, descriptionId].filter(Boolean).join(\" \") || undefined;\r\n\r\n        return (\r\n          <li\r\n            key={index}\r\n            role=\"listitem\"\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-describedby={describedBy}\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\r\n                  id={labelId}\r\n                  className={classMap.title}\r\n                  data-testid={`${itemTestId}-title`}\r\n                >\r\n                  {item.title}\r\n                </h3>\r\n              )}\r\n\r\n              {item.date && (\r\n                <p\r\n                  id={dateId}\r\n                  className={classMap.date}\r\n                  data-testid={`${itemTestId}-date`}\r\n                >\r\n                  <time dateTime={dateTimeAttr}>{item.date}</time>\r\n                </p>\r\n              )}\r\n\r\n              {item.description && (\r\n                <p\r\n                  id={descriptionId}\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\nTimeline.displayName = \"Timeline\";\r\nexport default Timeline;\r\n"],"names":["getDefaultTheme","getDefaultRounding","getDefaultShadow","useMemo","combineClassNames","capitalize","jsx","jsxs"],"mappings":";;;;;;AAUA,MAAM,eAEF,CAAC;AAAA,EACH;AAAA,EACA,cAAc;AAAA,EACd,cAAc,YAAY;AAAA,EAC1B,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,OAAO;AAAA,EACP,QAAQA,kBAAAA,gBAAA;AAAA,EACR,WAAWC,kBAAAA,mBAAA;AAAA,EACX,SAASC,kBAAAA,iBAAA;AAAA,EACT;AAAA,EACA;AAAA,EACA,eAAe,SAAS;AAAA,EACxB,GAAG;AACL,MAAM;AACJ,QAAM,eAAeC,MAAAA;AAAAA,IACnB,MACEC,WAAAA;AAAAA,MACE,SAAS;AAAA,MACT,SAAS,WAAW;AAAA,MACpB,SAAS,KAAK;AAAA,MACd;AAAA,IAAA;AAAA,IAEJ,CAAC,UAAU,aAAa,OAAO,SAAS;AAAA,EAAA;AAG1C,QAAM,gBAAgBD,MAAAA;AAAAA,IACpB,MACEC,WAAAA,kBAAkB,SAAS,MAAM,SAAS,WAAW,GAAG,SAAS,KAAK,CAAC;AAAA,IACzE,CAAC,UAAU,aAAa,KAAK;AAAA,EAAA;AAG/B,QAAM,kBAAkBD,MAAAA;AAAAA,IACtB,MACEC,WAAAA;AAAAA,MACE,SAAS;AAAA,MACT,SAAS,KAAK;AAAA,MACd,SAAS,WAAW;AAAA,MACpB,UAAU,SAAS,SAASC,WAAAA,WAAW,MAAM,CAAC,EAAE;AAAA,IAAA;AAAA,IAEpD,CAAC,UAAU,OAAO,aAAa,MAAM;AAAA,EAAA;AAGvC,QAAM,mBAAmBF,MAAAA;AAAAA,IACvB,MACEC,WAAAA;AAAAA,MACE,SAAS;AAAA,MACT,SAAS,WAAW;AAAA,MACpB,UAAU,SAAS,SAASC,WAAAA,WAAW,MAAM,CAAC,EAAE;AAAA,MAChD,YAAY,SAAS,QAAQA,WAAAA,WAAW,QAAQ,CAAC,EAAE;AAAA,IAAA;AAAA,IAEvD,CAAC,UAAU,aAAa,QAAQ,QAAQ;AAAA,EAAA;AAG1C,QAAM,UAAU,MAAM;AAEtB,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,MACX,eAAa;AAAA,MACb;AAAA,MACA,cAAY,iBAAiB,SAAa,qBAAqB;AAAA,MAC/D,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MACjB,GAAG;AAAA,MAEH,UAAA,MAAM,IAAI,CAAC,MAAM,UAAU;AAC1B,cAAM,gBAAgB,KAAK;AAC3B,cAAM,aAAa,GAAG,MAAM,SAAS,KAAK;AAC1C,cAAM,UAAU,GAAG,UAAU;AAC7B,cAAM,gBAAgB,KAAK,cACvB,GAAG,UAAU,iBACb;AACJ,cAAM,SAAS,KAAK,OAAO,GAAG,UAAU,UAAU;AAClD,cAAM,WAAW,QAAQ,KAAK,KAAK;AAEnC,YAAI;AACJ,YAAI,KAAK,MAAM;AACb,gBAAM,UAAU,IAAI,KAAK,KAAK,IAAI;AAClC,cAAI,CAAC,MAAM,QAAQ,QAAA,CAAS,GAAG;AAC7B,2BAAe,QAAQ,YAAA;AAAA,UACzB;AAAA,QACF;AAEA,cAAM,cACJ,CAAC,QAAQ,aAAa,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK;AAEvD,eACEC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YAEC,MAAK;AAAA,YACL,WAAW;AAAA,YACX,eAAa;AAAA,YACb,mBAAiB,WAAW,UAAU;AAAA,YACtC,cAAY,CAAC,WAAW,iBAAiB,QAAQ,CAAC,KAAK;AAAA,YACvD,oBAAkB;AAAA,YAClB,iBAAe,QAAQ;AAAA,YACvB,gBAAc;AAAA,YAEd,UAAA;AAAA,cAAAD,2BAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW;AAAA,kBACX,eAAa,GAAG,UAAU;AAAA,kBAC1B,eAAa;AAAA,kBAEZ,UAAA,gBACCA,2BAAAA;AAAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,WAAW,SAAS;AAAA,sBACpB,eAAa,GAAG,UAAU;AAAA,sBAC1B,eAAa;AAAA,sBAEb,UAAAA,2BAAAA,IAAC,eAAA,EAAc,eAAa,KAAA,CAAM;AAAA,oBAAA;AAAA,kBAAA,IAGpCA,2BAAAA;AAAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,WAAW,SAAS;AAAA,sBACpB,eAAa,GAAG,UAAU;AAAA,sBAC1B,eAAa;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACf;AAAA,cAAA;AAAA,cAIJC,2BAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW;AAAA,kBACX,eAAa,GAAG,UAAU;AAAA,kBAEzB,UAAA;AAAA,oBAAA,YACCD,2BAAAA;AAAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,IAAI;AAAA,wBACJ,WAAW,SAAS;AAAA,wBACpB,eAAa,GAAG,UAAU;AAAA,wBAEzB,UAAA,KAAK;AAAA,sBAAA;AAAA,oBAAA;AAAA,oBAIT,KAAK,QACJA,2BAAAA;AAAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,IAAI;AAAA,wBACJ,WAAW,SAAS;AAAA,wBACpB,eAAa,GAAG,UAAU;AAAA,wBAE1B,UAAAA,2BAAAA,IAAC,QAAA,EAAK,UAAU,cAAe,eAAK,KAAA,CAAK;AAAA,sBAAA;AAAA,oBAAA;AAAA,oBAI5C,KAAK,eACJA,2BAAAA;AAAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,IAAI;AAAA,wBACJ,WAAW,SAAS;AAAA,wBACpB,eAAa,GAAG,UAAU;AAAA,wBAEzB,UAAA,KAAK;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBACR;AAAA,gBAAA;AAAA,cAAA;AAAA,YAEJ;AAAA,UAAA;AAAA,UAjEK;AAAA,QAAA;AAAA,MAoEX,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,aAAa,cAAc;AC1K3B,MAAM,UAAU;AAAA,EACd,UAAU;AAAA,EACV,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,KAAK;AAAA,EACL,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AAAA,EACN,aAAa;AAAA,EAEb,UAAU;AAAA,EACV,YAAY;AAAA,EAEZ,SAAS;AAAA,EACT,WAAW;AAAA,EACX,UAAU;AAAA,EACV,YAAY;AAAA,EAEZ,OAAO;AAAA,EAEP,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,cAAc;AAAA,EACd,cAAc;AAAA,EACd,eAAe;AAAA,EAEf,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,YAAY;AACd;AAEA,MAAM,WAAoC,CAAC,UAAU;AACnD,SAAOA,2BAAAA,IAAC,cAAA,EAAc,GAAG,OAAO,UAAU,SAAS;AACrD;AACA,SAAS,cAAc;;"}

package/dist/core/Timeline.cjs.js

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

package/dist/core/Timeline.js

@@ -1,4 +1,4 @@
-import { T } from "./Timeline-CysPgst2.js";
+import { T } from "./Timeline-5mzFplzB.js";
 export {
   T as default
 };

package/dist/core/Toggle-BRUwXOhV.cjs

@@ -0,0 +1,159 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const classNames = require("./classNames-BcWMx052.cjs");
+const capitalize = require("./capitalize-DoV-nOmN.cjs");
+const borealStyleConfig = require("./boreal-style-config-C1UIwOFN.cjs");
+const ToggleBase = React.forwardRef(
+  ({
+    checked,
+    onChange,
+    label,
+    id,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": ariaInvalid,
+    "aria-errormessage": ariaErrorMessage,
+    "aria-disabled": ariaDisabled,
+    tabIndex,
+    theme = borealStyleConfig.getDefaultTheme(),
+    rounding = borealStyleConfig.getDefaultRounding(),
+    shadow = borealStyleConfig.getDefaultShadow(),
+    state = "",
+    size = borealStyleConfig.getDefaultSize(),
+    disabled = false,
+    classMap,
+    className,
+    "data-testid": testId = "toggle"
+  }, ref) => {
+    const uid = React.useId();
+    const buttonId = id ?? `${testId}-button-${uid}`;
+    const internalLabelId = label ? `${testId}-label-${uid}` : void 0;
+    const resolvedAriaLabelledBy = ariaLabelledBy || (!ariaLabel && label ? internalLabelId : void 0);
+    const resolvedAriaLabel = !resolvedAriaLabelledBy ? ariaLabel || (!label ? "Toggle switch" : void 0) : void 0;
+    const setOn = (next) => {
+      if (!disabled && next !== checked) {
+        onChange(next);
+      }
+    };
+    const toggle = () => setOn(!checked);
+    const handleKeyDown = (e) => {
+      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(
+      () => classNames.combineClassNames(
+        classMap.container,
+        classMap[theme],
+        classMap[state],
+        classMap[size],
+        disabled && classMap.disabled,
+        className
+      ),
+      [classMap, theme, state, size, disabled, className]
+    );
+    const toggleClass = React.useMemo(
+      () => classNames.combineClassNames(
+        classMap.toggle,
+        checked && classMap.active,
+        shadow && classMap[`shadow${capitalize.capitalize(shadow)}`],
+        rounding && classMap[`round${capitalize.capitalize(rounding)}`]
+      ),
+      [classMap, checked, shadow, rounding]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClass, "data-testid": `${testId}-wrapper`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          ref,
+          id: buttonId,
+          className: toggleClass,
+          role: "switch",
+          type: "button",
+          disabled,
+          "aria-checked": checked,
+          "aria-label": resolvedAriaLabel,
+          "aria-labelledby": resolvedAriaLabelledBy,
+          "aria-describedby": ariaDescribedBy,
+          "aria-invalid": ariaInvalid,
+          "aria-errormessage": ariaErrorMessage,
+          "aria-disabled": (ariaDisabled ?? disabled) || void 0,
+          tabIndex,
+          onClick: toggle,
+          onKeyDown: handleKeyDown,
+          "data-testid": testId,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: classMap.slider,
+              "aria-hidden": "true",
+              "data-testid": `${testId}-slider`
+            }
+          )
+        }
+      ),
+      label && !ariaLabelledBy && /* @__PURE__ */ jsxRuntime.jsx(
+        "label",
+        {
+          id: internalLabelId,
+          htmlFor: buttonId,
+          className: classMap.label,
+          "data-testid": `${testId}-label`,
+          children: label
+        }
+      )
+    ] });
+  }
+);
+ToggleBase.displayName = "ToggleBase";
+const classes = {
+  container: "container",
+  toggle: "toggle",
+  active: "toggle_active",
+  slider: "toggle_slider",
+  label: "toggle_label",
+  primary: "toggle_primary",
+  secondary: "toggle_secondary",
+  tertiary: "toggle_tertiary",
+  quaternary: "toggle_quaternary",
+  success: "toggle_success",
+  warning: "toggle_warning",
+  error: "toggle_error",
+  clear: "toggle_clear",
+  disabled: "toggle_disabled",
+  xs: "toggle_xs",
+  small: "toggle_small",
+  medium: "toggle_medium",
+  large: "toggle_large",
+  xl: "toggle_xl",
+  shadowNone: "toggle_shadow-None",
+  shadowLight: "toggle_shadow-Light",
+  shadowMedium: "toggle_shadow-Medium",
+  shadowStrong: "toggle_shadow-Strong",
+  shadowIntense: "toggle_shadow-Intense",
+  roundNone: "toggle_round-None",
+  roundSmall: "toggle_round-Small",
+  roundMedium: "toggle_round-Medium",
+  roundLarge: "toggle_round-Large"
+};
+const Toggle = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ToggleBase, { ...props, classMap: classes, ref });
+});
+Toggle.displayName = "Toggle";
+exports.Toggle = Toggle;
+//# sourceMappingURL=Toggle-BRUwXOhV.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle-BRUwXOhV.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      id,\r\n      \"aria-label\": ariaLabel,\r\n      \"aria-labelledby\": ariaLabelledBy,\r\n      \"aria-describedby\": ariaDescribedBy,\r\n      \"aria-invalid\": ariaInvalid,\r\n      \"aria-errormessage\": ariaErrorMessage,\r\n      \"aria-disabled\": ariaDisabled,\r\n      tabIndex,\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\r\n    const buttonId = id ?? `${testId}-button-${uid}`;\r\n    const internalLabelId = label ? `${testId}-label-${uid}` : undefined;\r\n\r\n    const resolvedAriaLabelledBy =\r\n      ariaLabelledBy || (!ariaLabel && label ? internalLabelId : undefined);\r\n\r\n    const resolvedAriaLabel = !resolvedAriaLabelledBy\r\n      ? ariaLabel || (!label ? \"Toggle switch\" : undefined)\r\n      : undefined;\r\n\r\n    const setOn = (next: boolean) => {\r\n      if (!disabled && next !== checked) {\r\n        onChange(next);\r\n      }\r\n    };\r\n\r\n    const toggle = () => setOn(!checked);\r\n\r\n    const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\r\n      if (disabled) return;\r\n\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          type=\"button\"\r\n          disabled={disabled}\r\n          aria-checked={checked}\r\n          aria-label={resolvedAriaLabel}\r\n          aria-labelledby={resolvedAriaLabelledBy}\r\n          aria-describedby={ariaDescribedBy}\r\n          aria-invalid={ariaInvalid}\r\n          aria-errormessage={ariaErrorMessage}\r\n          aria-disabled={(ariaDisabled ?? disabled) || undefined}\r\n          tabIndex={tabIndex}\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 && !ariaLabelledBy && (\r\n          <label\r\n            id={internalLabelId}\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 { forwardRef } 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 = forwardRef<HTMLButtonElement, ToggleProps>((props, ref) => {\r\n  return <ToggleBase {...props} classMap={classes} ref={ref} />;\r\n});\r\nToggle.displayName = \"Toggle\";\r\nexport default Toggle;\r\n"],"names":["forwardRef","getDefaultTheme","getDefaultRounding","getDefaultShadow","getDefaultSize","useId","useMemo","combineClassNames","capitalize","jsx"],"mappings":"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"}