@payloadcms/ui 4.0.0-internal.7b031c8 → 4.0.0-internal.7b53b6d

package/dist/elements/Thumbnail/index.js

@@ -1,5 +1,6 @@
 'use client';
 
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import './index.css';
@@ -8,82 +9,161 @@ import { File } from '../../graphics/File/index.js';
 import { appendCacheTag } from '../../utilities/appendCacheTag.js';
 import { ShimmerEffect } from '../ShimmerEffect/index.js';
 export const Thumbnail = props => {
+  const $ = _c(9);
   const {
-    className = '',
-    doc: {
-      filename
-    } = {},
+    className: t0,
+    doc: t1,
     fileSrc,
     height,
     imageCacheTag,
     size,
     width
   } = props;
+  const className = t0 === undefined ? "" : t0;
+  const {
+    filename
+  } = t1 === undefined ? {} : t1;
   const [fileExists, setFileExists] = React.useState(undefined);
-  const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ');
-  const src = React.useMemo(() => fileSrc ? appendCacheTag(fileSrc, imageCacheTag) : null, [fileSrc, imageCacheTag]);
-  React.useEffect(() => {
-    if (!src) {
-      setFileExists(false);
-      return;
-    }
-    setFileExists(undefined);
-    const img = new Image();
-    img.src = src;
-    img.onload = () => {
-      setFileExists(true);
-    };
-    img.onerror = () => {
-      setFileExists(false);
+  const t2 = `${baseClass}--size-${size || "medium"}`;
+  let t3;
+  if ($[0] !== className || $[1] !== t2) {
+    t3 = [baseClass, t2, className];
+    $[0] = className;
+    $[1] = t2;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  const classNames = t3.join(" ");
+  let t4;
+  if ($[3] !== fileSrc || $[4] !== imageCacheTag) {
+    t4 = fileSrc ? appendCacheTag(fileSrc, imageCacheTag) : null;
+    $[3] = fileSrc;
+    $[4] = imageCacheTag;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  const src = t4;
+  let t5;
+  let t6;
+  if ($[6] !== src) {
+    t5 = () => {
+      if (!src) {
+        setFileExists(false);
+        return;
+      }
+      setFileExists(undefined);
+      const img = new Image();
+      img.src = src;
+      img.onload = () => {
+        setFileExists(true);
+      };
+      img.onerror = () => {
+        setFileExists(false);
+      };
     };
-  }, [src]);
-  return /*#__PURE__*/_jsxs("div", {
+    t6 = [src];
+    $[6] = src;
+    $[7] = t5;
+    $[8] = t6;
+  } else {
+    t5 = $[7];
+    t6 = $[8];
+  }
+  React.useEffect(t5, t6);
+  return _jsxs("div", {
     className: classNames,
-    children: [fileExists === undefined && /*#__PURE__*/_jsx(ShimmerEffect, {
+    children: [fileExists === undefined && _jsx(ShimmerEffect, {
       height: "100%"
-    }), fileExists && /*#__PURE__*/_jsx("img", {
+    }), fileExists && _jsx("img", {
       alt: filename,
-      height: height,
-      src: src,
-      width: width
-    }), fileExists === false && /*#__PURE__*/_jsx(File, {})]
+      height,
+      src,
+      width
+    }), fileExists === false && _jsx(File, {})]
   });
 };
 export function ThumbnailComponent(props) {
+  const $ = _c(15);
   const {
     alt,
-    className = '',
+    className: t0,
     filename,
     fileSrc,
     imageCacheTag,
     size
   } = props;
+  const className = t0 === undefined ? "" : t0;
   const [fileExists, setFileExists] = React.useState(undefined);
-  const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ');
-  const src = React.useMemo(() => fileSrc ? appendCacheTag(fileSrc, imageCacheTag) : null, [fileSrc, imageCacheTag]);
-  React.useEffect(() => {
-    if (!src) {
-      setFileExists(false);
-      return;
-    }
-    setFileExists(undefined);
-    const img = new Image();
-    img.src = src;
-    img.onload = () => {
-      setFileExists(true);
-    };
-    img.onerror = () => {
-      setFileExists(false);
+  const t1 = `${baseClass}--size-${size || "medium"}`;
+  let t2;
+  if ($[0] !== className || $[1] !== t1) {
+    t2 = [baseClass, t1, className];
+    $[0] = className;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const classNames = t2.join(" ");
+  let t3;
+  if ($[3] !== fileSrc || $[4] !== imageCacheTag) {
+    t3 = fileSrc ? appendCacheTag(fileSrc, imageCacheTag) : null;
+    $[3] = fileSrc;
+    $[4] = imageCacheTag;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  const src = t3;
+  let t4;
+  let t5;
+  if ($[6] !== src) {
+    t4 = () => {
+      if (!src) {
+        setFileExists(false);
+        return;
+      }
+      setFileExists(undefined);
+      const img = new Image();
+      img.src = src;
+      img.onload = () => {
+        setFileExists(true);
+      };
+      img.onerror = () => {
+        setFileExists(false);
+      };
     };
-  }, [src]);
-  return /*#__PURE__*/_jsxs("div", {
-    className: classNames,
-    children: [fileExists === undefined && /*#__PURE__*/_jsx(ShimmerEffect, {
-      height: "100%"
-    }), fileExists && /*#__PURE__*/_jsx("img", {
-      alt: alt || filename,
-      src: src
-    }), fileExists === false && /*#__PURE__*/_jsx(File, {})]
-  });
+    t5 = [src];
+    $[6] = src;
+    $[7] = t4;
+    $[8] = t5;
+  } else {
+    t4 = $[7];
+    t5 = $[8];
+  }
+  React.useEffect(t4, t5);
+  let t6;
+  if ($[9] !== alt || $[10] !== classNames || $[11] !== fileExists || $[12] !== filename || $[13] !== src) {
+    t6 = _jsxs("div", {
+      className: classNames,
+      children: [fileExists === undefined && _jsx(ShimmerEffect, {
+        height: "100%"
+      }), fileExists && _jsx("img", {
+        alt: alt || filename,
+        src
+      }), fileExists === false && _jsx(File, {})]
+    });
+    $[9] = alt;
+    $[10] = classNames;
+    $[11] = fileExists;
+    $[12] = filename;
+    $[13] = src;
+    $[14] = t6;
+  } else {
+    t6 = $[14];
+  }
+  return t6;
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","baseClass","File","appendCacheTag","ShimmerEffect","Thumbnail","props","className","doc","filename","fileSrc","height","imageCacheTag","size","width","fileExists","setFileExists","useState","undefined","classNames","join","src","useMemo","useEffect","img","Image","onload","onerror","_jsxs","_jsx","alt","ThumbnailComponent"],"sources":["../../../src/elements/Thumbnail/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'thumbnail'\n\nimport type { SanitizedCollectionConfig } from 'payload'\n\nimport { File } from '../../graphics/File/index.js'\nimport { appendCacheTag } from '../../utilities/appendCacheTag.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  height?: number\n  imageCacheTag?: false | string\n  size?: 'expand' | 'large' | 'medium' | 'none' | 'small'\n  uploadConfig?: SanitizedCollectionConfig['upload']\n  width?: number\n}\n\nexport const Thumbnail: React.FC<ThumbnailProps> = (props) => {\n  const {\n    className = '',\n    doc: { filename } = {},\n    fileSrc,\n    height,\n    imageCacheTag,\n    size,\n    width,\n  } = props\n  const [fileExists, setFileExists] = React.useState(undefined)\n\n  const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ')\n\n  const src = React.useMemo(\n    () => (fileSrc ? appendCacheTag(fileSrc, imageCacheTag) : null),\n    [fileSrc, imageCacheTag],\n  )\n\n  React.useEffect(() => {\n    if (!src) {\n      setFileExists(false)\n      return\n    }\n    setFileExists(undefined)\n\n    const img = new Image()\n    img.src = src\n    img.onload = () => {\n      setFileExists(true)\n    }\n    img.onerror = () => {\n      setFileExists(false)\n    }\n  }, [src])\n\n  return (\n    <div className={classNames}>\n      {fileExists === undefined && <ShimmerEffect height=\"100%\" />}\n      {fileExists && <img alt={filename as string} height={height} src={src} width={width} />}\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?: false | string\n  readonly size?: 'expand' | 'large' | 'medium' | 'none' | '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  const src = React.useMemo(\n    () => (fileSrc ? appendCacheTag(fileSrc, imageCacheTag) : null),\n    [fileSrc, imageCacheTag],\n  )\n\n  React.useEffect(() => {\n    if (!src) {\n      setFileExists(false)\n      return\n    }\n    setFileExists(undefined)\n\n    const img = new Image()\n    img.src = src\n    img.onload = () => {\n      setFileExists(true)\n    }\n    img.onerror = () => {\n      setFileExists(false)\n    }\n  }, [src])\n\n  return (\n    <div className={classNames}>\n      {fileExists === undefined && <ShimmerEffect height=\"100%\" />}\n      {fileExists && <img alt={alt || filename} src={src} />}\n      {fileExists === false && <File />}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAIlB,SAASC,IAAI,QAAQ;AACrB,SAASC,cAAc,QAAQ;AAC/B,SAASC,aAAa,QAAQ;AAc9B,OAAO,MAAMC,SAAA,GAAuCC,KAAA;EAClD,MAAM;IACJC,SAAA,GAAY,EAAE;IACdC,GAAA,EAAK;MAAEC;IAAQ,CAAE,GAAG,CAAC,CAAC;IACtBC,OAAO;IACPC,MAAM;IACNC,aAAa;IACbC,IAAI;IACJC;EAAK,CACN,GAAGR,KAAA;EACJ,MAAM,CAACS,UAAA,EAAYC,aAAA,CAAc,GAAGhB,KAAA,CAAMiB,QAAQ,CAACC,SAAA;EAEnD,MAAMC,UAAA,GAAa,CAAClB,SAAA,EAAW,GAAGA,SAAA,UAAmBY,IAAA,IAAQ,UAAU,EAAEN,SAAA,CAAU,CAACa,IAAI,CAAC;EAEzF,MAAMC,GAAA,GAAMrB,KAAA,CAAMsB,OAAO,CACvB,MAAOZ,OAAA,GAAUP,cAAA,CAAeO,OAAA,EAASE,aAAA,IAAiB,MAC1D,CAACF,OAAA,EAASE,aAAA,CAAc;EAG1BZ,KAAA,CAAMuB,SAAS,CAAC;IACd,IAAI,CAACF,GAAA,EAAK;MACRL,aAAA,CAAc;MACd;IACF;IACAA,aAAA,CAAcE,SAAA;IAEd,MAAMM,GAAA,GAAM,IAAIC,KAAA;IAChBD,GAAA,CAAIH,GAAG,GAAGA,GAAA;IACVG,GAAA,CAAIE,MAAM,GAAG;MACXV,aAAA,CAAc;IAChB;IACAQ,GAAA,CAAIG,OAAO,GAAG;MACZX,aAAA,CAAc;IAChB;EACF,GAAG,CAACK,GAAA,CAAI;EAER,oBACEO,KAAA,CAAC;IAAIrB,SAAA,EAAWY,UAAA;eACbJ,UAAA,KAAeG,SAAA,iBAAaW,IAAA,CAACzB,aAAA;MAAcO,MAAA,EAAO;QAClDI,UAAA,iBAAcc,IAAA,CAAC;MAAIC,GAAA,EAAKrB,QAAA;MAAoBE,MAAA,EAAQA,MAAA;MAAQU,GAAA,EAAKA,GAAA;MAAKP,KAAA,EAAOA;QAC7EC,UAAA,KAAe,sBAASc,IAAA,CAAC3B,IAAA;;AAGhC;AAUA,OAAO,SAAS6B,mBAAmBzB,KAA8B;EAC/D,MAAM;IAAEwB,GAAG;IAAEvB,SAAA,GAAY,EAAE;IAAEE,QAAQ;IAAEC,OAAO;IAAEE,aAAa;IAAEC;EAAI,CAAE,GAAGP,KAAA;EACxE,MAAM,CAACS,UAAA,EAAYC,aAAA,CAAc,GAAGhB,KAAA,CAAMiB,QAAQ,CAACC,SAAA;EAEnD,MAAMC,UAAA,GAAa,CAAClB,SAAA,EAAW,GAAGA,SAAA,UAAmBY,IAAA,IAAQ,UAAU,EAAEN,SAAA,CAAU,CAACa,IAAI,CAAC;EAEzF,MAAMC,GAAA,GAAMrB,KAAA,CAAMsB,OAAO,CACvB,MAAOZ,OAAA,GAAUP,cAAA,CAAeO,OAAA,EAASE,aAAA,IAAiB,MAC1D,CAACF,OAAA,EAASE,aAAA,CAAc;EAG1BZ,KAAA,CAAMuB,SAAS,CAAC;IACd,IAAI,CAACF,GAAA,EAAK;MACRL,aAAA,CAAc;MACd;IACF;IACAA,aAAA,CAAcE,SAAA;IAEd,MAAMM,GAAA,GAAM,IAAIC,KAAA;IAChBD,GAAA,CAAIH,GAAG,GAAGA,GAAA;IACVG,GAAA,CAAIE,MAAM,GAAG;MACXV,aAAA,CAAc;IAChB;IACAQ,GAAA,CAAIG,OAAO,GAAG;MACZX,aAAA,CAAc;IAChB;EACF,GAAG,CAACK,GAAA,CAAI;EAER,oBACEO,KAAA,CAAC;IAAIrB,SAAA,EAAWY,UAAA;eACbJ,UAAA,KAAeG,SAAA,iBAAaW,IAAA,CAACzB,aAAA;MAAcO,MAAA,EAAO;QAClDI,UAAA,iBAAcc,IAAA,CAAC;MAAIC,GAAA,EAAKA,GAAA,IAAOrB,QAAA;MAAUY,GAAA,EAAKA;QAC9CN,UAAA,KAAe,sBAASc,IAAA,CAAC3B,IAAA;;AAGhC","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","baseClass","File","appendCacheTag","ShimmerEffect","Thumbnail","props","$","className","t0","doc","t1","fileSrc","height","imageCacheTag","size","width","undefined","filename","fileExists","setFileExists","useState","t2","t3","classNames","join","t4","src","t5","t6","img","Image","onload","onerror","useEffect","_jsxs","children","_jsx","alt","ThumbnailComponent"],"sources":["../../../src/elements/Thumbnail/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'thumbnail'\n\nimport type { SanitizedCollectionConfig } from 'payload'\n\nimport { File } from '../../graphics/File/index.js'\nimport { appendCacheTag } from '../../utilities/appendCacheTag.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  height?: number\n  imageCacheTag?: false | string\n  size?: 'expand' | 'large' | 'medium' | 'none' | 'small'\n  uploadConfig?: Omit<SanitizedCollectionConfig['upload'], 'uploadInstructions'>\n  width?: number\n}\n\nexport const Thumbnail: React.FC<ThumbnailProps> = (props) => {\n  const {\n    className = '',\n    doc: { filename } = {},\n    fileSrc,\n    height,\n    imageCacheTag,\n    size,\n    width,\n  } = props\n  const [fileExists, setFileExists] = React.useState(undefined)\n\n  const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ')\n\n  const src = React.useMemo(\n    () => (fileSrc ? appendCacheTag(fileSrc, imageCacheTag) : null),\n    [fileSrc, imageCacheTag],\n  )\n\n  React.useEffect(() => {\n    if (!src) {\n      setFileExists(false)\n      return\n    }\n    setFileExists(undefined)\n\n    const img = new Image()\n    img.src = src\n    img.onload = () => {\n      setFileExists(true)\n    }\n    img.onerror = () => {\n      setFileExists(false)\n    }\n  }, [src])\n\n  return (\n    <div className={classNames}>\n      {fileExists === undefined && <ShimmerEffect height=\"100%\" />}\n      {fileExists && <img alt={filename as string} height={height} src={src} width={width} />}\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?: false | string\n  readonly size?: 'expand' | 'large' | 'medium' | 'none' | '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  const src = React.useMemo(\n    () => (fileSrc ? appendCacheTag(fileSrc, imageCacheTag) : null),\n    [fileSrc, imageCacheTag],\n  )\n\n  React.useEffect(() => {\n    if (!src) {\n      setFileExists(false)\n      return\n    }\n    setFileExists(undefined)\n\n    const img = new Image()\n    img.src = src\n    img.onload = () => {\n      setFileExists(true)\n    }\n    img.onerror = () => {\n      setFileExists(false)\n    }\n  }, [src])\n\n  return (\n    <div className={classNames}>\n      {fileExists === undefined && <ShimmerEffect height=\"100%\" />}\n      {fileExists && <img alt={alt || filename} src={src} />}\n      {fileExists === false && <File />}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAIlB,SAASC,IAAI,QAAQ;AACrB,SAASC,cAAc,QAAQ;AAC/B,SAASC,aAAa,QAAQ;AAc9B,OAAO,MAAMC,SAAA,GAAsCC,KAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EACjD;IAAAS,SAAA,EAAAC,EAAA;IAAAC,GAAA,EAAAC,EAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,aAAA;IAAAC,IAAA;IAAAC;EAAA,IAQIV,KAAA;EAPF,MAAAE,SAAA,GAAAC,EAAc,KAAdQ,SAAc,GAAd,EAAc,GAAdR,EAAc;EACT;IAAAS;EAAA,IAAAP,EAAiB,KAAjBM,SAAiB,GAAjB,CAAgB,CAAC,GAAjBN,EAAiB;EAOxB,OAAAQ,UAAA,EAAAC,aAAA,IAAoCpB,KAAA,CAAAqB,QAAc,CAACJ,SAAA;EAEpB,MAAAK,EAAA,MAAGrB,SAAA,UAAmBc,IAAQ,IAAR,QAAQ,EAAU;EAAA,IAAAQ,EAAA;EAAA,IAAAhB,CAAA,QAAAC,SAAA,IAAAD,CAAA,QAAAe,EAAA;IAApDC,EAAA,IAACtB,SAAA,EAAWqB,EAAwC,EAAEd,SAAA,CAAU;IAAAD,CAAA,MAAAC,SAAA;IAAAD,CAAA,MAAAe,EAAA;IAAAf,CAAA,MAAAgB,EAAA;EAAA;IAAAA,EAAA,GAAAhB,CAAA;EAAA;EAAnF,MAAAiB,UAAA,GAAmBD,EAAgE,CAAAE,IAAK,CAAC;EAAA,IAAAC,EAAA;EAAA,IAAAnB,CAAA,QAAAK,OAAA,IAAAL,CAAA,QAAAO,aAAA;IAGhFY,EAAA,GAAAd,OAAA,GAAUT,cAAA,CAAeS,OAAA,EAASE,aAAiB,IAAnD,IAAmD;IAAAP,CAAA,MAAAK,OAAA;IAAAL,CAAA,MAAAO,aAAA;IAAAP,CAAA,MAAAmB,EAAA;EAAA;IAAAA,EAAA,GAAAnB,CAAA;EAAA;EAD5D,MAAAoB,GAAA,GACSD,EAAmD;EAClC,IAAAE,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAtB,CAAA,QAAAoB,GAAA;IAGVC,EAAA,GAAAA,CAAA;MACd,IAAI,CAACD,GAAA;QACHP,aAAA,CAAc;QAAA;MAAA;MAGhBA,aAAA,CAAcH,SAAA;MAEd,MAAAa,GAAA,GAAY,IAAIC,KAAA;MAChBD,GAAA,CAAAH,GAAA,GAAUA,GAAH;MACPG,GAAA,CAAAE,MAAA,GAAa;QACXZ,aAAA,CAAc;MAAA,CADN;MAGVU,GAAA,CAAAG,OAAA,GAAc;QACZb,aAAA,CAAc;MAAA,CADL;IAAA,CAGb;IAAGS,EAAA,IAACF,GAAA,CAAI;IAAApB,CAAA,MAAAoB,GAAA;IAAApB,CAAA,MAAAqB,EAAA;IAAArB,CAAA,MAAAsB,EAAA;EAAA;IAAAD,EAAA,GAAArB,CAAA;IAAAsB,EAAA,GAAAtB,CAAA;EAAA;EAfRP,KAAA,CAAAkC,SAAe,CAACN,EAehB,EAAGC,EAAK;EAAA,OAGNM,KAAA,CAAC;IAAA3B,SAAA,EAAegB,UAAA;IAAAY,QAAA,E,CACbjB,UAAA,KAAeF,S,IAAaoB,IAAA,CAACjC,aAAA;MAAAS,MAAA,EAAqB;QAClDM,U,IAAckB,IAAA,CAAC;MAAAC,GAAA,EAASpB,QAAA;MAAAL,MAAA;MAAAc,GAAA;MAAAX;QACxBG,UAAA,KAAe,KAAU,IAADkB,IAAA,CAACnC,IAAA;;CAGhC;AAUA,OAAO,SAAAqC,mBAAAjC,KAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EACL;IAAAuC,GAAA;IAAA9B,SAAA,EAAAC,EAAA;IAAAS,QAAA;IAAAN,OAAA;IAAAE,aAAA;IAAAC;EAAA,IAAwET,KAAA;EAA3D,MAAAE,SAAA,GAAAC,EAAc,KAAdQ,SAAc,GAAd,EAAc,GAAdR,EAAc;EAC3B,OAAAU,UAAA,EAAAC,aAAA,IAAoCpB,KAAA,CAAAqB,QAAc,CAACJ,SAAA;EAEpB,MAAAN,EAAA,MAAGV,SAAA,UAAmBc,IAAQ,IAAR,QAAQ,EAAU;EAAA,IAAAO,EAAA;EAAA,IAAAf,CAAA,QAAAC,SAAA,IAAAD,CAAA,QAAAI,EAAA;IAApDW,EAAA,IAACrB,SAAA,EAAWU,EAAwC,EAAEH,SAAA,CAAU;IAAAD,CAAA,MAAAC,SAAA;IAAAD,CAAA,MAAAI,EAAA;IAAAJ,CAAA,MAAAe,EAAA;EAAA;IAAAA,EAAA,GAAAf,CAAA;EAAA;EAAnF,MAAAiB,UAAA,GAAmBF,EAAgE,CAAAG,IAAK,CAAC;EAAA,IAAAF,EAAA;EAAA,IAAAhB,CAAA,QAAAK,OAAA,IAAAL,CAAA,QAAAO,aAAA;IAGhFS,EAAA,GAAAX,OAAA,GAAUT,cAAA,CAAeS,OAAA,EAASE,aAAiB,IAAnD,IAAmD;IAAAP,CAAA,MAAAK,OAAA;IAAAL,CAAA,MAAAO,aAAA;IAAAP,CAAA,MAAAgB,EAAA;EAAA;IAAAA,EAAA,GAAAhB,CAAA;EAAA;EAD5D,MAAAoB,GAAA,GACSJ,EAAmD;EAClC,IAAAG,EAAA;EAAA,IAAAE,EAAA;EAAA,IAAArB,CAAA,QAAAoB,GAAA;IAGVD,EAAA,GAAAA,CAAA;MACd,IAAI,CAACC,GAAA;QACHP,aAAA,CAAc;QAAA;MAAA;MAGhBA,aAAA,CAAcH,SAAA;MAEd,MAAAa,GAAA,GAAY,IAAIC,KAAA;MAChBD,GAAA,CAAAH,GAAA,GAAUA,GAAH;MACPG,GAAA,CAAAE,MAAA,GAAa;QACXZ,aAAA,CAAc;MAAA,CADN;MAGVU,GAAA,CAAAG,OAAA,GAAc;QACZb,aAAA,CAAc;MAAA,CADL;IAAA,CAGb;IAAGQ,EAAA,IAACD,GAAA,CAAI;IAAApB,CAAA,MAAAoB,GAAA;IAAApB,CAAA,MAAAmB,EAAA;IAAAnB,CAAA,MAAAqB,EAAA;EAAA;IAAAF,EAAA,GAAAnB,CAAA;IAAAqB,EAAA,GAAArB,CAAA;EAAA;EAfRP,KAAA,CAAAkC,SAAe,CAACR,EAehB,EAAGE,EAAK;EAAA,IAAAC,EAAA;EAAA,IAAAtB,CAAA,QAAA+B,GAAA,IAAA/B,CAAA,SAAAiB,UAAA,IAAAjB,CAAA,SAAAY,UAAA,IAAAZ,CAAA,SAAAW,QAAA,IAAAX,CAAA,SAAAoB,GAAA;IAGNE,EAAA,GAAAM,KAAA,CAAC;MAAA3B,SAAA,EAAegB,UAAA;MAAAY,QAAA,E,CACbjB,UAAA,KAAeF,S,IAAaoB,IAAA,CAACjC,aAAA;QAAAS,MAAA,EAAqB;UAClDM,U,IAAckB,IAAA,CAAC;QAAAC,GAAA,EAASA,GAAO,IAAPpB,QAAO;QAAAS;UAC/BR,UAAA,KAAe,KAAU,IAADkB,IAAA,CAACnC,IAAA;;;;;;;;;;;SAH5B2B,E","ignoreList":[]}

package/dist/elements/ThumbnailCard/index.css

@@ -76,7 +76,6 @@
     white-space: nowrap;
     text-align: left;
     color: var(--color-text);
-    font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-style: normal;
     font-weight: var(--text-body-medium-font-weight);

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ThumbnailCard/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEjE,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,sBAAsB,CAAA;IACnC,GAAG,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,UAAU,CAAA;IACxC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAID,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAmDtD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ThumbnailCard/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEjE,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,sBAAsB,CAAA;IACnC,GAAG,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,UAAU,CAAA;IACxC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAID,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAoDtD,CAAA"}

package/dist/elements/ThumbnailCard/index.js

@@ -9,7 +9,7 @@ import { formatDocTitle } from '../../utilities/formatDocTitle/index.js';
 import './index.css';
 const baseClass = 'thumbnail-card';
 export const ThumbnailCard = props => {
-  const $ = _c(15);
+  const $ = _c(16);
   const {
     alignLabel,
     className,
@@ -43,7 +43,7 @@ export const ThumbnailCard = props => {
   }
   const classes = t3.join(" ");
   let t4;
-  if ($[5] !== classes || $[6] !== collection || $[7] !== config || $[8] !== doc || $[9] !== i18n || $[10] !== labelFromProps || $[11] !== onClick || $[12] !== onDoubleClick || $[13] !== thumbnail) {
+  if ($[5] !== classes || $[6] !== collection || $[7] !== config || $[8] !== doc || $[9] !== i18n || $[10] !== isSelected || $[11] !== labelFromProps || $[12] !== onClick || $[13] !== onDoubleClick || $[14] !== thumbnail) {
     let title = labelFromProps;
     if (!title) {
       title = formatDocTitle({
@@ -55,6 +55,7 @@ export const ThumbnailCard = props => {
       });
     }
     t4 = _jsxs("button", {
+      "aria-pressed": typeof isSelected === "boolean" ? isSelected : undefined,
       className: classes,
       onClick,
       onDoubleClick,
@@ -73,13 +74,14 @@ export const ThumbnailCard = props => {
     $[7] = config;
     $[8] = doc;
     $[9] = i18n;
-    $[10] = labelFromProps;
-    $[11] = onClick;
-    $[12] = onDoubleClick;
-    $[13] = thumbnail;
-    $[14] = t4;
+    $[10] = isSelected;
+    $[11] = labelFromProps;
+    $[12] = onClick;
+    $[13] = onDoubleClick;
+    $[14] = thumbnail;
+    $[15] = t4;
   } else {
-    t4 = $[14];
+    t4 = $[15];
   }
   return t4;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useConfig","useTranslation","formatDocTitle","baseClass","ThumbnailCard","props","$","alignLabel","className","collection","doc","isSelected","label","labelFromProps","onClick","onDoubleClick","thumbnail","config","i18n","t0","t1","t2","t3","filter","Boolean","classes","join","t4","title","data","dateFormat","admin","fallback","filename","_jsxs","type","children","_jsx"],"sources":["../../../src/elements/ThumbnailCard/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, TypeWithID } from 'payload'\n\nimport React from 'react'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { formatDocTitle } from '../../utilities/formatDocTitle/index.js'\nimport './index.css'\n\nexport type ThumbnailCardProps = {\n  alignLabel?: 'center' | 'left'\n  className?: string\n  collection?: ClientCollectionConfig\n  doc?: { filename?: string } & TypeWithID\n  isSelected?: boolean\n  label?: string\n  onClick?: () => void\n  onDoubleClick?: () => void\n  onKeyDown?: () => void\n  thumbnail: React.ReactNode\n}\n\nconst baseClass = 'thumbnail-card'\n\nexport const ThumbnailCard: React.FC<ThumbnailCardProps> = (props) => {\n  const {\n    alignLabel,\n    className,\n    collection,\n    doc,\n    isSelected,\n    label: labelFromProps,\n    onClick,\n    onDoubleClick,\n    thumbnail,\n  } = props\n\n  const { config } = useConfig()\n\n  const { i18n } = useTranslation()\n\n  const classes = [\n    baseClass,\n    className,\n    typeof onClick === 'function' && `${baseClass}--has-on-click`,\n    isSelected && `${baseClass}--selected`,\n    alignLabel && `${baseClass}--align-label-${alignLabel}`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  let title = labelFromProps\n\n  if (!title) {\n    title = formatDocTitle({\n      collectionConfig: collection,\n      data: doc,\n      dateFormat: config.admin.dateFormat,\n      fallback: doc?.filename,\n      i18n,\n    })\n  }\n\n  return (\n    <button\n      className={classes}\n      onClick={onClick}\n      onDoubleClick={onDoubleClick}\n      title={title}\n      type=\"button\"\n    >\n      <div className={`${baseClass}__thumbnail`}>{thumbnail}</div>\n      <div className={`${baseClass}__label`}>{title}</div>\n    </button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,MAAW;AAElB,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAeP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,aAAA,GAA8CC,KAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EACzD;IAAAS,UAAA;IAAAC,SAAA;IAAAC,UAAA;IAAAC,GAAA;IAAAC,UAAA;IAAAC,KAAA,EAAAC,cAAA;IAAAC,OAAA;IAAAC,aAAA;IAAAC;EAAA,IAUIX,KAAA;EAEJ;IAAAY;EAAA,IAAmBjB,SAAA;EAEnB;IAAAkB;EAAA,IAAiBjB,cAAA;EAKf,MAAAkB,EAAA,UAAOL,OAAA,KAAY,cAAc,GAAAX,SAAA,gBAA4B;EAC7D,MAAAiB,EAAA,GAAAT,UAAA,IAAc,GAAAR,SAAA,YAAwB;EACtC,MAAAkB,EAAA,GAAAd,UAAA,IAAc,GAAAJ,SAAA,iBAA6BI,UAAA,EAAY;EAAA,IAAAe,EAAA;EAAA,IAAAhB,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAAa,EAAA,IAAAb,CAAA,QAAAc,EAAA,IAAAd,CAAA,QAAAe,EAAA;IALzCC,EAAA,IAAAnB,SAAA,EAEdK,SAAA,EACAW,EAA6D,EAC7DC,EAAsC,EACtCC,EAAuD,EAAAE,MAAA,CAAAC,OAE/C;IAAAlB,CAAA,MAAAE,SAAA;IAAAF,CAAA,MAAAa,EAAA;IAAAb,CAAA,MAAAc,EAAA;IAAAd,CAAA,MAAAe,EAAA;IAAAf,CAAA,MAAAgB,EAAA;EAAA;IAAAA,EAAA,GAAAhB,CAAA;EAAA;EAPV,MAAAmB,OAAA,GAAgBH,EAON,CAAAI,IAAA,CACF;EAAA,IAAAC,EAAA;EAAA,IAAArB,CAAA,QAAAmB,OAAA,IAAAnB,CAAA,QAAAG,UAAA,IAAAH,CAAA,QAAAW,MAAA,IAAAX,CAAA,QAAAI,GAAA,IAAAJ,CAAA,QAAAY,IAAA,IAAAZ,CAAA,SAAAO,cAAA,IAAAP,CAAA,SAAAQ,OAAA,IAAAR,CAAA,SAAAS,aAAA,IAAAT,CAAA,SAAAU,SAAA;IAER,IAAAY,KAAA,GAAYf,cAAA;IAAA,KAEPe,KAAA;MACHA,KAAA,CAAAA,CAAA,CAAQA;QAAAA,iBAAA,CACYnB,UAAA;QAAAoB,IAAA,EACZnB,GAAA;QAAAoB,UAAA,EACMb,MAAA,CAAAc,KAAA,CAAAD,UAAA;QAAAE,QAAA,EACFtB,GAAA,EAAAuB,QAAA;QAAAf;MAAA,CAEZ;IANA;IAUAS,EAAA,GAAAO,KAAA,CAAC;MAAA1B,SAAA,EACYiB,OAAA;MAAAX,OAAA;MAAAC,aAAA;MAAAa,KAAA;MAAAO,IAAA,EAIN;MAAAC,QAAA,GAELC,IAAA,CAAC;QAAA7B,SAAA,EAAe,GAAAL,SAAA,aAAyB;QAAAiC,QAAA,EAAGpB;MAAA,C,GAC5CqB,IAAA,CAAC;QAAA7B,SAAA,EAAe,GAAAL,SAAA,SAAqB;QAAAiC,QAAA,EAAGR;MAAA,C;;;;;;;;;;;;;;;SAR1CD,E;CAWJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useConfig","useTranslation","formatDocTitle","baseClass","ThumbnailCard","props","$","alignLabel","className","collection","doc","isSelected","label","labelFromProps","onClick","onDoubleClick","thumbnail","config","i18n","t0","t1","t2","t3","filter","Boolean","classes","join","t4","title","collectionConfig","data","dateFormat","admin","fallback","filename","_jsxs","undefined","type","children","_jsx"],"sources":["../../../src/elements/ThumbnailCard/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, TypeWithID } from 'payload'\n\nimport React from 'react'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { formatDocTitle } from '../../utilities/formatDocTitle/index.js'\nimport './index.css'\n\nexport type ThumbnailCardProps = {\n  alignLabel?: 'center' | 'left'\n  className?: string\n  collection?: ClientCollectionConfig\n  doc?: { filename?: string } & TypeWithID\n  isSelected?: boolean\n  label?: string\n  onClick?: () => void\n  onDoubleClick?: () => void\n  onKeyDown?: () => void\n  thumbnail: React.ReactNode\n}\n\nconst baseClass = 'thumbnail-card'\n\nexport const ThumbnailCard: React.FC<ThumbnailCardProps> = (props) => {\n  const {\n    alignLabel,\n    className,\n    collection,\n    doc,\n    isSelected,\n    label: labelFromProps,\n    onClick,\n    onDoubleClick,\n    thumbnail,\n  } = props\n\n  const { config } = useConfig()\n\n  const { i18n } = useTranslation()\n\n  const classes = [\n    baseClass,\n    className,\n    typeof onClick === 'function' && `${baseClass}--has-on-click`,\n    isSelected && `${baseClass}--selected`,\n    alignLabel && `${baseClass}--align-label-${alignLabel}`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  let title = labelFromProps\n\n  if (!title) {\n    title = formatDocTitle({\n      collectionConfig: collection,\n      data: doc,\n      dateFormat: config.admin.dateFormat,\n      fallback: doc?.filename,\n      i18n,\n    })\n  }\n\n  return (\n    <button\n      aria-pressed={typeof isSelected === 'boolean' ? isSelected : undefined}\n      className={classes}\n      onClick={onClick}\n      onDoubleClick={onDoubleClick}\n      title={title}\n      type=\"button\"\n    >\n      <div className={`${baseClass}__thumbnail`}>{thumbnail}</div>\n      <div className={`${baseClass}__label`}>{title}</div>\n    </button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,MAAW;AAElB,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAeP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,aAAA,GAA8CC,KAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EACzD;IAAAS,UAAA;IAAAC,SAAA;IAAAC,UAAA;IAAAC,GAAA;IAAAC,UAAA;IAAAC,KAAA,EAAAC,cAAA;IAAAC,OAAA;IAAAC,aAAA;IAAAC;EAAA,IAUIX,KAAA;EAEJ;IAAAY;EAAA,IAAmBjB,SAAA;EAEnB;IAAAkB;EAAA,IAAiBjB,cAAA;EAKf,MAAAkB,EAAA,UAAOL,OAAA,KAAY,UAA0C,IAA7D,GAAoCX,SAAA,gBAAyB;EAC7D,MAAAiB,EAAA,GAAAT,UAAsC,IAAtC,GAAiBR,SAAA,YAAqB;EACtC,MAAAkB,EAAA,GAAAd,UAAuD,IAAvD,GAAiBJ,SAAA,iBAA0BI,UAAA,EAAY;EAAA,IAAAe,EAAA;EAAA,IAAAhB,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAAa,EAAA,IAAAb,CAAA,QAAAc,EAAA,IAAAd,CAAA,QAAAe,EAAA;IALzCC,EAAA,IACdnB,SAAA,EACAK,SAAA,EACAW,EAA6D,EAC7DC,EAAsC,EACtCC,EAAuD,CACxD,CAAAE,MACQ,CAACC,OAAA;IAAAlB,CAAA,MAAAE,SAAA;IAAAF,CAAA,MAAAa,EAAA;IAAAb,CAAA,MAAAc,EAAA;IAAAd,CAAA,MAAAe,EAAA;IAAAf,CAAA,MAAAgB,EAAA;EAAA;IAAAA,EAAA,GAAAhB,CAAA;EAAA;EAPV,MAAAmB,OAAA,GAAgBH,EAON,CAAAI,IACH,CAAC;EAAA,IAAAC,EAAA;EAAA,IAAArB,CAAA,QAAAmB,OAAA,IAAAnB,CAAA,QAAAG,UAAA,IAAAH,CAAA,QAAAW,MAAA,IAAAX,CAAA,QAAAI,GAAA,IAAAJ,CAAA,QAAAY,IAAA,IAAAZ,CAAA,SAAAK,UAAA,IAAAL,CAAA,SAAAO,cAAA,IAAAP,CAAA,SAAAQ,OAAA,IAAAR,CAAA,SAAAS,aAAA,IAAAT,CAAA,SAAAU,SAAA;IAER,IAAAY,KAAA,GAAYf,cAAA;IAEZ,IAAI,CAACe,KAAA;MACHA,KAAA,CAAAA,CAAA,CAAQ1B,cAAA,CAAe;QAAA2B,gBAAA,EACHpB,UAAA;QAAAqB,IAAA,EACZpB,GAAA;QAAAqB,UAAA,EACMd,MAAA,CAAAe,KAAY,CAAAD,UAAW;QAAAE,QAAA,EACzBvB,GAAA,EAAAwB,QAAK;QAAAhB;MAEjB;IANA;IAUAS,EAAA,GAAAQ,KAAA,CAAC;MAAA,gBACe,OAAOxB,UAAA,KAAe,SAAyB,GAA/CA,UAA+C,GAA/CyB,SAA+C;MAAA5B,SAAA,EAClDiB,OAAA;MAAAX,OAAA;MAAAC,aAAA;MAAAa,KAAA;MAAAS,IAAA,EAIN;MAAAC,QAAA,E,CAELC,IAAA,CAAC;QAAA/B,SAAA,EAAe,GAAGL,SAAA,aAAsB;QAAAmC,QAAA,EAAGtB;UAC5CuB,IAAA,CAAC;QAAA/B,SAAA,EAAe,GAAGL,SAAA,SAAkB;QAAAmC,QAAA,EAAGV;;;;;;;;;;;;;;;;;SAT1CD,E;CAYJ","ignoreList":[]}

package/dist/elements/TimezonePicker/index.css

@@ -15,7 +15,6 @@
     .timezone-picker__label {
       color: var(--color-text-secondary);
       flex-shrink: 0;
-      font-family: var(--text-body-medium-font-family);
       font-size: var(--text-body-medium-font-size);
       font-weight: var(--text-body-medium-font-weight);
       line-height: var(--text-body-medium-line-height);
@@ -47,6 +46,7 @@
         border: none;
         padding: 0;
         padding-left: var(--spacer-1);
+        /* stylelint-disable-next-line plugin/no-important -- TODO: pre-existing; revisit whether specificity can win instead */
         min-height: auto !important;
         position: relative;
         box-shadow: unset;
@@ -94,7 +94,6 @@
 
       .rs__single-value {
         color: var(--color-text);
-        font-family: var(--text-body-medium-font-family);
         font-size: var(--text-body-medium-font-size);
         font-weight: var(--text-body-medium-font-weight);
         line-height: var(--text-body-medium-line-height);
@@ -105,7 +104,6 @@
 
       .rs__placeholder {
         color: var(--color-text-secondary);
-        font-family: var(--text-body-medium-font-family);
         font-size: var(--text-body-medium-font-size);
         font-weight: var(--text-body-medium-font-weight);
         line-height: var(--text-body-medium-line-height);
@@ -124,7 +122,7 @@
 
         &:focus-visible {
           outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
-          outline-offset: calc(-1 * var(--stroke-width-small));
+          outline-offset: var(--accessibility-outline-inset);
         }
       }
 
@@ -132,15 +130,16 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        padding-inline: calc(-1 * var(--stroke-width-small));
+        padding: 0;
         cursor: pointer;
-        margin-left: calc(var(--spacer-1) / 2);
-        height: var(--spacer-3);
+        margin-inline-start: calc(var(--spacer-1) / 2);
+        min-width: var(--spacer-4);
+        height: var(--spacer-4);
         overflow: visible;
         border-radius: var(--button-radius);
 
         &:focus-visible {
-          outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
+          outline-offset: var(--accessibility-outline-inset);
         }
       }
     }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/TimezonePicker/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAa9B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAQvC,OAAO,aAAa,CAAA;AAqEpB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuE1C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/TimezonePicker/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAQvC,OAAO,aAAa,CAAA;AA0DpB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAqE1C,CAAA"}