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

package/dist/index65.js

@@ -1,147 +1,122 @@
-import a from "react";
-import { Button as f } from "./index4.js";
-import { Badge as j } from "./index10.js";
-import { Icon as q } from "./index6.js";
-import { Link as N } from "./index64.js";
-import { CustomModal as G } from "./index13.js";
-import { useStableId as J } from "./index206.js";
-/* empty css         */
-const K = {
-  lg: {
-    width: "768px",
-    height: "500px"
-  },
-  sm: {
-    width: "656px",
-    height: "384px"
-  }
-}, ea = ({
-  isOpen: u,
-  onClose: n,
-  trigger: c,
-  modalWidth: b,
-  modalHeight: g,
-  variant: x,
-  size: t = "lg",
-  availabilityLabel: k = "Available on ",
-  availabilityBadgeText: r,
-  title: C,
-  description: v,
-  learnMoreLinkText: o,
-  learnMoreHref: l,
-  onLearnMoreClick: s,
-  featureListDesc: m,
-  featuresList: I = [],
-  featureItemIcon: L,
-  mediaContent: S,
-  laterButtonText: _,
-  purchaseButtonText: A,
-  onLaterClick: F,
-  onPurchaseClick: P,
-  className: $ = "",
-  modalContentClassName: D = "",
-  automationId: i = "",
-  id: z
+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 p = J(z, "paywall-title"), B = () => {
-    F?.(), n();
-  }, d = K[t], O = b ?? d.width, w = g ?? d.height, y = x === "with-points" && t === "lg", h = I.map((e) => typeof e == "string" ? {
-    text: e
-  } : {
-    text: e.text,
-    icon: e.icon,
-    href: e.href,
-    external: e.external,
-    onLinkClick: e.onLinkClick
-  }), R = y && h.length > 0, W = L ?? /* @__PURE__ */ a.createElement(q, {
-    name: "info",
-    rotation: "180"
-  }), Y = /* @__PURE__ */ a.createElement("section", {
-    className: `paywall paywall-ctn paywall-ctn--${t} ${$}`,
-    "data-automation-id": i
-  }, /* @__PURE__ */ a.createElement("div", {
-    className: "paywall-card"
-  }, /* @__PURE__ */ a.createElement("div", {
-    className: "paywall-card-content"
-  }, r && /* @__PURE__ */ a.createElement("span", {
-    className: "paywall-card-availability"
-  }, /* @__PURE__ */ a.createElement("span", {
-    className: "paywall-card-availability-label"
-  }, k), /* @__PURE__ */ a.createElement(j, {
-    label: r,
-    className: "paywall-card-badge",
-    bgColor: "var(--color-yellow-100)",
-    textColor: "var(--color-yellow-700)"
-  })), /* @__PURE__ */ a.createElement("h3", {
-    id: p,
-    className: "paywall-card-title"
-  }, C), /* @__PURE__ */ a.createElement("p", {
-    className: "paywall-card-description"
-  }, v, o && (l || s) && /* @__PURE__ */ a.createElement(N, {
-    href: l ?? "#",
-    label: o,
-    external: !!l,
-    className: "paywall-card-learn-more",
-    onClick: (e) => {
-      l || e.preventDefault(), s?.(e);
+  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__ */ 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"
     }
-  })), y && m && /* @__PURE__ */ a.createElement("p", {
-    className: "paywall-card-features-intro"
-  }, m), R && /* @__PURE__ */ a.createElement("ul", {
-    className: "paywall-card-features-list"
-  }, h.map((e) => /* @__PURE__ */ a.createElement("li", {
-    key: e.text,
-    className: "paywall-card-feature-item"
-  }, /* @__PURE__ */ a.createElement("span", {
-    className: "paywall-card-feature-icon",
-    "aria-hidden": !0
-  }, e.icon ?? W), /* @__PURE__ */ a.createElement("span", null, e.href || e.onLinkClick ? /* @__PURE__ */ a.createElement(N, {
-    href: e.href ?? "#",
-    label: e.text,
-    external: e.external,
-    onClick: (E) => {
-      e.href || E.preventDefault(), e.onLinkClick?.(E);
+  }, 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`
+  }), /* @__PURE__ */ e.createElement("div", {
+    className: "w-px bg-[var(--color-gray-200)]",
+    style: {
+      height: f * n
     }
-  }) : e.text)))), /* @__PURE__ */ a.createElement("div", {
-    className: "paywall-card-actions"
-  }, /* @__PURE__ */ a.createElement(f, {
-    type: "ghost",
-    size: "md",
-    label: _,
-    onClick: B,
-    className: "paywall-card-btn-later"
-  }), /* @__PURE__ */ a.createElement(f, {
-    type: "primary",
-    size: "md",
-    label: A,
-    onClick: P,
-    className: "paywall-card-btn-purchase"
-  }))), /* @__PURE__ */ a.createElement("div", {
-    className: "paywall-card-media"
-  }, S))), Z = /* @__PURE__ */ a.createElement("div", {
-    role: "dialog",
-    "aria-modal": "true",
-    "aria-labelledby": p,
-    className: `paywall-modal-content ${D}`,
+  }), /* @__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: w,
-      minHeight: w
+      height: f * n
     }
-  }, Y);
-  return /* @__PURE__ */ a.createElement(a.Fragment, null, c && /* @__PURE__ */ a.createElement("span", {
-    className: "paywall-trigger"
-  }, c), /* @__PURE__ */ a.createElement(G, {
-    isOpen: u,
-    onClose: n,
-    onModalClick: () => {
-    },
-    renderModalContent: () => Z,
-    width: O,
-    contentClassName: "paywall-modal-content-wrapper",
-    automationId: i
-  }));
+  }), /* @__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 {
-  ea as Paywall
+  $ as TimePicker
 };
 //# sourceMappingURL=index65.js.map

package/dist/index65.js.map

@@ -1 +1 @@
-{"version":3,"file":"index65.js","sources":["../src/components/Paywall/index.tsx"],"sourcesContent":["import React, { FC, ReactNode } from 'react';\nimport { Button } from 'src/components/Button';\nimport { Badge } from 'src/components/Badge';\nimport { Icon } from 'src/components/Icon';\nimport { Link } from 'src/components/Link';\nimport { CustomModal } from 'src/components/CustomModal';\nimport { useStableId } from 'src/utils/useStableId';\nimport './style.scss';\n\n/** Variant: with bullet points list, or description only */\nexport type PaywallVariant = 'with-points' | 'description-only';\n\n/** Size: small (656×384) or large (768×500) – sets modal dimensions and media panel proportion */\nexport type PaywallSize = 'sm' | 'lg';\n\n/** Feature list item: plain string (uses default/list icon) or object with text, optional per-item icon, and optional link/action */\nexport type PaywallFeatureItem =\n  | string\n  | {\n      text: string;\n      icon?: ReactNode;\n      /** If provided, the feature text becomes a hyperlink navigating to this URL */\n      href?: string;\n      /** If true, opens the href in a new tab (only applicable when href is set) */\n      external?: boolean;\n      /** Click handler — use with href for analytics, or alone for SPA actions */\n      onLinkClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;\n    };\n\nconst PAYWALL_SIZE_DIMENSIONS: Record<PaywallSize, { width: string; height: string }> = {\n  lg: { width: '768px', height: '500px' },\n  sm: { width: '656px', height: '384px' },\n};\n\nexport interface PaywallProps {\n  isOpen: boolean;\n  onClose: () => void;\n  trigger?: ReactNode;\n  modalWidth?: string;\n  modalHeight?: string;\n  variant: PaywallVariant;\n  size?: PaywallSize;\n  availabilityLabel?: string;\n  availabilityBadgeText?: string;\n  title: string;\n  description: string;\n  learnMoreLinkText?: string;\n  learnMoreHref?: string;\n  onLearnMoreClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;\n  featureListDesc?: string;\n  featuresList?: PaywallFeatureItem[];\n  featureItemIcon?: ReactNode;\n  mediaContent?: ReactNode;\n  laterButtonText: string;\n  purchaseButtonText: string;\n  onLaterClick?: () => void;\n  onPurchaseClick?: () => void;\n  className?: string;\n  modalContentClassName?: string;\n  automationId?: string;\n  id?: string;\n}\n\n/** Paywall – always shown in a modal. Pass isOpen/onClose and optionally a trigger. */\nexport const Paywall: FC<PaywallProps> = ({\n  isOpen,\n  onClose,\n  trigger,\n  modalWidth,\n  modalHeight,\n  variant,\n  size = 'lg',\n  availabilityLabel = 'Available on ',\n  availabilityBadgeText,\n  title,\n  description,\n  learnMoreLinkText,\n  learnMoreHref,\n  onLearnMoreClick,\n  featureListDesc,\n  featuresList = [],\n  featureItemIcon,\n  mediaContent,\n  laterButtonText,\n  purchaseButtonText,\n  onLaterClick,\n  onPurchaseClick,\n  className = '',\n  modalContentClassName = '',\n  automationId = '',\n  id: providedId,\n}) => {\n  const titleId = useStableId(providedId, 'paywall-title');\n\n  const handleLaterClick = () => {\n    onLaterClick?.();\n    onClose();\n  };\n\n  const dimensions = PAYWALL_SIZE_DIMENSIONS[size];\n  const width = modalWidth ?? dimensions.width;\n  const height = modalHeight ?? dimensions.height;\n\n  const withPoints = variant === 'with-points' && size === 'lg';\n  const normalizedFeatures = featuresList.map((item): { text: string; icon?: ReactNode; href?: string; external?: boolean; onLinkClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void } =>\n    typeof item === 'string'\n      ? { text: item }\n      : { text: item.text, icon: item.icon, href: item.href, external: item.external, onLinkClick: item.onLinkClick }\n  );\n  const showFeatures = withPoints && normalizedFeatures.length > 0;\n  const defaultIcon = featureItemIcon ?? <Icon name=\"info\" rotation='180'/>;\n\n  const content = (\n    <section\n      className={`paywall paywall-ctn paywall-ctn--${size} ${className}`}\n      data-automation-id={automationId}\n    >\n      <div className=\"paywall-card\">\n        <div className=\"paywall-card-content\">\n          {availabilityBadgeText && (\n            <span className=\"paywall-card-availability\">\n              <span className=\"paywall-card-availability-label\">{availabilityLabel}</span>\n              <Badge\n                label={availabilityBadgeText}\n                className=\"paywall-card-badge\"\n                bgColor=\"var(--color-yellow-100)\"\n                textColor=\"var(--color-yellow-700)\"\n              />\n            </span>\n          )}\n          <h3 id={titleId} className=\"paywall-card-title\">{title}</h3>\n          <p className=\"paywall-card-description\">\n            {description}\n            {learnMoreLinkText && (learnMoreHref || onLearnMoreClick) && (\n              <Link\n                href={learnMoreHref ?? '#'}\n                label={learnMoreLinkText}\n                external={!!learnMoreHref}\n                className=\"paywall-card-learn-more\"\n                onClick={(e) => { if (!learnMoreHref) { e.preventDefault(); } onLearnMoreClick?.(e); }}\n              />\n            )}\n          </p>\n          {withPoints && featureListDesc && (\n            <p className=\"paywall-card-features-intro\">{featureListDesc}</p>\n          )}\n          {showFeatures && (\n            <ul className=\"paywall-card-features-list\">\n              {normalizedFeatures.map((item) => (\n                <li key={item.text} className=\"paywall-card-feature-item\">\n                  <span className=\"paywall-card-feature-icon\" aria-hidden>\n                    {item.icon ?? defaultIcon}\n                  </span>\n                  <span>\n                    {item.href || item.onLinkClick ? (\n                      <Link\n                        href={item.href ?? '#'}\n                        label={item.text}\n                        external={item.external}\n                        onClick={(e) => { if (!item.href) { e.preventDefault(); } item.onLinkClick?.(e); }}\n                      />\n                    ) : (\n                      item.text\n                    )}\n                  </span>\n                </li>\n              ))}\n            </ul>\n          )}\n          <div className=\"paywall-card-actions\">\n            <Button\n              type=\"ghost\"\n              size=\"md\"\n              label={laterButtonText}\n              onClick={handleLaterClick}\n              className=\"paywall-card-btn-later\"\n            />\n            <Button\n              type=\"primary\"\n              size=\"md\"\n              label={purchaseButtonText}\n              onClick={onPurchaseClick}\n              className=\"paywall-card-btn-purchase\"\n            />\n          </div>\n        </div>\n        <div className=\"paywall-card-media\">\n          {mediaContent}\n        </div>\n      </div>\n    </section>\n  );\n\n  const modalContent = (\n    <div\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={titleId}\n      className={`paywall-modal-content ${modalContentClassName}`}\n      style={{ height, minHeight: height }}\n    >\n      {content}\n    </div>\n  );\n\n  return (\n    <>\n      {trigger && <span className=\"paywall-trigger\">{trigger}</span>}\n      <CustomModal\n        isOpen={isOpen}\n        onClose={onClose}\n        onModalClick={() => {}}\n        renderModalContent={() => modalContent}\n        width={width}\n        contentClassName=\"paywall-modal-content-wrapper\"\n        automationId={automationId}\n      />\n    </>\n  );\n};\n\nexport default Paywall;\n"],"names":["React__default","Button","Badge","Icon","Link","CustomModal","useStableId","PAYWALL_SIZE_DIMENSIONS","lg","width","height","sm","Paywall","isOpen","onClose","trigger","modalWidth","modalHeight","variant","size","availabilityLabel","availabilityBadgeText","title","description","learnMoreLinkText","learnMoreHref","onLearnMoreClick","featureListDesc","featuresList","featureItemIcon","mediaContent","laterButtonText","purchaseButtonText","onLaterClick","onPurchaseClick","className","modalContentClassName","automationId","id","providedId","titleId","handleLaterClick","dimensions","withPoints","normalizedFeatures","map","item","text","icon","href","external","onLinkClick","showFeatures","length","defaultIcon","React","createElement","name","rotation","content","label","bgColor","textColor","onClick","e","preventDefault","key","type","modalContent","role","style","minHeight","Fragment","onModalClick","renderModalContent","contentClassName"],"mappings":"AA6BA,OAAAA,OAAA;AAAA,SAAA,UAAAC,SAAA;AAAA,SAAA,SAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAAA,eAAAC,SAAA;AAAA,SAAA,eAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAkF;AAAA,EACtFC,IAAI;AAAA,IAAEC,OAAO;AAAA,IAASC,QAAQ;AAAA,EAAA;AAAA,EAC9BC,IAAI;AAAA,IAAEF,OAAO;AAAA,IAASC,QAAQ;AAAA,EAAA;AAChC,GAgCaE,KAA4BA,CAAC;AAAA,EACxCC,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,MAAAA,IAAO;AAAA,EACPC,mBAAAA,IAAoB;AAAA,EACpBC,uBAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,mBAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAC,kBAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,cAAAA,IAAe,CAAA;AAAA,EACfC,iBAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,oBAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,uBAAAA,IAAwB;AAAA,EACxBC,cAAAA,IAAe;AAAA,EACfC,IAAIC;AACN,MAAM;AACJ,QAAMC,IAAUlC,EAAYiC,GAAY,eAAe,GAEjDE,IAAmBA,MAAM;AAC7BR,IAAAA,IAAAA,GACAnB,EAAAA;AAAAA,EACF,GAEM4B,IAAanC,EAAwBY,CAAI,GACzCV,IAAQO,KAAc0B,EAAWjC,OACjCC,IAASO,KAAeyB,EAAWhC,QAEnCiC,IAAazB,MAAY,iBAAiBC,MAAS,MACnDyB,IAAqBhB,EAAaiB,IAAI,CAACC,MAC3C,OAAOA,KAAS,WACZ;AAAA,IAAEC,MAAMD;AAAAA,EAAAA,IACR;AAAA,IAAEC,MAAMD,EAAKC;AAAAA,IAAMC,MAAMF,EAAKE;AAAAA,IAAMC,MAAMH,EAAKG;AAAAA,IAAMC,UAAUJ,EAAKI;AAAAA,IAAUC,aAAaL,EAAKK;AAAAA,EAAAA,CACtG,GACMC,IAAeT,KAAcC,EAAmBS,SAAS,GACzDC,IAAczB,KAAmB0B,gBAAAA,EAAAC,cAACrD,GAAI;AAAA,IAACsD,MAAK;AAAA,IAAOC,UAAS;AAAA,EAAA,CAAM,GAElEC,IACJJ,gBAAAA,EAAAC,cAAA,WAAA;AAAA,IACErB,WAAW,oCAAoChB,CAAI,IAAIgB,CAAS;AAAA,IAChE,sBAAoBE;AAAAA,EAAAA,GAEpBkB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKrB,WAAU;AAAA,EAAA,GACboB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKrB,WAAU;AAAA,EAAA,GACZd,KACCkC,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMrB,WAAU;AAAA,EAAA,GACdoB,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMrB,WAAU;AAAA,EAAA,GAAmCf,CAAwB,GAC3EmC,gBAAAA,EAAAC,cAACtD,GAAK;AAAA,IACJ0D,OAAOvC;AAAAA,IACPc,WAAU;AAAA,IACV0B,SAAQ;AAAA,IACRC,WAAU;AAAA,EAAA,CACX,CACG,GAERP,gBAAAA,EAAAC,cAAA,MAAA;AAAA,IAAIlB,IAAIE;AAAAA,IAASL,WAAU;AAAA,EAAA,GAAsBb,CAAU,GAC3DiC,gBAAAA,EAAAC,cAAA,KAAA;AAAA,IAAGrB,WAAU;AAAA,EAAA,GACVZ,GACAC,MAAsBC,KAAiBC,MACtC6B,gBAAAA,EAAAC,cAACpD,GAAI;AAAA,IACH6C,MAAMxB,KAAiB;AAAA,IACvBmC,OAAOpC;AAAAA,IACP0B,UAAU,CAAC,CAACzB;AAAAA,IACZU,WAAU;AAAA,IACV4B,SAAUC,CAAAA,MAAM;AAAE,MAAKvC,KAAiBuC,EAAEC,eAAAA,GAAoBvC,IAAmBsC,CAAC;AAAA,IAAG;AAAA,EAAA,CACtF,CAEF,GACFrB,KAAchB,KACb4B,gBAAAA,EAAAC,cAAA,KAAA;AAAA,IAAGrB,WAAU;AAAA,EAAA,GAA+BR,CAAmB,GAEhEyB,KACCG,gBAAAA,EAAAC,cAAA,MAAA;AAAA,IAAIrB,WAAU;AAAA,EAAA,GACXS,EAAmBC,IAAKC,CAAAA,MACvBS,gBAAAA,EAAAC,cAAA,MAAA;AAAA,IAAIU,KAAKpB,EAAKC;AAAAA,IAAMZ,WAAU;AAAA,EAAA,GAC5BoB,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMrB,WAAU;AAAA,IAA4B,eAAA;AAAA,EAAA,GACzCW,EAAKE,QAAQM,CACV,GACNC,gBAAAA,EAAAC,cAAA,QAAA,MACGV,EAAKG,QAAQH,EAAKK,cACjBI,gBAAAA,EAAAC,cAACpD,GAAI;AAAA,IACH6C,MAAMH,EAAKG,QAAQ;AAAA,IACnBW,OAAOd,EAAKC;AAAAA,IACZG,UAAUJ,EAAKI;AAAAA,IACfa,SAAUC,CAAAA,MAAM;AAAE,MAAKlB,EAAKG,QAAQe,EAAEC,eAAAA,GAAoBnB,EAAKK,cAAca,CAAC;AAAA,IAAG;AAAA,EAAA,CAClF,IAEDlB,EAAKC,IAEH,CACJ,CACL,CACC,GAENQ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKrB,WAAU;AAAA,EAAA,GACboB,gBAAAA,EAAAC,cAACvD,GAAM;AAAA,IACLkE,MAAK;AAAA,IACLhD,MAAK;AAAA,IACLyC,OAAO7B;AAAAA,IACPgC,SAAStB;AAAAA,IACTN,WAAU;AAAA,EAAA,CACX,GACDoB,gBAAAA,EAAAC,cAACvD,GAAM;AAAA,IACLkE,MAAK;AAAA,IACLhD,MAAK;AAAA,IACLyC,OAAO5B;AAAAA,IACP+B,SAAS7B;AAAAA,IACTC,WAAU;AAAA,EAAA,CACX,CACE,CACF,GACLoB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKrB,WAAU;AAAA,EAAA,GACZL,CACE,CACF,CACE,GAGLsC,IACJb,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEa,MAAK;AAAA,IACL,cAAW;AAAA,IACX,mBAAiB7B;AAAAA,IACjBL,WAAW,yBAAyBC,CAAqB;AAAA,IACzDkC,OAAO;AAAA,MAAE5D,QAAAA;AAAAA,MAAQ6D,WAAW7D;AAAAA,IAAAA;AAAAA,EAAO,GAElCiD,CACE;AAGP,SACEJ,gBAAAA,EAAAC,cAAAD,EAAAiB,UAAA,MACGzD,KAAWwC,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMrB,WAAU;AAAA,EAAA,GAAmBpB,CAAc,GAC7DwC,gBAAAA,EAAAC,cAACnD,GAAW;AAAA,IACVQ,QAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACA2D,cAAcA,MAAM;AAAA,IAAC;AAAA,IACrBC,oBAAoBA,MAAMN;AAAAA,IAC1B3D,OAAAA;AAAAA,IACAkE,kBAAiB;AAAA,IACjBtC,cAAAA;AAAAA,EAAAA,CACD,CACD;AAEN;"}
+{"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":"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"}

package/dist/index66.js

@@ -1,15 +1,81 @@
-function i({
-  titleId: r,
-  descriptionId: t,
-  isFocusable: a = !1
-}) {
-  const e = {
-    role: "region",
-    "aria-labelledby": r
-  };
-  return t && (e["aria-describedby"] = t), a && (e.tabIndex = -1), e;
+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 "./index211.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
+}) => {
+  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)
+  };
+  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);
+    },
+    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: ""
+    }
+  }));
+};
 export {
-  i as getRegionAttributes
+  N as InfoTooltip
 };
 //# sourceMappingURL=index66.js.map

package/dist/index66.js.map

@@ -1 +1 @@
-{"version":3,"file":"index66.js","sources":["../src/utils/a11y/regionAttributes.ts"],"sourcesContent":["/**\n * Returns ARIA attributes for a region container element.\n * Used for semantic containers that need role=\"region\" with proper labeling.\n * \n * @param options - Configuration options\n * @param options.titleId - Required. ID of the heading element that labels this region\n * @param options.descriptionId - Optional. ID of the description element\n * @param options.isFocusable - Optional. Whether to make the region focusable (adds tabIndex={-1})\n * @returns Object with region ARIA attributes\n */\nexport function getRegionAttributes({\n  titleId,\n  descriptionId,\n  isFocusable = false\n}: {\n  titleId: string;\n  descriptionId?: string;\n  isFocusable?: boolean;\n}): {\n  role: 'region';\n  'aria-labelledby': string;\n  'aria-describedby'?: string;\n  tabIndex?: number;\n} {\n  const attributes: {\n    role: 'region';\n    'aria-labelledby': string;\n    'aria-describedby'?: string;\n    tabIndex?: number;\n  } = {\n    role: 'region',\n    'aria-labelledby': titleId\n  };\n\n  if (descriptionId) {\n    attributes['aria-describedby'] = descriptionId;\n  }\n\n  if (isFocusable) {\n    attributes.tabIndex = -1;\n  }\n\n  return attributes;\n}\n"],"names":["getRegionAttributes","titleId","descriptionId","isFocusable","attributes","role","tabIndex"],"mappings":"AAUO,SAASA,EAAoB;AAAA,EAClCC,SAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAC,aAAAA,IAAc;AAKhB,GAKE;AACA,QAAMC,IAKF;AAAA,IACFC,MAAM;AAAA,IACN,mBAAmBJ;AAAAA,EAAAA;AAGrB,SAAIC,MACFE,EAAW,kBAAkB,IAAIF,IAG/BC,MACFC,EAAWE,WAAW,KAGjBF;AACT;"}
+{"version":3,"file":"index66.js","sources":["../src/components/InfoTooltip/index.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from 'react';\nimport { Popover } from '../Popover';\nimport { useStableId } from '../../utils/useStableId';\nimport './styles.scss';\n\nexport interface InfoTooltipProps {\n  label: string;\n  children: React.ReactNode;\n  iconColor?: string;\n  /**\n   * Background color shown on hover. Defaults to var(--color-blue-200).\n   */\n  hoverBackgroundColor?: string;\n  isDisabled?: boolean;\n  /**\n   * Remove padding from tooltip wrapper (useful for precise alignment)\n   */\n  noPadding?: boolean;\n  /**\n   * When true, skips wiring aria-describedby between the trigger and tooltip content.\n   * Use when the tooltip label duplicates the trigger's accessible name — avoids redundant announcements.\n   */\n  noDescribedBy?: boolean;\n}\n\nexport const InfoTooltip = ({\n  label,\n  children,\n  iconColor = '',\n  hoverBackgroundColor,\n  isDisabled = false,\n  noPadding = false,\n  noDescribedBy = false\n}: InfoTooltipProps) => {\n  const tooltipContentId = useStableId(undefined, 'info-tooltip');\n  const [isHovered, setIsHovered] = useState(false);\n  const [isFocused, setIsFocused] = useState(false);\n\n  // Show tooltip on hover OR focus (for keyboard accessibility)\n  const isOpen = isHovered || isFocused;\n\n  // Global Escape key handler (W3C WAI-ARIA tooltip pattern requirement)\n  const handleEscapeKey = useCallback((event: KeyboardEvent) => {\n    if (event.key === 'Escape') {\n      setIsHovered(false);\n      setIsFocused(false);\n      // Prevent other handlers (e.g., modal) from also closing - \"innermost first\" pattern\n      event.stopImmediatePropagation();\n    }\n  }, []);\n\n  useEffect(() => {\n    if (isOpen) {\n      document.addEventListener('keydown', handleEscapeKey);\n      return () => document.removeEventListener('keydown', handleEscapeKey);\n    }\n  }, [isOpen, handleEscapeKey]);\n\n  const interactionHandlers = {\n    onMouseEnter: () => setIsHovered(true),\n    onMouseLeave: () => setIsHovered(false),\n    onFocus: (event: React.FocusEvent<HTMLDivElement>) => {\n      const focusTarget = event.target as HTMLElement;\n      if (focusTarget.matches(':focus-visible')) {\n        setIsFocused(true);\n      }\n    },\n    onBlur: () => setIsFocused(false)\n  };\n\n  return (\n    <div\n      className={`se-design-info-tooltip-outer ${isDisabled ? 'se-design-info-tooltip-wrapper-disabled' : ''}`}\n      {...(isDisabled ? {} : interactionHandlers)}\n    >\n      <Popover\n        className=\"inline-flex items-center\"\n        position={'bottom-center'}\n        isPopoverOpen={isOpen}\n        onPopoverToggle={(open) => {\n          // Sync popover state changes (e.g., Escape key) back to component state\n          if (!open) {\n            setIsHovered(false);\n            setIsFocused(false);\n          }\n        }}\n        renderPopoverSrcElement={() => {\n          const trigger =\n            !noDescribedBy && React.isValidElement(children)\n              ? React.cloneElement(children as React.ReactElement<Record<string, unknown>>, {\n                  'aria-describedby': tooltipContentId,\n                  ariaDescribedBy: tooltipContentId\n                })\n              : children;\n          return (\n            <div\n              className={`se-design-info-tooltip-src ${noPadding ? 'no-padding' : ''} ${\n                isDisabled ? 'se-design-info-tooltip-disabled' : ''\n              }`}\n              style={\n                {\n                  '--info-tooltip-icon-color': iconColor,\n                  ...(hoverBackgroundColor ? { '--info-tooltip-hover-bg': hoverBackgroundColor } : {}),\n                  cursor: isDisabled ? 'not-allowed' : 'pointer'\n                } as React.CSSProperties\n              }\n            >\n              {trigger}\n            </div>\n          );\n        }}\n        renderPopoverContents={() => (\n          <div\n            id={tooltipContentId}\n            role=\"tooltip\"\n            className=\"se-design-info-tooltip-content\"\n            data-automation-id=\"se-design-info-tooltip-content\"\n          >\n            {label}\n          </div>\n        )}\n        isWithPortal\n        noBorder\n        disableClickToggle\n        popoverContentStyleProperty={{\n          zIndex: 2000,\n          backgroundColor: ''\n        }}\n      />\n    </div>\n  );\n};\n"],"names":["InfoTooltip","label","children","iconColor","hoverBackgroundColor","isDisabled","noPadding","noDescribedBy","tooltipContentId","useStableId","undefined","isHovered","setIsHovered","useState","isFocused","setIsFocused","isOpen","handleEscapeKey","useCallback","event","key","stopImmediatePropagation","useEffect","document","addEventListener","removeEventListener","interactionHandlers","onMouseEnter","onMouseLeave","onFocus","target","matches","onBlur","React","createElement","_extends","className","Popover","position","isPopoverOpen","onPopoverToggle","open","renderPopoverSrcElement","trigger","isValidElement","cloneElement","ariaDescribedBy","style","cursor","renderPopoverContents","id","role","isWithPortal","noBorder","disableClickToggle","popoverContentStyleProperty","zIndex","backgroundColor"],"mappings":";;;;;;;;;;;;;AAyBO,MAAMA,IAAcA,CAAC;AAAA,EAC1BC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,sBAAAA;AAAAA,EACAC,YAAAA,IAAa;AAAA,EACbC,WAAAA,IAAY;AAAA,EACZC,eAAAA,IAAgB;AACA,MAAM;AACtB,QAAMC,IAAmBC,EAAYC,QAAW,cAAc,GACxD,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1C,CAACC,GAAWC,CAAY,IAAIF,EAAS,EAAK,GAG1CG,IAASL,KAAaG,GAGtBG,IAAkBC,EAAY,CAACC,MAAyB;AAC5D,IAAIA,EAAMC,QAAQ,aAChBR,EAAa,EAAK,GAClBG,EAAa,EAAK,GAElBI,EAAME,yBAAAA;AAAAA,EAEV,GAAG,CAAA,CAAE;AAELC,EAAAA,EAAU,MAAM;AACd,QAAIN;AACFO,sBAASC,iBAAiB,WAAWP,CAAe,GAC7C,MAAMM,SAASE,oBAAoB,WAAWR,CAAe;AAAA,EAExE,GAAG,CAACD,GAAQC,CAAe,CAAC;AAE5B,QAAMS,IAAsB;AAAA,IAC1BC,cAAcA,MAAMf,EAAa,EAAI;AAAA,IACrCgB,cAAcA,MAAMhB,EAAa,EAAK;AAAA,IACtCiB,SAASA,CAACV,MAA4C;AAEpD,MADoBA,EAAMW,OACVC,QAAQ,gBAAgB,KACtChB,EAAa,EAAI;AAAA,IAErB;AAAA,IACAiB,QAAQA,MAAMjB,EAAa,EAAK;AAAA,EAAA;AAGlC,SACEkB,gBAAAA,EAAAC,cAAA,OAAAC,EAAA;AAAA,IACEC,WAAW,gCAAgC/B,IAAa,4CAA4C,EAAE;AAAA,EAAA,GACjGA,IAAa,CAAA,IAAKqB,CAAmB,GAE1CO,gBAAAA,EAAAC,cAACG,GAAO;AAAA,IACND,WAAU;AAAA,IACVE,UAAU;AAAA,IACVC,eAAevB;AAAAA,IACfwB,iBAAkBC,CAAAA,MAAS;AAEzB,MAAKA,MACH7B,EAAa,EAAK,GAClBG,EAAa,EAAK;AAAA,IAEtB;AAAA,IACA2B,yBAAyBA,MAAM;AAC7B,YAAMC,IACJ,CAACpC,KAAiB0B,gBAAAA,EAAMW,eAAe1C,CAAQ,IAC3C+B,gBAAAA,EAAMY,aAAa3C,GAAyD;AAAA,QAC1E,oBAAoBM;AAAAA,QACpBsC,iBAAiBtC;AAAAA,MAAAA,CAClB,IACDN;AACN,aACE+B,gBAAAA,EAAAC,cAAA,OAAA;AAAA,QACEE,WAAW,8BAA8B9B,IAAY,eAAe,EAAE,IACpED,IAAa,oCAAoC,EAAE;AAAA,QAErD0C,OACE;AAAA,UACE,6BAA6B5C;AAAAA,UAC7B,GAAIC,IAAuB;AAAA,YAAE,2BAA2BA;AAAAA,UAAAA,IAAyB,CAAA;AAAA,UACjF4C,QAAQ3C,IAAa,gBAAgB;AAAA,QAAA;AAAA,MACvC,GAGDsC,CACE;AAAA,IAET;AAAA,IACAM,uBAAuBA,MACrBhB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,MACEgB,IAAI1C;AAAAA,MACJ2C,MAAK;AAAA,MACLf,WAAU;AAAA,MACV,sBAAmB;AAAA,IAAA,GAElBnC,CACE;AAAA,IAEPmD,cAAY;AAAA,IACZC,UAAQ;AAAA,IACRC,oBAAkB;AAAA,IAClBC,6BAA6B;AAAA,MAC3BC,QAAQ;AAAA,MACRC,iBAAiB;AAAA,IAAA;AAAA,EACnB,CACD,CACE;AAET;"}