se-design 1.0.75 → 1.0.76-dev1

package/dist/index32.js

@@ -1,77 +1,102 @@
-import e, { useRef as $ } from "react";
-import { useStableId as y } from "./index192.js";
-function L(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
-  } = a, o = $(null), d = y(void 0, `${i}-${n}`);
-  e.useLayoutEffect(() => {
-    o.current && (o.current.checked = l);
-  }, [l]);
-  const C = () => {
-    t || (o.current?.focus(), o.current?.click());
-  }, g = (r) => {
-    r.stopPropagation();
-  }, k = (r) => {
-    r.stopPropagation();
-  }, w = () => {
-    u?.({
-      ...a,
-      checked: !0
-    });
-  }, v = l ? "border-[var(--color-blue-500)]" : "border-[var(--color-gray-400)]";
+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: `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": h
+    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: "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]",
-    onClick: k,
-    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
+    className: t.requestFeatureImageCtn
+  }), /* @__PURE__ */ e.createElement("div", {
+    className: t.requestFeatureDescriptionCtn
   }, /* @__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));
-}
+    className: `${t.widgetTitle} widget-title`
+  }, r), /* @__PURE__ */ e.createElement("span", {
+    className: `${t.widgetDescription} widget-description`
+  }, l), m)) : m));
+};
 export {
-  L as Radio
+  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/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":";;AAqBO,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,SAAAA,IAAU;AAAA,IACVC,YAAAA,IAAa;AAAA,IACbC,SAAAA;AAAAA,EACEb,IAAAA,GACEc,IAAWC,EAAyB,IAAI,GACxCC,IAAUC,EAAYC,QAAW,GAAGb,CAAI,IAAIH,CAAK,EAAE;AAIzDiB,EAAAA,EAAMC,gBAAgB,MAAM;AAC1B,IAAIN,EAASO,YACXP,EAASO,QAAQlB,UAAUA;AAAAA,EAC7B,GACC,CAACA,CAAO,CAAC;AAEZ,QAAMmB,IAAuBA,MAAM;AACjC,IAAKlB,MACHU,EAASO,SAASE,SAClBT,EAASO,SAASG;EACpB,GAGIC,IAAmBA,CAACC,MAA0C;AAIlEA,IAAAA,EAAEC,gBAAgB;AAAA,EAAA,GAGdC,IAAmBA,CAACF,MAA0C;AAClEA,IAAAA,EAAEC,gBAAgB;AAAA,EAAA,GAGdE,IAAoBA,MAAM;AACnB,IAAAvB,IAAA;AAAA,MAAE,GAAGN;AAAAA,MAAOG,SAAS;AAAA,IAAA,CAAM;AAAA,EAAA,GAGlC2B,IAAc3B,IAAU,mCAAmC;AAG/DgB,SAAAA,gBAAAA,EAAAY,cAAA,OAAA;AAAA,IACEC,WAAW,4EACT5B,IAAW,uBAAuB,gBAAgB,IAElDQ,IAAa,UAAUkB,CAAW,SAAS,EAAE,iDACE1B,IAAW,eAAe,EAAE,IAAIK,CAAuB;AAAA,IACxGwB,SAASX;AAAAA,IACTY,OAAO;AAAA,MAAE3B,OAAOA,KAAS;AAAA,MAAQ4B,iBAAiBxB;AAAAA,IAAQ;AAAA,IAC1D,sBAAoBD;AAAAA,EAAAA,GAEpBqB,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAAmC,sBAAmB;AAAA,EAAA,GACnED,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACEK,KAAKtB;AAAAA,IACLuB,MAAK;AAAA,IACLC,IAAItB;AAAAA,IACJX,MAAAA;AAAAA,IACAH,OAAAA;AAAAA,IACAE,UAAAA;AAAAA,IACA4B,WAAU;AAAA,IACVC,SAASL;AAAAA,IACTtB,UAAUuB;AAAAA,EAAAA,CACX,GACDE,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACEQ,SAASvB;AAAAA,IACTgB,WAAW,GAAGhC,EAAMwC,cAAc,6BAA6B,EAAE,GAC/DpC,IAAW,uBAAuB,gBAAgB;AAAA,IAEpD,sBAAmB;AAAA,IACnB6B,SAASR;AAAAA,EAAAA,GAETM,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IACEC,WAAW,wCAAwCxB,CAAmB;AAAA,IACtE0B,OAAO;AAAA,MAAEO,UAAU;AAAA,MAAQC,YAAY;AAAA,IAAM;AAAA,EAAA,GAE5CzC,CACG,CACD,CACJ,GACJE,KAAWU,KACVkB,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAAyCC,SAAUP,CAAMA,MAAAA,EAAEC,gBAAgB;AAAA,EAAA,GACvFd,EACE,CAAA,GAENb,EAAMwC,eACLrB,gBAAAA,EAAAY,cAAA,QAAA;AAAA,IACEC,WAAW,oDACThC,EAAM2C,WAAW,UAAU3C,EAAM2C,QAAQ,MAAM,YAAY;AAAA,IAE7D,sBAAmB;AAAA,EAAA,GAElB3C,EAAMwC,WACH,CAEL;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,45 +1,77 @@
-import o from "react";
-import { Radio as m } from "./index32.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) {
+import e, { useRef as $ } from "react";
+import { useStableId as y } from "./index199.js";
+function L(a) {
   const {
-    automationId: t = "",
-    withBorder: n = !0,
-    ariaLabel: a,
-    ariaLabelledBy: i,
-    name: c
-  } = e, u = (r) => {
-    e.onRadioGroupChange({
-      ...r,
+    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
+  } = a, o = $(null), d = y(void 0, `${i}-${n}`);
+  e.useLayoutEffect(() => {
+    o.current && (o.current.checked = l);
+  }, [l]);
+  const C = () => {
+    t || (o.current?.focus(), o.current?.click());
+  }, g = (r) => {
+    r.stopPropagation();
+  }, k = (r) => {
+    r.stopPropagation();
+  }, w = () => {
+    u?.({
+      ...a,
       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
-  })))));
+  }, 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": h
+  }, /* @__PURE__ */ e.createElement("div", {
+    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]",
+    onClick: k,
+    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__ */ 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 {
-  g as RadioGroup
+  L as Radio
 };
 //# sourceMappingURL=index33.js.map

package/dist/index33.js.map

@@ -1 +1 @@
-{"version":3,"file":"index33.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  withBorder?: boolean;\n  /**\n   * Accessible name for the radio group.\n   * Applied to the fieldset element.\n   * Prefer ariaLabelledBy when a visible label exists.\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of element(s) that label this radio group.\n   * Preferred over ariaLabel when a visible label exists (keeps SR and visual text in sync).\n   */\n  ariaLabelledBy?: string;\n  /**\n   * Shared name attribute for all radio inputs in the group.\n   * Enables arrow-key navigation between options.\n   * Must be unique per RadioGroup instance on the page.\n   */\n  name: string;\n}\n\nexport function RadioGroup(props: RadioGroupProps) {\n  const { automationId = '', withBorder = true, ariaLabel, ariaLabelledBy, name } = props;\n  const handleRadioChange = (obj: RadioProps) => {\n    props.onRadioGroupChange({ ...obj, checked: true });\n  };\n  \n  // Prefer aria-labelledby when provided, fallback to aria-label\n  const fieldsetProps = ariaLabelledBy\n    ? { 'aria-labelledby': ariaLabelledBy }\n    : ariaLabel\n    ? { 'aria-label': ariaLabel }\n    : {};\n  \n  return (\n    <div data-automation-id={automationId}>\n      <fieldset className={`flex flex-wrap gap-2 ${props.direction === 'column' ? 'flex-col' : 'flex-row'}`} {...fieldsetProps}>\n        {props.options.map((option) => (\n          <Radio key={option.value} {...option} name={name} onChange={handleRadioChange} checked={option.value === props.value} withBorder={withBorder} />\n        ))}\n      </fieldset>\n    </div>\n  );\n}\n"],"names":["RadioGroup","props","automationId","withBorder","ariaLabel","ariaLabelledBy","name","handleRadioChange","obj","onRadioGroupChange","checked","fieldsetProps","React","createElement","_extends","className","direction","options","map","option","Radio","key","value","onChange"],"mappings":";;;;;;;;;;;AA6BO,SAASA,EAAWC,GAAwB;AAC3C,QAAA;AAAA,IAAEC,cAAAA,IAAe;AAAA,IAAIC,YAAAA,IAAa;AAAA,IAAMC,WAAAA;AAAAA,IAAWC,gBAAAA;AAAAA,IAAgBC,MAAAA;AAAAA,EAASL,IAAAA,GAC5EM,IAAoBA,CAACC,MAAoB;AAC7CP,IAAAA,EAAMQ,mBAAmB;AAAA,MAAE,GAAGD;AAAAA,MAAKE,SAAS;AAAA,IAAA,CAAM;AAAA,EAAA,GAI9CC,IAAgBN,IAClB;AAAA,IAAE,mBAAmBA;AAAAA,MACrBD,IACA;AAAA,IAAE,cAAcA;AAAAA,MAChB;AAGFQ,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAK,sBAAoBX;AAAAA,EACvBU,GAAAA,gBAAAA,EAAAC,cAAA,YAAAC,EAAA;AAAA,IAAUC,WAAW,wBAAwBd,EAAMe,cAAc,WAAW,aAAa,UAAU;AAAA,EAAG,GAAKL,CAAa,GACrHV,EAAMgB,QAAQC,IAAKC,CAClBP,MAAAA,gBAAAA,EAAAC,cAACO,GAAKN,EAAA;AAAA,IAACO,KAAKF,EAAOG;AAAAA,KAAWH,GAAM;AAAA,IAAEb,MAAAA;AAAAA,IAAYiB,UAAUhB;AAAAA,IAAmBG,SAASS,EAAOG,UAAUrB,EAAMqB;AAAAA,IAAOnB,YAAAA;AAAAA,EAAAA,CAAyB,CAAA,CAChJ,CACO,CACP;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\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/index34.js

@@ -1,76 +1,45 @@
-import e, { useState as h, useEffect as E } from "react";
-import { Icon as N } from "./index5.js";
-import { useStableId as $ } from "./index192.js";
-import { getRegionAttributes as I } from "./index65.js";
-import { useAccessiblePress as _ } from "./index66.js";
-function r() {
-  return r = Object.assign ? Object.assign.bind() : function(n) {
-    for (var s = 1; s < arguments.length; s++) {
-      var o = arguments[s];
-      for (var t in o) ({}).hasOwnProperty.call(o, t) && (n[t] = o[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 n;
-  }, r.apply(null, arguments);
+    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
+  })))));
 }
-const S = ({
-  title: n,
-  titleTag: s = "h4",
-  content: o,
-  defaultOpen: t,
-  overflow: d,
-  titleClassName: u = "",
-  showSeparator: m = !0,
-  automationId: f = "",
-  id: p
-}) => {
-  const [i, c] = h(!1);
-  E(() => {
-    c(t || !1);
-  }, [t]);
-  const a = $(p, "accordion"), l = `${a}-content`, {
-    pressProps: g,
-    role: v,
-    tabIndex: b
-  } = _({
-    onClick: () => c(!i),
-    isNative: !1
-    // Not a native button, so hook adds Enter/Space handling
-  }), x = I({
-    titleId: a,
-    isFocusable: !1
-  });
-  return /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement("div", r({}, g, {
-    role: v,
-    tabIndex: b,
-    "aria-expanded": i,
-    "aria-controls": l,
-    className: "se-design-accordion-header flex items-center cursor-pointer group focus-visible:outline-none",
-    "data-automation-id": f
-  }), /* @__PURE__ */ e.createElement("div", {
-    className: "flex items-center gap-2 rounded group-focus-visible:[outline:var(--focus-width)_solid_var(--focus-color)] group-focus-visible:[outline-offset:var(--focus-offset)] group-focus-visible:p-[2px]"
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: `transform transition-transform duration-300 ${i ? "rotate-90" : ""}`
-  }, /* @__PURE__ */ e.createElement(N, {
-    name: "rightSide"
-  })), /* @__PURE__ */ e.createElement(s, {
-    id: a,
-    className: `se-design-accordion-title text-[var(--color-gray-900)]] font-inter text-[18px] font-semibold leading-[24px] ${u}`
-  }, n))), /* @__PURE__ */ e.createElement("div", r({
-    id: l
-  }, x, {
-    className: `
-        se-design-accordion-content
-        overflow-${d || "hidden"}
-        transition-all
-        duration-300
-        ml-1
-        mt-[1vw]
-        ${i ? "max-h-[1000vh] opacity-100 visible h-auto" : "hidden"}`
-  }), o), m && /* @__PURE__ */ e.createElement("div", {
-    className: `h-[1px] bg-[#E5E7EB] mt-[12px] ${i ? "hidden" : "block"}`
-  }));
-};
 export {
-  S as Accordion
+  g as RadioGroup
 };
 //# sourceMappingURL=index34.js.map

package/dist/index34.js.map

@@ -1 +1 @@
-{"version":3,"file":"index34.js","sources":["../src/components/Accordion/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from 'react';\nimport { Icon } from '../Icon';\nimport { useStableId } from '../../utils/useStableId';\nimport { useAccessiblePress } from '../../utils/a11y';\nimport { getRegionAttributes } from '../../utils/a11y/regionAttributes';\n\nexport interface AccordionProps {\n  title: string;\n  titleTag?: 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\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  id?: string;\n}\n\nexport const Accordion: FC<AccordionProps> = ({\n  title,\n  titleTag: TitleTag = 'h4',\n  content,\n  defaultOpen,\n  overflow,\n  titleClassName = '',\n  showSeparator = true,\n  automationId = '',\n  id\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  \n  useEffect(() => {\n    setIsOpen(defaultOpen || false);\n  }, [defaultOpen]);\n\n  // Generate stable IDs for ARIA relationships\n  const titleId = useStableId(id, 'accordion');\n  const contentId = `${titleId}-content`; \n\n  // Use accessible press hook for keyboard + mouse handling\n  const { pressProps, role, tabIndex } = useAccessiblePress({\n    onClick: () => setIsOpen(!isOpen),\n    isNative: false // Not a native button, so hook adds Enter/Space handling\n  });\n\n  // Get region attributes for content panel\n  const regionAttributes = getRegionAttributes({\n    titleId,\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  return (\n    <div>\n      <div\n        {...pressProps}\n        role={role}\n        tabIndex={tabIndex}\n        aria-expanded={isOpen}\n        aria-controls={contentId}\n        className=\"se-design-accordion-header flex items-center cursor-pointer group focus-visible:outline-none\"\n        data-automation-id={automationId}\n      >\n        <div className={`flex items-center gap-2 rounded ${focusVisibleClasses}`}>\n          <div \n            className={`transform transition-transform duration-300 ${isOpen ? 'rotate-90' : ''}`}\n          >\n            <Icon name=\"rightSide\" />\n          </div>\n          <TitleTag\n            id={titleId}\n            className={`se-design-accordion-title text-[var(--color-gray-900)]] font-inter text-[18px] font-semibold leading-[24px] ${titleClassName}`}\n          >\n            {title}\n          </TitleTag>\n        </div>\n      </div>\n      <div\n        id={contentId}\n        {...regionAttributes}\n        className={`\n        se-design-accordion-content\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' : 'hidden'}`}\n      >\n        {content}\n      </div>\n      {showSeparator && <div className={`h-[1px] bg-[#E5E7EB] mt-[12px] ${!isOpen ? 'block' : 'hidden'}`}></div>}\n    </div>\n  );\n};\n"],"names":["Accordion","title","titleTag","TitleTag","content","defaultOpen","overflow","titleClassName","showSeparator","automationId","id","isOpen","setIsOpen","useState","useEffect","titleId","useStableId","contentId","pressProps","role","tabIndex","useAccessiblePress","onClick","isNative","regionAttributes","getRegionAttributes","isFocusable","React","createElement","_extends","className","Icon","name"],"mappings":";;;;;;;;;;;;;;AAkBO,MAAMA,IAAgCA,CAAC;AAAA,EAC5CC,OAAAA;AAAAA,EACAC,UAAUC,IAAW;AAAA,EACrBC,SAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,gBAAAA,IAAiB;AAAA,EACjBC,eAAAA,IAAgB;AAAA,EAChBC,cAAAA,IAAe;AAAA,EACfC,IAAAA;AACF,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAE1CC,EAAAA,EAAU,MAAM;AACdF,IAAAA,EAAUP,KAAe,EAAK;AAAA,EAAA,GAC7B,CAACA,CAAW,CAAC;AAGVU,QAAAA,IAAUC,EAAYN,GAAI,WAAW,GACrCO,IAAY,GAAGF,CAAO,YAGtB;AAAA,IAAEG,YAAAA;AAAAA,IAAYC,MAAAA;AAAAA,IAAMC,UAAAA;AAAAA,MAAaC,EAAmB;AAAA,IACxDC,SAASA,MAAMV,EAAU,CAACD,CAAM;AAAA,IAChCY,UAAU;AAAA;AAAA,EAAA,CACX,GAGKC,IAAmBC,EAAoB;AAAA,IAC3CV,SAAAA;AAAAA,IACAW,aAAa;AAAA,EAAA,CACd;AAKCC,SAAAA,gBAAAA,EAAAC,cACED,OAAAA,MAAAA,gBAAAA,EAAAC,cAAA,OAAAC,EAAA,CAAA,GACMX,GAAU;AAAA,IACdC,MAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACA,iBAAeT;AAAAA,IACf,iBAAeM;AAAAA,IACfa,WAAU;AAAA,IACV,sBAAoBrB;AAAAA,EAAAA,CAEpBkB,GAAAC,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKE,WAAW;AAAA,EAAsD,GACpEF,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IACEE,WAAW,+CAA+CnB,IAAS,cAAc,EAAE;AAAA,EAAA,GAEnFiB,gBAAAA,EAAAA,cAACG,GAAI;AAAA,IAACC,MAAK;AAAA,EAAa,CAAA,CACrB,GACLL,gBAAAA,EAAAC,cAACzB,GAAQ;AAAA,IACPO,IAAIK;AAAAA,IACJe,WAAW,+GAA+GvB,CAAc;AAAA,EAAA,GAEvIN,CACO,CACP,CACF,GACL2B,gBAAAA,EAAAA,cAAA,OAAAC,EAAA;AAAA,IACEnB,IAAIO;AAAAA,KACAO,GAAgB;AAAA,IACpBM,WAAW;AAAA;AAAA,mBAEAxB,KAAY,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,UAK7BK,IAAS,8CAA8C,QAAQ;AAAA,EAAA,CAAG,GAEnEP,CACE,GACJI,KAAiBmB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKE,WAAW,kCAAmCnB,IAAmB,WAAV,OAAkB;AAAA,EAAS,CAAA,CACtG;AAET;"}
+{"version":3,"file":"index34.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  withBorder?: boolean;\n  /**\n   * Accessible name for the radio group.\n   * Applied to the fieldset element.\n   * Prefer ariaLabelledBy when a visible label exists.\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of element(s) that label this radio group.\n   * Preferred over ariaLabel when a visible label exists (keeps SR and visual text in sync).\n   */\n  ariaLabelledBy?: string;\n  /**\n   * Shared name attribute for all radio inputs in the group.\n   * Enables arrow-key navigation between options.\n   * Must be unique per RadioGroup instance on the page.\n   */\n  name: string;\n}\n\nexport function RadioGroup(props: RadioGroupProps) {\n  const { automationId = '', withBorder = true, ariaLabel, ariaLabelledBy, name } = props;\n  const handleRadioChange = (obj: RadioProps) => {\n    props.onRadioGroupChange({ ...obj, checked: true });\n  };\n  \n  // Prefer aria-labelledby when provided, fallback to aria-label\n  const fieldsetProps = ariaLabelledBy\n    ? { 'aria-labelledby': ariaLabelledBy }\n    : ariaLabel\n    ? { 'aria-label': ariaLabel }\n    : {};\n  \n  return (\n    <div data-automation-id={automationId}>\n      <fieldset className={`flex flex-wrap gap-2 ${props.direction === 'column' ? 'flex-col' : 'flex-row'}`} {...fieldsetProps}>\n        {props.options.map((option) => (\n          <Radio key={option.value} {...option} name={name} onChange={handleRadioChange} checked={option.value === props.value} withBorder={withBorder} />\n        ))}\n      </fieldset>\n    </div>\n  );\n}\n"],"names":["RadioGroup","props","automationId","withBorder","ariaLabel","ariaLabelledBy","name","handleRadioChange","obj","onRadioGroupChange","checked","fieldsetProps","React","createElement","_extends","className","direction","options","map","option","Radio","key","value","onChange"],"mappings":";;;;;;;;;;;AA6BO,SAASA,EAAWC,GAAwB;AACjD,QAAM;AAAA,IAAEC,cAAAA,IAAe;AAAA,IAAIC,YAAAA,IAAa;AAAA,IAAMC,WAAAA;AAAAA,IAAWC,gBAAAA;AAAAA,IAAgBC,MAAAA;AAAAA,EAAAA,IAASL,GAC5EM,IAAoBA,CAACC,MAAoB;AAC7CP,IAAAA,EAAMQ,mBAAmB;AAAA,MAAE,GAAGD;AAAAA,MAAKE,SAAS;AAAA,IAAA,CAAM;AAAA,EACpD,GAGMC,IAAgBN,IAClB;AAAA,IAAE,mBAAmBA;AAAAA,EAAAA,IACrBD,IACA;AAAA,IAAE,cAAcA;AAAAA,EAAAA,IAChB,CAAA;AAEJ,SACEQ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAK,sBAAoBX;AAAAA,EAAAA,GACvBU,gBAAAA,EAAAC,cAAA,YAAAC,EAAA;AAAA,IAAUC,WAAW,wBAAwBd,EAAMe,cAAc,WAAW,aAAa,UAAU;AAAA,EAAA,GAAQL,CAAa,GACrHV,EAAMgB,QAAQC,IAAKC,CAAAA,MAClBP,gBAAAA,EAAAC,cAACO,GAAKN,EAAA;AAAA,IAACO,KAAKF,EAAOG;AAAAA,EAAAA,GAAWH,GAAM;AAAA,IAAEb,MAAAA;AAAAA,IAAYiB,UAAUhB;AAAAA,IAAmBG,SAASS,EAAOG,UAAUrB,EAAMqB;AAAAA,IAAOnB,YAAAA;AAAAA,EAAAA,CAAuB,CAAE,CAChJ,CACO,CACP;AAET;"}