@techzyapp/ui-library 1.0.39 → 1.0.40

package/dist/Tooltip-Bw-1Xk2Z.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tooltip-Bw-1Xk2Z.cjs","sources":["../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import {\n  cloneElement,\n  useCallback,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactElement,\n  type ReactNode,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { clsx } from 'clsx'\nimport type { ThemeColor } from '../../theme'\nimport styles from './Tooltip.module.css'\n\nexport type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right'\n\nexport interface TooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'content' | 'color'> {\n  /** The tooltip text/content shown on hover or focus. Empty content renders no tooltip. */\n  content: ReactNode\n  /**\n   * Which side of the trigger the tooltip appears on. Defaults to `top`. Flips to the opposite side when\n   * the preferred one has no room in the viewport.\n   */\n  placement?: TooltipPlacement\n  /** Theme palette token for the fill (label uses its contrast color). Defaults to `primary`. */\n  color?: ThemeColor\n  /** A single focusable element to attach the tooltip to (e.g. a `Button` or `IconButton`). */\n  children: ReactElement\n}\n\n/** Bubble ↔ trigger gap (the CSS margin, `--tz-space-xs`) — used here only to decide whether a side fits. */\nconst GAP = 8\n/** Minimum distance kept between the bubble and the viewport edge. */\nconst EDGE = 8\nconst OPPOSITE: Record<TooltipPlacement, TooltipPlacement> = {\n  top: 'bottom',\n  bottom: 'top',\n  left: 'right',\n  right: 'left',\n}\n\ninterface TooltipGeometry {\n  side: TooltipPlacement\n  /** The anchor point on the trigger's edge (viewport px) — CSS offsets the bubble from it. */\n  x: number\n  y: number\n  /** Cross-axis nudge that keeps the bubble inside the viewport (the arrow counter-shifts). */\n  shift: number\n}\n\n/**\n * Where the bubble goes: the preferred side unless only the opposite one fits, anchored at the middle of\n * that trigger edge, nudged along the cross axis so it never runs off-screen.\n */\nfunction computeGeometry(\n  trigger: DOMRect,\n  bubble: { width: number; height: number },\n  placement: TooltipPlacement,\n): TooltipGeometry {\n  const vw = window.innerWidth\n  const vh = window.innerHeight\n  const fits = (side: TooltipPlacement) =>\n    side === 'top'\n      ? trigger.top - GAP - bubble.height >= EDGE\n      : side === 'bottom'\n        ? trigger.bottom + GAP + bubble.height <= vh - EDGE\n        : side === 'left'\n          ? trigger.left - GAP - bubble.width >= EDGE\n          : trigger.right + GAP + bubble.width <= vw - EDGE\n  const side = !fits(placement) && fits(OPPOSITE[placement]) ? OPPOSITE[placement] : placement\n\n  const clampShift = (center: number, half: number, size: number) =>\n    center - half < EDGE\n      ? EDGE - (center - half)\n      : center + half > size - EDGE\n        ? size - EDGE - (center + half)\n        : 0\n\n  if (side === 'top' || side === 'bottom') {\n    const x = trigger.left + trigger.width / 2\n    return {\n      side,\n      x,\n      y: side === 'top' ? trigger.top : trigger.bottom,\n      shift: clampShift(x, bubble.width / 2, vw),\n    }\n  }\n  const y = trigger.top + trigger.height / 2\n  return {\n    side,\n    x: side === 'left' ? trigger.left : trigger.right,\n    y,\n    shift: clampShift(y, bubble.height / 2, vh),\n  }\n}\n\n/**\n * Shows a small floating label on hover or keyboard focus of its child, with an arrow pointing at\n * the trigger. Wrap a single element: `<Tooltip content=\"Save\"><IconButton…/></Tooltip>`. Opens on\n * `mouseenter`/`focus`, closes on `mouseleave`/`blur`/`Escape`. The child gets `aria-describedby`\n * while open (the label has `role=\"tooltip\"`). The bubble is **portaled to `<body>`** with fixed\n * positioning, so a scrolling / `overflow: hidden` ancestor (a `Table`'s scroll area, a `Modal` body)\n * never clips it; it flips to the opposite side when the preferred one has no room, stays inside the\n * viewport, follows the trigger on scroll / resize, and is mounted only while shown. Token-only styling\n * via the shared `--tz-btn-rgb` pattern — `color` (default `primary`) sets the fill and its contrast\n * label, flipping with the theme.\n */\nexport function Tooltip({\n  content,\n  placement = 'top',\n  color = 'primary',\n  children,\n  className,\n  style,\n  onKeyDown,\n  ...props\n}: TooltipProps) {\n  const tooltipId = `${useId()}-tooltip`\n  const [open, setOpen] = useState(false)\n  // mounted spans the fade-out too; `shown` drives the CSS fade (one frame after the first measure)\n  const [mounted, setMounted] = useState(false)\n  const [shown, setShown] = useState(false)\n  const [geometry, setGeometry] = useState<TooltipGeometry | null>(null)\n  const rootRef = useRef<HTMLSpanElement | null>(null)\n  const bubbleRef = useRef<HTMLSpanElement | null>(null)\n  const hasContent = content !== null && content !== undefined && content !== ''\n\n  const measure = useCallback(() => {\n    const root = rootRef.current\n    const bubble = bubbleRef.current\n    if (!root || !bubble) return\n    setGeometry(\n      computeGeometry(\n        root.getBoundingClientRect(),\n        { width: bubble.offsetWidth, height: bubble.offsetHeight },\n        placement,\n      ),\n    )\n  }, [placement])\n\n  useEffect(() => {\n    if (open) setMounted(true)\n    else setShown(false)\n  }, [open])\n\n  // measure before paint, then fade in on the next frame (so the bubble never flashes at 0,0)\n  useLayoutEffect(() => {\n    if (!open || !mounted) return\n    measure()\n    const frame = requestAnimationFrame(() => setShown(true))\n    return () => cancelAnimationFrame(frame)\n  }, [open, mounted, measure, content])\n\n  // follow the trigger while open — any scroll (capture: a table's scroll area too) or resize\n  useEffect(() => {\n    if (!open) return\n    window.addEventListener('scroll', measure, true)\n    window.addEventListener('resize', measure)\n    return () => {\n      window.removeEventListener('scroll', measure, true)\n      window.removeEventListener('resize', measure)\n    }\n  }, [open, measure])\n\n  // unmount once faded out; the timer covers a transition that never fires (no CSS, reduced motion)\n  useEffect(() => {\n    if (open || !mounted) return\n    const timer = window.setTimeout(() => setMounted(false), 400)\n    return () => window.clearTimeout(timer)\n  }, [open, mounted])\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLSpanElement>) => {\n    if (event.key === 'Escape') setOpen(false)\n    onKeyDown?.(event)\n  }\n\n  if (!hasContent) return children\n\n  const tint = {\n    '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`,\n    '--tz-btn-on': `var(--tz-color-${color}-contrast, #fff)`,\n  } as CSSProperties\n  const side = geometry?.side ?? placement\n  // the bubble is portaled out of the wrapper, so CSS variables set through `style` (e.g. a custom\n  // `--tz-btn-rgb` / `--tz-btn-on` tint, as CodeBlock's white pill does) are copied onto it explicitly\n  const bubbleVars = Object.fromEntries(\n    Object.entries(style ?? {}).filter(([property]) => property.startsWith('--')),\n  ) as CSSProperties\n\n  return (\n    <span\n      ref={rootRef}\n      className={clsx(styles.root, className)}\n      style={{ ...tint, ...style }}\n      onMouseEnter={() => setOpen(true)}\n      onMouseLeave={() => setOpen(false)}\n      onFocus={() => setOpen(true)}\n      onBlur={() => setOpen(false)}\n      onKeyDown={handleKeyDown}\n      {...props}\n    >\n      {open\n        ? cloneElement(children as ReactElement<{ 'aria-describedby'?: string }>, {\n            'aria-describedby': tooltipId,\n          })\n        : children}\n      {mounted &&\n        typeof document !== 'undefined' &&\n        createPortal(\n          <span\n            ref={bubbleRef}\n            role=\"tooltip\"\n            id={tooltipId}\n            className={clsx(styles.tooltip, styles[side])}\n            data-open={open && shown ? 'true' : 'false'}\n            style={\n              {\n                ...tint,\n                ...bubbleVars,\n                top: geometry?.y ?? 0,\n                left: geometry?.x ?? 0,\n                '--tz-tooltip-shift': `${geometry?.shift ?? 0}px`,\n              } as CSSProperties\n            }\n            onTransitionEnd={() => {\n              if (!open) setMounted(false)\n            }}\n          >\n            {content}\n            <span className={styles.arrow} aria-hidden=\"true\" />\n          </span>,\n          document.body,\n        )}\n    </span>\n  )\n}\n"],"names":["GAP","EDGE","OPPOSITE","computeGeometry","trigger","bubble","placement","vw","vh","fits","side","clampShift","center","half","size","x","y","Tooltip","content","color","children","className","style","onKeyDown","props","tooltipId","useId","open","setOpen","useState","mounted","setMounted","shown","setShown","geometry","setGeometry","rootRef","useRef","bubbleRef","hasContent","measure","useCallback","root","useEffect","useLayoutEffect","frame","timer","handleKeyDown","event","tint","bubbleVars","property","jsxs","clsx","styles","cloneElement","createPortal"],"mappings":"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"}

package/dist/Tooltip-DsDv4NOq.js

@@ -1,135 +0,0 @@
-import { jsxs as j, jsx as I } from "react/jsx-runtime";
-import { useId as M, useState as w, useRef as y, useCallback as N, useEffect as x, useLayoutEffect as W, cloneElement as k } from "react";
-import { createPortal as B } from "react-dom";
-import { clsx as G } from "clsx";
-const H = "_root_1i027_4", q = "_tooltip_1i027_13", V = "_arrow_1i027_41", J = "_top_1i027_49", Q = "_bottom_1i027_59", U = "_left_1i027_69", X = "_right_1i027_79", _ = {
-  root: H,
-  tooltip: q,
-  arrow: V,
-  top: J,
-  bottom: Q,
-  left: U,
-  right: X
-}, E = 8, c = 8, P = {
-  top: "bottom",
-  bottom: "top",
-  left: "right",
-  right: "left"
-};
-function Y(o, n, l) {
-  const u = window.innerWidth, p = window.innerHeight, d = (t) => t === "top" ? o.top - E - n.height >= c : t === "bottom" ? o.bottom + E + n.height <= p - c : t === "left" ? o.left - E - n.width >= c : o.right + E + n.width <= u - c, i = !d(l) && d(P[l]) ? P[l] : l, m = (t, r, f) => t - r < c ? c - (t - r) : t + r > f - c ? f - c - (t + r) : 0;
-  if (i === "top" || i === "bottom") {
-    const t = o.left + o.width / 2;
-    return {
-      side: i,
-      x: t,
-      y: i === "top" ? o.top : o.bottom,
-      shift: m(t, n.width / 2, u)
-    };
-  }
-  const h = o.top + o.height / 2;
-  return {
-    side: i,
-    x: i === "left" ? o.left : o.right,
-    y: h,
-    shift: m(h, n.height / 2, p)
-  };
-}
-function tt({
-  content: o,
-  placement: n = "top",
-  color: l = "primary",
-  children: u,
-  className: p,
-  style: d,
-  onKeyDown: i,
-  ...m
-}) {
-  const h = `${M()}-tooltip`, [t, r] = w(!1), [f, b] = w(!1), [R, z] = w(!1), [s, S] = w(null), L = y(null), T = y(null), $ = o != null && o !== "", a = N(() => {
-    const e = L.current, v = T.current;
-    !e || !v || S(
-      Y(
-        e.getBoundingClientRect(),
-        { width: v.offsetWidth, height: v.offsetHeight },
-        n
-      )
-    );
-  }, [n]);
-  x(() => {
-    t ? b(!0) : z(!1);
-  }, [t]), W(() => {
-    if (!t || !f) return;
-    a();
-    const e = requestAnimationFrame(() => z(!0));
-    return () => cancelAnimationFrame(e);
-  }, [t, f, a, o]), x(() => {
-    if (t)
-      return window.addEventListener("scroll", a, !0), window.addEventListener("resize", a), () => {
-        window.removeEventListener("scroll", a, !0), window.removeEventListener("resize", a);
-      };
-  }, [t, a]), x(() => {
-    if (t || !f) return;
-    const e = window.setTimeout(() => b(!1), 400);
-    return () => window.clearTimeout(e);
-  }, [t, f]);
-  const A = (e) => {
-    e.key === "Escape" && r(!1), i == null || i(e);
-  };
-  if (!$) return u;
-  const O = {
-    "--tz-btn-rgb": `var(--tz-color-${l}-rgb)`,
-    "--tz-btn-on": `var(--tz-color-${l}-contrast, #fff)`
-  }, C = (s == null ? void 0 : s.side) ?? n, F = Object.fromEntries(
-    Object.entries(d ?? {}).filter(([e]) => e.startsWith("--"))
-  );
-  return /* @__PURE__ */ j(
-    "span",
-    {
-      ref: L,
-      className: G(_.root, p),
-      style: { ...O, ...d },
-      onMouseEnter: () => r(!0),
-      onMouseLeave: () => r(!1),
-      onFocus: () => r(!0),
-      onBlur: () => r(!1),
-      onKeyDown: A,
-      ...m,
-      children: [
-        t ? k(u, {
-          "aria-describedby": h
-        }) : u,
-        f && typeof document < "u" && B(
-          /* @__PURE__ */ j(
-            "span",
-            {
-              ref: T,
-              role: "tooltip",
-              id: h,
-              className: G(_.tooltip, _[C]),
-              "data-open": t && R ? "true" : "false",
-              style: {
-                ...O,
-                ...F,
-                top: (s == null ? void 0 : s.y) ?? 0,
-                left: (s == null ? void 0 : s.x) ?? 0,
-                "--tz-tooltip-shift": `${(s == null ? void 0 : s.shift) ?? 0}px`
-              },
-              onTransitionEnd: () => {
-                t || b(!1);
-              },
-              children: [
-                o,
-                /* @__PURE__ */ I("span", { className: _.arrow, "aria-hidden": "true" })
-              ]
-            }
-          ),
-          document.body
-        )
-      ]
-    }
-  );
-}
-export {
-  tt as T
-};
-//# sourceMappingURL=Tooltip-DsDv4NOq.js.map

package/dist/Tooltip-DsDv4NOq.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tooltip-DsDv4NOq.js","sources":["../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import {\n  cloneElement,\n  useCallback,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactElement,\n  type ReactNode,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { clsx } from 'clsx'\nimport type { ThemeColor } from '../../theme'\nimport styles from './Tooltip.module.css'\n\nexport type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right'\n\nexport interface TooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'content' | 'color'> {\n  /** The tooltip text/content shown on hover or focus. Empty content renders no tooltip. */\n  content: ReactNode\n  /**\n   * Which side of the trigger the tooltip appears on. Defaults to `top`. Flips to the opposite side when\n   * the preferred one has no room in the viewport.\n   */\n  placement?: TooltipPlacement\n  /** Theme palette token for the fill (label uses its contrast color). Defaults to `primary`. */\n  color?: ThemeColor\n  /** A single focusable element to attach the tooltip to (e.g. a `Button` or `IconButton`). */\n  children: ReactElement\n}\n\n/** Bubble ↔ trigger gap (the CSS margin, `--tz-space-xs`) — used here only to decide whether a side fits. */\nconst GAP = 8\n/** Minimum distance kept between the bubble and the viewport edge. */\nconst EDGE = 8\nconst OPPOSITE: Record<TooltipPlacement, TooltipPlacement> = {\n  top: 'bottom',\n  bottom: 'top',\n  left: 'right',\n  right: 'left',\n}\n\ninterface TooltipGeometry {\n  side: TooltipPlacement\n  /** The anchor point on the trigger's edge (viewport px) — CSS offsets the bubble from it. */\n  x: number\n  y: number\n  /** Cross-axis nudge that keeps the bubble inside the viewport (the arrow counter-shifts). */\n  shift: number\n}\n\n/**\n * Where the bubble goes: the preferred side unless only the opposite one fits, anchored at the middle of\n * that trigger edge, nudged along the cross axis so it never runs off-screen.\n */\nfunction computeGeometry(\n  trigger: DOMRect,\n  bubble: { width: number; height: number },\n  placement: TooltipPlacement,\n): TooltipGeometry {\n  const vw = window.innerWidth\n  const vh = window.innerHeight\n  const fits = (side: TooltipPlacement) =>\n    side === 'top'\n      ? trigger.top - GAP - bubble.height >= EDGE\n      : side === 'bottom'\n        ? trigger.bottom + GAP + bubble.height <= vh - EDGE\n        : side === 'left'\n          ? trigger.left - GAP - bubble.width >= EDGE\n          : trigger.right + GAP + bubble.width <= vw - EDGE\n  const side = !fits(placement) && fits(OPPOSITE[placement]) ? OPPOSITE[placement] : placement\n\n  const clampShift = (center: number, half: number, size: number) =>\n    center - half < EDGE\n      ? EDGE - (center - half)\n      : center + half > size - EDGE\n        ? size - EDGE - (center + half)\n        : 0\n\n  if (side === 'top' || side === 'bottom') {\n    const x = trigger.left + trigger.width / 2\n    return {\n      side,\n      x,\n      y: side === 'top' ? trigger.top : trigger.bottom,\n      shift: clampShift(x, bubble.width / 2, vw),\n    }\n  }\n  const y = trigger.top + trigger.height / 2\n  return {\n    side,\n    x: side === 'left' ? trigger.left : trigger.right,\n    y,\n    shift: clampShift(y, bubble.height / 2, vh),\n  }\n}\n\n/**\n * Shows a small floating label on hover or keyboard focus of its child, with an arrow pointing at\n * the trigger. Wrap a single element: `<Tooltip content=\"Save\"><IconButton…/></Tooltip>`. Opens on\n * `mouseenter`/`focus`, closes on `mouseleave`/`blur`/`Escape`. The child gets `aria-describedby`\n * while open (the label has `role=\"tooltip\"`). The bubble is **portaled to `<body>`** with fixed\n * positioning, so a scrolling / `overflow: hidden` ancestor (a `Table`'s scroll area, a `Modal` body)\n * never clips it; it flips to the opposite side when the preferred one has no room, stays inside the\n * viewport, follows the trigger on scroll / resize, and is mounted only while shown. Token-only styling\n * via the shared `--tz-btn-rgb` pattern — `color` (default `primary`) sets the fill and its contrast\n * label, flipping with the theme.\n */\nexport function Tooltip({\n  content,\n  placement = 'top',\n  color = 'primary',\n  children,\n  className,\n  style,\n  onKeyDown,\n  ...props\n}: TooltipProps) {\n  const tooltipId = `${useId()}-tooltip`\n  const [open, setOpen] = useState(false)\n  // mounted spans the fade-out too; `shown` drives the CSS fade (one frame after the first measure)\n  const [mounted, setMounted] = useState(false)\n  const [shown, setShown] = useState(false)\n  const [geometry, setGeometry] = useState<TooltipGeometry | null>(null)\n  const rootRef = useRef<HTMLSpanElement | null>(null)\n  const bubbleRef = useRef<HTMLSpanElement | null>(null)\n  const hasContent = content !== null && content !== undefined && content !== ''\n\n  const measure = useCallback(() => {\n    const root = rootRef.current\n    const bubble = bubbleRef.current\n    if (!root || !bubble) return\n    setGeometry(\n      computeGeometry(\n        root.getBoundingClientRect(),\n        { width: bubble.offsetWidth, height: bubble.offsetHeight },\n        placement,\n      ),\n    )\n  }, [placement])\n\n  useEffect(() => {\n    if (open) setMounted(true)\n    else setShown(false)\n  }, [open])\n\n  // measure before paint, then fade in on the next frame (so the bubble never flashes at 0,0)\n  useLayoutEffect(() => {\n    if (!open || !mounted) return\n    measure()\n    const frame = requestAnimationFrame(() => setShown(true))\n    return () => cancelAnimationFrame(frame)\n  }, [open, mounted, measure, content])\n\n  // follow the trigger while open — any scroll (capture: a table's scroll area too) or resize\n  useEffect(() => {\n    if (!open) return\n    window.addEventListener('scroll', measure, true)\n    window.addEventListener('resize', measure)\n    return () => {\n      window.removeEventListener('scroll', measure, true)\n      window.removeEventListener('resize', measure)\n    }\n  }, [open, measure])\n\n  // unmount once faded out; the timer covers a transition that never fires (no CSS, reduced motion)\n  useEffect(() => {\n    if (open || !mounted) return\n    const timer = window.setTimeout(() => setMounted(false), 400)\n    return () => window.clearTimeout(timer)\n  }, [open, mounted])\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLSpanElement>) => {\n    if (event.key === 'Escape') setOpen(false)\n    onKeyDown?.(event)\n  }\n\n  if (!hasContent) return children\n\n  const tint = {\n    '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`,\n    '--tz-btn-on': `var(--tz-color-${color}-contrast, #fff)`,\n  } as CSSProperties\n  const side = geometry?.side ?? placement\n  // the bubble is portaled out of the wrapper, so CSS variables set through `style` (e.g. a custom\n  // `--tz-btn-rgb` / `--tz-btn-on` tint, as CodeBlock's white pill does) are copied onto it explicitly\n  const bubbleVars = Object.fromEntries(\n    Object.entries(style ?? {}).filter(([property]) => property.startsWith('--')),\n  ) as CSSProperties\n\n  return (\n    <span\n      ref={rootRef}\n      className={clsx(styles.root, className)}\n      style={{ ...tint, ...style }}\n      onMouseEnter={() => setOpen(true)}\n      onMouseLeave={() => setOpen(false)}\n      onFocus={() => setOpen(true)}\n      onBlur={() => setOpen(false)}\n      onKeyDown={handleKeyDown}\n      {...props}\n    >\n      {open\n        ? cloneElement(children as ReactElement<{ 'aria-describedby'?: string }>, {\n            'aria-describedby': tooltipId,\n          })\n        : children}\n      {mounted &&\n        typeof document !== 'undefined' &&\n        createPortal(\n          <span\n            ref={bubbleRef}\n            role=\"tooltip\"\n            id={tooltipId}\n            className={clsx(styles.tooltip, styles[side])}\n            data-open={open && shown ? 'true' : 'false'}\n            style={\n              {\n                ...tint,\n                ...bubbleVars,\n                top: geometry?.y ?? 0,\n                left: geometry?.x ?? 0,\n                '--tz-tooltip-shift': `${geometry?.shift ?? 0}px`,\n              } as CSSProperties\n            }\n            onTransitionEnd={() => {\n              if (!open) setMounted(false)\n            }}\n          >\n            {content}\n            <span className={styles.arrow} aria-hidden=\"true\" />\n          </span>,\n          document.body,\n        )}\n    </span>\n  )\n}\n"],"names":["GAP","EDGE","OPPOSITE","computeGeometry","trigger","bubble","placement","vw","vh","fits","side","clampShift","center","half","size","x","y","Tooltip","content","color","children","className","style","onKeyDown","props","tooltipId","useId","open","setOpen","useState","mounted","setMounted","shown","setShown","geometry","setGeometry","rootRef","useRef","bubbleRef","hasContent","measure","useCallback","root","useEffect","useLayoutEffect","frame","timer","handleKeyDown","event","tint","bubbleVars","property","jsxs","clsx","styles","cloneElement","createPortal"],"mappings":"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"}