impact-nova 2.5.22 → 2.6.0

package/dist/components/data/ag-grid-react/ag-grid.types.d.ts

@@ -57,6 +57,8 @@ export interface ExtendedHeaderComponentParams extends Partial<IHeaderParams> {
     infoData?: InfoContent;
     /** How to display the information (tooltip or modal) */
     displayMode?: 'tooltip' | 'modal';
+    /** Guidance target ID for the info icon (for guided tours) */
+    infoIconGuidanceTargetId?: string;
 }
 export type SectionType = 'TEXT' | 'KEY_VALUE' | 'BADGES' | 'LINK';
 export interface UISectionBase {

package/dist/components/data/ag-grid-react/headers/components/header-info.d.ts

@@ -4,30 +4,36 @@ import { ExtendedHeaderComponentParams, InfoContent } from '../../ag-grid.types'
 /**
  * Info Icon Trigger - native button for grid header info actions.
  */
-export declare const InfoIconTrigger: ({ onClick, className, label, }: {
+export declare const InfoIconTrigger: ({ onClick, className, label, guidanceTargetId, }: {
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     className?: string;
     label: string;
+    /** Guidance target ID for guided tours (renders as data-guidance-target) */
+    guidanceTargetId?: string;
 }) => import("react/jsx-runtime").JSX.Element;
 /**
  * Tooltip-only Info Trigger
  */
-export declare const TooltipInfoTrigger: ({ content, className, onInfoClick, label, }: {
+export declare const TooltipInfoTrigger: ({ content, className, onInfoClick, label, guidanceTargetId, }: {
     content: string;
     className?: string;
     onInfoClick?: (e: React.MouseEvent) => void;
     label: string;
+    /** Guidance target ID for guided tours */
+    guidanceTargetId?: string;
 }) => import("react/jsx-runtime").JSX.Element;
 /**
  * Modal-enabled Info Trigger
  * Only this component allocates a useState hook.
  */
-export declare const ModalInfoTrigger: ({ infoData, displayName, className, onInfoClick, label, }: {
+export declare const ModalInfoTrigger: ({ infoData, displayName, className, onInfoClick, label, guidanceTargetId, }: {
     infoData?: InfoContent;
     displayName?: string;
     className?: string;
     onInfoClick?: (e: React.MouseEvent) => void;
     label: string;
+    /** Guidance target ID for guided tours */
+    guidanceTargetId?: string;
 }) => import("react/jsx-runtime").JSX.Element;
 type HeaderInfoProps = (CustomHeaderProps | IHeaderGroupParams) & ExtendedHeaderComponentParams & {
     className?: string;

package/dist/components/data/ag-grid-react/headers/components/header-info.js

@@ -1,112 +1,120 @@
-import { jsx as r, jsxs as I, Fragment as g } from "react/jsx-runtime";
-import { useState as v } from "react";
-import { cn as m } from "../../../../../lib/utils.js";
-import { Info as k } from "impact-nova-icons";
-import { useImpactNovaI18n as u } from "../../../../../i18n/use-impact-nova-i18n.js";
-import { LazyTooltip as p } from "./lazy-tooltip.js";
-import { InfoModal as b } from "./info-modal.js";
-import { resolveHeaderInfoParams as C } from "../resolve-header-info-params.js";
-const h = ({
+import { jsx as r, jsxs as h, Fragment as v } from "react/jsx-runtime";
+import { useState as k } from "react";
+import { cn as u } from "../../../../../lib/utils.js";
+import { Info as b } from "impact-nova-icons";
+import { useImpactNovaI18n as p } from "../../../../../i18n/use-impact-nova-i18n.js";
+import { LazyTooltip as I } from "./lazy-tooltip.js";
+import { InfoModal as C } from "./info-modal.js";
+import { resolveHeaderInfoParams as y } from "../resolve-header-info-params.js";
+const g = ({
   onClick: o,
-  className: n,
-  label: t
+  className: e,
+  label: t,
+  guidanceTargetId: n
 }) => {
-  const e = (a) => {
-    a.stopPropagation(), o?.(a);
+  const a = (i) => {
+    i.stopPropagation(), o?.(i);
   };
   return /* @__PURE__ */ r(
     "button",
     {
       type: "button",
       "aria-label": t,
-      className: m(
+      className: u(
         "cursor-pointer flex items-center justify-center shrink-0 w-6 h-6 rounded-md transition-all duration-200 text-content-tertiary hover:bg-canvas-muted active:bg-stroke-hairline",
-        n
+        e
       ),
-      onClick: e,
-      children: /* @__PURE__ */ r(k, { size: 16, "aria-hidden": !0 })
+      onClick: a,
+      ...n && { "data-guidance-target": n },
+      children: /* @__PURE__ */ r(b, { size: 16, "aria-hidden": !0 })
     }
   );
-}, y = ({
+}, T = ({
   content: o,
-  className: n,
+  className: e,
   onInfoClick: t,
-  label: e
-}) => /* @__PURE__ */ r(p, { content: o, children: /* @__PURE__ */ r(h, { onClick: t, className: n, label: e }) }), x = ({
+  label: n,
+  guidanceTargetId: a
+}) => /* @__PURE__ */ r(I, { content: o, children: /* @__PURE__ */ r(g, { onClick: t, className: e, label: n, guidanceTargetId: a }) }), x = ({
   infoData: o,
-  displayName: n,
+  displayName: e,
   className: t,
-  onInfoClick: e,
-  label: a
+  onInfoClick: n,
+  label: a,
+  guidanceTargetId: i
 }) => {
-  const { t: f } = u(), [s, c] = v(!1), i = o ?? (n ? { title: n, sections: [] } : void 0), d = (l) => {
-    l.stopPropagation(), i && c(!0);
+  const { t: f } = p(), [s, d] = k(!1), c = o ?? (e ? { title: e, sections: [] } : void 0), m = (l) => {
+    l.stopPropagation(), c && d(!0);
   };
-  return /* @__PURE__ */ I(g, { children: [
-    /* @__PURE__ */ r(p, { content: f("gridHeader.clickForDetails"), children: /* @__PURE__ */ r(
-      h,
+  return /* @__PURE__ */ h(v, { children: [
+    /* @__PURE__ */ r(I, { content: f("gridHeader.clickForDetails"), children: /* @__PURE__ */ r(
+      g,
       {
         label: a,
         onClick: (l) => {
-          d(l), e && e(l);
+          m(l), n && n(l);
         },
-        className: m(
+        className: u(
           "hover:bg-canvas-muted hover:shadow-sm hover:text-brand-variant-hover hover:-translate-y-0.5 active:scale-95",
           t
-        )
+        ),
+        guidanceTargetId: i
       }
     ) }),
-    s && i && // Stop propagation to prevent the click from bubbling to the header group
+    s && c && // Stop propagation to prevent the click from bubbling to the header group
     // regardless of whether the modal is portaled or not.
     /* @__PURE__ */ r("div", { onClick: (l) => l.stopPropagation(), children: /* @__PURE__ */ r(
-      b,
+      C,
       {
         open: s,
-        onClose: () => c(!1),
-        data: i
+        onClose: () => d(!1),
+        data: c
       }
     ) })
   ] });
-}, z = (o) => {
-  const n = C(o, o.displayName), {
+}, F = (o) => {
+  const e = y(o, o.displayName), {
     showInfoIcon: t,
-    displayName: e
-  } = n;
-  return !t || !e || e.trim() === "" ? null : /* @__PURE__ */ r(N, { ...o, ...n });
+    displayName: n
+  } = e;
+  return !t || !n || n.trim() === "" ? null : /* @__PURE__ */ r(N, { ...o, ...e });
 };
 function N(o) {
-  const { t: n } = u(), {
+  const { t: e } = p(), {
     displayName: t,
-    displayMode: e = "tooltip",
+    displayMode: n = "tooltip",
     infoTooltip: a,
-    infoData: f,
-    className: s,
-    onInfoClick: c
-  } = o, i = () => {
-    c && c(o);
-  }, d = a ? `${t}: ${a}` : `${t} ${n("gridHeader.information")}`;
-  return e === "modal" ? /* @__PURE__ */ r(
+    infoData: i,
+    className: f,
+    onInfoClick: s,
+    infoIconGuidanceTargetId: d
+  } = o, c = () => {
+    s && s(o);
+  }, m = a ? `${t}: ${a}` : `${t} ${e("gridHeader.information")}`;
+  return n === "modal" ? /* @__PURE__ */ r(
     x,
     {
-      infoData: f,
+      infoData: i,
       displayName: t,
-      className: s,
-      onInfoClick: i,
-      label: d
+      className: f,
+      onInfoClick: c,
+      label: m,
+      guidanceTargetId: d
     }
   ) : /* @__PURE__ */ r(
-    y,
+    T,
     {
       content: a || `Info about ${t}`,
-      className: s,
-      onInfoClick: i,
-      label: d
+      className: f,
+      onInfoClick: c,
+      label: m,
+      guidanceTargetId: d
     }
   );
 }
 export {
-  z as HeaderInfo,
-  h as InfoIconTrigger,
+  F as HeaderInfo,
+  g as InfoIconTrigger,
   x as ModalInfoTrigger,
-  y as TooltipInfoTrigger
+  T as TooltipInfoTrigger
 };

package/dist/components/data/ag-grid-react/headers/components/info-modal.js

@@ -1,16 +1,16 @@
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
 import "react";
-import { Dialog as s, DialogContent as d, DialogHeader as p, DialogTitle as g, DialogBody as f } from "../../../../feedback/dialog/dialog.js";
+import { Dialog as m, DialogContent as s, DialogHeader as p, DialogTitle as g, DialogBody as f } from "../../../../feedback/dialog/dialog.js";
 import { useImpactNovaI18n as h } from "../../../../../i18n/use-impact-nova-i18n.js";
 import { SectionRenderer as x } from "./section-renderers.js";
-const H = ({ open: a, onClose: l, data: r }) => {
+const H = ({ open: i, onClose: l, data: r }) => {
   const { t: n } = h();
   if (!r) return null;
-  const { title: m, sections: t = [] } = r;
-  return /* @__PURE__ */ e(s, { open: a, onOpenChange: (o) => !o && l(), children: /* @__PURE__ */ i(d, { className: "max-w-2xl", children: [
-    /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(g, { children: m || n("gridHeader.information") }) }),
-    /* @__PURE__ */ i(f, { className: "space-y-6 py-8", children: [
-      t.map((o, c) => /* @__PURE__ */ e(x, { section: o }, `${o.type}-${c}`)),
+  const { title: c, sections: t = [] } = r;
+  return /* @__PURE__ */ e(m, { open: i, onOpenChange: (o) => !o && l(), children: /* @__PURE__ */ a(s, { className: "max-w-2xl", "data-guidance-target": "guidance.info-modal", children: [
+    /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(g, { children: c || n("gridHeader.information") }) }),
+    /* @__PURE__ */ a(f, { className: "space-y-6 py-8", children: [
+      t.map((o, d) => /* @__PURE__ */ e(x, { section: o }, `${o.type}-${d}`)),
       t.length === 0 && /* @__PURE__ */ e("p", { className: "text-sm text-secondary-foreground text-center py-4", children: n("gridHeader.noInformationAvailable") })
     ] })
   ] }) });

package/dist/components/flows/guidance/guidance-layer.js

@@ -1,71 +1,74 @@
-import { jsxs as i, jsx as n } from "react/jsx-runtime";
-import * as t from "react";
+import { jsxs as a, jsx as n } from "react/jsx-runtime";
+import * as r from "react";
 import { useSyncExternalStore as c } from "react";
-import { useGuidanceContext as p } from "./guidance-context.js";
-import { SpotlightRenderer as f } from "./renderers/spotlight-renderer.js";
+import { useGuidanceContext as f } from "./guidance-context.js";
+import { SpotlightRenderer as k } from "./renderers/spotlight-renderer.js";
 import { CoachMarkRenderer as b } from "./renderers/coach-mark-renderer.js";
 import { AnnouncementRenderer as h } from "./renderers/announcement-renderer.js";
-import { endTourScrollSnapshot as k } from "./renderers/guidance-renderer-shared.js";
+import { endTourScrollSnapshot as x } from "./renderers/guidance-renderer-shared.js";
 import { Button as d } from "../../primitives/button/button.js";
-function x(e, s) {
-  const r = {
+function S(e, o) {
+  const t = {
     instruction: e,
-    ...s
+    ...o
   };
   switch (e.renderer) {
     case "spotlight":
-      return /* @__PURE__ */ n(f, { ...r });
+      return /* @__PURE__ */ n(k, { ...t });
     case "coach-mark":
-      return /* @__PURE__ */ n(b, { ...r });
+      return /* @__PURE__ */ n(b, { ...t });
     case "announcement":
-      return /* @__PURE__ */ n(h, { ...r });
+      return /* @__PURE__ */ n(h, { ...t });
     default:
       return null;
   }
 }
 function z() {
-  const { engine: e } = p();
-  t.useEffect(() => e.on("guideEnd", () => {
-    k();
+  const { engine: e } = f();
+  r.useEffect(() => e.on("guideEnd", () => {
+    x();
   }), [e]);
-  const s = c(
-    (o) => e.subscribe(o),
+  const o = c(
+    (s) => e.subscribe(s),
     () => e.state,
     () => ({ status: "idle" })
-  ), r = c(
-    (o) => e.subscribe(o),
+  ), t = c(
+    (s) => e.subscribe(s),
     () => e.getRenderInstruction(),
     () => null
-  ), l = t.useCallback(() => {
+  ), l = r.useCallback(() => {
     e.advanceStep();
-  }, [e]), u = t.useCallback(() => {
+  }, [e]), u = r.useCallback(() => {
+    e.skipStep();
+  }, [e]), i = r.useCallback(() => {
     e.dismiss("session");
-  }, [e]), a = t.useCallback(() => {
-    e.dismiss("session");
-  }, [e]), m = t.useCallback(() => {
+  }, [e]), m = r.useCallback(() => {
+    e.goToPreviousStep();
+  }, [e]), p = r.useCallback(() => {
     e.retryCurrentStep();
   }, [e]);
-  return s.status === "blocked" ? /* @__PURE__ */ i(
+  return o.status === "blocked" ? /* @__PURE__ */ a(
     "div",
     {
       "data-component": "guidance-blocked",
       className: "fixed bottom-4 left-1/2 z-50 -translate-x-1/2 rounded-md border border-border-default bg-surface-elevated px-4 py-3 shadow-lg",
       role: "status",
       children: [
-        /* @__PURE__ */ i("p", { className: "text-sm text-content-secondary", children: [
+        /* @__PURE__ */ a("p", { className: "text-sm text-content-secondary", children: [
           "Guide step is blocked: ",
-          s.reason
+          o.reason
         ] }),
-        /* @__PURE__ */ i("div", { className: "mt-2 flex gap-2", children: [
-          /* @__PURE__ */ n(d, { size: "sm", onClick: m, children: "Retry" }),
-          /* @__PURE__ */ n(d, { variant: "secondary", size: "sm", onClick: a, children: "Dismiss" })
+        /* @__PURE__ */ a("div", { className: "mt-2 flex gap-2", children: [
+          /* @__PURE__ */ n(d, { size: "sm", onClick: p, children: "Retry" }),
+          /* @__PURE__ */ n(d, { variant: "secondary", size: "sm", onClick: i, children: "Dismiss" })
         ] })
       ]
     }
-  ) : r ? x(r, {
+  ) : t ? S(t, {
     onNext: l,
     onSkip: u,
-    onDismiss: a
+    onDismiss: i,
+    onBack: m
   }) : null;
 }
 export {

package/dist/components/flows/guidance/hooks/useGuidanceOverlayGeometry.js

@@ -1,32 +1,41 @@
-import * as u from "react";
-import { beginTourScrollSnapshot as l, needsGuidanceTargetScroll as f, scrollGuidanceTargetIntoView as s, getVisibleTargetRect as v } from "../renderers/guidance-renderer-shared.js";
-import { hasRunningAnimations as p } from "../utils/motion-settle.js";
-function T(e, d) {
-  const [m, t] = u.useState(null);
-  return u.useEffect(() => {
+import * as d from "react";
+import { beginTourScrollSnapshot as v, needsGuidanceTargetScroll as R, scrollGuidanceTargetIntoView as r, getVisibleTargetRect as p } from "../renderers/guidance-renderer-shared.js";
+import { hasRunningAnimations as w } from "../utils/motion-settle.js";
+function S(e, n) {
+  return e instanceof HTMLElement ? !!(e === n || e.contains(n) || n.contains(e)) : !1;
+}
+function z(e, n) {
+  const [m, t] = d.useState(null);
+  return d.useEffect(() => {
     if (!e) {
       t(null);
       return;
     }
-    let n = !1, o = 0;
-    const r = () => {
-      n || t(v(e));
+    let s = !1, o = 0;
+    const i = () => {
+      s || t(p(e));
     }, c = () => {
-      r(), !n && p(e) && (o = requestAnimationFrame(c));
+      i(), !s && w(e) && (o = requestAnimationFrame(c));
     };
-    l(e), f(e) && s(e), r(), o = requestAnimationFrame(c);
-    const a = new ResizeObserver(() => {
-      s(e), r();
+    v(e), R(e) && r(e), i(), o = requestAnimationFrame(c);
+    const u = new ResizeObserver(() => {
+      r(e), i();
     });
-    a.observe(e);
-    const i = () => {
-      s(e), r();
+    u.observe(e);
+    const a = () => {
+      r(e), i();
+    }, f = (l) => {
+      if (S(l.target, e)) {
+        i();
+        return;
+      }
+      r(e), i();
     };
-    return window.addEventListener("resize", i), document.addEventListener("scroll", i, !0), () => {
-      n = !0, cancelAnimationFrame(o), a.disconnect(), window.removeEventListener("resize", i), document.removeEventListener("scroll", i, !0);
+    return window.addEventListener("resize", a), document.addEventListener("scroll", f, !0), () => {
+      s = !0, cancelAnimationFrame(o), u.disconnect(), window.removeEventListener("resize", a), document.removeEventListener("scroll", f, !0);
     };
-  }, [d, e]), m;
+  }, [n, e]), m;
 }
 export {
-  T as useGuidanceOverlayGeometry
+  z as useGuidanceOverlayGeometry
 };

package/dist/components/flows/guidance/renderers/announcement-renderer.d.ts

@@ -1,3 +1,3 @@
 import { RendererProps } from '../../../../lib/guidance';
 import * as React from 'react';
-export declare function AnnouncementRenderer({ instruction, onNext, onSkip, }: RendererProps): React.ReactElement;
+export declare function AnnouncementRenderer({ instruction, onNext, onSkip, onDismiss, onBack, }: RendererProps): React.ReactElement;

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

@@ -1,20 +1,26 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as a, jsxs as n } from "react/jsx-runtime";
 import "react";
-import { Dialog as r, DialogContent as l } from "../../../feedback/dialog/dialog.js";
-import { GuidanceStepPanel as d } from "./guidance-card-shared.js";
-function f({
+import { Badge as m } from "../../../data-display/badge/badge.js";
+import { Dialog as i, DialogContent as x } from "../../../feedback/dialog/dialog.js";
+import { GuidanceStepProgressBar as b, GuidanceTourActionFooter as g, GuidanceTourProgressAndNav as h } from "./guidance-card-shared.js";
+import { GuidanceAnnouncementSurface as v } from "./guidance-announcement-surface.js";
+function k({
   instruction: e,
-  onNext: a,
-  onSkip: n
+  onNext: r,
+  onSkip: c,
+  onDismiss: p,
+  onBack: o
 }) {
-  const p = e.stepIndex + 1 >= e.totalSteps;
-  return /* @__PURE__ */ o(r, { open: !0, children: /* @__PURE__ */ o(
-    l,
+  const s = e.stepIndex + 1 >= e.totalSteps, d = e.content.badge?.trim(), l = e.interactionFooter === "keybinding";
+  return /* @__PURE__ */ a(i, { open: !0, children: /* @__PURE__ */ a(
+    x,
     {
       "data-component": "guidance-announcement",
+      "data-guidance-modal-behavior": e.modalBehavior,
       hideClose: !0,
-      className: "max-w-[400px] gap-0 overflow-hidden p-0 sm:rounded-2xl sm:shadow-elevation-floating",
-      "aria-describedby": void 0,
+      className: "max-w-[400px] gap-0 overflow-hidden border-0 bg-canvas p-0 sm:rounded-2xl sm:shadow-elevation-floating",
+      "aria-labelledby": `guidance-announcement-title-${e.stepId}`,
+      "aria-describedby": e.content.body ? `guidance-announcement-body-${e.stepId}` : void 0,
       onPointerDownOutside: (t) => {
         t.preventDefault();
       },
@@ -24,25 +30,65 @@ function f({
       onEscapeKeyDown: (t) => {
         t.preventDefault();
       },
-      children: /* @__PURE__ */ o(
-        d,
-        {
-          title: e.content.title,
-          body: e.content.body,
-          optionalFooter: e.content.footer,
-          stepIndex: e.stepIndex,
-          totalSteps: e.totalSteps,
-          skippable: e.skippable,
-          primaryActionLabel: p ? "Done" : "Next",
-          onSkip: n,
-          onDismiss: n,
-          onPrimaryAction: a,
-          showPrimaryAction: !0
-        }
-      )
+      children: /* @__PURE__ */ n("div", { className: "relative overflow-hidden rounded-2xl", children: [
+        /* @__PURE__ */ a(v, {}),
+        /* @__PURE__ */ n("div", { className: "relative z-10 flex flex-col items-center px-8 pb-0 pt-10 text-center", children: [
+          d ? /* @__PURE__ */ a(m, { variant: "subtle", color: "primary", shape: "circle", size: "sm", children: d }) : null,
+          /* @__PURE__ */ a(
+            "h2",
+            {
+              id: `guidance-announcement-title-${e.stepId}`,
+              className: "mt-3 text-2xl font-bold leading-8 text-content",
+              children: e.content.title
+            }
+          ),
+          e.content.body ? /* @__PURE__ */ a(
+            "p",
+            {
+              id: `guidance-announcement-body-${e.stepId}`,
+              className: "mt-2 max-w-[22rem] text-sm leading-snug text-content-secondary",
+              children: e.content.body
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ a("div", { className: "relative z-10 px-8 pb-8 pt-6", children: l ? /* @__PURE__ */ n("div", { className: "flex w-full flex-col gap-3", children: [
+          /* @__PURE__ */ a(
+            b,
+            {
+              activeStepIndex: e.stepIndex,
+              totalSteps: e.totalSteps
+            }
+          ),
+          /* @__PURE__ */ a(
+            g,
+            {
+              hint: e.content.footer ?? "Press the shortcut to continue.",
+              keybinding: e.content.keybinding,
+              activeStepIndex: e.stepIndex,
+              showBack: e.canGoBack,
+              onBack: o
+            }
+          )
+        ] }) : /* @__PURE__ */ a(
+          h,
+          {
+            activeStepIndex: e.stepIndex,
+            totalSteps: e.totalSteps,
+            skippable: e.skippable,
+            showSkip: !1,
+            showBack: e.canGoBack,
+            onBack: o,
+            primaryActionLabel: s ? "Done" : "Next",
+            onSkip: c,
+            onPrimaryAction: r,
+            onEndTour: p,
+            showPrimaryAction: !l && e.advanceOn !== "auto"
+          }
+        ) })
+      ] })
     }
   ) });
 }
 export {
-  f as AnnouncementRenderer
+  k as AnnouncementRenderer
 };

package/dist/components/flows/guidance/renderers/guidance-action-tap-icon.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+/** Hand-tap glyph for click-target tour steps (Figma action affordance). */
+export declare function GuidanceActionTapIcon({ className, }: {
+    className?: string;
+}): React.ReactElement;

package/dist/components/flows/guidance/renderers/guidance-action-tap-icon.js

@@ -0,0 +1,68 @@
+import { jsx as c, jsxs as h } from "react/jsx-runtime";
+import "react";
+import { cn as r } from "../../../../lib/utils.js";
+function s({
+  className: l
+}) {
+  return /* @__PURE__ */ c(
+    "svg",
+    {
+      "aria-hidden": "true",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 256 256",
+      className: r(
+        "size-4 min-h-4 min-w-4 max-h-4 max-w-4 shrink-0",
+        l
+      ),
+      children: /* @__PURE__ */ h(
+        "g",
+        {
+          fill: "currentColor",
+          fillRule: "nonzero",
+          transform: "translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)",
+          children: [
+            /* @__PURE__ */ c(
+              "path",
+              {
+                d: "M 69.416 43.298 H 68.97 c -0.983 0 -1.917 0.216 -2.756 0.603 c -0.644 -2.975 -3.295 -5.21 -6.459 -5.21 h -0.447 c -1.128 0 -2.19 0.284 -3.12 0.784 c -1 -2.379 -3.355 -4.054 -6.094 -4.054 h -0.447 c -0.925 0 -1.807 0.191 -2.606 0.536 v -9.458 c 0 -3.644 -2.964 -6.607 -6.608 -6.607 h -0.447 c -3.643 0 -6.607 2.964 -6.607 6.607 v 24.261 l -3.005 2.281 c -2.394 1.817 -3.911 4.461 -4.273 7.444 c -0.362 2.984 0.479 5.914 2.37 8.251 l 9.378 11.594 v 4.608 c 0 2.791 2.271 5.063 5.062 5.063 h 23.411 c 2.791 0 5.063 -2.271 5.063 -5.063 l 0.001 -4.375 c 2.996 -3.766 4.639 -8.438 4.639 -13.242 V 49.905 C 76.023 46.262 73.06 43.298 69.416 43.298 z M 72.023 67.32 c 0 4.102 -1.478 8.088 -4.159 11.224 c -0.311 0.362 -0.48 0.823 -0.48 1.3 v 5.094 c 0 0.586 -0.477 1.063 -1.063 1.063 H 42.911 c -0.585 0 -1.062 -0.477 -1.062 -1.063 v -5.316 c 0 -0.458 -0.157 -0.902 -0.445 -1.258 L 31.581 66.22 c -1.204 -1.488 -1.74 -3.354 -1.509 -5.254 c 0.23 -1.899 1.197 -3.583 2.721 -4.74 l 0.586 -0.444 v 5.495 c 0 1.104 0.896 2 2 2 s 2 -0.896 2 -2 v -9.506 c 0 -0.014 0 -0.026 0 -0.04 V 26.498 c 0 -1.438 1.169 -2.607 2.607 -2.607 h 0.447 c 1.438 0 2.607 1.17 2.607 2.607 v 15.53 c 0 0 0 0 0 0.001 s 0 0 0 0.001 l 0.01 12.917 c 0.001 1.104 0.896 1.998 2 1.998 c 0 0 0.001 0 0.001 0 c 1.104 -0.001 1.999 -0.896 1.998 -2.002 L 47.04 42.028 c 0 -1.438 1.169 -2.607 2.606 -2.607 h 0.447 c 1.438 0 2.607 1.17 2.607 2.607 v 3.27 c 0 0 0 0.001 0 0.001 c 0 0 0 0.001 0 0.001 l 0.009 9.647 c 0.001 1.104 0.896 1.998 2 1.998 c 0.001 0 0.001 0 0.002 0 c 1.104 -0.001 1.999 -0.897 1.998 -2.002 l -0.009 -9.646 c 0 -1.438 1.169 -2.607 2.606 -2.607 h 0.447 c 1.438 0 2.607 1.17 2.607 2.607 v 4.088 c -0.006 0.066 -0.02 0.13 -0.02 0.197 l 0.01 5.366 c 0.002 1.104 0.897 1.996 2 1.996 c 0.001 0 0.002 0 0.004 0 c 1.104 -0.002 1.998 -0.899 1.996 -2.004 l -0.009 -4.852 c 0.006 -0.062 0.019 -0.121 0.019 -0.184 c 0 -1.438 1.17 -2.607 2.607 -2.607 h 0.446 c 1.438 0 2.607 1.17 2.607 2.607 V 67.32 z"
+              }
+            ),
+            /* @__PURE__ */ c(
+              "path",
+              {
+                d: "M 63.994 25.511 H 51.79 c -1.104 0 -2 -0.896 -2 -2 s 0.896 -2 2 -2 h 12.204 c 1.104 0 2 0.896 2 2 S 65.099 25.511 63.994 25.511 z"
+              }
+            ),
+            /* @__PURE__ */ c(
+              "path",
+              {
+                d: "M 39.985 16.204 c -1.104 0 -2 -0.896 -2 -2 V 2 c 0 -1.104 0.896 -2 2 -2 s 2 0.896 2 2 v 12.204 C 41.985 15.309 41.09 16.204 39.985 16.204 z"
+              }
+            ),
+            /* @__PURE__ */ c(
+              "path",
+              {
+                d: "M 48.558 18.441 c -0.512 0 -1.023 -0.195 -1.414 -0.586 c -0.781 -0.781 -0.781 -2.047 0 -2.828 l 8.63 -8.629 c 0.781 -0.781 2.047 -0.781 2.828 0 c 0.781 0.781 0.781 2.047 0 2.828 l -8.63 8.629 C 49.581 18.246 49.069 18.441 48.558 18.441 z"
+              }
+            ),
+            /* @__PURE__ */ c(
+              "path",
+              {
+                d: "M 28.181 25.511 H 15.977 c -1.104 0 -2 -0.896 -2 -2 s 0.896 -2 2 -2 h 12.204 c 1.104 0 2 0.896 2 2 S 29.285 25.511 28.181 25.511 z"
+              }
+            ),
+            /* @__PURE__ */ c(
+              "path",
+              {
+                d: "M 31.413 18.441 c -0.512 0 -1.024 -0.195 -1.414 -0.586 L 21.37 9.226 c -0.781 -0.781 -0.781 -2.047 0 -2.828 c 0.78 -0.781 2.048 -0.781 2.828 0 l 8.629 8.629 c 0.781 0.781 0.781 2.047 0 2.828 C 32.437 18.246 31.925 18.441 31.413 18.441 z"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  s as GuidanceActionTapIcon
+};

package/dist/components/flows/guidance/renderers/guidance-announcement-surface.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+/**
+ * Figma-aligned announcement backdrop: 12px dot grid + soft hero wash (no hero image).
+ */
+export declare function GuidanceAnnouncementSurface(): React.ReactElement;