@payloadcms/ui 4.0.0-internal.d28e9fb → 4.0.0-internal.d7d662c

package/dist/elements/Tooltip/index.css

@@ -1,49 +1,50 @@
 @layer payload-default {
   .tooltip {
-    --caret-size: 0.375rem;
+    --caret-width: 15px;
+    --caret-height: 7px;
+    --caret-offset: 4px;
+    --caret-border-color: var(--color-border);
+    --tooltip-caret-x: 0px;
+    --tooltip-caret-y: 0px;
+    --tooltip-max-width: none;
+
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: var(--z-portal-element);
+    pointer-events: none;
 
     opacity: 0;
-    background-color: var(--bg-inverse-default);
-    position: absolute;
-    z-index: 3;
-    left: 50%;
-    padding: var(--spacer-1);
-    color: var(--text-inverse-oninverse);
-    font-family: var(--text-body-medium-font-family);
+    background-color: var(--color-bg-tooltip);
+    max-width: var(--tooltip-max-width);
+    padding-block: var(--spacer-1);
+    padding-inline: var(--spacer-2);
+    color: var(--color-text-ontooltip);
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
     line-height: var(--text-body-medium-line-height);
     letter-spacing: var(--text-letter-spacing);
     white-space: nowrap;
-    max-width: 11.25rem;
     border-radius: var(--radius-medium);
-    box-shadow:
-      0 0 0.5px rgba(0, 0, 0, 0.15),
-      0 5px 12px rgba(0, 0, 0, 0.13),
-      0 1px 3px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--elevation-300-tooltip);
     visibility: hidden;
 
-    &::after {
-      content: ' ';
-      display: block;
-      position: absolute;
-      transform: translate3d(-50%, 100%, 0);
-      width: 0;
-      height: 0;
-      border-left: var(--caret-size) solid transparent;
-      border-right: var(--caret-size) solid transparent;
+    &[data-wrap] {
+      white-space: normal;
+      overflow-wrap: break-word;
     }
 
     &.field-error {
-      background-color: var(--bg-danger-default);
-      color: var(--text-danger-ondanger);
+      background-color: var(--color-bg-danger);
+      color: var(--color-text-ondanger);
 
-      &.tooltip--position-top::after {
-        border-top-color: var(--bg-danger-default);
+      .tooltip__caret-fill {
+        fill: var(--color-bg-danger);
+        stroke: var(--color-bg-danger);
       }
 
-      &.tooltip--position-bottom::after {
-        border-bottom-color: var(--bg-danger-default);
+      .tooltip__caret-stroke {
+        stroke: var(--color-bg-danger);
       }
     }
 
@@ -53,53 +54,97 @@
       width: 100%;
     }
 
+    /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
     @media (max-width: 768px) {
       display: none;
     }
   }
 
+  .tooltip__caret {
+    position: absolute;
+    pointer-events: none;
+    filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.15));
+  }
+
+  .tooltip__caret-fill {
+    fill: var(--color-bg-tooltip);
+    stroke: var(--color-bg-tooltip);
+  }
+
+  .tooltip__caret-stroke {
+    fill: none;
+    stroke: var(--color-border);
+    stroke-width: 1.5px;
+  }
+
   .tooltip--show {
     visibility: visible;
     opacity: 1;
-    transition: opacity 0.2s ease-in-out;
     cursor: default;
   }
 
-  .tooltip--caret-center {
-    &::after {
-      left: 50%;
-    }
+  .tooltip--caret-center .tooltip__caret {
+    left: 50%;
+    transform: translateX(-50%);
   }
 
-  .tooltip--caret-left {
-    &::after {
-      left: var(--spacer-3);
-    }
+  .tooltip--caret-left .tooltip__caret {
+    left: var(--spacer-2);
   }
 
-  .tooltip--caret-right {
-    &::after {
-      right: 0;
-    }
+  .tooltip--caret-right .tooltip__caret {
+    right: var(--spacer-2);
   }
 
   .tooltip--position-top {
-    top: calc(var(--spacer-4) * -1);
-    transform: translate3d(-50%, calc(var(--caret-size) * -1), 0);
+    .tooltip__caret {
+      --color-border: var(--ramp-grey-700);
+      /* stylelint-disable-next-line plugin/no-subpixel-values -- TODO: pre-existing; revisit this sub-pixel value */
+      top: calc(100% - 0.5px);
+    }
 
-    &::after {
-      bottom: 1px;
-      border-top: var(--caret-size) solid var(--bg-inverse-default);
+    &.tooltip--caret-center .tooltip__caret {
+      transform: translateX(calc(-50% + var(--tooltip-caret-x)));
     }
   }
 
   .tooltip--position-bottom {
-    bottom: calc(var(--spacer-4) * -1);
-    transform: translate3d(-50%, var(--caret-size), 0);
+    .tooltip__caret {
+      /* stylelint-disable-next-line plugin/no-subpixel-values -- TODO: pre-existing; revisit this sub-pixel value */
+      bottom: calc(100% - 0.5px);
+      transform: rotate(180deg);
+    }
+
+    &.tooltip--caret-center .tooltip__caret {
+      transform: translateX(calc(-50% + var(--tooltip-caret-x))) rotate(180deg);
+    }
+
+    &.tooltip--caret-right .tooltip__caret {
+      transform: rotate(180deg);
+    }
+  }
+
+  .tooltip--position-left {
+    .tooltip__caret {
+      /* stylelint-disable-next-line plugin/no-subpixel-values -- TODO: pre-existing; revisit this sub-pixel value */
+      top: calc(50% + 0.5px);
+      /* stylelint-disable-next-line plugin/no-subpixel-values -- TODO: pre-existing; revisit this sub-pixel value */
+      left: calc(100% - 0.5px);
+      transform: translateY(calc(1 * var(--caret-width) / 2 + var(--tooltip-caret-y)))
+        rotate(-90deg);
+      transform-origin: top left;
+    }
+  }
 
-    &::after {
-      bottom: calc(100% + var(--caret-size) - 1px);
-      border-bottom: var(--caret-size) solid var(--bg-inverse-default);
+  .tooltip--position-right {
+    .tooltip__caret {
+      /* stylelint-disable-next-line plugin/no-subpixel-values -- TODO: pre-existing; revisit this sub-pixel value */
+      top: calc(50% + 0.5px);
+      left: unset;
+      /* stylelint-disable-next-line plugin/no-subpixel-values -- TODO: pre-existing; revisit this sub-pixel value */
+      right: calc(100% - 0.5px);
+      transform: translateY(calc(1 * var(--caret-width) / 2 + var(--tooltip-caret-y))) rotate(90deg);
+      transform-origin: top right;
     }
   }
 }

package/dist/elements/Tooltip/index.d.ts

@@ -1,17 +1,25 @@
 import React from 'react';
 import './index.css';
+type Side = 'bottom' | 'left' | 'right' | 'top';
 export type Props = {
     alignCaret?: 'center' | 'left' | 'right';
-    boundingRef?: React.RefObject<HTMLElement | null>;
+    'aria-hidden'?: boolean;
     children: React.ReactNode;
     className?: string;
     delay?: number;
-    position?: 'bottom' | 'top';
+    id?: string;
+    portal?: boolean;
+    position?: Side;
+    role?: 'alert' | 'tooltip';
     show?: boolean;
     /**
-     * If the tooltip position should not change depending on if the toolbar is outside the boundingRef. @default false
+     * Disables adaptive placement: the tooltip always renders on `position` (or its
+     * default) instead of flipping to whichever side has room. It does not affect
+     * the `portal` setting. @default false
      */
     staticPositioning?: boolean;
+    tabIndex?: number;
 };
 export declare const Tooltip: React.FC<Props>;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/Tooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Tooltip/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAGxC,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,KAAK,GAAG;IAClB,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IACxC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAmFnC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Tooltip/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoE,MAAM,OAAO,CAAA;AAGxF,OAAO,aAAa,CAAA;AAOpB,KAAK,IAAI,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAA;AAE/C,MAAM,MAAM,KAAK,GAAG;IAClB,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IACxC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,IAAI,CAAA;IACf,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAuCD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAsPnC,CAAA"}

package/dist/elements/Tooltip/index.js

@@ -1,28 +1,88 @@
 'use client';
 
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect } from 'react';
-import { useIntersect } from '../../hooks/useIntersect.js';
+import { autoUpdate, computePosition, flip, hide, offset, shift, size } from '@floating-ui/dom';
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import './index.css';
+const EDGE_GUTTER = 4;
+const TOP_BOTTOM_OFFSET = 10;
+const LEFT_RIGHT_OFFSET = 11;
+const TooltipCaret = () => {
+  const $ = _c(2);
+  const clipId = React.useId();
+  let t0;
+  if ($[0] !== clipId) {
+    t0 = _jsxs("svg", {
+      "aria-hidden": "true",
+      className: "tooltip__caret",
+      height: "14",
+      viewBox: "0 0 14 14",
+      width: "15",
+      children: [_jsx("clipPath", {
+        id: clipId,
+        children: _jsx("rect", {
+          height: "14",
+          width: "15",
+          x: "-0.5",
+          y: "0.5"
+        })
+      }), _jsx("path", {
+        className: "tooltip__caret-stroke",
+        clipPath: `url(#${clipId})`,
+        d: "M0,0 H14 L7.875,6.125 Q7,7 6.125,6.125 Z"
+      }), _jsx("path", {
+        className: "tooltip__caret-fill",
+        d: "M0,0 H14 L7.875,6.125 Q7,7 6.125,6.125 Z"
+      })]
+    });
+    $[0] = clipId;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+};
+const isTriggerHidden = element => {
+  if (typeof element.checkVisibility === 'function') {
+    return !element.checkVisibility();
+  }
+  // Fallback for browsers without `checkVisibility`: an element collapsed by a
+  // `display: none` ancestor has no client rects.
+  return element.getClientRects().length === 0;
+};
+const toPlacement = (side, alignCaret) => {
+  if (side === 'left' || side === 'right' || alignCaret === 'center') {
+    return side;
+  }
+  return `${side}-${alignCaret === 'left' ? 'start' : 'end'}`;
+};
 export const Tooltip = props => {
   const {
+    id,
     alignCaret = 'center',
-    boundingRef,
+    'aria-hidden': ariaHidden,
     children,
     className,
     delay = 500,
+    portal = true,
     position: positionFromProps,
+    role = 'tooltip',
     show: showFromProps = true,
-    staticPositioning = false
+    staticPositioning = false,
+    tabIndex
   } = props;
-  const [show, setShow] = React.useState(showFromProps);
-  const [position, setPosition] = React.useState('top');
-  const getTitleAttribute = content => typeof content === 'string' ? content : '';
-  const [ref, intersectionEntry] = useIntersect({
-    root: boundingRef?.current || null,
-    rootMargin: '-145px 0px 0px 100px',
-    threshold: 0
-  }, staticPositioning);
+  const generatedID = React.useId();
+  const tooltipID = id || generatedID;
+  const [show, setShow] = useState(showFromProps);
+  const [isMounted, setIsMounted] = useState(false);
+  const [placement, setPlacement] = useState(positionFromProps || 'top');
+  // A hidden marker rendered where the tooltip used to live in the DOM, so its
+  // parent element can be used as the floating-ui reference for the portaled tooltip.
+  const triggerMarkerRef = useRef(null);
+  const floatingRef = useRef(null);
+  const updateTokenRef = useRef(0);
   useEffect(() => {
     let timerID;
     // do not use the delay on transition-out
@@ -39,33 +99,149 @@ export const Tooltip = props => {
       }
     };
   }, [showFromProps, delay]);
+  // Keep the tooltip mounted for the duration of its fade-out transition so the
+  // portal doesn't disappear abruptly when `show` flips back to false.
+  useEffect(() => {
+    if (show) {
+      setIsMounted(true);
+      return;
+    }
+    // Matches the `.tooltip--show` opacity transition duration.
+    const timeoutID = setTimeout(() => setIsMounted(false), 200);
+    return () => {
+      clearTimeout(timeoutID);
+    };
+  }, [show]);
+  const updatePosition = useCallback(async () => {
+    const trigger = triggerMarkerRef.current?.parentElement;
+    const floatingElement = floatingRef.current;
+    if (!trigger || !floatingElement) {
+      return;
+    }
+    const token = ++updateTokenRef.current;
+    const boundary = 'clippingAncestors';
+    const canFlip = !staticPositioning && !positionFromProps;
+    const {
+      middlewareData,
+      placement: resolvedPlacement,
+      x,
+      y
+    } = await computePosition(trigger, floatingElement, {
+      middleware: [offset(({
+        placement: currentPlacement
+      }) => currentPlacement.startsWith('left') || currentPlacement.startsWith('right') ? LEFT_RIGHT_OFFSET : TOP_BOTTOM_OFFSET), ...(canFlip ? [flip({
+        boundary,
+        padding: EDGE_GUTTER
+      })] : []), ...(staticPositioning ? [] : [shift({
+        boundary,
+        padding: EDGE_GUTTER
+      }), size({
+        apply({
+          availableWidth,
+          elements
+        }) {
+          const shouldWrap = elements.floating.scrollWidth > availableWidth;
+          elements.floating.toggleAttribute('data-wrap', shouldWrap);
+          elements.floating.style.setProperty('--tooltip-max-width', shouldWrap ? `${Math.floor(availableWidth)}px` : '');
+        },
+        boundary,
+        padding: EDGE_GUTTER
+      })]), hide({
+        boundary: 'clippingAncestors'
+      })],
+      placement: toPlacement(positionFromProps || 'top', alignCaret),
+      strategy: 'fixed'
+    });
+    // A newer call already applied a fresher position - discard this stale result.
+    if (token !== updateTokenRef.current) {
+      return;
+    }
+    const hidden = isTriggerHidden(trigger) || Boolean(middlewareData.hide?.referenceHidden);
+    floatingElement.style.setProperty('--tooltip-x', `${x}px`);
+    Object.assign(floatingElement.style, {
+      left: `${x}px`,
+      top: `${y}px`,
+      visibility: hidden ? 'hidden' : ''
+    });
+    const resolvedSide = resolvedPlacement.split('-')[0];
+    const isHorizontalSide = resolvedSide === 'left' || resolvedSide === 'right';
+    const shiftX = !isHorizontalSide && alignCaret === 'center' ? middlewareData.shift?.x || 0 : 0;
+    const shiftY = isHorizontalSide ? middlewareData.shift?.y || 0 : 0;
+    floatingElement.style.setProperty('--tooltip-caret-x', shiftX ? `${-shiftX}px` : '0px');
+    floatingElement.style.setProperty('--tooltip-caret-y', shiftY ? `${-shiftY}px` : '0px');
+    setPlacement(resolvedSide);
+  }, [alignCaret, positionFromProps, staticPositioning]);
+  const setFloatingElement = useCallback(element => {
+    floatingRef.current = element;
+    void updatePosition();
+  }, [updatePosition]);
+  // While mounted, let floating-ui keep the portaled tooltip aligned to its trigger
+  // as the page scrolls, the trigger resizes or moves, or a hidden ancestor becomes
+  // visible again - instead of manually re-measuring on window scroll/resize alone.
+  useLayoutEffect(() => {
+    const trigger_0 = triggerMarkerRef.current?.parentElement;
+    const floatingElement_0 = floatingRef.current;
+    if (!isMounted || !trigger_0 || !floatingElement_0) {
+      return;
+    }
+    const cleanupAutoUpdate = autoUpdate(trigger_0, floatingElement_0, updatePosition, {
+      elementResize: 'ResizeObserver' in window
+    });
+    // autoUpdate's own layout-shift tracking gives up once the trigger's rect
+    // collapses to zero (e.g. behind a `display: none` ancestor), so it can't
+    // tell when the trigger becomes visible again. Watch for that separately.
+    const visibilityObserver = typeof IntersectionObserver === 'function' ? new IntersectionObserver(() => void updatePosition(), {
+      threshold: 0
+    }) : null;
+    visibilityObserver?.observe(trigger_0);
+    const visualViewport = window.visualViewport;
+    visualViewport?.addEventListener('resize', updatePosition);
+    visualViewport?.addEventListener('scroll', updatePosition);
+    return () => {
+      cleanupAutoUpdate();
+      visibilityObserver?.disconnect();
+      visualViewport?.removeEventListener('resize', updatePosition);
+      visualViewport?.removeEventListener('scroll', updatePosition);
+    };
+  }, [isMounted, updatePosition]);
   useEffect(() => {
-    if (staticPositioning) {
+    const trigger_1 = triggerMarkerRef.current?.parentElement;
+    if (ariaHidden || role !== 'tooltip' || !show || !trigger_1) {
       return;
     }
-    setPosition(intersectionEntry?.isIntersecting ? 'top' : 'bottom');
-  }, [intersectionEntry, staticPositioning]);
-  // The first aside is always on top. The purpose of that is that it can reliably be used for the interaction observer (as it's not moving around), to calculate the position of the actual tooltip.
+    const describedByIDs = trigger_1.getAttribute('aria-describedby')?.split(' ') || [];
+    if (!describedByIDs.includes(tooltipID)) {
+      trigger_1.setAttribute('aria-describedby', [...describedByIDs, tooltipID].join(' '));
+    }
+    return () => {
+      const remainingIDs = (trigger_1.getAttribute('aria-describedby')?.split(' ') || []).filter(describedByID => describedByID !== tooltipID);
+      if (remainingIDs.length) {
+        trigger_1.setAttribute('aria-describedby', remainingIDs.join(' '));
+      } else {
+        trigger_1.removeAttribute('aria-describedby');
+      }
+    };
+  }, [ariaHidden, role, show, tooltipID]);
+  const content = isMounted ? /*#__PURE__*/_jsxs("aside", {
+    "aria-hidden": ariaHidden,
+    className: ['tooltip', className, show && 'tooltip--show', `tooltip--caret-${alignCaret}`, `tooltip--position-${placement}`].filter(Boolean).join(' '),
+    id: tooltipID,
+    ref: setFloatingElement,
+    role: role,
+    tabIndex: tabIndex,
+    children: [/*#__PURE__*/_jsx(TooltipCaret, {}), /*#__PURE__*/_jsx("div", {
+      className: "tooltip-content",
+      children: children
+    })]
+  }) : null;
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [!staticPositioning && /*#__PURE__*/_jsx("aside", {
+    children: [/*#__PURE__*/_jsx("span", {
       "aria-hidden": "true",
-      className: ['tooltip', className, `tooltip--caret-${alignCaret}`, 'tooltip--position-top'].filter(Boolean).join(' '),
-      ref: ref,
+      ref: triggerMarkerRef,
       style: {
-        opacity: '0'
-      },
-      children: /*#__PURE__*/_jsx("div", {
-        className: "tooltip-content",
-        children: children
-      })
-    }), /*#__PURE__*/_jsx("aside", {
-      className: ['tooltip', className, show && 'tooltip--show', `tooltip--caret-${alignCaret}`, `tooltip--position-${positionFromProps || position}`].filter(Boolean).join(' '),
-      title: getTitleAttribute(children),
-      children: /*#__PURE__*/_jsx("div", {
-        className: "tooltip-content",
-        children: children
-      })
-    })]
+        display: 'none'
+      }
+    }), portal && content ? /*#__PURE__*/createPortal(content, triggerMarkerRef.current?.closest('dialog, [role="dialog"]') ?? document.body) : content]
   });
 };
 //# sourceMappingURL=index.js.map

package/dist/elements/Tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useEffect","useIntersect","Tooltip","props","alignCaret","boundingRef","children","className","delay","position","positionFromProps","show","showFromProps","staticPositioning","setShow","useState","setPosition","getTitleAttribute","content","ref","intersectionEntry","root","current","rootMargin","threshold","timerID","setTimeout","clearTimeout","isIntersecting","_jsxs","Fragment","_jsx","filter","Boolean","join","style","opacity","title"],"sources":["../../../src/elements/Tooltip/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect } from 'react'\n\nimport { useIntersect } from '../../hooks/useIntersect.js'\nimport './index.css'\n\nexport type Props = {\n  alignCaret?: 'center' | 'left' | 'right'\n  boundingRef?: React.RefObject<HTMLElement | null>\n  children: React.ReactNode\n  className?: string\n  delay?: number\n  position?: 'bottom' | 'top'\n  show?: boolean\n  /**\n   * If the tooltip position should not change depending on if the toolbar is outside the boundingRef. @default false\n   */\n  staticPositioning?: boolean\n}\n\nexport const Tooltip: React.FC<Props> = (props) => {\n  const {\n    alignCaret = 'center',\n    boundingRef,\n    children,\n    className,\n    delay = 500,\n    position: positionFromProps,\n    show: showFromProps = true,\n    staticPositioning = false,\n  } = props\n\n  const [show, setShow] = React.useState(showFromProps)\n  const [position, setPosition] = React.useState<'bottom' | 'top'>('top')\n\n  const getTitleAttribute = (content) => (typeof content === 'string' ? content : '')\n\n  const [ref, intersectionEntry] = useIntersect(\n    {\n      root: boundingRef?.current || null,\n      rootMargin: '-145px 0px 0px 100px',\n      threshold: 0,\n    },\n    staticPositioning,\n  )\n\n  useEffect(() => {\n    let timerID: NodeJS.Timeout\n\n    // do not use the delay on transition-out\n    if (delay && showFromProps) {\n      timerID = setTimeout(() => {\n        setShow(showFromProps)\n      }, delay)\n    } else {\n      setShow(showFromProps)\n    }\n\n    return () => {\n      if (timerID) {\n        clearTimeout(timerID)\n      }\n    }\n  }, [showFromProps, delay])\n\n  useEffect(() => {\n    if (staticPositioning) {\n      return\n    }\n    setPosition(intersectionEntry?.isIntersecting ? 'top' : 'bottom')\n  }, [intersectionEntry, staticPositioning])\n\n  // The first aside is always on top. The purpose of that is that it can reliably be used for the interaction observer (as it's not moving around), to calculate the position of the actual tooltip.\n  return (\n    <React.Fragment>\n      {!staticPositioning && (\n        <aside\n          aria-hidden=\"true\"\n          className={['tooltip', className, `tooltip--caret-${alignCaret}`, 'tooltip--position-top']\n            .filter(Boolean)\n            .join(' ')}\n          ref={ref}\n          style={{ opacity: '0' }}\n        >\n          <div className=\"tooltip-content\">{children}</div>\n        </aside>\n      )}\n      <aside\n        className={[\n          'tooltip',\n          className,\n          show && 'tooltip--show',\n          `tooltip--caret-${alignCaret}`,\n          `tooltip--position-${positionFromProps || position}`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        title={getTitleAttribute(children)}\n      >\n        <div className=\"tooltip-content\">{children}</div>\n      </aside>\n    </React.Fragment>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,IAASC,SAAS,QAAQ;AAEjC,SAASC,YAAY,QAAQ;AAC7B,OAAO;AAgBP,OAAO,MAAMC,OAAA,GAA4BC,KAAA;EACvC,MAAM;IACJC,UAAA,GAAa,QAAQ;IACrBC,WAAW;IACXC,QAAQ;IACRC,SAAS;IACTC,KAAA,GAAQ,GAAG;IACXC,QAAA,EAAUC,iBAAiB;IAC3BC,IAAA,EAAMC,aAAA,GAAgB,IAAI;IAC1BC,iBAAA,GAAoB;EAAK,CAC1B,GAAGV,KAAA;EAEJ,MAAM,CAACQ,IAAA,EAAMG,OAAA,CAAQ,GAAGf,KAAA,CAAMgB,QAAQ,CAACH,aAAA;EACvC,MAAM,CAACH,QAAA,EAAUO,WAAA,CAAY,GAAGjB,KAAA,CAAMgB,QAAQ,CAAmB;EAEjE,MAAME,iBAAA,GAAqBC,OAAA,IAAa,OAAOA,OAAA,KAAY,WAAWA,OAAA,GAAU;EAEhF,MAAM,CAACC,GAAA,EAAKC,iBAAA,CAAkB,GAAGnB,YAAA,CAC/B;IACEoB,IAAA,EAAMhB,WAAA,EAAaiB,OAAA,IAAW;IAC9BC,UAAA,EAAY;IACZC,SAAA,EAAW;EACb,GACAX,iBAAA;EAGFb,SAAA,CAAU;IACR,IAAIyB,OAAA;IAEJ;IACA,IAAIjB,KAAA,IAASI,aAAA,EAAe;MAC1Ba,OAAA,GAAUC,UAAA,CAAW;QACnBZ,OAAA,CAAQF,aAAA;MACV,GAAGJ,KAAA;IACL,OAAO;MACLM,OAAA,CAAQF,aAAA;IACV;IAEA,OAAO;MACL,IAAIa,OAAA,EAAS;QACXE,YAAA,CAAaF,OAAA;MACf;IACF;EACF,GAAG,CAACb,aAAA,EAAeJ,KAAA,CAAM;EAEzBR,SAAA,CAAU;IACR,IAAIa,iBAAA,EAAmB;MACrB;IACF;IACAG,WAAA,CAAYI,iBAAA,EAAmBQ,cAAA,GAAiB,QAAQ;EAC1D,GAAG,CAACR,iBAAA,EAAmBP,iBAAA,CAAkB;EAEzC;EACA,oBACEgB,KAAA,CAAC9B,KAAA,CAAM+B,QAAQ;eACZ,CAACjB,iBAAA,iBACAkB,IAAA,CAAC;MACC,eAAY;MACZxB,SAAA,EAAW,CAAC,WAAWA,SAAA,EAAW,kBAAkBH,UAAA,EAAY,EAAE,wBAAwB,CACvF4B,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;MACRf,GAAA,EAAKA,GAAA;MACLgB,KAAA,EAAO;QAAEC,OAAA,EAAS;MAAI;gBAEtB,aAAAL,IAAA,CAAC;QAAIxB,SAAA,EAAU;kBAAmBD;;qBAGtCyB,IAAA,CAAC;MACCxB,SAAA,EAAW,CACT,WACAA,SAAA,EACAI,IAAA,IAAQ,iBACR,kBAAkBP,UAAA,EAAY,EAC9B,qBAAqBM,iBAAA,IAAqBD,QAAA,EAAU,CACrD,CACEuB,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;MACRG,KAAA,EAAOpB,iBAAA,CAAkBX,QAAA;gBAEzB,aAAAyB,IAAA,CAAC;QAAIxB,SAAA,EAAU;kBAAmBD;;;;AAI1C","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","autoUpdate","computePosition","flip","hide","offset","shift","size","React","useCallback","useEffect","useLayoutEffect","useRef","useState","createPortal","EDGE_GUTTER","TOP_BOTTOM_OFFSET","LEFT_RIGHT_OFFSET","TooltipCaret","$","clipId","useId","t0","_jsxs","className","height","viewBox","width","children","_jsx","id","x","y","clipPath","d","isTriggerHidden","element","checkVisibility","getClientRects","length","toPlacement","side","alignCaret","Tooltip","props","ariaHidden","delay","portal","position","positionFromProps","role","show","showFromProps","staticPositioning","tabIndex","generatedID","tooltipID","setShow","isMounted","setIsMounted","placement","setPlacement","triggerMarkerRef","floatingRef","updateTokenRef","timerID","setTimeout","clearTimeout","timeoutID","updatePosition","trigger","current","parentElement","floatingElement","token","boundary","canFlip","middlewareData","resolvedPlacement","middleware","currentPlacement","startsWith","padding","apply","availableWidth","elements","shouldWrap","floating","scrollWidth","toggleAttribute","style","setProperty","Math","floor","strategy","hidden","Boolean","referenceHidden","Object","assign","left","top","visibility","resolvedSide","split","isHorizontalSide","shiftX","shiftY","setFloatingElement","cleanupAutoUpdate","elementResize","window","visibilityObserver","IntersectionObserver","threshold","observe","visualViewport","addEventListener","disconnect","removeEventListener","describedByIDs","getAttribute","includes","setAttribute","join","remainingIDs","filter","describedByID","removeAttribute","content","ref","Fragment","display","closest","document","body"],"sources":["../../../src/elements/Tooltip/index.tsx"],"sourcesContent":["'use client'\nimport { autoUpdate, computePosition, flip, hide, offset, shift, size } from '@floating-ui/dom'\nimport React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\nimport './index.css'\n\nconst EDGE_GUTTER = 4\n\nconst TOP_BOTTOM_OFFSET = 10\nconst LEFT_RIGHT_OFFSET = 11\n\ntype Side = 'bottom' | 'left' | 'right' | 'top'\n\nexport type Props = {\n  alignCaret?: 'center' | 'left' | 'right'\n  'aria-hidden'?: boolean\n  children: React.ReactNode\n  className?: string\n  delay?: number\n  id?: string\n  portal?: boolean\n  position?: Side\n  role?: 'alert' | 'tooltip'\n  show?: boolean\n  /**\n   * Disables adaptive placement: the tooltip always renders on `position` (or its\n   * default) instead of flipping to whichever side has room. It does not affect\n   * the `portal` setting. @default false\n   */\n  staticPositioning?: boolean\n  tabIndex?: number\n}\n\nconst TooltipCaret: React.FC = () => {\n  const clipId = React.useId()\n\n  return (\n    <svg aria-hidden=\"true\" className=\"tooltip__caret\" height=\"14\" viewBox=\"0 0 14 14\" width=\"15\">\n      <clipPath id={clipId}>\n        <rect height=\"14\" width=\"15\" x=\"-0.5\" y=\"0.5\" />\n      </clipPath>\n      {/* Border stroke - clipped to hide top edge */}\n      <path\n        className=\"tooltip__caret-stroke\"\n        clipPath={`url(#${clipId})`}\n        d=\"M0,0 H14 L7.875,6.125 Q7,7 6.125,6.125 Z\"\n      />\n      <path className=\"tooltip__caret-fill\" d=\"M0,0 H14 L7.875,6.125 Q7,7 6.125,6.125 Z\" />\n    </svg>\n  )\n}\n\nconst isTriggerHidden = (element: Element): boolean => {\n  if (typeof element.checkVisibility === 'function') {\n    return !element.checkVisibility()\n  }\n\n  // Fallback for browsers without `checkVisibility`: an element collapsed by a\n  // `display: none` ancestor has no client rects.\n  return element.getClientRects().length === 0\n}\n\nconst toPlacement = (side: Side, alignCaret: 'center' | 'left' | 'right') => {\n  if (side === 'left' || side === 'right' || alignCaret === 'center') {\n    return side\n  }\n\n  return `${side}-${alignCaret === 'left' ? 'start' : 'end'}` as const\n}\n\nexport const Tooltip: React.FC<Props> = (props) => {\n  const {\n    id,\n    alignCaret = 'center',\n    'aria-hidden': ariaHidden,\n    children,\n    className,\n    delay = 500,\n    portal = true,\n    position: positionFromProps,\n    role = 'tooltip',\n    show: showFromProps = true,\n    staticPositioning = false,\n    tabIndex,\n  } = props\n\n  const generatedID = React.useId()\n  const tooltipID = id || generatedID\n\n  const [show, setShow] = useState(showFromProps)\n  const [isMounted, setIsMounted] = useState(false)\n  const [placement, setPlacement] = useState<Side>(positionFromProps || 'top')\n\n  // A hidden marker rendered where the tooltip used to live in the DOM, so its\n  // parent element can be used as the floating-ui reference for the portaled tooltip.\n  const triggerMarkerRef = useRef<HTMLSpanElement>(null)\n  const floatingRef = useRef<HTMLDivElement | null>(null)\n\n  const updateTokenRef = useRef(0)\n\n  useEffect(() => {\n    let timerID: NodeJS.Timeout\n\n    // do not use the delay on transition-out\n    if (delay && showFromProps) {\n      timerID = setTimeout(() => {\n        setShow(showFromProps)\n      }, delay)\n    } else {\n      setShow(showFromProps)\n    }\n\n    return () => {\n      if (timerID) {\n        clearTimeout(timerID)\n      }\n    }\n  }, [showFromProps, delay])\n\n  // Keep the tooltip mounted for the duration of its fade-out transition so the\n  // portal doesn't disappear abruptly when `show` flips back to false.\n  useEffect(() => {\n    if (show) {\n      setIsMounted(true)\n      return\n    }\n\n    // Matches the `.tooltip--show` opacity transition duration.\n    const timeoutID = setTimeout(() => setIsMounted(false), 200)\n\n    return () => {\n      clearTimeout(timeoutID)\n    }\n  }, [show])\n\n  const updatePosition = useCallback(async () => {\n    const trigger = triggerMarkerRef.current?.parentElement\n    const floatingElement = floatingRef.current\n\n    if (!trigger || !floatingElement) {\n      return\n    }\n\n    const token = ++updateTokenRef.current\n    const boundary = 'clippingAncestors'\n    const canFlip = !staticPositioning && !positionFromProps\n\n    const {\n      middlewareData,\n      placement: resolvedPlacement,\n      x,\n      y,\n    } = await computePosition(trigger, floatingElement, {\n      middleware: [\n        offset(({ placement: currentPlacement }) =>\n          currentPlacement.startsWith('left') || currentPlacement.startsWith('right')\n            ? LEFT_RIGHT_OFFSET\n            : TOP_BOTTOM_OFFSET,\n        ),\n        ...(canFlip ? [flip({ boundary, padding: EDGE_GUTTER })] : []),\n        ...(staticPositioning\n          ? []\n          : [\n              shift({ boundary, padding: EDGE_GUTTER }),\n              size({\n                apply({ availableWidth, elements }) {\n                  const shouldWrap = elements.floating.scrollWidth > availableWidth\n\n                  elements.floating.toggleAttribute('data-wrap', shouldWrap)\n                  elements.floating.style.setProperty(\n                    '--tooltip-max-width',\n                    shouldWrap ? `${Math.floor(availableWidth)}px` : '',\n                  )\n                },\n                boundary,\n                padding: EDGE_GUTTER,\n              }),\n            ]),\n        hide({ boundary: 'clippingAncestors' }),\n      ],\n      placement: toPlacement(positionFromProps || 'top', alignCaret),\n      strategy: 'fixed',\n    })\n\n    // A newer call already applied a fresher position - discard this stale result.\n    if (token !== updateTokenRef.current) {\n      return\n    }\n\n    const hidden = isTriggerHidden(trigger) || Boolean(middlewareData.hide?.referenceHidden)\n\n    floatingElement.style.setProperty('--tooltip-x', `${x}px`)\n\n    Object.assign(floatingElement.style, {\n      left: `${x}px`,\n      top: `${y}px`,\n      visibility: hidden ? 'hidden' : '',\n    })\n\n    const resolvedSide = resolvedPlacement.split('-')[0] as Side\n    const isHorizontalSide = resolvedSide === 'left' || resolvedSide === 'right'\n\n    const shiftX = !isHorizontalSide && alignCaret === 'center' ? middlewareData.shift?.x || 0 : 0\n    const shiftY = isHorizontalSide ? middlewareData.shift?.y || 0 : 0\n\n    floatingElement.style.setProperty('--tooltip-caret-x', shiftX ? `${-shiftX}px` : '0px')\n    floatingElement.style.setProperty('--tooltip-caret-y', shiftY ? `${-shiftY}px` : '0px')\n\n    setPlacement(resolvedSide)\n  }, [alignCaret, positionFromProps, staticPositioning])\n\n  const setFloatingElement = useCallback(\n    (element: HTMLDivElement | null) => {\n      floatingRef.current = element\n      void updatePosition()\n    },\n    [updatePosition],\n  )\n\n  // While mounted, let floating-ui keep the portaled tooltip aligned to its trigger\n  // as the page scrolls, the trigger resizes or moves, or a hidden ancestor becomes\n  // visible again - instead of manually re-measuring on window scroll/resize alone.\n  useLayoutEffect(() => {\n    const trigger = triggerMarkerRef.current?.parentElement\n    const floatingElement = floatingRef.current\n\n    if (!isMounted || !trigger || !floatingElement) {\n      return\n    }\n\n    const cleanupAutoUpdate = autoUpdate(trigger, floatingElement, updatePosition, {\n      elementResize: 'ResizeObserver' in window,\n    })\n\n    // autoUpdate's own layout-shift tracking gives up once the trigger's rect\n    // collapses to zero (e.g. behind a `display: none` ancestor), so it can't\n    // tell when the trigger becomes visible again. Watch for that separately.\n    const visibilityObserver =\n      typeof IntersectionObserver === 'function'\n        ? new IntersectionObserver(() => void updatePosition(), { threshold: 0 })\n        : null\n\n    visibilityObserver?.observe(trigger)\n\n    const visualViewport = window.visualViewport\n\n    visualViewport?.addEventListener('resize', updatePosition)\n    visualViewport?.addEventListener('scroll', updatePosition)\n\n    return () => {\n      cleanupAutoUpdate()\n      visibilityObserver?.disconnect()\n      visualViewport?.removeEventListener('resize', updatePosition)\n      visualViewport?.removeEventListener('scroll', updatePosition)\n    }\n  }, [isMounted, updatePosition])\n\n  useEffect(() => {\n    const trigger = triggerMarkerRef.current?.parentElement\n\n    if (ariaHidden || role !== 'tooltip' || !show || !trigger) {\n      return\n    }\n\n    const describedByIDs = trigger.getAttribute('aria-describedby')?.split(' ') || []\n\n    if (!describedByIDs.includes(tooltipID)) {\n      trigger.setAttribute('aria-describedby', [...describedByIDs, tooltipID].join(' '))\n    }\n\n    return () => {\n      const remainingIDs = (trigger.getAttribute('aria-describedby')?.split(' ') || []).filter(\n        (describedByID) => describedByID !== tooltipID,\n      )\n\n      if (remainingIDs.length) {\n        trigger.setAttribute('aria-describedby', remainingIDs.join(' '))\n      } else {\n        trigger.removeAttribute('aria-describedby')\n      }\n    }\n  }, [ariaHidden, role, show, tooltipID])\n\n  const content = isMounted ? (\n    <aside\n      aria-hidden={ariaHidden}\n      className={[\n        'tooltip',\n        className,\n        show && 'tooltip--show',\n        `tooltip--caret-${alignCaret}`,\n        `tooltip--position-${placement}`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      id={tooltipID}\n      ref={setFloatingElement}\n      role={role}\n      tabIndex={tabIndex}\n    >\n      <TooltipCaret />\n      <div className=\"tooltip-content\">{children}</div>\n    </aside>\n  ) : null\n\n  return (\n    <React.Fragment>\n      <span aria-hidden=\"true\" ref={triggerMarkerRef} style={{ display: 'none' }} />\n      {portal && content\n        ? createPortal(\n            content,\n            triggerMarkerRef.current?.closest('dialog, [role=\"dialog\"]') ?? document.body,\n          )\n        : content}\n    </React.Fragment>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Translation/index.js

@@ -12,7 +12,7 @@ const RecursiveTranslation = ({
         const elementKey = section[1];
         const Element = elements[elementKey];
         if (Element) {
-          const regex = new RegExp(`<${elementKey}>(.*?)<\/${elementKey}>`, 'g');
+          const regex = new RegExp(`<${elementKey}>(.*?)</${elementKey}>`, 'g');
           const children = section.replace(regex, (_, group) => group);
           return /*#__PURE__*/_jsx(Element, {
             children: /*#__PURE__*/_jsx(RecursiveTranslation, {

package/dist/elements/Translation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","RecursiveTranslation","elements","translationString","regex","sections","split","_jsx","map","section","index","startsWith","endsWith","elementKey","Element","RegExp","children","replace","_","group","Translation","i18nKey","t","variables","stringWithVariables"],"sources":["../../../src/elements/Translation/index.tsx"],"sourcesContent":["import type { ClientTranslationKeys, TFunction } from '@payloadcms/translations'\n\nimport * as React from 'react'\n\nconst RecursiveTranslation: React.FC<{\n  elements?: Record<string, React.FC<{ children: React.ReactNode }>>\n  translationString: string\n}> = ({ elements, translationString }) => {\n  const regex = /(<[^>]+>.*?<\\/[^>]+>)/g\n  const sections = translationString.split(regex)\n\n  return (\n    <span>\n      {sections.map((section, index) => {\n        if (elements && section.startsWith('<') && section.endsWith('>')) {\n          const elementKey = section[1]\n          const Element = elements[elementKey]\n\n          if (Element) {\n            const regex = new RegExp(`<${elementKey}>(.*?)<\\/${elementKey}>`, 'g')\n            const children = section.replace(regex, (_, group) => group)\n\n            return (\n              <Element key={index}>\n                <RecursiveTranslation translationString={children} />\n              </Element>\n            )\n          }\n        }\n\n        return section\n      })}\n    </span>\n  )\n}\n\nexport type TranslationProps = {\n  elements?: Record<string, React.FC<{ children: React.ReactNode }>>\n  i18nKey: ClientTranslationKeys\n  t: TFunction\n  variables?: Record<string, unknown>\n}\n\nexport const Translation: React.FC<TranslationProps> = ({ elements, i18nKey, t, variables }) => {\n  const stringWithVariables = t(i18nKey, variables || {})\n\n  if (!elements) {\n    return stringWithVariables\n  }\n\n  return <RecursiveTranslation elements={elements} translationString={stringWithVariables} />\n}\n"],"mappings":";AAEA,YAAYA,KAAA,MAAW;AAEvB,MAAMC,oBAAA,GAGDA,CAAC;EAAEC,QAAQ;EAAEC;AAAiB,CAAE;EACnC,MAAMC,KAAA,GAAQ;EACd,MAAMC,QAAA,GAAWF,iBAAA,CAAkBG,KAAK,CAACF,KAAA;EAEzC,oBACEG,IAAA,CAAC;cACEF,QAAA,CAASG,GAAG,CAAC,CAACC,OAAA,EAASC,KAAA;MACtB,IAAIR,QAAA,IAAYO,OAAA,CAAQE,UAAU,CAAC,QAAQF,OAAA,CAAQG,QAAQ,CAAC,MAAM;QAChE,MAAMC,UAAA,GAAaJ,OAAO,CAAC,EAAE;QAC7B,MAAMK,OAAA,GAAUZ,QAAQ,CAACW,UAAA,CAAW;QAEpC,IAAIC,OAAA,EAAS;UACX,MAAMV,KAAA,GAAQ,IAAIW,MAAA,CAAO,IAAIF,UAAA,YAAsBA,UAAA,GAAa,EAAE;UAClE,MAAMG,QAAA,GAAWP,OAAA,CAAQQ,OAAO,CAACb,KAAA,EAAO,CAACc,CAAA,EAAGC,KAAA,KAAUA,KAAA;UAEtD,oBACEZ,IAAA,CAACO,OAAA;sBACC,aAAAP,IAAA,CAACN,oBAAA;cAAqBE,iBAAA,EAAmBa;;aAD7BN,KAAA;QAIlB;MACF;MAEA,OAAOD,OAAA;IACT;;AAGN;AASA,OAAO,MAAMW,WAAA,GAA0CA,CAAC;EAAElB,QAAQ;EAAEmB,OAAO;EAAEC,CAAC;EAAEC;AAAS,CAAE;EACzF,MAAMC,mBAAA,GAAsBF,CAAA,CAAED,OAAA,EAASE,SAAA,IAAa,CAAC;EAErD,IAAI,CAACrB,QAAA,EAAU;IACb,OAAOsB,mBAAA;EACT;EAEA,oBAAOjB,IAAA,CAACN,oBAAA;IAAqBC,QAAA,EAAUA,QAAA;IAAUC,iBAAA,EAAmBqB;;AACtE","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","RecursiveTranslation","elements","translationString","regex","sections","split","_jsx","map","section","index","startsWith","endsWith","elementKey","Element","RegExp","children","replace","_","group","Translation","i18nKey","t","variables","stringWithVariables"],"sources":["../../../src/elements/Translation/index.tsx"],"sourcesContent":["import type { ClientTranslationKeys, TFunction } from '@payloadcms/translations'\n\nimport * as React from 'react'\n\nconst RecursiveTranslation: React.FC<{\n  elements?: Record<string, React.FC<{ children: React.ReactNode }>>\n  translationString: string\n}> = ({ elements, translationString }) => {\n  const regex = /(<[^>]+>.*?<\\/[^>]+>)/g\n  const sections = translationString.split(regex)\n\n  return (\n    <span>\n      {sections.map((section, index) => {\n        if (elements && section.startsWith('<') && section.endsWith('>')) {\n          const elementKey = section[1]\n          const Element = elements[elementKey]\n\n          if (Element) {\n            const regex = new RegExp(`<${elementKey}>(.*?)</${elementKey}>`, 'g')\n            const children = section.replace(regex, (_, group) => group)\n\n            return (\n              <Element key={index}>\n                <RecursiveTranslation translationString={children} />\n              </Element>\n            )\n          }\n        }\n\n        return section\n      })}\n    </span>\n  )\n}\n\nexport type TranslationProps = {\n  elements?: Record<string, React.FC<{ children: React.ReactNode }>>\n  i18nKey: ClientTranslationKeys\n  t: TFunction\n  variables?: Record<string, unknown>\n}\n\nexport const Translation: React.FC<TranslationProps> = ({ elements, i18nKey, t, variables }) => {\n  const stringWithVariables = t(i18nKey, variables || {})\n\n  if (!elements) {\n    return stringWithVariables\n  }\n\n  return <RecursiveTranslation elements={elements} translationString={stringWithVariables} />\n}\n"],"mappings":";AAEA,YAAYA,KAAA,MAAW;AAEvB,MAAMC,oBAAA,GAGDA,CAAC;EAAEC,QAAQ;EAAEC;AAAiB,CAAE;EACnC,MAAMC,KAAA,GAAQ;EACd,MAAMC,QAAA,GAAWF,iBAAA,CAAkBG,KAAK,CAACF,KAAA;EAEzC,oBACEG,IAAA,CAAC;cACEF,QAAA,CAASG,GAAG,CAAC,CAACC,OAAA,EAASC,KAAA;MACtB,IAAIR,QAAA,IAAYO,OAAA,CAAQE,UAAU,CAAC,QAAQF,OAAA,CAAQG,QAAQ,CAAC,MAAM;QAChE,MAAMC,UAAA,GAAaJ,OAAO,CAAC,EAAE;QAC7B,MAAMK,OAAA,GAAUZ,QAAQ,CAACW,UAAA,CAAW;QAEpC,IAAIC,OAAA,EAAS;UACX,MAAMV,KAAA,GAAQ,IAAIW,MAAA,CAAO,IAAIF,UAAA,WAAqBA,UAAA,GAAa,EAAE;UACjE,MAAMG,QAAA,GAAWP,OAAA,CAAQQ,OAAO,CAACb,KAAA,EAAO,CAACc,CAAA,EAAGC,KAAA,KAAUA,KAAA;UAEtD,oBACEZ,IAAA,CAACO,OAAA;sBACC,aAAAP,IAAA,CAACN,oBAAA;cAAqBE,iBAAA,EAAmBa;;aAD7BN,KAAA;QAIlB;MACF;MAEA,OAAOD,OAAA;IACT;;AAGN;AASA,OAAO,MAAMW,WAAA,GAA0CA,CAAC;EAAElB,QAAQ;EAAEmB,OAAO;EAAEC,CAAC;EAAEC;AAAS,CAAE;EACzF,MAAMC,mBAAA,GAAsBF,CAAA,CAAED,OAAA,EAASE,SAAA,IAAa,CAAC;EAErD,IAAI,CAACrB,QAAA,EAAU;IACb,OAAOsB,mBAAA;EACT;EAEA,oBAAOjB,IAAA,CAACN,oBAAA;IAAqBC,QAAA,EAAUA,QAAA;IAAUC,iBAAA,EAAmBqB;;AACtE","ignoreList":[]}

package/dist/elements/TrashBanner/index.css

@@ -0,0 +1,5 @@
+@layer payload-default {
+  .trash-banner {
+    margin-bottom: var(--spacer-3);
+  }
+}

package/dist/elements/TrashBanner/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 export declare const TrashBanner: React.FC;
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/TrashBanner/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/TrashBanner/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAiB/B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/TrashBanner/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAe/B,CAAA"}