@payloadcms/ui 4.0.0-internal.38b7f1d → 4.0.0-internal.4c792ad

package/dist/elements/HierarchyTypeField/index.js

@@ -0,0 +1,117 @@
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback, useMemo } from 'react';
+import { mergeFieldStyles } from '../../fields/mergeFieldStyles.js';
+import { formatOptions, SelectInput } from '../../fields/Select/index.js';
+import { useField } from '../../forms/useField/index.js';
+import { useHierarchy } from '../../providers/Hierarchy/index.js';
+export const HierarchyTypeField = ({
+  options: allSelectOptions,
+  parentFieldName,
+  ...props
+}) => {
+  const {
+    field,
+    field: {
+      name,
+      admin: {
+        className,
+        isClearable = true,
+        isSortable = true,
+        placeholder
+      } = {},
+      hasMany = false,
+      label,
+      localized,
+      required
+    },
+    onChange: onChangeFromProps,
+    path: pathFromProps,
+    readOnly,
+    validate
+  } = props;
+  const {
+    allowedCollections
+  } = useHierarchy();
+  const options = useMemo(() => {
+    if (!allowedCollections || allowedCollections.length === 0) {
+      return formatOptions(allSelectOptions);
+    }
+    return formatOptions(allSelectOptions.filter(option => {
+      if (typeof option === 'object' && 'value' in option && option.value) {
+        return allowedCollections.some(c => c.slug === option.value);
+      }
+      return true;
+    }));
+  }, [allSelectOptions, allowedCollections]);
+  const {
+    customComponents: {
+      AfterInput,
+      BeforeInput,
+      Description,
+      Error,
+      Label
+    } = {},
+    disabled,
+    path,
+    selectFilterOptions,
+    setValue,
+    showError,
+    value
+  } = useField({
+    potentiallyStalePath: pathFromProps,
+    validate
+  });
+  const onChange = useCallback(selectedOption => {
+    if (readOnly || disabled) {
+      return;
+    }
+    let newValue = null;
+    if (selectedOption && hasMany) {
+      if (Array.isArray(selectedOption)) {
+        newValue = selectedOption.map(option_0 => option_0.value);
+      } else {
+        newValue = [];
+      }
+    } else if (selectedOption && !Array.isArray(selectedOption)) {
+      newValue = selectedOption.value;
+    }
+    if (typeof onChangeFromProps === 'function') {
+      onChangeFromProps(newValue);
+    }
+    setValue(newValue);
+  }, [readOnly, disabled, hasMany, setValue, onChangeFromProps]);
+  const styles = useMemo(() => mergeFieldStyles(field), [field]);
+  const isRequired = required || Array.isArray(allowedCollections) && allowedCollections.length > 0;
+  return /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsx(SelectInput, {
+      AfterInput: AfterInput,
+      BeforeInput: BeforeInput,
+      className: className,
+      Description: Description,
+      description: "Select the collection types this item can contain",
+      Error: Error,
+      filterOption: selectFilterOptions ? ({
+        value: optionValue
+      }) => selectFilterOptions?.some(option_1 => (typeof option_1 === 'string' ? option_1 : option_1.value) === optionValue) : undefined,
+      hasMany: hasMany,
+      isClearable: isClearable,
+      isSortable: isSortable,
+      Label: Label,
+      label: label,
+      localized: localized,
+      name: name,
+      onChange: onChange,
+      options: options,
+      path: path,
+      placeholder: placeholder,
+      readOnly: readOnly || disabled,
+      required: isRequired,
+      showError: showError,
+      style: styles,
+      value: value
+    })
+  });
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useCallback","useMemo","mergeFieldStyles","formatOptions","SelectInput","useField","useHierarchy","HierarchyTypeField","options","allSelectOptions","parentFieldName","props","field","name","admin","className","isClearable","isSortable","placeholder","hasMany","label","localized","required","onChange","onChangeFromProps","path","pathFromProps","readOnly","validate","allowedCollections","length","filter","option","value","some","c","slug","customComponents","AfterInput","BeforeInput","Description","Error","Label","disabled","selectFilterOptions","setValue","showError","potentiallyStalePath","selectedOption","newValue","Array","isArray","map","styles","isRequired","_jsx","description","filterOption","optionValue","undefined","style"],"sources":["../../../src/elements/HierarchyTypeField/index.tsx"],"sourcesContent":["'use client'\nimport type { Option, OptionObject, SelectFieldClientProps } from 'payload'\n\nimport React, { useCallback, useMemo } from 'react'\n\nimport type { ReactSelectAdapterProps } from '../ReactSelect/types.js'\n\nimport { mergeFieldStyles } from '../../fields/mergeFieldStyles.js'\nimport { formatOptions, SelectInput } from '../../fields/Select/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { useHierarchy } from '../../providers/Hierarchy/index.js'\n\ntype HierarchyTypeFieldProps = {\n  options: Option[]\n  parentFieldName: string\n} & SelectFieldClientProps\n\nexport const HierarchyTypeField: React.FC<HierarchyTypeFieldProps> = ({\n  options: allSelectOptions,\n  parentFieldName,\n  ...props\n}) => {\n  const {\n    field,\n    field: {\n      name,\n      admin: { className, isClearable = true, isSortable = true, placeholder } = {} as NonNullable<\n        SelectFieldClientProps['field']['admin']\n      >,\n      hasMany = false,\n      label,\n      localized,\n      required,\n    },\n    onChange: onChangeFromProps,\n    path: pathFromProps,\n    readOnly,\n    validate,\n  } = props\n\n  const { allowedCollections } = useHierarchy()\n\n  const options = useMemo(() => {\n    if (!allowedCollections || allowedCollections.length === 0) {\n      return formatOptions(allSelectOptions)\n    }\n\n    return formatOptions(\n      allSelectOptions.filter((option) => {\n        if (typeof option === 'object' && 'value' in option && option.value) {\n          return allowedCollections.some((c) => c.slug === option.value)\n        }\n        return true\n      }),\n    )\n  }, [allSelectOptions, allowedCollections])\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    disabled,\n    path,\n    selectFilterOptions,\n    setValue,\n    showError,\n    value,\n  } = useField({\n    potentiallyStalePath: pathFromProps,\n    validate,\n  })\n\n  const onChange: ReactSelectAdapterProps['onChange'] = useCallback(\n    (selectedOption: OptionObject | OptionObject[]) => {\n      if (readOnly || disabled) {\n        return\n      }\n\n      let newValue: null | string | string[] = null\n\n      if (selectedOption && hasMany) {\n        if (Array.isArray(selectedOption)) {\n          newValue = selectedOption.map((option) => option.value)\n        } else {\n          newValue = []\n        }\n      } else if (selectedOption && !Array.isArray(selectedOption)) {\n        newValue = selectedOption.value\n      }\n\n      if (typeof onChangeFromProps === 'function') {\n        onChangeFromProps(newValue)\n      }\n\n      setValue(newValue)\n    },\n    [readOnly, disabled, hasMany, setValue, onChangeFromProps],\n  )\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  const isRequired =\n    required || (Array.isArray(allowedCollections) && allowedCollections.length > 0)\n\n  return (\n    <div>\n      <SelectInput\n        AfterInput={AfterInput}\n        BeforeInput={BeforeInput}\n        className={className}\n        Description={Description}\n        description=\"Select the collection types this item can contain\"\n        Error={Error}\n        filterOption={\n          selectFilterOptions\n            ? ({ value: optionValue }) =>\n                selectFilterOptions?.some(\n                  (option) => (typeof option === 'string' ? option : option.value) === optionValue,\n                )\n            : undefined\n        }\n        hasMany={hasMany}\n        isClearable={isClearable}\n        isSortable={isSortable}\n        Label={Label}\n        label={label}\n        localized={localized}\n        name={name}\n        onChange={onChange}\n        options={options}\n        path={path}\n        placeholder={placeholder}\n        readOnly={readOnly || disabled}\n        required={isRequired}\n        showError={showError}\n        style={styles}\n        value={value as string | string[]}\n      />\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/HierarchyTypeField/index.server.d.ts

@@ -0,0 +1,9 @@
+import type { Option, SelectFieldServerProps } from 'payload';
+import React from 'react';
+type HierarchyTypeFieldServerProps = {
+    collectionOptions: Option[];
+    parentFieldName: string;
+} & SelectFieldServerProps;
+export declare const HierarchyTypeFieldServer: React.FC<HierarchyTypeFieldServerProps>;
+export {};
+//# sourceMappingURL=index.server.d.ts.map

package/dist/elements/HierarchyTypeField/index.server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.server.d.ts","sourceRoot":"","sources":["../../../src/elements/HierarchyTypeField/index.server.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAG7D,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,KAAK,6BAA6B,GAAG;IACnC,iBAAiB,EAAE,MAAM,EAAE,CAAA;IAC3B,eAAe,EAAE,MAAM,CAAA;CACxB,GAAG,sBAAsB,CAAA;AAE1B,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CA6B5E,CAAA"}

package/dist/elements/HierarchyTypeField/index.server.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
+import React from 'react';
+// eslint-disable-next-line payload/no-imports-from-exports-dir -- Server component must reference exports dir for proper client boundary
+import { HierarchyTypeField } from '../../exports/client/index.js';
+export const HierarchyTypeFieldServer = ({
+  clientField,
+  collectionOptions,
+  i18n,
+  parentFieldName,
+  path,
+  permissions,
+  readOnly
+}) => {
+  const translatedOptions = collectionOptions.map(option => {
+    if (typeof option === 'object' && 'label' in option) {
+      return {
+        ...option,
+        label: getTranslation(option.label, i18n)
+      };
+    }
+    return option;
+  });
+  return /*#__PURE__*/_jsx(HierarchyTypeField, {
+    field: clientField,
+    options: translatedOptions,
+    parentFieldName: parentFieldName,
+    path: path,
+    permissions: permissions,
+    readOnly: readOnly
+  });
+};
+//# sourceMappingURL=index.server.js.map

package/dist/elements/HierarchyTypeField/index.server.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.server.js","names":["getTranslation","React","HierarchyTypeField","HierarchyTypeFieldServer","clientField","collectionOptions","i18n","parentFieldName","path","permissions","readOnly","translatedOptions","map","option","label","_jsx","field","options"],"sources":["../../../src/elements/HierarchyTypeField/index.server.tsx"],"sourcesContent":["import type { Option, SelectFieldServerProps } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\n// eslint-disable-next-line payload/no-imports-from-exports-dir -- Server component must reference exports dir for proper client boundary\nimport { HierarchyTypeField } from '../../exports/client/index.js'\n\ntype HierarchyTypeFieldServerProps = {\n  collectionOptions: Option[]\n  parentFieldName: string\n} & SelectFieldServerProps\n\nexport const HierarchyTypeFieldServer: React.FC<HierarchyTypeFieldServerProps> = ({\n  clientField,\n  collectionOptions,\n  i18n,\n  parentFieldName,\n  path,\n  permissions,\n  readOnly,\n}) => {\n  const translatedOptions: Option[] = collectionOptions.map((option) => {\n    if (typeof option === 'object' && 'label' in option) {\n      return {\n        ...option,\n        label: getTranslation(option.label, i18n),\n      }\n    }\n    return option\n  })\n\n  return (\n    <HierarchyTypeField\n      field={clientField}\n      options={translatedOptions}\n      parentFieldName={parentFieldName}\n      path={path}\n      permissions={permissions}\n      readOnly={readOnly}\n    />\n  )\n}\n"],"mappings":";AAEA,SAASA,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB;AACA,SAASC,kBAAkB,QAAQ;AAOnC,OAAO,MAAMC,wBAAA,GAAoEA,CAAC;EAChFC,WAAW;EACXC,iBAAiB;EACjBC,IAAI;EACJC,eAAe;EACfC,IAAI;EACJC,WAAW;EACXC;AAAQ,CACT;EACC,MAAMC,iBAAA,GAA8BN,iBAAA,CAAkBO,GAAG,CAAEC,MAAA;IACzD,IAAI,OAAOA,MAAA,KAAW,YAAY,WAAWA,MAAA,EAAQ;MACnD,OAAO;QACL,GAAGA,MAAM;QACTC,KAAA,EAAOd,cAAA,CAAea,MAAA,CAAOC,KAAK,EAAER,IAAA;MACtC;IACF;IACA,OAAOO,MAAA;EACT;EAEA,oBACEE,IAAA,CAACb,kBAAA;IACCc,KAAA,EAAOZ,WAAA;IACPa,OAAA,EAASN,iBAAA;IACTJ,eAAA,EAAiBA,eAAA;IACjBC,IAAA,EAAMA,IAAA;IACNC,WAAA,EAAaA,WAAA;IACbC,QAAA,EAAUA;;AAGhB","ignoreList":[]}

package/dist/elements/IDLabel/index.css

@@ -0,0 +1,36 @@
+@layer payload-default {
+  .id-label {
+    --id-label-letter-spacing: -0.032px;
+
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacer-1);
+    height: var(--spacer-4);
+    padding: var(--spacer-1) var(--spacer-2);
+    background: var(--color-bg-secondary);
+    border-radius: var(--radius-medium);
+    font-family: var(--text-body-large-font-family);
+    font-size: var(--text-body-large-font-size);
+    font-weight: var(--text-body-large-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    letter-spacing: var(--id-label-letter-spacing);
+    width: fit-content;
+    white-space: nowrap;
+  }
+
+  .id-label__prefix {
+    color: var(--color-text-secondary);
+  }
+
+  .id-label__value {
+    color: var(--color-text);
+  }
+
+  .id-label__link {
+    color: var(--color-text);
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 export declare const IDLabel: React.FC<{
     className?: string;
     id: string;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/IDLabel/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AASrB,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CA0BjF,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/IDLabel/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAyCjF,CAAA"}

package/dist/elements/IDLabel/index.js

@@ -4,21 +4,21 @@ import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { formatAdminURL } from 'payload/shared';
 import React from 'react';
-import './index.scss';
 import { Link } from '../../elements/Link/index.js';
 import { useConfig } from '../../providers/Config/index.js';
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
 import { sanitizeID } from '../../utilities/sanitizeID.js';
 import { useDrawerDepth } from '../Drawer/index.js';
+import './index.css';
 const baseClass = 'id-label';
 export const IDLabel = t0 => {
-  const $ = _c(9);
+  const $ = _c(13);
   const {
     id,
     className,
     prefix: t1
   } = t0;
-  const prefix = t1 === undefined ? "ID:" : t1;
+  const prefix = t1 === undefined ? "ID" : t1;
   const {
     config: t2
   } = useConfig();
@@ -33,39 +33,76 @@ export const IDLabel = t0 => {
     globalSlug
   } = useDocumentInfo();
   const drawerDepth = useDrawerDepth();
-  const t4 = `/${collectionSlug ? `collections/${collectionSlug}` : `globals/${globalSlug}`}/${id}`;
+  let t4;
   let t5;
-  if ($[0] !== adminRoute || $[1] !== className || $[2] !== drawerDepth || $[3] !== id || $[4] !== prefix || $[5] !== t4) {
-    const docPath = formatAdminURL({
-      adminRoute,
-      path: t4
-    });
-    let t6;
-    if ($[7] !== className) {
-      t6 = [baseClass, className].filter(Boolean);
-      $[7] = className;
-      $[8] = t6;
-    } else {
-      t6 = $[8];
+  if ($[0] !== adminRoute || $[1] !== className || $[2] !== collectionSlug || $[3] !== drawerDepth || $[4] !== globalSlug || $[5] !== id || $[6] !== prefix) {
+    t5 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const sanitizedID = sanitizeID(id);
+      const shouldRenderLink = drawerDepth > 0 && (collectionSlug || globalSlug);
+      if (shouldRenderLink) {
+        const docPath = formatAdminURL({
+          adminRoute,
+          path: `/${collectionSlug ? `collections/${collectionSlug}` : `globals/${globalSlug}`}/${id}`
+        });
+        let t6;
+        if ($[9] !== className) {
+          t6 = [baseClass, className].filter(Boolean);
+          $[9] = className;
+          $[10] = t6;
+        } else {
+          t6 = $[10];
+        }
+        t5 = _jsxs("div", {
+          className: t6.join(" "),
+          title: id,
+          children: [_jsx("span", {
+            className: `${baseClass}__prefix`,
+            children: prefix
+          }), _jsx(Link, {
+            className: `${baseClass}__link`,
+            href: docPath,
+            children: sanitizedID
+          })]
+        });
+        break bb0;
+      }
+      let t6;
+      if ($[11] !== className) {
+        t6 = [baseClass, className].filter(Boolean);
+        $[11] = className;
+        $[12] = t6;
+      } else {
+        t6 = $[12];
+      }
+      t4 = _jsxs("div", {
+        className: t6.join(" "),
+        title: id,
+        children: [_jsx("span", {
+          className: `${baseClass}__prefix`,
+          children: prefix
+        }), _jsx("span", {
+          className: `${baseClass}__value`,
+          children: sanitizedID
+        })]
+      });
     }
-    t5 = _jsxs("div", {
-      className: t6.join(" "),
-      title: id,
-      children: [prefix, "\xA0", drawerDepth > 1 ? _jsx(Link, {
-        href: docPath,
-        children: sanitizeID(id)
-      }) : sanitizeID(id)]
-    });
     $[0] = adminRoute;
     $[1] = className;
-    $[2] = drawerDepth;
-    $[3] = id;
-    $[4] = prefix;
-    $[5] = t4;
-    $[6] = t5;
+    $[2] = collectionSlug;
+    $[3] = drawerDepth;
+    $[4] = globalSlug;
+    $[5] = id;
+    $[6] = prefix;
+    $[7] = t4;
+    $[8] = t5;
   } else {
-    t5 = $[6];
+    t4 = $[7];
+    t5 = $[8];
   }
-  return t5;
+  if (t5 !== Symbol.for("react.early_return_sentinel")) {
+    return t5;
+  }
+  return t4;
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","formatAdminURL","React","Link","useConfig","useDocumentInfo","sanitizeID","useDrawerDepth","baseClass","IDLabel","t0","$","id","className","prefix","t1","undefined","config","t2","routes","t3","admin","adminRoute","collectionSlug","globalSlug","drawerDepth","t4","t5","docPath","path","t6","filter","Boolean","_jsxs","join","title","children","_jsx","href"],"sources":["../../../src/elements/IDLabel/index.tsx"],"sourcesContent":["'use client'\nimport { formatAdminURL } from 'payload/shared'\nimport React from 'react'\n\nimport './index.scss'\nimport { Link } from '../../elements/Link/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { sanitizeID } from '../../utilities/sanitizeID.js'\nimport { useDrawerDepth } from '../Drawer/index.js'\n\nconst baseClass = 'id-label'\n\nexport const IDLabel: React.FC<{ className?: string; id: string; prefix?: string }> = ({\n  id,\n  className,\n  prefix = 'ID:',\n}) => {\n  const {\n    config: {\n      routes: { admin: adminRoute },\n    },\n  } = useConfig()\n\n  const { collectionSlug, globalSlug } = useDocumentInfo()\n  const drawerDepth = useDrawerDepth()\n\n  const docPath = formatAdminURL({\n    adminRoute,\n    path: `/${collectionSlug ? `collections/${collectionSlug}` : `globals/${globalSlug}`}/${id}`,\n  })\n\n  return (\n    <div className={[baseClass, className].filter(Boolean).join(' ')} title={id}>\n      {prefix}\n      &nbsp;\n      {drawerDepth > 1 ? <Link href={docPath}>{sanitizeID(id)}</Link> : sanitizeID(id)}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,OAAO;AACP,SAASC,IAAI,QAAQ;AACrB,SAASC,SAAS,QAAQ;AAC1B,SAASC,eAAe,QAAQ;AAChC,SAASC,UAAU,QAAQ;AAC3B,SAASC,cAAc,QAAQ;AAE/B,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,OAAA,GAAyEC,EAAA;EAAA,MAAAC,CAAA,GAAAX,EAAA;EAAC;IAAAY,EAAA;IAAAC,SAAA;IAAAC,MAAA,EAAAC;EAAA,IAAAL,EAItF;EADC,MAAAI,MAAA,GAAAC,EAAc,KAAAC,SAAA,GAAL,KAAK,GAAdD,EAAc;EAEd;IAAAE,MAAA,EAAAC;EAAA,IAIId,SAAA;EAHM;IAAAe,MAAA,EAAAC;EAAA,IAAAF,EAEP;EADS;IAAAG,KAAA,EAAAC;EAAA,IAAAF,EAAqB;EAIjC;IAAAG,cAAA;IAAAC;EAAA,IAAuCnB,eAAA;EACvC,MAAAoB,WAAA,GAAoBlB,cAAA;EAIZ,MAAAmB,EAAA,OAAIH,cAAA,GAAiB,eAAeA,cAAA,EAAgB,GAAG,WAAWC,UAAA,EAAY,IAAIZ,EAAA,EAAI;EAAA,IAAAe,EAAA;EAAA,IAAAhB,CAAA,QAAAW,UAAA,IAAAX,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAAc,WAAA,IAAAd,CAAA,QAAAC,EAAA,IAAAD,CAAA,QAAAG,MAAA,IAAAH,CAAA,QAAAe,EAAA;IAF9F,MAAAE,OAAA,GAAgB3B,cAAA;MAAAqB,UAAA;MAAAO,IAAA,EAERH;IAAsF,CAC9F;IAAA,IAAAI,EAAA;IAAA,IAAAnB,CAAA,QAAAE,SAAA;MAGkBiB,EAAA,IAAAtB,SAAA,EAAYK,SAAA,EAAAkB,MAAA,CAAAC,OAAkB;MAAArB,CAAA,MAAAE,SAAA;MAAAF,CAAA,MAAAmB,EAAA;IAAA;MAAAA,EAAA,GAAAnB,CAAA;IAAA;IAA9CgB,EAAA,GAAAM,KAAA,CAAC;MAAApB,SAAA,EAAeiB,EAA8B,CAAAI,IAAA,CAAc;MAAAC,KAAA,EAAavB,EAAA;MAAAwB,QAAA,GACtEtB,MAAA,EAAO,QAEPW,WAAA,IAAc,GAAIY,IAAA,CAAAlC,IAAA;QAAAmC,IAAA,EAAYV,OAAA;QAAAQ,QAAA,EAAU9B,UAAA,CAAWM,EAAA;MAAA,C,IAAcN,UAAA,CAAWM,EAAA;IAAA,C;;;;;;;;;;;SAH/Ee,E;CAMJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","formatAdminURL","React","Link","useConfig","useDocumentInfo","sanitizeID","useDrawerDepth","baseClass","IDLabel","t0","$","id","className","prefix","t1","undefined","config","t2","routes","t3","admin","adminRoute","collectionSlug","globalSlug","drawerDepth","t4","t5","Symbol","for","sanitizedID","shouldRenderLink","docPath","path","t6","filter","Boolean","_jsxs","join","title","children","_jsx","href"],"sources":["../../../src/elements/IDLabel/index.tsx"],"sourcesContent":["'use client'\nimport { formatAdminURL } from 'payload/shared'\nimport React from 'react'\n\nimport { Link } from '../../elements/Link/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { sanitizeID } from '../../utilities/sanitizeID.js'\nimport { useDrawerDepth } from '../Drawer/index.js'\nimport './index.css'\n\nconst baseClass = 'id-label'\n\nexport const IDLabel: React.FC<{ className?: string; id: string; prefix?: string }> = ({\n  id,\n  className,\n  prefix = 'ID',\n}) => {\n  const {\n    config: {\n      routes: { admin: adminRoute },\n    },\n  } = useConfig()\n\n  const { collectionSlug, globalSlug } = useDocumentInfo()\n  const drawerDepth = useDrawerDepth()\n\n  const sanitizedID = sanitizeID(id)\n\n  // Only render as link if we're inside a drawer and have document context\n  const shouldRenderLink = drawerDepth > 0 && (collectionSlug || globalSlug)\n\n  if (shouldRenderLink) {\n    const docPath = formatAdminURL({\n      adminRoute,\n      path: `/${collectionSlug ? `collections/${collectionSlug}` : `globals/${globalSlug}`}/${id}`,\n    })\n\n    return (\n      <div className={[baseClass, className].filter(Boolean).join(' ')} title={id}>\n        <span className={`${baseClass}__prefix`}>{prefix}</span>\n        <Link className={`${baseClass}__link`} href={docPath}>\n          {sanitizedID}\n        </Link>\n      </div>\n    )\n  }\n\n  return (\n    <div className={[baseClass, className].filter(Boolean).join(' ')} title={id}>\n      <span className={`${baseClass}__prefix`}>{prefix}</span>\n      <span className={`${baseClass}__value`}>{sanitizedID}</span>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,SAASC,IAAI,QAAQ;AACrB,SAASC,SAAS,QAAQ;AAC1B,SAASC,eAAe,QAAQ;AAChC,SAASC,UAAU,QAAQ;AAC3B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,OAAA,GAAyEC,EAAA;EAAA,MAAAC,CAAA,GAAAX,EAAA;EAAC;IAAAY,EAAA;IAAAC,SAAA;IAAAC,MAAA,EAAAC;EAAA,IAAAL,EAItF;EADC,MAAAI,MAAA,GAAAC,EAAa,KAAAC,SAAA,GAAJ,IAAI,GAAbD,EAAa;EAEb;IAAAE,MAAA,EAAAC;EAAA,IAIId,SAAA;EAHM;IAAAe,MAAA,EAAAC;EAAA,IAAAF,EAEP;EADS;IAAAG,KAAA,EAAAC;EAAA,IAAAF,EAAqB;EAIjC;IAAAG,cAAA;IAAAC;EAAA,IAAuCnB,eAAA;EACvC,MAAAoB,WAAA,GAAoBlB,cAAA;EAAA,IAAAmB,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAhB,CAAA,QAAAW,UAAA,IAAAX,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAAY,cAAA,IAAAZ,CAAA,QAAAc,WAAA,IAAAd,CAAA,QAAAa,UAAA,IAAAb,CAAA,QAAAC,EAAA,IAAAD,CAAA,QAAAG,MAAA;IAchBa,EAAA,GAAAC,MAAA,CAAAC,GAAA,8B;;MAZJ,MAAAC,WAAA,GAAoBxB,UAAA,CAAWM,EAAA;MAG/B,MAAAmB,gBAAA,GAAyBN,WAAA,IAAc,KAAMF,cAAA,IAAkBC,UAAS;MAAA,IAEpEO,gBAAA;QACF,MAAAC,OAAA,GAAgB/B,cAAA;UAAAqB,UAAA;UAAAW,IAAA,EAER,IAAIV,cAAA,GAAiB,eAAeA,cAAA,EAAgB,GAAG,WAAWC,UAAA,EAAY,IAAIZ,EAAA;QAAI,CAC9F;QAAA,IAAAsB,EAAA;QAAA,IAAAvB,CAAA,QAAAE,SAAA;UAGkBqB,EAAA,IAAA1B,SAAA,EAAYK,SAAA,EAAAsB,MAAA,CAAAC,OAAkB;UAAAzB,CAAA,MAAAE,SAAA;UAAAF,CAAA,OAAAuB,EAAA;QAAA;UAAAA,EAAA,GAAAvB,CAAA;QAAA;QAA9CgB,EAAA,GAAAU,KAAA,CAAC;UAAAxB,SAAA,EAAeqB,EAA8B,CAAAI,IAAA,CAAc;UAAAC,KAAA,EAAa3B,EAAA;UAAA4B,QAAA,GACvEC,IAAA,CAAC;YAAA5B,SAAA,EAAgB,GAAAL,SAAA,UAAsB;YAAAgC,QAAA,EAAG1B;UAAA,C,GAC1C2B,IAAA,CAAAtC,IAAA;YAAAU,SAAA,EAAiB,GAAAL,SAAA,QAAoB;YAAAkC,IAAA,EAAQV,OAAA;YAAAQ,QAAA,EAC1CV;UAAA,C;;;;;;QAOSI,EAAA,IAAA1B,SAAA,EAAYK,SAAA,EAAAsB,MAAA,CAAAC,OAAkB;QAAAzB,CAAA,OAAAE,SAAA;QAAAF,CAAA,OAAAuB,EAAA;MAAA;QAAAA,EAAA,GAAAvB,CAAA;MAAA;MAA9Ce,EAAA,GAAAW,KAAA,CAAC;QAAAxB,SAAA,EAAeqB,EAA8B,CAAAI,IAAA,CAAc;QAAAC,KAAA,EAAa3B,EAAA;QAAA4B,QAAA,GACvEC,IAAA,CAAC;UAAA5B,SAAA,EAAgB,GAAAL,SAAA,UAAsB;UAAAgC,QAAA,EAAG1B;QAAA,C,GAC1C2B,IAAA,CAAC;UAAA5B,SAAA,EAAgB,GAAAL,SAAA,SAAqB;UAAAgC,QAAA,EAAGV;QAAA,C;;;;;;;;;;;;;;;;;;;SAF3CJ,E;CAKJ","ignoreList":[]}

package/dist/elements/IframeLoader/index.css

@@ -0,0 +1,31 @@
+@layer payload-default {
+  .iframe-loader__container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    flex: 1;
+    min-height: 0;
+  }
+
+  .iframe-loader__loading {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+    background-color: var(--color-bg);
+  }
+
+  .iframe-loader__iframe {
+    background-color: var(--color-bg);
+    border: 0;
+    width: 100%;
+    height: 100%;
+    transform-origin: top left;
+  }
+
+  .iframe-loader__iframe--is-loading {
+    opacity: 0;
+  }
+}

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

@@ -1,12 +1,9 @@
-import './index.scss';
+import './index.css';
 export type IframeLoaderProps = {
     ref?: React.Ref<HTMLIFrameElement>;
 } & React.IframeHTMLAttributes<HTMLIFrameElement>;
 /**
  * Loads an `iframe` element with the given source behind a loading indicator.
- * Notable behaviors:
- * 1. Only show if the load takes longer than x ms.
- * 2. Once shown, force it to be visible for at least x ms to avoid flickering, even if the iframe loads before then.
  */
 export declare const IframeLoader: React.FC<IframeLoaderProps>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/IframeLoader/index.tsx"],"names":[],"mappings":"AAGA,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;CACnC,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAA;AASjD;;;;;GAKG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyGpD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/IframeLoader/index.tsx"],"names":[],"mappings":"AAGA,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;CACnC,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAA;AAIjD;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAsCpD,CAAA"}

package/dist/elements/IframeLoader/index.js

@@ -1,17 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { ShimmerEffect } from '../ShimmerEffect/index.js';
-import './index.scss';
-const shimmerDelays = {
-  minVisible: 300,
-  show: 1000
-};
+import { useCallback, useEffect, useState } from 'react';
+import { DelayedSpinner } from '../DelayedSpinner/index.js';
+import './index.css';
 const baseClass = 'iframe-loader';
 /**
  * Loads an `iframe` element with the given source behind a loading indicator.
- * Notable behaviors:
- * 1. Only show if the load takes longer than x ms.
- * 2. Once shown, force it to be visible for at least x ms to avoid flickering, even if the iframe loads before then.
  */
 export const IframeLoader = ({
   onLoad: onLoadFromProps,
@@ -20,75 +13,20 @@ export const IframeLoader = ({
   ...rest
 }) => {
   const [isLoading, setIsLoading] = useState(Boolean(src));
-  const [showShimmer, setShowShimmer] = useState(false);
-  const shimmerShownAtRef = useRef(0);
-  const showTimerRef = useRef(null);
-  const hideTimerRef = useRef(null);
-  const clearTimers = useCallback(() => {
-    if (showTimerRef.current) {
-      clearTimeout(showTimerRef.current);
-      showTimerRef.current = null;
-    }
-    if (hideTimerRef.current) {
-      clearTimeout(hideTimerRef.current);
-      hideTimerRef.current = null;
-    }
-  }, []);
   useEffect(() => {
-    clearTimers();
     setIsLoading(Boolean(src));
-    setShowShimmer(false);
-    shimmerShownAtRef.current = 0;
-    if (!src) {
-      return;
-    }
-    showTimerRef.current = setTimeout(() => {
-      setShowShimmer(true);
-      shimmerShownAtRef.current = Date.now();
-      showTimerRef.current = null;
-    }, shimmerDelays.show);
-    return () => {
-      if (showTimerRef.current) {
-        clearTimeout(showTimerRef.current);
-        showTimerRef.current = null;
-      }
-    };
-  }, [clearTimers, src]);
-  useEffect(() => {
-    return () => {
-      clearTimers();
-    };
-  }, [clearTimers]);
+  }, [src]);
   const onLoad = useCallback(e => {
     if (typeof onLoadFromProps === 'function') {
       onLoadFromProps(e);
     }
     setIsLoading(false);
-    if (showTimerRef.current) {
-      clearTimeout(showTimerRef.current);
-      showTimerRef.current = null;
-    }
-    if (!showShimmer) {
-      return;
-    }
-    const elapsed = Date.now() - shimmerShownAtRef.current;
-    const remainingVisible = Math.max(0, shimmerDelays.minVisible - elapsed);
-    if (remainingVisible === 0) {
-      setShowShimmer(false);
-      return;
-    }
-    hideTimerRef.current = setTimeout(() => {
-      setShowShimmer(false);
-      hideTimerRef.current = null;
-    }, remainingVisible);
-  }, [showShimmer, onLoadFromProps]);
+  }, [onLoadFromProps]);
   return /*#__PURE__*/_jsxs("div", {
     className: `${baseClass}__container`,
-    children: [showShimmer && /*#__PURE__*/_jsx(ShimmerEffect, {
-      "aria-live": "polite",
-      height: "100%",
-      role: "status",
-      transparent: true
+    children: [/*#__PURE__*/_jsx(DelayedSpinner, {
+      baseClass: baseClass,
+      isLoading: isLoading
     }), /*#__PURE__*/_jsx("iframe", {
       ...rest,
       className: [`${baseClass}__iframe`, isLoading && `${baseClass}__iframe--is-loading`].filter(Boolean).join(' '),

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useCallback","useEffect","useRef","useState","ShimmerEffect","shimmerDelays","minVisible","show","baseClass","IframeLoader","onLoad","onLoadFromProps","src","title","rest","isLoading","setIsLoading","Boolean","showShimmer","setShowShimmer","shimmerShownAtRef","showTimerRef","hideTimerRef","clearTimers","current","clearTimeout","setTimeout","Date","now","e","elapsed","remainingVisible","Math","max","_jsxs","className","_jsx","height","role","transparent","filter","join","sandbox"],"sources":["../../../src/elements/IframeLoader/index.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react'\n\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\nimport './index.scss'\n\nexport type IframeLoaderProps = {\n  ref?: React.Ref<HTMLIFrameElement>\n} & React.IframeHTMLAttributes<HTMLIFrameElement>\n\nconst shimmerDelays = {\n  minVisible: 300,\n  show: 1000,\n}\n\nconst baseClass = 'iframe-loader'\n\n/**\n * Loads an `iframe` element with the given source behind a loading indicator.\n * Notable behaviors:\n * 1. Only show if the load takes longer than x ms.\n * 2. Once shown, force it to be visible for at least x ms to avoid flickering, even if the iframe loads before then.\n */\nexport const IframeLoader: React.FC<IframeLoaderProps> = ({\n  onLoad: onLoadFromProps,\n  src,\n  title,\n  ...rest\n}) => {\n  const [isLoading, setIsLoading] = useState(Boolean(src))\n  const [showShimmer, setShowShimmer] = useState(false)\n  const shimmerShownAtRef = useRef(0)\n\n  const showTimerRef = useRef<null | ReturnType<typeof setTimeout>>(null)\n\n  const hideTimerRef = useRef<null | ReturnType<typeof setTimeout>>(null)\n\n  const clearTimers = useCallback(() => {\n    if (showTimerRef.current) {\n      clearTimeout(showTimerRef.current)\n      showTimerRef.current = null\n    }\n\n    if (hideTimerRef.current) {\n      clearTimeout(hideTimerRef.current)\n      hideTimerRef.current = null\n    }\n  }, [])\n\n  useEffect(() => {\n    clearTimers()\n    setIsLoading(Boolean(src))\n    setShowShimmer(false)\n    shimmerShownAtRef.current = 0\n\n    if (!src) {\n      return\n    }\n\n    showTimerRef.current = setTimeout(() => {\n      setShowShimmer(true)\n      shimmerShownAtRef.current = Date.now()\n      showTimerRef.current = null\n    }, shimmerDelays.show)\n\n    return () => {\n      if (showTimerRef.current) {\n        clearTimeout(showTimerRef.current)\n        showTimerRef.current = null\n      }\n    }\n  }, [clearTimers, src])\n\n  useEffect(() => {\n    return () => {\n      clearTimers()\n    }\n  }, [clearTimers])\n\n  const onLoad = useCallback<React.IframeHTMLAttributes<HTMLIFrameElement>['onLoad']>(\n    (e) => {\n      if (typeof onLoadFromProps === 'function') {\n        onLoadFromProps(e)\n      }\n\n      setIsLoading(false)\n\n      if (showTimerRef.current) {\n        clearTimeout(showTimerRef.current)\n        showTimerRef.current = null\n      }\n\n      if (!showShimmer) {\n        return\n      }\n\n      const elapsed = Date.now() - shimmerShownAtRef.current\n      const remainingVisible = Math.max(0, shimmerDelays.minVisible - elapsed)\n\n      if (remainingVisible === 0) {\n        setShowShimmer(false)\n        return\n      }\n\n      hideTimerRef.current = setTimeout(() => {\n        setShowShimmer(false)\n        hideTimerRef.current = null\n      }, remainingVisible)\n    },\n    [showShimmer, onLoadFromProps],\n  )\n\n  return (\n    <div className={`${baseClass}__container`}>\n      {showShimmer && <ShimmerEffect aria-live=\"polite\" height=\"100%\" role=\"status\" transparent />}\n      <iframe\n        {...rest}\n        className={[`${baseClass}__iframe`, isLoading && `${baseClass}__iframe--is-loading`]\n          .filter(Boolean)\n          .join(' ')}\n        onLoad={onLoad}\n        // eslint-disable-next-line\n        sandbox=\"allow-same-origin allow-scripts allow-forms allow-popups allow-modals allow-downloads\"\n        src={src}\n        title={title}\n      />\n    </div>\n  )\n}\n"],"mappings":";AAAA,SAASA,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ;AAEzD,SAASC,aAAa,QAAQ;AAC9B,OAAO;AAMP,MAAMC,aAAA,GAAgB;EACpBC,UAAA,EAAY;EACZC,IAAA,EAAM;AACR;AAEA,MAAMC,SAAA,GAAY;AAElB;;;;;;AAMA,OAAO,MAAMC,YAAA,GAA4CA,CAAC;EACxDC,MAAA,EAAQC,eAAe;EACvBC,GAAG;EACHC,KAAK;EACL,GAAGC;AAAA,CACJ;EACC,MAAM,CAACC,SAAA,EAAWC,YAAA,CAAa,GAAGb,QAAA,CAASc,OAAA,CAAQL,GAAA;EACnD,MAAM,CAACM,WAAA,EAAaC,cAAA,CAAe,GAAGhB,QAAA,CAAS;EAC/C,MAAMiB,iBAAA,GAAoBlB,MAAA,CAAO;EAEjC,MAAMmB,YAAA,GAAenB,MAAA,CAA6C;EAElE,MAAMoB,YAAA,GAAepB,MAAA,CAA6C;EAElE,MAAMqB,WAAA,GAAcvB,WAAA,CAAY;IAC9B,IAAIqB,YAAA,CAAaG,OAAO,EAAE;MACxBC,YAAA,CAAaJ,YAAA,CAAaG,OAAO;MACjCH,YAAA,CAAaG,OAAO,GAAG;IACzB;IAEA,IAAIF,YAAA,CAAaE,OAAO,EAAE;MACxBC,YAAA,CAAaH,YAAA,CAAaE,OAAO;MACjCF,YAAA,CAAaE,OAAO,GAAG;IACzB;EACF,GAAG,EAAE;EAELvB,SAAA,CAAU;IACRsB,WAAA;IACAP,YAAA,CAAaC,OAAA,CAAQL,GAAA;IACrBO,cAAA,CAAe;IACfC,iBAAA,CAAkBI,OAAO,GAAG;IAE5B,IAAI,CAACZ,GAAA,EAAK;MACR;IACF;IAEAS,YAAA,CAAaG,OAAO,GAAGE,UAAA,CAAW;MAChCP,cAAA,CAAe;MACfC,iBAAA,CAAkBI,OAAO,GAAGG,IAAA,CAAKC,GAAG;MACpCP,YAAA,CAAaG,OAAO,GAAG;IACzB,GAAGnB,aAAA,CAAcE,IAAI;IAErB,OAAO;MACL,IAAIc,YAAA,CAAaG,OAAO,EAAE;QACxBC,YAAA,CAAaJ,YAAA,CAAaG,OAAO;QACjCH,YAAA,CAAaG,OAAO,GAAG;MACzB;IACF;EACF,GAAG,CAACD,WAAA,EAAaX,GAAA,CAAI;EAErBX,SAAA,CAAU;IACR,OAAO;MACLsB,WAAA;IACF;EACF,GAAG,CAACA,WAAA,CAAY;EAEhB,MAAMb,MAAA,GAASV,WAAA,CACZ6B,CAAA;IACC,IAAI,OAAOlB,eAAA,KAAoB,YAAY;MACzCA,eAAA,CAAgBkB,CAAA;IAClB;IAEAb,YAAA,CAAa;IAEb,IAAIK,YAAA,CAAaG,OAAO,EAAE;MACxBC,YAAA,CAAaJ,YAAA,CAAaG,OAAO;MACjCH,YAAA,CAAaG,OAAO,GAAG;IACzB;IAEA,IAAI,CAACN,WAAA,EAAa;MAChB;IACF;IAEA,MAAMY,OAAA,GAAUH,IAAA,CAAKC,GAAG,KAAKR,iBAAA,CAAkBI,OAAO;IACtD,MAAMO,gBAAA,GAAmBC,IAAA,CAAKC,GAAG,CAAC,GAAG5B,aAAA,CAAcC,UAAU,GAAGwB,OAAA;IAEhE,IAAIC,gBAAA,KAAqB,GAAG;MAC1BZ,cAAA,CAAe;MACf;IACF;IAEAG,YAAA,CAAaE,OAAO,GAAGE,UAAA,CAAW;MAChCP,cAAA,CAAe;MACfG,YAAA,CAAaE,OAAO,GAAG;IACzB,GAAGO,gBAAA;EACL,GACA,CAACb,WAAA,EAAaP,eAAA,CAAgB;EAGhC,oBACEuB,KAAA,CAAC;IAAIC,SAAA,EAAW,GAAG3B,SAAA,aAAsB;eACtCU,WAAA,iBAAekB,IAAA,CAAChC,aAAA;MAAc,aAAU;MAASiC,MAAA,EAAO;MAAOC,IAAA,EAAK;MAASC,WAAW;qBACzFH,IAAA,CAAC;MACE,GAAGtB,IAAI;MACRqB,SAAA,EAAW,CAAC,GAAG3B,SAAA,UAAmB,EAAEO,SAAA,IAAa,GAAGP,SAAA,sBAA+B,CAAC,CACjFgC,MAAM,CAACvB,OAAA,EACPwB,IAAI,CAAC;MACR/B,MAAA,EAAQA,MAAA;MACR;MACAgC,OAAA,EAAQ;MACR9B,GAAA,EAAKA,GAAA;MACLC,KAAA,EAAOA;;;AAIf","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useCallback","useEffect","useState","DelayedSpinner","baseClass","IframeLoader","onLoad","onLoadFromProps","src","title","rest","isLoading","setIsLoading","Boolean","e","_jsxs","className","_jsx","filter","join","sandbox"],"sources":["../../../src/elements/IframeLoader/index.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react'\n\nimport { DelayedSpinner } from '../DelayedSpinner/index.js'\nimport './index.css'\n\nexport type IframeLoaderProps = {\n  ref?: React.Ref<HTMLIFrameElement>\n} & React.IframeHTMLAttributes<HTMLIFrameElement>\n\nconst baseClass = 'iframe-loader'\n\n/**\n * Loads an `iframe` element with the given source behind a loading indicator.\n */\nexport const IframeLoader: React.FC<IframeLoaderProps> = ({\n  onLoad: onLoadFromProps,\n  src,\n  title,\n  ...rest\n}) => {\n  const [isLoading, setIsLoading] = useState(Boolean(src))\n\n  useEffect(() => {\n    setIsLoading(Boolean(src))\n  }, [src])\n\n  const onLoad = useCallback<React.IframeHTMLAttributes<HTMLIFrameElement>['onLoad']>(\n    (e) => {\n      if (typeof onLoadFromProps === 'function') {\n        onLoadFromProps(e)\n      }\n      setIsLoading(false)\n    },\n    [onLoadFromProps],\n  )\n\n  return (\n    <div className={`${baseClass}__container`}>\n      <DelayedSpinner baseClass={baseClass} isLoading={isLoading} />\n      <iframe\n        {...rest}\n        className={[`${baseClass}__iframe`, isLoading && `${baseClass}__iframe--is-loading`]\n          .filter(Boolean)\n          .join(' ')}\n        onLoad={onLoad}\n        // eslint-disable-next-line\n        sandbox=\"allow-same-origin allow-scripts allow-forms allow-popups allow-modals allow-downloads\"\n        src={src}\n        title={title}\n      />\n    </div>\n  )\n}\n"],"mappings":";AAAA,SAASA,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ;AAEjD,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAMP,MAAMC,SAAA,GAAY;AAElB;;;AAGA,OAAO,MAAMC,YAAA,GAA4CA,CAAC;EACxDC,MAAA,EAAQC,eAAe;EACvBC,GAAG;EACHC,KAAK;EACL,GAAGC;AAAA,CACJ;EACC,MAAM,CAACC,SAAA,EAAWC,YAAA,CAAa,GAAGV,QAAA,CAASW,OAAA,CAAQL,GAAA;EAEnDP,SAAA,CAAU;IACRW,YAAA,CAAaC,OAAA,CAAQL,GAAA;EACvB,GAAG,CAACA,GAAA,CAAI;EAER,MAAMF,MAAA,GAASN,WAAA,CACZc,CAAA;IACC,IAAI,OAAOP,eAAA,KAAoB,YAAY;MACzCA,eAAA,CAAgBO,CAAA;IAClB;IACAF,YAAA,CAAa;EACf,GACA,CAACL,eAAA,CAAgB;EAGnB,oBACEQ,KAAA,CAAC;IAAIC,SAAA,EAAW,GAAGZ,SAAA,aAAsB;4BACvCa,IAAA,CAACd,cAAA;MAAeC,SAAA,EAAWA,SAAA;MAAWO,SAAA,EAAWA;qBACjDM,IAAA,CAAC;MACE,GAAGP,IAAI;MACRM,SAAA,EAAW,CAAC,GAAGZ,SAAA,UAAmB,EAAEO,SAAA,IAAa,GAAGP,SAAA,sBAA+B,CAAC,CACjFc,MAAM,CAACL,OAAA,EACPM,IAAI,CAAC;MACRb,MAAA,EAAQA,MAAA;MACR;MACAc,OAAA,EAAQ;MACRZ,GAAA,EAAKA,GAAA;MACLC,KAAA,EAAOA;;;AAIf","ignoreList":[]}

package/dist/elements/ItemsDrawer/ItemSearch/index.css

@@ -0,0 +1,56 @@
+@layer payload-default {
+  .item-search {
+    position: sticky;
+    top: 0;
+    display: flex;
+    width: 100%;
+    align-items: center;
+    z-index: 1;
+    padding: var(--spacer-2-5);
+    gap: var(--spacer-2);
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+
+    .icon--search {
+      flex-shrink: 0;
+      width: var(--spacer-3);
+      height: var(--spacer-3);
+      color: var(--color-icon-secondary);
+    }
+  }
+
+  .item-search__input {
+    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);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+    width: 100%;
+    border: var(--stroke-width-small) solid transparent;
+    border-radius: var(--field-border-radius);
+    background: var(--color-bg-secondary);
+    color: var(--color-text);
+    height: var(--spacer-4);
+    padding: 0 var(--spacer-2-5);
+    -webkit-appearance: none;
+
+    &::placeholder {
+      color: var(--color-text-tertiary);
+    }
+
+    &:hover {
+      border-color: var(--color-border);
+    }
+
+    &:focus,
+    &:focus-within {
+      border-color: var(--accessibility-focus-color);
+      outline: 0;
+    }
+
+    &:disabled {
+      background: transparent;
+      border-color: var(--color-border);
+      color: var(--color-text-tertiary);
+    }
+  }
+}

package/dist/elements/ItemsDrawer/ItemSearch/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 export type Props = {
     readonly placeholder?: string;
     readonly setSearchTerm: (term: string) => void;

package/dist/elements/ItemsDrawer/ItemSearch/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/ItemsDrawer/ItemSearch/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAgB,MAAM,OAAO,CAAA;AAGpC,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;IAC7B,QAAQ,CAAC,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CAC/C,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAwBtC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/ItemsDrawer/ItemSearch/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAgB,MAAM,OAAO,CAAA;AAGpC,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;IAC7B,QAAQ,CAAC,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CAC/C,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAwBtC,CAAA"}