se-design 1.0.59 → 1.0.61-dev

package/dist/index51.js

@@ -1,41 +1,68 @@
-import e, { useEffect as d } from "react";
-import { delay as m } from "./index218.js";
-import { Icon as i } from "./index5.js";
-const g = (r) => {
-  const {
-    title: a = "",
-    itemsList: t = [],
-    handleDownload: l,
-    backgroundColor: n = "var(--color-white)",
-    titleBackgroundColor: c = "var(--color-blue-50)"
-  } = r;
-  return d(() => {
-    t?.length > 0 && t?.forEach((o) => {
-      m(2e3).then(() => {
-        l(o);
-      });
-    });
-  }, [t?.length]), /* @__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: n
-    }
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: "p-4 text-base font-medium",
-    style: {
-      backgroundColor: c
-    }
-  }, a), t?.map((o) => /* @__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"
-  }, o.label), /* @__PURE__ */ e.createElement(i, {
-    name: "checked-circle",
-    stroke: "var(--color-green-500)",
-    size: 16
-  }))));
-};
+import t from "react";
+import { Icon as C } from "./index5.js";
+/* empty css         */
+function x({
+  disabled: c,
+  error: a,
+  errorMessage: h,
+  inputStyle: w,
+  label: s,
+  leftIcon: l,
+  maxLength: n,
+  onChange: v,
+  onClick: i,
+  placeholder: f,
+  rightIcon: r,
+  style: p,
+  tag: E,
+  type: $ = "text",
+  value: m,
+  className: N = "",
+  automationId: I = ""
+}) {
+  const g = E || "input", d = (e) => {
+    if (!e) return null;
+    const o = c || e.disabled;
+    return /* @__PURE__ */ t.createElement("div", {
+      className: `input-with-icon-icon input-with-icon-icon-${e.position} ${e.className || ""} ${o ? "disabled" : ""} ${e.disableHover ? "no-hover" : ""}`,
+      style: e.style,
+      onClick: o ? void 0 : (u) => {
+        e.onClick && e.onClick(), i && i(u);
+      }
+    }, /* @__PURE__ */ t.createElement(C, {
+      name: e.name
+    }));
+  }, b = !!l, y = !!r;
+  return /* @__PURE__ */ t.createElement("div", {
+    className: `input-with-icon-main-container ${N}`,
+    style: p,
+    "data-automation-id": I
+  }, s && /* @__PURE__ */ t.createElement("div", {
+    className: "label-container"
+  }, s), /* @__PURE__ */ t.createElement("div", {
+    className: `input-with-icon-wrapper ${b ? "has-left-icon" : ""} ${y ? "has-right-icon" : ""}`,
+    onClick: i ? (e) => {
+      e.target.closest(".input-with-icon-icon") || i(e);
+    } : void 0
+  }, d(l), /* @__PURE__ */ t.createElement(g, {
+    value: m,
+    onChange: (e) => v(e.target.value),
+    onClick: i,
+    disabled: c,
+    type: $,
+    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: f,
+    style: w
+  }), d(r)), (a || n) && /* @__PURE__ */ t.createElement("div", {
+    className: `${a ? "error-and-max-word" : "max-word-container"}`
+  }, a && /* @__PURE__ */ t.createElement("div", {
+    className: "error-message"
+  }, h), n && /* @__PURE__ */ t.createElement("div", {
+    className: "max-word"
+  }, n && m?.length + "/" + n)));
+}
 export {
-  g as DownloadWidget
+  x as InputWithIcon
 };
 //# sourceMappingURL=index51.js.map

package/dist/index51.js.map

@@ -1 +1 @@
-{"version":3,"file":"index51.js","sources":["../src/components/DownloadWidget/index.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport { delay } from 'utils/delay';\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  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","Icon","DownloadWidget","props","title","itemsList","handleDownload","backgroundColor","titleBackgroundColor","length","forEach","downloadItem","then","React","createElement","className","style","map","item","label","name","stroke","size"],"mappings":"AAgBO,OAAAA,KAAA,aAAAC,SAAA;AAAA,SAAA,SAAAC,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;AAEJJ,SAAAA,EAAU,MAAM;AACd,IAAIM,GAAWI,SAAS,KACtBJ,GAAWK,QAASC,CAAAA,MAAiB;AACnCX,MAAAA,EAAM,GAAI,EAAEY,KAAK,MAAM;AACrBN,QAAAA,EAAeK,CAAY;AAAA,MAC7B,CAAC;AAAA,IACH,CAAC;AAAA,EAEL,GAAG,CAACN,GAAWI,MAAM,CAAC,GAGpBI,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;"}
+{"version":3,"file":"index51.js","sources":["../src/components/InputWithIcon/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Icon } from '../Icon';\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\nexport interface InputWithIconProps {\n  disabled?: boolean;\n  error?: boolean;\n  errorMessage?: 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  placeholder?: string;\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\nexport function InputWithIcon({\n  disabled,\n  error,\n  errorMessage,\n  inputStyle,\n  label,\n  leftIcon,\n  maxLength,\n  onChange,\n  onClick,\n  placeholder,\n  rightIcon,\n  style,\n  tag,\n  type = 'text',\n  value,\n  className = '',\n  automationId = ''\n}: InputWithIconProps) {\n  const Element = tag || 'input';\n\n  const renderIcon = (iconProps: InputIconProps) => {\n    if (!iconProps) return null;\n    \n    const isIconDisabled = disabled || iconProps.disabled;\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        onClick={isIconDisabled ? undefined : (e) => {\n          // First trigger the icon's own onClick handler\n          if (iconProps.onClick) {\n            iconProps.onClick();\n          }\n          // Then also trigger the input's onClick handler\n          if (onClick) {\n            onClick(e as any);\n          }\n        }}\n      >\n        <Icon name={iconProps.name} />\n      </div>\n    );\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 && <div className=\"label-container\">{label}</div>}\n      <div \n        className={`input-with-icon-wrapper ${hasLeftIcon ? 'has-left-icon' : ''} ${hasRightIcon ? 'has-right-icon' : ''}`}\n        onClick={onClick ? (e) => {\n          // Trigger input onClick when clicking on wrapper area (but not on icons, as they handle it themselves)\n          const target = e.target as HTMLElement;\n          const isClickingIcon = target.closest('.input-with-icon-icon');\n          \n          if (!isClickingIcon) {\n            onClick(e as any);\n          }\n        } : undefined}\n      >\n        {renderIcon(leftIcon!)}\n        {React.createElement(Element, {\n          value,\n          onChange: (e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value),\n          onClick: onClick,\n          disabled,\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          style: inputStyle\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","InputWithIcon","disabled","error","errorMessage","inputStyle","label","leftIcon","maxLength","onChange","onClick","placeholder","rightIcon","style","tag","type","value","className","automationId","Element","renderIcon","iconProps","isIconDisabled","React","createElement","position","disableHover","undefined","e","name","hasLeftIcon","hasRightIcon","target","closest","length"],"mappings":"AAkCO,OAAAA,OAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,OAAA;AAAA,SAASC,EAAc;AAAA,EAC5BC,UAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,MAAAA,IAAO;AAAA,EACPC,OAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,cAAAA,IAAe;AACG,GAAG;AACrB,QAAMC,IAAUL,KAAO,SAEjBM,IAAaA,CAACC,MAA8B;AAChD,QAAI,CAACA,EAAW,QAAO;AAEvB,UAAMC,IAAiBpB,KAAYmB,EAAUnB;AAE7C,WACEqB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,MACEP,WAAW,6CAA6CI,EAAUI,QAAQ,IAAIJ,EAAUJ,aAAa,EAAE,IAAIK,IAAiB,aAAa,EAAE,IAAID,EAAUK,eAAe,aAAa,EAAE;AAAA,MACvLb,OAAOQ,EAAUR;AAAAA,MACjBH,SAASY,IAAiBK,SAAaC,CAAAA,MAAM;AAE3C,QAAIP,EAAUX,WACZW,EAAUX,QAAAA,GAGRA,KACFA,EAAQkB,CAAQ;AAAA,MAEpB;AAAA,IAAA,GAEAL,gBAAAA,EAAAC,cAACxB,GAAI;AAAA,MAAC6B,MAAMR,EAAUQ;AAAAA,IAAAA,CAAO,CAC1B;AAAA,EAET,GAEMC,IAAc,CAAC,CAACvB,GAChBwB,IAAe,CAAC,CAACnB;AAEvB,SACEW,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKP,WAAW,kCAAkCA,CAAS;AAAA,IAAIJ,OAAAA;AAAAA,IAAc,sBAAoBK;AAAAA,EAAAA,GAC9FZ,KAASiB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKP,WAAU;AAAA,EAAA,GAAmBX,CAAW,GACvDiB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEP,WAAW,2BAA2Ba,IAAc,kBAAkB,EAAE,IAAIC,IAAe,mBAAmB,EAAE;AAAA,IAChHrB,SAASA,IAAWkB,CAAAA,MAAM;AAKxB,MAHeA,EAAEI,OACaC,QAAQ,uBAAuB,KAG3DvB,EAAQkB,CAAQ;AAAA,IAEpB,IAAID;AAAAA,EAAAA,GAEHP,EAAWb,CAAS,GACpBgB,gBAAAA,EAAMC,cAAcL,GAAS;AAAA,IAC5BH,OAAAA;AAAAA,IACAP,UAAUA,CAACmB,MAA2CnB,EAASmB,EAAEI,OAAOhB,KAAK;AAAA,IAC7EN,SAAAA;AAAAA,IACAR,UAAAA;AAAAA,IACAa,MAAAA;AAAAA,IACAE,WAAW,2BAA2Bd,IAAQ,oCAAoC,mCAAmC,IAAID,IAAW,uCAAuC,EAAE;AAAA,IAC7KM,WAAWA,KAAwBmB;AAAAA,IACnChB,aAAAA;AAAAA,IACAE,OAAOR;AAAAA,EAAAA,CACR,GACAe,EAAWR,CAAU,CACnB,IACHT,KAASK,MACTe,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKP,WAAW,GAAGd,IAAQ,uBAAuB,oBAAoB;AAAA,EAAA,GACnEA,KAASoB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKP,WAAU;AAAA,EAAA,GAAiBb,CAAkB,GAC3DI,KAAae,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKP,WAAU;AAAA,EAAA,GAAYT,KAAaQ,GAAOkB,SAAS,MAAM1B,CAAe,CACxF,CAEJ;AAET;"}

package/dist/index52.js

@@ -1,41 +1,41 @@
-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,
+import e, { useEffect as d } from "react";
+import { delay as m } from "./index222.js";
+import { Icon as i } from "./index5.js";
+const g = (r) => {
+  const {
+    title: a = "",
+    itemsList: t = [],
+    handleDownload: l,
+    backgroundColor: n = "var(--color-white)",
+    titleBackgroundColor: c = "var(--color-blue-50)"
+  } = r;
+  return d(() => {
+    t?.length > 0 && t?.forEach((o) => {
+      m(2e3).then(() => {
+        l(o);
+      });
+    });
+  }, [t?.length]), /* @__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: {
-      width: c
-      // Moved min-w-[100px] and h-[34px] to Tailwind classes below, so these inline styles are no longer needed.
+      backgroundColor: n
     }
-  }, 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))));
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: "p-4 text-base font-medium",
+    style: {
+      backgroundColor: c
+    }
+  }, a), t?.map((o) => /* @__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"
+  }, o.label), /* @__PURE__ */ e.createElement(i, {
+    name: "checked-circle",
+    stroke: "var(--color-green-500)",
+    size: 16
+  }))));
 };
 export {
-  u as RadioSwitch
+  g as DownloadWidget
 };
 //# 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;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;"}
+{"version":3,"file":"index52.js","sources":["../src/components/DownloadWidget/index.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport { delay } from 'utils/delay';\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  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","Icon","DownloadWidget","props","title","itemsList","handleDownload","backgroundColor","titleBackgroundColor","length","forEach","downloadItem","then","React","createElement","className","style","map","item","label","name","stroke","size"],"mappings":"AAgBO,OAAAA,KAAA,aAAAC,SAAA;AAAA,SAAA,SAAAC,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;AAEJJ,SAAAA,EAAU,MAAM;AACd,IAAIM,GAAWI,SAAS,KACtBJ,GAAWK,QAASC,CAAAA,MAAiB;AACnCX,MAAAA,EAAM,GAAI,EAAEY,KAAK,MAAM;AACrBN,QAAAA,EAAeK,CAAY;AAAA,MAC7B,CAAC;AAAA,IACH,CAAC;AAAA,EAEL,GAAG,CAACN,GAAWI,MAAM,CAAC,GAGpBI,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/index53.js

@@ -1,88 +1,41 @@
-import i from "react";
-/* empty css         */
-const n = ({
-  element: e,
-  animationDuration: a,
-  baseColor: r,
-  highlightColor: s
+import a from "react";
+const u = ({
+  checkedRadioOption: t,
+  optionList: r,
+  onChange: l,
+  switchWidth: c,
+  automationId: i = ""
 }) => {
-  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
+  const s = (e) => {
+    l && l(e);
   };
-  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
-  })));
+  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 {
-  f as ShimmerLoader,
-  f as default
+  u as RadioSwitch
 };
 //# 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":"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"}
+{"version":3,"file":"index53.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;"}