se-design 1.0.90-dev.0 → 1.0.91-r-dev.1

package/dist/index59.js

@@ -1,89 +1,41 @@
-import e, { useRef as S, useState as f } from "react";
-import { CustomModal as T } from "./index13.js";
-import { Icon as v } from "./index6.js";
-/* 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"
+import a from "react";
+const u = ({
+  checkedRadioOption: t,
+  optionList: r,
+  onChange: l,
+  switchWidth: c,
+  automationId: i = ""
 }) => {
-  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);
+  const s = (e) => {
+    l && l(e);
   };
-  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,
+  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: {
-      minHeight: u
+      width: c
+      // Moved min-w-[100px] and h-[34px] to Tailwind classes below, so these inline styles are no longer needed.
     }
-  }, (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,
-    className: r,
-    automationId: u,
-    minHeight: t
-  }, l)
-});
+  }, 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 BottomSheet
+  u as RadioSwitch
 };
 //# 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/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/index6.js

@@ -1,129 +1,129 @@
-import L from "./index83.js";
-import R from "./index84.js";
-import F from "./index85.js";
-import B from "./index86.js";
-import D from "./index87.js";
-import M from "./index88.js";
-import q from "./index89.js";
-import G from "./index90.js";
-import V from "./index91.js";
-import H from "./index92.js";
-import J from "./index93.js";
-import K from "./index94.js";
-import Q from "./index95.js";
-import U from "./index96.js";
-import W from "./index97.js";
-import X from "./index98.js";
-import Y from "./index99.js";
-import Z from "./index100.js";
-import z from "./index101.js";
-import ss from "./index102.js";
-import os from "./index103.js";
-import _s from "./index104.js";
-import ts from "./index105.js";
-import is from "./index106.js";
-import rs from "./index107.js";
-import es from "./index108.js";
-import cs from "./index109.js";
-import as from "./index110.js";
-import ms from "./index111.js";
-import gs from "./index112.js";
-import vs from "./index113.js";
-import ns from "./index114.js";
-import ls from "./index115.js";
-import fs from "./index116.js";
-import bs from "./index117.js";
-import ps from "./index118.js";
-import ds from "./index119.js";
-import us from "./index120.js";
-import hs from "./index121.js";
-import ks from "./index122.js";
-import xs from "./index123.js";
-import As from "./index124.js";
-import Is from "./index125.js";
-import ws from "./index126.js";
-import ys from "./index127.js";
-import Ps from "./index128.js";
-import Ns from "./index129.js";
-import Cs from "./index130.js";
-import Os from "./index131.js";
-import $s from "./index132.js";
-import Es from "./index133.js";
-import Ss from "./index134.js";
-import Ts from "./index135.js";
-import js from "./index136.js";
-import Ls from "./index137.js";
-import Rs from "./index138.js";
-import Fs from "./index139.js";
-import Bs from "./index140.js";
-import Ds from "./index141.js";
-import Ms from "./index142.js";
-import qs from "./index143.js";
-import Gs from "./index144.js";
-import Vs from "./index145.js";
-import Hs from "./index146.js";
-import Js from "./index147.js";
-import Ks from "./index148.js";
-import Qs from "./index149.js";
-import Us from "./index150.js";
-import Ws from "./index151.js";
-import Xs from "./index152.js";
-import Ys from "./index153.js";
-import Zs from "./index154.js";
-import zs from "./index155.js";
-import so from "./index156.js";
-import oo from "./index157.js";
-import _o from "./index158.js";
-import to from "./index159.js";
-import io from "./index160.js";
-import ro from "./index161.js";
-import eo from "./index162.js";
-import co from "./index163.js";
-import ao from "./index164.js";
-import mo from "./index165.js";
-import go from "./index166.js";
-import vo from "./index167.js";
-import no from "./index168.js";
-import lo from "./index169.js";
-import fo from "./index170.js";
-import bo from "./index171.js";
-import po from "./index172.js";
-import uo from "./index173.js";
-import ho from "./index174.js";
-import ko from "./index175.js";
-import xo from "./index176.js";
-import Ao from "./index177.js";
-import Io from "./index178.js";
-import wo from "./index179.js";
-import yo from "./index180.js";
-import Po from "./index181.js";
-import No from "./index182.js";
-import Co from "./index183.js";
-import Oo from "./index184.js";
-import $o from "./index185.js";
-import Eo from "./index186.js";
-import So from "./index187.js";
-import To from "./index188.js";
-import jo from "./index189.js";
-import Lo from "./index190.js";
-import Ro from "./index191.js";
-import Fo from "./index192.js";
-import Bo from "./index193.js";
-import Do from "./index194.js";
-import Mo from "./index195.js";
-import qo from "./index196.js";
-import Go from "./index197.js";
-import Vo from "./index198.js";
-import Ho from "./index199.js";
-import Jo from "./index200.js";
-import Ko from "./index201.js";
-import Qo from "./index202.js";
-import Uo from "./index203.js";
+import L from "./index88.js";
+import R from "./index89.js";
+import F from "./index90.js";
+import B from "./index91.js";
+import D from "./index92.js";
+import M from "./index93.js";
+import q from "./index94.js";
+import G from "./index95.js";
+import V from "./index96.js";
+import H from "./index97.js";
+import J from "./index98.js";
+import K from "./index99.js";
+import Q from "./index100.js";
+import U from "./index101.js";
+import W from "./index102.js";
+import X from "./index103.js";
+import Y from "./index104.js";
+import Z from "./index105.js";
+import z from "./index106.js";
+import ss from "./index107.js";
+import os from "./index108.js";
+import _s from "./index109.js";
+import ts from "./index110.js";
+import is from "./index111.js";
+import rs from "./index112.js";
+import es from "./index113.js";
+import cs from "./index114.js";
+import as from "./index115.js";
+import ms from "./index116.js";
+import gs from "./index117.js";
+import vs from "./index118.js";
+import ns from "./index119.js";
+import ls from "./index120.js";
+import fs from "./index121.js";
+import bs from "./index122.js";
+import ps from "./index123.js";
+import ds from "./index124.js";
+import us from "./index125.js";
+import hs from "./index126.js";
+import ks from "./index127.js";
+import xs from "./index128.js";
+import As from "./index129.js";
+import Is from "./index130.js";
+import ws from "./index131.js";
+import ys from "./index132.js";
+import Ps from "./index133.js";
+import Ns from "./index134.js";
+import Cs from "./index135.js";
+import Os from "./index136.js";
+import $s from "./index137.js";
+import Es from "./index138.js";
+import Ss from "./index139.js";
+import Ts from "./index140.js";
+import js from "./index141.js";
+import Ls from "./index142.js";
+import Rs from "./index143.js";
+import Fs from "./index144.js";
+import Bs from "./index145.js";
+import Ds from "./index146.js";
+import Ms from "./index147.js";
+import qs from "./index148.js";
+import Gs from "./index149.js";
+import Vs from "./index150.js";
+import Hs from "./index151.js";
+import Js from "./index152.js";
+import Ks from "./index153.js";
+import Qs from "./index154.js";
+import Us from "./index155.js";
+import Ws from "./index156.js";
+import Xs from "./index157.js";
+import Ys from "./index158.js";
+import Zs from "./index159.js";
+import zs from "./index160.js";
+import so from "./index161.js";
+import oo from "./index162.js";
+import _o from "./index163.js";
+import to from "./index164.js";
+import io from "./index165.js";
+import ro from "./index166.js";
+import eo from "./index167.js";
+import co from "./index168.js";
+import ao from "./index169.js";
+import mo from "./index170.js";
+import go from "./index171.js";
+import vo from "./index172.js";
+import no from "./index173.js";
+import lo from "./index174.js";
+import fo from "./index175.js";
+import bo from "./index176.js";
+import po from "./index177.js";
+import uo from "./index178.js";
+import ho from "./index179.js";
+import ko from "./index180.js";
+import xo from "./index181.js";
+import Ao from "./index182.js";
+import Io from "./index183.js";
+import wo from "./index184.js";
+import yo from "./index185.js";
+import Po from "./index186.js";
+import No from "./index187.js";
+import Co from "./index188.js";
+import Oo from "./index189.js";
+import $o from "./index190.js";
+import Eo from "./index191.js";
+import So from "./index192.js";
+import To from "./index193.js";
+import jo from "./index194.js";
+import Lo from "./index195.js";
+import Ro from "./index196.js";
+import Fo from "./index197.js";
+import Bo from "./index198.js";
+import Do from "./index199.js";
+import Mo from "./index200.js";
+import qo from "./index201.js";
+import Go from "./index202.js";
+import Vo from "./index203.js";
+import Ho from "./index204.js";
+import Jo from "./index205.js";
+import Ko from "./index206.js";
+import Qo from "./index207.js";
+import Uo from "./index208.js";
 import a from "react";
-import { ReactSVG as Wo } from "./index204.js";
-import { getA11yNameAttributes as Xo } from "./index81.js";
-import { useAccessiblePress as Yo } from "./index67.js";
-import "./index72.js";
+import { ReactSVG as Wo } from "./index209.js";
+import { getA11yNameAttributes as Xo } from "./index86.js";
+import { useAccessiblePress as Yo } from "./index72.js";
+import "./index77.js";
 function m() {
   return m = Object.assign ? Object.assign.bind() : function(s) {
     for (var t = 1; t < arguments.length; t++) {

package/dist/index60.js

@@ -1,122 +1,96 @@
-import e, { useState as p, useRef as g, useEffect as I } from "react";
-import { Button as x } from "./index4.js";
-const n = 40, f = 7, y = 3, T = Array.from({
-  length: 12
-}, (r, o) => String(o + 1).padStart(2, "0")), w = Array.from({
-  length: 60
-}, (r, o) => String(o).padStart(2, "0")), M = ["AM", "PM"], h = ({
-  items: r,
-  selectedIndex: o,
-  onSelect: d,
-  automationId: u = ""
+import t from "react";
+/* empty css         */
+const n = ({
+  element: e,
+  animationDuration: d,
+  baseColor: s,
+  highlightColor: m
 }) => {
-  const l = g(null), s = g(null);
-  I(() => {
-    l.current && l.current.scrollTo({
-      top: o * n,
-      behavior: "smooth"
-    });
-  }, [o]);
-  const a = () => {
-    l.current && (s.current && clearTimeout(s.current), s.current = setTimeout(() => {
-      const t = l.current;
-      if (!t) return;
-      const c = Math.round(t.scrollTop / n), m = Math.max(0, Math.min(r.length - 1, c));
-      t.scrollTo({
-        top: m * n,
-        behavior: "smooth"
-      }), m !== o && d(m);
-    }, 100));
-  }, i = (t) => {
-    d(t), l.current?.scrollTo({
-      top: t * n,
-      behavior: "smooth"
-    });
+  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__ */ t.createElement("div", {
+    className: r,
+    style: i
+  }, e.children && e.children.map((a, p) => /* @__PURE__ */ t.createElement(n, {
+    key: p,
+    element: a,
+    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__ */ e.createElement("div", {
-    className: "w-14"
-  }, /* @__PURE__ */ e.createElement("div", {
-    ref: l,
-    className: "overflow-y-auto [&::-webkit-scrollbar]:hidden",
-    onScroll: a,
-    style: {
-      height: f * n,
-      paddingTop: y * n,
-      paddingBottom: y * n,
-      scrollSnapType: "y mandatory",
-      scrollbarWidth: "none"
-    }
-  }, r.map((t, c) => /* @__PURE__ */ e.createElement("div", {
-    key: t,
-    className: `flex items-center justify-center cursor-pointer select-none transition-colors h-10 ${c === o ? "text-[var(--color-blue-500)] font-semibold" : "text-[var(--color-gray-700)] hover:text-[var(--color-blue-500)]"}`,
-    onClick: () => i(c),
-    style: {
-      scrollSnapAlign: "center"
-    },
-    "data-automation-id": `${u}-item-${c}`
-  }, t))));
-}, $ = ({
-  initialHour: r = 12,
-  initialMinute: o = 0,
-  onApply: d,
-  ctaLabel: u = "Apply",
-  onClose: l,
-  className: s = "",
-  automationId: a = "timepicker"
+  return /* @__PURE__ */ t.createElement("div", {
+    className: `se-design-shimmer-container ${e.className || ""}`,
+    style: i
+  }, e.children.map((r, a) => r.type === "container" ? /* @__PURE__ */ t.createElement(y, {
+    key: a,
+    container: r,
+    animationDuration: d,
+    baseColor: s,
+    highlightColor: m
+  }) : /* @__PURE__ */ t.createElement(n, {
+    key: a,
+    element: r,
+    animationDuration: d,
+    baseColor: s,
+    highlightColor: m
+  })));
+}, l = ({
+  structure: e,
+  className: d = "",
+  animationDuration: s = 3,
+  baseColor: m = "var(--color-gray-700)",
+  highlightColor: i = "var(--color-gray-600)",
+  width: r,
+  height: a
 }) => {
-  const [i, t] = p(() => r === 0 ? 11 : r > 12 ? r - 12 - 1 : r - 1), [c, m] = p(Math.max(0, Math.min(59, o ?? 0))), [v, E] = p(
-    () => r >= 12 ? 1 : 0
-    // 0-11 = AM, 12-23 = PM
-  ), b = () => {
-    const S = v === 1 ? i + 12 : i;
-    d?.({
-      hour: S + 1,
-      minute: c
-    }), l?.();
+  const p = {
+    width: r ? typeof r == "number" ? `${r}px` : r : "100%",
+    height: a ? typeof a == "number" ? `${a}px` : a : "auto",
+    "--shimmer-duration": `${s}s`,
+    "--shimmer-base-color": m,
+    "--shimmer-highlight-color": i
   };
-  return /* @__PURE__ */ e.createElement("div", {
-    className: `se-design-timepicker-container w-full min-w-[216px] bg-[var(--color-white)] rounded-xl shadow-md border border-[var(--color-gray-400)] overflow-hidden ${s}`
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: "se-design-timepicker-content w-full relative p-4"
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: "absolute left-4 right-4 top-1/2 -translate-y-1/2 h-10 bg-[var(--color-blue-50)] rounded-lg pointer-events-none z-0"
-  }), /* @__PURE__ */ e.createElement("div", {
-    className: "flex justify-between gap-2 relative z-10"
-  }, /* @__PURE__ */ e.createElement(h, {
-    items: T,
-    selectedIndex: i,
-    onSelect: t,
-    automationId: `${a}-hours`
-  }), /* @__PURE__ */ e.createElement("div", {
-    className: "w-px bg-[var(--color-gray-200)]",
-    style: {
-      height: f * n
-    }
-  }), /* @__PURE__ */ e.createElement(h, {
-    items: w,
-    selectedIndex: c,
-    onSelect: m,
-    automationId: `${a}-minutes`
-  }), /* @__PURE__ */ e.createElement("div", {
-    className: "w-px bg-[var(--color-gray-200)]",
-    style: {
-      height: f * n
-    }
-  }), /* @__PURE__ */ e.createElement(h, {
-    items: M,
-    selectedIndex: v,
-    onSelect: E,
-    automationId: `${a}-periods`
-  }))), /* @__PURE__ */ e.createElement("div", {
-    className: "se-design-timepicker-footer flex justify-end p-3 border-t border-[var(--color-gray-200)]"
-  }, /* @__PURE__ */ e.createElement(x, {
-    label: u,
-    type: "primary",
-    onClick: b,
-    automationId: `${a}-apply-button`
+  return /* @__PURE__ */ t.createElement("div", {
+    className: `se-design-shimmer-loader ${d}`,
+    style: p
+  }, e.map((c, o) => c.type === "container" ? /* @__PURE__ */ t.createElement(y, {
+    key: o,
+    container: c,
+    animationDuration: s,
+    baseColor: m,
+    highlightColor: i
+  }) : /* @__PURE__ */ t.createElement(n, {
+    key: o,
+    element: c,
+    animationDuration: s,
+    baseColor: m,
+    highlightColor: i
   })));
 };
 export {
-  $ as TimePicker
+  l as ShimmerLoader,
+  l as default
 };
 //# sourceMappingURL=index60.js.map