@payloadcms/ui 3.0.0-canary.cee5702 → 3.0.0-canary.e14c80d

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ErrorPill/index.tsx"],"sourcesContent":["'use client'\nimport type { I18nClient } from '@payloadcms/translations'\n\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'error-pill'\n\nexport type ErrorPillProps = {\n  className?: string\n  count: number\n  i18n: I18nClient\n  withMessage?: boolean\n}\n\nexport const ErrorPill: React.FC<ErrorPillProps> = (props) => {\n  const { className, count, i18n, withMessage } = props\n  const lessThan3Chars = !withMessage && count < 99\n\n  const classes = [baseClass, lessThan3Chars && `${baseClass}--fixed-width`, className && className]\n    .filter(Boolean)\n    .join(' ')\n\n  if (count === 0) return null\n\n  return (\n    <div className={classes}>\n      <div className={`${baseClass}__content`}>\n        <span className={`${baseClass}__count`}>{count}</span>\n        {withMessage && ` ${count > 1 ? i18n.t('general:errors') : i18n.t('general:error')}`}\n      </div>\n    </div>\n  )\n}\n"],"names":["React","baseClass","ErrorPill","props","className","count","i18n","withMessage","lessThan3Chars","classes","filter","Boolean","join","div","span","t"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAGA,OAAOA,WAAW,QAAO;AAIzB,MAAMC,YAAY;AASlB,OAAO,MAAMC,YAAsC,CAACC;IAClD,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGJ;IAChD,MAAMK,iBAAiB,CAACD,eAAeF,QAAQ;IAE/C,MAAMI,UAAU;QAACR;QAAWO,kBAAkB,CAAC,EAAEP,UAAU,aAAa,CAAC;QAAEG,aAAaA;KAAU,CAC/FM,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,IAAIP,UAAU,GAAG,OAAO;IAExB,qBACE,KAACQ;QAAIT,WAAWK;kBACd,cAAA,MAACI;YAAIT,WAAW,CAAC,EAAEH,UAAU,SAAS,CAAC;;8BACrC,KAACa;oBAAKV,WAAW,CAAC,EAAEH,UAAU,OAAO,CAAC;8BAAGI;;gBACxCE,eAAe,CAAC,CAAC,EAAEF,QAAQ,IAAIC,KAAKS,CAAC,CAAC,oBAAoBT,KAAKS,CAAC,CAAC,iBAAiB,CAAC;;;;AAI5F,EAAC"}
+{"version":3,"sources":["../../../src/elements/ErrorPill/index.tsx"],"sourcesContent":["'use client'\nimport type { I18nClient } from '@payloadcms/translations'\n\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'error-pill'\n\nexport type ErrorPillProps = {\n  className?: string\n  count: number\n  i18n: I18nClient\n  withMessage?: boolean\n}\n\nexport const ErrorPill: React.FC<ErrorPillProps> = (props) => {\n  const { className, count, i18n, withMessage } = props\n  const lessThan3Chars = !withMessage && count < 99\n\n  const classes = [baseClass, lessThan3Chars && `${baseClass}--fixed-width`, className && className]\n    .filter(Boolean)\n    .join(' ')\n\n  if (count === 0) return null\n\n  return (\n    <div className={classes}>\n      <div className={`${baseClass}__content`}>\n        <span className={`${baseClass}__count`}>{count}</span>\n        {withMessage && ` ${count > 1 ? i18n.t('general:errors') : i18n.t('general:error')}`}\n      </div>\n    </div>\n  )\n}\n"],"names":["React","baseClass","ErrorPill","props","className","count","i18n","withMessage","lessThan3Chars","classes","filter","Boolean","join","div","span","t"],"mappings":"AAAA;;AAGA,OAAOA,WAAW,QAAO;AAEzB,OAAO,eAAc;AAErB,MAAMC,YAAY;AASlB,OAAO,MAAMC,YAAsC,CAACC;IAClD,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGJ;IAChD,MAAMK,iBAAiB,CAACD,eAAeF,QAAQ;IAE/C,MAAMI,UAAU;QAACR;QAAWO,kBAAkB,CAAC,EAAEP,UAAU,aAAa,CAAC;QAAEG,aAAaA;KAAU,CAC/FM,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,IAAIP,UAAU,GAAG,OAAO;IAExB,qBACE,KAACQ;QAAIT,WAAWK;kBACd,cAAA,MAACI;YAAIT,WAAW,CAAC,EAAEH,UAAU,SAAS,CAAC;;8BACrC,KAACa;oBAAKV,WAAW,CAAC,EAAEH,UAAU,OAAO,CAAC;8BAAGI;;gBACxCE,eAAe,CAAC,CAAC,EAAEF,QAAQ,IAAIC,KAAKS,CAAC,CAAC,oBAAoBT,KAAKS,CAAC,CAAC,iBAAiB,CAAC;;;;AAI5F,EAAC"}

package/dist/elements/ErrorPill/index.scss

@@ -14,6 +14,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  background: var(--theme-error-300);
+  color: var(--theme-error-950);
 
   &--fixed-width {
     width: 18px;
@@ -27,17 +29,3 @@
     margin-left: 0.5px;
   }
 }
-
-html[data-theme='light'] {
-  .error-pill {
-    background: var(--theme-error-250);
-    color: var(--theme-error-750);
-  }
-}
-
-html[data-theme='dark'] {
-  .error-pill {
-    background: var(--theme-error-500);
-    color: var(--color-base-1000);
-  }
-}

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

@@ -1,10 +1,14 @@
-import type { FieldWithPath } from 'payload/types';
-import React from 'react';
-import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js';
+import type { ClientField, FieldWithPath } from 'payload';
+import React, { type JSX } from 'react';
 import './index.scss';
 export type FieldSelectProps = {
-    fieldMap: FieldMap;
-    setSelected: (fields: FieldWithPath[]) => void;
+    readonly fields: ClientField[];
+    readonly setSelected: (fields: FieldWithPath[]) => void;
 };
+export declare const combineLabel: ({ customLabel, field, prefix, }: {
+    customLabel?: string;
+    field?: ClientField;
+    prefix?: JSX.Element | string;
+}) => JSX.Element;
 export declare const FieldSelect: React.FC<FieldSelectProps>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FieldSelect/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAElD,OAAO,KAAuC,MAAM,OAAO,CAAA;AAE3D,OAAO,KAAK,EAAE,QAAQ,EAAe,MAAM,yDAAyD,CAAA;AAOpG,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,QAAQ,CAAA;IAClB,WAAW,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,KAAK,IAAI,CAAA;CAC/C,CAAA;AAiHD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgDlD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FieldSelect/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAmB,MAAM,SAAS,CAAA;AAG1E,OAAO,KAAK,EAAE,EAAY,KAAK,GAAG,EAAY,MAAM,OAAO,CAAA;AAQ3D,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,QAAQ,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,KAAK,IAAI,CAAA;CACxD,CAAA;AAED,eAAO,MAAM,YAAY,oCAItB;IACD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAA;CAC9B,KAAG,GAAG,CAAC,OA6CP,CAAA;AAqED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgDlD,CAAA"}

package/dist/elements/FieldSelect/index.js

@@ -1,19 +1,30 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fieldAffectsData, fieldHasSubFields } from 'payload/shared';
 import React, { Fragment, useState } from 'react';
-import { FieldLabel } from '../../forms/FieldLabel/index.js';
+import { FieldLabel } from '../../fields/FieldLabel/index.js';
 import { useForm } from '../../forms/Form/context.js';
-import { createNestedClientFieldPath } from '../../forms/Form/createNestedFieldPath.js';
+import { createNestedClientFieldPath } from '../../forms/Form/createNestedClientFieldPath.js';
+import { RenderComponent } from '../../providers/Config/RenderComponent.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { ReactSelect } from '../ReactSelect/index.js';
+import './index.scss';
 const baseClass = 'field-select';
-const combineLabel = ({ customLabel, field, prefix })=>{
-    const CustomLabelToRender = field && 'CustomLabel' in field.fieldComponentProps && field.fieldComponentProps.CustomLabel !== undefined ? field.fieldComponentProps.CustomLabel : null;
-    const DefaultLabelToRender = field && 'label' in field.fieldComponentProps && field.fieldComponentProps.label ? /*#__PURE__*/ _jsx(FieldLabel, {
-        label: field.fieldComponentProps.label,
-        ...field.fieldComponentProps.labelProps || {}
-    }) : null;
-    const LabelToRender = CustomLabelToRender || DefaultLabelToRender || customLabel;
+export const combineLabel = ({ customLabel, field, prefix })=>{
+    const CustomLabelToRender = field?.admin?.components && 'Label' in field.admin.components && field?.admin?.components?.Label !== undefined ? field.admin.components.Label : null;
+    const DefaultLabelToRender = field && 'label' in field && field.label ? {
+        type: 'client',
+        Component: FieldLabel,
+        props: {
+            Label: field.admin?.components && 'Label' in field.admin.components ? field.admin?.components?.Label : null,
+            label: field.label
+        }
+    } : null;
+    const LabelToRender = CustomLabelToRender || DefaultLabelToRender || {
+        type: 'client',
+        Component: null,
+        RenderedComponent: customLabel
+    };
     if (!LabelToRender) return null;
     return /*#__PURE__*/ _jsxs(Fragment, {
         children: [
@@ -32,26 +43,27 @@ const combineLabel = ({ customLabel, field, prefix })=>{
                 style: {
                     display: 'inline-block'
                 },
-                children: LabelToRender
+                children: /*#__PURE__*/ _jsx(RenderComponent, {
+                    mappedComponent: LabelToRender
+                })
             })
         ]
     });
 };
-const reduceFields = ({ fieldMap, labelPrefix = null, path = '' })=>{
-    if (!fieldMap) {
+const reduceFields = ({ fields, labelPrefix = null, path = '' })=>{
+    if (!fields) {
         return [];
     }
-    return fieldMap?.reduce((fieldsToUse, field)=>{
-        const { isFieldAffectingData } = field;
+    return fields?.reduce((fieldsToUse, field)=>{
         // escape for a variety of reasons
-        if (isFieldAffectingData && (field.disableBulkEdit || field.unique || field.isHidden || 'readOnly' in field.fieldComponentProps && field.fieldComponentProps.readOnly)) {
+        if (fieldAffectsData(field) && (field.admin.disableBulkEdit || field.unique || field.admin.hidden || 'readOnly' in field && field.readOnly)) {
             return fieldsToUse;
         }
-        if (!(field.type === 'array' || field.type === 'blocks') && 'fieldMap' in field.fieldComponentProps) {
+        if (!(field.type === 'array' || field.type === 'blocks') && fieldHasSubFields(field)) {
             return [
                 ...fieldsToUse,
                 ...reduceFields({
-                    fieldMap: field.fieldComponentProps.fieldMap,
+                    fields: field.fields,
                     labelPrefix: combineLabel({
                         field,
                         prefix: labelPrefix
@@ -60,16 +72,16 @@ const reduceFields = ({ fieldMap, labelPrefix = null, path = '' })=>{
                 })
             ];
         }
-        if (field.type === 'tabs' && 'tabs' in field.fieldComponentProps) {
+        if (field.type === 'tabs' && 'tabs' in field) {
             return [
                 ...fieldsToUse,
-                ...field.fieldComponentProps.tabs.reduce((tabFields, tab)=>{
-                    if ('fieldMap' in tab) {
+                ...field.tabs.reduce((tabFields, tab)=>{
+                    if ('fields' in tab) {
                         const isNamedTab = 'name' in tab && tab.name;
                         return [
                             ...tabFields,
                             ...reduceFields({
-                                fieldMap: tab.fieldMap,
+                                fields: tab.fields,
                                 labelPrefix,
                                 path: isNamedTab ? createNestedClientFieldPath(path, field) : path
                             })
@@ -94,10 +106,10 @@ const reduceFields = ({ fieldMap, labelPrefix = null, path = '' })=>{
         ];
     }, []);
 };
-export const FieldSelect = ({ fieldMap, setSelected })=>{
+export const FieldSelect = ({ fields, setSelected })=>{
     const { t } = useTranslation();
     const [options] = useState(()=>reduceFields({
-            fieldMap
+            fields
         }));
     const { dispatchFields, getFields } = useForm();
     const handleChange = (selected)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/FieldSelect/index.tsx"],"sourcesContent":["'use client'\nimport type { FieldWithPath } from 'payload/types'\n\nimport React, { Fragment, type JSX, useState } from 'react'\n\nimport type { FieldMap, MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js'\n\nimport { FieldLabel } from '../../forms/FieldLabel/index.js'\nimport { useForm } from '../../forms/Form/context.js'\nimport { createNestedClientFieldPath } from '../../forms/Form/createNestedFieldPath.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ReactSelect } from '../ReactSelect/index.js'\nimport './index.scss'\n\nconst baseClass = 'field-select'\n\nexport type FieldSelectProps = {\n  fieldMap: FieldMap\n  setSelected: (fields: FieldWithPath[]) => void\n}\n\nconst combineLabel = ({\n  customLabel,\n  field,\n  prefix,\n}: {\n  customLabel?: string\n  field?: MappedField\n  prefix?: JSX.Element | string\n}): JSX.Element => {\n  const CustomLabelToRender =\n    field &&\n    'CustomLabel' in field.fieldComponentProps &&\n    field.fieldComponentProps.CustomLabel !== undefined\n      ? field.fieldComponentProps.CustomLabel\n      : null\n  const DefaultLabelToRender =\n    field && 'label' in field.fieldComponentProps && field.fieldComponentProps.label ? (\n      <FieldLabel\n        label={field.fieldComponentProps.label}\n        {...(field.fieldComponentProps.labelProps || {})}\n      />\n    ) : null\n\n  const LabelToRender = CustomLabelToRender || DefaultLabelToRender || customLabel\n\n  if (!LabelToRender) return null\n\n  return (\n    <Fragment>\n      {prefix && (\n        <Fragment>\n          <span style={{ display: 'inline-block' }}>{prefix}</span>\n          {' > '}\n        </Fragment>\n      )}\n      <span style={{ display: 'inline-block' }}>{LabelToRender}</span>\n    </Fragment>\n  )\n}\n\nconst reduceFields = ({\n  fieldMap,\n  labelPrefix = null,\n  path = '',\n}: {\n  fieldMap: FieldMap\n  labelPrefix?: JSX.Element | string\n  path?: string\n}): { Label: JSX.Element; value: FieldWithPath }[] => {\n  if (!fieldMap) {\n    return []\n  }\n\n  return fieldMap?.reduce((fieldsToUse, field) => {\n    const { isFieldAffectingData } = field\n    // escape for a variety of reasons\n    if (\n      isFieldAffectingData &&\n      (field.disableBulkEdit ||\n        field.unique ||\n        field.isHidden ||\n        ('readOnly' in field.fieldComponentProps && field.fieldComponentProps.readOnly))\n    ) {\n      return fieldsToUse\n    }\n\n    if (\n      !(field.type === 'array' || field.type === 'blocks') &&\n      'fieldMap' in field.fieldComponentProps\n    ) {\n      return [\n        ...fieldsToUse,\n        ...reduceFields({\n          fieldMap: field.fieldComponentProps.fieldMap,\n          labelPrefix: combineLabel({ field, prefix: labelPrefix }),\n          path: createNestedClientFieldPath(path, field),\n        }),\n      ]\n    }\n\n    if (field.type === 'tabs' && 'tabs' in field.fieldComponentProps) {\n      return [\n        ...fieldsToUse,\n        ...field.fieldComponentProps.tabs.reduce((tabFields, tab) => {\n          if ('fieldMap' in tab) {\n            const isNamedTab = 'name' in tab && tab.name\n            return [\n              ...tabFields,\n              ...reduceFields({\n                fieldMap: tab.fieldMap,\n                labelPrefix,\n                path: isNamedTab ? createNestedClientFieldPath(path, field) : path,\n              }),\n            ]\n          }\n        }, []),\n      ]\n    }\n\n    const formattedField = {\n      label: combineLabel({ field, prefix: labelPrefix }),\n      value: {\n        ...field,\n        path: createNestedClientFieldPath(path, field),\n      },\n    }\n\n    return [...fieldsToUse, formattedField]\n  }, [])\n}\n\nexport const FieldSelect: React.FC<FieldSelectProps> = ({ fieldMap, setSelected }) => {\n  const { t } = useTranslation()\n  const [options] = useState(() => reduceFields({ fieldMap }))\n\n  const { dispatchFields, getFields } = useForm()\n\n  const handleChange = (selected) => {\n    const activeFields = getFields()\n    if (selected === null) {\n      setSelected([])\n    } else {\n      setSelected(selected.map(({ value }) => value))\n    }\n\n    // remove deselected values from form state\n    if (selected === null || Object.keys(activeFields || []).length > selected.length) {\n      Object.keys(activeFields).forEach((path) => {\n        if (\n          selected === null ||\n          !selected.find((field) => {\n            return field.value.path === path\n          })\n        ) {\n          dispatchFields({\n            type: 'REMOVE',\n            path,\n          })\n        }\n      })\n    }\n  }\n\n  return (\n    <div className={baseClass}>\n      <FieldLabel label={t('fields:selectFieldsToEdit')} />\n      <ReactSelect\n        getOptionValue={(option) => {\n          if (typeof option.value === 'object' && 'path' in option.value) {\n            return String(option.value.path)\n          }\n          return String(option.value)\n        }}\n        isMulti\n        onChange={handleChange}\n        options={options}\n      />\n    </div>\n  )\n}\n"],"names":["React","Fragment","useState","FieldLabel","useForm","createNestedClientFieldPath","useTranslation","ReactSelect","baseClass","combineLabel","customLabel","field","prefix","CustomLabelToRender","fieldComponentProps","CustomLabel","undefined","DefaultLabelToRender","label","labelProps","LabelToRender","span","style","display","reduceFields","fieldMap","labelPrefix","path","reduce","fieldsToUse","isFieldAffectingData","disableBulkEdit","unique","isHidden","readOnly","type","tabs","tabFields","tab","isNamedTab","name","formattedField","value","FieldSelect","setSelected","t","options","dispatchFields","getFields","handleChange","selected","activeFields","map","Object","keys","length","forEach","find","div","className","getOptionValue","option","String","isMulti","onChange"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../src/elements/FieldSelect/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientField, FieldWithPath, MappedComponent } from 'payload'\n\nimport { fieldAffectsData, fieldHasSubFields } from 'payload/shared'\nimport React, { Fragment, type JSX, useState } from 'react'\n\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useForm } from '../../forms/Form/context.js'\nimport { createNestedClientFieldPath } from '../../forms/Form/createNestedClientFieldPath.js'\nimport { RenderComponent } from '../../providers/Config/RenderComponent.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ReactSelect } from '../ReactSelect/index.js'\nimport './index.scss'\n\nconst baseClass = 'field-select'\n\nexport type FieldSelectProps = {\n  readonly fields: ClientField[]\n  readonly setSelected: (fields: FieldWithPath[]) => void\n}\n\nexport const combineLabel = ({\n  customLabel,\n  field,\n  prefix,\n}: {\n  customLabel?: string\n  field?: ClientField\n  prefix?: JSX.Element | string\n}): JSX.Element => {\n  const CustomLabelToRender: MappedComponent =\n    field?.admin?.components &&\n    'Label' in field.admin.components &&\n    field?.admin?.components?.Label !== undefined\n      ? field.admin.components.Label\n      : null\n\n  const DefaultLabelToRender: MappedComponent =\n    field && 'label' in field && field.label\n      ? {\n          type: 'client',\n          Component: FieldLabel,\n          props: {\n            Label:\n              field.admin?.components && 'Label' in field.admin.components\n                ? field.admin?.components?.Label\n                : null,\n            label: field.label,\n          },\n        }\n      : null\n\n  const LabelToRender: MappedComponent = CustomLabelToRender ||\n    DefaultLabelToRender || {\n      type: 'client',\n      Component: null,\n      RenderedComponent: customLabel,\n    }\n\n  if (!LabelToRender) return null\n\n  return (\n    <Fragment>\n      {prefix && (\n        <Fragment>\n          <span style={{ display: 'inline-block' }}>{prefix}</span>\n          {' > '}\n        </Fragment>\n      )}\n      <span style={{ display: 'inline-block' }}>\n        <RenderComponent mappedComponent={LabelToRender} />\n      </span>\n    </Fragment>\n  )\n}\n\nconst reduceFields = ({\n  fields,\n  labelPrefix = null,\n  path = '',\n}: {\n  fields: ClientField[]\n  labelPrefix?: JSX.Element | string\n  path?: string\n}): { Label: JSX.Element; value: FieldWithPath }[] => {\n  if (!fields) {\n    return []\n  }\n\n  return fields?.reduce((fieldsToUse, field) => {\n    // escape for a variety of reasons\n    if (\n      fieldAffectsData(field) &&\n      (field.admin.disableBulkEdit ||\n        field.unique ||\n        field.admin.hidden ||\n        ('readOnly' in field && field.readOnly))\n    ) {\n      return fieldsToUse\n    }\n\n    if (!(field.type === 'array' || field.type === 'blocks') && fieldHasSubFields(field)) {\n      return [\n        ...fieldsToUse,\n        ...reduceFields({\n          fields: field.fields,\n          labelPrefix: combineLabel({ field, prefix: labelPrefix }),\n          path: createNestedClientFieldPath(path, field),\n        }),\n      ]\n    }\n\n    if (field.type === 'tabs' && 'tabs' in field) {\n      return [\n        ...fieldsToUse,\n        ...field.tabs.reduce((tabFields, tab) => {\n          if ('fields' in tab) {\n            const isNamedTab = 'name' in tab && tab.name\n            return [\n              ...tabFields,\n              ...reduceFields({\n                fields: tab.fields,\n                labelPrefix,\n                path: isNamedTab ? createNestedClientFieldPath(path, field) : path,\n              }),\n            ]\n          }\n        }, []),\n      ]\n    }\n\n    const formattedField = {\n      label: combineLabel({ field, prefix: labelPrefix }),\n      value: {\n        ...field,\n        path: createNestedClientFieldPath(path, field),\n      },\n    }\n\n    return [...fieldsToUse, formattedField]\n  }, [])\n}\n\nexport const FieldSelect: React.FC<FieldSelectProps> = ({ fields, setSelected }) => {\n  const { t } = useTranslation()\n  const [options] = useState(() => reduceFields({ fields }))\n\n  const { dispatchFields, getFields } = useForm()\n\n  const handleChange = (selected) => {\n    const activeFields = getFields()\n    if (selected === null) {\n      setSelected([])\n    } else {\n      setSelected(selected.map(({ value }) => value))\n    }\n\n    // remove deselected values from form state\n    if (selected === null || Object.keys(activeFields || []).length > selected.length) {\n      Object.keys(activeFields).forEach((path) => {\n        if (\n          selected === null ||\n          !selected.find((field) => {\n            return field.value.path === path\n          })\n        ) {\n          dispatchFields({\n            type: 'REMOVE',\n            path,\n          })\n        }\n      })\n    }\n  }\n\n  return (\n    <div className={baseClass}>\n      <FieldLabel label={t('fields:selectFieldsToEdit')} />\n      <ReactSelect\n        getOptionValue={(option) => {\n          if (typeof option.value === 'object' && 'path' in option.value) {\n            return String(option.value.path)\n          }\n          return String(option.value)\n        }}\n        isMulti\n        onChange={handleChange}\n        options={options}\n      />\n    </div>\n  )\n}\n"],"names":["fieldAffectsData","fieldHasSubFields","React","Fragment","useState","FieldLabel","useForm","createNestedClientFieldPath","RenderComponent","useTranslation","ReactSelect","baseClass","combineLabel","customLabel","field","prefix","CustomLabelToRender","admin","components","Label","undefined","DefaultLabelToRender","label","type","Component","props","LabelToRender","RenderedComponent","span","style","display","mappedComponent","reduceFields","fields","labelPrefix","path","reduce","fieldsToUse","disableBulkEdit","unique","hidden","readOnly","tabs","tabFields","tab","isNamedTab","name","formattedField","value","FieldSelect","setSelected","t","options","dispatchFields","getFields","handleChange","selected","activeFields","map","Object","keys","length","forEach","find","div","className","getOptionValue","option","String","isMulti","onChange"],"mappings":"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"}

package/dist/elements/FileDetails/FileMeta/index.js

@@ -1,11 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { formatFilesize } from 'payload/utilities';
+import { formatFilesize } from 'payload/shared';
 import React, { useState } from 'react';
-import { Edit } from '../../../icons/Edit/index.js';
+import { EditIcon } from '../../../icons/Edit/index.js';
 import { CopyToClipboard } from '../../CopyToClipboard/index.js';
 import { useDocumentDrawer } from '../../DocumentDrawer/index.js';
 import { Tooltip } from '../../Tooltip/index.js';
+import './index.scss';
 const baseClass = 'file-meta';
 export const FileMeta = (props)=>{
     const { id, collection, filename, filesize, height, mimeType, url: fileURL, width } = props;
@@ -37,7 +38,7 @@ export const FileMeta = (props)=>{
                         onMouseEnter: ()=>setHovered(true),
                         onMouseLeave: ()=>setHovered(false),
                         children: [
-                            /*#__PURE__*/ _jsx(Edit, {}),
+                            /*#__PURE__*/ _jsx(EditIcon, {}),
                             /*#__PURE__*/ _jsx(Tooltip, {
                                 show: hovered,
                                 children: "Edit"

package/dist/elements/FileDetails/FileMeta/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/FileDetails/FileMeta/index.tsx"],"sourcesContent":["'use client'\nimport { formatFilesize } from 'payload/utilities'\nimport React, { useState } from 'react'\n\nexport type FileMetaProps = {\n  collection?: string\n  filename: string\n  filesize: number\n  height?: number\n  id?: string\n  mimeType: string\n  sizes?: unknown\n  url: string\n  width?: number\n}\n\nimport { Edit } from '../../../icons/Edit/index.js'\nimport { CopyToClipboard } from '../../CopyToClipboard/index.js'\nimport { useDocumentDrawer } from '../../DocumentDrawer/index.js'\nimport { Tooltip } from '../../Tooltip/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-meta'\n\nexport const FileMeta: React.FC<FileMetaProps> = (props) => {\n  const { id, collection, filename, filesize, height, mimeType, url: fileURL, width } = props\n\n  const [hovered, setHovered] = useState(false)\n  const openInDrawer = Boolean(id && collection)\n\n  const [DocumentDrawer, DocumentDrawerToggler] = useDocumentDrawer({\n    id,\n    collectionSlug: collection,\n  })\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__url`}>\n        {openInDrawer && <DocumentDrawer />}\n        <a href={fileURL} rel=\"noopener noreferrer\" target=\"_blank\">\n          {filename}\n        </a>\n        <CopyToClipboard defaultMessage=\"Copy URL\" value={fileURL} />\n        {openInDrawer && (\n          <DocumentDrawerToggler\n            className={`${baseClass}__edit`}\n            onMouseEnter={() => setHovered(true)}\n            onMouseLeave={() => setHovered(false)}\n          >\n            <Edit />\n            <Tooltip show={hovered}>Edit</Tooltip>\n          </DocumentDrawerToggler>\n        )}\n      </div>\n      <div className={`${baseClass}__size-type`}>\n        {formatFilesize(filesize)}\n        {width && height && (\n          <React.Fragment>\n            &nbsp;-&nbsp;\n            {width}x{height}\n          </React.Fragment>\n        )}\n        {mimeType && (\n          <React.Fragment>\n            &nbsp;-&nbsp;\n            {mimeType}\n          </React.Fragment>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":["formatFilesize","React","useState","Edit","CopyToClipboard","useDocumentDrawer","Tooltip","baseClass","FileMeta","props","id","collection","filename","filesize","height","mimeType","url","fileURL","width","hovered","setHovered","openInDrawer","Boolean","DocumentDrawer","DocumentDrawerToggler","collectionSlug","div","className","a","href","rel","target","defaultMessage","value","onMouseEnter","onMouseLeave","show","Fragment"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,cAAc,QAAQ,oBAAmB;AAClD,OAAOC,SAASC,QAAQ,QAAQ,QAAO;AAcvC,SAASC,IAAI,QAAQ,+BAA8B;AACnD,SAASC,eAAe,QAAQ,iCAAgC;AAChE,SAASC,iBAAiB,QAAQ,gCAA+B;AACjE,SAASC,OAAO,QAAQ,yBAAwB;AAGhD,MAAMC,YAAY;AAElB,OAAO,MAAMC,WAAoC,CAACC;IAChD,MAAM,EAAEC,EAAE,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,KAAKC,OAAO,EAAEC,KAAK,EAAE,GAAGT;IAEtF,MAAM,CAACU,SAASC,WAAW,GAAGlB,SAAS;IACvC,MAAMmB,eAAeC,QAAQZ,MAAMC;IAEnC,MAAM,CAACY,gBAAgBC,sBAAsB,GAAGnB,kBAAkB;QAChEK;QACAe,gBAAgBd;IAClB;IAEA,qBACE,MAACe;QAAIC,WAAWpB;;0BACd,MAACmB;gBAAIC,WAAW,CAAC,EAAEpB,UAAU,KAAK,CAAC;;oBAChCc,8BAAgB,KAACE;kCAClB,KAACK;wBAAEC,MAAMZ;wBAASa,KAAI;wBAAsBC,QAAO;kCAChDnB;;kCAEH,KAACR;wBAAgB4B,gBAAe;wBAAWC,OAAOhB;;oBACjDI,8BACC,MAACG;wBACCG,WAAW,CAAC,EAAEpB,UAAU,MAAM,CAAC;wBAC/B2B,cAAc,IAAMd,WAAW;wBAC/Be,cAAc,IAAMf,WAAW;;0CAE/B,KAACjB;0CACD,KAACG;gCAAQ8B,MAAMjB;0CAAS;;;;;;0BAI9B,MAACO;gBAAIC,WAAW,CAAC,EAAEpB,UAAU,WAAW,CAAC;;oBACtCP,eAAea;oBACfK,SAASJ,wBACR,MAACb,MAAMoC,QAAQ;;4BAAC;4BAEbnB;4BAAM;4BAAEJ;;;oBAGZC,0BACC,MAACd,MAAMoC,QAAQ;;4BAAC;4BAEbtB;;;;;;;AAMb,EAAC"}
+{"version":3,"sources":["../../../../src/elements/FileDetails/FileMeta/index.tsx"],"sourcesContent":["'use client'\nimport { formatFilesize } from 'payload/shared'\nimport React, { useState } from 'react'\n\nexport type FileMetaProps = {\n  collection?: string\n  filename: string\n  filesize: number\n  height?: number\n  id?: string\n  mimeType: string\n  sizes?: unknown\n  url: string\n  width?: number\n}\n\nimport { EditIcon } from '../../../icons/Edit/index.js'\nimport { CopyToClipboard } from '../../CopyToClipboard/index.js'\nimport { useDocumentDrawer } from '../../DocumentDrawer/index.js'\nimport { Tooltip } from '../../Tooltip/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-meta'\n\nexport const FileMeta: React.FC<FileMetaProps> = (props) => {\n  const { id, collection, filename, filesize, height, mimeType, url: fileURL, width } = props\n\n  const [hovered, setHovered] = useState(false)\n  const openInDrawer = Boolean(id && collection)\n\n  const [DocumentDrawer, DocumentDrawerToggler] = useDocumentDrawer({\n    id,\n    collectionSlug: collection,\n  })\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__url`}>\n        {openInDrawer && <DocumentDrawer />}\n        <a href={fileURL} rel=\"noopener noreferrer\" target=\"_blank\">\n          {filename}\n        </a>\n        <CopyToClipboard defaultMessage=\"Copy URL\" value={fileURL} />\n        {openInDrawer && (\n          <DocumentDrawerToggler\n            className={`${baseClass}__edit`}\n            onMouseEnter={() => setHovered(true)}\n            onMouseLeave={() => setHovered(false)}\n          >\n            <EditIcon />\n            <Tooltip show={hovered}>Edit</Tooltip>\n          </DocumentDrawerToggler>\n        )}\n      </div>\n      <div className={`${baseClass}__size-type`}>\n        {formatFilesize(filesize)}\n        {width && height && (\n          <React.Fragment>\n            &nbsp;-&nbsp;\n            {width}x{height}\n          </React.Fragment>\n        )}\n        {mimeType && (\n          <React.Fragment>\n            &nbsp;-&nbsp;\n            {mimeType}\n          </React.Fragment>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":["formatFilesize","React","useState","EditIcon","CopyToClipboard","useDocumentDrawer","Tooltip","baseClass","FileMeta","props","id","collection","filename","filesize","height","mimeType","url","fileURL","width","hovered","setHovered","openInDrawer","Boolean","DocumentDrawer","DocumentDrawerToggler","collectionSlug","div","className","a","href","rel","target","defaultMessage","value","onMouseEnter","onMouseLeave","show","Fragment"],"mappings":"AAAA;;AACA,SAASA,cAAc,QAAQ,iBAAgB;AAC/C,OAAOC,SAASC,QAAQ,QAAQ,QAAO;AAcvC,SAASC,QAAQ,QAAQ,+BAA8B;AACvD,SAASC,eAAe,QAAQ,iCAAgC;AAChE,SAASC,iBAAiB,QAAQ,gCAA+B;AACjE,SAASC,OAAO,QAAQ,yBAAwB;AAChD,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,WAAoC,CAACC;IAChD,MAAM,EAAEC,EAAE,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,KAAKC,OAAO,EAAEC,KAAK,EAAE,GAAGT;IAEtF,MAAM,CAACU,SAASC,WAAW,GAAGlB,SAAS;IACvC,MAAMmB,eAAeC,QAAQZ,MAAMC;IAEnC,MAAM,CAACY,gBAAgBC,sBAAsB,GAAGnB,kBAAkB;QAChEK;QACAe,gBAAgBd;IAClB;IAEA,qBACE,MAACe;QAAIC,WAAWpB;;0BACd,MAACmB;gBAAIC,WAAW,CAAC,EAAEpB,UAAU,KAAK,CAAC;;oBAChCc,8BAAgB,KAACE;kCAClB,KAACK;wBAAEC,MAAMZ;wBAASa,KAAI;wBAAsBC,QAAO;kCAChDnB;;kCAEH,KAACR;wBAAgB4B,gBAAe;wBAAWC,OAAOhB;;oBACjDI,8BACC,MAACG;wBACCG,WAAW,CAAC,EAAEpB,UAAU,MAAM,CAAC;wBAC/B2B,cAAc,IAAMd,WAAW;wBAC/Be,cAAc,IAAMf,WAAW;;0CAE/B,KAACjB;0CACD,KAACG;gCAAQ8B,MAAMjB;0CAAS;;;;;;0BAI9B,MAACO;gBAAIC,WAAW,CAAC,EAAEpB,UAAU,WAAW,CAAC;;oBACtCP,eAAea;oBACfK,SAASJ,wBACR,MAACb,MAAMoC,QAAQ;;4BAAC;4BAEbnB;4BAAM;4BAAEJ;;;oBAGZC,0BACC,MAACd,MAAMoC,QAAQ;;4BAAC;4BAEbtB;;;;;;;AAMb,EAAC"}

package/dist/elements/FileDetails/FileMeta/index.scss

@@ -3,6 +3,7 @@
 .file-meta {
   &__url {
     display: flex;
+    gap: base(0.4);
 
     a {
       font-weight: 600;

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

@@ -1,12 +1,13 @@
 import React from 'react';
 import './index.scss';
-import type { Data, FileSizes, SanitizedCollectionConfig } from 'payload/types';
+import type { Data, FileSizes, SanitizedCollectionConfig } from 'payload';
 export type FileDetailsProps = {
-    canEdit?: boolean;
     collectionSlug: string;
-    doc: Data & {
+    customUploadActions?: React.ReactNode[];
+    doc: {
         sizes?: FileSizes;
-    };
+    } & Data;
+    enableAdjustments?: boolean;
     handleRemove?: () => void;
     hasImageSizes?: boolean;
     imageCacheTag?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FileDetails/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAA;AAE/E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc,EAAE,MAAM,CAAA;IACtB,GAAG,EAAE,IAAI,GAAG;QACV,KAAK,CAAC,EAAE,SAAS,CAAA;KAClB,CAAA;IACD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA6ClD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FileDetails/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAEzE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,cAAc,EAAE,MAAM,CAAA;IACtB,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IACvC,GAAG,EAAE;QACH,KAAK,CAAC,EAAE,SAAS,CAAA;KAClB,GAAG,IAAI,CAAA;IACR,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA4DlD,CAAA"}

package/dist/elements/FileDetails/index.js

@@ -1,20 +1,22 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { isImage } from 'payload/utilities';
 import React from 'react';
 import { UploadActions } from '../../elements/Upload/index.js';
 import { Button } from '../Button/index.js';
 import { Thumbnail } from '../Thumbnail/index.js';
 import { FileMeta } from './FileMeta/index.js';
+import './index.scss';
 const baseClass = 'file-details';
 export const FileDetails = (props)=>{
-    const { canEdit, collectionSlug, doc, handleRemove, hasImageSizes, imageCacheTag, uploadConfig } = props;
+    const { collectionSlug, customUploadActions, doc, enableAdjustments, handleRemove, hasImageSizes, imageCacheTag, uploadConfig } = props;
     const { id, filename, filesize, height, mimeType, thumbnailURL, url, width } = doc;
     return /*#__PURE__*/ _jsx("div", {
         className: baseClass,
         children: /*#__PURE__*/ _jsxs("header", {
             children: [
                 /*#__PURE__*/ _jsx(Thumbnail, {
+                    // size="small"
+                    className: `${baseClass}__thumbnail`,
                     collectionSlug: collectionSlug,
                     doc: doc,
                     fileSrc: thumbnailURL || url,
@@ -34,9 +36,11 @@ export const FileDetails = (props)=>{
                             url: url,
                             width: width
                         }),
-                        isImage(mimeType) && mimeType !== 'image/svg+xml' && /*#__PURE__*/ _jsx(UploadActions, {
-                            canEdit: canEdit,
-                            showSizePreviews: hasImageSizes && doc.filename
+                        (enableAdjustments || customUploadActions) && /*#__PURE__*/ _jsx(UploadActions, {
+                            customActions: customUploadActions,
+                            enableAdjustments: enableAdjustments,
+                            enablePreviewSizes: hasImageSizes && doc.filename,
+                            mimeType: mimeType
                         })
                     ]
                 }),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/FileDetails/index.tsx"],"sourcesContent":["'use client'\nimport { isImage } from 'payload/utilities'\nimport React from 'react'\n\nimport { UploadActions } from '../../elements/Upload/index.js'\nimport { Button } from '../Button/index.js'\nimport { Thumbnail } from '../Thumbnail/index.js'\nimport { FileMeta } from './FileMeta/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-details'\n\nimport type { Data, FileSizes, SanitizedCollectionConfig } from 'payload/types'\n\nexport type FileDetailsProps = {\n  canEdit?: boolean\n  collectionSlug: string\n  doc: Data & {\n    sizes?: FileSizes\n  }\n  handleRemove?: () => void\n  hasImageSizes?: boolean\n  imageCacheTag?: string\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const FileDetails: React.FC<FileDetailsProps> = (props) => {\n  const { canEdit, collectionSlug, doc, handleRemove, hasImageSizes, imageCacheTag, uploadConfig } =\n    props\n\n  const { id, filename, filesize, height, mimeType, thumbnailURL, url, width } = doc\n\n  return (\n    <div className={baseClass}>\n      <header>\n        <Thumbnail\n          collectionSlug={collectionSlug}\n          doc={doc}\n          fileSrc={thumbnailURL || url}\n          imageCacheTag={imageCacheTag}\n          uploadConfig={uploadConfig}\n        />\n        <div className={`${baseClass}__main-detail`}>\n          <FileMeta\n            collection={collectionSlug}\n            filename={filename as string}\n            filesize={filesize as number}\n            height={height as number}\n            id={id as string}\n            mimeType={mimeType as string}\n            url={url as string}\n            width={width as number}\n          />\n\n          {isImage(mimeType as string) && mimeType !== 'image/svg+xml' && (\n            <UploadActions canEdit={canEdit} showSizePreviews={hasImageSizes && doc.filename} />\n          )}\n        </div>\n        {handleRemove && (\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__remove`}\n            icon=\"x\"\n            iconStyle=\"with-border\"\n            onClick={handleRemove}\n            round\n          />\n        )}\n      </header>\n    </div>\n  )\n}\n"],"names":["isImage","React","UploadActions","Button","Thumbnail","FileMeta","baseClass","FileDetails","props","canEdit","collectionSlug","doc","handleRemove","hasImageSizes","imageCacheTag","uploadConfig","id","filename","filesize","height","mimeType","thumbnailURL","url","width","div","className","header","fileSrc","collection","showSizePreviews","buttonStyle","icon","iconStyle","onClick","round"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,OAAO,QAAQ,oBAAmB;AAC3C,OAAOC,WAAW,QAAO;AAEzB,SAASC,aAAa,QAAQ,iCAAgC;AAC9D,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,SAASC,SAAS,QAAQ,wBAAuB;AACjD,SAASC,QAAQ,QAAQ,sBAAqB;AAG9C,MAAMC,YAAY;AAgBlB,OAAO,MAAMC,cAA0C,CAACC;IACtD,MAAM,EAAEC,OAAO,EAAEC,cAAc,EAAEC,GAAG,EAAEC,YAAY,EAAEC,aAAa,EAAEC,aAAa,EAAEC,YAAY,EAAE,GAC9FP;IAEF,MAAM,EAAEQ,EAAE,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,GAAG,EAAEC,KAAK,EAAE,GAAGZ;IAE/E,qBACE,KAACa;QAAIC,WAAWnB;kBACd,cAAA,MAACoB;;8BACC,KAACtB;oBACCM,gBAAgBA;oBAChBC,KAAKA;oBACLgB,SAASN,gBAAgBC;oBACzBR,eAAeA;oBACfC,cAAcA;;8BAEhB,MAACS;oBAAIC,WAAW,CAAC,EAAEnB,UAAU,aAAa,CAAC;;sCACzC,KAACD;4BACCuB,YAAYlB;4BACZO,UAAUA;4BACVC,UAAUA;4BACVC,QAAQA;4BACRH,IAAIA;4BACJI,UAAUA;4BACVE,KAAKA;4BACLC,OAAOA;;wBAGRvB,QAAQoB,aAAuBA,aAAa,iCAC3C,KAAClB;4BAAcO,SAASA;4BAASoB,kBAAkBhB,iBAAiBF,IAAIM,QAAQ;;;;gBAGnFL,8BACC,KAACT;oBACC2B,aAAY;oBACZL,WAAW,CAAC,EAAEnB,UAAU,QAAQ,CAAC;oBACjCyB,MAAK;oBACLC,WAAU;oBACVC,SAASrB;oBACTsB,KAAK;;;;;AAMjB,EAAC"}
+{"version":3,"sources":["../../../src/elements/FileDetails/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { UploadActions } from '../../elements/Upload/index.js'\nimport { Button } from '../Button/index.js'\nimport { Thumbnail } from '../Thumbnail/index.js'\nimport { FileMeta } from './FileMeta/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-details'\n\nimport type { Data, FileSizes, SanitizedCollectionConfig } from 'payload'\n\nexport type FileDetailsProps = {\n  collectionSlug: string\n  customUploadActions?: React.ReactNode[]\n  doc: {\n    sizes?: FileSizes\n  } & Data\n  enableAdjustments?: boolean\n  handleRemove?: () => void\n  hasImageSizes?: boolean\n  imageCacheTag?: string\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const FileDetails: React.FC<FileDetailsProps> = (props) => {\n  const {\n    collectionSlug,\n    customUploadActions,\n    doc,\n    enableAdjustments,\n    handleRemove,\n    hasImageSizes,\n    imageCacheTag,\n    uploadConfig,\n  } = props\n\n  const { id, filename, filesize, height, mimeType, thumbnailURL, url, width } = doc\n\n  return (\n    <div className={baseClass}>\n      <header>\n        <Thumbnail\n          // size=\"small\"\n          className={`${baseClass}__thumbnail`}\n          collectionSlug={collectionSlug}\n          doc={doc}\n          fileSrc={thumbnailURL || url}\n          imageCacheTag={imageCacheTag}\n          uploadConfig={uploadConfig}\n        />\n        <div className={`${baseClass}__main-detail`}>\n          <FileMeta\n            collection={collectionSlug}\n            filename={filename as string}\n            filesize={filesize as number}\n            height={height as number}\n            id={id as string}\n            mimeType={mimeType as string}\n            url={url as string}\n            width={width as number}\n          />\n\n          {(enableAdjustments || customUploadActions) && (\n            <UploadActions\n              customActions={customUploadActions}\n              enableAdjustments={enableAdjustments}\n              enablePreviewSizes={hasImageSizes && doc.filename}\n              mimeType={mimeType}\n            />\n          )}\n        </div>\n        {handleRemove && (\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__remove`}\n            icon=\"x\"\n            iconStyle=\"with-border\"\n            onClick={handleRemove}\n            round\n          />\n        )}\n      </header>\n    </div>\n  )\n}\n"],"names":["React","UploadActions","Button","Thumbnail","FileMeta","baseClass","FileDetails","props","collectionSlug","customUploadActions","doc","enableAdjustments","handleRemove","hasImageSizes","imageCacheTag","uploadConfig","id","filename","filesize","height","mimeType","thumbnailURL","url","width","div","className","header","fileSrc","collection","customActions","enablePreviewSizes","buttonStyle","icon","iconStyle","onClick","round"],"mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAEzB,SAASC,aAAa,QAAQ,iCAAgC;AAC9D,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,SAASC,SAAS,QAAQ,wBAAuB;AACjD,SAASC,QAAQ,QAAQ,sBAAqB;AAC9C,OAAO,eAAc;AAErB,MAAMC,YAAY;AAiBlB,OAAO,MAAMC,cAA0C,CAACC;IACtD,MAAM,EACJC,cAAc,EACdC,mBAAmB,EACnBC,GAAG,EACHC,iBAAiB,EACjBC,YAAY,EACZC,aAAa,EACbC,aAAa,EACbC,YAAY,EACb,GAAGR;IAEJ,MAAM,EAAES,EAAE,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,GAAG,EAAEC,KAAK,EAAE,GAAGb;IAE/E,qBACE,KAACc;QAAIC,WAAWpB;kBACd,cAAA,MAACqB;;8BACC,KAACvB;oBACC,eAAe;oBACfsB,WAAW,CAAC,EAAEpB,UAAU,WAAW,CAAC;oBACpCG,gBAAgBA;oBAChBE,KAAKA;oBACLiB,SAASN,gBAAgBC;oBACzBR,eAAeA;oBACfC,cAAcA;;8BAEhB,MAACS;oBAAIC,WAAW,CAAC,EAAEpB,UAAU,aAAa,CAAC;;sCACzC,KAACD;4BACCwB,YAAYpB;4BACZS,UAAUA;4BACVC,UAAUA;4BACVC,QAAQA;4BACRH,IAAIA;4BACJI,UAAUA;4BACVE,KAAKA;4BACLC,OAAOA;;wBAGPZ,CAAAA,qBAAqBF,mBAAkB,mBACvC,KAACR;4BACC4B,eAAepB;4BACfE,mBAAmBA;4BACnBmB,oBAAoBjB,iBAAiBH,IAAIO,QAAQ;4BACjDG,UAAUA;;;;gBAIfR,8BACC,KAACV;oBACC6B,aAAY;oBACZN,WAAW,CAAC,EAAEpB,UAAU,QAAQ,CAAC;oBACjC2B,MAAK;oBACLC,WAAU;oBACVC,SAAStB;oBACTuB,KAAK;;;;;AAMjB,EAAC"}

package/dist/elements/FileDetails/index.scss

@@ -1,27 +1,46 @@
 @import '../../scss/styles.scss';
 
 .file-details {
-  background-color: var(--theme-elevation-50);
+  background: var(--theme-elevation-50);
+  border: 1px solid var(--theme-border-color);
+  border-radius: var(--style-radius-m);
+  @include inputShadow;
 
   header {
     display: flex;
-    align-items: flex-start;
-    border-bottom: 1px solid var(--theme-elevation-0);
+    flex-direction: row;
+    flex-wrap: wrap;
   }
 
   &__remove {
-    margin: $baseline $baseline $baseline 0;
+    position: absolute;
+    margin: 0;
+    top: $baseline;
+    right: $baseline;
+
+    & .btn__icon {
+      border: 1px solid var(--theme-border-color);
+      background: var(--theme-input-bg);
+      @include inputShadow;
+      transition: border 100ms cubic-bezier(0, 0.2, 0.2, 1);
+
+      &:hover {
+        border: 1px solid var(--theme-elevation-400);
+      }
+    }
   }
 
   &__main-detail {
-    padding: $baseline base(1.5);
+    padding: base(0.8) base(1.2);
     width: auto;
     flex-grow: 1;
-    min-width: 0;
+    min-width: 280px;
+    max-width: 100%;
     display: flex;
     flex-direction: column;
-    align-self: center;
-    gap: base(0.25);
+    justify-content: center;
+    align-self: stretch;
+    gap: base(0.2);
   }
 
   &__toggle-more-info {
@@ -66,7 +85,7 @@
     cursor: pointer;
     background-color: var(--theme-elevation-150);
     border: none;
-    border-radius: $style-radius-s;
+    border-radius: $style-radius-m;
     padding: base(0.25) base(0.5);
 
     &:hover {
@@ -102,12 +121,9 @@
 
     &__remove {
       order: 2;
-      margin-left: auto;
-      margin-right: $baseline;
     }
 
     &__main-detail {
-      border-top: $style-stroke-width-m solid var(--theme-elevation-0);
       order: 3;
       width: 100%;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/GenerateConfirmation/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,yBAAyB,GAAG;IACtC,cAAc,EAAE,CAAC,OAAO,KAAA,KAAK,IAAI,CAAA;IACjC,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAwDpE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/GenerateConfirmation/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,yBAAyB,GAAG;IACtC,cAAc,EAAE,CAAC,OAAO,KAAA,KAAK,IAAI,CAAA;IACjC,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAsDpE,CAAA"}

package/dist/elements/GenerateConfirmation/index.js

@@ -1,16 +1,15 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as facelessUIImport from '@faceless-ui/modal';
+import { Modal, useModal } from '@faceless-ui/modal';
 import React from 'react';
-import { toast } from 'react-toastify';
+import { toast } from 'sonner';
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
-import { MinimalTemplate } from '../../templates/Minimal/index.js';
 import { Button } from '../Button/index.js';
 import { Translation } from '../Translation/index.js';
+import './index.scss';
 const baseClass = 'generate-confirmation';
 export const GenerateConfirmation = (props)=>{
-    const { Modal, useModal } = facelessUIImport;
     const { highlightField, setKey } = props;
     const { id } = useDocumentInfo();
     const { toggleModal } = useModal();
@@ -19,9 +18,7 @@ export const GenerateConfirmation = (props)=>{
     const handleGenerate = ()=>{
         setKey();
         toggleModal(modalSlug);
-        toast.success(t('authentication:newAPIKeyGenerated'), {
-            autoClose: 3000
-        });
+        toast.success(t('authentication:newAPIKeyGenerated'));
         highlightField(true);
     };
     return /*#__PURE__*/ _jsxs(React.Fragment, {
@@ -37,7 +34,7 @@ export const GenerateConfirmation = (props)=>{
             /*#__PURE__*/ _jsx(Modal, {
                 className: baseClass,
                 slug: modalSlug,
-                children: /*#__PURE__*/ _jsxs(MinimalTemplate, {
+                children: /*#__PURE__*/ _jsxs("div", {
                     className: `${baseClass}__template`,
                     children: [
                         /*#__PURE__*/ _jsx("h1", {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/GenerateConfirmation/index.tsx"],"sourcesContent":["'use client'\nimport * as facelessUIImport from '@faceless-ui/modal'\nimport React from 'react'\nimport { toast } from 'react-toastify'\n\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { MinimalTemplate } from '../../templates/Minimal/index.js'\nimport { Button } from '../Button/index.js'\nimport { Translation } from '../Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'generate-confirmation'\n\nexport type GenerateConfirmationProps = {\n  highlightField: (Boolean) => void\n  setKey: () => void\n}\n\nexport const GenerateConfirmation: React.FC<GenerateConfirmationProps> = (props) => {\n  const { Modal, useModal } = facelessUIImport\n\n  const { highlightField, setKey } = props\n\n  const { id } = useDocumentInfo()\n  const { toggleModal } = useModal()\n  const { t } = useTranslation()\n\n  const modalSlug = `generate-confirmation-${id}`\n\n  const handleGenerate = () => {\n    setKey()\n    toggleModal(modalSlug)\n    toast.success(t('authentication:newAPIKeyGenerated'), { autoClose: 3000 })\n    highlightField(true)\n  }\n\n  return (\n    <React.Fragment>\n      <Button\n        buttonStyle=\"secondary\"\n        onClick={() => {\n          toggleModal(modalSlug)\n        }}\n        size=\"small\"\n      >\n        {t('authentication:generateNewAPIKey')}\n      </Button>\n      <Modal className={baseClass} slug={modalSlug}>\n        <MinimalTemplate className={`${baseClass}__template`}>\n          <h1>{t('authentication:confirmGeneration')}</h1>\n          <p>\n            <Translation\n              elements={{\n                1: ({ children }) => <strong>{children}</strong>,\n              }}\n              i18nKey=\"authentication:generatingNewAPIKeyWillInvalidate\"\n              t={t}\n            />\n          </p>\n\n          <Button\n            buttonStyle=\"secondary\"\n            onClick={() => {\n              toggleModal(modalSlug)\n            }}\n            type=\"button\"\n          >\n            {t('general:cancel')}\n          </Button>\n          <Button onClick={handleGenerate}>{t('authentication:generate')}</Button>\n        </MinimalTemplate>\n      </Modal>\n    </React.Fragment>\n  )\n}\n"],"names":["facelessUIImport","React","toast","useDocumentInfo","useTranslation","MinimalTemplate","Button","Translation","baseClass","GenerateConfirmation","props","Modal","useModal","highlightField","setKey","id","toggleModal","t","modalSlug","handleGenerate","success","autoClose","Fragment","buttonStyle","onClick","size","className","slug","h1","p","elements","children","strong","i18nKey","type"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,YAAYA,sBAAsB,qBAAoB;AACtD,OAAOC,WAAW,QAAO;AACzB,SAASC,KAAK,QAAQ,iBAAgB;AAEtC,SAASC,eAAe,QAAQ,wCAAuC;AACvE,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,eAAe,QAAQ,mCAAkC;AAClE,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,SAASC,WAAW,QAAQ,0BAAyB;AAGrD,MAAMC,YAAY;AAOlB,OAAO,MAAMC,uBAA4D,CAACC;IACxE,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGZ;IAE5B,MAAM,EAAEa,cAAc,EAAEC,MAAM,EAAE,GAAGJ;IAEnC,MAAM,EAAEK,EAAE,EAAE,GAAGZ;IACf,MAAM,EAAEa,WAAW,EAAE,GAAGJ;IACxB,MAAM,EAAEK,CAAC,EAAE,GAAGb;IAEd,MAAMc,YAAY,CAAC,sBAAsB,EAAEH,GAAG,CAAC;IAE/C,MAAMI,iBAAiB;QACrBL;QACAE,YAAYE;QACZhB,MAAMkB,OAAO,CAACH,EAAE,sCAAsC;YAAEI,WAAW;QAAK;QACxER,eAAe;IACjB;IAEA,qBACE,MAACZ,MAAMqB,QAAQ;;0BACb,KAAChB;gBACCiB,aAAY;gBACZC,SAAS;oBACPR,YAAYE;gBACd;gBACAO,MAAK;0BAEJR,EAAE;;0BAEL,KAACN;gBAAMe,WAAWlB;gBAAWmB,MAAMT;0BACjC,cAAA,MAACb;oBAAgBqB,WAAW,CAAC,EAAElB,UAAU,UAAU,CAAC;;sCAClD,KAACoB;sCAAIX,EAAE;;sCACP,KAACY;sCACC,cAAA,KAACtB;gCACCuB,UAAU;oCACR,GAAG,CAAC,EAAEC,QAAQ,EAAE,iBAAK,KAACC;sDAAQD;;gCAChC;gCACAE,SAAQ;gCACRhB,GAAGA;;;sCAIP,KAACX;4BACCiB,aAAY;4BACZC,SAAS;gCACPR,YAAYE;4BACd;4BACAgB,MAAK;sCAEJjB,EAAE;;sCAEL,KAACX;4BAAOkB,SAASL;sCAAiBF,EAAE;;;;;;;AAK9C,EAAC"}
+{"version":3,"sources":["../../../src/elements/GenerateConfirmation/index.tsx"],"sourcesContent":["'use client'\nimport { Modal, useModal } from '@faceless-ui/modal'\nimport React from 'react'\nimport { toast } from 'sonner'\n\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { Translation } from '../Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'generate-confirmation'\n\nexport type GenerateConfirmationProps = {\n  highlightField: (Boolean) => void\n  setKey: () => void\n}\n\nexport const GenerateConfirmation: React.FC<GenerateConfirmationProps> = (props) => {\n  const { highlightField, setKey } = props\n\n  const { id } = useDocumentInfo()\n  const { toggleModal } = useModal()\n  const { t } = useTranslation()\n\n  const modalSlug = `generate-confirmation-${id}`\n\n  const handleGenerate = () => {\n    setKey()\n    toggleModal(modalSlug)\n    toast.success(t('authentication:newAPIKeyGenerated'))\n    highlightField(true)\n  }\n\n  return (\n    <React.Fragment>\n      <Button\n        buttonStyle=\"secondary\"\n        onClick={() => {\n          toggleModal(modalSlug)\n        }}\n        size=\"small\"\n      >\n        {t('authentication:generateNewAPIKey')}\n      </Button>\n      <Modal className={baseClass} slug={modalSlug}>\n        <div className={`${baseClass}__template`}>\n          <h1>{t('authentication:confirmGeneration')}</h1>\n          <p>\n            <Translation\n              elements={{\n                1: ({ children }) => <strong>{children}</strong>,\n              }}\n              i18nKey=\"authentication:generatingNewAPIKeyWillInvalidate\"\n              t={t}\n            />\n          </p>\n\n          <Button\n            buttonStyle=\"secondary\"\n            onClick={() => {\n              toggleModal(modalSlug)\n            }}\n            type=\"button\"\n          >\n            {t('general:cancel')}\n          </Button>\n          <Button onClick={handleGenerate}>{t('authentication:generate')}</Button>\n        </div>\n      </Modal>\n    </React.Fragment>\n  )\n}\n"],"names":["Modal","useModal","React","toast","useDocumentInfo","useTranslation","Button","Translation","baseClass","GenerateConfirmation","props","highlightField","setKey","id","toggleModal","t","modalSlug","handleGenerate","success","Fragment","buttonStyle","onClick","size","className","slug","div","h1","p","elements","children","strong","i18nKey","type"],"mappings":"AAAA;;AACA,SAASA,KAAK,EAAEC,QAAQ,QAAQ,qBAAoB;AACpD,OAAOC,WAAW,QAAO;AACzB,SAASC,KAAK,QAAQ,SAAQ;AAE9B,SAASC,eAAe,QAAQ,wCAAuC;AACvE,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,SAASC,WAAW,QAAQ,0BAAyB;AACrD,OAAO,eAAc;AAErB,MAAMC,YAAY;AAOlB,OAAO,MAAMC,uBAA4D,CAACC;IACxE,MAAM,EAAEC,cAAc,EAAEC,MAAM,EAAE,GAAGF;IAEnC,MAAM,EAAEG,EAAE,EAAE,GAAGT;IACf,MAAM,EAAEU,WAAW,EAAE,GAAGb;IACxB,MAAM,EAAEc,CAAC,EAAE,GAAGV;IAEd,MAAMW,YAAY,CAAC,sBAAsB,EAAEH,GAAG,CAAC;IAE/C,MAAMI,iBAAiB;QACrBL;QACAE,YAAYE;QACZb,MAAMe,OAAO,CAACH,EAAE;QAChBJ,eAAe;IACjB;IAEA,qBACE,MAACT,MAAMiB,QAAQ;;0BACb,KAACb;gBACCc,aAAY;gBACZC,SAAS;oBACPP,YAAYE;gBACd;gBACAM,MAAK;0BAEJP,EAAE;;0BAEL,KAACf;gBAAMuB,WAAWf;gBAAWgB,MAAMR;0BACjC,cAAA,MAACS;oBAAIF,WAAW,CAAC,EAAEf,UAAU,UAAU,CAAC;;sCACtC,KAACkB;sCAAIX,EAAE;;sCACP,KAACY;sCACC,cAAA,KAACpB;gCACCqB,UAAU;oCACR,GAAG,CAAC,EAAEC,QAAQ,EAAE,iBAAK,KAACC;sDAAQD;;gCAChC;gCACAE,SAAQ;gCACRhB,GAAGA;;;sCAIP,KAACT;4BACCc,aAAY;4BACZC,SAAS;gCACPP,YAAYE;4BACd;4BACAgB,MAAK;sCAEJjB,EAAE;;sCAEL,KAACT;4BAAOe,SAASJ;sCAAiBF,EAAE;;;;;;;AAK9C,EAAC"}

package/dist/elements/GenerateConfirmation/index.scss

@@ -4,7 +4,9 @@
   @include blur-bg;
   display: flex;
   align-items: center;
+  justify-content: center;
   height: 100%;
+  padding: base(2);
 
   &__template {
     position: relative;

package/dist/elements/Gutter/index.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { forwardRef } from 'react';
+import './index.scss';
 const baseClass = 'gutter';
 export const Gutter = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { children, className, left = true, negativeLeft = false, negativeRight = false, right = true } = props;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Gutter/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport './index.scss'\n\nexport type GutterProps = {\n  children: React.ReactNode\n  className?: string\n  left?: boolean\n  negativeLeft?: boolean\n  negativeRight?: boolean\n  right?: boolean\n}\n\nconst baseClass = 'gutter'\n\nexport const Gutter = forwardRef<HTMLDivElement, GutterProps>((props, ref) => {\n  const {\n    children,\n    className,\n    left = true,\n    negativeLeft = false,\n    negativeRight = false,\n    right = true,\n  } = props\n\n  const shouldPadLeft = left && !negativeLeft\n  const shouldPadRight = right && !negativeRight\n\n  return (\n    <div\n      className={[\n        shouldPadLeft && `${baseClass}--left`,\n        shouldPadRight && `${baseClass}--right`,\n        negativeLeft && `${baseClass}--negative-left`,\n        negativeRight && `${baseClass}--negative-right`,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      ref={ref}\n    >\n      {children}\n    </div>\n  )\n})\n\nGutter.displayName = 'Gutter'\n"],"names":["React","forwardRef","baseClass","Gutter","props","ref","children","className","left","negativeLeft","negativeRight","right","shouldPadLeft","shouldPadRight","div","filter","Boolean","join","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":";AAAA,OAAOA,SAASC,UAAU,QAAQ,QAAO;AAazC,MAAMC,YAAY;AAElB,OAAO,MAAMC,uBAASF,WAAwC,CAACG,OAAOC;IACpE,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,OAAO,IAAI,EACXC,eAAe,KAAK,EACpBC,gBAAgB,KAAK,EACrBC,QAAQ,IAAI,EACb,GAAGP;IAEJ,MAAMQ,gBAAgBJ,QAAQ,CAACC;IAC/B,MAAMI,iBAAiBF,SAAS,CAACD;IAEjC,qBACE,KAACI;QACCP,WAAW;YACTK,iBAAiB,CAAC,EAAEV,UAAU,MAAM,CAAC;YACrCW,kBAAkB,CAAC,EAAEX,UAAU,OAAO,CAAC;YACvCO,gBAAgB,CAAC,EAAEP,UAAU,eAAe,CAAC;YAC7CQ,iBAAiB,CAAC,EAAER,UAAU,gBAAgB,CAAC;YAC/CK;SACD,CACEQ,MAAM,CAACC,SACPC,IAAI,CAAC;QACRZ,KAAKA;kBAEJC;;AAGP,GAAE;AAEFH,OAAOe,WAAW,GAAG"}
+{"version":3,"sources":["../../../src/elements/Gutter/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport './index.scss'\n\nexport type GutterProps = {\n  children: React.ReactNode\n  className?: string\n  left?: boolean\n  negativeLeft?: boolean\n  negativeRight?: boolean\n  right?: boolean\n}\n\nconst baseClass = 'gutter'\n\nexport const Gutter = forwardRef<HTMLDivElement, GutterProps>((props, ref) => {\n  const {\n    children,\n    className,\n    left = true,\n    negativeLeft = false,\n    negativeRight = false,\n    right = true,\n  } = props\n\n  const shouldPadLeft = left && !negativeLeft\n  const shouldPadRight = right && !negativeRight\n\n  return (\n    <div\n      className={[\n        shouldPadLeft && `${baseClass}--left`,\n        shouldPadRight && `${baseClass}--right`,\n        negativeLeft && `${baseClass}--negative-left`,\n        negativeRight && `${baseClass}--negative-right`,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      ref={ref}\n    >\n      {children}\n    </div>\n  )\n})\n\nGutter.displayName = 'Gutter'\n"],"names":["React","forwardRef","baseClass","Gutter","props","ref","children","className","left","negativeLeft","negativeRight","right","shouldPadLeft","shouldPadRight","div","filter","Boolean","join","displayName"],"mappings":";AAAA,OAAOA,SAASC,UAAU,QAAQ,QAAO;AAEzC,OAAO,eAAc;AAWrB,MAAMC,YAAY;AAElB,OAAO,MAAMC,uBAASF,WAAwC,CAACG,OAAOC;IACpE,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,OAAO,IAAI,EACXC,eAAe,KAAK,EACpBC,gBAAgB,KAAK,EACrBC,QAAQ,IAAI,EACb,GAAGP;IAEJ,MAAMQ,gBAAgBJ,QAAQ,CAACC;IAC/B,MAAMI,iBAAiBF,SAAS,CAACD;IAEjC,qBACE,KAACI;QACCP,WAAW;YACTK,iBAAiB,CAAC,EAAEV,UAAU,MAAM,CAAC;YACrCW,kBAAkB,CAAC,EAAEX,UAAU,OAAO,CAAC;YACvCO,gBAAgB,CAAC,EAAEP,UAAU,eAAe,CAAC;YAC7CQ,iBAAiB,CAAC,EAAER,UAAU,gBAAgB,CAAC;YAC/CK;SACD,CACEQ,MAAM,CAACC,SACPC,IAAI,CAAC;QACRZ,KAAKA;kBAEJC;;AAGP,GAAE;AAEFH,OAAOe,WAAW,GAAG"}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import './index.scss';
 export declare const Hamburger: React.FC<{
-    closeIcon?: 'collapse' | 'x';
-    isActive?: boolean;
+    readonly closeIcon?: 'collapse' | 'x';
+    readonly isActive?: boolean;
 }>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Hamburger/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,UAAU,GAAG,GAAG,CAAA;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAoCA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Hamburger/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,QAAQ,CAAC,SAAS,CAAC,EAAE,UAAU,GAAG,GAAG,CAAA;IACrC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAC5B,CA2BA,CAAA"}