se-design 1.0.71 → 1.0.73-dev1

package/dist/index32.js

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

package/dist/index32.js.map

@@ -1 +1 @@
-{"version":3,"file":"index32.js","sources":["../src/components/Radio/index.tsx"],"sourcesContent":["import React, { useRef } from 'react';\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\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 ${checked ? 'border-[var(--color-blue-500)]' : 'border-[var(--color-gray-400)]'} p-4` : ''\n      } rounded-[6px] transition-colors duration-300 ${disabled ? 'opacity-50' : ''} ${radioContainerClassName}`}\n      onClick={() => radioRef.current?.click()}\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={value}\n          name={name}\n          value={value}\n          checked={checked}\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          onChange={() => {\n            onChange && onChange({ ...props, checked: true });\n          }}\n        />\n        <label\n          htmlFor={value}\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        >\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","React","createElement","className","onClick","current","click","style","backgroundColor","ref","type","id","htmlFor","helperLabel","fontSize","fontWeight","maxWidth"],"mappings":";AAoBO,SAASA,EAAMC,GAAmB;AACvC,QAAM;AAAA,IACJC,OAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,MAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,qBAAAA,IAAsB;AAAA,IACtBC,yBAAAA,IAA0B;AAAA,IAC1BC,cAAAA,IAAe;AAAA,IACfC,SAAAA,IAAU;AAAA,IACVC,YAAAA,IAAa;AAAA,IACbC,SAAAA;AAAAA,EAAAA,IACEb,GACEc,IAAWC,EAAyB,IAAI;AAE9C,SACEC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,4EACTd,IAAW,uBAAuB,gBAAgB,IAElDQ,IAAa,UAAUT,IAAU,mCAAmC,gCAAgC,SAAS,EAAE,iDAChEC,IAAW,eAAe,EAAE,IAAIK,CAAuB;AAAA,IACxGU,SAASA,MAAML,EAASM,SAASC,MAAAA;AAAAA,IACjCC,OAAO;AAAA,MAAEf,OAAOA,KAAS;AAAA,MAAQgB,iBAAiBZ;AAAAA,IAAAA;AAAAA,IAClD,sBAAoBD;AAAAA,EAAAA,GAEpBM,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAAmC,sBAAmB;AAAA,EAAA,GACnEF,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACEO,KAAKV;AAAAA,IACLW,MAAK;AAAA,IACLC,IAAIxB;AAAAA,IACJG,MAAAA;AAAAA,IACAH,OAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAc,WAAU;AAAA,IACVZ,UAAUA,MAAM;AACdA,MAAAA,KAAYA,EAAS;AAAA,QAAE,GAAGN;AAAAA,QAAOG,SAAS;AAAA,MAAA,CAAM;AAAA,IAClD;AAAA,EAAA,CACD,GACDa,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACEU,SAASzB;AAAAA,IACTgB,WAAW,GAAGlB,EAAM4B,cAAc,4BAA4B,EAAE,IAC9DxB,IAAW,uBAAuB,gBAAgB;AAAA,IAEpD,sBAAmB;AAAA,EAAA,GAEnBY,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IACEC,WAAW,wCAAwCV,CAAmB;AAAA,IACtEc,OAAO;AAAA,MAAEO,UAAU;AAAA,MAAQC,YAAY;AAAA,IAAA;AAAA,EAAM,GAE5C7B,CACG,CACD,CACJ,GACJE,KAAWU,KAAWG,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GAA0CL,GAAe,GAC9Fb,EAAM4B,eACLZ,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IACEC,WAAW,oDACTlB,EAAM+B,WAAW,UAAU/B,EAAM+B,QAAQ,MAAM,YAAY;AAAA,IAE7D,sBAAmB;AAAA,EAAA,GAElB/B,EAAM4B,WACH,CAEL;AAET;"}
+{"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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"}

package/dist/index34.js

@@ -1,6 +1,6 @@
 import e, { useState as h, useEffect as E } from "react";
 import { Icon as N } from "./index5.js";
-import { useStableId as $ } from "./index189.js";
+import { useStableId as $ } from "./index190.js";
 import { getRegionAttributes as I } from "./index65.js";
 import { useAccessiblePress as _ } from "./index66.js";
 function r() {

package/dist/index35.js

@@ -1,85 +1,92 @@
-import e, { useState as I, useEffect as h } from "react";
-import { Icon as d } from "./index5.js";
-import { useStableId as y } from "./index189.js";
-import { getA11yNameAttributes as _ } from "./index70.js";
-import { getRegionAttributes as O } from "./index65.js";
-import { useAccessiblePress as C } from "./index66.js";
+import e, { useState as R, useEffect as S } from "react";
+import { Icon as p } from "./index5.js";
+import { useStableId as j } from "./index190.js";
+import { getA11yNameAttributes as k } from "./index71.js";
+import { getRegionAttributes as w } from "./index65.js";
+import { useAccessiblePress as F } from "./index66.js";
 function a() {
   return a = Object.assign ? Object.assign.bind() : function(r) {
-    for (var s = 1; s < arguments.length; s++) {
-      var n = arguments[s];
-      for (var o in n) ({}).hasOwnProperty.call(n, o) && (r[o] = n[o]);
+    for (var n = 1; n < arguments.length; n++) {
+      var o = arguments[n];
+      for (var s in o) ({}).hasOwnProperty.call(o, s) && (r[s] = o[s]);
     }
     return r;
   }, a.apply(null, arguments);
 }
-const P = ({
+const D = ({
   renderAccordionContents: r,
-  renderAccordionSrcElement: s,
-  defaultOpen: n,
-  className: o = "",
+  renderAccordionSrcElement: n,
+  renderControls: o,
+  defaultOpen: s,
+  expanded: m,
+  onChange: v,
+  className: E = "",
   arrowPosition: c = "left",
-  contentClassName: g = "",
+  contentClassName: b = "",
   disabled: i = !1,
-  automationId: p = "",
-  id: v,
-  ariaLabel: b
+  automationId: N = "",
+  id: x,
+  ariaLabel: $
 }) => {
-  const [t, m] = I(!1);
-  h(() => {
-    m(n || !1);
-  }, [n]);
-  const l = y(v, "custom-accordion"), f = `${l}-content`, {
-    pressProps: E,
-    role: x,
-    tabIndex: N
-  } = C({
-    onClick: () => m(!t),
+  const [h, f] = R(!1);
+  S(() => {
+    f(s || !1);
+  }, [s]);
+  const u = m !== void 0, t = u ? m : h, A = () => {
+    u ? v?.(!t) : f(!t);
+  }, l = j(x, "custom-accordion"), d = `${l}-content`, {
+    pressProps: I,
+    role: O,
+    tabIndex: y
+  } = F({
+    onClick: A,
     isNative: !1,
     disabled: i
-  }), $ = O({
+  }), _ = w({
     titleId: l,
     isFocusable: !1
-  }), A = "group-focus-visible:[outline:var(--focus-width)_solid_var(--focus-color)] group-focus-visible:[outline-offset:var(--focus-offset)] group-focus-visible:p-[2px]", u = () => i ? "" : c === "left" ? t ? "rotate-90" : "" : t ? "rotate-180" : "";
+  }), C = "group-focus-visible:[outline:var(--focus-width)_solid_var(--focus-color)] group-focus-visible:[outline-offset:var(--focus-offset)] group-focus-visible:p-[2px]", g = () => i ? "" : c === "left" ? t ? "rotate-90" : "" : t ? "rotate-180" : "";
   return /* @__PURE__ */ e.createElement("div", {
-    className: `se-design-accordion ${o}`,
-    "data-automation-id": p
+    className: `se-design-accordion ${E}`,
+    "data-automation-id": N
   }, /* @__PURE__ */ e.createElement("div", {
     className: "flex flex-col"
-  }, /* @__PURE__ */ e.createElement("div", a({}, E, _({
-    ariaLabel: b
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: "se-design-accordion-src flex items-center"
+  }, /* @__PURE__ */ e.createElement("div", a({}, I, k({
+    ariaLabel: $
   }), {
-    role: x,
-    tabIndex: N,
+    role: O,
+    tabIndex: y,
     "aria-expanded": t,
-    "aria-controls": f,
-    className: "se-design-accordion-src flex items-center cursor-pointer group focus-visible:outline-none"
+    "aria-controls": d,
+    className: "flex items-center flex-1 cursor-pointer group focus-visible:outline-none"
   }), /* @__PURE__ */ e.createElement("div", {
-    className: `flex items-center flex-1 rounded ${A}`
+    className: `flex items-center rounded ${C}`
   }, c === "left" && /* @__PURE__ */ e.createElement("div", {
-    className: `se-design-accordion-icon transform transition-transform duration-300 ${u()} ${i ? "opacity-30 pointer-events-none" : ""}`
-  }, /* @__PURE__ */ e.createElement(d, {
+    className: `se-design-accordion-icon transform transition-transform duration-300 ${g()} ${i ? "opacity-30 pointer-events-none" : ""}`
+  }, /* @__PURE__ */ e.createElement(p, {
     name: "rightSide"
   })), /* @__PURE__ */ e.createElement("div", {
-    className: "se-design-accordion-elements flex-1"
+    className: "se-design-accordion-elements"
   }, /* @__PURE__ */ e.createElement("div", {
     id: l,
     className: "se-design-accordion-src-element title"
-  }, s({
+  }, n({
     isOpen: t
   }))), c === "right" && /* @__PURE__ */ e.createElement("div", {
-    className: `se-design-accordion-icon transform transition-transform duration-300 ${u()} ${i ? "opacity-30 pointer-events-none" : ""}`
-  }, /* @__PURE__ */ e.createElement(d, {
+    className: `se-design-accordion-icon transform transition-transform duration-300 ${g()} ${i ? "opacity-30 pointer-events-none" : ""}`
+  }, /* @__PURE__ */ e.createElement(p, {
     name: "chevron"
-  })))), t && /* @__PURE__ */ e.createElement("div", a({
-    id: f
-  }, $, {
-    className: `se-design-accordion-content transition-all duration-300 mt-1 ${g}`
+  })))), o?.()), t && /* @__PURE__ */ e.createElement("div", a({
+    id: d
+  }, _, {
+    className: `se-design-accordion-content transition-all duration-300 mt-1 ${b}`
   }), r({
     isOpen: t
   }))));
 };
 export {
-  P as CustomAccordion
+  D as CustomAccordion
 };
 //# sourceMappingURL=index35.js.map

package/dist/index35.js.map

@@ -1 +1 @@
-{"version":3,"file":"index35.js","sources":["../src/components/CustomAccordion/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from 'react';\nimport { Icon } from '../Icon';\nimport { useStableId } from '../../utils/useStableId';\nimport { useAccessiblePress, getA11yNameAttributes } from '../../utils/a11y';\nimport { getRegionAttributes } from '../../utils/a11y/regionAttributes';\n\nexport interface CustomAccordionProps {\n  renderAccordionContents: (props: { isOpen: boolean }) => React.ReactNode;\n  renderAccordionSrcElement: (props: { isOpen: boolean }) => React.ReactNode;\n  defaultOpen?: boolean;\n  className?: string;\n  arrowPosition?: 'left' | 'right';\n  contentClassName?: string;\n  disabled?: boolean;\n  automationId?: string;\n  id?: string;\n  ariaLabel?: string;\n}\n\nexport const CustomAccordion: FC<CustomAccordionProps> = ({\n  renderAccordionContents,\n  renderAccordionSrcElement,\n  defaultOpen,\n  className = '',\n  arrowPosition = 'left',\n  contentClassName = '',\n  disabled = false,\n  automationId = '',\n  id,\n  ariaLabel\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  useEffect(() => {\n    setIsOpen(defaultOpen || false);\n  }, [defaultOpen]);\n\n  // Generate stable IDs for ARIA relationships\n  const triggerId = useStableId(id, 'custom-accordion');\n  const contentId = `${triggerId}-content`;\n\n  // Use accessible press hook for keyboard + mouse handling\n  const { pressProps, role, tabIndex } = useAccessiblePress({\n    onClick: () => setIsOpen(!isOpen),\n    isNative: false,\n    disabled\n  });\n\n  // Get region attributes for content panel\n  const regionAttributes = getRegionAttributes({\n    titleId: triggerId,\n    isFocusable: false\n  });\n\n  const focusVisibleClasses = 'group-focus-visible:[outline:var(--focus-width)_solid_var(--focus-color)] group-focus-visible:[outline-offset:var(--focus-offset)] group-focus-visible:p-[2px]';\n\n  const getArrowRotation = () => {\n    if (disabled) {\n      return '';\n    }\n    if (arrowPosition === 'left') {\n      return isOpen ? 'rotate-90' : '';\n    }\n    return isOpen ? 'rotate-180' : '';\n  };\n\n  return (\n    <div className={`se-design-accordion ${className}`} data-automation-id={automationId}>\n      <div className=\"flex flex-col\">\n        <div\n          {...pressProps}\n          {...getA11yNameAttributes({ ariaLabel })}\n          role={role}\n          tabIndex={tabIndex}\n          aria-expanded={isOpen}\n          aria-controls={contentId}\n          className=\"se-design-accordion-src flex items-center cursor-pointer group focus-visible:outline-none\"\n        >\n          <div className={`flex items-center flex-1 rounded ${focusVisibleClasses}`}>\n            {arrowPosition === 'left' && (\n              <div\n                className={`se-design-accordion-icon transform transition-transform duration-300 ${getArrowRotation()} ${\n                  disabled ? 'opacity-30 pointer-events-none' : ''\n                }`}\n              >\n                <Icon name=\"rightSide\" />\n              </div>\n            )}\n            <div className=\"se-design-accordion-elements flex-1\">\n              <div id={triggerId} className=\"se-design-accordion-src-element title\">{renderAccordionSrcElement({ isOpen })}</div>\n            </div>\n            {arrowPosition === 'right' && (\n              <div\n                className={`se-design-accordion-icon transform transition-transform duration-300 ${getArrowRotation()} ${\n                  disabled ? 'opacity-30 pointer-events-none' : ''\n                }`}\n              >\n                <Icon name=\"chevron\" />\n              </div>\n            )}\n          </div>\n        </div>\n        {isOpen && (\n          <div id={contentId} {...regionAttributes} className={`se-design-accordion-content transition-all duration-300 mt-1 ${contentClassName}`}>\n            {renderAccordionContents({ isOpen })}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["CustomAccordion","renderAccordionContents","renderAccordionSrcElement","defaultOpen","className","arrowPosition","contentClassName","disabled","automationId","id","ariaLabel","isOpen","setIsOpen","useState","useEffect","triggerId","useStableId","contentId","pressProps","role","tabIndex","useAccessiblePress","onClick","isNative","regionAttributes","getRegionAttributes","titleId","isFocusable","focusVisibleClasses","getArrowRotation","React","createElement","_extends","getA11yNameAttributes","Icon","name"],"mappings":";;;;;;;;;;;;;;;AAmBO,MAAMA,IAA4CA,CAAC;AAAA,EACxDC,yBAAAA;AAAAA,EACAC,2BAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,eAAAA,IAAgB;AAAA,EAChBC,kBAAAA,IAAmB;AAAA,EACnBC,UAAAA,IAAW;AAAA,EACXC,cAAAA,IAAe;AAAA,EACfC,IAAAA;AAAAA,EACAC,WAAAA;AACF,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAC1CC,EAAAA,EAAU,MAAM;AACdF,IAAAA,EAAUT,KAAe,EAAK;AAAA,EAChC,GAAG,CAACA,CAAW,CAAC;AAGhB,QAAMY,IAAYC,EAAYP,GAAI,kBAAkB,GAC9CQ,IAAY,GAAGF,CAAS,YAGxB;AAAA,IAAEG,YAAAA;AAAAA,IAAYC,MAAAA;AAAAA,IAAMC,UAAAA;AAAAA,EAAAA,IAAaC,EAAmB;AAAA,IACxDC,SAASA,MAAMV,EAAU,CAACD,CAAM;AAAA,IAChCY,UAAU;AAAA,IACVhB,UAAAA;AAAAA,EAAAA,CACD,GAGKiB,IAAmBC,EAAoB;AAAA,IAC3CC,SAASX;AAAAA,IACTY,aAAa;AAAA,EAAA,CACd,GAEKC,IAAsB,kKAEtBC,IAAmBA,MACnBtB,IACK,KAELF,MAAkB,SACbM,IAAS,cAAc,KAEzBA,IAAS,eAAe;AAGjC,SACEmB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAK3B,WAAW,uBAAuBA,CAAS;AAAA,IAAI,sBAAoBI;AAAAA,EAAAA,GACtEsB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAK3B,WAAU;AAAA,EAAA,qBACb2B,cAAA,OAAAC,EAAA,CAAA,GACMd,GACAe,EAAsB;AAAA,IAAEvB,WAAAA;AAAAA,EAAAA,CAAW,GAAC;AAAA,IACxCS,MAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACA,iBAAeT;AAAAA,IACf,iBAAeM;AAAAA,IACfb,WAAU;AAAA,EAAA,CAA2F,GAErG0B,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAK3B,WAAW,oCAAoCwB,CAAmB;AAAA,EAAA,GACpEvB,MAAkB,UACjByB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACE3B,WAAW,wEAAwEyB,EAAAA,CAAkB,IACnGtB,IAAW,mCAAmC,EAAE;AAAA,EAAA,GAGlDuB,gBAAAA,EAAAC,cAACG,GAAI;AAAA,IAACC,MAAK;AAAA,EAAA,CAAa,CACrB,GAEPL,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAK3B,WAAU;AAAA,EAAA,GACb0B,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKtB,IAAIM;AAAAA,IAAWX,WAAU;AAAA,EAAA,GAAyCF,EAA0B;AAAA,IAAES,QAAAA;AAAAA,EAAAA,CAAQ,CAAO,CAC/G,GACJN,MAAkB,WACjByB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACE3B,WAAW,wEAAwEyB,EAAAA,CAAkB,IACnGtB,IAAW,mCAAmC,EAAE;AAAA,EAAA,GAGlDuB,gBAAAA,EAAAC,cAACG,GAAI;AAAA,IAACC,MAAK;AAAA,EAAA,CAAW,CACnB,CAEJ,CACF,GACJxB,KACCmB,gBAAAA,EAAAC,cAAA,OAAAC,EAAA;AAAA,IAAKvB,IAAIQ;AAAAA,EAAAA,GAAeO,GAAgB;AAAA,IAAEpB,WAAW,gEAAgEE,CAAgB;AAAA,EAAA,CAAG,GACrIL,EAAwB;AAAA,IAAEU,QAAAA;AAAAA,EAAAA,CAAQ,CAChC,CAEJ,CACF;AAET;"}
+{"version":3,"file":"index35.js","sources":["../src/components/CustomAccordion/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from 'react';\nimport { Icon } from '../Icon';\nimport { useStableId } from '../../utils/useStableId';\nimport { useAccessiblePress, getA11yNameAttributes } from '../../utils/a11y';\nimport { getRegionAttributes } from '../../utils/a11y/regionAttributes';\n\nexport interface CustomAccordionProps {\n  renderAccordionContents: (props: { isOpen: boolean }) => React.ReactNode;\n  renderAccordionSrcElement: (props: { isOpen: boolean }) => React.ReactNode;\n  renderControls?: () => React.ReactNode;\n  defaultOpen?: boolean;\n  expanded?: boolean;\n  onChange?: (isOpen: boolean) => void;\n  className?: string;\n  arrowPosition?: 'left' | 'right';\n  contentClassName?: string;\n  disabled?: boolean;\n  automationId?: string;\n  id?: string;\n  ariaLabel?: string;\n}\n\nexport const CustomAccordion: FC<CustomAccordionProps> = ({\n  renderAccordionContents,\n  renderAccordionSrcElement,\n  renderControls,\n  defaultOpen,\n  expanded,\n  onChange,\n  className = '',\n  arrowPosition = 'left',\n  contentClassName = '',\n  disabled = false,\n  automationId = '',\n  id,\n  ariaLabel\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  useEffect(() => {\n    setIsOpen(defaultOpen || false);\n  }, [defaultOpen]);\n\n  const isControlled = expanded !== undefined;\n  const open = isControlled ? expanded : isOpen;\n\n  const handleToggle = () => {\n    if (isControlled) {\n      onChange?.(!open);\n    } else {\n      setIsOpen(!open);\n    }\n  };\n\n  // Generate stable IDs for ARIA relationships\n  const triggerId = useStableId(id, 'custom-accordion');\n  const contentId = `${triggerId}-content`;\n\n  // Use accessible press hook for keyboard + mouse handling\n  const { pressProps, role, tabIndex } = useAccessiblePress({\n    onClick: handleToggle,\n    isNative: false,\n    disabled\n  });\n\n  // Get region attributes for content panel\n  const regionAttributes = getRegionAttributes({\n    titleId: triggerId,\n    isFocusable: false\n  });\n\n  const focusVisibleClasses = 'group-focus-visible:[outline:var(--focus-width)_solid_var(--focus-color)] group-focus-visible:[outline-offset:var(--focus-offset)] group-focus-visible:p-[2px]';\n\n  const getArrowRotation = () => {\n    if (disabled) {\n      return '';\n    }\n    if (arrowPosition === 'left') {\n      return open ? 'rotate-90' : '';\n    }\n    return open ? 'rotate-180' : '';\n  };\n\n  return (\n    <div className={`se-design-accordion ${className}`} data-automation-id={automationId}>\n      <div className=\"flex flex-col\">\n        <div className=\"se-design-accordion-src flex items-center\">\n          <div\n            {...pressProps}\n            {...getA11yNameAttributes({ ariaLabel })}\n            role={role}\n            tabIndex={tabIndex}\n            aria-expanded={open}\n            aria-controls={contentId}\n            className=\"flex items-center flex-1 cursor-pointer group focus-visible:outline-none\"\n          >\n            <div className={`flex items-center rounded ${focusVisibleClasses}`}>\n              {arrowPosition === 'left' && (\n                <div className={`se-design-accordion-icon transform transition-transform duration-300 ${getArrowRotation()} ${\n                  disabled ? 'opacity-30 pointer-events-none' : ''\n                }`}>\n                  <Icon name=\"rightSide\" />\n                </div>\n              )}\n              <div className=\"se-design-accordion-elements\">\n                <div id={triggerId} className=\"se-design-accordion-src-element title\">{renderAccordionSrcElement({ isOpen: open })}</div>\n              </div>\n              {arrowPosition === 'right' && (\n                <div className={`se-design-accordion-icon transform transition-transform duration-300 ${getArrowRotation()} ${\n                  disabled ? 'opacity-30 pointer-events-none' : ''\n                }`}>\n                  <Icon name=\"chevron\" />\n                </div>\n              )}\n            </div>\n          </div>\n          {renderControls?.()}\n        </div>\n        {open && (\n          <div id={contentId} {...regionAttributes} className={`se-design-accordion-content transition-all duration-300 mt-1 ${contentClassName}`}>\n            {renderAccordionContents({ isOpen: open })}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["CustomAccordion","renderAccordionContents","renderAccordionSrcElement","renderControls","defaultOpen","expanded","onChange","className","arrowPosition","contentClassName","disabled","automationId","id","ariaLabel","isOpen","setIsOpen","useState","useEffect","isControlled","undefined","open","handleToggle","triggerId","useStableId","contentId","pressProps","role","tabIndex","useAccessiblePress","onClick","isNative","regionAttributes","getRegionAttributes","titleId","isFocusable","focusVisibleClasses","getArrowRotation","React","createElement","_extends","getA11yNameAttributes","Icon","name"],"mappings":"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"}

package/dist/index37.js

@@ -3,8 +3,8 @@ 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 "./index195.js";
-import { useStableId as be } from "./index189.js";
+import { useCombobox as ke } from "./index196.js";
+import { useStableId as be } from "./index190.js";
 /* empty css         */
 function g() {
   return g = Object.assign ? Object.assign.bind() : function(v) {

package/dist/index38.js

@@ -1,7 +1,7 @@
 import e from "react";
-import { useStableId as A } from "./index189.js";
-import { mergeIds as P } from "./index190.js";
-import { getA11yNameAttributes as _ } from "./index70.js";
+import { useStableId as A } from "./index190.js";
+import { mergeIds as P } from "./index191.js";
+import { getA11yNameAttributes as _ } from "./index71.js";
 /* empty css         */
 function z({
   value: l,

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 "./index205.js";
+import { debounce as L } from "./index206.js";
 /* empty css         */
 function z(p) {
   const {

package/dist/index40.js

@@ -2,7 +2,7 @@ import e from "react";
 /* empty css         */
 const r = {
   progressBarCtn: "flex items-center gap-2",
-  progressBar: "flex-1 w-[70%] bg-[var(--color-gray-200)] h-[6px] rounded-[12px] overflow-hidden",
+  progressBar: "flex-1 w-[70%] h-[6px] rounded-[12px] overflow-hidden",
   progressBarProgress: "h-full rounded-[12px]",
   stepsCount: "steps-count"
 }, p = ({

package/dist/index40.js.map

@@ -1 +1 @@
-{"version":3,"file":"index40.js","sources":["../src/components/ProgressBar/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Map } from '../../utils/common.types';\nimport './style.scss';\n\nexport interface ProgressBarProps {\n  totalTasks: number;\n  completedTasks: number;\n  progressBarCtnClassName?: string;\n  needPercentageCompleted?: boolean;\n  progressBarColor?: string;\n}\n\nconst className: Map = {\n  progressBarCtn: 'flex items-center gap-2',\n  progressBar: 'flex-1 w-[70%] bg-[var(--color-gray-200)] h-[6px] rounded-[12px] overflow-hidden',\n  progressBarProgress: 'h-full rounded-[12px]',\n  stepsCount: 'steps-count'\n};\n\nexport const ProgressBar: FC<ProgressBarProps> = ({\n  totalTasks = 0,\n  completedTasks = 0,\n  progressBarCtnClassName = '',\n  needPercentageCompleted = true,\n  progressBarColor\n}) => {\n  const percentageComplete = totalTasks > 0 ? (completedTasks / totalTasks) * 100 : 0;\n  return (\n    <div\n      className={`${className.progressBarCtn} ${progressBarCtnClassName} progress-bar-ctn`}\n      style={{ width: '100%' }}\n    >\n      <div className={className.progressBar}>\n        <div\n          className={className.progressBarProgress}\n          style={{\n            width: `${percentageComplete}%`,\n            background: `${progressBarColor ? progressBarColor : 'linear-gradient(90deg, var(--color-green-200) 0%, var(--color-green-300) 100%)'}`,\n            transition: 'width 0.4s ease-in-out'\n          }}\n        ></div>\n      </div>\n      {needPercentageCompleted && (\n        <div className={className.stepsCount}>{`${Math.round(percentageComplete)}% completed`}</div>\n      )}\n    </div>\n  );\n};\n"],"names":["React__default","className","progressBarCtn","progressBar","progressBarProgress","stepsCount","ProgressBar","totalTasks","completedTasks","progressBarCtnClassName","needPercentageCompleted","progressBarColor","percentageComplete","React","createElement","style","width","background","transition","Math","round"],"mappings":"AAYA,OAAAA,OAAA;AAAA,OAAA;AAAA,MAAMC,IAAiB;AAAA,EACrBC,gBAAgB;AAAA,EAChBC,aAAa;AAAA,EACbC,qBAAqB;AAAA,EACrBC,YAAY;AACd,GAEaC,IAAoCA,CAAC;AAAA,EAChDC,YAAAA,IAAa;AAAA,EACbC,gBAAAA,IAAiB;AAAA,EACjBC,yBAAAA,IAA0B;AAAA,EAC1BC,yBAAAA,IAA0B;AAAA,EAC1BC,kBAAAA;AACF,MAAM;AACJ,QAAMC,IAAqBL,IAAa,IAAKC,IAAiBD,IAAc,MAAM;AAClF,SACEM,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEb,WAAW,GAAGA,EAAUC,cAAc,IAAIO,CAAuB;AAAA,IACjEM,OAAO;AAAA,MAAEC,OAAO;AAAA,IAAA;AAAA,EAAO,GAEvBH,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKb,WAAWA,EAAUE;AAAAA,EAAAA,GACxBU,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEb,WAAWA,EAAUG;AAAAA,IACrBW,OAAO;AAAA,MACLC,OAAO,GAAGJ,CAAkB;AAAA,MAC5BK,YAAY,GAAGN,KAAsC,gFAAgF;AAAA,MACrIO,YAAY;AAAA,IAAA;AAAA,EACd,CACI,CACH,GACJR,KACCG,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKb,WAAWA,EAAUI;AAAAA,EAAAA,GAAa,GAAGc,KAAKC,MAAMR,CAAkB,CAAC,aAAmB,CAE1F;AAET;"}
+{"version":3,"file":"index40.js","sources":["../src/components/ProgressBar/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Map } from '../../utils/common.types';\nimport './style.scss';\n\nexport interface ProgressBarProps {\n  totalTasks: number;\n  completedTasks: number;\n  progressBarCtnClassName?: string;\n  needPercentageCompleted?: boolean;\n  progressBarColor?: string;\n}\n\nconst className: Map = {\n  progressBarCtn: 'flex items-center gap-2',\n  progressBar: 'flex-1 w-[70%] h-[6px] rounded-[12px] overflow-hidden',\n  progressBarProgress: 'h-full rounded-[12px]',\n  stepsCount: 'steps-count'\n};\n\nexport const ProgressBar: FC<ProgressBarProps> = ({\n  totalTasks = 0,\n  completedTasks = 0,\n  progressBarCtnClassName = '',\n  needPercentageCompleted = true,\n  progressBarColor\n}) => {\n  const percentageComplete = totalTasks > 0 ? (completedTasks / totalTasks) * 100 : 0;\n  return (\n    <div\n      className={`${className.progressBarCtn} ${progressBarCtnClassName} progress-bar-ctn`}\n      style={{ width: '100%' }}\n    >\n      <div className={className.progressBar}>\n        <div\n          className={className.progressBarProgress}\n          style={{\n            width: `${percentageComplete}%`,\n            background: `${progressBarColor ? progressBarColor : 'linear-gradient(90deg, var(--color-green-200) 0%, var(--color-green-300) 100%)'}`,\n            transition: 'width 0.4s ease-in-out'\n          }}\n        ></div>\n      </div>\n      {needPercentageCompleted && (\n        <div className={className.stepsCount}>{`${Math.round(percentageComplete)}% completed`}</div>\n      )}\n    </div>\n  );\n};\n"],"names":["React__default","className","progressBarCtn","progressBar","progressBarProgress","stepsCount","ProgressBar","totalTasks","completedTasks","progressBarCtnClassName","needPercentageCompleted","progressBarColor","percentageComplete","React","createElement","style","width","background","transition","Math","round"],"mappings":"AAYA,OAAAA,OAAA;AAAA,OAAA;AAAA,MAAMC,IAAiB;AAAA,EACrBC,gBAAgB;AAAA,EAChBC,aAAa;AAAA,EACbC,qBAAqB;AAAA,EACrBC,YAAY;AACd,GAEaC,IAAoCA,CAAC;AAAA,EAChDC,YAAAA,IAAa;AAAA,EACbC,gBAAAA,IAAiB;AAAA,EACjBC,yBAAAA,IAA0B;AAAA,EAC1BC,yBAAAA,IAA0B;AAAA,EAC1BC,kBAAAA;AACF,MAAM;AACJ,QAAMC,IAAqBL,IAAa,IAAKC,IAAiBD,IAAc,MAAM;AAClF,SACEM,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEb,WAAW,GAAGA,EAAUC,cAAc,IAAIO,CAAuB;AAAA,IACjEM,OAAO;AAAA,MAAEC,OAAO;AAAA,IAAA;AAAA,EAAO,GAEvBH,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKb,WAAWA,EAAUE;AAAAA,EAAAA,GACxBU,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEb,WAAWA,EAAUG;AAAAA,IACrBW,OAAO;AAAA,MACLC,OAAO,GAAGJ,CAAkB;AAAA,MAC5BK,YAAY,GAAGN,KAAsC,gFAAgF;AAAA,MACrIO,YAAY;AAAA,IAAA;AAAA,EACd,CACI,CACH,GACJR,KACCG,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKb,WAAWA,EAAUI;AAAAA,EAAAA,GAAa,GAAGc,KAAKC,MAAMR,CAAkB,CAAC,aAAmB,CAE1F;AAET;"}

package/dist/index41.js

@@ -1,6 +1,6 @@
 import e, { useState as g, useRef as p } from "react";
 import { Icon as c } from "./index5.js";
-import { ProgressBar as x } from "./index40.js";
+import { ProgressBar as f } from "./index40.js";
 /* empty css         */
 const r = {
   gettingStartedWidgetCtn: "border border-[var(--color-gray-200)] rounded-[12px] w-[385px] p-4",
@@ -14,7 +14,7 @@ const r = {
 }) => {
   const [n, l] = g(!1), o = p(null), i = () => {
     l(!n);
-  }, m = (t) => t ? "var(--color-green-500)" : "var(--color-gray-200)";
+  }, d = (t) => t ? "var(--color-green-500)" : "var(--color-gray-200)";
   return /* @__PURE__ */ e.createElement("div", {
     className: `${r.gettingStartedWidgetCtn} ${s} getting-started-widget-ctn`
   }, /* @__PURE__ */ e.createElement("div", {
@@ -27,7 +27,7 @@ const r = {
     onClick: i
   })), /* @__PURE__ */ e.createElement("div", {
     className: "mt-[12px]"
-  }, /* @__PURE__ */ e.createElement(x, {
+  }, /* @__PURE__ */ e.createElement(f, {
     totalTasks: a.length,
     completedTasks: a.filter((t) => t.isComplete).length,
     progressBarCtnClassName: "get-started-progress-bar-ctn"
@@ -37,18 +37,19 @@ const r = {
     style: {
       maxHeight: n ? `${o.current?.scrollHeight}px` : "0px"
     }
-  }, a.map((t, d) => /* @__PURE__ */ e.createElement("div", {
-    key: d,
+  }, a.map((t, m) => /* @__PURE__ */ e.createElement("div", {
+    key: m,
     className: r.actionItemCtn
   }, /* @__PURE__ */ e.createElement(c, {
     name: "checked-circle",
-    stroke: m(t.isComplete)
+    stroke: d(t.isComplete)
   }), /* @__PURE__ */ e.createElement("span", {
     className: t.isComplete ? "text-[var(--color-gray-500)]" : "text-[var(--color-gray-900)] cursor-pointer",
     onClick: t?.handleActionItemClick
   }, t.label)))));
 };
 export {
-  E as GetStartedWidget
+  E as GetStartedWidget,
+  E as default
 };
 //# sourceMappingURL=index41.js.map

package/dist/index42.js

@@ -1,5 +1,5 @@
 import e, { useState as p } from "react";
-import { Icon as l } from "./index5.js";
+import { Icon as a } from "./index5.js";
 import { Button as w } from "./index3.js";
 /* empty css         */
 const r = {
@@ -15,7 +15,7 @@ const r = {
   customAlertClassBtn: "bg-[var(--color-red-500)] text-[var(--color-white)] hover:bg-[var(--color-red-500)] border border-[var(--color-white)] hover:border-[var(--color-white)]",
   customNudgeClassBtn: "bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-500)] border border-[var(--color-white)] hover:border-[var(--color-white)]"
 }, B = ({
-  messageBarCtnClassName: a = "",
+  messageBarCtnClassName: l = "",
   messageBarType: o = "info",
   message: s = "",
   hasCloseIcon: c = !1,
@@ -46,7 +46,7 @@ const r = {
     }
   }, [o]);
   return /* @__PURE__ */ e.createElement("div", {
-    className: `se-design-message-bar ${a} ${r.messageBarCtn} ${r[o]} ${v ? "show" : "hide"}`,
+    className: `se-design-message-bar ${l} ${r.messageBarCtn} ${r[o]} ${v ? "show" : "hide"}`,
     "data-automation-id": u
   }, /* @__PURE__ */ e.createElement("div", {
     className: r.messageCtn
@@ -54,7 +54,7 @@ const r = {
     className: "inline-flex items-center"
   }, /* @__PURE__ */ e.createElement("span", {
     className: f
-  }, /* @__PURE__ */ e.createElement(l, {
+  }, /* @__PURE__ */ e.createElement(a, {
     name: "info",
     className: "inline-block h-fit relative top-[3px] mr-1"
   }), s, n && /* @__PURE__ */ e.createElement(w, {
@@ -64,13 +64,14 @@ const r = {
     onClick: m,
     className: `${g} ml-2 alert-btn`,
     automationId: "message-bar-cta"
-  })))), c && /* @__PURE__ */ e.createElement(l, {
+  })))), c && /* @__PURE__ */ e.createElement(a, {
     name: "close",
     className: r.closeIconCtn,
     onClick: d
   }));
 };
 export {
-  B as MessageBar
+  B as MessageBar,
+  B as default
 };
 //# sourceMappingURL=index42.js.map

package/dist/index44.js

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

package/dist/index45.js

@@ -1,10 +1,10 @@
 import t, { useState as m, useRef as h, useCallback as f, useEffect as x } from "react";
 /* empty css         */
-import g from "./index213.js";
+import g from "./index214.js";
 import { Icon as T } from "./index5.js";
-import { useStableId as E } from "./index189.js";
-import { getA11yNameAttributes as ce } from "./index70.js";
-import { useCombobox as se } from "./index195.js";
+import { useStableId as E } from "./index190.js";
+import { getA11yNameAttributes as ce } from "./index71.js";
+import { useCombobox as se } from "./index196.js";
 function c() {
   return c = Object.assign ? Object.assign.bind() : function(s) {
     for (var i = 1; i < arguments.length; i++) {