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

package/dist/index52.js

@@ -1,41 +1,101 @@
-import a from "react";
-const u = ({
-  checkedRadioOption: t,
-  optionList: r,
-  onChange: l,
-  switchWidth: c,
-  automationId: i = ""
-}) => {
-  const s = (e) => {
-    l && l(e);
-  };
-  return /* @__PURE__ */ a.createElement("div", {
-    className: "flex rounded-full border border-gray-300 bg-white min-w-[110px] h-[34px]",
-    role: "radiogroup",
-    "aria-label": "Switch options",
-    "data-automation-id": i,
-    style: {
-      width: c
-      // Moved min-w-[100px] and h-[34px] to Tailwind classes below, so these inline styles are no longer needed.
-    }
-  }, r.map((e) => /* @__PURE__ */ a.createElement("div", {
-    key: e.value,
-    className: `relative flex-1 flex items-center block py-2 px-4 rounded-[24px] w-full text-center cursor-pointer transition-all duration-200 ${e.value === t ? "bg-[var(--color-blue-100)] text-[var(--color-blue-500)] shadow-sm" : "text-gray-700 hover:text-gray-900"}`,
-    onClick: () => s(e.value),
-    "data-automation-id": `radio-switch-option-${e.value}`
-  }, /* @__PURE__ */ a.createElement("input", {
-    type: "radio",
-    name: "switch",
-    id: `switch-${e.value}`,
-    checked: e.value === t,
-    className: "sr-only"
-    // Hide the input but keep it accessible
-  }), /* @__PURE__ */ a.createElement("label", {
-    htmlFor: `switch-${e.value}`,
-    className: " cursor-pointer "
-  }, e.label))));
-};
+import t from "react";
+import { Icon as W } from "./index6.js";
+import { useStableId as j } from "./index205.js";
+import { getA11yNameAttributes as q } from "./index81.js";
+import "./index72.js";
+/* empty css         */
+function U({
+  disabled: c,
+  error: a,
+  errorMessage: E,
+  id: N,
+  inputStyle: r,
+  label: s,
+  leftIcon: l,
+  maxLength: n,
+  onChange: m,
+  onClick: o,
+  onKeyDown: $,
+  placeholder: b,
+  readOnly: d,
+  rightIcon: u,
+  style: y,
+  tag: I,
+  type: k = "text",
+  value: p,
+  className: D = "",
+  automationId: g = "",
+  ariaLabel: A,
+  ariaLabelledBy: C,
+  ariaDescribedBy: K,
+  ariaHasPopup: R,
+  inputProps: _,
+  inputRef: x
+}) {
+  const v = j(N, "se-input-icon"), F = I || "input", H = q({
+    ariaLabel: A,
+    ariaLabelledBy: C,
+    ariaDescribedBy: K
+  }), i = !!d && !!o, h = (e) => {
+    if (!e) return null;
+    const w = c || e.disabled, f = i || w ? void 0 : e.onClick;
+    return /* @__PURE__ */ t.createElement("div", {
+      className: `input-with-icon-icon input-with-icon-icon-${e.position} ${e.className || ""} ${w ? "disabled" : ""} ${e.disableHover ? "no-hover" : ""}`,
+      style: e.style
+    }, /* @__PURE__ */ t.createElement(W, {
+      name: e.name,
+      onClick: f,
+      ariaLabel: f ? e.ariaLabel : void 0
+    }));
+  }, M = (e) => {
+    i && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), o(e)), $?.(e);
+  }, S = !!l, T = !!u;
+  return /* @__PURE__ */ t.createElement("div", {
+    className: `input-with-icon-main-container ${D}`,
+    style: y,
+    "data-automation-id": g
+  }, s && /* @__PURE__ */ t.createElement("label", {
+    className: "label-container",
+    htmlFor: v
+  }, s), /* @__PURE__ */ t.createElement("div", {
+    className: `input-with-icon-wrapper ${S ? "has-left-icon" : ""} ${T ? "has-right-icon" : ""}`,
+    onClick: i ? (e) => o(e) : void 0,
+    style: i ? {
+      cursor: "pointer"
+    } : void 0
+  }, h(l), /* @__PURE__ */ t.createElement(F, {
+    ref: x,
+    id: v,
+    value: p,
+    onChange: m ? (e) => m(e.target.value) : void 0,
+    // In trigger mode don't attach onClick to the input — the wrapper handles it.
+    onClick: i ? void 0 : o,
+    onKeyDown: M,
+    disabled: c,
+    readOnly: d,
+    type: k,
+    className: `input-with-icon-element ${a ? "input-with-icon-container-error" : "input-with-icon-container-default"} ${c ? "input-with-icon-container-disabled" : ""}`,
+    maxLength: n || void 0,
+    placeholder: b,
+    // In trigger mode: pointer cursor so it matches the wrapper, and no text selection
+    // since the value is display-only — selecting "90 days" with a caret is misleading.
+    style: i ? {
+      cursor: "pointer",
+      userSelect: "none",
+      ...r
+    } : r,
+    "aria-haspopup": R,
+    ...H,
+    ..._
+  }), h(u)), (a || n) && /* @__PURE__ */ t.createElement("div", {
+    className: `${a ? "error-and-max-word" : "max-word-container"}`
+  }, a && /* @__PURE__ */ t.createElement("div", {
+    className: "error-message"
+  }, E), n && /* @__PURE__ */ t.createElement("div", {
+    className: "max-word"
+  }, n && p?.length + "/" + n)));
+}
 export {
-  u as RadioSwitch
+  U as InputWithIcon
 };
 //# sourceMappingURL=index52.js.map

package/dist/index52.js.map

@@ -1 +1 @@
-{"version":3,"file":"index52.js","sources":["../src/components/RadioSwitch/index.tsx"],"sourcesContent":["import React from 'react';\n\n/**\n * This is Radio Switch, Only one option can be selected at a time.\n * There can be multiple options, but only one can be selected at a time.\n */\nexport interface RadioSwitchOption {\n  label: string;\n  value: string;\n}\n\nexport interface RadioSwitchProps {\n  checkedRadioOption?: string;\n  optionList: RadioSwitchOption[];\n  onChange?: (value: string) => void;\n  switchWidth?: string;\n  automationId?: string;\n}\n\nexport const RadioSwitch: React.FC<RadioSwitchProps> = ({ checkedRadioOption, optionList, onChange, switchWidth, automationId = '' }) => {\n  const handleChange = (value: string) => {\n    if (onChange) {\n      onChange(value);\n    }\n  };\n\n  return (\n    <div\n      className=\"flex rounded-full border border-gray-300 bg-white min-w-[110px] h-[34px]\"\n      role=\"radiogroup\"\n      aria-label=\"Switch options\"\n      data-automation-id={automationId}\n      style={{\n        width: switchWidth\n        // Moved min-w-[100px] and h-[34px] to Tailwind classes below, so these inline styles are no longer needed.\n      }}\n    >\n      {optionList.map((option) => (\n        <div\n          key={option.value}\n          className={`relative flex-1 flex items-center block py-2 px-4 rounded-[24px] w-full text-center cursor-pointer transition-all duration-200 ${\n            option.value === checkedRadioOption\n              ? 'bg-[var(--color-blue-100)] text-[var(--color-blue-500)] shadow-sm'\n              : 'text-gray-700 hover:text-gray-900'\n          }`}\n          onClick={() => handleChange(option.value)}\n          data-automation-id={`radio-switch-option-${option.value}`}\n        >\n          <input\n            type=\"radio\"\n            name=\"switch\"\n            id={`switch-${option.value}`}\n            checked={option.value === checkedRadioOption}\n            className=\"sr-only\" // Hide the input but keep it accessible\n          />\n          <label htmlFor={`switch-${option.value}`} className={' cursor-pointer '}>\n            {option.label}\n          </label>\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":["RadioSwitch","checkedRadioOption","optionList","onChange","switchWidth","automationId","handleChange","value","React","createElement","className","role","style","width","map","option","key","onClick","type","name","id","checked","htmlFor","label"],"mappings":";AAmBO,MAAMA,IAA0CA,CAAC;AAAA,EAAEC,oBAAAA;AAAAA,EAAoBC,YAAAA;AAAAA,EAAYC,UAAAA;AAAAA,EAAUC,aAAAA;AAAAA,EAAaC,cAAAA,IAAe;AAAG,MAAM;AACjIC,QAAAA,IAAeA,CAACC,MAAkB;AACtC,IAAIJ,KACFA,EAASI,CAAK;AAAA,EAChB;AAIAC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAU;AAAA,IACVC,MAAK;AAAA,IACL,cAAW;AAAA,IACX,sBAAoBN;AAAAA,IACpBO,OAAO;AAAA,MACLC,OAAOT;AAAAA;AAAAA,IAET;AAAA,EAAA,GAECF,EAAWY,IAAKC,CACfP,MAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEO,KAAKD,EAAOR;AAAAA,IACZG,WAAW,kIACTK,EAAOR,UAAUN,IACb,sEACA,mCAAmC;AAAA,IAEzCgB,SAASA,MAAMX,EAAaS,EAAOR,KAAK;AAAA,IACxC,sBAAoB,uBAAuBQ,EAAOR,KAAK;AAAA,EAAA,GAEvDE,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACES,MAAK;AAAA,IACLC,MAAK;AAAA,IACLC,IAAI,UAAUL,EAAOR,KAAK;AAAA,IAC1Bc,SAASN,EAAOR,UAAUN;AAAAA,IAC1BS,WAAU;AAAA;AAAA,EAAA,CACX,GACDD,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IAAOa,SAAS,UAAUP,EAAOR,KAAK;AAAA,IAAIG,WAAW;AAAA,EAClDK,GAAAA,EAAOQ,KACH,CACJ,CACN,CACE;AAET;"}
+{"version":3,"file":"index52.js","sources":["../src/components/InputWithIcon/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Icon } from '../Icon';\nimport { useStableId } from '../../utils/useStableId';\nimport { getA11yNameAttributes } from '../../utils/a11y';\nimport './styles.scss';\n\nexport interface InputIconProps {\n  className?: string;\n  disabled?: boolean;\n  disableHover?: boolean;\n  name: string;\n  onClick?: () => void;\n  position: 'left' | 'right';\n  style?: React.CSSProperties;\n  /**\n   * Accessible name for the icon when it is interactive (onClick provided).\n   * Required for a11y when the icon has its own onClick.\n   */\n  ariaLabel?: string;\n}\n\nexport interface InputWithIconProps {\n  disabled?: boolean;\n  error?: boolean;\n  errorMessage?: string;\n  id?: string;\n  inputStyle?: React.CSSProperties;\n  label?: string;\n  leftIcon?: InputIconProps;\n  maxLength?: number | undefined;\n  onChange?: (value: string) => void;\n  onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;\n  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n  placeholder?: string;\n  readOnly?: boolean;\n  rightIcon?: InputIconProps;\n  style?: React.CSSProperties;\n  tag?: string;\n  type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search';\n  value: string;\n  className?: string;\n  automationId?: string;\n  /**\n   * Accessible name when no visible label exists.\n   * Prefer a visible label prop instead where possible.\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of external visible element(s) that label this input.\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) that describe this input (hints, notes, constraints).\n   * Announced by screen readers after the label and value, giving extra context.\n   */\n  ariaDescribedBy?: string;\n  /**\n   * Set to \"dialog\" when this input opens a date picker or other dialog.\n   */\n  ariaHasPopup?: 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';\n  /**\n   * Additional props spread directly onto the inner <input> element.\n   */\n  inputProps?: Record<string, any>;\n  /**\n   * Ref forwarded to the inner <input> element.\n   */\n  inputRef?: React.Ref<HTMLInputElement>;\n}\n\nexport function InputWithIcon({\n  disabled,\n  error,\n  errorMessage,\n  id,\n  inputStyle,\n  label,\n  leftIcon,\n  maxLength,\n  onChange,\n  onClick,\n  onKeyDown,\n  placeholder,\n  readOnly,\n  rightIcon,\n  style,\n  tag,\n  type = 'text',\n  value,\n  className = '',\n  automationId = '',\n  ariaLabel,\n  ariaLabelledBy,\n  ariaDescribedBy,\n  ariaHasPopup,\n  inputProps,\n  inputRef\n}: InputWithIconProps) {\n  const inputId = useStableId(id, 'se-input-icon');\n  const Element = tag || 'input';\n\n  const accessibleNameProps = getA11yNameAttributes({ ariaLabel, ariaLabelledBy, ariaDescribedBy });\n\n  // Trigger mode: readOnly + onClick means the whole widget acts as one interactive element\n  // (e.g. a date picker trigger). ONE tab stop — the input — and the icon is always decorative.\n  // The wrapper div becomes the unified mouse click zone so clicking anywhere, including the\n  // icon area, fires the action without a second focusable element.\n  //\n  // Non-trigger mode: normal editable input. If an icon has its own onClick it is an independent\n  // action (e.g. show/hide password) and becomes its own accessible button via Icon's useAccessiblePress.\n  const isTriggerMode = !!readOnly && !!onClick;\n\n  const renderIcon = (iconProps: InputIconProps) => {\n    if (!iconProps) return null;\n\n    const isIconDisabled = disabled || iconProps.disabled;\n    // In trigger mode icon is always decorative — the wrapper is the click zone for the whole widget.\n    // In non-trigger mode pass onClick to Icon so it uses useAccessiblePress:\n    // role=\"button\", tabIndex=0, Enter/Space, focus-outline. Decorative when no onClick.\n    const iconOnClick = isTriggerMode || isIconDisabled ? undefined : iconProps.onClick;\n\n    return (\n      <div\n        className={`input-with-icon-icon input-with-icon-icon-${iconProps.position} ${iconProps.className || ''} ${isIconDisabled ? 'disabled' : ''} ${iconProps.disableHover ? 'no-hover' : ''}`}\n        style={iconProps.style}\n      >\n        <Icon\n          name={iconProps.name}\n          onClick={iconOnClick}\n          ariaLabel={iconOnClick ? iconProps.ariaLabel : undefined}\n        />\n      </div>\n    );\n  };\n\n  // In trigger mode Enter/Space on the focused input fires the action, same as a button would.\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (isTriggerMode && (e.key === 'Enter' || e.key === ' ')) {\n      e.preventDefault();\n      onClick!(e as any);\n    }\n    onKeyDown?.(e);\n  };\n\n  const hasLeftIcon = !!leftIcon;\n  const hasRightIcon = !!rightIcon;\n\n  return (\n    <div className={`input-with-icon-main-container ${className}`} style={style} data-automation-id={automationId}>\n      {label && <label className=\"label-container\" htmlFor={inputId}>{label}</label>}\n      <div\n        className={`input-with-icon-wrapper ${hasLeftIcon ? 'has-left-icon' : ''} ${hasRightIcon ? 'has-right-icon' : ''}`}\n        // In trigger mode the wrapper is the unified mouse click zone — clicking anywhere in the\n        // widget (including the icon area) fires the action. Don't also put onClick on the input\n        // element or it would double-fire when the input itself is clicked.\n        onClick={isTriggerMode ? (e) => onClick!(e as any) : undefined}\n        style={isTriggerMode ? { cursor: 'pointer' } : undefined}\n      >\n        {renderIcon(leftIcon!)}\n        {React.createElement(Element, {\n          ref: inputRef,\n          id: inputId,\n          value,\n          onChange: onChange\n            ? (e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)\n            : undefined,\n          // In trigger mode don't attach onClick to the input — the wrapper handles it.\n          onClick: isTriggerMode ? undefined : onClick,\n          onKeyDown: handleKeyDown,\n          disabled,\n          readOnly,\n          type,\n          className: `input-with-icon-element ${error ? 'input-with-icon-container-error' : 'input-with-icon-container-default'} ${disabled ? 'input-with-icon-container-disabled' : ''}`,\n          maxLength: maxLength ? maxLength : undefined,\n          placeholder: placeholder,\n          // In trigger mode: pointer cursor so it matches the wrapper, and no text selection\n          // since the value is display-only — selecting \"90 days\" with a caret is misleading.\n          style: isTriggerMode\n            ? { cursor: 'pointer', userSelect: 'none', ...inputStyle }\n            : inputStyle,\n          'aria-haspopup': ariaHasPopup,\n          ...accessibleNameProps,\n          ...inputProps\n        })}\n        {renderIcon(rightIcon!)}\n      </div>\n      {(error || maxLength) &&\n        <div className={`${error ? 'error-and-max-word' : 'max-word-container'}`}>\n          {error && <div className=\"error-message\">{errorMessage}</div>}\n          {maxLength && <div className=\"max-word\">{maxLength && value?.length + '/' + maxLength}</div>}\n        </div>\n      }\n    </div>\n  );\n}\n"],"names":["React__default","Icon","useStableId","getA11yNameAttributes","InputWithIcon","disabled","error","errorMessage","id","inputStyle","label","leftIcon","maxLength","onChange","onClick","onKeyDown","placeholder","readOnly","rightIcon","style","tag","type","value","className","automationId","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaHasPopup","inputProps","inputRef","inputId","Element","accessibleNameProps","isTriggerMode","renderIcon","iconProps","isIconDisabled","iconOnClick","undefined","React","createElement","position","disableHover","name","handleKeyDown","e","key","preventDefault","hasLeftIcon","hasRightIcon","htmlFor","cursor","ref","target","userSelect","length"],"mappings":"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"}

package/dist/index53.js

@@ -1,88 +1,46 @@
-import i from "react";
-/* empty css         */
-const n = ({
-  element: e,
-  animationDuration: a,
-  baseColor: r,
-  highlightColor: s
-}) => {
-  const d = {
-    width: typeof e.width == "number" ? `${e.width}px` : e.width,
-    height: typeof e.height == "number" ? `${e.height}px` : e.height,
-    borderRadius: e.borderRadius ? typeof e.borderRadius == "number" ? `${e.borderRadius}px` : e.borderRadius : void 0,
-    margin: e.margin,
-    "--shimmer-duration": `${a}s`,
-    "--shimmer-base-color": r,
-    "--shimmer-highlight-color": s
-  }, m = `se-design-shimmer-element se-design-shimmer-${e.type}`;
-  return /* @__PURE__ */ i.createElement("div", {
-    className: m,
-    style: d
-  }, e.children && e.children.map((t, p) => /* @__PURE__ */ i.createElement(n, {
-    key: p,
-    element: t,
-    animationDuration: a,
-    baseColor: r,
-    highlightColor: s
-  })));
-}, h = ({
-  container: e,
-  animationDuration: a,
-  baseColor: r,
-  highlightColor: s
-}) => {
-  const d = {
-    display: "flex",
-    flexDirection: e.direction || "column",
-    gap: typeof e.gap == "number" ? `${e.gap}px` : e.gap,
-    padding: e.padding,
-    margin: e.margin
-  };
-  return /* @__PURE__ */ i.createElement("div", {
-    className: `se-design-shimmer-container ${e.className || ""}`,
-    style: d
-  }, e.children.map((m, t) => /* @__PURE__ */ i.createElement(n, {
-    key: t,
-    element: m,
-    animationDuration: a,
-    baseColor: r,
-    highlightColor: s
-  })));
-}, f = ({
-  structure: e,
-  className: a = "",
-  animationDuration: r = 1.5,
-  baseColor: s = "#f0f0f0",
-  highlightColor: d = "#e0e0e0",
-  width: m,
-  height: t
-}) => {
-  const p = {
-    width: m ? typeof m == "number" ? `${m}px` : m : "100%",
-    height: t ? typeof t == "number" ? `${t}px` : t : "auto",
-    "--shimmer-duration": `${r}s`,
-    "--shimmer-base-color": s,
-    "--shimmer-highlight-color": d
-  };
-  return /* @__PURE__ */ i.createElement("div", {
-    className: `se-design-shimmer-loader ${a}`,
-    style: p
-  }, e.map((c, o) => c.type === "container" ? /* @__PURE__ */ i.createElement(h, {
-    key: o,
-    container: c,
-    animationDuration: r,
-    baseColor: s,
-    highlightColor: d
-  }) : /* @__PURE__ */ i.createElement(n, {
-    key: o,
-    element: c,
-    animationDuration: r,
-    baseColor: s,
-    highlightColor: d
-  })));
+import e, { useEffect as a } from "react";
+import { delay as m } from "./index245.js";
+import { announce as i } from "./index75.js";
+import { Icon as s } from "./index6.js";
+const u = (l) => {
+  const {
+    title: o = "",
+    itemsList: t = [],
+    handleDownload: n,
+    backgroundColor: c = "var(--color-white)",
+    titleBackgroundColor: d = "var(--color-blue-50)"
+  } = l;
+  return a(() => {
+    t?.length > 0 && t?.forEach((r) => {
+      m(2e3).then(() => {
+        n(r);
+      });
+    });
+  }, [t?.length]), a(() => {
+    o && i(o, {
+      delay: 300
+    });
+  }, []), /* @__PURE__ */ e.createElement("div", {
+    className: "download-widgets-container rounded-t-xl border border-[var(--color-gray-400)] w-[300px] overflow-hidden fixed bottom-0 right-5 z-[1100]",
+    style: {
+      backgroundColor: c
+    }
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: "p-4 text-base font-medium",
+    style: {
+      backgroundColor: d
+    }
+  }, o), t?.map((r) => /* @__PURE__ */ e.createElement("div", {
+    className: " download-item flex items-center gap-2 px-4 pt-4 last:pb-4"
+  }, /* @__PURE__ */ e.createElement("span", {
+    className: "text-base font-normal flex-1"
+  }, r.label), /* @__PURE__ */ e.createElement(s, {
+    name: "checked-circle",
+    stroke: "var(--color-green-500)",
+    size: 16
+  }))));
 };
 export {
-  f as ShimmerLoader,
-  f as default
+  u as DownloadWidget
 };
 //# sourceMappingURL=index53.js.map

package/dist/index53.js.map

@@ -1 +1 @@
-{"version":3,"file":"index53.js","sources":["../src/components/ShimmerLoader/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport './style.scss';\n\nexport interface ShimmerElement {\n  type: 'text' | 'rect' | 'circle' | 'avatar' | 'image' | 'button';\n  width: number | string;\n  height: number | string;\n  borderRadius?: number | string;\n  margin?: string;\n  className?: string;\n  children?: ShimmerElement[];\n}\n\nexport interface ShimmerContainer {\n  type: 'container';\n  direction?: 'row' | 'column';\n  gap?: number | string;\n  padding?: string;\n  margin?: string;\n  className?: string;\n  children: ShimmerElement[];\n}\n\nexport type ShimmerStructure = (ShimmerElement | ShimmerContainer)[];\n\nexport interface ShimmerLoaderProps {\n  structure: ShimmerStructure;\n  className?: string;\n  animationDuration?: number;\n  baseColor?: string;\n  highlightColor?: string;\n  width?: number | string;\n  height?: number | string;\n}\n\nconst ShimmerElementComponent: FC<{\n  element: ShimmerElement;\n  animationDuration: number;\n  baseColor: string;\n  highlightColor: string;\n}> = ({ element, animationDuration, baseColor, highlightColor }) => {\n  const style: React.CSSProperties = {\n    width: typeof element.width === 'number' ? `${element.width}px` : element.width,\n    height: typeof element.height === 'number' ? `${element.height}px` : element.height,\n    borderRadius: element.borderRadius\n      ? typeof element.borderRadius === 'number'\n        ? `${element.borderRadius}px`\n        : element.borderRadius\n      : undefined,\n    margin: element.margin,\n    '--shimmer-duration': `${animationDuration}s`,\n    '--shimmer-base-color': baseColor,\n    '--shimmer-highlight-color': highlightColor\n  } as React.CSSProperties;\n\n  const shimmerClass = `se-design-shimmer-element se-design-shimmer-${element.type}`;\n\n  return (\n    <div className={shimmerClass} style={style}>\n      {element.children &&\n        element.children.map((child, index) => (\n          <ShimmerElementComponent\n            key={index}\n            element={child}\n            animationDuration={animationDuration}\n            baseColor={baseColor}\n            highlightColor={highlightColor}\n          />\n        ))}\n    </div>\n  );\n};\n\nconst ShimmerContainerComponent: FC<{\n  container: ShimmerContainer;\n  animationDuration: number;\n  baseColor: string;\n  highlightColor: string;\n}> = ({ container, animationDuration, baseColor, highlightColor }) => {\n  const style: React.CSSProperties = {\n    display: 'flex',\n    flexDirection: container.direction || 'column',\n    gap: typeof container.gap === 'number' ? `${container.gap}px` : container.gap,\n    padding: container.padding,\n    margin: container.margin\n  };\n\n  return (\n    <div className={`se-design-shimmer-container ${container.className || ''}`} style={style}>\n      {container.children.map((element, index) => (\n        <ShimmerElementComponent\n          key={index}\n          element={element}\n          animationDuration={animationDuration}\n          baseColor={baseColor}\n          highlightColor={highlightColor}\n        />\n      ))}\n    </div>\n  );\n};\n\nexport const ShimmerLoader: FC<ShimmerLoaderProps> = ({\n  structure,\n  className = '',\n  animationDuration = 1.5,\n  baseColor = '#f0f0f0',\n  highlightColor = '#e0e0e0',\n  width,\n  height\n}) => {\n  const containerStyle: React.CSSProperties = {\n    width: width ? (typeof width === 'number' ? `${width}px` : width) : '100%',\n    height: height ? (typeof height === 'number' ? `${height}px` : height) : 'auto',\n    '--shimmer-duration': `${animationDuration}s`,\n    '--shimmer-base-color': baseColor,\n    '--shimmer-highlight-color': highlightColor\n  } as React.CSSProperties;\n\n  return (\n    <div className={`se-design-shimmer-loader ${className}`} style={containerStyle}>\n      {structure.map((item, index) => {\n        if (item.type === 'container') {\n          return (\n            <ShimmerContainerComponent\n              key={index}\n              container={item}\n              animationDuration={animationDuration}\n              baseColor={baseColor}\n              highlightColor={highlightColor}\n            />\n          );\n        } else {\n          return (\n            <ShimmerElementComponent\n              key={index}\n              element={item}\n              animationDuration={animationDuration}\n              baseColor={baseColor}\n              highlightColor={highlightColor}\n            />\n          );\n        }\n      })}\n    </div>\n  );\n};\n\nexport default ShimmerLoader;\n"],"names":["ShimmerElementComponent","element","animationDuration","baseColor","highlightColor","style","width","height","borderRadius","undefined","margin","shimmerClass","type","React","createElement","className","children","map","child","index","key","ShimmerContainerComponent","container","display","flexDirection","direction","gap","padding","ShimmerLoader","structure","containerStyle","item"],"mappings":";;AAmCA,MAAMA,IAKDA,CAAC;AAAA,EAAEC,SAAAA;AAAAA,EAASC,mBAAAA;AAAAA,EAAmBC,WAAAA;AAAAA,EAAWC,gBAAAA;AAAe,MAAM;AAClE,QAAMC,IAA6B;AAAA,IACjCC,OAAO,OAAOL,EAAQK,SAAU,WAAW,GAAGL,EAAQK,KAAK,OAAOL,EAAQK;AAAAA,IAC1EC,QAAQ,OAAON,EAAQM,UAAW,WAAW,GAAGN,EAAQM,MAAM,OAAON,EAAQM;AAAAA,IAC7EC,cAAcP,EAAQO,eAClB,OAAOP,EAAQO,gBAAiB,WAC9B,GAAGP,EAAQO,YAAY,OACvBP,EAAQO,eACVC;AAAAA,IACJC,QAAQT,EAAQS;AAAAA,IAChB,sBAAsB,GAAGR,CAAiB;AAAA,IAC1C,wBAAwBC;AAAAA,IACxB,6BAA6BC;AAAAA,EAAAA,GAGzBO,IAAe,+CAA+CV,EAAQW,IAAI;AAG9EC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAWJ;AAAAA,IAAcN,OAAAA;AAAAA,EAAa,GACxCJ,EAAQe,YACPf,EAAQe,SAASC,IAAI,CAACC,GAAOC,MAC3BL,gBAAAA,EAAAA,cAACd,GAAuB;AAAA,IACtBoB,KAAKD;AAAAA,IACLlB,SAASiB;AAAAA,IACThB,mBAAAA;AAAAA,IACAC,WAAAA;AAAAA,IACAC,gBAAAA;AAAAA,EACD,CAAA,CACF,CACA;AAET,GAEMiB,IAKDA,CAAC;AAAA,EAAEC,WAAAA;AAAAA,EAAWpB,mBAAAA;AAAAA,EAAmBC,WAAAA;AAAAA,EAAWC,gBAAAA;AAAe,MAAM;AACpE,QAAMC,IAA6B;AAAA,IACjCkB,SAAS;AAAA,IACTC,eAAeF,EAAUG,aAAa;AAAA,IACtCC,KAAK,OAAOJ,EAAUI,OAAQ,WAAW,GAAGJ,EAAUI,GAAG,OAAOJ,EAAUI;AAAAA,IAC1EC,SAASL,EAAUK;AAAAA,IACnBjB,QAAQY,EAAUZ;AAAAA,EAAAA;AAIlBG,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAW,+BAA+BO,EAAUP,aAAa,EAAE;AAAA,IAAIV,OAAAA;AAAAA,EAAAA,GACzEiB,EAAUN,SAASC,IAAI,CAAChB,GAASkB,MAChCL,gBAAAA,EAAAA,cAACd,GAAuB;AAAA,IACtBoB,KAAKD;AAAAA,IACLlB,SAAAA;AAAAA,IACAC,mBAAAA;AAAAA,IACAC,WAAAA;AAAAA,IACAC,gBAAAA;AAAAA,EACD,CAAA,CACF,CACE;AAET,GAEawB,IAAwCA,CAAC;AAAA,EACpDC,WAAAA;AAAAA,EACAd,WAAAA,IAAY;AAAA,EACZb,mBAAAA,IAAoB;AAAA,EACpBC,WAAAA,IAAY;AAAA,EACZC,gBAAAA,IAAiB;AAAA,EACjBE,OAAAA;AAAAA,EACAC,QAAAA;AACF,MAAM;AACJ,QAAMuB,IAAsC;AAAA,IAC1CxB,OAAOA,IAAS,OAAOA,KAAU,WAAW,GAAGA,CAAK,OAAOA,IAAS;AAAA,IACpEC,QAAQA,IAAU,OAAOA,KAAW,WAAW,GAAGA,CAAM,OAAOA,IAAU;AAAA,IACzE,sBAAsB,GAAGL,CAAiB;AAAA,IAC1C,wBAAwBC;AAAAA,IACxB,6BAA6BC;AAAAA,EAAAA;AAI7BS,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAW,4BAA4BA,CAAS;AAAA,IAAIV,OAAOyB;AAAAA,EAC7DD,GAAAA,EAAUZ,IAAI,CAACc,GAAMZ,MAChBY,EAAKnB,SAAS,cAEdC,gBAAAA,EAAAC,cAACO,GAAyB;AAAA,IACxBD,KAAKD;AAAAA,IACLG,WAAWS;AAAAA,IACX7B,mBAAAA;AAAAA,IACAC,WAAAA;AAAAA,IACAC,gBAAAA;AAAAA,EAAAA,CACD,IAIDS,gBAAAA,EAAAC,cAACd,GAAuB;AAAA,IACtBoB,KAAKD;AAAAA,IACLlB,SAAS8B;AAAAA,IACT7B,mBAAAA;AAAAA,IACAC,WAAAA;AAAAA,IACAC,gBAAAA;AAAAA,EAAAA,CACD,CAGN,CACE;AAET;"}
+{"version":3,"file":"index53.js","sources":["../src/components/DownloadWidget/index.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport { delay } from 'utils/delay';\nimport { announce } from 'src/utils/a11y/liveAnnouncer/LiveAnnouncer';\n\nimport { Icon } from '../Icon';\n\ntype ItemType = { label: string; id?: number; metadata?: any };\n\ntype DownloadWidgetProps = {\n  title: string;\n  itemsList: ItemType[];\n  handleDownload: (downloadItem?: any) => void;\n  backgroundColor?: string;\n  titleBackgroundColor?: string;\n};\n\nexport const DownloadWidget = (props: DownloadWidgetProps) => {\n  const {\n    title = '',\n    itemsList = [],\n    handleDownload,\n    backgroundColor = 'var(--color-white)',\n    titleBackgroundColor = 'var(--color-blue-50)'\n  } = props;\n\n  useEffect(() => {\n    if (itemsList?.length > 0) {\n      itemsList?.forEach((downloadItem) => {\n        delay(2000).then(() => {\n          handleDownload(downloadItem);\n        });\n      });\n    }\n  }, [itemsList?.length]);\n\n  useEffect(() => {\n    if (title) {\n      announce(title, { delay: 300 });\n    }\n  }, []);\n\n  return (\n    <div\n      className=\"download-widgets-container rounded-t-xl border border-[var(--color-gray-400)] w-[300px] overflow-hidden fixed bottom-0 right-5 z-[1100]\"\n      style={{ backgroundColor }}\n    >\n      <div className=\"p-4 text-base font-medium\" style={{ backgroundColor: titleBackgroundColor }}>\n        {title}\n      </div>\n      {itemsList?.map((item) => (\n        <div className=\" download-item flex items-center gap-2 px-4 pt-4 last:pb-4\">\n          <span className=\"text-base font-normal flex-1\">{item.label}</span>\n          <Icon name=\"checked-circle\" stroke=\"var(--color-green-500)\" size={16} />\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":["React__default","useEffect","delay","announce","Icon","DownloadWidget","props","title","itemsList","handleDownload","backgroundColor","titleBackgroundColor","length","forEach","downloadItem","then","React","createElement","className","style","map","item","label","name","stroke","size"],"mappings":"AAiBO,OAAAA,KAAA,aAAAC,SAAA;AAAA,SAAA,SAAAC,SAAA;AAAA,SAAA,YAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,MAAMC,IAAiBA,CAACC,MAA+B;AAC5D,QAAM;AAAA,IACJC,OAAAA,IAAQ;AAAA,IACRC,WAAAA,IAAY,CAAA;AAAA,IACZC,gBAAAA;AAAAA,IACAC,iBAAAA,IAAkB;AAAA,IAClBC,sBAAAA,IAAuB;AAAA,EAAA,IACrBL;AAEJL,SAAAA,EAAU,MAAM;AACd,IAAIO,GAAWI,SAAS,KACtBJ,GAAWK,QAASC,CAAAA,MAAiB;AACnCZ,MAAAA,EAAM,GAAI,EAAEa,KAAK,MAAM;AACrBN,QAAAA,EAAeK,CAAY;AAAA,MAC7B,CAAC;AAAA,IACH,CAAC;AAAA,EAEL,GAAG,CAACN,GAAWI,MAAM,CAAC,GAEtBX,EAAU,MAAM;AACd,IAAIM,KACFJ,EAASI,GAAO;AAAA,MAAEL,OAAO;AAAA,IAAA,CAAK;AAAA,EAElC,GAAG,CAAA,CAAE,GAGHc,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAU;AAAA,IACVC,OAAO;AAAA,MAAET,iBAAAA;AAAAA,IAAAA;AAAAA,EAAgB,GAEzBM,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAA4BC,OAAO;AAAA,MAAET,iBAAiBC;AAAAA,IAAAA;AAAAA,EAAqB,GACvFJ,CACE,GACJC,GAAWY,IAAKC,CAAAA,MACfL,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACbF,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMC,WAAU;AAAA,EAAA,GAAgCG,EAAKC,KAAY,GACjEN,gBAAAA,EAAAC,cAACb,GAAI;AAAA,IAACmB,MAAK;AAAA,IAAiBC,QAAO;AAAA,IAAyBC,MAAM;AAAA,EAAA,CAAK,CACpE,CACN,CACE;AAET;"}

package/dist/index54.js

@@ -1,145 +1,41 @@
-import e, { useState as i, useEffect as P } from "react";
-import { Icon as n } from "./index5.js";
-import { ProgressBar as S } from "./index39.js";
-/* empty css         */
-const q = ({
-  open: m,
-  onClose: v,
-  title: b,
-  description: d,
-  position: u = "bottom-right",
-  variant: k = "default",
-  autoHideDuration: s = 6e3,
-  showCloseButton: N = !0,
-  action: r,
-  className: h = "",
-  style: x,
-  showProgress: f = !1,
-  progress: p = 0,
-  icon: E,
-  items: t,
-  defaultExpanded: C = !1,
-  automationId: y = ""
+import a from "react";
+const u = ({
+  checkedRadioOption: t,
+  optionList: r,
+  onChange: l,
+  switchWidth: c,
+  automationId: i = ""
 }) => {
-  const [I, g] = i(!1), [M, c] = i(!1), [l, T] = i(C);
-  P(() => {
-    if (m) {
-      if (g(!0), c(!1), s > 0) {
-        const a = setTimeout(() => {
-          o();
-        }, s);
-        return () => clearTimeout(a);
-      }
-    } else
-      o();
-  }, [m, s]);
-  const o = () => {
-    c(!0), setTimeout(() => {
-      g(!1), c(!1), v();
-    }, 300);
-  }, $ = () => {
-    T(!l);
-  }, z = (a) => a.icon ? a.icon : a.type === "folder" ? "folder-empty" : (a.type === "file", "file-empty");
-  if (!I) return null;
-  const w = () => ({
-    "top-right": "top-4 right-4",
-    "top-left": "top-4 left-4",
-    "bottom-right": "bottom-4 right-4",
-    "bottom-left": "bottom-4 left-4",
-    "top-center": "top-4 left-1/2 transform -translate-x-1/2",
-    "bottom-center": "bottom-4 left-1/2 transform -translate-x-1/2"
-  })[u], V = () => ({
-    default: "snackbar-default",
-    success: "snackbar-success",
-    warning: "snackbar-warning",
-    error: "snackbar-error",
-    info: "snackbar-info"
-  })[k], B = () => ({
-    default: "var(--color-gray-600)",
-    success: "var(--color-green-500)",
-    warning: "var(--color-yellow-500)",
-    error: "var(--color-red-500)",
-    info: "var(--color-blue-500)"
-  })[k];
-  return /* @__PURE__ */ e.createElement("div", {
-    className: "snackbar-backdrop fixed inset-0 z-[1000] pointer-events-none"
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: `
-          snackbar-container
-          ${w()}
-          ${V()}
-          ${M ? "snackbar-exit" : "snackbar-enter"}
-          ${h}
-        `,
-    style: x,
-    role: "alert",
-    "aria-live": "polite",
-    "data-automation-id": y
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: "snackbar-content"
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: "snackbar-header"
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: "snackbar-title-section"
-  }, E && /* @__PURE__ */ e.createElement(n, {
-    name: E,
-    size: 20,
-    fill: B(),
-    className: "snackbar-icon"
-  }), b && /* @__PURE__ */ e.createElement("h4", {
-    className: "snackbar-title"
-  }, b)), /* @__PURE__ */ e.createElement("div", {
-    className: "snackbar-header-actions"
-  }, t && t.length > 0 && /* @__PURE__ */ e.createElement(n, {
-    name: "chevron",
-    size: 16,
-    stroke: "var(--color-gray-100)",
-    rotation: l ? "0" : "180",
-    className: "snackbar-expand-icon",
-    onClick: $
-  }), N && !f && /* @__PURE__ */ e.createElement(n, {
-    name: "close",
-    size: 16,
-    fill: "var(--color-gray-600)",
-    className: "snackbar-close-icon",
-    onClick: o
-  }))), d && /* @__PURE__ */ e.createElement("div", {
-    className: "snackbar-description"
-  }, d), f && /* @__PURE__ */ e.createElement("div", {
-    className: "snackbar-progress-container"
-  }, p === -1 ? /* @__PURE__ */ e.createElement("div", {
-    className: "snackbar-indeterminate-progress"
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: "snackbar-progress-gradient"
-  })) : /* @__PURE__ */ e.createElement(S, {
-    totalTasks: 100,
-    completedTasks: p,
-    needPercentageCompleted: !1,
-    progressBarColor: "var(--color-green-500)"
-  })), t && t.length > 0 && /* @__PURE__ */ e.createElement("div", {
-    className: `snackbar-items-container ${l ? "snackbar-items-expanded" : "snackbar-items-collapsed"}`
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: "snackbar-items-list"
-  }, t.map((a) => /* @__PURE__ */ e.createElement("div", {
-    key: a.id,
-    className: "snackbar-item",
-    onClick: a.onClick
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: "snackbar-item-content"
-  }, /* @__PURE__ */ e.createElement(n, {
-    name: z(a),
-    size: 16,
-    className: "snackbar-item-icon"
-  }), /* @__PURE__ */ e.createElement("span", {
-    className: "snackbar-item-name"
-  }, a.name)))))), r && /* @__PURE__ */ e.createElement("div", {
-    className: "snackbar-actions"
-  }, /* @__PURE__ */ e.createElement("button", {
-    className: `snackbar-action-button snackbar-action-${r.variant || "primary"}`,
-    onClick: r.onClick
-  }, r.label)))));
+  const s = (e) => {
+    l && l(e);
+  };
+  return /* @__PURE__ */ a.createElement("div", {
+    className: "flex rounded-full border border-gray-300 bg-white min-w-[110px] h-[34px]",
+    role: "radiogroup",
+    "aria-label": "Switch options",
+    "data-automation-id": i,
+    style: {
+      width: c
+      // Moved min-w-[100px] and h-[34px] to Tailwind classes below, so these inline styles are no longer needed.
+    }
+  }, r.map((e) => /* @__PURE__ */ a.createElement("div", {
+    key: e.value,
+    className: `relative flex-1 flex items-center block py-2 px-4 rounded-[24px] w-full text-center cursor-pointer transition-all duration-200 ${e.value === t ? "bg-[var(--color-blue-100)] text-[var(--color-blue-500)] shadow-sm" : "text-gray-700 hover:text-gray-900"}`,
+    onClick: () => s(e.value),
+    "data-automation-id": `radio-switch-option-${e.value}`
+  }, /* @__PURE__ */ a.createElement("input", {
+    type: "radio",
+    name: "switch",
+    id: `switch-${e.value}`,
+    checked: e.value === t,
+    className: "sr-only"
+    // Hide the input but keep it accessible
+  }), /* @__PURE__ */ a.createElement("label", {
+    htmlFor: `switch-${e.value}`,
+    className: " cursor-pointer "
+  }, e.label))));
 };
 export {
-  q as Snackbar
+  u as RadioSwitch
 };
 //# sourceMappingURL=index54.js.map

package/dist/index54.js.map

@@ -1 +1 @@
-{"version":3,"file":"index54.js","sources":["../src/components/SnackBar/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Icon } from '../Icon';\nimport { ProgressBar } from '../ProgressBar';\nimport './style.scss';\n\nexport type SnackbarPosition =\n  | 'top-right'\n  | 'top-left'\n  | 'bottom-right'\n  | 'bottom-left'\n  | 'top-center'\n  | 'bottom-center';\n\nexport type SnackbarVariant = 'default' | 'success' | 'warning' | 'error' | 'info';\n\nexport type SnackbarAction = {\n  label: string;\n  onClick: () => void;\n  variant?: 'primary' | 'secondary';\n};\n\nexport type SnackbarItem = {\n  id: string | number;\n  name: string;\n  type: 'file' | 'folder';\n  fileType?: 'doc' | 'pdf' | 'image' | 'other';\n  icon?: string;\n  onClick?: () => void;\n};\n\nexport interface SnackbarProps {\n  /** Whether the snackbar is open */\n  open: boolean;\n  /** Function to close the snackbar */\n  onClose: () => void;\n  /** Title text displayed prominently */\n  title?: string;\n  /** Description text displayed below title */\n  description?: string;\n  /** Position of the snackbar on screen */\n  position?: SnackbarPosition;\n  /** Visual variant of the snackbar */\n  variant?: SnackbarVariant;\n  /** Auto-hide duration in milliseconds (0 = no auto-hide) */\n  autoHideDuration?: number;\n  /** Whether to show close button */\n  showCloseButton?: boolean;\n  /** Optional action button */\n  action?: SnackbarAction;\n  /** Custom className for additional styling */\n  className?: string;\n  /** Custom styles */\n  style?: React.CSSProperties;\n  /** Whether to show progress indicator */\n  showProgress?: boolean;\n  /** Progress value (0-100) */\n  progress?: number;\n  /** Custom icon name */\n  icon?: string;\n  /** List of items to display in expandable section */\n  items?: SnackbarItem[];\n  /** Whether items list is expanded by default */\n  defaultExpanded?: boolean;\n  /** Automation ID for testing */\n  automationId?: string;\n}\n\nexport const Snackbar: React.FC<SnackbarProps> = ({\n  open,\n  onClose,\n  title,\n  description,\n  position = 'bottom-right',\n  variant = 'default',\n  autoHideDuration = 6000,\n  showCloseButton = true,\n  action,\n  className = '',\n  style,\n  showProgress = false,\n  progress = 0,\n  icon,\n  items,\n  defaultExpanded = false,\n  automationId = ''\n}) => {\n  const [isVisible, setIsVisible] = useState(false);\n  const [isExiting, setIsExiting] = useState(false);\n  const [isExpanded, setIsExpanded] = useState(defaultExpanded);\n\n  useEffect(() => {\n    if (open) {\n      setIsVisible(true);\n      setIsExiting(false);\n\n      // Auto-hide functionality\n      if (autoHideDuration > 0) {\n        const timer = setTimeout(() => {\n          handleClose();\n        }, autoHideDuration);\n\n        return () => clearTimeout(timer);\n      }\n    } else {\n      handleClose();\n    }\n  }, [open, autoHideDuration]);\n\n  const handleClose = () => {\n    setIsExiting(true);\n    setTimeout(() => {\n      setIsVisible(false);\n      setIsExiting(false);\n      onClose();\n    }, 300); // Animation duration\n  };\n\n  const handleToggleExpanded = () => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const getFileIcon = (item: SnackbarItem) => {\n    if (item.icon) return item.icon;\n\n    if (item.type === 'folder') return 'folder-empty';\n    if (item.type === 'file') return 'file-empty';\n\n    return 'file-empty';\n\n    // switch (item.fileType) {\n    //   case 'doc':\n    //     return 'docFile';\n    //   case 'pdf':\n    //     return 'pdf-file';\n    //   case 'image':\n    //     return 'file-empty';\n    //   default:\n    //     return 'file-empty';\n    // }\n  };\n\n  if (!isVisible) return null;\n\n  const getPositionClasses = () => {\n    const positionMap = {\n      'top-right': 'top-4 right-4',\n      'top-left': 'top-4 left-4',\n      'bottom-right': 'bottom-4 right-4',\n      'bottom-left': 'bottom-4 left-4',\n      'top-center': 'top-4 left-1/2 transform -translate-x-1/2',\n      'bottom-center': 'bottom-4 left-1/2 transform -translate-x-1/2'\n    };\n    return positionMap[position];\n  };\n\n  const getVariantClasses = () => {\n    const variantMap = {\n      default: 'snackbar-default',\n      success: 'snackbar-success',\n      warning: 'snackbar-warning',\n      error: 'snackbar-error',\n      info: 'snackbar-info'\n    };\n    return variantMap[variant];\n  };\n\n  const getIconColor = () => {\n    const colorMap = {\n      default: 'var(--color-gray-600)',\n      success: 'var(--color-green-500)',\n      warning: 'var(--color-yellow-500)',\n      error: 'var(--color-red-500)',\n      info: 'var(--color-blue-500)'\n    };\n    return colorMap[variant];\n  };\n\n  return (\n    <div className=\"snackbar-backdrop fixed inset-0 z-[1000] pointer-events-none\">\n      <div\n        className={`\n          snackbar-container\n          ${getPositionClasses()}\n          ${getVariantClasses()}\n          ${isExiting ? 'snackbar-exit' : 'snackbar-enter'}\n          ${className}\n        `}\n        style={style}\n        role=\"alert\"\n        aria-live=\"polite\"\n        data-automation-id={automationId}\n      >\n        <div className=\"snackbar-content\">\n          {/* Header with icon, title, expand/collapse, and close button */}\n          <div className=\"snackbar-header\">\n            <div className=\"snackbar-title-section\">\n              {icon && <Icon name={icon} size={20} fill={getIconColor()} className=\"snackbar-icon\" />}\n              {title && <h4 className=\"snackbar-title\">{title}</h4>}\n            </div>\n            <div className=\"snackbar-header-actions\">\n              {items && items.length > 0 && (\n                <Icon\n                  name=\"chevron\"\n                  size={16}\n                  stroke=\"var(--color-gray-100)\"\n                  rotation={isExpanded ? '0' : '180'}\n                  className=\"snackbar-expand-icon\"\n                  onClick={handleToggleExpanded}\n                />\n              )}\n              {showCloseButton && !showProgress && (\n                <Icon\n                  name=\"close\"\n                  size={16}\n                  fill=\"var(--color-gray-600)\"\n                  // stroke=\"var(--color-gray-600)\"\n                  className=\"snackbar-close-icon\"\n                  onClick={handleClose}\n                />\n              )}\n            </div>\n          </div>\n\n          {/* Description */}\n          {description && <div className=\"snackbar-description\">{description}</div>}\n\n          {/* Progress bar */}\n          {showProgress && (\n            <div className=\"snackbar-progress-container\">\n              {progress === -1 ? (\n                <div className=\"snackbar-indeterminate-progress\">\n                  <div className=\"snackbar-progress-gradient\"></div>\n                </div>\n              ) : (\n                <ProgressBar\n                  totalTasks={100}\n                  completedTasks={progress}\n                  needPercentageCompleted={false}\n                  progressBarColor=\"var(--color-green-500)\"\n                />\n              )}\n            </div>\n          )}\n\n          {/* Expandable Items List */}\n          {items && items.length > 0 && (\n            <div\n              className={`snackbar-items-container ${isExpanded ? 'snackbar-items-expanded' : 'snackbar-items-collapsed'}`}\n            >\n              <div className=\"snackbar-items-list\">\n                {items.map((item) => (\n                  <div key={item.id} className=\"snackbar-item\" onClick={item.onClick}>\n                    <div className=\"snackbar-item-content\">\n                      <Icon name={getFileIcon(item)} size={16} className=\"snackbar-item-icon\" />\n                      <span className=\"snackbar-item-name\">{item.name}</span>\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </div>\n          )}\n\n          {/* Action button */}\n          {action && (\n            <div className=\"snackbar-actions\">\n              <button\n                className={`snackbar-action-button snackbar-action-${action.variant || 'primary'}`}\n                onClick={action.onClick}\n              >\n                {action.label}\n              </button>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["Snackbar","open","onClose","title","description","position","variant","autoHideDuration","showCloseButton","action","className","style","showProgress","progress","icon","items","defaultExpanded","automationId","isVisible","setIsVisible","useState","isExiting","setIsExiting","isExpanded","setIsExpanded","useEffect","timer","setTimeout","handleClose","clearTimeout","handleToggleExpanded","getFileIcon","item","type","getPositionClasses","getVariantClasses","default","success","warning","error","info","getIconColor","React","createElement","role","Icon","name","size","fill","length","stroke","rotation","onClick","ProgressBar","totalTasks","completedTasks","needPercentageCompleted","progressBarColor","map","key","id","label"],"mappings":"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"}
+{"version":3,"file":"index54.js","sources":["../src/components/RadioSwitch/index.tsx"],"sourcesContent":["import React from 'react';\n\n/**\n * This is Radio Switch, Only one option can be selected at a time.\n * There can be multiple options, but only one can be selected at a time.\n */\nexport interface RadioSwitchOption {\n  label: string;\n  value: string;\n}\n\nexport interface RadioSwitchProps {\n  checkedRadioOption?: string;\n  optionList: RadioSwitchOption[];\n  onChange?: (value: string) => void;\n  switchWidth?: string;\n  automationId?: string;\n}\n\nexport const RadioSwitch: React.FC<RadioSwitchProps> = ({ checkedRadioOption, optionList, onChange, switchWidth, automationId = '' }) => {\n  const handleChange = (value: string) => {\n    if (onChange) {\n      onChange(value);\n    }\n  };\n\n  return (\n    <div\n      className=\"flex rounded-full border border-gray-300 bg-white min-w-[110px] h-[34px]\"\n      role=\"radiogroup\"\n      aria-label=\"Switch options\"\n      data-automation-id={automationId}\n      style={{\n        width: switchWidth\n        // Moved min-w-[100px] and h-[34px] to Tailwind classes below, so these inline styles are no longer needed.\n      }}\n    >\n      {optionList.map((option) => (\n        <div\n          key={option.value}\n          className={`relative flex-1 flex items-center block py-2 px-4 rounded-[24px] w-full text-center cursor-pointer transition-all duration-200 ${\n            option.value === checkedRadioOption\n              ? 'bg-[var(--color-blue-100)] text-[var(--color-blue-500)] shadow-sm'\n              : 'text-gray-700 hover:text-gray-900'\n          }`}\n          onClick={() => handleChange(option.value)}\n          data-automation-id={`radio-switch-option-${option.value}`}\n        >\n          <input\n            type=\"radio\"\n            name=\"switch\"\n            id={`switch-${option.value}`}\n            checked={option.value === checkedRadioOption}\n            className=\"sr-only\" // Hide the input but keep it accessible\n          />\n          <label htmlFor={`switch-${option.value}`} className={' cursor-pointer '}>\n            {option.label}\n          </label>\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":["RadioSwitch","checkedRadioOption","optionList","onChange","switchWidth","automationId","handleChange","value","React","createElement","className","role","style","width","map","option","key","onClick","type","name","id","checked","htmlFor","label"],"mappings":";AAmBO,MAAMA,IAA0CA,CAAC;AAAA,EAAEC,oBAAAA;AAAAA,EAAoBC,YAAAA;AAAAA,EAAYC,UAAAA;AAAAA,EAAUC,aAAAA;AAAAA,EAAaC,cAAAA,IAAe;AAAG,MAAM;AACvI,QAAMC,IAAeA,CAACC,MAAkB;AACtC,IAAIJ,KACFA,EAASI,CAAK;AAAA,EAElB;AAEA,SACEC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAU;AAAA,IACVC,MAAK;AAAA,IACL,cAAW;AAAA,IACX,sBAAoBN;AAAAA,IACpBO,OAAO;AAAA,MACLC,OAAOT;AAAAA;AAAAA,IAAAA;AAAAA,EAET,GAECF,EAAWY,IAAKC,CAAAA,MACfP,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEO,KAAKD,EAAOR;AAAAA,IACZG,WAAW,kIACTK,EAAOR,UAAUN,IACb,sEACA,mCAAmC;AAAA,IAEzCgB,SAASA,MAAMX,EAAaS,EAAOR,KAAK;AAAA,IACxC,sBAAoB,uBAAuBQ,EAAOR,KAAK;AAAA,EAAA,GAEvDC,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACES,MAAK;AAAA,IACLC,MAAK;AAAA,IACLC,IAAI,UAAUL,EAAOR,KAAK;AAAA,IAC1Bc,SAASN,EAAOR,UAAUN;AAAAA,IAC1BS,WAAU;AAAA;AAAA,EAAA,CACX,GACDF,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IAAOa,SAAS,UAAUP,EAAOR,KAAK;AAAA,IAAIG,WAAW;AAAA,EAAA,GAClDK,EAAOQ,KACH,CACJ,CACN,CACE;AAET;"}