@payloadcms/ui 3.0.0-canary.b8dd0db → 3.0.0-canary.bb00d64

package/dist/elements/Thumbnail/createThumbnail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createThumbnail.js","names":["createThumbnail","file","Promise","resolve","reject","img","Image","src","URL","createObjectURL","onload","maxDimension","drawHeight","drawWidth","aspectRatio","width","height","canvas","OffscreenCanvas","ctx","getContext","drawImage","convertToBlob","type","quality","then","blob","revokeObjectURL","reader","FileReader","result","onerror","readAsDataURL","catch","error"],"sources":["../../../src/elements/Thumbnail/createThumbnail.ts"],"sourcesContent":["/**\n * Create a thumbnail from a File object by drawing it onto an OffscreenCanvas\n */\nexport const createThumbnail = (file: File): Promise<string> => {\n  return new Promise((resolve, reject) => {\n    const img = new Image()\n    img.src = URL.createObjectURL(file) // Use Object URL directly\n\n    img.onload = () => {\n      const maxDimension = 280\n      let drawHeight: number, drawWidth: number\n\n      // Calculate aspect ratio\n      const aspectRatio = img.width / img.height\n\n      // Determine dimensions to fit within maxDimension while maintaining aspect ratio\n      if (aspectRatio > 1) {\n        // Image is wider than tall\n        drawWidth = maxDimension\n        drawHeight = maxDimension / aspectRatio\n      } else {\n        // Image is taller than wide, or square\n        drawWidth = maxDimension * aspectRatio\n        drawHeight = maxDimension\n      }\n\n      const canvas = new OffscreenCanvas(drawWidth, drawHeight) // Create an OffscreenCanvas\n      const ctx = canvas.getContext('2d')\n\n      // Draw the image onto the OffscreenCanvas with calculated dimensions\n      ctx.drawImage(img, 0, 0, drawWidth, drawHeight)\n\n      // Convert the OffscreenCanvas to a Blob and free up memory\n      canvas\n        .convertToBlob({ type: 'image/jpeg', quality: 0.25 })\n        .then((blob) => {\n          URL.revokeObjectURL(img.src) // Release the Object URL\n          const reader = new FileReader()\n          reader.onload = () => resolve(reader.result as string) // Resolve as data URL\n          reader.onerror = reject\n          reader.readAsDataURL(blob)\n        })\n        .catch(reject)\n    }\n\n    img.onerror = (error) => {\n      URL.revokeObjectURL(img.src) // Release Object URL on error\n      // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors\n      reject(error)\n    }\n  })\n}\n"],"mappings":"AAAA;;GAGA,OAAO,MAAMA,eAAA,GAAmBC,IAAA;EAC9B,OAAO,IAAIC,OAAA,CAAQ,CAACC,OAAA,EAASC,MAAA;IAC3B,MAAMC,GAAA,GAAM,IAAIC,KAAA;IAChBD,GAAA,CAAIE,GAAG,GAAGC,GAAA,CAAIC,eAAe,CAACR,IAAA,EAAM;IAAA;IAEpCI,GAAA,CAAIK,MAAM,GAAG;MACX,MAAMC,YAAA,GAAe;MACrB,IAAIC,UAAA,EAAoBC,SAAA;MAExB;MACA,MAAMC,WAAA,GAAcT,GAAA,CAAIU,KAAK,GAAGV,GAAA,CAAIW,MAAM;MAE1C;MACA,IAAIF,WAAA,GAAc,GAAG;QACnB;QACAD,SAAA,GAAYF,YAAA;QACZC,UAAA,GAAaD,YAAA,GAAeG,WAAA;MAC9B,OAAO;QACL;QACAD,SAAA,GAAYF,YAAA,GAAeG,WAAA;QAC3BF,UAAA,GAAaD,YAAA;MACf;MAEA,MAAMM,MAAA,GAAS,IAAIC,eAAA,CAAgBL,SAAA,EAAWD,UAAA,EAAY;MAAA;MAC1D,MAAMO,GAAA,GAAMF,MAAA,CAAOG,UAAU,CAAC;MAE9B;MACAD,GAAA,CAAIE,SAAS,CAAChB,GAAA,EAAK,GAAG,GAAGQ,SAAA,EAAWD,UAAA;MAEpC;MACAK,MAAA,CACGK,aAAa,CAAC;QAAEC,IAAA,EAAM;QAAcC,OAAA,EAAS;MAAK,GAClDC,IAAI,CAAEC,IAAA;QACLlB,GAAA,CAAImB,eAAe,CAACtB,GAAA,CAAIE,GAAG,EAAE;QAAA;QAC7B,MAAMqB,MAAA,GAAS,IAAIC,UAAA;QACnBD,MAAA,CAAOlB,MAAM,GAAG,MAAMP,OAAA,CAAQyB,MAAA,CAAOE,MAAM,EAAY;QAAA;QACvDF,MAAA,CAAOG,OAAO,GAAG3B,MAAA;QACjBwB,MAAA,CAAOI,aAAa,CAACN,IAAA;MACvB,GACCO,KAAK,CAAC7B,MAAA;IACX;IAEAC,GAAA,CAAI0B,OAAO,GAAIG,KAAA;MACb1B,GAAA,CAAImB,eAAe,CAACtB,GAAA,CAAIE,GAAG,EAAE;MAAA;MAC7B;MACAH,MAAA,CAAO8B,KAAA;IACT;EACF;AACF","ignoreList":[]}

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

@@ -10,11 +10,15 @@ export type ThumbnailProps = {
     size?: 'expand' | 'large' | 'medium' | 'small';
     uploadConfig?: SanitizedCollectionConfig['upload'];
 };
-export declare const useThumbnailContext: () => {
-    className: string;
-    filename: string;
-    size: string;
-    src: string;
-};
 export declare const Thumbnail: React.FC<ThumbnailProps>;
+type ThumbnailComponentProps = {
+    readonly alt?: string;
+    readonly className?: string;
+    readonly filename: string;
+    readonly fileSrc: string;
+    readonly imageCacheTag?: string;
+    readonly size?: 'expand' | 'large' | 'medium' | 'small';
+};
+export declare function ThumbnailComponent(props: ThumbnailComponentProps): React.JSX.Element;
+export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Thumbnail/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAKxD,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAC9C,YAAY,CAAC,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CACnD,CAAA;AASD,eAAO,MAAM,mBAAmB;;;;;CAA2C,CAAA;AAE3E,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAkC9C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Thumbnail/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAMxD,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAC9C,YAAY,CAAC,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CACnD,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAmC9C,CAAA;AAED,KAAK,uBAAuB,GAAG;IAC7B,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;CACxD,CAAA;AACD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,qBAgChE"}

package/dist/elements/Thumbnail/index.js

@@ -7,15 +7,6 @@ import './index.scss';
 const baseClass = 'thumbnail';
 import { File } from '../../graphics/File/index.js';
 import { ShimmerEffect } from '../ShimmerEffect/index.js';
-const ThumbnailContext = /*#__PURE__*/React.createContext({
-  className: '',
-  filename: '',
-  size: 'medium',
-  src: ''
-});
-export const useThumbnailContext = () => {
-  return React.useContext(ThumbnailContext);
-};
 export const Thumbnail = props => {
   const $ = _c(19);
   const {
@@ -108,4 +99,88 @@ export const Thumbnail = props => {
   }
   return t7;
 };
+export function ThumbnailComponent(props) {
+  const $ = _c(19);
+  const {
+    alt,
+    className: t0,
+    filename,
+    fileSrc,
+    imageCacheTag,
+    size
+  } = props;
+  const className = t0 === undefined ? "" : t0;
+  const [fileExists, setFileExists] = React.useState(undefined);
+  const t1 = `${baseClass}--size-${size || "medium"}`;
+  let t2;
+  if ($[0] !== t1 || $[1] !== className) {
+    t2 = [baseClass, t1, className];
+    $[0] = t1;
+    $[1] = className;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const classNames = t2.join(" ");
+  let t3;
+  let t4;
+  if ($[3] !== fileSrc) {
+    t3 = () => {
+      if (!fileSrc) {
+        setFileExists(false);
+        return;
+      }
+      const img = new Image();
+      img.src = fileSrc;
+      img.onload = () => {
+        setFileExists(true);
+      };
+      img.onerror = () => {
+        setFileExists(false);
+      };
+    };
+    t4 = [fileSrc];
+    $[3] = fileSrc;
+    $[4] = t3;
+    $[5] = t4;
+  } else {
+    t3 = $[4];
+    t4 = $[5];
+  }
+  React.useEffect(t3, t4);
+  let t5;
+  if ($[6] !== fileExists || $[7] !== alt || $[8] !== filename || $[9] !== imageCacheTag || $[10] !== fileSrc || $[11] !== classNames) {
+    let t6;
+    if ($[13] !== fileExists || $[14] !== alt || $[15] !== filename || $[16] !== imageCacheTag || $[17] !== fileSrc) {
+      t6 = fileExists && _jsx("img", {
+        alt: alt || filename,
+        src: `${fileSrc}${imageCacheTag ? `?${imageCacheTag}` : ""}`
+      });
+      $[13] = fileExists;
+      $[14] = alt;
+      $[15] = filename;
+      $[16] = imageCacheTag;
+      $[17] = fileSrc;
+      $[18] = t6;
+    } else {
+      t6 = $[18];
+    }
+    t5 = _jsxs("div", {
+      className: classNames,
+      children: [fileExists === undefined && _jsx(ShimmerEffect, {
+        height: "100%"
+      }), t6, fileExists === false && _jsx(File, {})]
+    });
+    $[6] = fileExists;
+    $[7] = alt;
+    $[8] = filename;
+    $[9] = imageCacheTag;
+    $[10] = fileSrc;
+    $[11] = classNames;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  return t5;
+}
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","baseClass","File","ShimmerEffect","ThumbnailContext","createContext","className","filename","size","src","useThumbnailContext","useContext","Thumbnail","props","$","t0","doc","t1","fileSrc","imageCacheTag","undefined","t2","fileExists","setFileExists","useState","t3","t4","classNames","join","t5","t6","img","Image","onload","onerror","useEffect","t7","t8","_jsx","alt","_jsxs","children","height"],"sources":["../../../src/elements/Thumbnail/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'thumbnail'\n\nimport type { SanitizedCollectionConfig } from 'payload'\n\nimport { File } from '../../graphics/File/index.js'\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\n\nexport type ThumbnailProps = {\n  className?: string\n  collectionSlug?: string\n  doc?: Record<string, unknown>\n  fileSrc?: string\n  imageCacheTag?: string\n  size?: 'expand' | 'large' | 'medium' | 'small'\n  uploadConfig?: SanitizedCollectionConfig['upload']\n}\n\nconst ThumbnailContext = React.createContext({\n  className: '',\n  filename: '',\n  size: 'medium',\n  src: '',\n})\n\nexport const useThumbnailContext = () => React.useContext(ThumbnailContext)\n\nexport const Thumbnail: React.FC<ThumbnailProps> = (props) => {\n  const { className = '', doc: { filename } = {}, fileSrc, imageCacheTag, size } = props\n  const [fileExists, setFileExists] = React.useState(undefined)\n\n  const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ')\n\n  React.useEffect(() => {\n    if (!fileSrc) {\n      setFileExists(false)\n      return\n    }\n\n    const img = new Image()\n    img.src = fileSrc\n    img.onload = () => {\n      setFileExists(true)\n    }\n    img.onerror = () => {\n      setFileExists(false)\n    }\n  }, [fileSrc])\n\n  return (\n    <div className={classNames}>\n      {fileExists === undefined && <ShimmerEffect height=\"100%\" />}\n      {fileExists && (\n        <img\n          alt={filename as string}\n          src={`${fileSrc}${imageCacheTag ? `?${imageCacheTag}` : ''}`}\n        />\n      )}\n      {fileExists === false && <File />}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","baseClass","File","ShimmerEffect","Thumbnail","props","$","className","t0","doc","t1","fileSrc","imageCacheTag","size","undefined","t2","filename","fileExists","setFileExists","useState","t3","t4","classNames","join","t5","t6","img","Image","src","onload","onerror","useEffect","t7","t8","_jsx","alt","_jsxs","children","height","ThumbnailComponent"],"sources":["../../../src/elements/Thumbnail/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'thumbnail'\n\nimport type { SanitizedCollectionConfig } from 'payload'\n\nimport { File } from '../../graphics/File/index.js'\nimport { useIntersect } from '../../hooks/useIntersect.js'\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\n\nexport type ThumbnailProps = {\n  className?: string\n  collectionSlug?: string\n  doc?: Record<string, unknown>\n  fileSrc?: string\n  imageCacheTag?: string\n  size?: 'expand' | 'large' | 'medium' | 'small'\n  uploadConfig?: SanitizedCollectionConfig['upload']\n}\n\nexport const Thumbnail: React.FC<ThumbnailProps> = (props) => {\n  const { className = '', doc: { filename } = {}, fileSrc, imageCacheTag, size } = props\n  const [fileExists, setFileExists] = React.useState(undefined)\n\n  const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ')\n\n  React.useEffect(() => {\n    if (!fileSrc) {\n      // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect\n      setFileExists(false)\n      return\n    }\n\n    const img = new Image()\n    img.src = fileSrc\n    img.onload = () => {\n      setFileExists(true)\n    }\n    img.onerror = () => {\n      setFileExists(false)\n    }\n  }, [fileSrc])\n\n  return (\n    <div className={classNames}>\n      {fileExists === undefined && <ShimmerEffect height=\"100%\" />}\n      {fileExists && (\n        <img\n          alt={filename as string}\n          src={`${fileSrc}${imageCacheTag ? `?${imageCacheTag}` : ''}`}\n        />\n      )}\n      {fileExists === false && <File />}\n    </div>\n  )\n}\n\ntype ThumbnailComponentProps = {\n  readonly alt?: string\n  readonly className?: string\n  readonly filename: string\n  readonly fileSrc: string\n  readonly imageCacheTag?: string\n  readonly size?: 'expand' | 'large' | 'medium' | 'small'\n}\nexport function ThumbnailComponent(props: ThumbnailComponentProps) {\n  const { alt, className = '', filename, fileSrc, imageCacheTag, size } = props\n  const [fileExists, setFileExists] = React.useState(undefined)\n\n  const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ')\n\n  React.useEffect(() => {\n    if (!fileSrc) {\n      // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect\n      setFileExists(false)\n      return\n    }\n\n    const img = new Image()\n    img.src = fileSrc\n    img.onload = () => {\n      setFileExists(true)\n    }\n    img.onerror = () => {\n      setFileExists(false)\n    }\n  }, [fileSrc])\n\n  return (\n    <div className={classNames}>\n      {fileExists === undefined && <ShimmerEffect height=\"100%\" />}\n      {fileExists && (\n        <img alt={alt || filename} src={`${fileSrc}${imageCacheTag ? `?${imageCacheTag}` : ''}`} />\n      )}\n      {fileExists === false && <File />}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Thumbnail/index.scss

@@ -1,49 +1,51 @@
 @import '../../scss/styles.scss';
 
-.thumbnail {
-  min-height: 100%;
-  flex-shrink: 0;
-  align-self: stretch;
-  overflow: hidden;
-
-  img,
-  svg {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  &--size-expand {
-    max-height: 100%;
-    width: 100%;
-    padding-top: 100%;
-    position: relative;
+@layer payload-default {
+  .thumbnail {
+    min-height: 100%;
+    flex-shrink: 0;
+    align-self: stretch;
+    overflow: hidden;
 
     img,
     svg {
-      position: absolute;
-      top: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
     }
-  }
 
-  &--size-large {
-    max-height: base(9);
-    width: base(9);
-  }
+    &--size-expand {
+      max-height: 100%;
+      width: 100%;
+      padding-top: 100%;
+      position: relative;
+
+      img,
+      svg {
+        position: absolute;
+        top: 0;
+      }
+    }
 
-  &--size-medium {
-    max-height: base(7);
-    width: base(7);
-  }
+    &--size-large {
+      max-height: base(9);
+      width: base(9);
+    }
 
-  &--size-small {
-    max-height: base(5);
-    width: base(5);
-  }
+    &--size-medium {
+      max-height: base(7);
+      width: base(7);
+    }
 
-  @include large-break {
-    .thumbnail {
+    &--size-small {
+      max-height: base(5);
       width: base(5);
     }
+
+    @include large-break {
+      .thumbnail {
+        width: base(5);
+      }
+    }
   }
 }

package/dist/elements/ThumbnailCard/index.scss

@@ -1,39 +1,41 @@
 @import '../../scss/styles.scss';
 
-.thumbnail-card {
-  @include btn-reset;
-  @include shadow-m;
-  width: 100%;
-  background: var(--theme-input-bg);
-  border: 1px solid var(--theme-border-color);
-  border-radius: var(--style-radius-m);
-  transition: border 100ms cubic-bezier(0, 0.2, 0.2, 1);
+@layer payload-default {
+  .thumbnail-card {
+    @include btn-reset;
+    @include shadow-m;
+    width: 100%;
+    background: var(--theme-input-bg);
+    border: 1px solid var(--theme-border-color);
+    border-radius: var(--style-radius-m);
+    transition: border 100ms cubic-bezier(0, 0.2, 0.2, 1);
 
-  &__label {
-    padding: base(0.5);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-weight: 600;
-  }
+    &__label {
+      padding: base(0.5);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-weight: 600;
+    }
 
-  &--has-on-click {
-    cursor: pointer;
+    &--has-on-click {
+      cursor: pointer;
 
-    &:hover,
-    &:focus,
-    &:active {
-      border: 1px solid var(--theme-elevation-350);
+      &:hover,
+      &:focus,
+      &:active {
+        border: 1px solid var(--theme-elevation-350);
+      }
     }
-  }
 
-  &--align-label-center {
-    text-align: center;
-  }
+    &--align-label-center {
+      text-align: center;
+    }
 
-  &__thumbnail {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    &__thumbnail {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
 }

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

@@ -6,6 +6,7 @@ export type Props = {
     children: React.ReactNode;
     className?: string;
     delay?: number;
+    position?: 'bottom' | 'top';
     show?: boolean;
     /**
      * If the tooltip position should not change depending on if the toolbar is outside the boundingRef. @default false

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,cAAc,CAAA;AAErB,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,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,CA8EnC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Tooltip/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAGxC,OAAO,cAAc,CAAA;AAErB,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"}

package/dist/elements/Tooltip/index.js

@@ -6,13 +6,14 @@ import React, { useEffect } from 'react';
 import { useIntersect } from '../../hooks/useIntersect.js';
 import './index.scss';
 export const Tooltip = props => {
-  const $ = _c(23);
+  const $ = _c(24);
   const {
     alignCaret: t0,
     boundingRef,
     children,
     className,
     delay: t1,
+    position: positionFromProps,
     show: t2,
     staticPositioning: t3
   } = props;
@@ -85,20 +86,20 @@ export const Tooltip = props => {
   }
   useEffect(t8, t9);
   let t10;
-  if ($[10] !== staticPositioning || $[11] !== alignCaret || $[12] !== className || $[13] !== children || $[14] !== ref || $[15] !== show || $[16] !== position) {
+  if ($[10] !== staticPositioning || $[11] !== alignCaret || $[12] !== className || $[13] !== children || $[14] !== ref || $[15] !== show || $[16] !== positionFromProps || $[17] !== position) {
     const t11 = show && "tooltip--show";
     const t12 = `tooltip--caret-${alignCaret}`;
-    const t13 = `tooltip--position-${position}`;
+    const t13 = `tooltip--position-${positionFromProps || position}`;
     let t14;
-    if ($[18] !== className || $[19] !== t11 || $[20] !== t12 || $[21] !== t13) {
+    if ($[19] !== className || $[20] !== t11 || $[21] !== t12 || $[22] !== t13) {
       t14 = ["tooltip", className, t11, t12, t13].filter(Boolean);
-      $[18] = className;
-      $[19] = t11;
-      $[20] = t12;
-      $[21] = t13;
-      $[22] = t14;
+      $[19] = className;
+      $[20] = t11;
+      $[21] = t12;
+      $[22] = t13;
+      $[23] = t14;
     } else {
-      t14 = $[22];
+      t14 = $[23];
     }
     t10 = _jsxs(React.Fragment, {
       children: [!staticPositioning && _jsx("aside", {
@@ -127,10 +128,11 @@ export const Tooltip = props => {
     $[13] = children;
     $[14] = ref;
     $[15] = show;
-    $[16] = position;
-    $[17] = t10;
+    $[16] = positionFromProps;
+    $[17] = position;
+    $[18] = t10;
   } else {
-    t10 = $[17];
+    t10 = $[18];
   }
   return t10;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useEffect","useIntersect","Tooltip","props","$","alignCaret","t0","boundingRef","children","className","delay","t1","show","t2","staticPositioning","t3","undefined","showFromProps","setShow","useState","position","setPosition","getTitleAttribute","_temp","t4","current","t5","root","rootMargin","threshold","ref","intersectionEntry","t6","t7","timerId","clearTimeout","t8","t9","isIntersecting","t10","t11","t12","t13","t14","filter","Boolean","_jsxs","Fragment","_jsx","join","style","opacity","title","content"],"sources":["../../../src/elements/Tooltip/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect } from 'react'\n\nimport { useIntersect } from '../../hooks/useIntersect.js'\nimport './index.scss'\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  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 = 350,\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) clearTimeout(timerId)\n    }\n  }, [showFromProps, delay])\n\n  useEffect(() => {\n    if (staticPositioning) return\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-${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;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,SAAS,QAAQ;AAEjC,SAASC,YAAY,QAAQ;AAC7B,OAAO;AAeP,OAAO,MAAMC,OAAA,GAA2BC,KAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EACtC;IAAAO,UAAA,EAAAC,EAAA;IAAAC,WAAA;IAAAC,QAAA;IAAAC,SAAA;IAAAC,KAAA,EAAAC,EAAA;IAAAC,IAAA,EAAAC,EAAA;IAAAC,iBAAA,EAAAC;EAAA,IAQIZ,KAAA;EAPF,MAAAE,UAAA,GAAAC,EAAqB,KAAAU,SAAA,GAAR,QAAQ,GAArBV,EAAqB;EAIrB,MAAAI,KAAA,GAAAC,EAAW,KAAAK,SAAA,SAAXL,EAAW;EACL,MAAAM,aAAA,GAAAJ,EAAoB,KAAAG,SAAA,UAApBH,EAAoB;EAC1B,MAAAC,iBAAA,GAAAC,EAAyB,KAAAC,SAAA,WAAzBD,EAAyB;EAG3B,OAAAH,IAAA,EAAAM,OAAA,IAAwBnB,KAAA,CAAAoB,QAAA,CAAeF,aAAA;EACvC,OAAAG,QAAA,EAAAC,WAAA,IAAgCtB,KAAA,CAAAoB,QAAA,CAAiC;EAEjE,MAAAG,iBAAA,GAAAC,KAAA;EAIU,MAAAC,EAAA,GAAAjB,WAAA,EAAAkB,OAAA,QAAwB;EAAA,IAAAC,EAAA;EAAA,IAAAtB,CAAA,QAAAoB,EAAA;IADhCE,EAAA;MAAAC,IAAA,EACQH,EAAwB;MAAAI,UAAA,EAClB;MAAAC,SAAA;IAAA;IAEdzB,CAAA,MAAAoB,EAAA;IAAApB,CAAA,MAAAsB,EAAA;EAAA;IAAAA,EAAA,GAAAtB,CAAA;EAAA;EALF,OAAA0B,GAAA,EAAAC,iBAAA,IAAiC9B,YAAA,CAC/ByB,EAIA,EACAZ,iBAAA;EAAA,IAAAkB,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAA7B,CAAA,QAAAM,KAAA,IAAAN,CAAA,QAAAa,aAAA;IAGQe,EAAA,GAAAA,CAAA;MACJE,GAAA,CAAAA,OAAA;MAAA,IAGAxB,KAAA,IAASO,aAAA;QACXiB,OAAA,CAAAA,CAAA,CAAUA,aAAA,CAAAA,EAAA,CAAAA;UACRhB,OAAA,CAAQD,aAAA;QAAA,GACPP,KAAA;MAFH;QAIAQ,OAAA,CAAQD,aAAA;MAAA;MAAA;QAAA,IAIJiB,OAAA;UAASC,YAAA,CAAaD,OAAA;QAAA;MAAA;IAAA;IAE3BD,EAAA,IAAChB,aAAA,EAAeP,KAAA;IAAMN,CAAA,MAAAM,KAAA;IAAAN,CAAA,MAAAa,aAAA;IAAAb,CAAA,MAAA4B,EAAA;IAAA5B,CAAA,MAAA6B,EAAA;EAAA;IAAAD,EAAA,GAAA5B,CAAA;IAAA6B,EAAA,GAAA7B,CAAA;EAAA;EAfzBJ,SAAA,CAAUgC,EAeV,EAAGC,EAAsB;EAAA,IAAAG,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAjC,CAAA,QAAAU,iBAAA,IAAAV,CAAA,QAAA2B,iBAAA;IAEfK,EAAA,GAAAA,CAAA;MAAA,IACJtB,iBAAA;QAAA;MAAA;MACJO,WAAA,CAAYU,iBAAA,EAAAO,cAAA,GAAoC,QAAQ;IAAA;IACvDD,EAAA,IAACN,iBAAA,EAAmBjB,iBAAA;IAAkBV,CAAA,MAAAU,iBAAA;IAAAV,CAAA,MAAA2B,iBAAA;IAAA3B,CAAA,MAAAgC,EAAA;IAAAhC,CAAA,MAAAiC,EAAA;EAAA;IAAAD,EAAA,GAAAhC,CAAA;IAAAiC,EAAA,GAAAjC,CAAA;EAAA;EAHzCJ,SAAA,CAAUoC,EAGV,EAAGC,EAAsC;EAAA,IAAAE,GAAA;EAAA,IAAAnC,CAAA,SAAAU,iBAAA,IAAAV,CAAA,SAAAC,UAAA,IAAAD,CAAA,SAAAK,SAAA,IAAAL,CAAA,SAAAI,QAAA,IAAAJ,CAAA,SAAA0B,GAAA,IAAA1B,CAAA,SAAAQ,IAAA,IAAAR,CAAA,SAAAgB,QAAA;IAqBjC,MAAAoB,GAAA,GAAA5B,IAAA,IAAQ;IACR,MAAA6B,GAAA,qBAAkBpC,UAAA,EAAY;IAC9B,MAAAqC,GAAA,wBAAqBtB,QAAA,EAAU;IAAA,IAAAuB,GAAA;IAAA,IAAAvC,CAAA,SAAAK,SAAA,IAAAL,CAAA,SAAAoC,GAAA,IAAApC,CAAA,SAAAqC,GAAA,IAAArC,CAAA,SAAAsC,GAAA;MALtBC,GAAA,IACT,WACAlC,SAAA,EACA+B,GAAQ,EACRC,GAA8B,EAC9BC,GAA+B,EAAAE,MAAA,CAAAC,OAEvB;MAAAzC,CAAA,OAAAK,SAAA;MAAAL,CAAA,OAAAoC,GAAA;MAAApC,CAAA,OAAAqC,GAAA;MAAArC,CAAA,OAAAsC,GAAA;MAAAtC,CAAA,OAAAuC,GAAA;IAAA;MAAAA,GAAA,GAAAvC,CAAA;IAAA;IArBdmC,GAAA,GAAAO,KAAA,CAAA/C,KAAA,CAAAgD,QAAA;MAAAvC,QAAA,GACG,CAACM,iBAAA,IACAkC,IAAA,CAAC;QAAA,eACa;QAAAvC,SAAA,EACD,CAAC,WAAWA,SAAA,EAAW,kBAAkBJ,UAAA,EAAY,EAAE,yBAAAuC,MAAA,CAAAC,OACxD,EAAAI,IAAA,CACF;QAAAnB,GAAA;QAAAoB,KAAA;UAAAC,OAAA,EAEU;QAAA;QAAA3C,QAAA,EAElBwC,IAAA,CAAC;UAAAvC,SAAA,EAAc;UAAAD;QAAA,C;UAGnBwC,IAAA,CAAC;QAAAvC,SAAA,EACYkC,GAOD,CAAAM,IAAA,CACF;QAAAG,KAAA,EACD9B,iBAAA,CAAkBd,QAAA;QAAAA,QAAA,EAEzBwC,IAAA,CAAC;UAAAvC,SAAA,EAAc;UAAAD;QAAA,C;;;;;;;;;;;;;;SAzBnB+B,G;CA6BJ;AA9EwC,SAAAhB,MAAA8B,OAAA;EAAA,OAcE,OAAOA,OAAA,KAAY,WAAWA,OAAA,GAAU;AAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useEffect","useIntersect","Tooltip","props","$","alignCaret","t0","boundingRef","children","className","delay","t1","position","positionFromProps","show","t2","staticPositioning","t3","undefined","showFromProps","setShow","useState","setPosition","getTitleAttribute","_temp","t4","current","t5","root","rootMargin","threshold","ref","intersectionEntry","t6","t7","timerId","clearTimeout","t8","t9","isIntersecting","t10","t11","t12","t13","t14","filter","Boolean","_jsxs","Fragment","_jsx","join","style","opacity","title","content"],"sources":["../../../src/elements/Tooltip/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect } from 'react'\n\nimport { useIntersect } from '../../hooks/useIntersect.js'\nimport './index.scss'\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 = 350,\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":"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","ignoreList":[]}

package/dist/elements/Tooltip/index.scss

@@ -1,99 +1,101 @@
 @import '../../scss/styles.scss';
 
-.tooltip {
-  --caret-size: 6px;
-
-  opacity: 0;
-  background-color: var(--theme-elevation-800);
-  position: absolute;
-  z-index: 3;
-  left: 50%;
-  padding: base(0.2) base(0.4);
-  color: var(--theme-elevation-0);
-  line-height: base(0.75);
-  font-weight: normal;
-  white-space: nowrap;
-  border-radius: 2px;
-  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;
-  }
+@layer payload-default {
+  .tooltip {
+    --caret-size: 6px;
 
-  &--show {
-    visibility: visible;
-    opacity: 1;
-    transition: opacity 0.2s ease-in-out;
-    cursor: default;
-  }
+    opacity: 0;
+    background-color: var(--theme-elevation-800);
+    position: absolute;
+    z-index: 3;
+    left: 50%;
+    padding: base(0.2) base(0.4);
+    color: var(--theme-elevation-0);
+    line-height: base(0.75);
+    font-weight: normal;
+    white-space: nowrap;
+    border-radius: 2px;
+    visibility: hidden;
 
-  &--caret-center {
     &::after {
-      left: 50%;
+      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;
     }
-  }
 
-  &--caret-left {
-    &::after {
-      left: calc(var(--base) * 0.5);
+    &--show {
+      visibility: visible;
+      opacity: 1;
+      transition: opacity 0.2s ease-in-out;
+      cursor: default;
     }
-  }
 
-  &--caret-right {
-    &::after {
-      right: calc(var(--base) * 0.5);
+    &--caret-center {
+      &::after {
+        left: 50%;
+      }
     }
-  }
 
-  &--position-top {
-    top: calc(var(--base) * -0.6 - 13px);
-    transform: translate3d(-50%, calc(var(--caret-size) * -1), 0);
+    &--caret-left {
+      &::after {
+        left: calc(var(--base) * 0.5);
+      }
+    }
 
-    &::after {
-      bottom: 1px;
-      border-top: var(--caret-size) solid var(--theme-elevation-800);
+    &--caret-right {
+      &::after {
+        right: calc(var(--base) * 0.5);
+      }
     }
-  }
 
-  &--position-bottom {
-    bottom: calc(var(--base) * -0.6 - 13px);
-    transform: translate3d(-50%, var(--caret-size), 0);
+    &--position-top {
+      top: calc(var(--base) * -1.25);
+      transform: translate3d(-50%, calc(var(--caret-size) * -1), 0);
 
-    &::after {
-      bottom: calc(100% + var(--caret-size) - 1px);
-      border-bottom: var(--caret-size) solid var(--theme-elevation-800);
+      &::after {
+        bottom: 1px;
+        border-top: var(--caret-size) solid var(--theme-elevation-800);
+      }
     }
-  }
 
-  .tooltip-content {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    width: 100%;
-  }
+    &--position-bottom {
+      bottom: calc(var(--base) * -1.25);
+      transform: translate3d(-50%, var(--caret-size), 0);
 
-  @include mid-break {
-    display: none;
-  }
-}
+      &::after {
+        bottom: calc(100% + var(--caret-size) - 1px);
+        border-bottom: var(--caret-size) solid var(--theme-elevation-800);
+      }
+    }
 
-html[data-theme='light'] {
-  .tooltip:not(.field-error) {
-    background-color: var(--theme-elevation-100);
-    color: var(--theme-elevation-1000);
-  }
+    .tooltip-content {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: 100%;
+    }
 
-  .tooltip--position-top:not(.field-error):after {
-    border-top-color: var(--theme-elevation-100);
+    @include mid-break {
+      display: none;
+    }
   }
 
-  .tooltip--position-bottom:not(.field-error):after {
-    border-bottom-color: var(--theme-elevation-100);
+  html[data-theme='light'] {
+    .tooltip:not(.field-error) {
+      background-color: var(--theme-elevation-100);
+      color: var(--theme-elevation-1000);
+    }
+
+    .tooltip--position-top:not(.field-error):after {
+      border-top-color: var(--theme-elevation-100);
+    }
+
+    .tooltip--position-bottom:not(.field-error):after {
+      border-bottom-color: var(--theme-elevation-100);
+    }
   }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Translation/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAEhF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAkC9B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC,CAAA;IAClE,OAAO,EAAE,qBAAqB,CAAA;IAC9B,CAAC,EAAE,SAAS,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CACpC,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAQlD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Translation/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAEhF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAkC9B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC,CAAA;IAClE,OAAO,EAAE,qBAAqB,CAAA;IAC9B,CAAC,EAAE,SAAS,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CACpC,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAQlD,CAAA"}

package/dist/elements/Translation/index.js

@@ -1,5 +1,3 @@
-'use client';
-
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 const RecursiveTranslation = ({