impact-nova 2.5.6 → 2.5.8

package/dist/components/flows/guidance/renderers/guidance-renderer-shared.js

@@ -1,17 +1,17 @@
 import * as A from "react";
-const T = 8, S = 12, H = 16, v = 32;
-function R(e) {
+const T = 16, b = 12, S = 16, v = 32;
+function H(e) {
   const t = window.getComputedStyle(e);
   return t.overflow === "hidden" || t.overflow === "auto" || t.overflow === "scroll" || t.overflow === "clip" || t.overflowY === "hidden" || t.overflowY === "auto" || t.overflowY === "scroll" || t.overflowY === "clip" || t.overflowX === "hidden" || t.overflowX === "auto" || t.overflowX === "scroll" || t.overflowX === "clip";
 }
-function C(e) {
+function R(e) {
   const t = [];
   let n = e.parentElement;
   for (; n; )
-    R(n) && t.push(n), n = n.parentElement;
+    H(n) && t.push(n), n = n.parentElement;
   return t;
 }
-function h(e, t) {
+function w(e, t) {
   const n = Math.max(e.x, t.x), o = Math.max(e.y, t.y), i = Math.min(
     e.x + e.width,
     t.x + t.width
@@ -26,7 +26,7 @@ function h(e, t) {
     height: r - o
   };
 }
-function f(e) {
+function m(e) {
   return {
     x: e.left,
     y: e.top,
@@ -35,13 +35,13 @@ function f(e) {
   };
 }
 function M(e) {
-  let t = f(
+  let t = m(
     e.getBoundingClientRect()
   );
-  for (const i of C(e)) {
-    const r = h(
+  for (const i of R(e)) {
+    const r = w(
       t,
-      f(i.getBoundingClientRect())
+      m(i.getBoundingClientRect())
     );
     if (!r)
       break;
@@ -53,28 +53,12 @@ function M(e) {
     width: window.innerWidth,
     height: window.innerHeight
   };
-  return h(
+  return w(
     t,
     n
   ) ?? t;
 }
-function E(e) {
-  let t = {
-    x: 0,
-    y: 0,
-    width: window.innerWidth,
-    height: window.innerHeight
-  };
-  for (const n of C(e)) {
-    const o = h(
-      t,
-      f(n.getBoundingClientRect())
-    );
-    o && (t = o);
-  }
-  return t;
-}
-function x(e) {
+function C(e) {
   const t = [];
   let n = e.parentElement;
   for (; n; ) {
@@ -83,29 +67,29 @@ function x(e) {
   }
   return t;
 }
-function I(e) {
-  return x(e).map((t) => ({
+function E(e) {
+  return C(e).map((t) => ({
     element: t,
     scrollTop: t.scrollTop,
     scrollLeft: t.scrollLeft
   }));
 }
-function L(e) {
+function I(e) {
   for (const t of e)
     t.element.isConnected && (t.element.scrollTop = t.scrollTop, t.element.scrollLeft = t.scrollLeft);
 }
 let s = null;
 function _(e) {
-  s === null && (s = I(e));
+  s === null && (s = E(e));
 }
-function V() {
-  s !== null && (L(s), s = null);
+function k() {
+  s !== null && (I(s), s = null);
 }
-function D(e, t = v) {
+function L(e, t = v) {
   const n = e.getBoundingClientRect(), o = window.innerHeight;
   return n.top < t || n.bottom > o - t;
 }
-function B(e) {
+function D(e) {
   const { targetElement: t, scrollContainer: n, viewportPadding: o } = e, i = n.getBoundingClientRect(), r = t.getBoundingClientRect(), c = n.clientHeight - o * 2;
   if (r.height >= c) {
     const l = r.top - i.top - o;
@@ -118,12 +102,12 @@ function B(e) {
   }
   r.bottom > i.bottom - o && (n.scrollTop += r.bottom - (i.bottom - o));
 }
-function O(e, t = v) {
-  if (!D(e, t))
+function V(e, t = v) {
+  if (!L(e, t))
     return;
-  const o = x(e)[0];
+  const o = C(e)[0];
   if (o) {
-    B({
+    D({
       targetElement: e,
       scrollContainer: o,
       viewportPadding: t
@@ -136,7 +120,7 @@ function O(e, t = v) {
     inline: "nearest"
   });
 }
-function N(e, t) {
+function O(e, t) {
   const n = e.advanceOn === "click-target";
   return A.useEffect(() => {
     if (!n)
@@ -145,8 +129,10 @@ function N(e, t) {
     if (!o)
       return;
     const i = () => {
-      queueMicrotask(() => {
-        t();
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          t();
+        });
       });
     };
     return o.addEventListener("click", i, { once: !0 }), () => {
@@ -160,26 +146,25 @@ function N(e, t) {
   ]), n;
 }
 function G(e, t = T, n) {
-  const o = {
+  return {
     x: e.x - t,
     y: e.y - t,
     width: e.width + t * 2,
     height: e.height + t * 2
   };
-  return n ? h(o, n) ?? o : o;
 }
-function F(e, t = T) {
-  const n = M(e), o = E(e);
-  return G(n, t, o);
+function N(e, t = T) {
+  const n = M(e);
+  return G(n, t);
 }
-function U(e) {
+function F(e) {
   const {
     targetRect: t,
     popoverWidth: n,
     popoverHeight: o,
-    gap: i = S,
-    viewportPadding: r = H
-  } = e, c = t.x + t.width, g = t.y + t.height, l = t.x, y = window.innerWidth - c;
+    gap: i = b,
+    viewportPadding: r = S
+  } = e, c = t.x + t.width, h = t.y + t.height, l = t.x, x = window.innerWidth - c;
   if (t.width <= 280 && t.x >= window.innerWidth * 0.35 && l >= n + i)
     return {
       placement: "left",
@@ -205,50 +190,50 @@ function U(e) {
       )
     };
   if (t.height > t.width * 2.5) {
-    const m = Math.max(
+    const f = Math.max(
       r,
       Math.min(
         t.y,
         window.innerHeight - o - r
       )
     );
-    if (y >= n + i)
+    if (x >= n + i)
       return {
         placement: "right",
         left: c + i,
-        top: m
+        top: f
       };
     if (l >= n + i)
       return {
         placement: "left",
         left: t.x - n - i,
-        top: m
+        top: f
       };
   }
-  const p = window.innerHeight - g, w = t.y, b = t.y + t.height / 2 > window.innerHeight * 0.55;
+  const g = window.innerHeight - h, d = t.y, y = t.y + t.height / 2 > window.innerHeight * 0.55;
   let a;
-  b && w >= o + i && p < o + i * 2 ? a = "top" : a = p >= o + i || p >= w ? "bottom" : "top";
-  let u = a === "bottom" ? g + i : t.y - o - i, d = t.x + t.width / 2 - n / 2;
-  return d = Math.max(
+  y && d >= o + i && g < o + i * 2 ? a = "top" : a = g >= o + i || g >= d ? "bottom" : "top";
+  let p = a === "bottom" ? h + i : t.y - o - i, u = t.x + t.width / 2 - n / 2;
+  return u = Math.max(
     r,
-    Math.min(d, window.innerWidth - n - r)
-  ), u = Math.max(
+    Math.min(u, window.innerWidth - n - r)
+  ), p = Math.max(
     r,
-    Math.min(u, window.innerHeight - o - r)
-  ), { top: u, left: d, placement: a };
+    Math.min(p, window.innerHeight - o - r)
+  ), { top: p, left: u, placement: a };
 }
 export {
-  S as GUIDANCE_POPOVER_GAP,
+  b as GUIDANCE_POPOVER_GAP,
   T as GUIDANCE_SPOTLIGHT_PADDING,
   v as GUIDANCE_TARGET_SCROLL_PADDING,
-  H as GUIDANCE_VIEWPORT_PADDING,
+  S as GUIDANCE_VIEWPORT_PADDING,
   _ as beginTourScrollSnapshot,
   G as buildHighlightRect,
-  F as buildHighlightRectForTarget,
-  U as computePopoverPosition,
-  V as endTourScrollSnapshot,
+  N as buildHighlightRectForTarget,
+  F as computePopoverPosition,
+  k as endTourScrollSnapshot,
   M as getVisibleTargetRect,
-  D as needsGuidanceTargetScroll,
-  O as scrollGuidanceTargetIntoView,
-  N as useAdvanceOnTargetClick
+  L as needsGuidanceTargetScroll,
+  V as scrollGuidanceTargetIntoView,
+  O as useAdvanceOnTargetClick
 };

package/dist/components/flows/guidance/renderers/guidance-tour-overlay.js

@@ -4,29 +4,29 @@ import { createPortal as $ } from "react-dom";
 import { GuidanceStepPanel as S } from "./guidance-card-shared.js";
 import { useGuidanceOverlayGeometry as z } from "../hooks/useGuidanceOverlayGeometry.js";
 import { useAdvanceOnTargetClick as E, buildHighlightRectForTarget as P, computePopoverPosition as A } from "./guidance-renderer-shared.js";
-const G = 220, n = `motion-safe:transition-[top,left,width,height] motion-safe:duration-[${G}ms] motion-safe:ease-[cubic-bezier(0.22,1,0.36,1)]`;
-function H({
+const R = 220, n = `motion-safe:transition-[top,left,width,height] motion-safe:duration-[${R}ms] motion-safe:ease-[cubic-bezier(0.22,1,0.36,1)]`;
+function G({
   highlightRect: e,
   blocksPointerEvents: u = !0
 }) {
-  const d = typeof window < "u" ? window.innerWidth : 0, g = typeof window < "u" ? window.innerHeight : 0, s = e.x + e.width, a = e.y + e.height, i = u ? `pointer-events-auto absolute bg-[var(--guidance-backdrop-bg)] opacity-[var(--guidance-backdrop-opacity,0.6)] ${n}` : `pointer-events-none absolute bg-[var(--guidance-backdrop-bg)] opacity-[var(--guidance-backdrop-opacity,0.6)] ${n}`;
+  const i = typeof window < "u" ? window.innerWidth : 0, g = typeof window < "u" ? window.innerHeight : 0, s = e.x + e.width, a = e.y + e.height, d = u ? `pointer-events-auto absolute bg-[var(--guidance-backdrop-bg)] opacity-[var(--guidance-backdrop-opacity,0.6)] ${n}` : `pointer-events-none absolute bg-[var(--guidance-backdrop-bg)] opacity-[var(--guidance-backdrop-opacity,0.6)] ${n}`;
   return /* @__PURE__ */ h(C, { children: [
     /* @__PURE__ */ o(
       "div",
       {
-        className: i,
-        style: { top: 0, left: 0, width: d, height: e.y },
+        className: d,
+        style: { top: 0, left: 0, width: i, height: e.y },
         "aria-hidden": "true"
       }
     ),
     /* @__PURE__ */ o(
       "div",
       {
-        className: i,
+        className: d,
         style: {
           top: a,
           left: 0,
-          width: d,
+          width: i,
           height: Math.max(0, g - a)
         },
         "aria-hidden": "true"
@@ -35,7 +35,7 @@ function H({
     /* @__PURE__ */ o(
       "div",
       {
-        className: i,
+        className: d,
         style: {
           top: e.y,
           left: 0,
@@ -48,11 +48,11 @@ function H({
     /* @__PURE__ */ o(
       "div",
       {
-        className: i,
+        className: d,
         style: {
           top: e.y,
           left: s,
-          width: Math.max(0, d - s),
+          width: Math.max(0, i - s),
           height: e.height
         },
         "aria-hidden": "true"
@@ -63,18 +63,18 @@ function H({
 function B({
   instruction: e,
   overlayComponent: u,
-  onNext: d,
+  onNext: i,
   onSkip: g,
   onDismiss: s
 }) {
-  const a = e.target?.element, i = z(a, e.stepId), I = e.stepIndex + 1 >= e.totalSteps, c = E(e, d), m = c || e.advanceOn === "auto", v = l.useRef(null), f = l.useRef(null), [b, O] = l.useState({ width: 400, height: 240 }), N = l.useCallback(() => {
+  const a = e.target?.element, d = z(a, e.stepId), I = e.stepIndex + 1 >= e.totalSteps, c = E(e, i), v = c || e.advanceOn === "auto", b = l.useRef(null), f = l.useRef(null), [m, O] = l.useState({ width: 400, height: 240 }), N = l.useCallback(() => {
     a?.click();
   }, [a]);
   if (l.useLayoutEffect(() => {
     const r = f.current;
     r?.parentElement === document.body && document.body.appendChild(r);
-  }, [e.stepId, m]), l.useLayoutEffect(() => {
-    const r = v.current;
+  }, [e.stepId, v]), l.useLayoutEffect(() => {
+    const r = b.current;
     if (!r)
       return;
     const k = () => {
@@ -89,12 +89,12 @@ function B({
     return x.observe(r), () => {
       x.disconnect();
     };
-  }, [e.stepId, e.content.title, e.content.body]), !i || !a || typeof document > "u")
+  }, [e.stepId, e.content.title, e.content.body]), !d || !a || typeof document > "u")
     return null;
   const t = P(a), y = A({
-    targetRect: i,
-    popoverWidth: b.width,
-    popoverHeight: b.height
+    targetRect: t,
+    popoverWidth: m.width,
+    popoverHeight: m.height
   }), w = `guidance-mask-${e.stepId}`;
   return $(
     /* @__PURE__ */ h(
@@ -140,10 +140,10 @@ function B({
             }
           ),
           /* @__PURE__ */ o(
-            H,
+            G,
             {
               highlightRect: t,
-              blocksPointerEvents: !m
+              blocksPointerEvents: !v
             }
           ),
           c ? /* @__PURE__ */ o(
@@ -176,7 +176,7 @@ function B({
           /* @__PURE__ */ o(
             "div",
             {
-              ref: v,
+              ref: b,
               className: `pointer-events-auto absolute z-20 w-[min(400px,calc(100vw-2rem))] overflow-hidden rounded-2xl border border-stroke bg-canvas shadow-elevation-floating ${n}`,
               style: {
                 top: y.top,
@@ -197,9 +197,9 @@ function B({
                   primaryActionLabel: I ? "Done" : "Next",
                   onSkip: g,
                   onDismiss: s,
-                  onPrimaryAction: d,
+                  onPrimaryAction: i,
                   showPrimaryAction: !c && e.advanceOn !== "auto",
-                  footerHint: c ? "Click highlighted area" : e.advanceOn === "auto" ? e.content.footer ?? "Complete this step to continue" : null,
+                  footerHint: c ? e.content.footer ?? "Click the highlighted button to continue." : e.advanceOn === "auto" ? e.content.footer ?? "Complete the action above to continue." : null,
                   titleId: `guidance-tour-title-${e.stepId}`,
                   bodyId: `guidance-tour-body-${e.stepId}`
                 }

package/dist/components/flows/wizard/wizard.js

@@ -12,24 +12,24 @@ const k = ({
   steps: s = [],
   children: i
 }) => {
-  const [d, u] = y({
+  const [d, f] = y({
     prop: r,
     defaultProp: e,
     onChange: o
-  }), [x, l] = a.useState([]), m = a.useCallback((b) => {
-    l((v) => v.includes(b) ? v : [...v, b].sort((g, w) => g - w));
-  }, []), c = a.useCallback((b) => {
-    l((v) => v.filter((g) => g !== b));
-  }, []), f = t ?? (x.length > 0 ? Math.max(...x) : s.length), h = a.useMemo(
+  }), [u, l] = a.useState([]), x = a.useCallback((g) => {
+    l((b) => b.includes(g) ? b : [...b, g].sort((v, w) => v - w));
+  }, []), c = a.useCallback((g) => {
+    l((b) => b.filter((v) => v !== g));
+  }, []), m = t ?? (u.length > 0 ? Math.max(...u) : s.length), h = a.useMemo(
     () => ({
       value: d ?? e,
-      totalSteps: f,
+      totalSteps: m,
       steps: s,
-      setValue: u,
-      registerStep: m,
+      setValue: f,
+      registerStep: x,
       unregisterStep: c
     }),
-    [d, e, f, s, u, m, c]
+    [d, e, m, s, f, x, c]
   );
   return /* @__PURE__ */ n(C.Provider, { value: h, children: i });
 };
@@ -118,7 +118,7 @@ const P = a.forwardRef(
       {
         ref: t,
         className: p(
-          "flex flex-col flex-1 min-h-0 min-w-0 overflow-hidden pt-[50px] px-6 sm:px-10 md:px-16 lg:px-20 xl:px-[60px] 2xl:px-[190px] pb-[73px]",
+          "flex flex-col flex-1 min-h-0 min-w-0 overflow-hidden pt-[50px] pb-[73px]",
           r
         ),
         "data-slot": "body",
@@ -131,35 +131,35 @@ const P = a.forwardRef(
 P.displayName = "WizardBody";
 const F = a.forwardRef(
   ({ className: r, interactive: e = !0, linear: o = !1, ...t }, s) => {
-    const { value: i, totalSteps: d, steps: u, setValue: x } = W();
+    const { value: i, totalSteps: d, steps: f, setValue: u } = W();
     if (d <= 0) return null;
-    const l = (m) => {
-      e && (o && m > i || x(m));
+    const l = (x) => {
+      e && (o && x > i || u(x));
     };
     return /* @__PURE__ */ n(
       "div",
       {
         ref: s,
-        className: p("flex gap-2 mb-[42px] shrink-0", r),
+        className: p("flex gap-2 mb-[42px] shrink-0 px-6 sm:px-10 md:px-16 lg:px-20 xl:px-[60px] 2xl:px-[190px]", r),
         "data-slot": "progress",
         role: "list",
         ...t,
-        children: Array.from({ length: d }, (m, c) => {
-          const f = c + 1, h = c === i - 1, b = c < i - 1, g = u[c]?.label ?? `Step ${f} of ${d}`, w = e && (!o || f <= i);
+        children: Array.from({ length: d }, (x, c) => {
+          const m = c + 1, h = c === i - 1, g = c < i - 1, v = f[c]?.label ?? `Step ${m} of ${d}`, w = e && (!o || m <= i);
           return /* @__PURE__ */ n(
             "div",
             {
               role: "listitem",
-              "aria-label": g,
+              "aria-label": v,
               "aria-current": h ? "step" : void 0,
               tabIndex: w ? 0 : void 0,
-              onClick: () => l(f),
+              onClick: () => l(m),
               onKeyDown: w ? (z) => {
-                (z.key === "Enter" || z.key === " ") && (z.preventDefault(), l(f));
+                (z.key === "Enter" || z.key === " ") && (z.preventDefault(), l(m));
               } : void 0,
               className: p(
                 "h-2 flex-1 max-w-[132px] rounded-[4px] transition-colors duration-300 motion-reduce:transition-none",
-                h || b ? "bg-brand" : "bg-accent",
+                h || g ? "bg-brand" : "bg-accent",
                 w ? "cursor-pointer" : "cursor-default"
               )
             },
@@ -197,31 +197,31 @@ const T = a.forwardRef(
 T.displayName = "WizardStepDescription";
 const j = a.forwardRef(
   ({ className: r, children: e, ...o }, t) => {
-    const { edges: s, setEdges: i } = N(), d = a.useRef(null), u = a.useCallback(
+    const { edges: s, setEdges: i } = N(), d = a.useRef(null), f = a.useCallback(
       (l) => {
         d.current = l, typeof t == "function" ? t(l) : t && (t.current = l);
       },
       [t]
-    ), x = a.useCallback(() => {
+    ), u = a.useCallback(() => {
       const l = d.current;
       if (!l) return;
-      const { scrollTop: m, scrollHeight: c, clientHeight: f } = l, h = 1, b = m > h, v = m + f < c - h;
-      i((g) => g.top === b && g.bottom === v ? g : { top: b, bottom: v });
+      const { scrollTop: x, scrollHeight: c, clientHeight: m } = l, h = 1, g = x > h, b = x + m < c - h;
+      i((v) => v.top === g && v.bottom === b ? v : { top: g, bottom: b });
     }, [i]);
     return a.useEffect(() => {
       const l = d.current;
       if (!l) return;
-      const m = () => {
-        requestAnimationFrame(x);
+      const x = () => {
+        requestAnimationFrame(u);
       };
-      m(), l.addEventListener("scroll", x, { passive: !0 });
-      const c = new ResizeObserver(m);
+      x(), l.addEventListener("scroll", u, { passive: !0 });
+      const c = new ResizeObserver(x);
       c.observe(l);
-      const f = l.firstElementChild;
-      return f && c.observe(f), () => {
-        l.removeEventListener("scroll", x), c.disconnect();
+      const m = l.firstElementChild;
+      return m && c.observe(m), () => {
+        l.removeEventListener("scroll", u), c.disconnect();
       };
-    }, [x, e]), /* @__PURE__ */ n(
+    }, [u, e]), /* @__PURE__ */ n(
       "div",
       {
         className: p(
@@ -234,8 +234,11 @@ const j = a.forwardRef(
         children: /* @__PURE__ */ n(
           "div",
           {
-            ref: u,
-            className: p("flex-1 min-h-0 overflow-y-auto overflow-x-hidden p-0.5", r),
+            ref: f,
+            className: p(
+              "flex-1 min-h-0 overflow-y-auto overflow-x-hidden px-6 py-4 sm:px-10 md:px-16 lg:px-20 xl:px-[60px] 2xl:px-[190px]",
+              r
+            ),
             "data-slot": "content",
             ...o,
             children: e
@@ -248,8 +251,8 @@ const j = a.forwardRef(
 j.displayName = "WizardContent";
 const A = a.forwardRef(
   ({ className: r, value: e, children: o, ...t }, s) => {
-    const { value: i, registerStep: d, unregisterStep: u } = W();
-    return a.useEffect(() => (d(e), () => u(e)), [e, d, u]), i !== e ? null : /* @__PURE__ */ n("div", { ref: s, className: p(r), "data-step": e, ...t, children: o });
+    const { value: i, registerStep: d, unregisterStep: f } = W();
+    return a.useEffect(() => (d(e), () => f(e)), [e, d, f]), i !== e ? null : /* @__PURE__ */ n("div", { ref: s, className: p(r), "data-step": e, ...t, children: o });
   }
 );
 A.displayName = "WizardStep";
@@ -261,7 +264,7 @@ const B = a.forwardRef(
       {
         ref: t,
         className: p(
-          "relative z-10 mt-auto flex shrink-0 items-center justify-between bg-canvas-elevated pt-6 pb-[27px] transition-[box-shadow,border-color] duration-200",
+          "relative z-10 mt-auto flex shrink-0 items-center justify-between bg-canvas-elevated pt-6 pb-[27px] px-6 sm:px-10 md:px-16 lg:px-20 xl:px-[60px] 2xl:px-[190px] transition-[box-shadow,border-color] duration-200",
           s.bottom && "border-t border-stroke-hairline shadow-elevation-wizard-footer",
           r
         ),

package/dist/components/forms/date-picker/date-input-behavior.d.ts

@@ -34,6 +34,13 @@ export interface PickerSurfacePointerDownOptions {
     onOpen: () => void;
     focusField?: (field: PickerSurfaceField) => void;
 }
+export declare function handleReadonlyPickerKeyDown(event: React.KeyboardEvent, options: {
+    disabled?: boolean | null;
+    open: boolean;
+    onOpen: () => void;
+    onCancel: () => void;
+    onKeyboardOpen?: () => void;
+}): void;
 /** Opens the picker when clicking dead zones on the field shell (padding, gaps, icon gutter). */
 export declare function handlePickerSurfacePointerDown({ disabled, event, onOpen, focusField, }: PickerSurfacePointerDownOptions): void;
 /** Block Radix outside-dismiss when the calendar footer requires explicit Apply/Cancel. */