@epilot/volt-ui-experimental-griffel 0.2.1 → 0.3.0

package/dist/components/date-time-picker/time-picker.js

@@ -1,18 +1,18 @@
-import { jsxs as $, jsx as u } from "react/jsx-runtime";
-import * as n from "react";
-import { shorthands as y } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
-import { SLOT_ATTR as x } from "../../packages/volt-runtime/dist/renderer/contract.js";
-import { mergeClasses as h } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
-import { makeVoltStyles as q } from "../../styles/make-styles.js";
-import { grayA5 as v, semAccentSolidHover as O, semAccentContrast as U, semAccentSolid as _, fontWeightSemibold as F, grayA4 as z, grayA11 as G, leadingSm as L, textSm as Q, grayA8 as X, leadingBase as J, textBase as K, grayA6 as P, radiusMd as A, spacingElement1 as Z } from "../../tokens/index.js";
-import { getHours as tt, getMinutes as et, updateTime as N, padNumber as rt } from "./date-time-picker-utils.js";
-const ot = Array.from({ length: 24 }, (H, e) => e), R = q({
+import { j as c } from "../../vendor/react/jsx-dev-runtime.js";
+import * as l from "react";
+import { shorthands as b } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
+import { SLOT_ATTR as N } from "../../packages/volt-runtime/dist/renderer/contract.js";
+import { mergeClasses as d } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
+import { makeVoltStyles as $ } from "../../styles/make-styles.js";
+import { radiusMd as H, grayA5 as q, spacingElement1 as O, semAccentSolidHover as _, semAccentContrast as z, semAccentSolid as G, fontWeightSemibold as j, grayA4 as L, grayA11 as Q, leadingSm as X, textSm as J, grayA8 as K, leadingBase as P, textBase as Z, grayA6 as ee } from "../../tokens/index.js";
+import { getHours as te, getMinutes as re, updateTime as E, padNumber as ie } from "./date-time-picker-utils.js";
+const le = Array.from({ length: 24 }, (M, t) => t), S = $({
   root: {
     display: "flex",
     flexDirection: "row",
     alignItems: "stretch",
     justifyContent: "center",
-    ...y.gap(Z)
+    ...b.gap(O)
   },
   fillHeight: {
     height: "100%"
@@ -33,10 +33,10 @@ const ot = Array.from({ length: 24 }, (H, e) => e), R = q({
     overflowX: "hidden",
     width: "100%",
     alignItems: "center",
-    ...y.borderRadius(A),
-    ...y.border("1px", "solid", v),
+    ...b.borderRadius(H),
+    ...b.border("1px", "solid", q),
     scrollbarWidth: "thin",
-    scrollbarColor: `${P} transparent`
+    scrollbarColor: `${ee} transparent`
   },
   scrollFixed: {
     height: "8rem"
@@ -51,39 +51,39 @@ const ot = Array.from({ length: 24 }, (H, e) => e), R = q({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    fontSize: K,
-    lineHeight: J,
-    fontWeight: F,
-    color: X
+    fontSize: Z,
+    lineHeight: P,
+    fontWeight: j,
+    color: K
   },
   timeBtn: {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    fontSize: Q,
-    lineHeight: L,
-    ...y.borderRadius(A),
+    fontSize: J,
+    lineHeight: X,
+    ...b.borderRadius(H),
     transitionProperty: "background-color, color",
     transitionDuration: "150ms",
     minHeight: "2rem",
     width: "100%",
     maxWidth: "3rem",
-    ...y.border("0"),
+    ...b.border("0"),
     outlineStyle: "none"
   },
   timeBtnDefault: {
     backgroundColor: "transparent",
-    color: G,
+    color: Q,
     ":hover": {
-      backgroundColor: z
+      backgroundColor: L
     }
   },
   timeBtnSelected: {
-    fontWeight: F,
-    backgroundColor: _,
-    color: U,
+    fontWeight: j,
+    backgroundColor: G,
+    color: z,
     ":hover": {
-      backgroundColor: O
+      backgroundColor: _
     }
   },
   timeBtnDisabled: {
@@ -93,179 +93,251 @@ const ot = Array.from({ length: 24 }, (H, e) => e), R = q({
   timeBtnEnabled: {
     cursor: "pointer"
   }
-}), w = n.memo(function({
-  value: e,
-  isSelected: c,
-  isDisabled: l,
-  onClick: d
+}), v = l.memo(function({
+  value: t,
+  isSelected: a,
+  isDisabled: o,
+  onClick: p
 }) {
-  const a = R(), f = n.useCallback(() => {
-    l || d(e);
-  }, [d, e, l]);
-  return /* @__PURE__ */ u(
+  const m = S(), f = l.useCallback(() => {
+    o || p(t);
+  }, [p, t, o]);
+  return /* @__PURE__ */ c.jsxDEV(
     "button",
     {
-      "aria-disabled": l,
-      "aria-pressed": c,
-      className: h(
-        a.timeBtn,
-        !c && a.timeBtnDefault,
-        c && a.timeBtnSelected,
-        l ? a.timeBtnDisabled : a.timeBtnEnabled
+      "aria-disabled": o,
+      "aria-pressed": a,
+      className: d(
+        m.timeBtn,
+        !a && m.timeBtnDefault,
+        a && m.timeBtnSelected,
+        o ? m.timeBtnDisabled : m.timeBtnEnabled
       ),
-      "data-selected": c,
+      "data-selected": a,
       "data-slot": "time-button",
-      [x]: "time-button",
-      "data-value": e,
-      disabled: l,
+      [N]: "time-button",
+      "data-value": t,
+      disabled: o,
       onClick: f,
       type: "button",
-      children: rt(e)
-    }
+      children: ie(t)
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/date-time-picker/time-picker.tsx",
+      lineNumber: 151,
+      columnNumber: 5
+    },
+    this
   );
 });
-w.displayName = "TimeButton";
-const ut = n.forwardRef(
+v.displayName = "TimeButton";
+const pe = l.forwardRef(
   function({
-    value: e,
-    onChange: c,
-    onTimeSelect: l,
-    disablePast: d = !1,
-    currentTimeInTimezone: a,
+    value: t,
+    onChange: a,
+    onTimeSelect: o,
+    disablePast: p = !1,
+    currentTimeInTimezone: m,
     fillHeight: f = !1,
-    minuteStep: I = 1,
-    className: j
-  }, W) {
-    const r = R(), g = Math.max(1, Math.floor(I)), M = n.useMemo(() => {
-      const t = [];
-      for (let i = 0; i < 60; i += g) t.push(i);
-      return t;
-    }, [g]), m = e !== null ? tt(e) : -1, S = e !== null ? et(e) : -1, p = e === null ? -1 : g === 1 ? S : Math.min(
-      M[M.length - 1],
-      Math.round(S / g) * g
-    ), C = n.useRef(null), B = n.useRef(null), s = n.useMemo(
-      () => a || /* @__PURE__ */ new Date(),
-      [a]
-    ), k = n.useMemo(() => e ? e.getFullYear() === s.getFullYear() && e.getMonth() === s.getMonth() && e.getDate() === s.getDate() : !1, [e, s]), b = s.getHours(), D = s.getMinutes(), T = n.useCallback(
-      (t) => !d || !k ? !1 : t < b,
-      [d, k, b]
-    ), E = n.useCallback(
-      (t) => !d || !k ? !1 : m < b ? !0 : m === b ? t < D : !1,
-      [d, k, m, b, D]
-    ), V = n.useCallback(
-      (t) => {
-        const i = e || s, o = p >= 0 ? p : 0;
-        c(N(i, t, o));
+    minuteStep: V = 1,
+    className: F,
+    hoursLabel: R = "Hours",
+    minutesLabel: U = "Minutes"
+  }, A) {
+    const r = S(), g = Math.max(1, Math.floor(V)), y = l.useMemo(() => {
+      const e = [];
+      for (let n = 0; n < 60; n += g) e.push(n);
+      return e;
+    }, [g]), u = t !== null ? te(t) : -1, C = t !== null ? re(t) : -1, h = t === null ? -1 : g === 1 ? C : Math.min(
+      y[y.length - 1],
+      Math.round(C / g) * g
+    ), w = l.useRef(null), D = l.useRef(null), s = l.useMemo(
+      () => m || /* @__PURE__ */ new Date(),
+      [m]
+    ), x = l.useMemo(() => t ? t.getFullYear() === s.getFullYear() && t.getMonth() === s.getMonth() && t.getDate() === s.getDate() : !1, [t, s]), k = s.getHours(), B = s.getMinutes(), I = l.useCallback(
+      (e) => !p || !x ? !1 : e < k,
+      [p, x, k]
+    ), W = l.useCallback(
+      (e) => !p || !x ? !1 : u < k ? !0 : u === k ? e < B : !1,
+      [p, x, u, k, B]
+    ), T = l.useCallback(
+      (e) => {
+        const n = t || s, i = h >= 0 ? h : 0;
+        a(E(n, e, i));
       },
-      [c, e, s, p]
-    ), Y = n.useCallback(
-      (t) => {
-        const i = e || s, o = m >= 0 ? m : 0;
-        c(N(i, o, t)), l == null || l();
+      [a, t, s, h]
+    ), Y = l.useCallback(
+      (e) => {
+        const n = t || s, i = u >= 0 ? u : 0;
+        a(E(n, i, e)), o == null || o();
       },
-      [c, l, e, s, m]
+      [a, o, t, s, u]
     );
-    return n.useEffect(() => {
-      var t, i;
-      if (C.current) {
-        const o = C.current.querySelector(
-          `[data-value="${m}"]`
+    return l.useEffect(() => {
+      var e, n;
+      if (w.current) {
+        const i = w.current.querySelector(
+          `[data-value="${u}"]`
         );
-        o && ((t = o.scrollIntoView) == null || t.call(o, {
+        i && ((e = i.scrollIntoView) == null || e.call(i, {
           block: "center",
           behavior: "auto"
         }));
       }
-      if (B.current) {
-        const o = B.current.querySelector(
-          `[data-value="${p}"]`
+      if (D.current) {
+        const i = D.current.querySelector(
+          `[data-value="${h}"]`
         );
-        o && ((i = o.scrollIntoView) == null || i.call(o, {
+        i && ((n = i.scrollIntoView) == null || n.call(i, {
           block: "center",
           behavior: "auto"
         }));
       }
-    }, []), /* @__PURE__ */ $(
+    }, []), /* @__PURE__ */ c.jsxDEV(
       "div",
       {
-        ref: W,
-        className: h(
+        ref: A,
+        className: d(
           r.root,
           f && r.fillHeight,
-          j
+          F
         ),
         "data-slot": "timepicker",
-        [x]: "timepicker",
+        [N]: "timepicker",
         children: [
-          /* @__PURE__ */ u(
+          /* @__PURE__ */ c.jsxDEV(
             "div",
             {
-              className: h(
+              className: d(
                 r.column,
                 f && r.columnFillHeight
               ),
-              children: /* @__PURE__ */ u(
+              children: /* @__PURE__ */ c.jsxDEV(
                 "div",
                 {
-                  className: h(
+                  className: d(
                     r.scroll,
                     f ? r.scrollFill : r.scrollFixed
                   ),
+                  "aria-label": R,
                   "data-slot": "timepicker-scroll",
-                  [x]: "timepicker-scroll",
-                  ref: C,
-                  children: ot.map((t) => /* @__PURE__ */ u(
-                    w,
+                  role: "group",
+                  [N]: "timepicker-scroll",
+                  ref: w,
+                  children: le.map((e) => /* @__PURE__ */ c.jsxDEV(
+                    v,
+                    {
+                      isDisabled: I(e),
+                      isSelected: e === u,
+                      onClick: T,
+                      value: e
+                    },
+                    e,
+                    !1,
                     {
-                      isDisabled: T(t),
-                      isSelected: t === m,
-                      onClick: V,
-                      value: t
+                      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/date-time-picker/time-picker.tsx",
+                      lineNumber: 333,
+                      columnNumber: 15
                     },
-                    t
+                    this
                   ))
-                }
+                },
+                void 0,
+                !1,
+                {
+                  fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/date-time-picker/time-picker.tsx",
+                  lineNumber: 321,
+                  columnNumber: 11
+                },
+                this
               )
-            }
+            },
+            void 0,
+            !1,
+            {
+              fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/date-time-picker/time-picker.tsx",
+              lineNumber: 315,
+              columnNumber: 9
+            },
+            this
           ),
-          /* @__PURE__ */ u("div", { className: r.separator, children: ":" }),
-          /* @__PURE__ */ u(
+          /* @__PURE__ */ c.jsxDEV("div", { className: r.separator, children: ":" }, void 0, !1, {
+            fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/date-time-picker/time-picker.tsx",
+            lineNumber: 344,
+            columnNumber: 9
+          }, this),
+          /* @__PURE__ */ c.jsxDEV(
             "div",
             {
-              className: h(
+              className: d(
                 r.column,
                 f && r.columnFillHeight
               ),
-              children: /* @__PURE__ */ u(
+              children: /* @__PURE__ */ c.jsxDEV(
                 "div",
                 {
-                  className: h(
+                  className: d(
                     r.scroll,
                     f ? r.scrollFill : r.scrollFixed
                   ),
+                  "aria-label": U,
                   "data-slot": "timepicker-scroll",
-                  [x]: "timepicker-scroll",
-                  ref: B,
-                  children: M.map((t) => /* @__PURE__ */ u(
-                    w,
+                  role: "group",
+                  [N]: "timepicker-scroll",
+                  ref: D,
+                  children: y.map((e) => /* @__PURE__ */ c.jsxDEV(
+                    v,
                     {
-                      isDisabled: E(t),
-                      isSelected: t === p,
+                      isDisabled: W(e),
+                      isSelected: e === h,
                       onClick: Y,
-                      value: t
+                      value: e
+                    },
+                    e,
+                    !1,
+                    {
+                      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/date-time-picker/time-picker.tsx",
+                      lineNumber: 364,
+                      columnNumber: 15
                     },
-                    t
+                    this
                   ))
-                }
+                },
+                void 0,
+                !1,
+                {
+                  fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/date-time-picker/time-picker.tsx",
+                  lineNumber: 352,
+                  columnNumber: 11
+                },
+                this
               )
-            }
+            },
+            void 0,
+            !1,
+            {
+              fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/date-time-picker/time-picker.tsx",
+              lineNumber: 346,
+              columnNumber: 9
+            },
+            this
           )
         ]
-      }
+      },
+      void 0,
+      !0,
+      {
+        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/date-time-picker/time-picker.tsx",
+        lineNumber: 305,
+        columnNumber: 7
+      },
+      this
     );
   }
 );
 export {
-  ut as TimePicker
+  pe as TimePicker
 };
 //# sourceMappingURL=time-picker.js.map

package/dist/components/date-time-picker/time-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-picker.js","sources":["../../../src/components/date-time-picker/time-picker.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nimport {\n  getHours,\n  getMinutes,\n  padNumber,\n  updateTime,\n} from \"./date-time-picker-utils\"\n\nconst HOURS = Array.from({ length: 24 }, (_, i) => i)\n\nexport type TimePickerProps = {\n  value: Date | null\n  onChange: (date: Date) => void\n  onTimeSelect?: () => void\n  disablePast?: boolean\n  currentTimeInTimezone?: Date\n  fillHeight?: boolean\n  minuteStep?: number\n  className?: string\n}\n\nconst useStyles = makeVoltStyles({\n  root: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"stretch\",\n    justifyContent: \"center\",\n    ...shorthands.gap(tokens.spacingElement1),\n  },\n  fillHeight: {\n    height: \"100%\",\n  },\n  column: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    width: \"3.5rem\",\n  },\n  columnFillHeight: {\n    minHeight: \"0\",\n  },\n  scroll: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    overflowY: \"auto\",\n    overflowX: \"hidden\",\n    width: \"100%\",\n    alignItems: \"center\",\n    ...shorthands.borderRadius(tokens.radiusMd),\n    ...shorthands.border(\"1px\", \"solid\", tokens.grayA5),\n    scrollbarWidth: \"thin\",\n    scrollbarColor: `${tokens.grayA6} transparent`,\n  },\n  scrollFixed: {\n    height: \"8rem\",\n  },\n  scrollFill: {\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n    minHeight: \"0\",\n  },\n  separator: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    fontSize: tokens.textBase,\n    lineHeight: tokens.leadingBase,\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.grayA8,\n  },\n  timeBtn: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    ...shorthands.borderRadius(tokens.radiusMd),\n    transitionProperty: \"background-color, color\",\n    transitionDuration: \"150ms\",\n    minHeight: \"2rem\",\n    width: \"100%\",\n    maxWidth: \"3rem\",\n    ...shorthands.border(\"0\"),\n    outlineStyle: \"none\",\n  },\n  timeBtnDefault: {\n    backgroundColor: \"transparent\",\n    color: tokens.grayA11,\n    \":hover\": {\n      backgroundColor: tokens.grayA4,\n    },\n  },\n  timeBtnSelected: {\n    fontWeight: tokens.fontWeightSemibold,\n    backgroundColor: tokens.semAccentSolid,\n    color: tokens.semAccentContrast,\n    \":hover\": {\n      backgroundColor: tokens.semAccentSolidHover,\n    },\n  },\n  timeBtnDisabled: {\n    cursor: \"not-allowed\",\n    opacity: 0.5,\n  },\n  timeBtnEnabled: {\n    cursor: \"pointer\",\n  },\n})\n\ntype TimeButtonProps = {\n  value: number\n  isSelected: boolean\n  isDisabled: boolean\n  onClick: (value: number) => void\n}\n\nconst TimeButton = React.memo(function TimeButton({\n  value,\n  isSelected,\n  isDisabled,\n  onClick,\n}: TimeButtonProps) {\n  const styles = useStyles()\n  const handleClick = React.useCallback(() => {\n    if (!isDisabled) {\n      onClick(value)\n    }\n  }, [onClick, value, isDisabled])\n\n  return (\n    <button\n      aria-disabled={isDisabled}\n      aria-pressed={isSelected}\n      className={mergeClasses(\n        styles.timeBtn,\n        !isSelected && styles.timeBtnDefault,\n        isSelected && styles.timeBtnSelected,\n        isDisabled ? styles.timeBtnDisabled : styles.timeBtnEnabled\n      )}\n      data-selected={isSelected}\n      data-slot=\"time-button\"\n      {...{ [SLOT_ATTR]: \"time-button\" }}\n      data-value={value}\n      disabled={isDisabled}\n      onClick={handleClick}\n      type=\"button\"\n    >\n      {padNumber(value)}\n    </button>\n  )\n})\n\nTimeButton.displayName = \"TimeButton\"\n\nexport const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>(\n  function TimePicker(\n    {\n      value,\n      onChange,\n      onTimeSelect,\n      disablePast = false,\n      currentTimeInTimezone,\n      fillHeight = false,\n      minuteStep = 1,\n      className,\n    },\n    ref\n  ) {\n    const styles = useStyles()\n    const step = Math.max(1, Math.floor(minuteStep))\n\n    // Enumerate buckets 0, step, 2·step… stopping at <60 so a step that\n    // doesn't divide 60 evenly (e.g. 7) can never produce an out-of-range\n    // value like 63.\n    const MINUTES = React.useMemo(() => {\n      const buckets: number[] = []\n      for (let m = 0; m < 60; m += step) buckets.push(m)\n\n      return buckets\n    }, [step])\n\n    const selectedHour = value !== null ? getHours(value) : -1\n    const rawMinute = value !== null ? getMinutes(value) : -1\n    const selectedMinute =\n      value === null\n        ? -1\n        : step === 1\n          ? rawMinute\n          : Math.min(\n              MINUTES[MINUTES.length - 1],\n              Math.round(rawMinute / step) * step\n            )\n\n    const hoursRef = React.useRef<HTMLDivElement>(null)\n    const minutesRef = React.useRef<HTMLDivElement>(null)\n\n    const now = React.useMemo(\n      () => currentTimeInTimezone || new Date(),\n      [currentTimeInTimezone]\n    )\n    const isToday = React.useMemo(() => {\n      if (!value) return false\n\n      return (\n        value.getFullYear() === now.getFullYear() &&\n        value.getMonth() === now.getMonth() &&\n        value.getDate() === now.getDate()\n      )\n    }, [value, now])\n\n    const currentHour = now.getHours()\n    const currentMinute = now.getMinutes()\n\n    const isHourDisabled = React.useCallback(\n      (hour: number) => {\n        if (!disablePast || !isToday) return false\n\n        return hour < currentHour\n      },\n      [disablePast, isToday, currentHour]\n    )\n\n    const isMinuteDisabled = React.useCallback(\n      (minute: number) => {\n        if (!disablePast || !isToday) return false\n        if (selectedHour < currentHour) return true\n        if (selectedHour === currentHour) return minute < currentMinute\n\n        return false\n      },\n      [disablePast, isToday, selectedHour, currentHour, currentMinute]\n    )\n\n    const handleHourChange = React.useCallback(\n      (hour: number) => {\n        const base = value || now\n        const minute = selectedMinute >= 0 ? selectedMinute : 0\n\n        onChange(updateTime(base, hour, minute))\n      },\n      [onChange, value, now, selectedMinute]\n    )\n\n    const handleMinuteChange = React.useCallback(\n      (minute: number) => {\n        const base = value || now\n        const hour = selectedHour >= 0 ? selectedHour : 0\n\n        onChange(updateTime(base, hour, minute))\n        onTimeSelect?.()\n      },\n      [onChange, onTimeSelect, value, now, selectedHour]\n    )\n\n    React.useEffect(() => {\n      if (hoursRef.current) {\n        const selectedElement = hoursRef.current.querySelector(\n          `[data-value=\"${selectedHour}\"]`\n        )\n\n        if (selectedElement) {\n          selectedElement.scrollIntoView?.({\n            block: \"center\",\n            behavior: \"auto\",\n          })\n        }\n      }\n      if (minutesRef.current) {\n        const selectedElement = minutesRef.current.querySelector(\n          `[data-value=\"${selectedMinute}\"]`\n        )\n\n        if (selectedElement) {\n          selectedElement.scrollIntoView?.({\n            block: \"center\",\n            behavior: \"auto\",\n          })\n        }\n      }\n    }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n    return (\n      <div\n        ref={ref}\n        className={mergeClasses(\n          styles.root,\n          fillHeight && styles.fillHeight,\n          className\n        )}\n        data-slot=\"timepicker\"\n        {...{ [SLOT_ATTR]: \"timepicker\" }}\n      >\n        <div\n          className={mergeClasses(\n            styles.column,\n            fillHeight && styles.columnFillHeight\n          )}\n        >\n          <div\n            className={mergeClasses(\n              styles.scroll,\n              fillHeight ? styles.scrollFill : styles.scrollFixed\n            )}\n            data-slot=\"timepicker-scroll\"\n            {...{ [SLOT_ATTR]: \"timepicker-scroll\" }}\n            ref={hoursRef}\n          >\n            {HOURS.map((hour) => (\n              <TimeButton\n                isDisabled={isHourDisabled(hour)}\n                isSelected={hour === selectedHour}\n                key={hour}\n                onClick={handleHourChange}\n                value={hour}\n              />\n            ))}\n          </div>\n        </div>\n\n        <div className={styles.separator}>:</div>\n\n        <div\n          className={mergeClasses(\n            styles.column,\n            fillHeight && styles.columnFillHeight\n          )}\n        >\n          <div\n            className={mergeClasses(\n              styles.scroll,\n              fillHeight ? styles.scrollFill : styles.scrollFixed\n            )}\n            data-slot=\"timepicker-scroll\"\n            {...{ [SLOT_ATTR]: \"timepicker-scroll\" }}\n            ref={minutesRef}\n          >\n            {MINUTES.map((minute) => (\n              <TimeButton\n                isDisabled={isMinuteDisabled(minute)}\n                isSelected={minute === selectedMinute}\n                key={minute}\n                onClick={handleMinuteChange}\n                value={minute}\n              />\n            ))}\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\n"],"names":["HOURS","_","i","useStyles","makeVoltStyles","shorthands","tokens.spacingElement1","tokens.radiusMd","tokens.grayA5","tokens.grayA6","tokens.textBase","tokens.leadingBase","tokens.fontWeightSemibold","tokens.grayA8","tokens.textSm","tokens.leadingSm","tokens.grayA11","tokens.grayA4","tokens.semAccentSolid","tokens.semAccentContrast","tokens.semAccentSolidHover","TimeButton","React","value","isSelected","isDisabled","onClick","styles","handleClick","jsx","mergeClasses","SLOT_ATTR","TimePicker","onChange","onTimeSelect","disablePast","currentTimeInTimezone","fillHeight","minuteStep","className","ref","step","MINUTES","buckets","m","selectedHour","getHours","rawMinute","getMinutes","selectedMinute","hoursRef","minutesRef","now","isToday","currentHour","currentMinute","isHourDisabled","hour","isMinuteDisabled","minute","handleHourChange","base","updateTime","handleMinuteChange","selectedElement","_a","_b","jsxs"],"mappings":"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"}
+{"version":3,"file":"time-picker.js","sources":["../../../src/components/date-time-picker/time-picker.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nimport {\n  getHours,\n  getMinutes,\n  padNumber,\n  updateTime,\n} from \"./date-time-picker-utils\"\n\nconst HOURS = Array.from({ length: 24 }, (_, i) => i)\n\nexport type TimePickerProps = {\n  value: Date | null\n  onChange: (date: Date) => void\n  onTimeSelect?: () => void\n  disablePast?: boolean\n  currentTimeInTimezone?: Date\n  fillHeight?: boolean\n  minuteStep?: number\n  className?: string\n  /**\n   * Accessible name for the hours column. Pass a translated string.\n   *\n   * These are ACCESSIBLE NAMES, not visible headers, and the distinction is deliberate. v1 ≤1.3.x\n   * had `hoursLabel`/`minutesLabel` that rendered visible \"HH\"/\"MM\" headings; v1 deleted them in\n   * `138fe05` (2026-06-25) and this package mirrors v1's current output, which Rule 0 makes the\n   * fidelity target. But v1 replaced them with nothing, so both libraries now hand a screen reader\n   * two unnamed columns of bare numbers. Naming them via `aria-label` closes that without moving a\n   * pixel — the VR gate still matches v1 specimen for specimen.\n   */\n  hoursLabel?: string\n  /** Accessible name for the minutes column. Pass a translated string. See `hoursLabel`. */\n  minutesLabel?: string\n}\n\nconst useStyles = makeVoltStyles({\n  root: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"stretch\",\n    justifyContent: \"center\",\n    ...shorthands.gap(tokens.spacingElement1),\n  },\n  fillHeight: {\n    height: \"100%\",\n  },\n  column: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    width: \"3.5rem\",\n  },\n  columnFillHeight: {\n    minHeight: \"0\",\n  },\n  scroll: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    overflowY: \"auto\",\n    overflowX: \"hidden\",\n    width: \"100%\",\n    alignItems: \"center\",\n    ...shorthands.borderRadius(tokens.radiusMd),\n    ...shorthands.border(\"1px\", \"solid\", tokens.grayA5),\n    scrollbarWidth: \"thin\",\n    scrollbarColor: `${tokens.grayA6} transparent`,\n  },\n  scrollFixed: {\n    height: \"8rem\",\n  },\n  scrollFill: {\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n    minHeight: \"0\",\n  },\n  separator: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    fontSize: tokens.textBase,\n    lineHeight: tokens.leadingBase,\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.grayA8,\n  },\n  timeBtn: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    ...shorthands.borderRadius(tokens.radiusMd),\n    transitionProperty: \"background-color, color\",\n    transitionDuration: \"150ms\",\n    minHeight: \"2rem\",\n    width: \"100%\",\n    maxWidth: \"3rem\",\n    ...shorthands.border(\"0\"),\n    outlineStyle: \"none\",\n  },\n  timeBtnDefault: {\n    backgroundColor: \"transparent\",\n    color: tokens.grayA11,\n    \":hover\": {\n      backgroundColor: tokens.grayA4,\n    },\n  },\n  timeBtnSelected: {\n    fontWeight: tokens.fontWeightSemibold,\n    backgroundColor: tokens.semAccentSolid,\n    color: tokens.semAccentContrast,\n    \":hover\": {\n      backgroundColor: tokens.semAccentSolidHover,\n    },\n  },\n  timeBtnDisabled: {\n    cursor: \"not-allowed\",\n    opacity: 0.5,\n  },\n  timeBtnEnabled: {\n    cursor: \"pointer\",\n  },\n})\n\ntype TimeButtonProps = {\n  value: number\n  isSelected: boolean\n  isDisabled: boolean\n  onClick: (value: number) => void\n}\n\nconst TimeButton = React.memo(function TimeButton({\n  value,\n  isSelected,\n  isDisabled,\n  onClick,\n}: TimeButtonProps) {\n  const styles = useStyles()\n  const handleClick = React.useCallback(() => {\n    if (!isDisabled) {\n      onClick(value)\n    }\n  }, [onClick, value, isDisabled])\n\n  return (\n    <button\n      aria-disabled={isDisabled}\n      aria-pressed={isSelected}\n      className={mergeClasses(\n        styles.timeBtn,\n        !isSelected && styles.timeBtnDefault,\n        isSelected && styles.timeBtnSelected,\n        isDisabled ? styles.timeBtnDisabled : styles.timeBtnEnabled\n      )}\n      data-selected={isSelected}\n      data-slot=\"time-button\"\n      {...{ [SLOT_ATTR]: \"time-button\" }}\n      data-value={value}\n      disabled={isDisabled}\n      onClick={handleClick}\n      type=\"button\"\n    >\n      {padNumber(value)}\n    </button>\n  )\n})\n\nTimeButton.displayName = \"TimeButton\"\n\nexport const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>(\n  function TimePicker(\n    {\n      value,\n      onChange,\n      onTimeSelect,\n      disablePast = false,\n      currentTimeInTimezone,\n      fillHeight = false,\n      minuteStep = 1,\n      className,\n      hoursLabel = \"Hours\",\n      minutesLabel = \"Minutes\",\n    },\n    ref\n  ) {\n    const styles = useStyles()\n    const step = Math.max(1, Math.floor(minuteStep))\n\n    // Enumerate buckets 0, step, 2·step… stopping at <60 so a step that\n    // doesn't divide 60 evenly (e.g. 7) can never produce an out-of-range\n    // value like 63.\n    const MINUTES = React.useMemo(() => {\n      const buckets: number[] = []\n      for (let m = 0; m < 60; m += step) buckets.push(m)\n\n      return buckets\n    }, [step])\n\n    const selectedHour = value !== null ? getHours(value) : -1\n    const rawMinute = value !== null ? getMinutes(value) : -1\n    const selectedMinute =\n      value === null\n        ? -1\n        : step === 1\n          ? rawMinute\n          : Math.min(\n              MINUTES[MINUTES.length - 1],\n              Math.round(rawMinute / step) * step\n            )\n\n    const hoursRef = React.useRef<HTMLDivElement>(null)\n    const minutesRef = React.useRef<HTMLDivElement>(null)\n\n    const now = React.useMemo(\n      () => currentTimeInTimezone || new Date(),\n      [currentTimeInTimezone]\n    )\n    const isToday = React.useMemo(() => {\n      if (!value) return false\n\n      return (\n        value.getFullYear() === now.getFullYear() &&\n        value.getMonth() === now.getMonth() &&\n        value.getDate() === now.getDate()\n      )\n    }, [value, now])\n\n    const currentHour = now.getHours()\n    const currentMinute = now.getMinutes()\n\n    const isHourDisabled = React.useCallback(\n      (hour: number) => {\n        if (!disablePast || !isToday) return false\n\n        return hour < currentHour\n      },\n      [disablePast, isToday, currentHour]\n    )\n\n    const isMinuteDisabled = React.useCallback(\n      (minute: number) => {\n        if (!disablePast || !isToday) return false\n        if (selectedHour < currentHour) return true\n        if (selectedHour === currentHour) return minute < currentMinute\n\n        return false\n      },\n      [disablePast, isToday, selectedHour, currentHour, currentMinute]\n    )\n\n    const handleHourChange = React.useCallback(\n      (hour: number) => {\n        const base = value || now\n        const minute = selectedMinute >= 0 ? selectedMinute : 0\n\n        onChange(updateTime(base, hour, minute))\n      },\n      [onChange, value, now, selectedMinute]\n    )\n\n    const handleMinuteChange = React.useCallback(\n      (minute: number) => {\n        const base = value || now\n        const hour = selectedHour >= 0 ? selectedHour : 0\n\n        onChange(updateTime(base, hour, minute))\n        onTimeSelect?.()\n      },\n      [onChange, onTimeSelect, value, now, selectedHour]\n    )\n\n    React.useEffect(() => {\n      if (hoursRef.current) {\n        const selectedElement = hoursRef.current.querySelector(\n          `[data-value=\"${selectedHour}\"]`\n        )\n\n        if (selectedElement) {\n          selectedElement.scrollIntoView?.({\n            block: \"center\",\n            behavior: \"auto\",\n          })\n        }\n      }\n      if (minutesRef.current) {\n        const selectedElement = minutesRef.current.querySelector(\n          `[data-value=\"${selectedMinute}\"]`\n        )\n\n        if (selectedElement) {\n          selectedElement.scrollIntoView?.({\n            block: \"center\",\n            behavior: \"auto\",\n          })\n        }\n      }\n    }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n    return (\n      <div\n        ref={ref}\n        className={mergeClasses(\n          styles.root,\n          fillHeight && styles.fillHeight,\n          className\n        )}\n        data-slot=\"timepicker\"\n        {...{ [SLOT_ATTR]: \"timepicker\" }}\n      >\n        <div\n          className={mergeClasses(\n            styles.column,\n            fillHeight && styles.columnFillHeight\n          )}\n        >\n          <div\n            className={mergeClasses(\n              styles.scroll,\n              fillHeight ? styles.scrollFill : styles.scrollFixed\n            )}\n            aria-label={hoursLabel}\n            data-slot=\"timepicker-scroll\"\n            role=\"group\"\n            {...{ [SLOT_ATTR]: \"timepicker-scroll\" }}\n            ref={hoursRef}\n          >\n            {HOURS.map((hour) => (\n              <TimeButton\n                isDisabled={isHourDisabled(hour)}\n                isSelected={hour === selectedHour}\n                key={hour}\n                onClick={handleHourChange}\n                value={hour}\n              />\n            ))}\n          </div>\n        </div>\n\n        <div className={styles.separator}>:</div>\n\n        <div\n          className={mergeClasses(\n            styles.column,\n            fillHeight && styles.columnFillHeight\n          )}\n        >\n          <div\n            className={mergeClasses(\n              styles.scroll,\n              fillHeight ? styles.scrollFill : styles.scrollFixed\n            )}\n            aria-label={minutesLabel}\n            data-slot=\"timepicker-scroll\"\n            role=\"group\"\n            {...{ [SLOT_ATTR]: \"timepicker-scroll\" }}\n            ref={minutesRef}\n          >\n            {MINUTES.map((minute) => (\n              <TimeButton\n                isDisabled={isMinuteDisabled(minute)}\n                isSelected={minute === selectedMinute}\n                key={minute}\n                onClick={handleMinuteChange}\n                value={minute}\n              />\n            ))}\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\n"],"names":["HOURS","_","i","useStyles","makeVoltStyles","shorthands","tokens.spacingElement1","tokens.radiusMd","tokens.grayA5","tokens.grayA6","tokens.textBase","tokens.leadingBase","tokens.fontWeightSemibold","tokens.grayA8","tokens.textSm","tokens.leadingSm","tokens.grayA11","tokens.grayA4","tokens.semAccentSolid","tokens.semAccentContrast","tokens.semAccentSolidHover","TimeButton","React","value","isSelected","isDisabled","onClick","styles","handleClick","jsxDEV","mergeClasses","SLOT_ATTR","TimePicker","onChange","onTimeSelect","disablePast","currentTimeInTimezone","fillHeight","minuteStep","className","hoursLabel","minutesLabel","ref","step","MINUTES","buckets","m","selectedHour","getHours","rawMinute","getMinutes","selectedMinute","hoursRef","minutesRef","now","isToday","currentHour","currentMinute","isHourDisabled","hour","isMinuteDisabled","minute","handleHourChange","base","updateTime","handleMinuteChange","selectedElement","_a","_b"],"mappings":"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"}

package/dist/components/density-provider/density-provider.js

@@ -0,0 +1,48 @@
+import { j as r } from "../../vendor/react/jsx-dev-runtime.js";
+import * as o from "react";
+import { SLOT_ATTR as u } from "../../packages/volt-runtime/dist/renderer/contract.js";
+const c = ["compact", "normal", "comfortable"], t = (e) => c.includes(e) ? e : "normal", s = o.createContext(void 0), f = o.forwardRef(function({ density: i, className: l, children: a, ...m }, d) {
+  const n = t(i);
+  return /* @__PURE__ */ r.jsxDEV(
+    "div",
+    {
+      ref: d,
+      "data-slot": "density-provider",
+      [u]: "density-provider",
+      className: l,
+      ...m,
+      "data-density": n,
+      children: /* @__PURE__ */ r.jsxDEV(s.Provider, { value: n, children: a }, void 0, !1, {
+        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/density-provider/density-provider.tsx",
+        lineNumber: 76,
+        columnNumber: 7
+      }, this)
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/density-provider/density-provider.tsx",
+      lineNumber: 63,
+      columnNumber: 5
+    },
+    this
+  );
+}), x = () => o.useContext(s), y = ({
+  density: e,
+  children: i
+}) => e === void 0 ? /* @__PURE__ */ r.jsxDEV(r.Fragment, { children: i }, void 0, !1, {
+  fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/density-provider/density-provider.tsx",
+  lineNumber: 113,
+  columnNumber: 37
+}, void 0) : /* @__PURE__ */ r.jsxDEV(s.Provider, { value: t(e), children: i }, void 0, !1, {
+  fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/density-provider/density-provider.tsx",
+  lineNumber: 115,
+  columnNumber: 5
+}, void 0);
+export {
+  y as DensityContextBoundary,
+  f as DensityProvider,
+  t as canonicalDensity,
+  x as useDensity
+};
+//# sourceMappingURL=density-provider.js.map

package/dist/components/density-provider/density-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"density-provider.js","sources":["../../../src/components/density-provider/density-provider.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\n\n/**\n * DENSITY-SPEC.md §4.4 — the two density mechanisms, and why this component is the only one that\n * does both:\n *\n * - CSS custom-property inheritance (no JavaScript) already delivers the shell's AMBIENT default\n *   to every element, portalled or not — a Radix portal root is still an ordinary DOM descendant\n *   of `<html>`, so it inherits `<html data-density=\"...\">` with zero wiring. No provider needed\n *   for that common case.\n * - A bare `data-density` DOM attribute alone never reaches a portal that ISN'T a DOM descendant of\n *   it — setting a DOM attribute runs no React code, so `useDensity()` inside such a subtree (or a\n *   sibling-in-DOM, descendant-in-React-tree portal) sees nothing from it.\n *\n * `DensityProvider` sets both at once: a real DOM `data-density` boundary for ordinary (non-portal)\n * CSS inheritance, and a React context value that portal-content components (`SelectContent`,\n * `PopoverContent`, `DialogContent`, etc.) read via `useDensity()` to re-stamp themselves — since\n * portalled content is a React-tree descendant but a DOM sibling, only the context path reaches it.\n */\n\nexport type Density = \"compact\" | \"normal\" | \"comfortable\"\n\nconst CANONICAL_DENSITIES: readonly Density[] = [\"compact\", \"normal\", \"comfortable\"]\n\n/**\n * Invalid runtime input (a bad string slipping past TypeScript) normalizes to \"normal\". Exported\n * (package-internal — NOT added to `src/index.ts`, no new public export) so `Table`/`DataTable`/\n * `TableHead`/`TableCell` can apply the exact same normalization to their own DOM `data-density`\n * stamp that `DensityContextBoundary` already applies to the context value — one function, so the\n * two can never independently disagree on what an invalid input normalizes to\n * (TABLE-DENSITY-REVIEW-1.md #2).\n */\nexport const canonicalDensity = (density: Density): Density =>\n  CANONICAL_DENSITIES.includes(density) ? density : \"normal\"\n\n/**\n * Unexported by design, same as `ListContext` — read only through `useDensity()`. Default\n * `undefined`: a component nested with no `DensityProvider` ancestor gets `undefined`, never a\n * fabricated \"normal\" — that would be a JS reading of ambient CSS this hook explicitly does not do.\n */\nconst DensityContext = React.createContext<Density | undefined>(undefined)\n\nexport type DensityProviderProps = React.ComponentProps<\"div\"> & {\n  /** The explicit density boundary for this subtree. No default — always a real caller choice. */\n  density: Density\n}\n\n/**\n * Ordinary HTML div semantics: forwards `ref`/`className`/`style`/every other div prop, no\n * polymorphic `asChild`. Renders one real DOM node (the boundary) wrapping a React context\n * provider around `children` — not two independent trees, so context and DOM boundary can never\n * disagree about which density is active.\n */\nexport const DensityProvider = React.forwardRef<\n  HTMLDivElement,\n  DensityProviderProps\n>(function DensityProvider({ density, className, children, ...props }, ref) {\n  const value = canonicalDensity(density)\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"density-provider\"\n      {...{ [SLOT_ATTR]: \"density-provider\" }}\n      className={className}\n      {...props}\n      // Authoritative, spread LAST: a raw caller `data-density` prop (part of `...props`, since\n      // `DensityProviderProps` extends every native div prop) must never win over the normalized\n      // `density` prop — the DOM attribute and the context value below both derive from the same\n      // `value`, and this ordering is what keeps that invariant true even when a caller passes a\n      // conflicting literal `data-density` alongside `density` (finish-line integration fix).\n      data-density={value}\n    >\n      <DensityContext.Provider value={value}>\n        {children}\n      </DensityContext.Provider>\n    </div>\n  )\n})\n\n/**\n * Returns the nearest explicit `DensityProvider` value, or `undefined` if none exists. Never reads\n * `getComputedStyle`/CSS custom properties — an `undefined` result means \"no explicit override in\n * the React tree,\" not \"ambient density is unknown\"; the caller's job (portal content components)\n * is to stamp nothing in that case and let ordinary CSS inheritance supply the ambient value.\n */\nexport const useDensity = (): Density | undefined => React.useContext(DensityContext)\n\n/**\n * Internal, package-private — NOT exported from `src/index.ts`. `DensityProvider` is the only\n * public density-boundary API; this is a context-only variant for a component that already owns a\n * real DOM boundary of its own (e.g. `Table`, whose root is a `<table>` and cannot safely have\n * `DensityProvider`'s wrapping `<div>` injected into its child structure without breaking table\n * semantics) and just needs the same context so its own descendant portals (e.g.\n * `table-pagination.tsx`'s inline Select) can read an explicit override via `useDensity()`.\n *\n * Renders no DOM node. Provides nothing (passes `children` through untouched, leaving whatever\n * outer `DensityContext` value already exists) when `density` is `undefined` — omitted density\n * must not fabricate a boundary any more than `DensityProvider` fabricates a DOM stamp.\n *\n * @no-host-element A pure context provider — it renders no host element (a `React.Context.Provider`\n * is not one), so there is no DOM node for a forwarded ref to ever reach.\n */\nexport const DensityContextBoundary = ({\n  density,\n  children,\n}: {\n  density: Density | undefined\n  children: React.ReactNode\n}): React.ReactElement => {\n  if (density === undefined) return <>{children}</>\n  return (\n    <DensityContext.Provider value={canonicalDensity(density)}>\n      {children}\n    </DensityContext.Provider>\n  )\n}\n"],"names":["CANONICAL_DENSITIES","canonicalDensity","density","DensityContext","React","DensityProvider","className","children","props","ref","value","jsxDEV","SLOT_ATTR","useDensity","DensityContextBoundary","Fragment","this"],"mappings":";;;AAwBA,MAAMA,IAA0C,CAAC,WAAW,UAAU,aAAa,GAUtEC,IAAmB,CAACC,MAC/BF,EAAoB,SAASE,CAAO,IAAIA,IAAU,UAO9CC,IAAiBC,EAAM,cAAmC,MAAS,GAa5DC,IAAkBD,EAAM,WAGnC,SAAyB,EAAE,SAAAF,GAAS,WAAAI,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAASC,GAAK;AAC1E,QAAMC,IAAQT,EAAiBC,CAAO;AAEtC,SACES,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,WAAAN;AAAA,MACC,GAAGE;AAAA,MAMJ,gBAAcE;AAAA,MAEd,UAAAC,gBAAAA,EAAAA,OAACR,EAAe,UAAf,EAAwB,OAAAO,GACtB,UAAAH,EAAA,GADH,QAAA,IAAA;AAAA,QAAA,UAAA;AAAA,QAAA,YAAA;AAAA,QAAA,cAAA;AAAA,MAAA,GAAA,IAEA;AAAA,IAAA;AAAA,IAfF;AAAA,IAAA;AAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA;AAAA,IAAA;AAAA,EAAA;AAkBJ,CAAC,GAQYM,IAAa,MAA2BT,EAAM,WAAWD,CAAc,GAiBvEW,IAAyB,CAAC;AAAA,EACrC,SAAAZ;AAAA,EACA,UAAAK;AACF,MAIML,MAAY,SAAkBS,gBAAAA,EAAAA,OAAAI,EAAAA,UAAA,EAAG,UAAAR,EAAA,GAAH,QAAA,IAAA;AAAA,EAAA,UAAA;AAAA,EAAA,YAAA;AAAA,EAAA,cAAA;AAAA,GAAAS,MAAY,IAE5CL,gBAAAA,SAACR,EAAe,UAAf,EAAwB,OAAOF,EAAiBC,CAAO,GACrD,UAAAK,KADH,QAAA,IAAA;AAAA,EAAA,UAAA;AAAA,EAAA,YAAA;AAAA,EAAA,cAAA;AAAA,GAAAS,MAEA;"}