se-design 1.0.73-dev2 → 1.0.73-dev6

package/dist/index251.js

@@ -1,5 +1,55 @@
-var r = {};
+import { __require as E } from "./index249.js";
+import { __require as _ } from "./index250.js";
+var f, v;
+function P() {
+  if (v) return f;
+  v = 1;
+  var o = function() {
+  };
+  if (process.env.NODE_ENV !== "production") {
+    var y = E(), t = {}, d = _();
+    o = function(n) {
+      var a = "Warning: " + n;
+      typeof console < "u" && console.error(a);
+      try {
+        throw new Error(a);
+      } catch {
+      }
+    };
+  }
+  function u(n, a, i, s, c) {
+    if (process.env.NODE_ENV !== "production") {
+      for (var e in n)
+        if (d(n, e)) {
+          var r;
+          try {
+            if (typeof n[e] != "function") {
+              var h = Error(
+                (s || "React class") + ": " + i + " type `" + e + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof n[e] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`."
+              );
+              throw h.name = "Invariant Violation", h;
+            }
+            r = n[e](a, e, s, i, null, y);
+          } catch (l) {
+            r = l;
+          }
+          if (r && !(r instanceof Error) && o(
+            (s || "React class") + ": type specification of " + i + " `" + e + "` is invalid; the type checker function must return `null` or an `Error` but returned a " + typeof r + ". You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument)."
+          ), r instanceof Error && !(r.message in t)) {
+            t[r.message] = !0;
+            var p = c ? c() : "";
+            o(
+              "Failed " + i + " type: " + r.message + (p ?? "")
+            );
+          }
+        }
+    }
+  }
+  return u.resetWarningCache = function() {
+    process.env.NODE_ENV !== "production" && (t = {});
+  }, f = u, f;
+}
 export {
-  r as __exports
+  P as __require
 };
 //# sourceMappingURL=index251.js.map

package/dist/index251.js.map

@@ -1 +1 @@
-{"version":3,"file":"index251.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index251.js","sources":["../node_modules/prop-types/checkPropTypes.js"],"sourcesContent":["/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\nvar printWarning = function() {};\n\nif (process.env.NODE_ENV !== 'production') {\n  var ReactPropTypesSecret = require('./lib/ReactPropTypesSecret');\n  var loggedTypeFailures = {};\n  var has = require('./lib/has');\n\n  printWarning = function(text) {\n    var message = 'Warning: ' + text;\n    if (typeof console !== 'undefined') {\n      console.error(message);\n    }\n    try {\n      // --- Welcome to debugging React ---\n      // This error was thrown as a convenience so that you can use this stack\n      // to find the callsite that caused this warning to fire.\n      throw new Error(message);\n    } catch (x) { /**/ }\n  };\n}\n\n/**\n * Assert that the values match with the type specs.\n * Error messages are memorized and will only be shown once.\n *\n * @param {object} typeSpecs Map of name to a ReactPropType\n * @param {object} values Runtime values that need to be type-checked\n * @param {string} location e.g. \"prop\", \"context\", \"child context\"\n * @param {string} componentName Name of the component for error messages.\n * @param {?Function} getStack Returns the component stack.\n * @private\n */\nfunction checkPropTypes(typeSpecs, values, location, componentName, getStack) {\n  if (process.env.NODE_ENV !== 'production') {\n    for (var typeSpecName in typeSpecs) {\n      if (has(typeSpecs, typeSpecName)) {\n        var error;\n        // Prop type validation may throw. In case they do, we don't want to\n        // fail the render phase where it didn't fail before. So we log it.\n        // After these have been cleaned up, we'll let them throw.\n        try {\n          // This is intentionally an invariant that gets caught. It's the same\n          // behavior as without this statement except with a better message.\n          if (typeof typeSpecs[typeSpecName] !== 'function') {\n            var err = Error(\n              (componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' +\n              'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' +\n              'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.'\n            );\n            err.name = 'Invariant Violation';\n            throw err;\n          }\n          error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret);\n        } catch (ex) {\n          error = ex;\n        }\n        if (error && !(error instanceof Error)) {\n          printWarning(\n            (componentName || 'React class') + ': type specification of ' +\n            location + ' `' + typeSpecName + '` is invalid; the type checker ' +\n            'function must return `null` or an `Error` but returned a ' + typeof error + '. ' +\n            'You may have forgotten to pass an argument to the type checker ' +\n            'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' +\n            'shape all require an argument).'\n          );\n        }\n        if (error instanceof Error && !(error.message in loggedTypeFailures)) {\n          // Only monitor this failure once because there tends to be a lot of the\n          // same error.\n          loggedTypeFailures[error.message] = true;\n\n          var stack = getStack ? getStack() : '';\n\n          printWarning(\n            'Failed ' + location + ' type: ' + error.message + (stack != null ? stack : '')\n          );\n        }\n      }\n    }\n  }\n}\n\n/**\n * Resets warning cache when testing.\n *\n * @private\n */\ncheckPropTypes.resetWarningCache = function() {\n  if (process.env.NODE_ENV !== 'production') {\n    loggedTypeFailures = {};\n  }\n}\n\nmodule.exports = checkPropTypes;\n"],"names":["printWarning","ReactPropTypesSecret","require$$0","loggedTypeFailures","has","require$$1","text","message","checkPropTypes","typeSpecs","values","location","componentName","getStack","typeSpecName","error","err","ex","stack","checkPropTypes_1"],"mappings":";;;;;;AASA,MAAIA,IAAe,WAAW;AAAA,EAAA;AAE9B,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,QAAIC,IAAuBC,EAAA,GACvBC,IAAqB,CAAA,GACrBC,IAAMC,EAAA;AAEV,IAAAL,IAAe,SAASM,GAAM;AAC5B,UAAIC,IAAU,cAAcD;AAC5B,MAAI,OAAO,UAAY,OACrB,QAAQ,MAAMC,CAAO;AAEvB,UAAI;AAIF,cAAM,IAAI,MAAMA,CAAO;AAAA,MAC7B,QAAgB;AAAA,MAAA;AAAA,IAChB;AAAA,EACA;AAaA,WAASC,EAAeC,GAAWC,GAAQC,GAAUC,GAAeC,GAAU;AAC5E,QAAI,QAAQ,IAAI,aAAa;AAC3B,eAASC,KAAgBL;AACvB,YAAIL,EAAIK,GAAWK,CAAY,GAAG;AAChC,cAAIC;AAIJ,cAAI;AAGF,gBAAI,OAAON,EAAUK,CAAY,KAAM,YAAY;AACjD,kBAAIE,IAAM;AAAA,iBACPJ,KAAiB,iBAAiB,OAAOD,IAAW,YAAYG,IAAe,+FACC,OAAOL,EAAUK,CAAY,IAAI;AAAA,cAEhI;AACY,oBAAAE,EAAI,OAAO,uBACLA;AAAA,YAClB;AACU,YAAAD,IAAQN,EAAUK,CAAY,EAAEJ,GAAQI,GAAcF,GAAeD,GAAU,MAAMV,CAAoB;AAAA,UACnH,SAAiBgB,GAAI;AACX,YAAAF,IAAQE;AAAA,UAClB;AAWQ,cAVIF,KAAS,EAAEA,aAAiB,UAC9Bf;AAAA,aACGY,KAAiB,iBAAiB,6BACnCD,IAAW,OAAOG,IAAe,6FAC6B,OAAOC,IAAQ;AAAA,UAIzF,GAEYA,aAAiB,SAAS,EAAEA,EAAM,WAAWZ,IAAqB;AAGpE,YAAAA,EAAmBY,EAAM,OAAO,IAAI;AAEpC,gBAAIG,IAAQL,IAAWA,EAAQ,IAAK;AAEpC,YAAAb;AAAA,cACE,YAAYW,IAAW,YAAYI,EAAM,WAAWG,KAAwB;AAAA,YACxF;AAAA,UACA;AAAA,QACA;AAAA;AAAA,EAGA;AAOA,SAAAV,EAAe,oBAAoB,WAAW;AAC5C,IAAI,QAAQ,IAAI,aAAa,iBAC3BL,IAAqB,CAAA;AAAA,EAEzB,GAEAgB,IAAiBX;;","x_google_ignoreList":[0]}

package/dist/index252.js

@@ -1,5 +1,5 @@
-var e = {};
+var r = {};
 export {
-  e as __exports
+  r as __exports
 };
 //# sourceMappingURL=index252.js.map

package/dist/index253.js

@@ -0,0 +1,5 @@
+var e = {};
+export {
+  e as __exports
+};
+//# sourceMappingURL=index253.js.map

package/dist/index253.js.map

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

package/dist/index27.js

@@ -1,7 +1,7 @@
 import d, { useMemo as S, useRef as D, useEffect as c } from "react";
 import { Icon as j } from "./index5.js";
 import { getA11yNameAttributes as B } from "./index71.js";
-import { useDismissOnEscape as M } from "./index198.js";
+import { useDismissOnEscape as M } from "./index194.js";
 /* empty css         */
 function m() {
   return m = Object.assign ? Object.assign.bind() : function(r) {

package/dist/index28.js

@@ -1,143 +1,147 @@
-import o, { useState as F, useMemo as R, useRef as S, useEffect as _ } from "react";
-import { Icon as $ } from "./index5.js";
-import { Popover as j } from "./index18.js";
-import { MenuList as B } from "./index17.js";
-import { useStableId as z } from "./index190.js";
-import { getA11yNameAttributes as H } from "./index71.js";
+import r, { useState as A, useMemo as _, useRef as F, useEffect as j } from "react";
+import { Icon as O } from "./index5.js";
+import { Popover as B } from "./index18.js";
+import { MenuList as z } from "./index17.js";
+import { useStableId as H } from "./index190.js";
+import { getA11yNameAttributes as U } from "./index71.js";
 import { useTabsA11y as V, getPanelId as q } from "./index69.js";
 /* empty css         */
-function s() {
-  return s = Object.assign ? Object.assign.bind() : function(l) {
-    for (var t = 1; t < arguments.length; t++) {
-      var i = arguments[t];
-      for (var c in i) ({}).hasOwnProperty.call(i, c) && (l[c] = i[c]);
+function i() {
+  return i = Object.assign ? Object.assign.bind() : function(s) {
+    for (var o = 1; o < arguments.length; o++) {
+      var c = arguments[o];
+      for (var d in c) ({}).hasOwnProperty.call(c, d) && (s[d] = c[d]);
     }
-    return l;
-  }, s.apply(null, arguments);
+    return s;
+  }, i.apply(null, arguments);
 }
-const ee = ({
-  defaultActiveTab: l,
-  tabs: t,
-  onTabChange: i,
-  primaryTabCount: c,
-  headingLevel: v,
-  id: A,
-  ariaLabel: D = "Tabs",
-  ariaLabelledBy: L,
-  panelId: f
+const re = ({
+  defaultActiveTab: s,
+  tabs: o,
+  onTabChange: c,
+  primaryTabCount: d,
+  headingLevel: g,
+  id: $,
+  ariaLabel: L = "Tabs",
+  ariaLabelledBy: K,
+  panelId: p
 }) => {
-  const O = l || (t[0] ? t[0].id : ""), [d, g] = F(O), [p, h] = F(!1), T = c ?? t?.length, b = t.slice(0, T), m = t.slice(T), u = m.find((e) => e.id === d), w = t.some((e) => e.renderTabContent), y = z(A, "tabs"), M = R(() => {
-    const e = b.filter((a) => !a.disabled), r = m.filter((a) => !a.disabled), n = e.map((a) => a.id);
-    return r.length > 0 ? [...n, "overflow"] : n;
-  }, [b, m]), {
-    getTabProps: E,
-    getPanelProps: K,
-    handleKeyDown: I,
-    setFocusedTabId: x
+  const M = s || (o[0] ? o[0].id : ""), [m, w] = A(M), [y, h] = A(!1), T = d ?? o?.length, f = o.slice(0, T), u = o.slice(T), b = u.find((e) => e.id === m), E = o.some((e) => e.renderTabContent), k = H($, "tabs"), R = _(() => {
+    const e = f.filter((l) => !l.disabled), t = u.filter((l) => !l.disabled), n = e.map((l) => l.id);
+    return t.length > 0 ? [...n, "overflow"] : n;
+  }, [f, u]), {
+    getTabProps: I,
+    getPanelProps: S,
+    handleKeyDown: x,
+    setFocusedTabId: C
   } = V({
-    itemIds: M,
-    activeItem: d,
+    itemIds: R,
+    activeItem: m,
     orientation: "horizontal",
-    idBase: y,
-    includePanelLinks: w || !!f,
-    externalPanelId: f
-  }), k = S(null);
-  _(() => {
-    g(l || "");
-  }, [l]);
-  const C = (e) => {
-    g(e?.id), i?.(e?.id);
-  }, P = (e, r) => e.id === r;
-  if (v && t.length === 1) {
-    const e = t[0];
-    return /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(v, {
+    idBase: k,
+    includePanelLinks: E || !!p,
+    externalPanelId: p
+  }), N = F(null), v = F(!1);
+  j(() => {
+    w(s || "");
+  }, [s]);
+  const P = (e) => {
+    w(e?.id), c?.(e?.id);
+  }, D = (e, t) => e.id === t;
+  if (g && o.length === 1) {
+    const e = o[0];
+    return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(g, {
       className: "se-design-tabs se-design-tabs-heading"
-    }, e.label), /* @__PURE__ */ o.createElement("div", {
+    }, e.label), /* @__PURE__ */ r.createElement("div", {
       className: "se-design-tabs-content"
-    }, /* @__PURE__ */ o.createElement("div", {
+    }, /* @__PURE__ */ r.createElement("div", {
       className: "tab-content block"
     }, e?.renderTabContent && e?.renderTabContent(e))));
   }
-  return /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement("div", s({
+  return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement("div", i({
     className: "se-design-tabs flex items-stretch relative border rounded-md border-[var(--color-gray-400)] w-fit",
     role: "tablist",
     "data-automation-id": "tabs-container"
-  }, H({
-    ariaLabel: D,
-    ariaLabelledBy: L
-  })), b.map((e) => {
-    const r = d === e.id, n = !!e.disabled, a = E(e.id);
-    return /* @__PURE__ */ o.createElement("button", s({
+  }, U({
+    ariaLabel: L,
+    ariaLabelledBy: K
+  })), f.map((e) => {
+    const t = m === e.id, n = !!e.disabled, l = I(e.id);
+    return /* @__PURE__ */ r.createElement("button", i({
       type: "button",
       key: e.id
-    }, a, {
+    }, l, {
       disabled: n,
       "aria-label": e.ariaLabel,
-      onFocus: () => !n && x(e.id),
-      onKeyDown: I,
-      onClick: () => C(e),
-      className: `se-design-tab-item flex items-center text-base px-3 py-0.5 min-w-0 border-l first:border-l-0 first:rounded-l-[0.3rem] last:rounded-r-[0.3rem] border-[var(--color-gray-400)] ${n ? "" : "focus-outline"} ${n ? "text-[var(--color-gray-400)] cursor-not-allowed" : r ? "se-design-tab-item-active text-[var(--color-white)] bg-[var(--color-blue-500)] font-medium hover:cursor-pointer" : "text-[var(--color-gray-700)] font-normal hover:bg-[var(--color-gray-50)] hover:text-[var(--color-gray-900)] cursor-pointer transition-all duration-200 ease-in-out"}`,
+      onFocus: () => !n && C(e.id),
+      onKeyDown: x,
+      onClick: () => P(e),
+      className: `se-design-tab-item flex items-center text-base px-3 py-0.5 min-w-0 border-l first:border-l-0 first:rounded-l-[0.3rem] last:rounded-r-[0.3rem] border-[var(--color-gray-400)] ${n ? "" : "focus-outline"} ${n ? "text-[var(--color-gray-400)] cursor-not-allowed" : t ? "se-design-tab-item-active text-[var(--color-white)] bg-[var(--color-blue-500)] font-medium hover:cursor-pointer" : "text-[var(--color-gray-700)] font-normal hover:bg-[var(--color-gray-50)] hover:text-[var(--color-gray-900)] cursor-pointer transition-all duration-200 ease-in-out"}`,
       "data-automation-id": `tab-item-${e.automationId || e.id || ""}`
     }), e.label);
-  }), m.length > 0 && /* @__PURE__ */ o.createElement(j, {
+  }), u.length > 0 && /* @__PURE__ */ r.createElement(B, {
     className: "se-design-overflow-tabs",
     position: "bottom-left",
-    automationId: "tabs-kebab-menu",
     noBorder: !0,
     disableClickToggle: !0,
     onPopoverToggle: (e) => {
-      e || k.current?.focus();
+      e || (v.current && N.current?.focus(), v.current = !1);
     },
     renderPopoverSrcElement: ({
       displayPopover: e,
-      togglePopover: r
+      togglePopover: t
     }) => {
-      const n = E("overflow"), a = u ? q(u.id, y) : void 0;
-      return /* @__PURE__ */ o.createElement("div", s({}, n, {
-        ref: (N) => {
-          k.current = N, n.ref(N);
+      const n = I("overflow"), l = b ? q(b.id, k) : void 0;
+      return /* @__PURE__ */ r.createElement("div", i({}, n, {
+        ref: (a) => {
+          N.current = a, n.ref(a);
         },
-        "aria-controls": a,
+        "aria-controls": l,
         "aria-haspopup": "true",
         "aria-expanded": e,
-        onClick: () => r(),
-        onFocus: () => x("overflow"),
-        onKeyDown: I,
-        className: `overflow-tabs-src-element focus-outline border-l px-3 py-0.5 rounded-r-md font-medium hover:cursor-pointer transition-all duration-200 ease-in-out ${e ? "bg-[var(--color-blue-100)]" : ""} ${u?.label ? "bg-[var(--color-blue-500)]" : "hover:bg-[var(--color-gray-50)]"}`,
+        onClick: () => {
+          v.current = !1, t(!0);
+        },
+        onFocus: () => C("overflow"),
+        "data-automation-id": "tabs-kebab-menu",
+        onKeyDown: (a) => {
+          a.key === "Enter" || a.key === " " || a.key === "ArrowDown" ? (a.preventDefault(), v.current = !0, t(!0)) : a.key === "ArrowUp" ? (a.preventDefault(), v.current = !0, t("last")) : x(a);
+        },
+        className: `overflow-tabs-src-element focus-outline border-l px-3 py-0.5 rounded-r-md font-medium hover:cursor-pointer transition-all duration-200 ease-in-out ${e ? "bg-[var(--color-blue-100)]" : ""} ${b?.label ? "bg-[var(--color-blue-500)]" : "hover:bg-[var(--color-gray-50)]"}`,
         onMouseEnter: () => h(!0),
         onMouseLeave: () => h(!1)
-      }), u?.label ? /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement("span", {
+      }), b?.label ? /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement("span", {
         className: "text-[var(--color-white)]"
-      }, u?.label), /* @__PURE__ */ o.createElement($, {
+      }, b?.label), /* @__PURE__ */ r.createElement(O, {
         name: "chevron",
         rotation: e ? "180" : "0",
-        stroke: p ? "var(--color-gray-100)" : "var(--color-white)"
-      })) : /* @__PURE__ */ o.createElement($, {
+        stroke: y ? "var(--color-gray-100)" : "var(--color-white)"
+      })) : /* @__PURE__ */ r.createElement(O, {
         name: "kebab-menu",
-        fill: p ? "var(--color-gray-900)" : "var(--color-gray-700)"
+        fill: y ? "var(--color-gray-900)" : "var(--color-gray-700)"
       }));
     },
     renderPopoverContents: ({
       closePopoverCb: e
-    }) => /* @__PURE__ */ o.createElement(B, {
-      items: m.map((r) => ({
-        id: r?.id,
-        label: r?.label,
-        automationId: r?.automationId || r?.id,
+    }) => /* @__PURE__ */ r.createElement(z, {
+      items: u.map((t) => ({
+        id: t?.id,
+        label: t?.label,
+        automationId: t?.automationId || t?.id,
         onClick: () => {
-          C(r), e();
+          P(t), e();
         }
       }))
     })
-  })), w && /* @__PURE__ */ o.createElement("div", {
+  })), E && /* @__PURE__ */ r.createElement("div", {
     className: "se-design-tabs-content"
-  }, t.map((e) => /* @__PURE__ */ o.createElement("div", s({
+  }, o.map((e) => /* @__PURE__ */ r.createElement("div", i({
     key: e.id
-  }, K(e.id), {
-    className: `tab-content ${P(e, d) ? "block" : "hidden"}`
-  }), P(e, d) && e.renderTabContent?.(e)))));
+  }, S(e.id), {
+    className: `tab-content ${D(e, m) ? "block" : "hidden"}`
+  }), D(e, m) && e.renderTabContent?.(e)))));
 };
 export {
-  ee as Tabs
+  re as Tabs
 };
 //# sourceMappingURL=index28.js.map

package/dist/index28.js.map

@@ -1 +1 @@
-{"version":3,"file":"index28.js","sources":["../src/components/Tabs/index.tsx"],"sourcesContent":["import React, { FC, ReactNode, useState, useEffect, useMemo, useRef } from 'react';\nimport { Icon } from '../Icon';\nimport { Popover } from '../Popover';\nimport { MenuList } from '../MenuList';\nimport { useStableId } from '../../utils/useStableId';\nimport { useTabsA11y, getPanelId, getA11yNameAttributes } from '../../utils/a11y';\n\nimport './style.scss';\n\ninterface TabProps {\n  label: string;\n  id: string;\n  disabled?: boolean;\n  renderTabContent?: (tab: TabProps) => ReactNode;\n  automationId?: string;\n  ariaLabel?: string;\n}\ninterface TabsProps {\n  defaultActiveTab?: string;\n  tabs: TabProps[];\n  onTabChange?: (tabId: string) => void;\n  primaryTabCount?: number; // prop for controlling primary tabs\n  headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span'; // heading tag to render single tab as a heading element when only one tab is present\n  automationId?: string;\n  id?: string; // custom ID for baseId (passed to useStableId)\n  ariaLabel?: string; // Accessible name when no visible label exists\n  ariaLabelledBy?: string; // ID of element that labels this tablist (preferred over ariaLabel)\n  panelId?: string; // When consumer manages a single external panel, pass its id here\n}\n\nexport const Tabs: FC<TabsProps> = ({\n  defaultActiveTab,\n  tabs,\n  onTabChange,\n  primaryTabCount,\n  headingLevel: HeadingTag,\n  id,\n  ariaLabel = 'Tabs',\n  ariaLabelledBy,\n  panelId\n}) => {\n  const defaultTabId = defaultActiveTab || (tabs[0] ? tabs[0].id : '');\n  const [activeTab, setActiveTab] = useState(defaultTabId);\n  const [isIconTabHover, setIsIconTabHover] = useState(false);\n\n  const visibleTabCount = primaryTabCount ?? tabs?.length;\n  const visibleTabs = tabs.slice(0, visibleTabCount);\n  const overflowTabs = tabs.slice(visibleTabCount);\n  const activeOverflowTab = overflowTabs.find((tab) => tab.id === activeTab);\n\n  // Only render internal panels if at least one tab provides content via renderTabContent\n  const hasPanelContent = tabs.some(t => t.renderTabContent);\n\n  // A11y setup\n  const baseId = useStableId(id, 'tabs');\n  const itemIds = useMemo(() => {\n    const enabledVisibleTabs = visibleTabs.filter(t => !t.disabled);\n    const enabledOverflowTabs = overflowTabs.filter(t => !t.disabled);\n    const visibleIds = enabledVisibleTabs.map(t => t.id);\n    return enabledOverflowTabs.length > 0 ? [...visibleIds, 'overflow'] : visibleIds;\n  }, [visibleTabs, overflowTabs]);\n\n  const { getTabProps, getPanelProps, handleKeyDown, setFocusedTabId } = useTabsA11y({\n    itemIds,\n    activeItem: activeTab,\n    orientation: 'horizontal',\n    idBase: baseId,\n    includePanelLinks: hasPanelContent || !!panelId,\n    externalPanelId: panelId\n  });\n\n  // Ref for the overflow button div — needed to return focus after menu closes\n  const overflowDivRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    setActiveTab(defaultActiveTab || '');\n  }, [defaultActiveTab]);\n\n  const handleTabClick = (tab: TabProps) => {\n    setActiveTab(tab?.id);\n    onTabChange?.(tab?.id);\n  };\n\n  const isTabActive = (tab: TabProps, activeTab: string) => {\n    return tab.id === activeTab;\n  };\n\n  if (HeadingTag && tabs.length === 1) {\n    const singleTab = tabs[0];\n    return (\n      <>\n        <HeadingTag className=\"se-design-tabs se-design-tabs-heading\">\n          {singleTab.label}\n        </HeadingTag>\n        <div className=\"se-design-tabs-content\">\n          <div className=\"tab-content block\">\n            {singleTab?.renderTabContent && singleTab?.renderTabContent(singleTab)}\n          </div>\n        </div>\n      </>\n    );\n  }\n\n  return (\n    <>\n      <div\n        className=\"se-design-tabs flex items-stretch relative border rounded-md border-[var(--color-gray-400)] w-fit\"\n        role=\"tablist\"\n        data-automation-id=\"tabs-container\"\n        {...getA11yNameAttributes({\n          ariaLabel,\n          ariaLabelledBy\n        })}\n      >\n        {visibleTabs.map((tab) => {\n          const isActive = activeTab === tab.id;\n          const isDisabled = !!tab.disabled;\n          const tabProps = getTabProps(tab.id);\n          return (\n            <button\n              type=\"button\"\n              key={tab.id}\n              {...tabProps}\n              disabled={isDisabled}\n              aria-label={tab.ariaLabel}\n              onFocus={() => !isDisabled && setFocusedTabId(tab.id)}\n              onKeyDown={handleKeyDown}\n              onClick={() => handleTabClick(tab)}\n              className={`se-design-tab-item flex items-center text-base px-3 py-0.5 min-w-0 border-l first:border-l-0 first:rounded-l-[0.3rem] last:rounded-r-[0.3rem] border-[var(--color-gray-400)] ${!isDisabled ? 'focus-outline' : ''} ${\n                isDisabled\n                  ? 'text-[var(--color-gray-400)] cursor-not-allowed'\n                  : isActive\n                  ? 'se-design-tab-item-active text-[var(--color-white)] bg-[var(--color-blue-500)] font-medium hover:cursor-pointer'\n                  : 'text-[var(--color-gray-700)] font-normal hover:bg-[var(--color-gray-50)] hover:text-[var(--color-gray-900)] cursor-pointer transition-all duration-200 ease-in-out'\n              }`}\n              data-automation-id={`tab-item-${tab.automationId || tab.id || ''}`}\n            >\n              {tab.label}\n            </button>\n          );\n        })}\n\n        {overflowTabs.length > 0 && (\n          <Popover\n            className=\"se-design-overflow-tabs\"\n            position=\"bottom-left\"\n            automationId=\"tabs-kebab-menu\"\n            noBorder\n            disableClickToggle={true}\n            onPopoverToggle={(isOpen) => {\n              // Return focus to the overflow button when the menu closes (e.g. Escape)\n              if (!isOpen) overflowDivRef.current?.focus();\n            }}\n            renderPopoverSrcElement={({ displayPopover, togglePopover }) => {\n              const overflowTabProps = getTabProps('overflow');\n              const overflowAriaControls = activeOverflowTab\n                ? getPanelId(activeOverflowTab.id, baseId)\n                : undefined;\n\n              return (\n                <div\n                  {...overflowTabProps}\n                  ref={(el) => { overflowDivRef.current = el; overflowTabProps.ref(el); }}\n                  aria-controls={overflowAriaControls}\n                  aria-haspopup=\"true\"\n                  aria-expanded={displayPopover}\n                  onClick={() => togglePopover()}\n                  onFocus={() => setFocusedTabId('overflow')}\n                  onKeyDown={handleKeyDown}\n                  className={`overflow-tabs-src-element focus-outline border-l px-3 py-0.5 rounded-r-md font-medium hover:cursor-pointer transition-all duration-200 ease-in-out ${\n                    displayPopover ? 'bg-[var(--color-blue-100)]' : ''\n                  } ${activeOverflowTab?.label ? 'bg-[var(--color-blue-500)]' : 'hover:bg-[var(--color-gray-50)]'}`}\n                  onMouseEnter={() => setIsIconTabHover(true)}\n                  onMouseLeave={() => setIsIconTabHover(false)}\n                >\n                  {activeOverflowTab?.label ? (\n                    <>\n                      <span className=\"text-[var(--color-white)]\">{activeOverflowTab?.label}</span>\n                      <Icon\n                        name=\"chevron\"\n                        rotation={displayPopover ? '180' : '0'}\n                        stroke={isIconTabHover ? 'var(--color-gray-100)' : 'var(--color-white)'}\n                      />\n                    </>\n                  ) : (\n                    <Icon name=\"kebab-menu\" fill={isIconTabHover ? 'var(--color-gray-900)' : 'var(--color-gray-700)'} />\n                  )}\n                </div>\n              );\n            }}\n            renderPopoverContents={({ closePopoverCb }) => (\n              <MenuList\n                items={overflowTabs.map((tab) => ({\n                  id: tab?.id,\n                  label: tab?.label,\n                  automationId: tab?.automationId || tab?.id,\n                  onClick: () => {\n                    handleTabClick(tab);\n                    closePopoverCb();\n                  }\n                }))}\n              />\n            )}\n          />\n        )}\n      </div>\n\n      {hasPanelContent && (\n        <div className=\"se-design-tabs-content\">\n          {tabs.map((tab) => (\n            <div\n              key={tab.id}\n              {...getPanelProps(tab.id)}\n              className={`tab-content ${isTabActive(tab, activeTab) ? 'block' : 'hidden'}`}\n            >\n              {isTabActive(tab, activeTab) && tab.renderTabContent?.(tab)}\n            </div>\n          ))}\n        </div>\n      )}\n    </>\n  );\n};\n"],"names":["Tabs","defaultActiveTab","tabs","onTabChange","primaryTabCount","headingLevel","HeadingTag","id","ariaLabel","ariaLabelledBy","panelId","defaultTabId","activeTab","setActiveTab","useState","isIconTabHover","setIsIconTabHover","visibleTabCount","length","visibleTabs","slice","overflowTabs","activeOverflowTab","find","tab","hasPanelContent","some","t","renderTabContent","baseId","useStableId","itemIds","useMemo","enabledVisibleTabs","filter","disabled","enabledOverflowTabs","visibleIds","map","getTabProps","getPanelProps","handleKeyDown","setFocusedTabId","useTabsA11y","activeItem","orientation","idBase","includePanelLinks","externalPanelId","overflowDivRef","useRef","useEffect","handleTabClick","isTabActive","singleTab","createElement","React","Fragment","className","label","_extends","role","getA11yNameAttributes","isActive","isDisabled","tabProps","type","key","onFocus","onKeyDown","onClick","automationId","Popover","position","noBorder","disableClickToggle","onPopoverToggle","isOpen","current","focus","renderPopoverSrcElement","displayPopover","togglePopover","overflowTabProps","overflowAriaControls","getPanelId","undefined","ref","el","onMouseEnter","onMouseLeave","Icon","name","rotation","stroke","fill","renderPopoverContents","closePopoverCb","MenuList","items"],"mappings":"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"}
+{"version":3,"file":"index28.js","sources":["../src/components/Tabs/index.tsx"],"sourcesContent":["import React, { FC, ReactNode, useState, useEffect, useMemo, useRef } from 'react';\nimport { Icon } from '../Icon';\nimport { Popover } from '../Popover';\nimport { MenuList } from '../MenuList';\nimport { useStableId } from '../../utils/useStableId';\nimport { useTabsA11y, getPanelId, getA11yNameAttributes } from '../../utils/a11y';\n\nimport './style.scss';\n\ninterface TabProps {\n  label: string;\n  id: string;\n  disabled?: boolean;\n  renderTabContent?: (tab: TabProps) => ReactNode;\n  automationId?: string;\n  ariaLabel?: string;\n}\ninterface TabsProps {\n  defaultActiveTab?: string;\n  tabs: TabProps[];\n  onTabChange?: (tabId: string) => void;\n  primaryTabCount?: number; // prop for controlling primary tabs\n  headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span'; // heading tag to render single tab as a heading element when only one tab is present\n  automationId?: string;\n  id?: string; // custom ID for baseId (passed to useStableId)\n  ariaLabel?: string; // Accessible name when no visible label exists\n  ariaLabelledBy?: string; // ID of element that labels this tablist (preferred over ariaLabel)\n  panelId?: string; // When consumer manages a single external panel, pass its id here\n}\n\nexport const Tabs: FC<TabsProps> = ({\n  defaultActiveTab,\n  tabs,\n  onTabChange,\n  primaryTabCount,\n  headingLevel: HeadingTag,\n  id,\n  ariaLabel = 'Tabs',\n  ariaLabelledBy,\n  panelId\n}) => {\n  const defaultTabId = defaultActiveTab || (tabs[0] ? tabs[0].id : '');\n  const [activeTab, setActiveTab] = useState(defaultTabId);\n  const [isIconTabHover, setIsIconTabHover] = useState(false);\n\n  const visibleTabCount = primaryTabCount ?? tabs?.length;\n  const visibleTabs = tabs.slice(0, visibleTabCount);\n  const overflowTabs = tabs.slice(visibleTabCount);\n  const activeOverflowTab = overflowTabs.find((tab) => tab.id === activeTab);\n\n  // Only render internal panels if at least one tab provides content via renderTabContent\n  const hasPanelContent = tabs.some(t => t.renderTabContent);\n\n  // A11y setup\n  const baseId = useStableId(id, 'tabs');\n  const itemIds = useMemo(() => {\n    const enabledVisibleTabs = visibleTabs.filter(t => !t.disabled);\n    const enabledOverflowTabs = overflowTabs.filter(t => !t.disabled);\n    const visibleIds = enabledVisibleTabs.map(t => t.id);\n    return enabledOverflowTabs.length > 0 ? [...visibleIds, 'overflow'] : visibleIds;\n  }, [visibleTabs, overflowTabs]);\n\n  const { getTabProps, getPanelProps, handleKeyDown, setFocusedTabId } = useTabsA11y({\n    itemIds,\n    activeItem: activeTab,\n    orientation: 'horizontal',\n    idBase: baseId,\n    includePanelLinks: hasPanelContent || !!panelId,\n    externalPanelId: panelId\n  });\n\n  // Ref for the overflow button div — needed to return focus after menu closes\n  const overflowDivRef = useRef<HTMLDivElement>(null);\n  // Track whether the overflow popover was opened via keyboard — only return focus\n  // programmatically in that case (mouse-opened popovers should not trigger :focus-visible on close)\n  const wasKeyboardOpenedRef = useRef(false);\n\n  useEffect(() => {\n    setActiveTab(defaultActiveTab || '');\n  }, [defaultActiveTab]);\n\n  const handleTabClick = (tab: TabProps) => {\n    setActiveTab(tab?.id);\n    onTabChange?.(tab?.id);\n  };\n\n  const isTabActive = (tab: TabProps, activeTab: string) => {\n    return tab.id === activeTab;\n  };\n\n  if (HeadingTag && tabs.length === 1) {\n    const singleTab = tabs[0];\n    return (\n      <>\n        <HeadingTag className=\"se-design-tabs se-design-tabs-heading\">\n          {singleTab.label}\n        </HeadingTag>\n        <div className=\"se-design-tabs-content\">\n          <div className=\"tab-content block\">\n            {singleTab?.renderTabContent && singleTab?.renderTabContent(singleTab)}\n          </div>\n        </div>\n      </>\n    );\n  }\n\n  return (\n    <>\n      <div\n        className=\"se-design-tabs flex items-stretch relative border rounded-md border-[var(--color-gray-400)] w-fit\"\n        role=\"tablist\"\n        data-automation-id=\"tabs-container\"\n        {...getA11yNameAttributes({\n          ariaLabel,\n          ariaLabelledBy\n        })}\n      >\n        {visibleTabs.map((tab) => {\n          const isActive = activeTab === tab.id;\n          const isDisabled = !!tab.disabled;\n          const tabProps = getTabProps(tab.id);\n          return (\n            <button\n              type=\"button\"\n              key={tab.id}\n              {...tabProps}\n              disabled={isDisabled}\n              aria-label={tab.ariaLabel}\n              onFocus={() => !isDisabled && setFocusedTabId(tab.id)}\n              onKeyDown={handleKeyDown}\n              onClick={() => handleTabClick(tab)}\n              className={`se-design-tab-item flex items-center text-base px-3 py-0.5 min-w-0 border-l first:border-l-0 first:rounded-l-[0.3rem] last:rounded-r-[0.3rem] border-[var(--color-gray-400)] ${!isDisabled ? 'focus-outline' : ''} ${\n                isDisabled\n                  ? 'text-[var(--color-gray-400)] cursor-not-allowed'\n                  : isActive\n                  ? 'se-design-tab-item-active text-[var(--color-white)] bg-[var(--color-blue-500)] font-medium hover:cursor-pointer'\n                  : 'text-[var(--color-gray-700)] font-normal hover:bg-[var(--color-gray-50)] hover:text-[var(--color-gray-900)] cursor-pointer transition-all duration-200 ease-in-out'\n              }`}\n              data-automation-id={`tab-item-${tab.automationId || tab.id || ''}`}\n            >\n              {tab.label}\n            </button>\n          );\n        })}\n\n        {overflowTabs.length > 0 && (\n          <Popover\n            className=\"se-design-overflow-tabs\"\n            position=\"bottom-left\"\n            noBorder\n            disableClickToggle={true}\n            onPopoverToggle={(isOpen) => {\n              if (!isOpen) {\n                // Only return focus programmatically when the popover was opened via keyboard.\n                // Mouse-opened popovers must not call .focus() — programmatic focus after a\n                // pointer interaction triggers :focus-visible intermittently across browsers.\n                if (wasKeyboardOpenedRef.current) overflowDivRef.current?.focus();\n                wasKeyboardOpenedRef.current = false;\n              }\n            }}\n            renderPopoverSrcElement={({ displayPopover, togglePopover }) => {\n              const overflowTabProps = getTabProps('overflow');\n              const overflowAriaControls = activeOverflowTab\n                ? getPanelId(activeOverflowTab.id, baseId)\n                : undefined;\n\n              return (\n                <div\n                  {...overflowTabProps}\n                  ref={(el) => { overflowDivRef.current = el; overflowTabProps.ref(el); }}\n                  aria-controls={overflowAriaControls}\n                  aria-haspopup=\"true\"\n                  aria-expanded={displayPopover}\n                  onClick={() => { wasKeyboardOpenedRef.current = false; togglePopover(true); }}\n                  onFocus={() => setFocusedTabId('overflow')}\n                  data-automation-id=\"tabs-kebab-menu\"\n                  onKeyDown={(e) => {\n                    if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {\n                      e.preventDefault();\n                      wasKeyboardOpenedRef.current = true;\n                      togglePopover(true);\n                    } else if (e.key === 'ArrowUp') {\n                      e.preventDefault();\n                      wasKeyboardOpenedRef.current = true;\n                      togglePopover('last');\n                    } else {\n                      handleKeyDown(e);\n                    }\n                  }}\n                  className={`overflow-tabs-src-element focus-outline border-l px-3 py-0.5 rounded-r-md font-medium hover:cursor-pointer transition-all duration-200 ease-in-out ${\n                    displayPopover ? 'bg-[var(--color-blue-100)]' : ''\n                  } ${activeOverflowTab?.label ? 'bg-[var(--color-blue-500)]' : 'hover:bg-[var(--color-gray-50)]'}`}\n                  onMouseEnter={() => setIsIconTabHover(true)}\n                  onMouseLeave={() => setIsIconTabHover(false)}\n                >\n                  {activeOverflowTab?.label ? (\n                    <>\n                      <span className=\"text-[var(--color-white)]\">{activeOverflowTab?.label}</span>\n                      <Icon\n                        name=\"chevron\"\n                        rotation={displayPopover ? '180' : '0'}\n                        stroke={isIconTabHover ? 'var(--color-gray-100)' : 'var(--color-white)'}\n                      />\n                    </>\n                  ) : (\n                    <Icon name=\"kebab-menu\" fill={isIconTabHover ? 'var(--color-gray-900)' : 'var(--color-gray-700)'} />\n                  )}\n                </div>\n              );\n            }}\n            renderPopoverContents={({ closePopoverCb }) => (\n              <MenuList\n                items={overflowTabs.map((tab) => ({\n                  id: tab?.id,\n                  label: tab?.label,\n                  automationId: tab?.automationId || tab?.id,\n                  onClick: () => {\n                    handleTabClick(tab);\n                    closePopoverCb();\n                  }\n                }))}\n              />\n            )}\n          />\n        )}\n      </div>\n\n      {hasPanelContent && (\n        <div className=\"se-design-tabs-content\">\n          {tabs.map((tab) => (\n            <div\n              key={tab.id}\n              {...getPanelProps(tab.id)}\n              className={`tab-content ${isTabActive(tab, activeTab) ? 'block' : 'hidden'}`}\n            >\n              {isTabActive(tab, activeTab) && tab.renderTabContent?.(tab)}\n            </div>\n          ))}\n        </div>\n      )}\n    </>\n  );\n};\n"],"names":["Tabs","defaultActiveTab","tabs","onTabChange","primaryTabCount","headingLevel","HeadingTag","id","ariaLabel","ariaLabelledBy","panelId","defaultTabId","activeTab","setActiveTab","useState","isIconTabHover","setIsIconTabHover","visibleTabCount","length","visibleTabs","slice","overflowTabs","activeOverflowTab","find","tab","hasPanelContent","some","t","renderTabContent","baseId","useStableId","itemIds","useMemo","enabledVisibleTabs","filter","disabled","enabledOverflowTabs","visibleIds","map","getTabProps","getPanelProps","handleKeyDown","setFocusedTabId","useTabsA11y","activeItem","orientation","idBase","includePanelLinks","externalPanelId","overflowDivRef","useRef","wasKeyboardOpenedRef","useEffect","handleTabClick","isTabActive","singleTab","createElement","React","Fragment","className","label","_extends","role","getA11yNameAttributes","isActive","isDisabled","tabProps","type","key","onFocus","onKeyDown","onClick","automationId","Popover","position","noBorder","disableClickToggle","onPopoverToggle","isOpen","current","focus","renderPopoverSrcElement","displayPopover","togglePopover","overflowTabProps","overflowAriaControls","getPanelId","undefined","ref","el","e","preventDefault","onMouseEnter","onMouseLeave","Icon","name","rotation","stroke","fill","renderPopoverContents","closePopoverCb","MenuList","items"],"mappings":"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"}

package/dist/index32.js

@@ -1,77 +1,75 @@
-import t, { useRef as $ } from "react";
+import e, { useRef as $ } from "react";
 import { useStableId as y } from "./index190.js";
-function L(e) {
+function L(a) {
   const {
-    label: u,
+    label: s,
     value: n,
-    checked: r,
-    disabled: a,
-    name: c,
-    onChange: i,
+    checked: l,
+    disabled: t,
+    name: i,
+    onChange: u,
     width: m,
     radioLabelClassName: f = "",
-    radioContainerClassName: h = "",
-    automationId: p = "",
+    radioContainerClassName: p = "",
+    automationId: h = "",
     bgColor: b = "var(--color-white)",
     withBorder: x = !0,
-    content: d
-  } = e, o = $(null), s = y(void 0, `${c}-${n}`);
-  t.useLayoutEffect(() => {
-    o.current && (o.current.checked = r);
-  }, [r]);
+    content: c
+  } = a, o = $(null), d = y(void 0, `${i}-${n}`);
+  e.useLayoutEffect(() => {
+    o.current && (o.current.checked = l);
+  }, [l]);
   const C = () => {
-    a || (o.current?.focus(), o.current?.click());
-  }, g = (l) => {
-    l.preventDefault(), l.stopPropagation(), a || (o.current?.focus(), i?.({
-      ...e,
-      checked: !0
-    }));
-  }, k = (l) => {
-    l.stopPropagation();
-  }, v = () => {
-    i?.({
-      ...e,
+    t || (o.current?.focus(), o.current?.click());
+  }, g = (r) => {
+    r.stopPropagation();
+  }, k = (r) => {
+    r.stopPropagation();
+  }, w = () => {
+    u?.({
+      ...a,
       checked: !0
     });
-  }, w = r ? "border-[var(--color-blue-500)]" : "border-[var(--color-gray-400)]";
-  return /* @__PURE__ */ t.createElement("div", {
-    className: `se-design-radio-container flex flex-col justify-center items-start gap-2 ${a ? "cursor-not-allowed" : "cursor-pointer"} ${x ? `border ${w} p-4` : ""} rounded-[6px] transition-colors duration-300 ${a ? "opacity-50" : ""} ${h}`,
+  }, v = l ? "border-[var(--color-blue-500)]" : "border-[var(--color-gray-400)]";
+  return /* @__PURE__ */ e.createElement("div", {
+    className: `se-design-radio-container flex flex-col justify-center items-start gap-2 ${t ? "cursor-not-allowed" : "cursor-pointer"} ${x ? `border ${v} p-4` : ""} rounded-[6px] transition-colors duration-300 ${t ? "opacity-50" : ""} ${p}`,
     onClick: C,
     style: {
       width: m || "auto",
       backgroundColor: b
     },
-    "data-automation-id": p
-  }, /* @__PURE__ */ t.createElement("div", {
+    "data-automation-id": h
+  }, /* @__PURE__ */ e.createElement("div", {
     className: "flex items-center gap-[0.625rem]",
     "data-automation-id": "radio-field-content"
-  }, /* @__PURE__ */ t.createElement("input", {
+  }, /* @__PURE__ */ e.createElement("input", {
     ref: o,
     type: "radio",
-    id: s,
-    name: c,
+    id: d,
+    name: i,
     value: n,
-    disabled: a,
+    disabled: t,
     className: "radio-field-input cursor-pointer accent-[var(--color-blue-500)] disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-blue-500)] w-[14px] h-[14px] p-[3px]",
     onClick: k,
-    onChange: v
-  }), /* @__PURE__ */ t.createElement("label", {
-    htmlFor: s,
-    className: `${e.helperLabel ? "flex flex-col gap-[6px] " : ""}${a ? "cursor-not-allowed" : "cursor-pointer"}`,
+    onChange: w
+  }), /* @__PURE__ */ e.createElement("label", {
+    htmlFor: d,
+    className: `${a.helperLabel ? "flex flex-col gap-[6px] " : ""}${t ? "cursor-not-allowed" : "cursor-pointer"}`,
     "data-automation-id": "radio-field-label",
     onClick: g
-  }, /* @__PURE__ */ t.createElement("span", {
+  }, /* @__PURE__ */ e.createElement("span", {
     className: `text-sm text-[var(--color-gray-800)] ${f} `,
     style: {
       fontSize: "16px",
       fontWeight: "400"
     }
-  }, u))), r && d && /* @__PURE__ */ t.createElement("div", {
-    className: "radio-child-content pl-[1.5rem] w-full"
-  }, d()), e.helperLabel && /* @__PURE__ */ t.createElement("span", {
-    className: `text-sm font-normal text-[var(--color-gray-600)] ${e.maxWidth ? `max-w-[${e.maxWidth}]` : "max-w-full"} break-words whitespace-normal`,
+  }, s))), l && c && /* @__PURE__ */ e.createElement("div", {
+    className: "radio-child-content pl-[1.5rem] w-full",
+    onClick: (r) => r.stopPropagation()
+  }, c()), a.helperLabel && /* @__PURE__ */ e.createElement("span", {
+    className: `text-sm font-normal text-[var(--color-gray-600)] ${a.maxWidth ? `max-w-[${a.maxWidth}]` : "max-w-full"} break-words whitespace-normal`,
     "data-automation-id": "radio-field-helper-text"
-  }, e.helperLabel));
+  }, a.helperLabel));
 }
 export {
   L as Radio

package/dist/index32.js.map

@@ -1 +1 @@
-{"version":3,"file":"index32.js","sources":["../src/components/Radio/index.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { useStableId } from '../../utils/useStableId';\n\nexport interface RadioProps {\n  label: string;\n  value: string;\n  checked: boolean;\n  disabled: boolean;\n  name: string;\n  onChange?: (props: RadioProps) => void;\n  helperLabel?: string;\n  maxWidth?: string;\n  width?: string;\n  radioLabelClassName?: string;\n  radioContainerClassName?: string;\n  automationId?: string;\n  withBorder?: boolean;\n  bgColor?: string;\n  content?: () => React.ReactNode;\n}\n\nexport function Radio(props: RadioProps) {\n  const {\n    label,\n    value,\n    checked,\n    disabled,\n    name,\n    onChange,\n    width,\n    radioLabelClassName = '',\n    radioContainerClassName = '',\n    automationId = '',\n    bgColor = 'var(--color-white)',\n    withBorder = true,\n    content\n  } = props;\n  const radioRef = useRef<HTMLInputElement>(null);\n  const inputId = useStableId(undefined, `${name}-${value}`);\n\n  // Sync DOM checked state with prop — bypasses React's controlled-input restore mechanism\n  // which resets DOM.checked=false after the first click on an unselected radio.\n  React.useLayoutEffect(() => {\n    if (radioRef.current) {\n      radioRef.current.checked = checked;\n    }\n  }, [checked]);\n\n  const handleContainerClick = () => {\n    if (!disabled) {\n      radioRef.current?.focus();\n      radioRef.current?.click();\n    }\n  };\n\n  const handleLabelClick = (e: React.MouseEvent<HTMLLabelElement>) => {\n    // Prevent native htmlFor redirect (avoids double-firing onChange) while keeping htmlFor for SR association\n    e.preventDefault();\n    e.stopPropagation();\n    if (!disabled) {\n      radioRef.current?.focus();\n      onChange?.({ ...props, checked: true });\n    }\n  };\n\n  const handleInputClick = (e: React.MouseEvent<HTMLInputElement>) => {\n    e.stopPropagation();\n  };\n\n  const handleInputChange = () => {\n    onChange?.({ ...props, checked: true });\n  };\n\n  const borderColor = checked ? 'border-[var(--color-blue-500)]' : 'border-[var(--color-gray-400)]';\n\n  return (\n    <div\n      className={`se-design-radio-container flex flex-col justify-center items-start gap-2 ${\n        disabled ? 'cursor-not-allowed' : 'cursor-pointer'\n      } ${\n        withBorder ? `border ${borderColor} p-4` : ''\n      } rounded-[6px] transition-colors duration-300 ${disabled ? 'opacity-50' : ''} ${radioContainerClassName}`}\n      onClick={handleContainerClick}\n      style={{ width: width || 'auto', backgroundColor: bgColor }}\n      data-automation-id={automationId}\n    >\n      <div className=\"flex items-center gap-[0.625rem]\" data-automation-id=\"radio-field-content\">\n        <input\n          ref={radioRef}\n          type=\"radio\"\n          id={inputId}\n          name={name}\n          value={value}\n          disabled={disabled}\n          className=\"radio-field-input cursor-pointer accent-[var(--color-blue-500)] disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-blue-500)] w-[14px] h-[14px] p-[3px]\"\n          onClick={handleInputClick}\n          onChange={handleInputChange}\n        />\n        <label\n          htmlFor={inputId}\n          className={`${props.helperLabel ? 'flex flex-col gap-[6px] ' : ''}${\n            disabled ? 'cursor-not-allowed' : 'cursor-pointer'\n          }`}\n          data-automation-id=\"radio-field-label\"\n          onClick={handleLabelClick}\n        >\n          <span\n            className={`text-sm text-[var(--color-gray-800)] ${radioLabelClassName} `}\n            style={{ fontSize: '16px', fontWeight: '400' }}\n          >\n            {label}\n          </span>\n        </label>\n      </div>\n      {checked && content && <div className=\"radio-child-content pl-[1.5rem] w-full\">{content()}</div>}\n      {props.helperLabel && (\n        <span\n          className={`text-sm font-normal text-[var(--color-gray-600)] ${\n            props.maxWidth ? `max-w-[${props.maxWidth}]` : 'max-w-full'\n          } break-words whitespace-normal`}\n          data-automation-id=\"radio-field-helper-text\"\n        >\n          {props.helperLabel}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"names":["Radio","props","label","value","checked","disabled","name","onChange","width","radioLabelClassName","radioContainerClassName","automationId","bgColor","withBorder","content","radioRef","useRef","inputId","useStableId","undefined","React","useLayoutEffect","current","handleContainerClick","focus","click","handleLabelClick","e","preventDefault","stopPropagation","handleInputClick","handleInputChange","borderColor","createElement","className","onClick","style","backgroundColor","ref","type","id","htmlFor","helperLabel","fontSize","fontWeight","maxWidth"],"mappings":"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"}
+{"version":3,"file":"index32.js","sources":["../src/components/Radio/index.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { useStableId } from '../../utils/useStableId';\n\nexport interface RadioProps {\n  label: string;\n  value: string;\n  checked: boolean;\n  disabled: boolean;\n  name: string;\n  onChange?: (props: RadioProps) => void;\n  helperLabel?: string;\n  maxWidth?: string;\n  width?: string;\n  radioLabelClassName?: string;\n  radioContainerClassName?: string;\n  automationId?: string;\n  withBorder?: boolean;\n  bgColor?: string;\n  content?: () => React.ReactNode;\n}\n\nexport function Radio(props: RadioProps) {\n  const {\n    label,\n    value,\n    checked,\n    disabled,\n    name,\n    onChange,\n    width,\n    radioLabelClassName = '',\n    radioContainerClassName = '',\n    automationId = '',\n    bgColor = 'var(--color-white)',\n    withBorder = true,\n    content\n  } = props;\n  const radioRef = useRef<HTMLInputElement>(null);\n  const inputId = useStableId(undefined, `${name}-${value}`);\n\n  // Sync DOM checked state with prop — bypasses React's controlled-input restore mechanism\n  // which resets DOM.checked=false after the first click on an unselected radio.\n  React.useLayoutEffect(() => {\n    if (radioRef.current) {\n      radioRef.current.checked = checked;\n    }\n  }, [checked]);\n\n  const handleContainerClick = () => {\n    if (!disabled) {\n      radioRef.current?.focus();\n      radioRef.current?.click();\n    }\n  };\n\n  const handleLabelClick = (e: React.MouseEvent<HTMLLabelElement>) => {\n    // Stop label click from bubbling to container (which would double-fire handleContainerClick).\n    // No preventDefault — native htmlFor redirect fires a new click on the input, which handles\n    // check + focus + onChange via handleInputChange. No manual replication needed.\n    e.stopPropagation();\n  };\n\n  const handleInputClick = (e: React.MouseEvent<HTMLInputElement>) => {\n    e.stopPropagation();\n  };\n\n  const handleInputChange = () => {\n    onChange?.({ ...props, checked: true });\n  };\n\n  const borderColor = checked ? 'border-[var(--color-blue-500)]' : 'border-[var(--color-gray-400)]';\n\n  return (\n    <div\n      className={`se-design-radio-container flex flex-col justify-center items-start gap-2 ${\n        disabled ? 'cursor-not-allowed' : 'cursor-pointer'\n      } ${\n        withBorder ? `border ${borderColor} p-4` : ''\n      } rounded-[6px] transition-colors duration-300 ${disabled ? 'opacity-50' : ''} ${radioContainerClassName}`}\n      onClick={handleContainerClick}\n      style={{ width: width || 'auto', backgroundColor: bgColor }}\n      data-automation-id={automationId}\n    >\n      <div className=\"flex items-center gap-[0.625rem]\" data-automation-id=\"radio-field-content\">\n        <input\n          ref={radioRef}\n          type=\"radio\"\n          id={inputId}\n          name={name}\n          value={value}\n          disabled={disabled}\n          className=\"radio-field-input cursor-pointer accent-[var(--color-blue-500)] disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-blue-500)] w-[14px] h-[14px] p-[3px]\"\n          onClick={handleInputClick}\n          onChange={handleInputChange}\n        />\n        <label\n          htmlFor={inputId}\n          className={`${props.helperLabel ? 'flex flex-col gap-[6px] ' : ''}${\n            disabled ? 'cursor-not-allowed' : 'cursor-pointer'\n          }`}\n          data-automation-id=\"radio-field-label\"\n          onClick={handleLabelClick}\n        >\n          <span\n            className={`text-sm text-[var(--color-gray-800)] ${radioLabelClassName} `}\n            style={{ fontSize: '16px', fontWeight: '400' }}\n          >\n            {label}\n          </span>\n        </label>\n      </div>\n      {checked && content && (\n        <div className=\"radio-child-content pl-[1.5rem] w-full\" onClick={(e) => e.stopPropagation()}>\n          {content()}\n        </div>\n      )}\n      {props.helperLabel && (\n        <span\n          className={`text-sm font-normal text-[var(--color-gray-600)] ${\n            props.maxWidth ? `max-w-[${props.maxWidth}]` : 'max-w-full'\n          } break-words whitespace-normal`}\n          data-automation-id=\"radio-field-helper-text\"\n        >\n          {props.helperLabel}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"names":["Radio","props","label","value","checked","disabled","name","onChange","width","radioLabelClassName","radioContainerClassName","automationId","bgColor","withBorder","content","radioRef","useRef","inputId","useStableId","undefined","React","useLayoutEffect","current","handleContainerClick","focus","click","handleLabelClick","e","stopPropagation","handleInputClick","handleInputChange","borderColor","createElement","className","onClick","style","backgroundColor","ref","type","id","htmlFor","helperLabel","fontSize","fontWeight","maxWidth"],"mappings":"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"}

package/dist/index37.js

@@ -3,7 +3,7 @@ import { Popover as ve } from "./index18.js";
 import { Icon as we } from "./index5.js";
 import { Checkbox as Ee } from "./index22.js";
 import { Button as G } from "./index3.js";
-import { useCombobox as ke } from "./index196.js";
+import { useCombobox as ke } from "./index199.js";
 import { useStableId as be } from "./index190.js";
 /* empty css         */
 function g() {

package/dist/index39.js

@@ -1,7 +1,7 @@
 import a, { useState as d, useRef as $, useEffect as r, useMemo as D } from "react";
 import { Icon as g } from "./index5.js";
 import { LabelChip as F } from "./index10.js";
-import { debounce as L } from "./index206.js";
+import { debounce as L } from "./index208.js";
 /* empty css         */
 function z(p) {
   const {

package/dist/index44.js

@@ -3,7 +3,7 @@ import e, { useState as S, useRef as k, useCallback as P, useEffect as Y } from
 import { Icon as x } from "./index5.js";
 import { useStableId as Z } from "./index190.js";
 import { getA11yNameAttributes as L } from "./index71.js";
-import { useCombobox as ee } from "./index196.js";
+import { useCombobox as ee } from "./index199.js";
 function u() {
   return u = Object.assign ? Object.assign.bind() : function(o) {
     for (var s = 1; s < arguments.length; s++) {