boreal-ui 0.0.1

package/dist/next/Tabs-CNU0A_YY.js

@@ -0,0 +1,215 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useMemo } from "react";
+import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
+import { c as capitalize } from "./capitalize-C0TSQSPh.js";
+import { c as getDefaultSize, d as getDefaultTheme, a as getDefaultRounding, b as getDefaultShadow } from "./boreal-style-config-BILmxkZG.js";
+const noScroll = "_noScroll_q5x6p_91";
+const errorMessage = "_errorMessage_q5x6p_92";
+const loadingContainer = "_loadingContainer_q5x6p_93";
+const hideScrollbar = "_hideScrollbar_q5x6p_85";
+const sr_only = "_sr_only_q5x6p_94";
+const tabs_container = "_tabs_container_q5x6p_479";
+const tabs = "_tabs_q5x6p_479";
+const icon = "_icon_q5x6p_499";
+const tab = "_tab_q5x6p_479";
+const xs = "_xs_q5x6p_551";
+const small = "_small_q5x6p_556";
+const medium = "_medium_q5x6p_561";
+const large = "_large_q5x6p_566";
+const xl = "_xl_q5x6p_571";
+const content = "_content_q5x6p_576";
+const primary = "_primary_q5x6p_597";
+const active = "_active_q5x6p_597";
+const secondary = "_secondary_q5x6p_606";
+const tertiary = "_tertiary_q5x6p_615";
+const quaternary = "_quaternary_q5x6p_624";
+const clear = "_clear_q5x6p_633";
+const success = "_success_q5x6p_642";
+const error = "_error_q5x6p_92";
+const warning = "_warning_q5x6p_660";
+const roundNone = "_roundNone_q5x6p_673";
+const roundSmall = "_roundSmall_q5x6p_683";
+const roundMedium = "_roundMedium_q5x6p_693";
+const roundLarge = "_roundLarge_q5x6p_703";
+const roundFull = "_roundFull_q5x6p_713";
+const shadowNone = "_shadowNone_q5x6p_723";
+const shadowLight = "_shadowLight_q5x6p_727";
+const shadowMedium = "_shadowMedium_q5x6p_731";
+const shadowStrong = "_shadowStrong_q5x6p_735";
+const shadowIntense = "_shadowIntense_q5x6p_739";
+const spin = "_spin_q5x6p_1";
+const pulse = "_pulse_q5x6p_1";
+const styles = {
+  noScroll,
+  errorMessage,
+  loadingContainer,
+  hideScrollbar,
+  sr_only,
+  tabs_container,
+  tabs,
+  icon,
+  tab,
+  xs,
+  small,
+  medium,
+  large,
+  xl,
+  content,
+  primary,
+  active,
+  secondary,
+  tertiary,
+  quaternary,
+  clear,
+  success,
+  error,
+  warning,
+  roundNone,
+  roundSmall,
+  roundMedium,
+  roundLarge,
+  roundFull,
+  shadowNone,
+  shadowLight,
+  shadowMedium,
+  shadowStrong,
+  shadowIntense,
+  "fade-in": "_fade-in_q5x6p_1",
+  "slide-up": "_slide-up_q5x6p_1",
+  "spin-3d": "_spin-3d_q5x6p_1",
+  spin,
+  pulse,
+  "fade-in-up": "_fade-in-up_q5x6p_1",
+  "progress-grow": "_progress-grow_q5x6p_1",
+  "indeterminate-move": "_indeterminate-move_q5x6p_1",
+  "skeleton-loading": "_skeleton-loading_q5x6p_1"
+};
+const TabsBase = ({
+  tabs: tabs2,
+  defaultIndex = 0,
+  onChange,
+  rounding = getDefaultRounding(),
+  shadow = getDefaultShadow(),
+  className = "",
+  theme = getDefaultTheme(),
+  state = "",
+  size = getDefaultSize(),
+  "data-testid": testId = "tabs",
+  classMap
+}) => {
+  const [activeIndex, setActiveIndex] = useState(defaultIndex);
+  const tabRefs = useRef([]);
+  useEffect(() => {
+    var _a;
+    (_a = tabRefs.current[activeIndex]) == null ? void 0 : _a.focus();
+  }, [activeIndex]);
+  const handleTabClick = (index) => {
+    setActiveIndex(index);
+    onChange == null ? void 0 : onChange(index);
+  };
+  const handleKeyDown = (event) => {
+    const { key } = event;
+    const lastIndex = tabs2.length - 1;
+    let newIndex = activeIndex;
+    if (key === "ArrowRight") {
+      newIndex = activeIndex === lastIndex ? 0 : activeIndex + 1;
+    } else if (key === "ArrowLeft") {
+      newIndex = activeIndex === 0 ? lastIndex : activeIndex - 1;
+    } else if (key === "Home") {
+      newIndex = 0;
+    } else if (key === "End") {
+      newIndex = lastIndex;
+    }
+    if (newIndex !== activeIndex) {
+      event.preventDefault();
+      setActiveIndex(newIndex);
+      onChange == null ? void 0 : onChange(newIndex);
+    }
+  };
+  const containerClassNames = useMemo(
+    () => combineClassNames(
+      classMap.container,
+      classMap[theme],
+      classMap[state],
+      classMap[size],
+      className
+    ),
+    [classMap, theme, state, size, className]
+  );
+  const tabClassNames = useMemo(
+    () => combineClassNames(
+      classMap.tab,
+      shadow && classMap[`shadow${capitalize(shadow)}`],
+      rounding && classMap[`round${capitalize(rounding)}`]
+    ),
+    [classMap]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: containerClassNames, "data-testid": testId, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classMap.tabs,
+        role: "tablist",
+        "aria-label": "Tabs",
+        onKeyDown: handleKeyDown,
+        "data-testid": `${testId}-tablist`,
+        children: tabs2.map((tab2, index) => {
+          const Icon = tab2.icon;
+          const isActive = index === activeIndex;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              ref: (el) => {
+                tabRefs.current[index] = el;
+              },
+              className: combineClassNames(
+                tabClassNames,
+                isActive ? classMap.active : ""
+              ),
+              onClick: () => handleTabClick(index),
+              role: "tab",
+              type: "button",
+              tabIndex: isActive ? 0 : -1,
+              "aria-selected": isActive,
+              "aria-controls": `${testId}-panel-${index}`,
+              id: `${testId}-tab-${index}`,
+              "data-testid": `${testId}-tab-${index}`,
+              children: [
+                Icon && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: classMap.icon,
+                    "aria-hidden": "true",
+                    "data-testid": `${testId}-icon-${index}`,
+                    children: /* @__PURE__ */ jsx(Icon, {})
+                  }
+                ),
+                tab2.label
+              ]
+            },
+            index
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classMap.content,
+        role: "tabpanel",
+        id: `${testId}-panel-${activeIndex}`,
+        "aria-labelledby": `${testId}-tab-${activeIndex}`,
+        tabIndex: 0,
+        "data-testid": `${testId}-panel`,
+        children: tabs2[activeIndex].content
+      }
+    )
+  ] });
+};
+const Tabs = (props) => {
+  return /* @__PURE__ */ jsx(TabsBase, { ...props, classMap: styles });
+};
+export {
+  Tabs as T
+};
+//# sourceMappingURL=Tabs-CNU0A_YY.js.map

package/dist/next/Tabs-CNU0A_YY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs-CNU0A_YY.js","sources":["../../src/components/Tabs/TabsBase.tsx","../../src/components/Tabs/next/Tabs.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useMemo } from \"react\";\r\nimport { TabsProps } from \"./Tabs.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\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 TabsBase: React.FC<TabsProps & { classMap: Record<string, string> }> = ({\r\n  tabs,\r\n  defaultIndex = 0,\r\n  onChange,\r\n  rounding = getDefaultRounding(),\r\n  shadow = getDefaultShadow(),\r\n  className = \"\",\r\n  theme = getDefaultTheme(),\r\n  state = \"\",\r\n  size = getDefaultSize(),\r\n  \"data-testid\": testId = \"tabs\",\r\n  classMap,\r\n}) => {\r\n  const [activeIndex, setActiveIndex] = useState(defaultIndex);\r\n  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);\r\n\r\n  useEffect(() => {\r\n    tabRefs.current[activeIndex]?.focus();\r\n  }, [activeIndex]);\r\n\r\n  const handleTabClick = (index: number) => {\r\n    setActiveIndex(index);\r\n    onChange?.(index);\r\n  };\r\n\r\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\r\n    const { key } = event;\r\n\r\n    const lastIndex = tabs.length - 1;\r\n    let newIndex = activeIndex;\r\n\r\n    if (key === \"ArrowRight\") {\r\n      newIndex = activeIndex === lastIndex ? 0 : activeIndex + 1;\r\n    } else if (key === \"ArrowLeft\") {\r\n      newIndex = activeIndex === 0 ? lastIndex : activeIndex - 1;\r\n    } else if (key === \"Home\") {\r\n      newIndex = 0;\r\n    } else if (key === \"End\") {\r\n      newIndex = lastIndex;\r\n    }\r\n\r\n    if (newIndex !== activeIndex) {\r\n      event.preventDefault();\r\n      setActiveIndex(newIndex);\r\n      onChange?.(newIndex);\r\n    }\r\n  };\r\n\r\n  const containerClassNames = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.container,\r\n        classMap[theme],\r\n        classMap[state],\r\n        classMap[size],\r\n        className\r\n      ),\r\n    [classMap, theme, state, size, className]\r\n  );\r\n\r\n  const tabClassNames = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.tab,\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        rounding && classMap[`round${capitalize(rounding)}`]\r\n      ),\r\n    [classMap]\r\n  );\r\n\r\n  return (\r\n    <div className={containerClassNames} data-testid={testId}>\r\n      <div\r\n        className={classMap.tabs}\r\n        role=\"tablist\"\r\n        aria-label=\"Tabs\"\r\n        onKeyDown={handleKeyDown}\r\n        data-testid={`${testId}-tablist`}\r\n      >\r\n        {tabs.map((tab, index) => {\r\n          const Icon = tab.icon;\r\n          const isActive = index === activeIndex;\r\n\r\n          return (\r\n            <button\r\n              key={index}\r\n              ref={(el): void => {\r\n                tabRefs.current[index] = el;\r\n              }}\r\n              className={combineClassNames(\r\n                tabClassNames,\r\n                isActive ? classMap.active : \"\"\r\n              )}\r\n              onClick={() => handleTabClick(index)}\r\n              role=\"tab\"\r\n              type=\"button\"\r\n              tabIndex={isActive ? 0 : -1}\r\n              aria-selected={isActive}\r\n              aria-controls={`${testId}-panel-${index}`}\r\n              id={`${testId}-tab-${index}`}\r\n              data-testid={`${testId}-tab-${index}`}\r\n            >\r\n              {Icon && (\r\n                <div\r\n                  className={classMap.icon}\r\n                  aria-hidden=\"true\"\r\n                  data-testid={`${testId}-icon-${index}`}\r\n                >\r\n                  <Icon />\r\n                </div>\r\n              )}\r\n              {tab.label}\r\n            </button>\r\n          );\r\n        })}\r\n      </div>\r\n\r\n      <div\r\n        className={classMap.content}\r\n        role=\"tabpanel\"\r\n        id={`${testId}-panel-${activeIndex}`}\r\n        aria-labelledby={`${testId}-tab-${activeIndex}`}\r\n        tabIndex={0}\r\n        data-testid={`${testId}-panel`}\r\n      >\r\n        {tabs[activeIndex].content}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default TabsBase;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport styles from \"./Tabs.module.scss\";\r\nimport TabsBase from \"../TabsBase\";\r\nimport { TabsProps } from \"../Tabs.types\";\r\n\r\nconst Tabs: React.FC<TabsProps> = (props) => {\r\n  return <TabsBase {...props} classMap={styles} />;\r\n};\r\n\r\nexport default Tabs;\r\n"],"names":["tabs","tab"],"mappings":"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"}

package/dist/next/Tabs-DuZPFjen.cjs

@@ -0,0 +1,214 @@
+"use strict";
+const require$$2 = 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-Rr5d5Qts.cjs");
+const noScroll = "_noScroll_q5x6p_91";
+const errorMessage = "_errorMessage_q5x6p_92";
+const loadingContainer = "_loadingContainer_q5x6p_93";
+const hideScrollbar = "_hideScrollbar_q5x6p_85";
+const sr_only = "_sr_only_q5x6p_94";
+const tabs_container = "_tabs_container_q5x6p_479";
+const tabs = "_tabs_q5x6p_479";
+const icon = "_icon_q5x6p_499";
+const tab = "_tab_q5x6p_479";
+const xs = "_xs_q5x6p_551";
+const small = "_small_q5x6p_556";
+const medium = "_medium_q5x6p_561";
+const large = "_large_q5x6p_566";
+const xl = "_xl_q5x6p_571";
+const content = "_content_q5x6p_576";
+const primary = "_primary_q5x6p_597";
+const active = "_active_q5x6p_597";
+const secondary = "_secondary_q5x6p_606";
+const tertiary = "_tertiary_q5x6p_615";
+const quaternary = "_quaternary_q5x6p_624";
+const clear = "_clear_q5x6p_633";
+const success = "_success_q5x6p_642";
+const error = "_error_q5x6p_92";
+const warning = "_warning_q5x6p_660";
+const roundNone = "_roundNone_q5x6p_673";
+const roundSmall = "_roundSmall_q5x6p_683";
+const roundMedium = "_roundMedium_q5x6p_693";
+const roundLarge = "_roundLarge_q5x6p_703";
+const roundFull = "_roundFull_q5x6p_713";
+const shadowNone = "_shadowNone_q5x6p_723";
+const shadowLight = "_shadowLight_q5x6p_727";
+const shadowMedium = "_shadowMedium_q5x6p_731";
+const shadowStrong = "_shadowStrong_q5x6p_735";
+const shadowIntense = "_shadowIntense_q5x6p_739";
+const spin = "_spin_q5x6p_1";
+const pulse = "_pulse_q5x6p_1";
+const styles = {
+  noScroll,
+  errorMessage,
+  loadingContainer,
+  hideScrollbar,
+  sr_only,
+  tabs_container,
+  tabs,
+  icon,
+  tab,
+  xs,
+  small,
+  medium,
+  large,
+  xl,
+  content,
+  primary,
+  active,
+  secondary,
+  tertiary,
+  quaternary,
+  clear,
+  success,
+  error,
+  warning,
+  roundNone,
+  roundSmall,
+  roundMedium,
+  roundLarge,
+  roundFull,
+  shadowNone,
+  shadowLight,
+  shadowMedium,
+  shadowStrong,
+  shadowIntense,
+  "fade-in": "_fade-in_q5x6p_1",
+  "slide-up": "_slide-up_q5x6p_1",
+  "spin-3d": "_spin-3d_q5x6p_1",
+  spin,
+  pulse,
+  "fade-in-up": "_fade-in-up_q5x6p_1",
+  "progress-grow": "_progress-grow_q5x6p_1",
+  "indeterminate-move": "_indeterminate-move_q5x6p_1",
+  "skeleton-loading": "_skeleton-loading_q5x6p_1"
+};
+const TabsBase = ({
+  tabs: tabs2,
+  defaultIndex = 0,
+  onChange,
+  rounding = borealStyleConfig.getDefaultRounding(),
+  shadow = borealStyleConfig.getDefaultShadow(),
+  className = "",
+  theme = borealStyleConfig.getDefaultTheme(),
+  state = "",
+  size = borealStyleConfig.getDefaultSize(),
+  "data-testid": testId = "tabs",
+  classMap
+}) => {
+  const [activeIndex, setActiveIndex] = React.useState(defaultIndex);
+  const tabRefs = React.useRef([]);
+  React.useEffect(() => {
+    var _a;
+    (_a = tabRefs.current[activeIndex]) == null ? void 0 : _a.focus();
+  }, [activeIndex]);
+  const handleTabClick = (index) => {
+    setActiveIndex(index);
+    onChange == null ? void 0 : onChange(index);
+  };
+  const handleKeyDown = (event) => {
+    const { key } = event;
+    const lastIndex = tabs2.length - 1;
+    let newIndex = activeIndex;
+    if (key === "ArrowRight") {
+      newIndex = activeIndex === lastIndex ? 0 : activeIndex + 1;
+    } else if (key === "ArrowLeft") {
+      newIndex = activeIndex === 0 ? lastIndex : activeIndex - 1;
+    } else if (key === "Home") {
+      newIndex = 0;
+    } else if (key === "End") {
+      newIndex = lastIndex;
+    }
+    if (newIndex !== activeIndex) {
+      event.preventDefault();
+      setActiveIndex(newIndex);
+      onChange == null ? void 0 : onChange(newIndex);
+    }
+  };
+  const containerClassNames = React.useMemo(
+    () => classNames.combineClassNames(
+      classMap.container,
+      classMap[theme],
+      classMap[state],
+      classMap[size],
+      className
+    ),
+    [classMap, theme, state, size, className]
+  );
+  const tabClassNames = React.useMemo(
+    () => classNames.combineClassNames(
+      classMap.tab,
+      shadow && classMap[`shadow${capitalize.capitalize(shadow)}`],
+      rounding && classMap[`round${capitalize.capitalize(rounding)}`]
+    ),
+    [classMap]
+  );
+  return /* @__PURE__ */ require$$2.jsxs("div", { className: containerClassNames, "data-testid": testId, children: [
+    /* @__PURE__ */ require$$2.jsx(
+      "div",
+      {
+        className: classMap.tabs,
+        role: "tablist",
+        "aria-label": "Tabs",
+        onKeyDown: handleKeyDown,
+        "data-testid": `${testId}-tablist`,
+        children: tabs2.map((tab2, index) => {
+          const Icon = tab2.icon;
+          const isActive = index === activeIndex;
+          return /* @__PURE__ */ require$$2.jsxs(
+            "button",
+            {
+              ref: (el) => {
+                tabRefs.current[index] = el;
+              },
+              className: classNames.combineClassNames(
+                tabClassNames,
+                isActive ? classMap.active : ""
+              ),
+              onClick: () => handleTabClick(index),
+              role: "tab",
+              type: "button",
+              tabIndex: isActive ? 0 : -1,
+              "aria-selected": isActive,
+              "aria-controls": `${testId}-panel-${index}`,
+              id: `${testId}-tab-${index}`,
+              "data-testid": `${testId}-tab-${index}`,
+              children: [
+                Icon && /* @__PURE__ */ require$$2.jsx(
+                  "div",
+                  {
+                    className: classMap.icon,
+                    "aria-hidden": "true",
+                    "data-testid": `${testId}-icon-${index}`,
+                    children: /* @__PURE__ */ require$$2.jsx(Icon, {})
+                  }
+                ),
+                tab2.label
+              ]
+            },
+            index
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ require$$2.jsx(
+      "div",
+      {
+        className: classMap.content,
+        role: "tabpanel",
+        id: `${testId}-panel-${activeIndex}`,
+        "aria-labelledby": `${testId}-tab-${activeIndex}`,
+        tabIndex: 0,
+        "data-testid": `${testId}-panel`,
+        children: tabs2[activeIndex].content
+      }
+    )
+  ] });
+};
+const Tabs = (props) => {
+  return /* @__PURE__ */ require$$2.jsx(TabsBase, { ...props, classMap: styles });
+};
+exports.Tabs = Tabs;
+//# sourceMappingURL=Tabs-DuZPFjen.cjs.map

package/dist/next/Tabs-DuZPFjen.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs-DuZPFjen.cjs","sources":["../../src/components/Tabs/TabsBase.tsx","../../src/components/Tabs/next/Tabs.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useMemo } from \"react\";\r\nimport { TabsProps } from \"./Tabs.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\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 TabsBase: React.FC<TabsProps & { classMap: Record<string, string> }> = ({\r\n  tabs,\r\n  defaultIndex = 0,\r\n  onChange,\r\n  rounding = getDefaultRounding(),\r\n  shadow = getDefaultShadow(),\r\n  className = \"\",\r\n  theme = getDefaultTheme(),\r\n  state = \"\",\r\n  size = getDefaultSize(),\r\n  \"data-testid\": testId = \"tabs\",\r\n  classMap,\r\n}) => {\r\n  const [activeIndex, setActiveIndex] = useState(defaultIndex);\r\n  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);\r\n\r\n  useEffect(() => {\r\n    tabRefs.current[activeIndex]?.focus();\r\n  }, [activeIndex]);\r\n\r\n  const handleTabClick = (index: number) => {\r\n    setActiveIndex(index);\r\n    onChange?.(index);\r\n  };\r\n\r\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\r\n    const { key } = event;\r\n\r\n    const lastIndex = tabs.length - 1;\r\n    let newIndex = activeIndex;\r\n\r\n    if (key === \"ArrowRight\") {\r\n      newIndex = activeIndex === lastIndex ? 0 : activeIndex + 1;\r\n    } else if (key === \"ArrowLeft\") {\r\n      newIndex = activeIndex === 0 ? lastIndex : activeIndex - 1;\r\n    } else if (key === \"Home\") {\r\n      newIndex = 0;\r\n    } else if (key === \"End\") {\r\n      newIndex = lastIndex;\r\n    }\r\n\r\n    if (newIndex !== activeIndex) {\r\n      event.preventDefault();\r\n      setActiveIndex(newIndex);\r\n      onChange?.(newIndex);\r\n    }\r\n  };\r\n\r\n  const containerClassNames = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.container,\r\n        classMap[theme],\r\n        classMap[state],\r\n        classMap[size],\r\n        className\r\n      ),\r\n    [classMap, theme, state, size, className]\r\n  );\r\n\r\n  const tabClassNames = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.tab,\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        rounding && classMap[`round${capitalize(rounding)}`]\r\n      ),\r\n    [classMap]\r\n  );\r\n\r\n  return (\r\n    <div className={containerClassNames} data-testid={testId}>\r\n      <div\r\n        className={classMap.tabs}\r\n        role=\"tablist\"\r\n        aria-label=\"Tabs\"\r\n        onKeyDown={handleKeyDown}\r\n        data-testid={`${testId}-tablist`}\r\n      >\r\n        {tabs.map((tab, index) => {\r\n          const Icon = tab.icon;\r\n          const isActive = index === activeIndex;\r\n\r\n          return (\r\n            <button\r\n              key={index}\r\n              ref={(el): void => {\r\n                tabRefs.current[index] = el;\r\n              }}\r\n              className={combineClassNames(\r\n                tabClassNames,\r\n                isActive ? classMap.active : \"\"\r\n              )}\r\n              onClick={() => handleTabClick(index)}\r\n              role=\"tab\"\r\n              type=\"button\"\r\n              tabIndex={isActive ? 0 : -1}\r\n              aria-selected={isActive}\r\n              aria-controls={`${testId}-panel-${index}`}\r\n              id={`${testId}-tab-${index}`}\r\n              data-testid={`${testId}-tab-${index}`}\r\n            >\r\n              {Icon && (\r\n                <div\r\n                  className={classMap.icon}\r\n                  aria-hidden=\"true\"\r\n                  data-testid={`${testId}-icon-${index}`}\r\n                >\r\n                  <Icon />\r\n                </div>\r\n              )}\r\n              {tab.label}\r\n            </button>\r\n          );\r\n        })}\r\n      </div>\r\n\r\n      <div\r\n        className={classMap.content}\r\n        role=\"tabpanel\"\r\n        id={`${testId}-panel-${activeIndex}`}\r\n        aria-labelledby={`${testId}-tab-${activeIndex}`}\r\n        tabIndex={0}\r\n        data-testid={`${testId}-panel`}\r\n      >\r\n        {tabs[activeIndex].content}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default TabsBase;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport styles from \"./Tabs.module.scss\";\r\nimport TabsBase from \"../TabsBase\";\r\nimport { TabsProps } from \"../Tabs.types\";\r\n\r\nconst Tabs: React.FC<TabsProps> = (props) => {\r\n  return <TabsBase {...props} classMap={styles} />;\r\n};\r\n\r\nexport default Tabs;\r\n"],"names":["tabs","getDefaultRounding","getDefaultShadow","getDefaultTheme","getDefaultSize","useState","useRef","useEffect","useMemo","combineClassNames","capitalize","jsxs","jsx","tab"],"mappings":"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"}

package/dist/next/Tabs.cjs.js

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

package/dist/next/Tabs.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/next/Tabs.js

@@ -0,0 +1,5 @@
+import { T } from "./Tabs-CNU0A_YY.js";
+export {
+  T as default
+};
+//# sourceMappingURL=Tabs.js.map

package/dist/next/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/next/TagInput.cjs.js

@@ -0,0 +1,4 @@
+"use strict";
+const Taginput = require("./Taginput-DAZs0PlQ.cjs");
+module.exports = Taginput.TagInput;
+//# sourceMappingURL=TagInput.cjs.js.map

package/dist/next/TagInput.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagInput.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/next/TagInput.js

@@ -0,0 +1,5 @@
+import { T } from "./Taginput-Bppb5ahN.js";
+export {
+  T as default
+};
+//# sourceMappingURL=TagInput.js.map

package/dist/next/TagInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagInput.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}