se-design 1.0.3 → 1.0.8-5.dev.0

package/dist/index31.js

@@ -1,59 +1,80 @@
-import a, { useRef as f } from "react";
-function b(e) {
-  const {
-    label: n,
-    value: o,
-    checked: r,
-    disabled: t,
-    name: d,
-    onChange: l,
-    width: c,
-    radioLabelClassName: s = "",
-    radioContainerClassName: m = "",
-    automationId: u = "",
-    hasBorder: x = !1
-  } = e, i = f(null);
-  return /* @__PURE__ */ a.createElement("div", {
-    className: `flex flex-col justify-center items-start gap-2 ${t ? "cursor-not-allowed" : "cursor-pointer"} bg-[var(--color-white)] ${x ? `border ${r ? "border-[#1088E7]" : "border-[#C9D4E3]"} p-4` : ""} rounded-[6px] transition-colors duration-300 ${t ? "opacity-50" : ""} ${m}`,
-    onClick: () => i.current?.click(),
-    style: {
-      width: c || "20vw"
-    },
-    "data-automation-id": u
-  }, /* @__PURE__ */ a.createElement("div", {
-    className: "flex items-center gap-3",
-    "data-automation-id": "radio-field-content"
-  }, /* @__PURE__ */ a.createElement("input", {
-    ref: i,
-    type: "radio",
-    id: o,
-    name: d,
-    value: o,
-    checked: r,
-    disabled: t,
-    className: "radio-field-input cursor-pointer accent-[#1088E7] 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)] ${s} `,
-    style: {
-      fontSize: "16px",
-      fontWeight: "400"
-    }
-  }, n))), e.helperLabel && /* @__PURE__ */ a.createElement("span", {
-    className: `text-sm font-normal text-[var(--color-gray-600)] ${e.maxWidth ? `max-w-[${e.maxWidth}]` : "max-w-[20vw]"} break-words whitespace-normal`,
-    "data-automation-id": "radio-field-helper-text"
-  }, e.helperLabel));
-}
+import s, { useEffect as N } from "react";
+import { Icon as g } from "./index6.js";
+import { announce as k } from "./index75.js";
+const m = {
+  pageNavigation: "px-[6px] py-[6px] flex items-center justify-center",
+  pageItem: "px-[7px] py-[1px] min-w-[24px] text-sm flex items-center justify-center rounded border hover:cursor-pointer appearance-none focus-outline"
+}, C = ({
+  currentPage: a,
+  itemsPerPage: l,
+  totalItems: i,
+  onPageChange: p,
+  mobileView: u = !1,
+  ariaLabel: b = "Pagination Controls"
+}) => {
+  const o = Math.ceil(i / l), d = 1, v = o, h = (a - 1) * l + 1, c = Math.min(a * l, i), y = c < i, $ = a > 1, f = `Showing ${h}-${c} of ${i}`;
+  N(() => {
+    k(f, {
+      batchId: "pagination-status"
+    });
+  }, [f]);
+  const E = () => {
+    const e = [], t = (n) => {
+      const x = a === n;
+      return /* @__PURE__ */ s.createElement("li", {
+        key: n
+      }, /* @__PURE__ */ s.createElement("button", {
+        type: "button",
+        onClick: () => p(n),
+        className: `${m.pageItem} ${x ? "bg-[var(--color-gray-100)] border-[var(--color-gray-300)]" : "border-[var(--color-gray-200)] hover:bg-[var(--color-gray-50)]"}`,
+        "aria-label": `Page ${n}`,
+        "aria-current": x ? "page" : void 0,
+        "data-automation-id": `page-number-${n}`
+      }, n));
+    }, r = (n) => /* @__PURE__ */ s.createElement("li", {
+      key: n,
+      "aria-hidden": "true"
+    }, /* @__PURE__ */ s.createElement("span", {
+      className: "w-5 h-5 text-sm rounded border border-[var(--color-gray-200)] flex items-end justify-center"
+    }, "..."));
+    if (u)
+      return e.push(t(a)), e;
+    if (a <= 3) {
+      for (let n = 1; n <= Math.min(3, o); n++)
+        e.push(t(n));
+      o > 3 && (e.push(r("ellipsis-end")), e.push(t(o)));
+    } else a >= o - 2 ? (e.push(t(d)), e.push(r("ellipsis-start")), e.push(t(o - 2)), e.push(t(o - 1)), e.push(t(o))) : (e.push(t(d)), e.push(r("ellipsis-start")), e.push(t(a - 1)), e.push(t(a)), e.push(t(a + 1)), e.push(r("ellipsis-end")), e.push(t(v)));
+    return e;
+  };
+  return /* @__PURE__ */ s.createElement("nav", {
+    "aria-label": b,
+    "data-automation-id": "pagination-container",
+    className: "flex items-center gap-1 font-normal"
+  }, /* @__PURE__ */ s.createElement("span", {
+    className: "text-sm text-[var(--color-gray-700)] mr-1",
+    "data-automation-id": "pagination-items-info"
+  }, `${u ? "" : "Showing "}${h}-${c} of ${i}`), /* @__PURE__ */ s.createElement(g, {
+    name: "next",
+    size: 12,
+    ariaLabel: "Previous page",
+    rotation: "180",
+    disabled: !$,
+    onClick: () => p(a - 1),
+    className: `stroke-[var(--color-gray-600)] ${m.pageNavigation}`,
+    automationId: "pagination-previous-button"
+  }), /* @__PURE__ */ s.createElement("ul", {
+    className: "flex items-center gap-1"
+  }, E()), /* @__PURE__ */ s.createElement(g, {
+    name: "next",
+    size: 12,
+    ariaLabel: "Next page",
+    disabled: !y,
+    onClick: () => p(a + 1),
+    className: m.pageNavigation,
+    automationId: "pagination-next-button"
+  }));
+};
 export {
-  b as Radio
+  C as Pagination
 };
 //# sourceMappingURL=index31.js.map

package/dist/index31.js.map

@@ -1 +1 @@
-{"version":3,"file":"index31.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  hasBorder?: boolean;\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    hasBorder = false\n  } = props;\n  const radioRef = useRef<HTMLInputElement>(null);\n\n  return (\n    <div\n      className={`flex flex-col justify-center items-start gap-2 ${\n        disabled ? 'cursor-not-allowed' : 'cursor-pointer'\n      } bg-[var(--color-white)] ${\n        hasBorder ? `border ${checked ? 'border-[#1088E7]' : 'border-[#C9D4E3]'} p-4` : ''\n      } rounded-[6px] transition-colors duration-300 ${disabled ? 'opacity-50' : ''} ${radioContainerClassName}`}\n      onClick={() => radioRef.current?.click()}\n      style={{ width: width || '20vw' }}\n      data-automation-id={automationId}\n    >\n      <div className=\"flex items-center gap-3\" 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-[#1088E7] 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\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-[20vw]'\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","hasBorder","radioRef","useRef","React","createElement","className","onClick","current","click","style","ref","type","id","htmlFor","helperLabel","fontSize","fontWeight","maxWidth"],"mappings":";AAkBO,SAASA,EAAMC,GAAmB;AACjC,QAAA;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,WAAAA,IAAY;AAAA,EACVX,IAAAA,GACEY,IAAWC,EAAyB,IAAI;AAG5CC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,kDACTZ,IAAW,uBAAuB,gBAAgB,4BAElDO,IAAY,UAAUR,IAAU,qBAAqB,kBAAkB,SAAS,EAAE,iDACnCC,IAAW,eAAe,EAAE,IAAIK,CAAuB;AAAA,IACxGQ,SAASA,MAAML,EAASM,SAASC,MAAM;AAAA,IACvCC,OAAO;AAAA,MAAEb,OAAOA,KAAS;AAAA,IAAO;AAAA,IAChC,sBAAoBG;AAAAA,EAAAA,GAEpBK,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAA0B,sBAAmB;AAAA,EAAA,GAC1DD,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACEM,KAAKT;AAAAA,IACLU,MAAK;AAAA,IACLC,IAAIrB;AAAAA,IACJG,MAAAA;AAAAA,IACAH,OAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAY,WAAU;AAAA,IACVV,UAAUA,MAAM;AACdA,MAAAA,KAAYA,EAAS;AAAA,QAAE,GAAGN;AAAAA,QAAOG,SAAS;AAAA,MAAA,CAAM;AAAA,IAClD;AAAA,EAAA,CACD,GACDY,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACES,SAAStB;AAAAA,IACTc,WAAW,GAAGhB,EAAMyB,cAAc,4BAA4B,EAAE,IAC9DrB,IAAW,uBAAuB,gBAAgB;AAAA,IAEpD,sBAAmB;AAAA,EAAA,GAEnBW,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IACEC,WAAW,wCAAwCR,CAAmB;AAAA,IACtEY,OAAO;AAAA,MAAEM,UAAU;AAAA,MAAQC,YAAY;AAAA,IAAM;AAAA,EAAA,GAE5C1B,CACG,CACD,CACJ,GAEJD,EAAMyB,eACLV,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IACEC,WAAW,oDACThB,EAAM4B,WAAW,UAAU5B,EAAM4B,QAAQ,MAAM,cAAc;AAAA,IAE/D,sBAAmB;AAAA,EAAA,GAElB5B,EAAMyB,WACH,CAEL;AAET;"}
+{"version":3,"file":"index31.js","sources":["../src/components/Pagination/index.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport { Icon } from 'components/Icon';\nimport { announce } from 'src/utils/a11y/liveAnnouncer/LiveAnnouncer';\n\ninterface PaginationProps {\n  currentPage: number;\n  itemsPerPage: number;\n  totalItems: number;\n  onPageChange: (page: number) => void;\n  mobileView?: boolean;\n  ariaLabel?: string;\n}\n\nconst paginationClassNames = {\n  pageNavigation: \"px-[6px] py-[6px] flex items-center justify-center\",\n  pageItem: \"px-[7px] py-[1px] min-w-[24px] text-sm flex items-center justify-center rounded border hover:cursor-pointer appearance-none focus-outline\"\n}\n\nexport const Pagination: React.FC<PaginationProps> = ({ currentPage, itemsPerPage, totalItems, onPageChange, mobileView = false, ariaLabel = 'Pagination Controls' }) => {\n  const totalPages = Math.ceil(totalItems / itemsPerPage);\n  const firstPage = 1;\n  const lastPage = totalPages;\n  const startItem = (currentPage - 1) * itemsPerPage + 1;\n  const endItem = Math.min(currentPage * itemsPerPage, totalItems);\n  const hasNextPage = endItem < totalItems;\n  const hasPrevPage = currentPage > 1;\n\n  const showingText = `Showing ${startItem}-${endItem} of ${totalItems}`;\n\n  useEffect(() => {\n    announce(showingText, { batchId: 'pagination-status' });\n  }, [showingText]);\n\n  const renderPageNumbers = () => {\n    const pages: React.ReactNode[] = [];\n\n    const renderPageNumber = (pageNum: number) => {\n      const isActive = currentPage === pageNum;\n      return (\n        <li key={pageNum}>\n          <button\n            type=\"button\"\n            onClick={() => onPageChange(pageNum)}\n            className={`${paginationClassNames.pageItem} ${isActive ? 'bg-[var(--color-gray-100)] border-[var(--color-gray-300)]' : 'border-[var(--color-gray-200)] hover:bg-[var(--color-gray-50)]'}`}\n            aria-label={`Page ${pageNum}`}\n            aria-current={isActive ? 'page' : undefined}\n            data-automation-id={`page-number-${pageNum}`}\n          >\n            {pageNum}\n          </button>\n        </li>\n      );\n    };\n\n    const renderEllipsis = (key: string) => {\n      return (\n        <li key={key} aria-hidden=\"true\">\n          <span className=\"w-5 h-5 text-sm rounded border border-[var(--color-gray-200)] flex items-end justify-center\">\n            ...\n          </span>\n        </li>\n      );\n    };\n\n    if (mobileView) {\n      pages.push(renderPageNumber(currentPage));\n      return pages;\n    }\n    if (currentPage <= 3) {\n      for (let i = 1; i <= Math.min(3, totalPages); i++) {\n        pages.push(renderPageNumber(i));\n      }\n\n      if (totalPages > 3) {\n        pages.push(renderEllipsis(\"ellipsis-end\"));\n        pages.push(renderPageNumber(totalPages));\n      }\n    } else if (currentPage >= totalPages - 2) {\n      pages.push(renderPageNumber(firstPage));\n      pages.push(renderEllipsis(\"ellipsis-start\"));\n      pages.push(renderPageNumber(totalPages - 2));\n      pages.push(renderPageNumber(totalPages - 1));\n      pages.push(renderPageNumber(totalPages));\n    } else {\n      pages.push(renderPageNumber(firstPage));\n      pages.push(renderEllipsis(\"ellipsis-start\"));\n      pages.push(renderPageNumber(currentPage - 1));\n      pages.push(renderPageNumber(currentPage));\n      pages.push(renderPageNumber(currentPage + 1));\n      pages.push(renderEllipsis(\"ellipsis-end\"));\n      pages.push(renderPageNumber(lastPage));\n    }\n\n    return pages;\n  };\n\n  return (\n    <nav aria-label={ariaLabel} data-automation-id=\"pagination-container\" className=\"flex items-center gap-1 font-normal\">\n      <span\n        className=\"text-sm text-[var(--color-gray-700)] mr-1\"\n        data-automation-id=\"pagination-items-info\"\n      >\n        {`${mobileView ? \"\" : \"Showing \"}${startItem}-${endItem} of ${totalItems}`}\n      </span>\n      <Icon\n        name=\"next\"\n        size={12}\n        ariaLabel=\"Previous page\"\n        rotation=\"180\"\n        disabled={!hasPrevPage}\n        onClick={() => onPageChange(currentPage - 1)}\n        className={`stroke-[var(--color-gray-600)] ${paginationClassNames.pageNavigation}`}\n        automationId=\"pagination-previous-button\"\n      />\n      <ul className=\"flex items-center gap-1\">\n        {renderPageNumbers()}\n      </ul>\n      <Icon\n        name=\"next\"\n        size={12}\n        ariaLabel=\"Next page\"\n        disabled={!hasNextPage}\n        onClick={() => onPageChange(currentPage + 1)}\n        className={paginationClassNames.pageNavigation}\n        automationId=\"pagination-next-button\"\n      />\n    </nav>\n  );\n};\n"],"names":["React__default","useEffect","Icon","announce","paginationClassNames","pageNavigation","pageItem","Pagination","currentPage","itemsPerPage","totalItems","onPageChange","mobileView","ariaLabel","totalPages","Math","ceil","firstPage","lastPage","startItem","endItem","min","hasNextPage","hasPrevPage","showingText","batchId","renderPageNumbers","pages","renderPageNumber","pageNum","isActive","React","createElement","key","type","onClick","className","undefined","renderEllipsis","push","i","name","size","rotation","disabled","automationId"],"mappings":"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"}

package/dist/index32.js

@@ -1,35 +1,102 @@
-import o from "react";
-import { Radio as l } from "./index31.js";
-function r() {
-  return r = Object.assign ? Object.assign.bind() : function(a) {
-    for (var n = 1; n < arguments.length; n++) {
-      var t = arguments[n];
-      for (var e in t) ({}).hasOwnProperty.call(t, e) && (a[e] = t[e]);
-    }
-    return a;
-  }, r.apply(null, arguments);
-}
-function i(a) {
-  const {
-    automationId: n = ""
-  } = a, t = (e) => {
-    a.onRadioGroupChange({
-      ...e,
-      checked: !0
-    });
-  };
-  return /* @__PURE__ */ o.createElement("div", {
-    "data-automation-id": n
-  }, /* @__PURE__ */ o.createElement("fieldset", {
-    className: `flex gap-2 ${a.direction === "column" ? "flex-col" : "flex-row"}`
-  }, a.options.map((e) => /* @__PURE__ */ o.createElement(l, r({
-    key: e.value
-  }, e, {
-    onChange: t,
-    checked: e.value === a.value
-  })))));
-}
+import e from "react";
+import { Button as N } from "./index4.js";
+import { Badge as I } from "./index10.js";
+import { Icon as d } from "./index6.js";
+/* empty css         */
+const t = {
+  widgetCtn: "flex flex-col gap-[2px] align-center border border-[var(--color-gray-200)] rounded-[12px] w-[385px]",
+  widgetImageCtn: "cursor-pointer",
+  descriptionCtn: "p-4 flex flex-col",
+  widgetTitle: "text-[var(--color-gray-900)] mt-[4px] mb-[8px]",
+  widgetDescription: "text-[var(--color-gray-700)] mb-[4px]",
+  widgetLinkCta: "text-[var(--color-blue-500)] cursor-pointer hover:text-[var(--color-blue-600)]",
+  widgetButtonCta: "self-start",
+  widgetBadge: "w-fit",
+  webinarInfoCtn: "flex flex-col gap-2",
+  webinarSpeaker: "text-[var(--color-gray-700)]",
+  webinarDate: "text-[var(--color-gray-700)]",
+  webinarDescriptionInfo: "flex gap-2",
+  webinarTimeInfo: "flex gap-2",
+  requestFeatureCtn: "flex gap-[12px]",
+  requestFeatureImageCtn: "w-[48px] h-[48px] border border-[var(--color-gray-200)] rounded-[50%] flex items-center flex-shrink-0 bg-[var(--color-red-50)]",
+  requestFeatureDescriptionCtn: "flex flex-col"
+}, B = ({
+  widgetClassName: g = "",
+  widgetType: a = "general",
+  widgetTitle: r = "",
+  widgetDescription: l = "",
+  widgetImage: p,
+  hasImage: f = !1,
+  hasButtonCta: n = !1,
+  hasLinkCta: i = !1,
+  ctaText: o = "",
+  hasBadge: x = !1,
+  badgeText: w = "",
+  buttonBgColor: u = "secondary",
+  onCtaClick: b,
+  onWidgetClick: v,
+  webinarDateInfo: c,
+  webinarSpeaker: s
+}) => {
+  const E = x && /* @__PURE__ */ e.createElement(I, {
+    label: w,
+    className: t.widgetBadge,
+    bgColor: "var(--color-yellow-50)",
+    textColor: "var(--color-yellow-400)",
+    fontWeight: "normal"
+  }), m = (i || n) && /* @__PURE__ */ e.createElement(e.Fragment, null, i && /* @__PURE__ */ e.createElement("span", {
+    className: t.widgetLinkCta
+  }, o), n && /* @__PURE__ */ e.createElement(N, {
+    type: u,
+    size: "md",
+    label: o,
+    className: `${t.widgetButtonCta} mt-[4px]`,
+    onClick: b
+  })), C = f && /* @__PURE__ */ e.createElement("div", {
+    className: `${t.widgetImageCtn} widget-image-ctn`
+  }, /* @__PURE__ */ e.createElement("img", {
+    src: p,
+    alt: "widget-image"
+  }));
+  return /* @__PURE__ */ e.createElement("div", {
+    className: `${t.widgetCtn} ${g} widget-ctn`,
+    onClick: v
+  }, a !== "general" && C, /* @__PURE__ */ e.createElement("div", {
+    className: t.descriptionCtn
+  }, a !== "general" && E, a !== "request-feature" && /* @__PURE__ */ e.createElement("span", {
+    className: `${t.widgetTitle} widget-title`
+  }, r), ["promotion", "general"].includes(a) && /* @__PURE__ */ e.createElement("span", {
+    className: `${t.widgetDescription} widget-description`
+  }, l), a === "webinar" && /* @__PURE__ */ e.createElement("div", {
+    className: t.webinarInfoCtn
+  }, s && /* @__PURE__ */ e.createElement("div", {
+    className: `${t.webinarDescriptionInfo} align-baseline`
+  }, /* @__PURE__ */ e.createElement(d, {
+    name: "people",
+    className: "relative top-[2px]"
+  }), /* @__PURE__ */ e.createElement("span", {
+    className: t.webinarSpeaker
+  }, s)), c && /* @__PURE__ */ e.createElement("div", {
+    className: `${t.webinarTimeInfo} align-baseline mb-[4px]`
+  }, /* @__PURE__ */ e.createElement(d, {
+    name: "clock",
+    className: "relative top-[2px]"
+  }), /* @__PURE__ */ e.createElement("span", {
+    className: t.webinarDate
+  }, c))), a === "request-feature" ? /* @__PURE__ */ e.createElement("div", {
+    className: t.requestFeatureCtn
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: t.requestFeatureImageCtn
+  }), /* @__PURE__ */ e.createElement("div", {
+    className: t.requestFeatureDescriptionCtn
+  }, /* @__PURE__ */ e.createElement("span", {
+    className: `${t.widgetTitle} widget-title`
+  }, r), /* @__PURE__ */ e.createElement("span", {
+    className: `${t.widgetDescription} widget-description`
+  }, l), m)) : m));
+};
 export {
-  i as RadioGroup
+  B as Widget,
+  B as default
 };
 //# sourceMappingURL=index32.js.map

package/dist/index32.js.map

@@ -1 +1 @@
-{"version":3,"file":"index32.js","sources":["../src/components/RadioGroup/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Radio, RadioProps } from '../Radio';\n\nexport interface RadioGroupProps {\n  options: RadioProps[];\n  onRadioGroupChange: (obj: RadioProps) => void;\n  value?: string;\n  direction?: 'row' | 'column';\n  automationId?: string;\n}\n\nexport function RadioGroup(props: RadioGroupProps) {\n  const { automationId = '' } = props;\n  const handleRadioChange = (obj: RadioProps) => {\n    props.onRadioGroupChange({ ...obj, checked: true });\n  };\n  return (\n    <div data-automation-id={automationId}>\n      <fieldset className={`flex gap-2 ${props.direction === 'column' ? 'flex-col' : 'flex-row'}`}>\n        {props.options.map((option) => (\n          <Radio key={option.value} {...option} onChange={handleRadioChange} checked={option.value === props.value} />\n        ))}\n      </fieldset>\n    </div>\n  );\n}\n"],"names":["RadioGroup","props","automationId","handleRadioChange","obj","onRadioGroupChange","checked","React","createElement","className","direction","options","map","option","Radio","_extends","key","value","onChange"],"mappings":";;;;;;;;;;;AAWO,SAASA,EAAWC,GAAwB;AAC3C,QAAA;AAAA,IAAEC,cAAAA,IAAe;AAAA,EAAOD,IAAAA,GACxBE,IAAoBA,CAACC,MAAoB;AAC7CH,IAAAA,EAAMI,mBAAmB;AAAA,MAAE,GAAGD;AAAAA,MAAKE,SAAS;AAAA,IAAA,CAAM;AAAA,EAAA;AAGlDC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAK,sBAAoBN;AAAAA,EAAAA,GACvBM,gBAAAA,EAAAA,cAAA,YAAA;AAAA,IAAUC,WAAW,cAAcR,EAAMS,cAAc,WAAW,aAAa,UAAU;AAAA,EAAA,GACtFT,EAAMU,QAAQC,IAAKC,OAClBL,gBAAAA,EAAAA,cAACM,GAAKC,EAAA;AAAA,IAACC,KAAKH,EAAOI;AAAAA,KAAWJ,GAAM;AAAA,IAAEK,UAAUf;AAAAA,IAAmBG,SAASO,EAAOI,UAAUhB,EAAMgB;AAAAA,EAAAA,CAAQ,CAAA,CAC5G,CACO,CACP;AAET;"}
+{"version":3,"file":"index32.js","sources":["../src/components/Widget/index.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { Map } from \"../../utils/common.types\";\nimport { Button } from \"../Button\";\nimport { Badge } from \"../Badge\";\nimport { Icon } from \"../Icon\";\nimport \"./style.scss\";\n\nexport interface WidgetProps {\n  widgetClassName?: string;\n  widgetType?: \"promotion\" | \"webinar\" | \"request-feature\" | \"general\";\n  widgetTitle?: string;\n  hasBadge?: boolean;\n  webinarSpeaker?: string;\n  badgeText?: string;\n  widgetDescription?: string;\n  webinarDateInfo?: string;\n  hasImage?: boolean;\n  widgetImage?: string;\n  hasButtonCta?: boolean;\n  buttonBgColor?: 'primary' | 'secondary';\n  hasLinkCta?: boolean;\n  ctaText?: string;\n  onCtaClick?: () => void;\n  onWidgetClick?: () => void;\n}\n\nconst className: Map = {\n  widgetCtn: 'flex flex-col gap-[2px] align-center border border-[var(--color-gray-200)] rounded-[12px] w-[385px]',\n  widgetImageCtn: 'cursor-pointer',\n  descriptionCtn: 'p-4 flex flex-col',\n  widgetTitle: 'text-[var(--color-gray-900)] mt-[4px] mb-[8px]',\n  widgetDescription: 'text-[var(--color-gray-700)] mb-[4px]',\n  widgetLinkCta: 'text-[var(--color-blue-500)] cursor-pointer hover:text-[var(--color-blue-600)]',\n  widgetButtonCta: 'self-start',\n  widgetBadge: 'w-fit',\n  webinarInfoCtn: 'flex flex-col gap-2',\n  webinarSpeaker: 'text-[var(--color-gray-700)]',\n  webinarDate: 'text-[var(--color-gray-700)]',\n  webinarDescriptionInfo: 'flex gap-2',\n  webinarTimeInfo: 'flex gap-2',\n  requestFeatureCtn: 'flex gap-[12px]',\n  requestFeatureImageCtn: 'w-[48px] h-[48px] border border-[var(--color-gray-200)] rounded-[50%] flex items-center flex-shrink-0 bg-[var(--color-red-50)]',\n  requestFeatureDescriptionCtn: 'flex flex-col',\n};\n\nexport const Widget: FC<WidgetProps> = ({\n  widgetClassName = \"\",\n  widgetType = 'general',\n  widgetTitle = \"\",\n  widgetDescription = \"\",\n  widgetImage,\n  hasImage = false,\n  hasButtonCta = false,\n  hasLinkCta = false,\n  ctaText = \"\",\n  hasBadge = false,\n  badgeText = \"\",\n  buttonBgColor = 'secondary',\n  onCtaClick,\n  onWidgetClick,\n  webinarDateInfo,\n  webinarSpeaker,\n}) => {\n\n  const renderBadge = hasBadge && (\n    <Badge\n      label={badgeText}\n      className={className.widgetBadge}\n      bgColor=\"var(--color-yellow-50)\"\n      textColor=\"var(--color-yellow-400)\"\n      fontWeight=\"normal\"\n    />\n  );\n\n  const renderCTA = (hasLinkCta || hasButtonCta) && (\n    <React.Fragment>\n      {hasLinkCta && <span className={className.widgetLinkCta}>{ctaText}</span>}\n      {hasButtonCta && <Button type={buttonBgColor} size=\"md\" label={ctaText} className={`${className.widgetButtonCta} mt-[4px]`} onClick={onCtaClick} />}\n    </React.Fragment>\n  );\n\n  const renderImage = hasImage && (\n    <div className={`${className.widgetImageCtn} widget-image-ctn`}>\n      <img src={widgetImage} alt=\"widget-image\"/>\n    </div>\n  );\n\n  return (\n    <div className={`${className.widgetCtn} ${widgetClassName} widget-ctn`} onClick={onWidgetClick}>\n      {widgetType !== \"general\" && renderImage}\n      <div className={className.descriptionCtn}>\n        {widgetType !== \"general\" && renderBadge}\n        {widgetType !== \"request-feature\" && <span className={`${className.widgetTitle} widget-title`}>{widgetTitle}</span>}\n\n        {([\"promotion\", \"general\"].includes(widgetType)) && (\n          <span className={`${className.widgetDescription} widget-description`}>{widgetDescription}</span>\n        )}\n\n        {widgetType === \"webinar\" && (\n          <div className={className.webinarInfoCtn}>\n            {webinarSpeaker && (\n            <div className={`${className.webinarDescriptionInfo} align-baseline`}>\n              <Icon name=\"people\" className=\"relative top-[2px]\" />\n              <span className={className.webinarSpeaker}>{webinarSpeaker}</span>\n            </div>\n            )}\n            {webinarDateInfo && (\n               <div className={`${className.webinarTimeInfo} align-baseline mb-[4px]`}>\n                <Icon name=\"clock\" className=\"relative top-[2px]\" />\n                <span className={className.webinarDate}>{webinarDateInfo}</span>\n              </div>\n            )}\n          </div>\n        )}\n\n        {widgetType === \"request-feature\" ? (\n          <div className={className.requestFeatureCtn}>\n            <div className={className.requestFeatureImageCtn} />\n            <div className={className.requestFeatureDescriptionCtn}>\n              <span className={`${className.widgetTitle} widget-title`}>{widgetTitle}</span>\n              <span className={`${className.widgetDescription} widget-description`}>{widgetDescription}</span>\n              {renderCTA}\n            </div>\n          </div>\n        ) : (\n          renderCTA\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Widget;"],"names":["React__default","Button","Badge","Icon","className","widgetCtn","widgetImageCtn","descriptionCtn","widgetTitle","widgetDescription","widgetLinkCta","widgetButtonCta","widgetBadge","webinarInfoCtn","webinarSpeaker","webinarDate","webinarDescriptionInfo","webinarTimeInfo","requestFeatureCtn","requestFeatureImageCtn","requestFeatureDescriptionCtn","Widget","widgetClassName","widgetType","widgetImage","hasImage","hasButtonCta","hasLinkCta","ctaText","hasBadge","badgeText","buttonBgColor","onCtaClick","onWidgetClick","webinarDateInfo","renderBadge","React","createElement","label","bgColor","textColor","fontWeight","renderCTA","Fragment","type","size","onClick","renderImage","src","alt","includes","name"],"mappings":"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"}

package/dist/index33.js

@@ -1,40 +1,79 @@
-import e, { useState as c, useEffect as d } from "react";
-import { Icon as f } from "./index5.js";
-const h = ({
-  title: n,
-  content: r,
-  defaultOpen: a,
-  overflow: o,
-  titleClassName: s = "",
-  showSeparator: l = !0,
-  automationId: m = ""
-}) => {
-  const [t, i] = c(!1);
-  return d(() => {
-    i(a || !1);
-  }, [a]), /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement("div", {
-    className: "flex items-center cursor-pointer max-w-[50vw]",
-    onClick: () => i(!t),
-    "data-automation-id": m
+import e, { useRef as y } from "react";
+import { useStableId as N } from "./index205.js";
+function I(a) {
+  const {
+    label: s,
+    value: n,
+    checked: l,
+    disabled: t,
+    name: i,
+    onChange: u,
+    width: m,
+    radioLabelClassName: f = "",
+    radioContainerClassName: p = "",
+    automationId: h = "",
+    bgColor: b = "var(--color-white)",
+    withBorder: x = !0,
+    content: c,
+    ariaControls: C
+  } = a, o = y(null), d = N(void 0, `${i}-${n}`);
+  e.useLayoutEffect(() => {
+    o.current && (o.current.checked = l);
+  }, [l]);
+  const g = () => {
+    t || (o.current?.focus(), o.current?.click());
+  }, k = (r) => {
+    r.stopPropagation();
+  }, w = (r) => {
+    r.stopPropagation();
+  }, v = () => {
+    u?.({
+      ...a,
+      checked: !0
+    });
+  }, $ = 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 ${$} p-4` : ""} rounded-[6px] transition-colors duration-300 ${t ? "opacity-50" : ""} ${p}`,
+    onClick: g,
+    style: {
+      width: m || "auto",
+      backgroundColor: b
+    },
+    "data-automation-id": h
   }, /* @__PURE__ */ e.createElement("div", {
-    className: `transform transition-transform duration-300 ${t ? "rotate-90" : ""}`
-  }, /* @__PURE__ */ e.createElement(f, {
-    name: "rightSide"
-  })), /* @__PURE__ */ e.createElement("h4", {
-    className: `text-[#1B2636] font-inter text-[18px] font-semibold leading-[24px] ${s}`
-  }, n)), /* @__PURE__ */ e.createElement("div", {
-    className: `
-        overflow-${o || "hidden"}
-        transition-all
-        duration-300
-        ml-1
-        mt-[1vw]
-        ${t ? "max-h-[1000vh] opacity-100 visible h-auto" : "max-h-0 opacity-0 invisible h-0"}`
-  }, r), l && /* @__PURE__ */ e.createElement("div", {
-    className: `h-[1px] bg-[#E5E7EB] ${t ? "hidden" : "block"}`
-  }));
-};
+    className: "flex items-center gap-[0.625rem]",
+    "data-automation-id": "radio-field-content"
+  }, /* @__PURE__ */ e.createElement("input", {
+    ref: o,
+    type: "radio",
+    id: d,
+    name: i,
+    value: n,
+    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]",
+    "aria-controls": C,
+    onClick: w,
+    onChange: v
+  }), /* @__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: k
+  }, /* @__PURE__ */ e.createElement("span", {
+    className: `text-sm text-[var(--color-gray-800)] ${f} `,
+    style: {
+      fontSize: "16px",
+      fontWeight: "400"
+    }
+  }, 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"
+  }, a.helperLabel));
+}
 export {
-  h as Accordion
+  I as Radio
 };
 //# sourceMappingURL=index33.js.map

package/dist/index33.js.map

@@ -1 +1 @@
-{"version":3,"file":"index33.js","sources":["../src/components/Accordion/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from 'react';\nimport { Icon } from '../Icon';\n\nexport interface AccordionProps {\n  title: string;\n  titleClassName?: string;\n  content: React.ReactNode;\n  defaultOpen?: boolean;\n  showSeparator?: boolean;\n  overflow?: 'hidden' | 'visible' | 'scroll' | 'auto' | undefined | string;\n  automationId?: string;\n}\n\nexport const Accordion: FC<AccordionProps> = ({\n  title,\n  content,\n  defaultOpen,\n  overflow,\n  titleClassName = '',\n  showSeparator = true,\n  automationId = ''\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  useEffect(() => {\n    setIsOpen(defaultOpen || false);\n  }, [defaultOpen]);\n  return (\n    <div>\n      <div className=\"flex items-center cursor-pointer max-w-[50vw]\" onClick={() => setIsOpen(!isOpen)} data-automation-id={automationId}>\n        <div className={`transform transition-transform duration-300 ${isOpen ? 'rotate-90' : ''}`}>\n          <Icon name=\"rightSide\" />\n        </div>\n        <h4 className={`text-[#1B2636] font-inter text-[18px] font-semibold leading-[24px] ${titleClassName}`}>\n          {title}\n        </h4>\n      </div>\n      <div\n        className={`\n        overflow-${overflow || 'hidden'}\n        transition-all\n        duration-300\n        ml-1\n        mt-[1vw]\n        ${isOpen ? 'max-h-[1000vh] opacity-100 visible h-auto' : 'max-h-0 opacity-0 invisible h-0'}`}\n      >\n        {content}\n      </div>\n      {showSeparator && <div className={`h-[1px] bg-[#E5E7EB] ${!isOpen ? 'block' : 'hidden'}`}></div>}\n    </div>\n  );\n};\n"],"names":["Accordion","title","content","defaultOpen","overflow","titleClassName","showSeparator","automationId","isOpen","setIsOpen","useState","useEffect","createElement","React","className","onClick","Icon","name"],"mappings":";;AAaO,MAAMA,IAAgCA,CAAC;AAAA,EAC5CC,OAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,gBAAAA,IAAiB;AAAA,EACjBC,eAAAA,IAAgB;AAAA,EAChBC,cAAAA,IAAe;AACjB,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAC1CC,SAAAA,EAAU,MAAM;AACdF,IAAAA,EAAUN,KAAe,EAAK;AAAA,EAAA,GAC7B,CAACA,CAAW,CAAC,qBAEdS,cACEC,OAAAA,MAAAA,gBAAAA,EAAAD,cAAA,OAAA;AAAA,IAAKE,WAAU;AAAA,IAAgDC,SAASA,MAAMN,EAAU,CAACD,CAAM;AAAA,IAAG,sBAAoBD;AAAAA,EAAAA,GACpHK,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKE,WAAW,+CAA+CN,IAAS,cAAc,EAAE;AAAA,EAAA,GACtFI,gBAAAA,EAAAA,cAACI,GAAI;AAAA,IAACC,MAAK;AAAA,EAAa,CAAA,CACrB,GACLJ,gBAAAA,EAAAD,cAAA,MAAA;AAAA,IAAIE,WAAW,sEAAsET,CAAc;AAAA,KAChGJ,CACC,CACD,GACLY,gBAAAA,EAAAD,cAAA,OAAA;AAAA,IACEE,WAAW;AAAA,mBACAV,KAAY,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,UAK7BI,IAAS,8CAA8C,iCAAiC;AAAA,KAEzFN,CACE,GACJI,KAAiBO,gBAAAA,EAAAD,cAAA,OAAA;AAAA,IAAKE,WAAW,wBAAyBN,IAAmB,WAAV,OAAkB;AAAA,EAAS,CAAA,CAC5F;AAET;"}
+{"version":3,"file":"index33.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   * ID of the element controlled by this radio (e.g. an expandable content region).\n   */\n  ariaControls?: string;\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    ariaControls\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          aria-controls={ariaControls}\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","ariaControls","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/index34.js

@@ -1,49 +1,45 @@
-import e, { useState as u, useEffect as v } from "react";
-import { Icon as s } from "./index5.js";
-const p = ({
-  renderAccordionContents: i,
-  renderAccordionSrcElement: m,
-  defaultOpen: a,
-  className: l = "",
-  arrowPosition: r = "left",
-  contentClassName: d = "",
-  disabled: n = !1,
-  automationId: f = ""
-}) => {
-  const [t, c] = u(!1);
-  v(() => {
-    c(a || !1);
-  }, [a]);
-  const o = () => n ? "" : r === "left" ? t ? "rotate-90" : "" : t ? "rotate-180" : "";
-  return /* @__PURE__ */ e.createElement("div", {
-    className: `se-design-accordion ${l}`,
-    "data-automation-id": f
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: "flex flex-col"
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: "se-design-accordion-src flex items-center cursor-pointer",
-    onClick: () => !n && c(!t)
-  }, r === "left" && /* @__PURE__ */ e.createElement("div", {
-    className: `se-design-accordion-icon transform transition-transform duration-300 ${o()} ${n ? "opacity-30 pointer-events-none" : ""}`
-  }, /* @__PURE__ */ e.createElement(s, {
-    name: "rightSide"
-  })), /* @__PURE__ */ e.createElement("div", {
-    className: "se-design-accordion-elements flex-1"
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: "se-design-accordion-src-element title"
-  }, m({
-    isOpen: t
-  }))), r === "right" && /* @__PURE__ */ e.createElement("div", {
-    className: `se-design-accordion-icon transform transition-transform duration-300 ${o()} ${n ? "opacity-30 pointer-events-none" : ""}`
-  }, /* @__PURE__ */ e.createElement(s, {
-    name: "chevron"
-  }))), t && /* @__PURE__ */ e.createElement("div", {
-    className: `se-design-accordion-content transition-all duration-300 mt-1 ${d}`
-  }, i({
-    isOpen: t
-  }))));
-};
+import o from "react";
+import { Radio as m } from "./index33.js";
+function l() {
+  return l = Object.assign ? Object.assign.bind() : function(e) {
+    for (var t = 1; t < arguments.length; t++) {
+      var n = arguments[t];
+      for (var a in n) ({}).hasOwnProperty.call(n, a) && (e[a] = n[a]);
+    }
+    return e;
+  }, l.apply(null, arguments);
+}
+function g(e) {
+  const {
+    automationId: t = "",
+    withBorder: n = !0,
+    ariaLabel: a,
+    ariaLabelledBy: i,
+    name: c
+  } = e, u = (r) => {
+    e.onRadioGroupChange({
+      ...r,
+      checked: !0
+    });
+  }, d = i ? {
+    "aria-labelledby": i
+  } : a ? {
+    "aria-label": a
+  } : {};
+  return /* @__PURE__ */ o.createElement("div", {
+    "data-automation-id": t
+  }, /* @__PURE__ */ o.createElement("fieldset", l({
+    className: `flex flex-wrap gap-2 ${e.direction === "column" ? "flex-col" : "flex-row"}`
+  }, d), e.options.map((r) => /* @__PURE__ */ o.createElement(m, l({
+    key: r.value
+  }, r, {
+    name: c,
+    onChange: u,
+    checked: r.value === e.value,
+    withBorder: n
+  })))));
+}
 export {
-  p as CustomAccordion
+  g as RadioGroup
 };
 //# sourceMappingURL=index34.js.map