@fanvue/ui 2.12.1 → 2.14.0

package/dist/cjs/components/CyclingText/CyclingText.cjs

@@ -0,0 +1,137 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+const useCyclingCycle = require("./useCyclingCycle.cjs");
+const useCyclingTextTrackWidth = require("./useCyclingTextTrackWidth.cjs");
+const usePageVisibility = require("./usePageVisibility.cjs");
+const usePrefersReducedMotion = require("./usePrefersReducedMotion.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const DEFAULT_INTERVAL_MS = 2100;
+const DEFAULT_TRANSITION_MS = 200;
+const SLIDE_OFFSET_PX = 18;
+const CyclingText = React__namespace.forwardRef(
+  ({
+    items,
+    intervalMs = DEFAULT_INTERVAL_MS,
+    transitionMs = DEFAULT_TRANSITION_MS,
+    direction = "up",
+    paused = false,
+    sizing = "longest",
+    className,
+    labelClassName,
+    announceChanges = false,
+    ...rest
+  }, ref) => {
+    const docVisible = usePageVisibility.usePageVisibility();
+    const reducedMotion = usePrefersReducedMotion.usePrefersReducedMotion();
+    const { sizingLabelRef, trackWidth } = useCyclingTextTrackWidth.useCyclingTextTrackWidth();
+    const { cycle, currentLabel, incomingLabel, sizingLabel, onOutgoingTransitionEnd } = useCyclingCycle.useCyclingCycle(items, sizing, intervalMs, paused, docVisible, transitionMs);
+    const itemCount = items.length;
+    const outgoingMotionStyle = React__namespace.useMemo(() => {
+      const durMs = reducedMotion ? 0 : transitionMs;
+      const exiting = cycle.transitioning;
+      const yExit = direction === "up" ? -SLIDE_OFFSET_PX : SLIDE_OFFSET_PX;
+      return {
+        opacity: exiting ? 0 : 1,
+        transform: exiting ? `translate3d(0, ${yExit}px, 0)` : "translate3d(0, 0, 0)",
+        transition: exiting && durMs > 0 ? `opacity ${durMs}ms cubic-bezier(0.4, 0, 0.2, 1), transform ${durMs}ms cubic-bezier(0.4, 0, 0.2, 1)` : "none"
+      };
+    }, [cycle.transitioning, direction, transitionMs, reducedMotion]);
+    const incomingMotionStyle = React__namespace.useMemo(() => {
+      const durMs = reducedMotion ? 0 : transitionMs;
+      const entered = cycle.incomingEntered;
+      const yEnter = direction === "up" ? SLIDE_OFFSET_PX : -SLIDE_OFFSET_PX;
+      return {
+        opacity: entered ? 1 : 0,
+        transform: entered ? "translate3d(0, 0, 0)" : `translate3d(0, ${yEnter}px, 0)`,
+        transition: durMs > 0 ? `opacity ${durMs}ms cubic-bezier(0.4, 0, 0.2, 1), transform ${durMs}ms cubic-bezier(0.4, 0, 0.2, 1)` : "none"
+      };
+    }, [cycle.incomingEntered, direction, transitionMs, reducedMotion]);
+    if (itemCount === 0) {
+      return null;
+    }
+    const wrapperStyle = {
+      ...trackWidth !== null ? { width: `${trackWidth}px` } : {}
+      // paddingTop: SLIDE_OFFSET_PX,
+    };
+    const showIncoming = incomingLabel !== null && cycle.transitioning;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        ref,
+        "data-testid": "cycling-text",
+        "data-paused": paused ? "true" : void 0,
+        className: cn.cn(
+          "relative inline-flex items-center overflow-hidden align-middle leading-[inherit]",
+          "motion-safe:transition-[width] motion-safe:duration-300 motion-safe:ease-out",
+          className
+        ),
+        style: wrapperStyle,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              ref: sizingLabelRef,
+              "aria-hidden": "true",
+              className: "pointer-events-none invisible inline-block select-none whitespace-nowrap leading-[inherit]",
+              children: sizingLabel
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-layer": "current",
+              "aria-live": announceChanges ? "polite" : void 0,
+              "aria-atomic": announceChanges ? true : void 0,
+              "data-state": cycle.transitioning ? "exit" : "idle",
+              onTransitionEnd: onOutgoingTransitionEnd,
+              className: cn.cn(
+                "absolute inset-0 flex items-center whitespace-nowrap leading-[inherit]",
+                labelClassName
+              ),
+              style: outgoingMotionStyle,
+              children: currentLabel
+            }
+          ),
+          showIncoming ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-layer": "incoming",
+              "data-state": cycle.incomingEntered ? "idle" : "enter",
+              className: cn.cn(
+                "absolute inset-0 flex items-center whitespace-nowrap leading-[inherit]",
+                labelClassName
+              ),
+              style: incomingMotionStyle,
+              children: incomingLabel
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+CyclingText.displayName = "CyclingText";
+exports.CyclingText = CyclingText;
+//# sourceMappingURL=CyclingText.cjs.map

package/dist/cjs/components/CyclingText/CyclingText.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CyclingText.cjs","sources":["../../../../src/components/CyclingText/CyclingText.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useCyclingCycle } from \"./useCyclingCycle\";\nimport { useCyclingTextTrackWidth } from \"./useCyclingTextTrackWidth\";\nimport { usePageVisibility } from \"./usePageVisibility\";\nimport { usePrefersReducedMotion } from \"./usePrefersReducedMotion\";\n\nconst DEFAULT_INTERVAL_MS = 2100;\nconst DEFAULT_TRANSITION_MS = 200;\n\nconst SLIDE_OFFSET_PX = 18;\n\n/** How the wrapper should be sized to accommodate variable-length items. */\nexport type CyclingTextSizing = \"longest\" | \"current\";\n\nexport interface CyclingTextProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, \"children\"> {\n  /** Strings to cycle through, in order. Cycles back to the first after the last. */\n  items: readonly string[];\n  /**\n   * Milliseconds to wait after the previous transition finishes before starting the next one.\n   * @default 2100\n   */\n  intervalMs?: number;\n  /** Slide and cross-fade duration in milliseconds. @default 200 */\n  transitionMs?: number;\n  /** Direction the outgoing item slides. @default \"up\" */\n  direction?: \"up\" | \"down\";\n  /** When true, freezes on the current item — no further cycling until cleared. @default false */\n  paused?: boolean;\n  /**\n   * How the wrapper sizes itself horizontally.\n   * - `longest` reserves space for the longest item — no width jitter as items cycle.\n   * - `current` shrinks/grows with each item, animating width between cycles.\n   * @default \"longest\"\n   */\n  sizing?: CyclingTextSizing;\n  /**\n   * When `true`, updates are exposed to assistive technologies via `aria-live=\"polite\"`.\n   * Leave `false` for decorative or frequently changing copy so screen readers are not interrupted on every cycle.\n   * @default false\n   */\n  announceChanges?: boolean;\n  /**\n   * Class applied to each visible label span (current + incoming). Use this for\n   * effects that have to sit on the text element itself, e.g. `background-clip: text`.\n   */\n  labelClassName?: string;\n}\n\n/**\n * Cycles through a list of strings with a slide-in/slide-out animation. Lives\n * inline so it can sit inside divs, spans, buttons, or as a fake placeholder\n * overlay.\n *\n * @example\n * ```tsx\n * <CyclingText items={[\"Thinking\", \"Reading messages\", \"Drafting reply\"]} />\n * ```\n */\nexport const CyclingText = React.forwardRef<HTMLSpanElement, CyclingTextProps>(\n  (\n    {\n      items,\n      intervalMs = DEFAULT_INTERVAL_MS,\n      transitionMs = DEFAULT_TRANSITION_MS,\n      direction = \"up\",\n      paused = false,\n      sizing = \"longest\",\n      className,\n      labelClassName,\n      announceChanges = false,\n      ...rest\n    },\n    ref,\n  ) => {\n    const docVisible = usePageVisibility();\n    const reducedMotion = usePrefersReducedMotion();\n    const { sizingLabelRef, trackWidth } = useCyclingTextTrackWidth();\n    const { cycle, currentLabel, incomingLabel, sizingLabel, onOutgoingTransitionEnd } =\n      useCyclingCycle(items, sizing, intervalMs, paused, docVisible, transitionMs);\n\n    const itemCount = items.length;\n\n    const outgoingMotionStyle = React.useMemo((): React.CSSProperties => {\n      const durMs = reducedMotion ? 0 : transitionMs;\n      const exiting = cycle.transitioning;\n      const yExit = direction === \"up\" ? -SLIDE_OFFSET_PX : SLIDE_OFFSET_PX;\n      return {\n        opacity: exiting ? 0 : 1,\n        transform: exiting ? `translate3d(0, ${yExit}px, 0)` : \"translate3d(0, 0, 0)\",\n        transition:\n          exiting && durMs > 0\n            ? `opacity ${durMs}ms cubic-bezier(0.4, 0, 0.2, 1), transform ${durMs}ms cubic-bezier(0.4, 0, 0.2, 1)`\n            : \"none\",\n      };\n    }, [cycle.transitioning, direction, transitionMs, reducedMotion]);\n\n    const incomingMotionStyle = React.useMemo((): React.CSSProperties => {\n      const durMs = reducedMotion ? 0 : transitionMs;\n      const entered = cycle.incomingEntered;\n      const yEnter = direction === \"up\" ? SLIDE_OFFSET_PX : -SLIDE_OFFSET_PX;\n      return {\n        opacity: entered ? 1 : 0,\n        transform: entered ? \"translate3d(0, 0, 0)\" : `translate3d(0, ${yEnter}px, 0)`,\n        transition:\n          durMs > 0\n            ? `opacity ${durMs}ms cubic-bezier(0.4, 0, 0.2, 1), transform ${durMs}ms cubic-bezier(0.4, 0, 0.2, 1)`\n            : \"none\",\n      };\n    }, [cycle.incomingEntered, direction, transitionMs, reducedMotion]);\n\n    if (itemCount === 0) {\n      return null;\n    }\n\n    const wrapperStyle = {\n      ...(trackWidth !== null ? { width: `${trackWidth}px` } : {}),\n      // paddingTop: SLIDE_OFFSET_PX,\n    } as React.CSSProperties;\n\n    const showIncoming = incomingLabel !== null && cycle.transitioning;\n\n    return (\n      <span\n        ref={ref}\n        data-testid=\"cycling-text\"\n        data-paused={paused ? \"true\" : undefined}\n        className={cn(\n          \"relative inline-flex items-center overflow-hidden align-middle leading-[inherit]\",\n          \"motion-safe:transition-[width] motion-safe:duration-300 motion-safe:ease-out\",\n          className,\n        )}\n        style={wrapperStyle}\n        {...rest}\n      >\n        <span\n          ref={sizingLabelRef}\n          aria-hidden=\"true\"\n          className=\"pointer-events-none invisible inline-block select-none whitespace-nowrap leading-[inherit]\"\n        >\n          {sizingLabel}\n        </span>\n\n        <span\n          data-layer=\"current\"\n          aria-live={announceChanges ? \"polite\" : undefined}\n          aria-atomic={announceChanges ? true : undefined}\n          data-state={cycle.transitioning ? \"exit\" : \"idle\"}\n          onTransitionEnd={onOutgoingTransitionEnd}\n          className={cn(\n            \"absolute inset-0 flex items-center whitespace-nowrap leading-[inherit]\",\n            labelClassName,\n          )}\n          style={outgoingMotionStyle}\n        >\n          {currentLabel}\n        </span>\n\n        {showIncoming ? (\n          <span\n            aria-hidden=\"true\"\n            data-layer=\"incoming\"\n            data-state={cycle.incomingEntered ? \"idle\" : \"enter\"}\n            className={cn(\n              \"absolute inset-0 flex items-center whitespace-nowrap leading-[inherit]\",\n              labelClassName,\n            )}\n            style={incomingMotionStyle}\n          >\n            {incomingLabel}\n          </span>\n        ) : null}\n      </span>\n    );\n  },\n);\n\nCyclingText.displayName = \"CyclingText\";\n"],"names":["React","usePageVisibility","usePrefersReducedMotion","useCyclingTextTrackWidth","useCyclingCycle","jsxs","cn","jsx"],"mappings":"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"}

package/dist/cjs/components/CyclingText/useCyclingCycle.cjs

@@ -0,0 +1,212 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const initialCycleState = {
+  currentIndex: 0,
+  incomingIndex: null,
+  incomingEntered: false,
+  transitioning: false
+};
+function cycleReducer(state, action) {
+  switch (action.type) {
+    case "tick": {
+      if (action.itemCount <= 1) return state;
+      const next = (state.currentIndex + 1) % action.itemCount;
+      return {
+        ...state,
+        incomingIndex: next,
+        incomingEntered: false,
+        transitioning: true
+      };
+    }
+    case "incoming_entered":
+      return { ...state, incomingEntered: true };
+    case "transition_complete": {
+      if (!state.transitioning || state.incomingIndex === null) return state;
+      return {
+        currentIndex: state.incomingIndex,
+        incomingIndex: null,
+        incomingEntered: false,
+        transitioning: false
+      };
+    }
+    case "pause_clear":
+      return {
+        ...state,
+        incomingIndex: null,
+        incomingEntered: false,
+        transitioning: false
+      };
+    case "clamp_after_items_change": {
+      if (action.itemCount === 0) return state;
+      const idx = state.currentIndex >= action.itemCount ? 0 : state.currentIndex;
+      return {
+        currentIndex: idx,
+        incomingIndex: null,
+        incomingEntered: false,
+        transitioning: false
+      };
+    }
+    default:
+      return state;
+  }
+}
+function useCyclingCycle(items, sizing, intervalMs, paused, docVisible, transitionMs) {
+  const [cycle, dispatch] = React__namespace.useReducer(cycleReducer, initialCycleState);
+  const enterOuterFrameRef = React__namespace.useRef(null);
+  const enterInnerFrameRef = React__namespace.useRef(null);
+  const fallbackTimerRef = React__namespace.useRef(null);
+  const cycleTimeoutRef = React__namespace.useRef(null);
+  const clearCycleTimeout = React__namespace.useCallback(() => {
+    if (cycleTimeoutRef.current !== null) {
+      clearTimeout(cycleTimeoutRef.current);
+      cycleTimeoutRef.current = null;
+    }
+  }, []);
+  const clearAnimationArtifacts = React__namespace.useCallback(() => {
+    if (enterOuterFrameRef.current !== null) {
+      cancelAnimationFrame(enterOuterFrameRef.current);
+      enterOuterFrameRef.current = null;
+    }
+    if (enterInnerFrameRef.current !== null) {
+      cancelAnimationFrame(enterInnerFrameRef.current);
+      enterInnerFrameRef.current = null;
+    }
+    if (fallbackTimerRef.current !== null) {
+      clearTimeout(fallbackTimerRef.current);
+      fallbackTimerRef.current = null;
+    }
+    clearCycleTimeout();
+  }, [clearCycleTimeout]);
+  const itemCount = items.length;
+  React__namespace.useEffect(() => {
+    if (itemCount === 0) return;
+    dispatch({ type: "clamp_after_items_change", itemCount });
+  }, [itemCount]);
+  const safeCurrentIndex = itemCount === 0 ? 0 : cycle.currentIndex % itemCount;
+  const safeIncomingIndex = cycle.incomingIndex === null || itemCount === 0 ? null : cycle.incomingIndex % itemCount;
+  const currentLabel = itemCount === 0 ? "" : items[safeCurrentIndex] ?? "";
+  const incomingLabel = safeIncomingIndex === null ? null : items[safeIncomingIndex] ?? "";
+  const longestItem = React__namespace.useMemo(() => {
+    if (itemCount === 0) return "";
+    let longest = items[0] ?? "";
+    for (const item of items) {
+      if (item.length > longest.length) longest = item;
+    }
+    return longest;
+  }, [items, itemCount]);
+  const sizingLabel = sizing === "longest" ? longestItem : incomingLabel && incomingLabel.length > currentLabel.length ? incomingLabel : currentLabel;
+  const shouldCycle = !paused && docVisible && itemCount > 1;
+  React__namespace.useEffect(() => {
+    if (!shouldCycle || itemCount <= 1) {
+      clearCycleTimeout();
+      return;
+    }
+    if (cycle.transitioning) {
+      return;
+    }
+    cycleTimeoutRef.current = setTimeout(() => {
+      cycleTimeoutRef.current = null;
+      dispatch({ type: "tick", itemCount });
+    }, intervalMs);
+    return () => {
+      clearCycleTimeout();
+    };
+  }, [shouldCycle, itemCount, intervalMs, cycle.transitioning, clearCycleTimeout]);
+  React__namespace.useEffect(() => {
+    if (paused) {
+      clearAnimationArtifacts();
+      dispatch({ type: "pause_clear" });
+    }
+  }, [paused, clearAnimationArtifacts]);
+  React__namespace.useEffect(() => {
+    return () => {
+      clearAnimationArtifacts();
+    };
+  }, [clearAnimationArtifacts]);
+  React__namespace.useEffect(() => {
+    if (!cycle.transitioning || cycle.incomingIndex === null || cycle.incomingEntered) {
+      return;
+    }
+    if (enterOuterFrameRef.current !== null) {
+      cancelAnimationFrame(enterOuterFrameRef.current);
+    }
+    if (enterInnerFrameRef.current !== null) {
+      cancelAnimationFrame(enterInnerFrameRef.current);
+    }
+    enterOuterFrameRef.current = requestAnimationFrame(() => {
+      enterOuterFrameRef.current = null;
+      enterInnerFrameRef.current = requestAnimationFrame(() => {
+        enterInnerFrameRef.current = null;
+        dispatch({ type: "incoming_entered" });
+      });
+    });
+    return () => {
+      if (enterOuterFrameRef.current !== null) {
+        cancelAnimationFrame(enterOuterFrameRef.current);
+        enterOuterFrameRef.current = null;
+      }
+      if (enterInnerFrameRef.current !== null) {
+        cancelAnimationFrame(enterInnerFrameRef.current);
+        enterInnerFrameRef.current = null;
+      }
+    };
+  }, [cycle.transitioning, cycle.incomingIndex, cycle.incomingEntered]);
+  React__namespace.useEffect(() => {
+    if (!cycle.transitioning) {
+      return;
+    }
+    if (fallbackTimerRef.current !== null) {
+      clearTimeout(fallbackTimerRef.current);
+    }
+    fallbackTimerRef.current = setTimeout(() => {
+      dispatch({ type: "transition_complete" });
+      fallbackTimerRef.current = null;
+    }, transitionMs);
+    return () => {
+      if (fallbackTimerRef.current !== null) {
+        clearTimeout(fallbackTimerRef.current);
+        fallbackTimerRef.current = null;
+      }
+    };
+  }, [cycle.transitioning, transitionMs]);
+  const onOutgoingTransitionEnd = React__namespace.useCallback(
+    (event) => {
+      if (!cycle.transitioning) return;
+      if (event.propertyName !== "opacity") return;
+      if (fallbackTimerRef.current !== null) {
+        clearTimeout(fallbackTimerRef.current);
+        fallbackTimerRef.current = null;
+      }
+      dispatch({ type: "transition_complete" });
+    },
+    [cycle.transitioning]
+  );
+  return {
+    cycle,
+    currentLabel,
+    incomingLabel,
+    sizingLabel,
+    onOutgoingTransitionEnd
+  };
+}
+exports.useCyclingCycle = useCyclingCycle;
+//# sourceMappingURL=useCyclingCycle.cjs.map

package/dist/cjs/components/CyclingText/useCyclingCycle.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCyclingCycle.cjs","sources":["../../../../src/components/CyclingText/useCyclingCycle.ts"],"sourcesContent":["import * as React from \"react\";\n\ntype CyclingTextSizingOption = \"longest\" | \"current\";\n\ntype CycleState = {\n  currentIndex: number;\n  incomingIndex: number | null;\n  incomingEntered: boolean;\n  transitioning: boolean;\n};\n\ntype CycleAction =\n  | { type: \"tick\"; itemCount: number }\n  | { type: \"incoming_entered\" }\n  | { type: \"transition_complete\" }\n  | { type: \"pause_clear\" }\n  | { type: \"clamp_after_items_change\"; itemCount: number };\n\nconst initialCycleState: CycleState = {\n  currentIndex: 0,\n  incomingIndex: null,\n  incomingEntered: false,\n  transitioning: false,\n};\n\nfunction cycleReducer(state: CycleState, action: CycleAction): CycleState {\n  switch (action.type) {\n    case \"tick\": {\n      if (action.itemCount <= 1) return state;\n      const next = (state.currentIndex + 1) % action.itemCount;\n      return {\n        ...state,\n        incomingIndex: next,\n        incomingEntered: false,\n        transitioning: true,\n      };\n    }\n    case \"incoming_entered\":\n      return { ...state, incomingEntered: true };\n    case \"transition_complete\": {\n      if (!state.transitioning || state.incomingIndex === null) return state;\n      return {\n        currentIndex: state.incomingIndex,\n        incomingIndex: null,\n        incomingEntered: false,\n        transitioning: false,\n      };\n    }\n    case \"pause_clear\":\n      return {\n        ...state,\n        incomingIndex: null,\n        incomingEntered: false,\n        transitioning: false,\n      };\n    case \"clamp_after_items_change\": {\n      if (action.itemCount === 0) return state;\n      const idx = state.currentIndex >= action.itemCount ? 0 : state.currentIndex;\n      return {\n        currentIndex: idx,\n        incomingIndex: null,\n        incomingEntered: false,\n        transitioning: false,\n      };\n    }\n    default:\n      return state;\n  }\n}\n\nexport function useCyclingCycle(\n  items: readonly string[],\n  sizing: CyclingTextSizingOption,\n  intervalMs: number,\n  paused: boolean,\n  docVisible: boolean,\n  transitionMs: number,\n) {\n  const [cycle, dispatch] = React.useReducer(cycleReducer, initialCycleState);\n\n  const enterOuterFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n  const enterInnerFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n  const fallbackTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n  const cycleTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const clearCycleTimeout = React.useCallback(() => {\n    if (cycleTimeoutRef.current !== null) {\n      clearTimeout(cycleTimeoutRef.current);\n      cycleTimeoutRef.current = null;\n    }\n  }, []);\n\n  const clearAnimationArtifacts = React.useCallback(() => {\n    if (enterOuterFrameRef.current !== null) {\n      cancelAnimationFrame(enterOuterFrameRef.current);\n      enterOuterFrameRef.current = null;\n    }\n    if (enterInnerFrameRef.current !== null) {\n      cancelAnimationFrame(enterInnerFrameRef.current);\n      enterInnerFrameRef.current = null;\n    }\n    if (fallbackTimerRef.current !== null) {\n      clearTimeout(fallbackTimerRef.current);\n      fallbackTimerRef.current = null;\n    }\n    clearCycleTimeout();\n  }, [clearCycleTimeout]);\n\n  const itemCount = items.length;\n\n  React.useEffect(() => {\n    if (itemCount === 0) return;\n    dispatch({ type: \"clamp_after_items_change\", itemCount });\n  }, [itemCount]);\n\n  const safeCurrentIndex = itemCount === 0 ? 0 : cycle.currentIndex % itemCount;\n  const safeIncomingIndex =\n    cycle.incomingIndex === null || itemCount === 0 ? null : cycle.incomingIndex % itemCount;\n\n  const currentLabel = itemCount === 0 ? \"\" : (items[safeCurrentIndex] ?? \"\");\n  const incomingLabel = safeIncomingIndex === null ? null : (items[safeIncomingIndex] ?? \"\");\n\n  const longestItem = React.useMemo(() => {\n    if (itemCount === 0) return \"\";\n    let longest = items[0] ?? \"\";\n    for (const item of items) {\n      if (item.length > longest.length) longest = item;\n    }\n    return longest;\n  }, [items, itemCount]);\n\n  const sizingLabel =\n    sizing === \"longest\"\n      ? longestItem\n      : incomingLabel && incomingLabel.length > currentLabel.length\n        ? incomingLabel\n        : currentLabel;\n\n  const shouldCycle = !paused && docVisible && itemCount > 1;\n\n  React.useEffect(() => {\n    if (!shouldCycle || itemCount <= 1) {\n      clearCycleTimeout();\n      return;\n    }\n\n    if (cycle.transitioning) {\n      return;\n    }\n\n    cycleTimeoutRef.current = setTimeout(() => {\n      cycleTimeoutRef.current = null;\n      dispatch({ type: \"tick\", itemCount });\n    }, intervalMs);\n\n    return () => {\n      clearCycleTimeout();\n    };\n  }, [shouldCycle, itemCount, intervalMs, cycle.transitioning, clearCycleTimeout]);\n\n  React.useEffect(() => {\n    if (paused) {\n      clearAnimationArtifacts();\n      dispatch({ type: \"pause_clear\" });\n    }\n  }, [paused, clearAnimationArtifacts]);\n\n  React.useEffect(() => {\n    return () => {\n      clearAnimationArtifacts();\n    };\n  }, [clearAnimationArtifacts]);\n\n  React.useEffect(() => {\n    if (!cycle.transitioning || cycle.incomingIndex === null || cycle.incomingEntered) {\n      return;\n    }\n\n    if (enterOuterFrameRef.current !== null) {\n      cancelAnimationFrame(enterOuterFrameRef.current);\n    }\n    if (enterInnerFrameRef.current !== null) {\n      cancelAnimationFrame(enterInnerFrameRef.current);\n    }\n\n    enterOuterFrameRef.current = requestAnimationFrame(() => {\n      enterOuterFrameRef.current = null;\n      enterInnerFrameRef.current = requestAnimationFrame(() => {\n        enterInnerFrameRef.current = null;\n        dispatch({ type: \"incoming_entered\" });\n      });\n    });\n\n    return () => {\n      if (enterOuterFrameRef.current !== null) {\n        cancelAnimationFrame(enterOuterFrameRef.current);\n        enterOuterFrameRef.current = null;\n      }\n      if (enterInnerFrameRef.current !== null) {\n        cancelAnimationFrame(enterInnerFrameRef.current);\n        enterInnerFrameRef.current = null;\n      }\n    };\n  }, [cycle.transitioning, cycle.incomingIndex, cycle.incomingEntered]);\n\n  React.useEffect(() => {\n    if (!cycle.transitioning) {\n      return;\n    }\n    if (fallbackTimerRef.current !== null) {\n      clearTimeout(fallbackTimerRef.current);\n    }\n    fallbackTimerRef.current = setTimeout(() => {\n      dispatch({ type: \"transition_complete\" });\n      fallbackTimerRef.current = null;\n    }, transitionMs);\n\n    return () => {\n      if (fallbackTimerRef.current !== null) {\n        clearTimeout(fallbackTimerRef.current);\n        fallbackTimerRef.current = null;\n      }\n    };\n  }, [cycle.transitioning, transitionMs]);\n\n  const onOutgoingTransitionEnd = React.useCallback(\n    (event: React.TransitionEvent<HTMLSpanElement>) => {\n      if (!cycle.transitioning) return;\n      if (event.propertyName !== \"opacity\") return;\n      if (fallbackTimerRef.current !== null) {\n        clearTimeout(fallbackTimerRef.current);\n        fallbackTimerRef.current = null;\n      }\n      dispatch({ type: \"transition_complete\" });\n    },\n    [cycle.transitioning],\n  );\n\n  return {\n    cycle,\n    currentLabel,\n    incomingLabel,\n    sizingLabel,\n    onOutgoingTransitionEnd,\n  };\n}\n"],"names":["React"],"mappings":"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"}

package/dist/cjs/components/CyclingText/useCyclingTextTrackWidth.cjs

@@ -0,0 +1,55 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function useCyclingTextTrackWidth() {
+  const sizingLabelRef = React__namespace.useRef(null);
+  const [trackWidth, setTrackWidth] = React__namespace.useState(null);
+  const widthFrameRef = React__namespace.useRef(null);
+  React__namespace.useEffect(() => {
+    const node = sizingLabelRef.current;
+    if (!node) return;
+    const measure = () => {
+      const next = Math.ceil(node.getBoundingClientRect().width);
+      if (!next) return;
+      if (widthFrameRef.current !== null) {
+        cancelAnimationFrame(widthFrameRef.current);
+      }
+      widthFrameRef.current = requestAnimationFrame(() => {
+        setTrackWidth(next);
+        widthFrameRef.current = null;
+      });
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(node);
+    return () => {
+      observer.disconnect();
+      if (widthFrameRef.current !== null) {
+        cancelAnimationFrame(widthFrameRef.current);
+        widthFrameRef.current = null;
+      }
+    };
+  }, []);
+  return { sizingLabelRef, trackWidth };
+}
+exports.useCyclingTextTrackWidth = useCyclingTextTrackWidth;
+//# sourceMappingURL=useCyclingTextTrackWidth.cjs.map

package/dist/cjs/components/CyclingText/useCyclingTextTrackWidth.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCyclingTextTrackWidth.cjs","sources":["../../../../src/components/CyclingText/useCyclingTextTrackWidth.ts"],"sourcesContent":["import * as React from \"react\";\n\n/**\n * Observes the measured label node and stores its width so the wrapper can animate width\n * without layout thrash when fonts load or the parent resizes.\n */\nexport function useCyclingTextTrackWidth() {\n  const sizingLabelRef = React.useRef<HTMLSpanElement | null>(null);\n  const [trackWidth, setTrackWidth] = React.useState<number | null>(null);\n  const widthFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n\n  React.useEffect(() => {\n    const node = sizingLabelRef.current;\n    if (!node) return;\n\n    const measure = () => {\n      const next = Math.ceil(node.getBoundingClientRect().width);\n      if (!next) return;\n      if (widthFrameRef.current !== null) {\n        cancelAnimationFrame(widthFrameRef.current);\n      }\n      widthFrameRef.current = requestAnimationFrame(() => {\n        setTrackWidth(next);\n        widthFrameRef.current = null;\n      });\n    };\n\n    measure();\n\n    if (typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(measure);\n    observer.observe(node);\n\n    return () => {\n      observer.disconnect();\n      if (widthFrameRef.current !== null) {\n        cancelAnimationFrame(widthFrameRef.current);\n        widthFrameRef.current = null;\n      }\n    };\n  }, []);\n\n  return { sizingLabelRef, trackWidth };\n}\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAMO,SAAS,2BAA2B;AACzC,QAAM,iBAAiBA,iBAAM,OAA+B,IAAI;AAChE,QAAM,CAAC,YAAY,aAAa,IAAIA,iBAAM,SAAwB,IAAI;AACtE,QAAM,gBAAgBA,iBAAM,OAAwD,IAAI;AAExFA,mBAAM,UAAU,MAAM;AACpB,UAAM,OAAO,eAAe;AAC5B,QAAI,CAAC,KAAM;AAEX,UAAM,UAAU,MAAM;AACpB,YAAM,OAAO,KAAK,KAAK,KAAK,sBAAA,EAAwB,KAAK;AACzD,UAAI,CAAC,KAAM;AACX,UAAI,cAAc,YAAY,MAAM;AAClC,6BAAqB,cAAc,OAAO;AAAA,MAC5C;AACA,oBAAc,UAAU,sBAAsB,MAAM;AAClD,sBAAc,IAAI;AAClB,sBAAc,UAAU;AAAA,MAC1B,CAAC;AAAA,IACH;AAEA,YAAA;AAEA,QAAI,OAAO,mBAAmB,YAAa;AAC3C,UAAM,WAAW,IAAI,eAAe,OAAO;AAC3C,aAAS,QAAQ,IAAI;AAErB,WAAO,MAAM;AACX,eAAS,WAAA;AACT,UAAI,cAAc,YAAY,MAAM;AAClC,6BAAqB,cAAc,OAAO;AAC1C,sBAAc,UAAU;AAAA,MAC1B;AAAA,IACF;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,SAAO,EAAE,gBAAgB,WAAA;AAC3B;;"}

package/dist/cjs/components/CyclingText/usePageVisibility.cjs

@@ -0,0 +1,38 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function usePageVisibility() {
+  const [visible, setVisible] = React__namespace.useState(true);
+  React__namespace.useEffect(() => {
+    if (typeof document === "undefined") {
+      return;
+    }
+    const update = () => {
+      setVisible(document.visibilityState === "visible");
+    };
+    update();
+    document.addEventListener("visibilitychange", update);
+    return () => document.removeEventListener("visibilitychange", update);
+  }, []);
+  return visible;
+}
+exports.usePageVisibility = usePageVisibility;
+//# sourceMappingURL=usePageVisibility.cjs.map

package/dist/cjs/components/CyclingText/usePageVisibility.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePageVisibility.cjs","sources":["../../../../src/components/CyclingText/usePageVisibility.ts"],"sourcesContent":["import * as React from \"react\";\n\n/**\n * Tracks whether the browser tab is visible (`document.visibilityState === \"visible\"`).\n * Cycling animations use this to pause while the document is hidden so timers do not queue\n * many swaps while the user is away.\n */\nexport function usePageVisibility(): boolean {\n  const [visible, setVisible] = React.useState(true);\n\n  React.useEffect(() => {\n    if (typeof document === \"undefined\") {\n      return;\n    }\n    const update = () => {\n      setVisible(document.visibilityState === \"visible\");\n    };\n    update();\n    document.addEventListener(\"visibilitychange\", update);\n    return () => document.removeEventListener(\"visibilitychange\", update);\n  }, []);\n\n  return visible;\n}\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAOO,SAAS,oBAA6B;AAC3C,QAAM,CAAC,SAAS,UAAU,IAAIA,iBAAM,SAAS,IAAI;AAEjDA,mBAAM,UAAU,MAAM;AACpB,QAAI,OAAO,aAAa,aAAa;AACnC;AAAA,IACF;AACA,UAAM,SAAS,MAAM;AACnB,iBAAW,SAAS,oBAAoB,SAAS;AAAA,IACnD;AACA,WAAA;AACA,aAAS,iBAAiB,oBAAoB,MAAM;AACpD,WAAO,MAAM,SAAS,oBAAoB,oBAAoB,MAAM;AAAA,EACtE,GAAG,CAAA,CAAE;AAEL,SAAO;AACT;;"}

package/dist/cjs/components/CyclingText/usePrefersReducedMotion.cjs

@@ -0,0 +1,39 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = React__namespace.useState(false);
+  React__namespace.useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return;
+    }
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const sync = () => {
+      setReduced(mq.matches);
+    };
+    sync();
+    mq.addEventListener("change", sync);
+    return () => mq.removeEventListener("change", sync);
+  }, []);
+  return reduced;
+}
+exports.usePrefersReducedMotion = usePrefersReducedMotion;
+//# sourceMappingURL=usePrefersReducedMotion.cjs.map

package/dist/cjs/components/CyclingText/usePrefersReducedMotion.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePrefersReducedMotion.cjs","sources":["../../../../src/components/CyclingText/usePrefersReducedMotion.ts"],"sourcesContent":["import * as React from \"react\";\n\nexport function usePrefersReducedMotion(): boolean {\n  const [reduced, setReduced] = React.useState(false);\n\n  React.useEffect(() => {\n    if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") {\n      return;\n    }\n    const mq = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n    const sync = () => {\n      setReduced(mq.matches);\n    };\n    sync();\n    mq.addEventListener(\"change\", sync);\n    return () => mq.removeEventListener(\"change\", sync);\n  }, []);\n\n  return reduced;\n}\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAEO,SAAS,0BAAmC;AACjD,QAAM,CAAC,SAAS,UAAU,IAAIA,iBAAM,SAAS,KAAK;AAElDA,mBAAM,UAAU,MAAM;AACpB,QAAI,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe,YAAY;AAC5E;AAAA,IACF;AACA,UAAM,KAAK,OAAO,WAAW,kCAAkC;AAC/D,UAAM,OAAO,MAAM;AACjB,iBAAW,GAAG,OAAO;AAAA,IACvB;AACA,SAAA;AACA,OAAG,iBAAiB,UAAU,IAAI;AAClC,WAAO,MAAM,GAAG,oBAAoB,UAAU,IAAI;AAAA,EACpD,GAAG,CAAA,CAAE;AAEL,SAAO;AACT;;"}

package/dist/cjs/components/EmptyState/EmptyState.cjs

@@ -22,6 +22,20 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const titleSizeClass = {
+  xs: "typography-bold-heading-xs",
+  sm: "typography-bold-heading-sm",
+  md: "typography-bold-heading-md",
+  lg: "typography-bold-heading-lg",
+  xl: "typography-bold-heading-xl"
+};
+const mediaSizeClass = {
+  xs: "h-[80px]",
+  sm: "h-[160px]",
+  md: "h-[200px]",
+  lg: "h-[280px]",
+  xl: "h-[360px]"
+};
 function isNonEmptyString(value) {
   return typeof value === "string" && value.length > 0;
 }
@@ -39,8 +53,10 @@ const EmptyState = React__namespace.forwardRef(
     className,
     variant = "default",
     title,
+    titleSize = "lg",
     description,
     media,
+    mediaSize = "lg",
     primaryAction,
     secondaryAction,
     ...props
@@ -50,11 +66,11 @@ const EmptyState = React__namespace.forwardRef(
     const regionLabelledBy = hasSlotContent(title) ? titleId : void 0;
     const renderedPrimary = primaryAction === void 0 || primaryAction === null || primaryAction === false || primaryAction === "" ? null : isNonEmptyString(primaryAction) ? /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "brand", fullWidth: true, children: primaryAction }) : primaryAction;
     const renderedSecondary = secondaryAction === void 0 || secondaryAction === null || secondaryAction === false || secondaryAction === "" ? null : isNonEmptyString(secondaryAction) ? /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "secondary", fullWidth: true, children: secondaryAction }) : secondaryAction;
-    const renderedTitle = title === void 0 || title === null || title === false || title === "" ? null : isNonEmptyString(title) ? /* @__PURE__ */ jsxRuntime.jsx("h2", { id: titleId, className: "m-0 typography-bold-heading-lg text-content-primary", children: title }) : /* @__PURE__ */ jsxRuntime.jsx(
+    const renderedTitle = title === void 0 || title === null || title === false || title === "" ? null : isNonEmptyString(title) ? /* @__PURE__ */ jsxRuntime.jsx("h2", { id: titleId, className: cn.cn("m-0 text-content-primary", titleSizeClass[titleSize]), children: title }) : /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         id: titleId,
-        className: "typography-bold-heading-lg text-content-primary min-w-0 w-full",
+        className: cn.cn("text-content-primary min-w-0 w-full", titleSizeClass[titleSize]),
         children: title
       }
     );
@@ -83,7 +99,7 @@ const EmptyState = React__namespace.forwardRef(
         ),
         ...props,
         children: [
-          showMedia && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[280px] w-full overflow-hidden rounded-md", children: renderedMedia }),
+          showMedia && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn.cn("w-full overflow-hidden rounded-md", mediaSizeClass[mediaSize]), children: renderedMedia }),
           /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {

package/dist/cjs/components/EmptyState/EmptyState.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.cjs","sources":["../../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button/Button\";\n\nexport type EmptyStateVariant = \"default\" | \"centered\";\n\n/** Slot that can be plain copy (styled by `EmptyState`) or custom markup. */\nexport type EmptyStateSlot = string | React.ReactNode;\n\nfunction isNonEmptyString(value: unknown): value is string {\n  return typeof value === \"string\" && value.length > 0;\n}\n\nfunction hasSlotContent(value: EmptyStateSlot | undefined): boolean {\n  if (value === undefined || value === null || value === false) {\n    return false;\n  }\n  if (typeof value === \"string\") {\n    return value.length > 0;\n  }\n  return true;\n}\n\nexport interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLElement>, \"title\"> {\n  /**\n   * Matches Figma property `Property 1` (`Default` / `centered`).\n   * @default \"default\"\n   */\n  variant?: EmptyStateVariant;\n  /** Main heading. Strings use library heading styles; pass a node for full control. */\n  title?: EmptyStateSlot;\n  /** Supporting body copy. Strings use library body styles; pass a node for rich text. */\n  description?: EmptyStateSlot;\n  /**\n   * Top visual / illustration slot.\n   * A string is treated as an image URL (`<img src={…}>`); pass a node for custom layout.\n   */\n  media?: EmptyStateSlot;\n  /**\n   * Primary call to action.\n   * A string renders a brand `Button` with that label; pass a node for links, loading, etc.\n   */\n  primaryAction?: EmptyStateSlot;\n  /**\n   * Secondary action below the primary.\n   * A string renders a secondary `Button` with that label; pass a node when you need more control.\n   */\n  secondaryAction?: EmptyStateSlot;\n}\n\nexport const EmptyState = React.forwardRef<HTMLElement, EmptyStateProps>(\n  (\n    {\n      className,\n      variant = \"default\",\n      title,\n      description,\n      media,\n      primaryAction,\n      secondaryAction,\n      ...props\n    },\n    ref,\n  ) => {\n    const isCentered = variant === \"centered\";\n    const titleId = React.useId();\n    const regionLabelledBy = hasSlotContent(title) ? titleId : undefined;\n\n    const renderedPrimary =\n      primaryAction === undefined ||\n      primaryAction === null ||\n      primaryAction === false ||\n      primaryAction === \"\" ? null : isNonEmptyString(primaryAction) ? (\n        <Button variant=\"brand\" fullWidth>\n          {primaryAction}\n        </Button>\n      ) : (\n        primaryAction\n      );\n\n    const renderedSecondary =\n      secondaryAction === undefined ||\n      secondaryAction === null ||\n      secondaryAction === false ||\n      secondaryAction === \"\" ? null : isNonEmptyString(secondaryAction) ? (\n        <Button variant=\"secondary\" fullWidth>\n          {secondaryAction}\n        </Button>\n      ) : (\n        secondaryAction\n      );\n\n    const renderedTitle =\n      title === undefined ||\n      title === null ||\n      title === false ||\n      title === \"\" ? null : isNonEmptyString(title) ? (\n        <h2 id={titleId} className=\"m-0 typography-bold-heading-lg text-content-primary\">\n          {title}\n        </h2>\n      ) : (\n        <div\n          id={titleId}\n          className=\"typography-bold-heading-lg text-content-primary min-w-0 w-full\"\n        >\n          {title}\n        </div>\n      );\n\n    const renderedDescription =\n      description === undefined ||\n      description === null ||\n      description === false ||\n      description === \"\" ? null : isNonEmptyString(description) ? (\n        <p className=\"m-0 typography-regular-body-lg text-content-secondary\">{description}</p>\n      ) : (\n        <div className=\"typography-regular-body-lg text-content-secondary min-w-0 w-full\">\n          {description}\n        </div>\n      );\n\n    const renderedMedia =\n      media === undefined ||\n      media === null ||\n      media === false ||\n      media === \"\" ? null : isNonEmptyString(media) ? (\n        <img\n          src={media}\n          alt=\"\"\n          decoding=\"async\"\n          className=\"block h-full w-full object-contain object-center\"\n        />\n      ) : (\n        media\n      );\n\n    const showMedia = renderedMedia !== null;\n    const showActions = renderedPrimary !== null || renderedSecondary !== null;\n\n    return (\n      <section\n        ref={ref}\n        aria-labelledby={regionLabelledBy}\n        data-testid=\"empty-state\"\n        className={cn(\n          \"flex w-full max-w-[375px] flex-col gap-6\",\n          isCentered ? \"items-center text-center\" : \"items-start text-left\",\n          className,\n        )}\n        {...props}\n      >\n        {showMedia && (\n          <div className=\"h-[280px] w-full overflow-hidden rounded-md\">{renderedMedia}</div>\n        )}\n\n        <div\n          className={cn(\"flex w-full flex-col gap-6\", isCentered ? \"items-center\" : \"items-start\")}\n        >\n          <div\n            className={cn(\n              \"flex w-full flex-col gap-4\",\n              isCentered ? \"items-center\" : \"items-start\",\n            )}\n          >\n            {renderedTitle}\n            {renderedDescription}\n          </div>\n\n          {showActions ? (\n            <div className={cn(\"flex flex-col gap-4\", isCentered ? \"items-center\" : \"items-start\")}>\n              {renderedPrimary}\n              {renderedSecondary}\n            </div>\n          ) : null}\n        </div>\n      </section>\n    );\n  },\n);\n\nEmptyState.displayName = \"EmptyState\";\n"],"names":["React","Button","jsx","jsxs","cn"],"mappings":"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"}
+{"version":3,"file":"EmptyState.cjs","sources":["../../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button/Button\";\n\nexport type EmptyStateVariant = \"default\" | \"centered\";\n\nexport type EmptyStateTitleSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nconst titleSizeClass: Record<EmptyStateTitleSize, string> = {\n  xs: \"typography-bold-heading-xs\",\n  sm: \"typography-bold-heading-sm\",\n  md: \"typography-bold-heading-md\",\n  lg: \"typography-bold-heading-lg\",\n  xl: \"typography-bold-heading-xl\",\n};\n\nexport type EmptyStateMediaSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nconst mediaSizeClass: Record<EmptyStateMediaSize, string> = {\n  xs: \"h-[80px]\",\n  sm: \"h-[160px]\",\n  md: \"h-[200px]\",\n  lg: \"h-[280px]\",\n  xl: \"h-[360px]\",\n};\n\n/** Slot that can be plain copy (styled by `EmptyState`) or custom markup. */\nexport type EmptyStateSlot = string | React.ReactNode;\n\nfunction isNonEmptyString(value: unknown): value is string {\n  return typeof value === \"string\" && value.length > 0;\n}\n\nfunction hasSlotContent(value: EmptyStateSlot | undefined): boolean {\n  if (value === undefined || value === null || value === false) {\n    return false;\n  }\n  if (typeof value === \"string\") {\n    return value.length > 0;\n  }\n  return true;\n}\n\nexport interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLElement>, \"title\"> {\n  /**\n   * Matches Figma property `Property 1` (`Default` / `centered`).\n   * @default \"default\"\n   */\n  variant?: EmptyStateVariant;\n  /** Main heading. Strings use library heading styles; pass a node for full control. */\n  title?: EmptyStateSlot;\n  /**\n   * Size of the title heading — mapped internally to bold heading typography tokens.\n   * @default \"lg\"\n   */\n  titleSize?: EmptyStateTitleSize;\n  /** Supporting body copy. Strings use library body styles; pass a node for rich text. */\n  description?: EmptyStateSlot;\n  /**\n   * Top visual / illustration slot.\n   * A string is treated as an image URL (`<img src={…}>`); pass a node for custom layout.\n   */\n  media?: EmptyStateSlot;\n  /**\n   * Height of the media container.\n   * @default \"lg\"\n   */\n  mediaSize?: EmptyStateMediaSize;\n  /**\n   * Primary call to action.\n   * A string renders a brand `Button` with that label; pass a node for links, loading, etc.\n   */\n  primaryAction?: EmptyStateSlot;\n  /**\n   * Secondary action below the primary.\n   * A string renders a secondary `Button` with that label; pass a node when you need more control.\n   */\n  secondaryAction?: EmptyStateSlot;\n}\n\nexport const EmptyState = React.forwardRef<HTMLElement, EmptyStateProps>(\n  (\n    {\n      className,\n      variant = \"default\",\n      title,\n      titleSize = \"lg\",\n      description,\n      media,\n      mediaSize = \"lg\",\n      primaryAction,\n      secondaryAction,\n      ...props\n    },\n    ref,\n  ) => {\n    const isCentered = variant === \"centered\";\n    const titleId = React.useId();\n    const regionLabelledBy = hasSlotContent(title) ? titleId : undefined;\n\n    const renderedPrimary =\n      primaryAction === undefined ||\n      primaryAction === null ||\n      primaryAction === false ||\n      primaryAction === \"\" ? null : isNonEmptyString(primaryAction) ? (\n        <Button variant=\"brand\" fullWidth>\n          {primaryAction}\n        </Button>\n      ) : (\n        primaryAction\n      );\n\n    const renderedSecondary =\n      secondaryAction === undefined ||\n      secondaryAction === null ||\n      secondaryAction === false ||\n      secondaryAction === \"\" ? null : isNonEmptyString(secondaryAction) ? (\n        <Button variant=\"secondary\" fullWidth>\n          {secondaryAction}\n        </Button>\n      ) : (\n        secondaryAction\n      );\n\n    const renderedTitle =\n      title === undefined ||\n      title === null ||\n      title === false ||\n      title === \"\" ? null : isNonEmptyString(title) ? (\n        <h2 id={titleId} className={cn(\"m-0 text-content-primary\", titleSizeClass[titleSize])}>\n          {title}\n        </h2>\n      ) : (\n        <div\n          id={titleId}\n          className={cn(\"text-content-primary min-w-0 w-full\", titleSizeClass[titleSize])}\n        >\n          {title}\n        </div>\n      );\n\n    const renderedDescription =\n      description === undefined ||\n      description === null ||\n      description === false ||\n      description === \"\" ? null : isNonEmptyString(description) ? (\n        <p className=\"m-0 typography-regular-body-lg text-content-secondary\">{description}</p>\n      ) : (\n        <div className=\"typography-regular-body-lg text-content-secondary min-w-0 w-full\">\n          {description}\n        </div>\n      );\n\n    const renderedMedia =\n      media === undefined ||\n      media === null ||\n      media === false ||\n      media === \"\" ? null : isNonEmptyString(media) ? (\n        <img\n          src={media}\n          alt=\"\"\n          decoding=\"async\"\n          className=\"block h-full w-full object-contain object-center\"\n        />\n      ) : (\n        media\n      );\n\n    const showMedia = renderedMedia !== null;\n    const showActions = renderedPrimary !== null || renderedSecondary !== null;\n\n    return (\n      <section\n        ref={ref}\n        aria-labelledby={regionLabelledBy}\n        data-testid=\"empty-state\"\n        className={cn(\n          \"flex w-full max-w-[375px] flex-col gap-6\",\n          isCentered ? \"items-center text-center\" : \"items-start text-left\",\n          className,\n        )}\n        {...props}\n      >\n        {showMedia && (\n          <div className={cn(\"w-full overflow-hidden rounded-md\", mediaSizeClass[mediaSize])}>\n            {renderedMedia}\n          </div>\n        )}\n\n        <div\n          className={cn(\"flex w-full flex-col gap-6\", isCentered ? \"items-center\" : \"items-start\")}\n        >\n          <div\n            className={cn(\n              \"flex w-full flex-col gap-4\",\n              isCentered ? \"items-center\" : \"items-start\",\n            )}\n          >\n            {renderedTitle}\n            {renderedDescription}\n          </div>\n\n          {showActions ? (\n            <div className={cn(\"flex flex-col gap-4\", isCentered ? \"items-center\" : \"items-start\")}>\n              {renderedPrimary}\n              {renderedSecondary}\n            </div>\n          ) : null}\n        </div>\n      </section>\n    );\n  },\n);\n\nEmptyState.displayName = \"EmptyState\";\n"],"names":["React","Button","jsx","cn","jsxs"],"mappings":"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"}