se-design 1.0.83-dev.4 → 1.0.83-r-dev.1

package/dist/index57.js

@@ -1,152 +1,41 @@
-import p, { useState as A, useRef as O, useEffect as j } from "react";
-import { useStableId as W } from "./index205.js";
-/* empty css         */
-const M = ({
-  length: n = 6,
-  onChange: h,
-  onComplete: k,
-  label: y,
-  disabled: i = !1,
-  className: H = "",
-  autoFocus: w = !0,
-  error: K = !1,
-  errorMessage: l,
-  validateOnBlur: L = !1,
-  onValidate: u,
-  id: _
-}) => {
-  const [s, P] = A(Array(n).fill("")), [g, m] = A(null), f = O([]), d = O(!1), $ = W(_, "se-otp-input"), R = `${$}-label`, B = `${$}-error`, N = (t) => /^\d$/.test(t), T = (t) => t.length === n && s.every((e) => e !== ""), b = (t, e, r = !1) => {
-    const o = [...s];
-    o[t] = e, P(o), r && e && t < n - 1 && c(t + 1);
-  }, E = (t) => {
-    b(t, "");
-  }, c = (t) => {
-    f.current[t]?.focus();
-  };
-  j(() => {
-    w && f.current[0] && !i && c(0);
-  }, [w, i]);
-  const C = (t) => {
-    if (t.length === 0)
-      return l || "Please enter the verification code";
-    if (t.length < n || !T(t))
-      return l || "Please enter all digits";
-    if (u) {
-      const e = u(t);
-      if (e === !1)
-        return l || "Invalid verification code";
-      if (typeof e == "string")
-        return e;
-    }
-    return null;
-  };
-  j(() => {
-    const t = s.join("");
-    if (h?.(t), g && t.length > 0 && m(null), T(t)) {
-      if (u) {
-        const e = u(t);
-        m(e === !1 || typeof e == "string" ? typeof e == "string" ? e : l || "Invalid verification code" : null);
-      }
-      k?.(t);
-    }
-  }, [s, n, h, k, u, l]);
-  const F = (t, e) => {
-    e && !N(e) || b(t, e, !0);
-  }, V = (t, e) => {
-    if (i) return;
-    const r = s[t];
-    if (e.key === "Backspace") {
-      d.current = !0, r ? E(t) : t > 0 && (E(t - 1), c(t - 1)), setTimeout(() => {
-        d.current = !1;
-      }, 100), e.preventDefault();
-      return;
-    }
-    if (e.key === "Delete") {
-      d.current = !0, E(t), setTimeout(() => {
-        d.current = !1;
-      }, 100), e.preventDefault();
-      return;
-    }
-    const o = {
-      ArrowLeft: () => t > 0 && c(t - 1),
-      ArrowRight: () => t < n - 1 && c(t + 1),
-      Home: () => c(0),
-      End: () => c(n - 1)
-    };
-    if (o[e.key]) {
-      o[e.key](), e.preventDefault();
-      return;
-    }
-    N(e.key) && r && b(t, e.key, !0);
-  }, q = (t) => {
-    if (i) return;
-    t.preventDefault();
-    const r = t.clipboardData.getData("text/plain").trim().replace(/\D/g, "").slice(0, n);
-    if (r.length > 0) {
-      const o = [...s], x = f.current.findIndex((a) => a === document.activeElement), v = x >= 0 ? x : 0;
-      for (let a = 0; a < r.length && v + a < n; a++)
-        o[v + a] = r[a];
-      P(o);
-      const S = o.findIndex((a, U) => U >= v && a === ""), Q = S >= 0 ? S : Math.min(v + r.length, n - 1);
-      c(Q);
-    }
-  }, z = (t) => {
-    f.current[t]?.select();
-  }, G = () => {
-    if (L && !d.current) {
-      const t = s.join(""), e = C(t);
-      m(e);
+import e, { useEffect as d } from "react";
+import { delay as m } from "./index245.js";
+import { Icon as i } from "./index6.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
     }
-  }, I = K || !!g, D = I && (l || g), J = D ? B : void 0;
-  return /* @__PURE__ */ p.createElement("div", {
-    className: `se-design-otp-input ${H || ""}`,
-    "data-automation-id": "otp-input-container"
-  }, y && /* @__PURE__ */ p.createElement("div", {
-    id: R,
-    className: "se-design-otp-input-label"
-  }, y), /* @__PURE__ */ p.createElement("div", {
-    className: "flex items-center gap-[12px]",
-    role: "group",
-    "aria-labelledby": y ? R : void 0
-  }, s.map((t, e) => /* @__PURE__ */ p.createElement("input", {
-    key: e,
-    ref: (r) => {
-      f.current[e] = r;
-    },
-    type: "text",
-    inputMode: "numeric",
-    maxLength: 1,
-    value: t,
-    onChange: (r) => F(e, r.target.value),
-    onKeyDown: (r) => V(e, r),
-    onPaste: q,
-    onFocus: () => z(e),
-    onBlur: G,
-    disabled: i,
-    className: `
-              w-12 h-12 
-              flex flex-col items-start 
-              text-center text-lg font-medium
-              border rounded-md
-              outline-none
-              transition-colors
-              disabled:bg-gray-50 disabled:cursor-not-allowed
-              ${i ? "border-[var(--color-gray-300)] text-gray-400" : I ? "border-[var(--color-red-500)] text-gray-900 focus:border-[var(--color-red-500)] focus:ring-1 focus:ring-[var(--color-red-500)]" : "border-[var(--color-gray-600)] text-gray-900 focus:border-[var(--color-blue-500)] focus:ring-1 focus:ring-[var(--color-blue-500)]"}
-            `,
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: "p-4 text-base font-medium",
     style: {
-      gap: "var(--Spacer-6px, 6px)"
-    },
-    "aria-label": `OTP digit ${e + 1} of ${n}`,
-    "aria-invalid": I,
-    "aria-describedby": J,
-    "data-automation-id": `otp-input-${e}`
-  }))), D && /* @__PURE__ */ p.createElement("div", {
-    id: B,
-    className: "se-design-otp-input-error",
-    role: "alert"
-  }, D));
+      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 {
-  M as OTPInput
+  g as DownloadWidget
 };
 //# sourceMappingURL=index57.js.map

package/dist/index57.js.map

@@ -1 +1 @@
-{"version":3,"file":"index57.js","sources":["../src/components/OTPInput/index.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, KeyboardEvent, ChangeEvent, ClipboardEvent, FC } from 'react';\nimport { useStableId } from '../../utils/useStableId';\nimport './style.scss';\n\nexport interface OTPInputProps {\n  length?: number;\n  onChange?: (value: string) => void;\n  onComplete?: (value: string) => void;\n  label?: string;\n  disabled?: boolean;\n  className?: string;\n  autoFocus?: boolean;\n  error?: boolean;\n  errorMessage?: string;\n  validateOnBlur?: boolean;\n  onValidate?: (value: string) => boolean | string;\n  id?: string;\n}\n\nexport const OTPInput: FC<OTPInputProps> = ({\n  length = 6,\n  onChange,\n  onComplete,\n  label,\n  disabled = false,\n  className = '',\n  autoFocus = true,\n  error = false,\n  errorMessage,\n  validateOnBlur = false,\n  onValidate,\n  id\n}) => {\n  const [values, setValues] = useState<string[]>(Array(length).fill(''));\n  const [internalError, setInternalError] = useState<string | null>(null);\n  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);\n  const isBackspacePressed = useRef<boolean>(false);\n  \n  // Generate stable IDs for ARIA attributes\n  const baseId = useStableId(id, 'se-otp-input');\n  const labelId = `${baseId}-label`;\n  const errorId = `${baseId}-error`;\n\n  // Helper: Check if a string is a single digit\n  const isDigit = (char: string): boolean => /^\\d$/.test(char);\n\n  // Helper: Check if OTP is complete\n  const isComplete = (otpValue: string): boolean => {\n    return otpValue.length === length && values.every((val) => val !== '');\n  };\n\n  // Helper: Update value at specific index\n  const updateValue = (index: number, value: string, shouldFocusNext = false) => {\n    const newValues = [...values];\n    newValues[index] = value;\n    setValues(newValues);\n\n    if (shouldFocusNext && value && index < length - 1) {\n      focusInput(index + 1);\n    }\n  };\n\n  // Helper: Clear value at specific index\n  const clearValue = (index: number) => {\n    updateValue(index, '');\n  };\n\n  // Helper: Focus input at index\n  const focusInput = (index: number) => {\n    inputRefs.current[index]?.focus();\n  };\n\n  useEffect(() => {\n    if (autoFocus && inputRefs.current[0] && !disabled) {\n      focusInput(0);\n    }\n  }, [autoFocus, disabled]);\n\n  // Internal validation\n  const validateOTP = (otpValue: string): string | null => {\n    // Empty validation\n    if (otpValue.length === 0) {\n      return errorMessage || 'Please enter the verification code';\n    }\n\n    // Incomplete validation\n    if (otpValue.length < length || !isComplete(otpValue)) {\n      return errorMessage || 'Please enter all digits';\n    }\n\n    // Custom validation\n    if (onValidate) {\n      const validationResult = onValidate(otpValue);\n      if (validationResult === false) {\n        return errorMessage || 'Invalid verification code';\n      }\n      if (typeof validationResult === 'string') {\n        return validationResult;\n      }\n    }\n\n    return null;\n  };\n\n  useEffect(() => {\n    const otpValue = values.join('');\n    onChange?.(otpValue);\n\n    // Clear error when user starts typing\n    if (internalError && otpValue.length > 0) {\n      setInternalError(null);\n    }\n\n    if (isComplete(otpValue)) {\n      // Validate on complete\n      if (onValidate) {\n        const validationResult = onValidate(otpValue);\n        if (validationResult === false || typeof validationResult === 'string') {\n          const errorMsg =\n            typeof validationResult === 'string' ? validationResult : errorMessage || 'Invalid verification code';\n          setInternalError(errorMsg);\n        } else {\n          setInternalError(null);\n        }\n      }\n      onComplete?.(otpValue);\n    }\n  }, [values, length, onChange, onComplete, onValidate, errorMessage]);\n\n  const handleChange = (index: number, value: string) => {\n    // Only allow single digit or empty\n    if (value && !isDigit(value)) {\n      return;\n    }\n\n    updateValue(index, value, true);\n  };\n\n  const handleKeyDown = (index: number, e: KeyboardEvent<HTMLInputElement>) => {\n    if (disabled) return;\n\n    const currentValue = values[index];\n\n    // Handle backspace\n    if (e.key === 'Backspace') {\n      isBackspacePressed.current = true;\n      if (currentValue) {\n        clearValue(index);\n      } else if (index > 0) {\n        clearValue(index - 1);\n        focusInput(index - 1);\n      }\n      // Reset backspace flag after a short delay\n      setTimeout(() => {\n        isBackspacePressed.current = false;\n      }, 100);\n      e.preventDefault();\n      return;\n    }\n\n    // Handle delete\n    if (e.key === 'Delete') {\n      isBackspacePressed.current = true;\n      clearValue(index);\n      // Reset backspace flag after a short delay\n      setTimeout(() => {\n        isBackspacePressed.current = false;\n      }, 100);\n      e.preventDefault();\n      return;\n    }\n\n    // Handle navigation keys\n    const navigationHandlers: Record<string, () => void> = {\n      ArrowLeft: () => index > 0 && focusInput(index - 1),\n      ArrowRight: () => index < length - 1 && focusInput(index + 1),\n      Home: () => focusInput(0),\n      End: () => focusInput(length - 1)\n    };\n\n    if (navigationHandlers[e.key]) {\n      navigationHandlers[e.key]();\n      e.preventDefault();\n      return;\n    }\n\n    // Allow digits, but prevent if already filled\n    if (isDigit(e.key)) {\n      if (currentValue) {\n        updateValue(index, e.key, true);\n      }\n    }\n  };\n\n  const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {\n    if (disabled) return;\n\n    e.preventDefault();\n    const pastedData = e.clipboardData.getData('text/plain').trim();\n\n    // Extract only digits\n    const digits = pastedData.replace(/\\D/g, '').slice(0, length);\n\n    if (digits.length > 0) {\n      const newValues = [...values];\n\n      // Fill inputs starting from the current index\n      const startIndex = inputRefs.current.findIndex((ref) => ref === document.activeElement);\n      const actualStartIndex = startIndex >= 0 ? startIndex : 0;\n\n      for (let i = 0; i < digits.length && actualStartIndex + i < length; i++) {\n        newValues[actualStartIndex + i] = digits[i];\n      }\n\n      setValues(newValues);\n\n      // Focus the next empty input or the last input\n      const nextEmptyIndex = newValues.findIndex((val, idx) => idx >= actualStartIndex && val === '');\n      const focusIndex = nextEmptyIndex >= 0 ? nextEmptyIndex : Math.min(actualStartIndex + digits.length, length - 1);\n      focusInput(focusIndex);\n    }\n  };\n\n  const handleFocus = (index: number) => {\n    inputRefs.current[index]?.select();\n  };\n\n  const handleBlur = () => {\n    // Don't validate on blur if backspace/delete was just pressed\n    if (validateOnBlur && !isBackspacePressed.current) {\n      const otpValue = values.join('');\n      const validationError = validateOTP(otpValue);\n      setInternalError(validationError);\n    }\n  };\n\n  const hasError = error || !!internalError;\n  // Priority: errorMessage prop > internalError\n  const displayError = hasError && (errorMessage || internalError);\n  \n  const ariaDescribedByError = displayError ? errorId : undefined;\n\n  return (\n    <div className={`se-design-otp-input ${className || ''}`} data-automation-id=\"otp-input-container\">\n      {label && <div id={labelId} className=\"se-design-otp-input-label\">{label}</div>}\n      <div className=\"flex items-center gap-[12px]\" role=\"group\" aria-labelledby={label ? labelId : undefined}>\n        {values.map((value, index) => (\n          <input\n            key={index}\n            ref={(el) => {\n              inputRefs.current[index] = el;\n            }}\n            type=\"text\"\n            inputMode=\"numeric\"\n            maxLength={1}\n            value={value}\n            onChange={(e: ChangeEvent<HTMLInputElement>) => handleChange(index, e.target.value)}\n            onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => handleKeyDown(index, e)}\n            onPaste={handlePaste}\n            onFocus={() => handleFocus(index)}\n            onBlur={handleBlur}\n            disabled={disabled}\n            className={`\n              w-12 h-12 \n              flex flex-col items-start \n              text-center text-lg font-medium\n              border rounded-md\n              outline-none\n              transition-colors\n              disabled:bg-gray-50 disabled:cursor-not-allowed\n              ${\n                disabled\n                  ? 'border-[var(--color-gray-300)] text-gray-400'\n                  : hasError\n                  ? 'border-[var(--color-red-500)] text-gray-900 focus:border-[var(--color-red-500)] focus:ring-1 focus:ring-[var(--color-red-500)]'\n                  : 'border-[var(--color-gray-600)] text-gray-900 focus:border-[var(--color-blue-500)] focus:ring-1 focus:ring-[var(--color-blue-500)]'\n              }\n            `}\n            style={{\n              gap: 'var(--Spacer-6px, 6px)'\n            }}\n            aria-label={`OTP digit ${index + 1} of ${length}`}\n            aria-invalid={hasError}\n            aria-describedby={ariaDescribedByError}\n            data-automation-id={`otp-input-${index}`}\n          />\n        ))}\n      </div>\n      {displayError && <div id={errorId} className=\"se-design-otp-input-error\" role=\"alert\">{displayError}</div>}\n    </div>\n  );\n};\n"],"names":["OTPInput","length","onChange","onComplete","label","disabled","className","autoFocus","error","errorMessage","validateOnBlur","onValidate","id","values","setValues","useState","Array","fill","internalError","setInternalError","inputRefs","useRef","isBackspacePressed","baseId","useStableId","labelId","errorId","isDigit","char","test","isComplete","otpValue","every","val","updateValue","index","value","shouldFocusNext","newValues","focusInput","clearValue","current","focus","useEffect","validateOTP","validationResult","join","handleChange","handleKeyDown","e","currentValue","key","setTimeout","preventDefault","navigationHandlers","ArrowLeft","ArrowRight","Home","End","handlePaste","digits","clipboardData","getData","trim","replace","slice","startIndex","findIndex","ref","document","activeElement","actualStartIndex","i","nextEmptyIndex","idx","focusIndex","Math","min","handleFocus","select","handleBlur","validationError","hasError","displayError","ariaDescribedByError","undefined","React","createElement","role","map","el","type","inputMode","maxLength","target","onKeyDown","onPaste","onFocus","onBlur","style","gap"],"mappings":";;;AAmBO,MAAMA,IAA8BA,CAAC;AAAA,EAC1CC,QAAAA,IAAS;AAAA,EACTC,UAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,UAAAA,IAAW;AAAA,EACXC,WAAAA,IAAY;AAAA,EACZC,WAAAA,IAAY;AAAA,EACZC,OAAAA,IAAQ;AAAA,EACRC,cAAAA;AAAAA,EACAC,gBAAAA,IAAiB;AAAA,EACjBC,YAAAA;AAAAA,EACAC,IAAAA;AACF,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAmBC,MAAMf,CAAM,EAAEgB,KAAK,EAAE,CAAC,GAC/D,CAACC,GAAeC,CAAgB,IAAIJ,EAAwB,IAAI,GAChEK,IAAYC,EAAoC,EAAE,GAClDC,IAAqBD,EAAgB,EAAK,GAG1CE,IAASC,EAAYZ,GAAI,cAAc,GACvCa,IAAU,GAAGF,CAAM,UACnBG,IAAU,GAAGH,CAAM,UAGnBI,IAAUA,CAACC,MAA0B,OAAOC,KAAKD,CAAI,GAGrDE,IAAaA,CAACC,MACXA,EAAS9B,WAAWA,KAAUY,EAAOmB,MAAOC,CAAAA,MAAQA,MAAQ,EAAE,GAIjEC,IAAcA,CAACC,GAAeC,GAAeC,IAAkB,OAAU;AAC7E,UAAMC,IAAY,CAAC,GAAGzB,CAAM;AAC5ByB,IAAAA,EAAUH,CAAK,IAAIC,GACnBtB,EAAUwB,CAAS,GAEfD,KAAmBD,KAASD,IAAQlC,IAAS,KAC/CsC,EAAWJ,IAAQ,CAAC;AAAA,EAExB,GAGMK,IAAaA,CAACL,MAAkB;AACpCD,IAAAA,EAAYC,GAAO,EAAE;AAAA,EACvB,GAGMI,IAAaA,CAACJ,MAAkB;AACpCf,IAAAA,EAAUqB,QAAQN,CAAK,GAAGO,MAAAA;AAAAA,EAC5B;AAEAC,EAAAA,EAAU,MAAM;AACd,IAAIpC,KAAaa,EAAUqB,QAAQ,CAAC,KAAK,CAACpC,KACxCkC,EAAW,CAAC;AAAA,EAEhB,GAAG,CAAChC,GAAWF,CAAQ,CAAC;AAGxB,QAAMuC,IAAcA,CAACb,MAAoC;AAEvD,QAAIA,EAAS9B,WAAW;AACtB,aAAOQ,KAAgB;AAIzB,QAAIsB,EAAS9B,SAASA,KAAU,CAAC6B,EAAWC,CAAQ;AAClD,aAAOtB,KAAgB;AAIzB,QAAIE,GAAY;AACd,YAAMkC,IAAmBlC,EAAWoB,CAAQ;AAC5C,UAAIc,MAAqB;AACvB,eAAOpC,KAAgB;AAEzB,UAAI,OAAOoC,KAAqB;AAC9B,eAAOA;AAAAA,IAEX;AAEA,WAAO;AAAA,EACT;AAEAF,EAAAA,EAAU,MAAM;AACd,UAAMZ,IAAWlB,EAAOiC,KAAK,EAAE;AAQ/B,QAPA5C,IAAW6B,CAAQ,GAGfb,KAAiBa,EAAS9B,SAAS,KACrCkB,EAAiB,IAAI,GAGnBW,EAAWC,CAAQ,GAAG;AAExB,UAAIpB,GAAY;AACd,cAAMkC,IAAmBlC,EAAWoB,CAAQ;AAC5C,QAGEZ,EAHE0B,MAAqB,MAAS,OAAOA,KAAqB,WAE1D,OAAOA,KAAqB,WAAWA,IAAmBpC,KAAgB,8BAG3D,IAFQ;AAAA,MAI7B;AACAN,MAAAA,IAAa4B,CAAQ;AAAA,IACvB;AAAA,EACF,GAAG,CAAClB,GAAQZ,GAAQC,GAAUC,GAAYQ,GAAYF,CAAY,CAAC;AAEnE,QAAMsC,IAAeA,CAACZ,GAAeC,MAAkB;AAErD,IAAIA,KAAS,CAACT,EAAQS,CAAK,KAI3BF,EAAYC,GAAOC,GAAO,EAAI;AAAA,EAChC,GAEMY,IAAgBA,CAACb,GAAec,MAAuC;AAC3E,QAAI5C,EAAU;AAEd,UAAM6C,IAAerC,EAAOsB,CAAK;AAGjC,QAAIc,EAAEE,QAAQ,aAAa;AACzB7B,MAAAA,EAAmBmB,UAAU,IACzBS,IACFV,EAAWL,CAAK,IACPA,IAAQ,MACjBK,EAAWL,IAAQ,CAAC,GACpBI,EAAWJ,IAAQ,CAAC,IAGtBiB,WAAW,MAAM;AACf9B,QAAAA,EAAmBmB,UAAU;AAAA,MAC/B,GAAG,GAAG,GACNQ,EAAEI,eAAAA;AACF;AAAA,IACF;AAGA,QAAIJ,EAAEE,QAAQ,UAAU;AACtB7B,MAAAA,EAAmBmB,UAAU,IAC7BD,EAAWL,CAAK,GAEhBiB,WAAW,MAAM;AACf9B,QAAAA,EAAmBmB,UAAU;AAAA,MAC/B,GAAG,GAAG,GACNQ,EAAEI,eAAAA;AACF;AAAA,IACF;AAGA,UAAMC,IAAiD;AAAA,MACrDC,WAAWA,MAAMpB,IAAQ,KAAKI,EAAWJ,IAAQ,CAAC;AAAA,MAClDqB,YAAYA,MAAMrB,IAAQlC,IAAS,KAAKsC,EAAWJ,IAAQ,CAAC;AAAA,MAC5DsB,MAAMA,MAAMlB,EAAW,CAAC;AAAA,MACxBmB,KAAKA,MAAMnB,EAAWtC,IAAS,CAAC;AAAA,IAAA;AAGlC,QAAIqD,EAAmBL,EAAEE,GAAG,GAAG;AAC7BG,MAAAA,EAAmBL,EAAEE,GAAG,EAAA,GACxBF,EAAEI,eAAAA;AACF;AAAA,IACF;AAGA,IAAI1B,EAAQsB,EAAEE,GAAG,KACXD,KACFhB,EAAYC,GAAOc,EAAEE,KAAK,EAAI;AAAA,EAGpC,GAEMQ,IAAcA,CAACV,MAAwC;AAC3D,QAAI5C,EAAU;AAEd4C,IAAAA,EAAEI,eAAAA;AAIF,UAAMO,IAHaX,EAAEY,cAAcC,QAAQ,YAAY,EAAEC,KAAAA,EAG/BC,QAAQ,OAAO,EAAE,EAAEC,MAAM,GAAGhE,CAAM;AAE5D,QAAI2D,EAAO3D,SAAS,GAAG;AACrB,YAAMqC,IAAY,CAAC,GAAGzB,CAAM,GAGtBqD,IAAa9C,EAAUqB,QAAQ0B,UAAWC,CAAAA,MAAQA,MAAQC,SAASC,aAAa,GAChFC,IAAmBL,KAAc,IAAIA,IAAa;AAExD,eAASM,IAAI,GAAGA,IAAIZ,EAAO3D,UAAUsE,IAAmBC,IAAIvE,GAAQuE;AAClElC,QAAAA,EAAUiC,IAAmBC,CAAC,IAAIZ,EAAOY,CAAC;AAG5C1D,MAAAA,EAAUwB,CAAS;AAGnB,YAAMmC,IAAiBnC,EAAU6B,UAAU,CAAClC,GAAKyC,MAAQA,KAAOH,KAAoBtC,MAAQ,EAAE,GACxF0C,IAAaF,KAAkB,IAAIA,IAAiBG,KAAKC,IAAIN,IAAmBX,EAAO3D,QAAQA,IAAS,CAAC;AAC/GsC,MAAAA,EAAWoC,CAAU;AAAA,IACvB;AAAA,EACF,GAEMG,IAAcA,CAAC3C,MAAkB;AACrCf,IAAAA,EAAUqB,QAAQN,CAAK,GAAG4C,OAAAA;AAAAA,EAC5B,GAEMC,IAAaA,MAAM;AAEvB,QAAItE,KAAkB,CAACY,EAAmBmB,SAAS;AACjD,YAAMV,IAAWlB,EAAOiC,KAAK,EAAE,GACzBmC,IAAkBrC,EAAYb,CAAQ;AAC5CZ,MAAAA,EAAiB8D,CAAe;AAAA,IAClC;AAAA,EACF,GAEMC,IAAW1E,KAAS,CAAC,CAACU,GAEtBiE,IAAeD,MAAazE,KAAgBS,IAE5CkE,IAAuBD,IAAezD,IAAU2D;AAEtD,SACEC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKjF,WAAW,uBAAuBA,KAAa,EAAE;AAAA,IAAI,sBAAmB;AAAA,EAAA,GAC1EF,KAASkF,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAK3E,IAAIa;AAAAA,IAASnB,WAAU;AAAA,EAAA,GAA6BF,CAAW,GAC9EkF,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKjF,WAAU;AAAA,IAA+BkF,MAAK;AAAA,IAAQ,mBAAiBpF,IAAQqB,IAAU4D;AAAAA,EAAAA,GAC3FxE,EAAO4E,IAAI,CAACrD,GAAOD,MAClBmD,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACEpC,KAAKhB;AAAAA,IACLiC,KAAMsB,CAAAA,MAAO;AACXtE,MAAAA,EAAUqB,QAAQN,CAAK,IAAIuD;AAAAA,IAC7B;AAAA,IACAC,MAAK;AAAA,IACLC,WAAU;AAAA,IACVC,WAAW;AAAA,IACXzD,OAAAA;AAAAA,IACAlC,UAAUA,CAAC+C,MAAqCF,EAAaZ,GAAOc,EAAE6C,OAAO1D,KAAK;AAAA,IAClF2D,WAAWA,CAAC9C,MAAuCD,EAAcb,GAAOc,CAAC;AAAA,IACzE+C,SAASrC;AAAAA,IACTsC,SAASA,MAAMnB,EAAY3C,CAAK;AAAA,IAChC+D,QAAQlB;AAAAA,IACR3E,UAAAA;AAAAA,IACAC,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBASPD,IACI,iDACA6E,IACA,mIACA,mIAAmI;AAAA;AAAA,IAG3IiB,OAAO;AAAA,MACLC,KAAK;AAAA,IAAA;AAAA,IAEP,cAAY,aAAajE,IAAQ,CAAC,OAAOlC,CAAM;AAAA,IAC/C,gBAAciF;AAAAA,IACd,oBAAkBE;AAAAA,IAClB,sBAAoB,aAAajD,CAAK;AAAA,EAAA,CACvC,CACF,CACE,GACJgD,KAAgBG,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAK3E,IAAIc;AAAAA,IAASpB,WAAU;AAAA,IAA4BkF,MAAK;AAAA,EAAA,GAASL,CAAkB,CACtG;AAET;"}
+{"version":3,"file":"index57.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/index58.js

@@ -1,36 +1,41 @@
-import e from "react";
-import { Icon as c } from "./index6.js";
-const i = ({
-  className: a = "",
-  message: t = "",
-  backgroundColor: l = "var(--color-yellow-50)",
-  textColor: r = "var(--color-yellow-800)",
-  borderColor: o = "var(--color-yellow-200)",
-  actionJSX: n = () => /* @__PURE__ */ e.createElement(e.Fragment, null)
-}) => /* @__PURE__ */ e.createElement("div", {
-  className: `se-design-info-bar ${a} px-3 py-2 border rounded-[6px]`,
-  style: {
-    backgroundColor: l,
-    borderColor: o,
-    color: r
-  }
-}, /* @__PURE__ */ e.createElement("div", {
-  className: "info-bar-message flex items-center gap-2"
-}, /* @__PURE__ */ e.createElement("div", {
-  style: {
-    transform: "rotate(180deg)"
-  }
-}, /* @__PURE__ */ e.createElement(c, {
-  name: "info",
-  stroke: r
-})), /* @__PURE__ */ e.createElement("span", {
-  style: {
-    color: r
-  }
-}, t)), /* @__PURE__ */ e.createElement("div", {
-  className: "info-bar-action ml-[22px]"
-}, n()));
+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))));
+};
 export {
-  i as InfoBar
+  u as RadioSwitch
 };
 //# sourceMappingURL=index58.js.map

package/dist/index58.js.map

@@ -1 +1 @@
-{"version":3,"file":"index58.js","sources":["../src/components/InfoBar/index.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { Icon } from \"../Icon\";\n\nexport interface InfoBarProps {\n  className?: string;\n  message: string;\n  backgroundColor?: string;\n  textColor?: string;\n  borderColor?: string;\n  actionJSX?: () => React.ReactNode;\n}\n\nexport const InfoBar: FC<InfoBarProps> = ({\n  className = \"\",\n  message = \"\",\n  backgroundColor = 'var(--color-yellow-50)',\n  textColor = 'var(--color-yellow-800)',\n  borderColor = 'var(--color-yellow-200)',\n  actionJSX = () => <></>\n}) => {\n\n  return (\n    <div\n      className={`se-design-info-bar ${className} px-3 py-2 border rounded-[6px]`}\n      style={{ backgroundColor, borderColor, color: textColor }}\n    >\n      <div className={`info-bar-message flex items-center gap-2`}>\n        <div style={{ transform: 'rotate(180deg)' }}><Icon name=\"info\" stroke={textColor} /></div>\n        <span style={{ color: textColor }}>{message}</span>\n      </div>\n      <div className={`info-bar-action ml-[22px]`}>\n        {actionJSX()}\n      </div>\n    </div>\n  );\n};"],"names":["InfoBar","className","message","backgroundColor","textColor","borderColor","actionJSX","React","createElement","Fragment","style","color","transform","Icon","name","stroke"],"mappings":";;AAYO,MAAMA,IAA4BA,CAAC;AAAA,EACxCC,WAAAA,IAAY;AAAA,EACZC,SAAAA,IAAU;AAAA,EACVC,iBAAAA,IAAkB;AAAA,EAClBC,WAAAA,IAAY;AAAA,EACZC,aAAAA,IAAc;AAAA,EACdC,WAAAA,IAAYA,MAAMC,gBAAAA,EAAAC,cAAAD,EAAAE,UAAA,IAAI;AACxB,MAGIF,gBAAAA,EAAAC,cAAA,OAAA;AAAA,EACEP,WAAW,sBAAsBA,CAAS;AAAA,EAC1CS,OAAO;AAAA,IAAEP,iBAAAA;AAAAA,IAAiBE,aAAAA;AAAAA,IAAaM,OAAOP;AAAAA,EAAAA;AAAU,GAExDG,gBAAAA,EAAAC,cAAA,OAAA;AAAA,EAAKP,WAAW;AAAA,GACdM,gBAAAA,EAAAC,cAAA,OAAA;AAAA,EAAKE,OAAO;AAAA,IAAEE,WAAW;AAAA,EAAA;AAAiB,GAAGL,gBAAAA,EAAAC,cAACK,GAAI;AAAA,EAACC,MAAK;AAAA,EAAOC,QAAQX;AAAAA,CAAY,CAAM,GACzFG,gBAAAA,EAAAC,cAAA,QAAA;AAAA,EAAME,OAAO;AAAA,IAAEC,OAAOP;AAAAA,EAAAA;AAAU,GAAIF,CAAc,CAC/C,GACLK,gBAAAA,EAAAC,cAAA,OAAA;AAAA,EAAKP,WAAW;AAAA,GACbK,EAAAA,CACE,CACF;"}
+{"version":3,"file":"index58.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;"}

package/dist/index59.js

@@ -1,89 +1,95 @@
-import e, { useRef as S, useState as f } from "react";
-import { CustomModal as T } from "./index13.js";
-import { Icon as v } from "./index6.js";
+import a from "react";
 /* empty css         */
-const C = ({
-  children: c = null,
-  title: n = "",
-  onClose: s = () => {
-  },
-  showCloseIcon: l = !1,
-  showBackButton: a = !1,
-  onBack: m = () => {
-  },
-  className: i = "",
-  automationId: r = "",
-  minHeight: u = "auto"
+const n = ({
+  element: e,
+  animationDuration: d,
+  baseColor: s,
+  highlightColor: m
 }) => {
-  const t = S(null), [g, p] = f(0), [E, h] = f(0), [b, Y] = f(!1), k = (o) => {
-    p(o.touches[0].clientY), h(o.touches[0].clientY), Y(!0);
-  }, N = (o) => {
-    if (!b) return;
-    const d = o.touches[0].clientY, x = d - g;
-    x > 0 && (h(d), t.current && (t.current.style.transform = `translateY(${x}px)`));
-  }, y = () => {
-    if (!b) return;
-    E - g > 60 ? s() : t.current && (t.current.style.transform = "translateY(0)"), Y(!1), p(0), h(0);
-  };
-  return /* @__PURE__ */ e.createElement("div", {
-    ref: t,
-    className: `se-design-bottom-sheet relative h-max max-h-[98vh] rounded-t-2xl flex flex-col pt-5 ${i}`,
-    onClick: (o) => o.stopPropagation(),
-    onTouchStart: k,
-    onTouchMove: N,
-    onTouchEnd: y,
-    "data-automation-id": r,
-    style: {
-      minHeight: u
-    }
-  }, (n || a) && /* @__PURE__ */ e.createElement("div", {
-    className: "se-design-bottom-sheet-header flex items-center justify-left gap-3 mr-6 px-4"
-  }, a && /* @__PURE__ */ e.createElement(v, {
-    name: "back",
-    stroke: "var(--color-gray-700)",
-    onClick: m,
-    className: "se-design-bottom-sheet-back-icon cursor-pointer",
-    automationId: `${r}-back-icon`
-  }), n && /* @__PURE__ */ e.createElement("div", {
-    className: "se-design-bottom-sheet-title text-lg font-semibold"
-  }, n)), l && /* @__PURE__ */ e.createElement(v, {
-    name: "close",
-    onClick: s,
-    className: "se-design-bottom-sheet-close-icon absolute top-6 right-4 cursor-pointer z-10",
-    automationId: `${r}-close-icon`
-  }), /* @__PURE__ */ e.createElement("div", {
-    className: "se-design-bottom-sheet-content px-4 pb-5 flex-1 min-h-0 overflow-y-auto"
-  }, c));
-}, I = ({
-  isOpen: c = !1,
-  title: n = "",
-  onClose: s = () => {
-  },
-  children: l = null,
-  showCloseIcon: a = !0,
-  showBackButton: m = !1,
-  onBack: i = () => {
-  },
-  className: r = "",
-  automationId: u = "bottomsheet",
-  minHeight: t = ""
-}) => /* @__PURE__ */ e.createElement(T, {
-  isOpen: c,
-  onClose: s,
-  onModalClick: s,
-  className: "custom-bottom-sheet",
-  renderModalContent: () => /* @__PURE__ */ e.createElement(C, {
-    title: n,
-    onClose: s,
-    showCloseIcon: a,
-    showBackButton: m,
-    onBack: i,
+  const i = {
+    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": `${d}s`,
+    "--shimmer-base-color": s,
+    "--shimmer-highlight-color": m
+  }, r = `se-design-shimmer-element se-design-shimmer-${e.type}`;
+  return /* @__PURE__ */ a.createElement("div", {
     className: r,
-    automationId: u,
-    minHeight: t
-  }, l)
-});
+    style: i
+  }, e.children && e.children.map((t, p) => /* @__PURE__ */ a.createElement(n, {
+    key: p,
+    element: t,
+    animationDuration: d,
+    baseColor: s,
+    highlightColor: m
+  })));
+}, y = ({
+  container: e,
+  animationDuration: d,
+  baseColor: s,
+  highlightColor: m
+}) => {
+  const i = {
+    display: "flex",
+    flexDirection: e.direction || "column",
+    gap: typeof e.gap == "number" ? `${e.gap}px` : e.gap,
+    padding: e.padding,
+    margin: e.margin,
+    alignItems: e.alignItems,
+    flex: e.flex
+  };
+  return /* @__PURE__ */ a.createElement("div", {
+    className: `se-design-shimmer-container ${e.className || ""}`,
+    style: i
+  }, e.children.map((r, t) => r.type === "container" ? /* @__PURE__ */ a.createElement(y, {
+    key: t,
+    container: r,
+    animationDuration: d,
+    baseColor: s,
+    highlightColor: m
+  }) : /* @__PURE__ */ a.createElement(n, {
+    key: t,
+    element: r,
+    animationDuration: d,
+    baseColor: s,
+    highlightColor: m
+  })));
+}, g = ({
+  structure: e,
+  className: d = "",
+  animationDuration: s = 3,
+  baseColor: m = "var(--color-gray-600)",
+  highlightColor: i = "var(--color-gray-500)",
+  width: r,
+  height: t
+}) => {
+  const p = {
+    width: r ? typeof r == "number" ? `${r}px` : r : "100%",
+    height: t ? typeof t == "number" ? `${t}px` : t : "auto",
+    "--shimmer-duration": `${s}s`,
+    "--shimmer-base-color": m,
+    "--shimmer-highlight-color": i
+  };
+  return /* @__PURE__ */ a.createElement("div", {
+    className: `se-design-shimmer-loader ${d}`,
+    style: p
+  }, e.map((c, o) => c.type === "container" ? /* @__PURE__ */ a.createElement(y, {
+    key: o,
+    container: c,
+    animationDuration: s,
+    baseColor: m,
+    highlightColor: i
+  }) : /* @__PURE__ */ a.createElement(n, {
+    key: o,
+    element: c,
+    animationDuration: s,
+    baseColor: m,
+    highlightColor: i
+  })));
+};
 export {
-  I as BottomSheet
+  g as ShimmerLoader
 };
 //# sourceMappingURL=index59.js.map

package/dist/index59.js.map

@@ -1 +1 @@
-{"version":3,"file":"index59.js","sources":["../src/components/BottomSheet/index.tsx"],"sourcesContent":["import React, { FC, useState, useRef } from 'react';\nimport { CustomModal } from '../CustomModal';\nimport { Icon } from '../Icon';\n\nimport './style.scss';\n\nexport interface BottomSheetProps {\n  isOpen: boolean;\n  title?: string;\n  onClose: () => void;\n  showCloseIcon?: boolean;\n  showBackButton?: boolean;\n  onBack?: () => void;\n  children: React.ReactNode;\n  className?: string;\n  automationId?: string;\n  minHeight?: string;\n}\n\ninterface BottomSheetContentProps {\n  title?: string;\n  onClose: () => void;\n  showCloseIcon?: boolean;\n  showBackButton?: boolean;\n  onBack?: () => void;\n  children: React.ReactNode;\n  className?: string;\n  automationId?: string;\n  minHeight?: string;\n}\n\nconst BottomSheetContent: FC<BottomSheetContentProps> = ({\n  children = null,\n  title = '',\n  onClose = () => {},\n  showCloseIcon = false,\n  showBackButton = false,\n  onBack = () => {},\n  className = '',\n  automationId = '',\n  minHeight = 'auto'\n}) => {\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [startY, setStartY] = useState<number>(0);\n  const [currentY, setCurrentY] = useState<number>(0);\n  const [isDragging, setIsDragging] = useState<boolean>(false);\n\n  const handleTouchStart = (e: React.TouchEvent) => {\n    setStartY(e.touches[0].clientY);\n    setCurrentY(e.touches[0].clientY);\n    setIsDragging(true);\n  };\n\n  const handleTouchMove = (e: React.TouchEvent) => {\n    if (!isDragging) return;\n\n    const touchY = e.touches[0].clientY;\n    const deltaY = touchY - startY;\n\n    // Only allow dragging down\n    if (deltaY > 0) {\n      setCurrentY(touchY);\n      if (contentRef.current) {\n        contentRef.current.style.transform = `translateY(${deltaY}px)`;\n      }\n    }\n  };\n\n  const handleTouchEnd = () => {\n    if (!isDragging) return;\n\n    const deltaY = currentY - startY;\n    const threshold = 60; // pixels to swipe down to trigger close\n\n    if (deltaY > threshold) {\n      // Trigger close\n      onClose();\n    } else {\n      // Reset position\n      if (contentRef.current) {\n        contentRef.current.style.transform = 'translateY(0)';\n      }\n    }\n\n    setIsDragging(false);\n    setStartY(0);\n    setCurrentY(0);\n  };\n\n  return (\n    <div\n      ref={contentRef}\n      className={`se-design-bottom-sheet relative h-max max-h-[98vh] rounded-t-2xl flex flex-col pt-5 ${className}`}\n      onClick={(e) => e.stopPropagation()}\n      onTouchStart={handleTouchStart}\n      onTouchMove={handleTouchMove}\n      onTouchEnd={handleTouchEnd}\n      data-automation-id={automationId}\n      style={{ minHeight }}\n    >\n      {(title || showBackButton) && (\n        <div className=\"se-design-bottom-sheet-header flex items-center justify-left gap-3 mr-6 px-4\">\n          {showBackButton && (\n            <Icon\n              name=\"back\"\n              stroke=\"var(--color-gray-700)\"\n              onClick={onBack}\n              className=\"se-design-bottom-sheet-back-icon cursor-pointer\"\n              automationId={`${automationId}-back-icon`}\n            />\n          )}\n          {title && <div className=\"se-design-bottom-sheet-title text-lg font-semibold\">{title}</div>}\n        </div>\n      )}\n      {showCloseIcon && (\n        <Icon\n          name=\"close\"\n          onClick={onClose}\n          className=\"se-design-bottom-sheet-close-icon absolute top-6 right-4 cursor-pointer z-10\"\n          automationId={`${automationId}-close-icon`}\n        />\n      )}\n      <div className=\"se-design-bottom-sheet-content px-4 pb-5 flex-1 min-h-0 overflow-y-auto\">{children}</div>\n    </div>\n  );\n};\n\nexport const BottomSheet: FC<BottomSheetProps> = ({\n  isOpen = false,\n  title = '',\n  onClose = () => {},\n  children = null,\n  showCloseIcon = true,\n  showBackButton = false,\n  onBack = () => {},\n  className = '',\n  automationId = 'bottomsheet',\n  minHeight = ''\n}) => {\n  return (\n    <CustomModal\n      isOpen={isOpen}\n      onClose={onClose}\n      onModalClick={onClose}\n      className=\"custom-bottom-sheet\"\n      renderModalContent={() => (\n        <BottomSheetContent\n          title={title}\n          onClose={onClose}\n          showCloseIcon={showCloseIcon}\n          showBackButton={showBackButton}\n          onBack={onBack}\n          className={className}\n          automationId={automationId}\n          minHeight={minHeight}\n        >\n          {children}\n        </BottomSheetContent>\n      )}\n    />\n  );\n};\n"],"names":["BottomSheetContent","children","title","onClose","showCloseIcon","showBackButton","onBack","className","automationId","minHeight","contentRef","useRef","startY","setStartY","useState","currentY","setCurrentY","isDragging","setIsDragging","handleTouchStart","e","touches","clientY","handleTouchMove","touchY","deltaY","current","style","transform","handleTouchEnd","React","createElement","ref","onClick","stopPropagation","onTouchStart","onTouchMove","onTouchEnd","Icon","name","stroke","BottomSheet","isOpen","CustomModal","onModalClick","renderModalContent"],"mappings":"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"}
+{"version":3,"file":"index59.js","sources":["../src/components/ShimmerLoader/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport './style.scss';\n\nexport interface ShimmerElement {\n  type: 'text' | 'rect' | 'rect-sm' | '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  alignItems?: string;\n  flex?: number | string;\n  className?: string;\n  children: (ShimmerElement | ShimmerContainer)[];\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    alignItems: container.alignItems,\n    flex: container.flex\n  };\n\n  return (\n    <div className={`se-design-shimmer-container ${container.className || ''}`} style={style}>\n      {container.children.map((element, index) =>\n        element.type === 'container' ? (\n          <ShimmerContainerComponent\n            key={index}\n            container={element}\n            animationDuration={animationDuration}\n            baseColor={baseColor}\n            highlightColor={highlightColor}\n          />\n        ) : (\n          <ShimmerElementComponent\n            key={index}\n            element={element}\n            animationDuration={animationDuration}\n            baseColor={baseColor}\n            highlightColor={highlightColor}\n          />\n        )\n      )}\n    </div>\n  );\n};\n\nexport const ShimmerLoader: FC<ShimmerLoaderProps> = ({\n  structure,\n  className = '',\n  animationDuration = 3,\n  baseColor = 'var(--color-gray-600)',\n  highlightColor = 'var(--color-gray-500)',\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","alignItems","flex","ShimmerLoader","structure","containerStyle","item"],"mappings":"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"}