se-design 1.0.97 → 1.0.98-dev.0

package/dist/index64.js

@@ -1,89 +1,36 @@
-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"
-}) => {
-  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,
-    className: r,
-    automationId: u,
-    minHeight: t
-  }, l)
-});
+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()));
 export {
-  I as BottomSheet
+  i as InfoBar
 };
 //# sourceMappingURL=index64.js.map

package/dist/index64.js.map

@@ -1 +1 @@
-{"version":3,"file":"index64.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":"index64.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;"}

package/dist/index65.js

@@ -1,122 +1,89 @@
-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 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"
 }) => {
-  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 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", {
-    className: "w-14"
-  }, /* @__PURE__ */ e.createElement("div", {
-    ref: l,
-    className: "overflow-y-auto [&::-webkit-scrollbar]:hidden",
-    onScroll: a,
+    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: {
-      height: f * n,
-      paddingTop: y * n,
-      paddingBottom: y * n,
-      scrollSnapType: "y mandatory",
-      scrollbarWidth: "none"
+      minHeight: u
     }
-  }, 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"
-}) => {
-  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?.();
-  };
-  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`
+  }, (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: "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`
-  })));
-};
+    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)
+});
 export {
-  $ as TimePicker
+  I as BottomSheet
 };
 //# sourceMappingURL=index65.js.map

package/dist/index65.js.map

@@ -1 +1 @@
-{"version":3,"file":"index65.js","sources":["../src/components/TimePicker/index.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\nimport { Button } from '../Button';\n\nexport interface TimePickerProps {\n  initialHour?: number;\n  initialMinute?: number;\n  onApply?: (time: { hour: number; minute: number }) => void;\n  ctaLabel?: string;\n  onClose?: () => void;\n  className?: string;\n  automationId?: string;\n}\n\nconst ITEM_HEIGHT = 40;\nconst VISIBLE_ITEMS = 7;\nconst BUFFER_ITEMS = 3;\n\nconst HOURS = Array.from({ length: 12 }, (_, i) => String(i + 1).padStart(2, '0'));\nconst MINUTES = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, '0'));\nconst PERIODS: ('AM' | 'PM')[] = ['AM', 'PM'];\n\ninterface ScrollColumnProps {\n  items: readonly string[];\n  selectedIndex: number;\n  onSelect: (index: number) => void;\n  automationId?: string;\n}\n\nconst ScrollColumn: React.FC<ScrollColumnProps> = ({ items, selectedIndex, onSelect, automationId = '' }) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const scrollTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    if (containerRef.current) {\n      containerRef.current.scrollTo({ top: selectedIndex * ITEM_HEIGHT, behavior: 'smooth' });\n    }\n  }, [selectedIndex]);\n\n  const handleScroll = () => {\n    if (!containerRef.current) return;\n\n    if (scrollTimeout.current) clearTimeout(scrollTimeout.current);\n\n    scrollTimeout.current = setTimeout(() => {\n      const container = containerRef.current;\n      if (!container) return;\n\n      const newIndex = Math.round(container.scrollTop / ITEM_HEIGHT);\n      const clampedIndex = Math.max(0, Math.min(items.length - 1, newIndex));\n\n      container.scrollTo({ top: clampedIndex * ITEM_HEIGHT, behavior: 'smooth' });\n\n      if (clampedIndex !== selectedIndex) onSelect(clampedIndex);\n    }, 100);\n  };\n\n  const handleItemClick = (index: number) => {\n    onSelect(index);\n    containerRef.current?.scrollTo({ top: index * ITEM_HEIGHT, behavior: 'smooth' });\n  };\n\n  return (\n    <div className=\"w-14\">\n      <div\n        ref={containerRef}\n        className=\"overflow-y-auto [&::-webkit-scrollbar]:hidden\"\n        onScroll={handleScroll}\n        style={{\n          height: VISIBLE_ITEMS * ITEM_HEIGHT,\n          paddingTop: BUFFER_ITEMS * ITEM_HEIGHT,\n          paddingBottom: BUFFER_ITEMS * ITEM_HEIGHT,\n          scrollSnapType: 'y mandatory',\n          scrollbarWidth: 'none'\n        }}\n      >\n        {items.map((item, index) => (\n          <div\n            key={item}\n            className={`flex items-center justify-center cursor-pointer select-none transition-colors h-10 ${\n              index === selectedIndex\n                ? 'text-[var(--color-blue-500)] font-semibold'\n                : 'text-[var(--color-gray-700)] hover:text-[var(--color-blue-500)]'\n            }`}\n            onClick={() => handleItemClick(index)}\n            style={{ scrollSnapAlign: 'center' }}\n            data-automation-id={`${automationId}-item-${index}`}\n          >\n            {item}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport const TimePicker: React.FC<TimePickerProps> = ({\n  initialHour = 12,\n  initialMinute = 0,\n  onApply,\n  ctaLabel = 'Apply',\n  onClose,\n  className = '',\n  automationId = 'timepicker'\n}) => {\n  const [selectedHourIndex, setSelectedHourIndex] = useState(() => {\n    if (initialHour === 0) return 11; // 0 = 12 AM\n    if (initialHour > 12) return initialHour - 12 - 1; // 13-23 → 1-11 (PM hours)\n    return initialHour - 1; // 1-12 → 0-11\n  });\n  const [selectedMinuteIndex, setSelectedMinuteIndex] = useState(Math.max(0, Math.min(59, initialMinute ?? 0)));\n  const [selectedPeriodIndex, setSelectedPeriodIndex] = useState(\n    () => (initialHour >= 12 ? 1 : 0) // 0-11 = AM, 12-23 = PM\n  );\n\n  const handleApply = () => {\n    const hourIn24Format = selectedPeriodIndex === 1 ? selectedHourIndex + 12 : selectedHourIndex;\n    onApply?.({\n      hour: hourIn24Format + 1,\n      minute: selectedMinuteIndex\n    });\n    onClose?.();\n  };\n\n  return (\n    <div\n      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 ${className}`}\n    >\n      <div className=\"se-design-timepicker-content w-full relative p-4\">\n        <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\" />\n        <div className=\"flex justify-between gap-2 relative z-10\">\n          <ScrollColumn\n            items={HOURS}\n            selectedIndex={selectedHourIndex}\n            onSelect={setSelectedHourIndex}\n            automationId={`${automationId}-hours`}\n          />\n          <div className=\"w-px bg-[var(--color-gray-200)]\" style={{ height: VISIBLE_ITEMS * ITEM_HEIGHT }} />\n          <ScrollColumn\n            items={MINUTES}\n            selectedIndex={selectedMinuteIndex}\n            onSelect={setSelectedMinuteIndex}\n            automationId={`${automationId}-minutes`}\n          />\n          <div className=\"w-px bg-[var(--color-gray-200)]\" style={{ height: VISIBLE_ITEMS * ITEM_HEIGHT }} />\n          <ScrollColumn\n            items={PERIODS}\n            selectedIndex={selectedPeriodIndex}\n            onSelect={setSelectedPeriodIndex}\n            automationId={`${automationId}-periods`}\n          />\n        </div>\n      </div>\n      <div className=\"se-design-timepicker-footer flex justify-end p-3 border-t border-[var(--color-gray-200)]\">\n        <Button label={ctaLabel} type=\"primary\" onClick={handleApply} automationId={`${automationId}-apply-button`} />\n      </div>\n    </div>\n  );\n};\n"],"names":["ITEM_HEIGHT","VISIBLE_ITEMS","BUFFER_ITEMS","HOURS","Array","from","length","_","i","String","padStart","MINUTES","PERIODS","ScrollColumn","items","selectedIndex","onSelect","automationId","containerRef","useRef","scrollTimeout","useEffect","current","scrollTo","top","behavior","handleScroll","clearTimeout","setTimeout","container","newIndex","Math","round","scrollTop","clampedIndex","max","min","handleItemClick","index","React","createElement","className","ref","onScroll","style","height","paddingTop","paddingBottom","scrollSnapType","scrollbarWidth","map","item","key","onClick","scrollSnapAlign","TimePicker","initialHour","initialMinute","onApply","ctaLabel","onClose","selectedHourIndex","setSelectedHourIndex","useState","selectedMinuteIndex","setSelectedMinuteIndex","selectedPeriodIndex","setSelectedPeriodIndex","handleApply","hourIn24Format","hour","minute","Button","label","type"],"mappings":";;AAaA,MAAMA,IAAc,IACdC,IAAgB,GAChBC,IAAe,GAEfC,IAAQC,MAAMC,KAAK;AAAA,EAAEC,QAAQ;AAAG,GAAG,CAACC,GAAGC,MAAMC,OAAOD,IAAI,CAAC,EAAEE,SAAS,GAAG,GAAG,CAAC,GAC3EC,IAAUP,MAAMC,KAAK;AAAA,EAAEC,QAAQ;AAAG,GAAG,CAACC,GAAGC,MAAMC,OAAOD,CAAC,EAAEE,SAAS,GAAG,GAAG,CAAC,GACzEE,IAA2B,CAAC,MAAM,IAAI,GAStCC,IAA4CA,CAAC;AAAA,EAAEC,OAAAA;AAAAA,EAAOC,eAAAA;AAAAA,EAAeC,UAAAA;AAAAA,EAAUC,cAAAA,IAAe;AAAG,MAAM;AAC3G,QAAMC,IAAeC,EAAuB,IAAI,GAC1CC,IAAgBD,EAA6C,IAAI;AAEvEE,EAAAA,EAAU,MAAM;AACd,IAAIH,EAAaI,WACfJ,EAAaI,QAAQC,SAAS;AAAA,MAAEC,KAAKT,IAAgBf;AAAAA,MAAayB,UAAU;AAAA,IAAA,CAAU;AAAA,EAE1F,GAAG,CAACV,CAAa,CAAC;AAElB,QAAMW,IAAeA,MAAM;AACzB,IAAKR,EAAaI,YAEdF,EAAcE,WAASK,aAAaP,EAAcE,OAAO,GAE7DF,EAAcE,UAAUM,WAAW,MAAM;AACvC,YAAMC,IAAYX,EAAaI;AAC/B,UAAI,CAACO,EAAW;AAEhB,YAAMC,IAAWC,KAAKC,MAAMH,EAAUI,YAAYjC,CAAW,GACvDkC,IAAeH,KAAKI,IAAI,GAAGJ,KAAKK,IAAItB,EAAMR,SAAS,GAAGwB,CAAQ,CAAC;AAErED,MAAAA,EAAUN,SAAS;AAAA,QAAEC,KAAKU,IAAelC;AAAAA,QAAayB,UAAU;AAAA,MAAA,CAAU,GAEtES,MAAiBnB,KAAeC,EAASkB,CAAY;AAAA,IAC3D,GAAG,GAAG;AAAA,EACR,GAEMG,IAAkBA,CAACC,MAAkB;AACzCtB,IAAAA,EAASsB,CAAK,GACdpB,EAAaI,SAASC,SAAS;AAAA,MAAEC,KAAKc,IAAQtC;AAAAA,MAAayB,UAAU;AAAA,IAAA,CAAU;AAAA,EACjF;AAEA,SACEc,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACbF,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEE,KAAKxB;AAAAA,IACLuB,WAAU;AAAA,IACVE,UAAUjB;AAAAA,IACVkB,OAAO;AAAA,MACLC,QAAQ5C,IAAgBD;AAAAA,MACxB8C,YAAY5C,IAAeF;AAAAA,MAC3B+C,eAAe7C,IAAeF;AAAAA,MAC9BgD,gBAAgB;AAAA,MAChBC,gBAAgB;AAAA,IAAA;AAAA,EAClB,GAECnC,EAAMoC,IAAI,CAACC,GAAMb,MAChBC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEY,KAAKD;AAAAA,IACLV,WAAW,sFACTH,MAAUvB,IACN,+CACA,iEAAiE;AAAA,IAEvEsC,SAASA,MAAMhB,EAAgBC,CAAK;AAAA,IACpCM,OAAO;AAAA,MAAEU,iBAAiB;AAAA,IAAA;AAAA,IAC1B,sBAAoB,GAAGrC,CAAY,SAASqB,CAAK;AAAA,EAAA,GAEhDa,CACE,CACN,CACE,CACF;AAET,GAEaI,IAAwCA,CAAC;AAAA,EACpDC,aAAAA,IAAc;AAAA,EACdC,eAAAA,IAAgB;AAAA,EAChBC,SAAAA;AAAAA,EACAC,UAAAA,IAAW;AAAA,EACXC,SAAAA;AAAAA,EACAnB,WAAAA,IAAY;AAAA,EACZxB,cAAAA,IAAe;AACjB,MAAM;AACJ,QAAM,CAAC4C,GAAmBC,CAAoB,IAAIC,EAAS,MACrDP,MAAgB,IAAU,KAC1BA,IAAc,KAAWA,IAAc,KAAK,IACzCA,IAAc,CACtB,GACK,CAACQ,GAAqBC,CAAsB,IAAIF,EAAShC,KAAKI,IAAI,GAAGJ,KAAKK,IAAI,IAAIqB,KAAiB,CAAC,CAAC,CAAC,GACtG,CAACS,GAAqBC,CAAsB,IAAIJ;AAAAA,IACpD,MAAOP,KAAe,KAAK,IAAI;AAAA;AAAA,EAAA,GAG3BY,IAAcA,MAAM;AACxB,UAAMC,IAAiBH,MAAwB,IAAIL,IAAoB,KAAKA;AAC5EH,IAAAA,IAAU;AAAA,MACRY,MAAMD,IAAiB;AAAA,MACvBE,QAAQP;AAAAA,IAAAA,CACT,GACDJ,IAAAA;AAAAA,EACF;AAEA,SACErB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,0JAA0JA,CAAS;AAAA,EAAA,GAE9KF,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACbF,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,CAAsH,GACrIF,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACbF,gBAAAA,EAAAC,cAAC3B,GAAY;AAAA,IACXC,OAAOX;AAAAA,IACPY,eAAe8C;AAAAA,IACf7C,UAAU8C;AAAAA,IACV7C,cAAc,GAAGA,CAAY;AAAA,EAAA,CAC9B,GACDsB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAAkCG,OAAO;AAAA,MAAEC,QAAQ5C,IAAgBD;AAAAA,IAAAA;AAAAA,EAAY,CAAI,GAClGuC,gBAAAA,EAAAC,cAAC3B,GAAY;AAAA,IACXC,OAAOH;AAAAA,IACPI,eAAeiD;AAAAA,IACfhD,UAAUiD;AAAAA,IACVhD,cAAc,GAAGA,CAAY;AAAA,EAAA,CAC9B,GACDsB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAAkCG,OAAO;AAAA,MAAEC,QAAQ5C,IAAgBD;AAAAA,IAAAA;AAAAA,EAAY,CAAI,GAClGuC,gBAAAA,EAAAC,cAAC3B,GAAY;AAAA,IACXC,OAAOF;AAAAA,IACPG,eAAemD;AAAAA,IACflD,UAAUmD;AAAAA,IACVlD,cAAc,GAAGA,CAAY;AAAA,EAAA,CAC9B,CACE,CACF,GACLsB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACbF,gBAAAA,EAAAC,cAACgC,GAAM;AAAA,IAACC,OAAOd;AAAAA,IAAUe,MAAK;AAAA,IAAUrB,SAASe;AAAAA,IAAanD,cAAc,GAAGA,CAAY;AAAA,EAAA,CAAkB,CAC1G,CACF;AAET;"}
+{"version":3,"file":"index65.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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"}

package/dist/index66.js

@@ -1,81 +1,122 @@
-import n, { useState as u, useCallback as y, useEffect as P } from "react";
-import { Popover as I } from "./index19.js";
-import { useStableId as k } from "./index214.js";
-/* empty css         */
-function p() {
-  return p = Object.assign ? Object.assign.bind() : function(r) {
-    for (var o = 1; o < arguments.length; o++) {
-      var s = arguments[o];
-      for (var t in s) ({}).hasOwnProperty.call(s, t) && (r[t] = s[t]);
-    }
-    return r;
-  }, p.apply(null, arguments);
-}
-const N = ({
-  label: r,
-  children: o,
-  iconColor: s = "",
-  hoverBackgroundColor: t,
-  isDisabled: i = !1,
-  noPadding: m = !1,
-  noDescribedBy: g = !1
+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 = ""
 }) => {
-  const c = k(void 0, "info-tooltip"), [v, a] = u(!1), [E, l] = u(!1), d = v || E, f = y((e) => {
-    e.key === "Escape" && (a(!1), l(!1), e.stopImmediatePropagation());
-  }, []);
-  P(() => {
-    if (d)
-      return document.addEventListener("keydown", f), () => document.removeEventListener("keydown", f);
-  }, [d, f]);
-  const b = {
-    onMouseEnter: () => a(!0),
-    onMouseLeave: () => a(!1),
-    onFocus: (e) => {
-      e.target.matches(":focus-visible") && l(!0);
-    },
-    onBlur: () => l(!1)
+  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"
+    });
   };
-  return /* @__PURE__ */ n.createElement("div", p({
-    className: `se-design-info-tooltip-outer ${i ? "se-design-info-tooltip-wrapper-disabled" : ""}`
-  }, i ? {} : b), /* @__PURE__ */ n.createElement(I, {
-    className: "inline-flex items-center",
-    position: "bottom-center",
-    isPopoverOpen: d,
-    onPopoverToggle: (e) => {
-      e || (a(!1), l(!1));
-    },
-    renderPopoverSrcElement: () => {
-      const e = !g && /* @__PURE__ */ n.isValidElement(o) ? /* @__PURE__ */ n.cloneElement(o, {
-        "aria-describedby": c,
-        ariaDescribedBy: c
-      }) : o;
-      return /* @__PURE__ */ n.createElement("div", {
-        className: `se-design-info-tooltip-src ${m ? "no-padding" : ""} ${i ? "se-design-info-tooltip-disabled" : ""}`,
-        style: {
-          "--info-tooltip-icon-color": s,
-          ...t ? {
-            "--info-tooltip-hover-bg": t
-          } : {},
-          cursor: i ? "not-allowed" : "pointer"
-        }
-      }, e);
+  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"
     },
-    renderPopoverContents: () => /* @__PURE__ */ n.createElement("div", {
-      id: c,
-      role: "tooltip",
-      className: "se-design-info-tooltip-content",
-      "data-automation-id": "se-design-info-tooltip-content"
-    }, r),
-    isWithPortal: !0,
-    noBorder: !0,
-    disableClickToggle: !0,
-    popoverContentStyleProperty: {
-      zIndex: 2e3,
-      backgroundColor: ""
+    "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"
+}) => {
+  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?.();
+  };
+  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`
+  })));
 };
 export {
-  N as InfoTooltip
+  $ as TimePicker
 };
 //# sourceMappingURL=index66.js.map