@payloadcms/ui 3.0.0-canary.926cbeb → 3.0.0-canary.95fcd13

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ListControls/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, Where } from 'payload'\n\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useEffect, useRef, useState } from 'react'\nimport AnimateHeightImport from 'react-animate-height'\n\nconst AnimateHeight = (AnimateHeightImport.default ||\n  AnimateHeightImport) as typeof AnimateHeightImport.default\n\nimport type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'\n\nimport { useUseTitleField } from '../../hooks/useUseAsTitle.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useSearchParams } from '../../providers/SearchParams/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ColumnSelector } from '../ColumnSelector/index.js'\nimport { DeleteMany } from '../DeleteMany/index.js'\nimport { EditMany } from '../EditMany/index.js'\nimport { Pill } from '../Pill/index.js'\nimport { PublishMany } from '../PublishMany/index.js'\nimport { SearchFilter } from '../SearchFilter/index.js'\nimport { UnpublishMany } from '../UnpublishMany/index.js'\nimport { WhereBuilder } from '../WhereBuilder/index.js'\nimport validateWhereQuery from '../WhereBuilder/validateWhereQuery.js'\nimport { getTextFieldsToBeSearched } from './getTextFieldsToBeSearched.js'\nimport './index.scss'\n\nconst baseClass = 'list-controls'\n\nexport type ListControlsProps = {\n  collectionConfig: ClientCollectionConfig\n  enableColumns?: boolean\n  enableSort?: boolean\n  fieldMap: FieldMap\n  handleSearchChange?: (search: string) => void\n  handleSortChange?: (sort: string) => void\n  handleWhereChange?: (where: Where) => void\n}\n\n/**\n * The ListControls component is used to render the controls (search, filter, where)\n * for a collection's list view. You can find those directly above the table which lists\n * the collection's documents.\n */\nexport const ListControls: React.FC<ListControlsProps> = (props) => {\n  const { collectionConfig, enableColumns = true, enableSort = false, fieldMap } = props\n\n  const { handleSearchChange } = useListQuery()\n  const { searchParams } = useSearchParams()\n  const titleField = useUseTitleField(collectionConfig, fieldMap)\n  const { i18n, t } = useTranslation()\n  const {\n    breakpoints: { s: smallBreak },\n  } = useWindowInfo()\n\n  const hasWhereParam = useRef(Boolean(searchParams?.where))\n\n  const shouldInitializeWhereOpened = validateWhereQuery(searchParams?.where)\n  const [visibleDrawer, setVisibleDrawer] = useState<'columns' | 'sort' | 'where'>(\n    shouldInitializeWhereOpened ? 'where' : undefined,\n  )\n\n  useEffect(() => {\n    if (hasWhereParam.current && !searchParams?.where) {\n      setVisibleDrawer(undefined)\n      hasWhereParam.current = false\n    } else if (searchParams?.where) {\n      hasWhereParam.current = true\n    }\n  }, [setVisibleDrawer, searchParams?.where])\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__wrap`}>\n        <SearchFilter\n          fieldLabel={\n            (titleField &&\n              getTranslation(\n                'label' in titleField.fieldComponentProps &&\n                  typeof titleField.fieldComponentProps.label === 'string'\n                  ? titleField.fieldComponentProps.label\n                  : titleField.name,\n                i18n,\n              )) ??\n            undefined\n          }\n          fieldName={titleField?.name}\n          handleChange={handleSearchChange}\n          listSearchableFields={getTextFieldsToBeSearched(\n            collectionConfig.admin.listSearchableFields,\n            fieldMap,\n          )}\n        />\n        <div className={`${baseClass}__buttons`}>\n          <div className={`${baseClass}__buttons-wrap`}>\n            {!smallBreak && (\n              <React.Fragment>\n                <EditMany collection={collectionConfig} fieldMap={fieldMap} />\n                <PublishMany collection={collectionConfig} />\n                <UnpublishMany collection={collectionConfig} />\n                <DeleteMany collection={collectionConfig} />\n              </React.Fragment>\n            )}\n            {enableColumns && (\n              <Pill\n                aria-controls={`${baseClass}-columns`}\n                aria-expanded={visibleDrawer === 'columns'}\n                className={`${baseClass}__toggle-columns ${\n                  visibleDrawer === 'columns' ? `${baseClass}__buttons-active` : ''\n                }`}\n                icon={<ChevronIcon />}\n                onClick={() =>\n                  setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : undefined)\n                }\n                pillStyle=\"light\"\n              >\n                {t('general:columns')}\n              </Pill>\n            )}\n            <Pill\n              aria-controls={`${baseClass}-where`}\n              aria-expanded={visibleDrawer === 'where'}\n              className={`${baseClass}__toggle-where ${\n                visibleDrawer === 'where' ? `${baseClass}__buttons-active` : ''\n              }`}\n              icon={<ChevronIcon />}\n              onClick={() => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined)}\n              pillStyle=\"light\"\n            >\n              {t('general:filters')}\n            </Pill>\n            {enableSort && (\n              <Pill\n                aria-controls={`${baseClass}-sort`}\n                aria-expanded={visibleDrawer === 'sort'}\n                className={`${baseClass}__toggle-sort`}\n                icon={<ChevronIcon />}\n                onClick={() => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined)}\n                pillStyle=\"light\"\n              >\n                {t('general:sort')}\n              </Pill>\n            )}\n          </div>\n        </div>\n      </div>\n      {enableColumns && (\n        <AnimateHeight\n          className={`${baseClass}__columns`}\n          height={visibleDrawer === 'columns' ? 'auto' : 0}\n          id={`${baseClass}-columns`}\n        >\n          <ColumnSelector collectionSlug={collectionConfig.slug} />\n        </AnimateHeight>\n      )}\n      <AnimateHeight\n        className={`${baseClass}__where`}\n        height={visibleDrawer === 'where' ? 'auto' : 0}\n        id={`${baseClass}-where`}\n      >\n        <WhereBuilder\n          collectionPluralLabel={collectionConfig?.labels?.plural}\n          collectionSlug={collectionConfig.slug}\n          fieldMap={fieldMap}\n          key={String(hasWhereParam.current && !searchParams?.where)}\n        />\n      </AnimateHeight>\n      {enableSort && (\n        <AnimateHeight\n          className={`${baseClass}__sort`}\n          height={visibleDrawer === 'sort' ? 'auto' : 0}\n          id={`${baseClass}-sort`}\n        >\n          <p>Sort Complex</p>\n          {/* <SortComplex\n            collection={collection}\n            handleChange={handleSortChange}\n            modifySearchQuery={modifySearchQuery}\n          /> */}\n        </AnimateHeight>\n      )}\n    </div>\n  )\n}\n"],"names":["useWindowInfo","getTranslation","React","useEffect","useRef","useState","AnimateHeightImport","AnimateHeight","default","useUseTitleField","ChevronIcon","useListQuery","useSearchParams","useTranslation","ColumnSelector","DeleteMany","EditMany","Pill","PublishMany","SearchFilter","UnpublishMany","WhereBuilder","validateWhereQuery","getTextFieldsToBeSearched","baseClass","ListControls","props","collectionConfig","enableColumns","enableSort","fieldMap","handleSearchChange","searchParams","titleField","i18n","t","breakpoints","s","smallBreak","hasWhereParam","Boolean","where","shouldInitializeWhereOpened","visibleDrawer","setVisibleDrawer","undefined","current","div","className","fieldLabel","fieldComponentProps","label","name","fieldName","handleChange","listSearchableFields","admin","Fragment","collection","aria-controls","aria-expanded","icon","onClick","pillStyle","height","id","collectionSlug","slug","collectionPluralLabel","labels","plural","String","p"],"mappings":"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"}
+{"version":3,"sources":["../../../src/elements/ListControls/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, FieldMap, Where } from 'payload'\n\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useEffect, useRef, useState } from 'react'\nimport AnimateHeightImport from 'react-animate-height'\n\nconst AnimateHeight = (AnimateHeightImport.default ||\n  AnimateHeightImport) as typeof AnimateHeightImport.default\n\nimport { useListInfo } from '@payloadcms/ui'\n\nimport { useUseTitleField } from '../../hooks/useUseAsTitle.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { SearchIcon } from '../../icons/Search/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useSearchParams } from '../../providers/SearchParams/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ColumnSelector } from '../ColumnSelector/index.js'\nimport { DeleteMany } from '../DeleteMany/index.js'\nimport { EditMany } from '../EditMany/index.js'\nimport { Pill } from '../Pill/index.js'\nimport { PublishMany } from '../PublishMany/index.js'\nimport { SearchFilter } from '../SearchFilter/index.js'\nimport { UnpublishMany } from '../UnpublishMany/index.js'\nimport { WhereBuilder } from '../WhereBuilder/index.js'\nimport validateWhereQuery from '../WhereBuilder/validateWhereQuery.js'\nimport { getTextFieldsToBeSearched } from './getTextFieldsToBeSearched.js'\nimport './index.scss'\n\nconst baseClass = 'list-controls'\n\nexport type ListControlsProps = {\n  collectionConfig: ClientCollectionConfig\n  enableColumns?: boolean\n  enableSort?: boolean\n  fieldMap: FieldMap\n  handleSearchChange?: (search: string) => void\n  handleSortChange?: (sort: string) => void\n  handleWhereChange?: (where: Where) => void\n}\n\n/**\n * The ListControls component is used to render the controls (search, filter, where)\n * for a collection's list view. You can find those directly above the table which lists\n * the collection's documents.\n */\nexport const ListControls: React.FC<ListControlsProps> = (props) => {\n  const { collectionConfig, enableColumns = true, enableSort = false, fieldMap } = props\n\n  const { handleSearchChange } = useListQuery()\n  const { collectionSlug } = useListInfo()\n  const { searchParams } = useSearchParams()\n  const titleField = useUseTitleField(collectionConfig, fieldMap)\n  const { i18n, t } = useTranslation()\n  const {\n    breakpoints: { s: smallBreak },\n  } = useWindowInfo()\n  const [search, setSearch] = useState(\n    typeof searchParams?.search === 'string' ? searchParams?.search : '',\n  )\n\n  const searchLabel =\n    (titleField &&\n      getTranslation(\n        'label' in titleField.fieldComponentProps &&\n          typeof titleField.fieldComponentProps.label === 'string'\n          ? titleField.fieldComponentProps.label\n          : titleField.name,\n        i18n,\n      )) ??\n    'ID'\n\n  const listSearchableFields = getTextFieldsToBeSearched(\n    collectionConfig.admin.listSearchableFields,\n    fieldMap,\n  )\n\n  const searchLabelTranslated = useRef(\n    t('general:searchBy', { label: getTranslation(searchLabel, i18n) }),\n  )\n\n  const hasWhereParam = useRef(Boolean(searchParams?.where))\n\n  const shouldInitializeWhereOpened = validateWhereQuery(searchParams?.where)\n  const [visibleDrawer, setVisibleDrawer] = useState<'columns' | 'sort' | 'where'>(\n    shouldInitializeWhereOpened ? 'where' : undefined,\n  )\n\n  useEffect(() => {\n    if (hasWhereParam.current && !searchParams?.where) {\n      setVisibleDrawer(undefined)\n      hasWhereParam.current = false\n    } else if (searchParams?.where) {\n      hasWhereParam.current = true\n    }\n  }, [setVisibleDrawer, searchParams?.where])\n\n  useEffect(() => {\n    if (listSearchableFields?.length > 0) {\n      searchLabelTranslated.current = listSearchableFields.reduce(\n        (placeholderText: string, field, i: number) => {\n          const label =\n            'fieldComponentProps' in field &&\n            'label' in field.fieldComponentProps &&\n            field.fieldComponentProps.label\n              ? field.fieldComponentProps.label\n              : field.name\n\n          if (i === 0) {\n            return `${t('general:searchBy', {\n              label: getTranslation(label, i18n),\n            })}`\n          }\n\n          if (i === listSearchableFields.length - 1) {\n            return `${placeholderText} ${t('general:or')} ${getTranslation(label, i18n)}`\n          }\n\n          return `${placeholderText}, ${getTranslation(label, i18n)}`\n        },\n        '',\n      )\n    } else {\n      searchLabelTranslated.current = t('general:searchBy', {\n        label: getTranslation(searchLabel, i18n),\n      })\n    }\n  }, [t, listSearchableFields, i18n, searchLabel])\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__wrap`}>\n        <SearchIcon />\n        <SearchFilter\n          fieldName={titleField?.name}\n          handleChange={(search) => {\n            return void handleSearchChange(search)\n          }}\n          initialParams={searchParams}\n          key={collectionSlug}\n          label={searchLabelTranslated.current}\n          setValue={setSearch}\n          value={search}\n        />\n        <div className={`${baseClass}__buttons`}>\n          <div className={`${baseClass}__buttons-wrap`}>\n            {!smallBreak && (\n              <React.Fragment>\n                <EditMany collection={collectionConfig} fieldMap={fieldMap} />\n                <PublishMany collection={collectionConfig} />\n                <UnpublishMany collection={collectionConfig} />\n                <DeleteMany collection={collectionConfig} />\n              </React.Fragment>\n            )}\n            {enableColumns && (\n              <Pill\n                aria-controls={`${baseClass}-columns`}\n                aria-expanded={visibleDrawer === 'columns'}\n                className={`${baseClass}__toggle-columns ${\n                  visibleDrawer === 'columns' ? `${baseClass}__buttons-active` : ''\n                }`}\n                icon={<ChevronIcon />}\n                onClick={() =>\n                  setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : undefined)\n                }\n                pillStyle=\"light\"\n              >\n                {t('general:columns')}\n              </Pill>\n            )}\n            <Pill\n              aria-controls={`${baseClass}-where`}\n              aria-expanded={visibleDrawer === 'where'}\n              className={`${baseClass}__toggle-where ${\n                visibleDrawer === 'where' ? `${baseClass}__buttons-active` : ''\n              }`}\n              icon={<ChevronIcon />}\n              onClick={() => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined)}\n              pillStyle=\"light\"\n            >\n              {t('general:filters')}\n            </Pill>\n            {enableSort && (\n              <Pill\n                aria-controls={`${baseClass}-sort`}\n                aria-expanded={visibleDrawer === 'sort'}\n                className={`${baseClass}__toggle-sort`}\n                icon={<ChevronIcon />}\n                onClick={() => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined)}\n                pillStyle=\"light\"\n              >\n                {t('general:sort')}\n              </Pill>\n            )}\n          </div>\n        </div>\n      </div>\n      {enableColumns && (\n        <AnimateHeight\n          className={`${baseClass}__columns`}\n          height={visibleDrawer === 'columns' ? 'auto' : 0}\n          id={`${baseClass}-columns`}\n        >\n          <ColumnSelector collectionSlug={collectionConfig.slug} />\n        </AnimateHeight>\n      )}\n      <AnimateHeight\n        className={`${baseClass}__where`}\n        height={visibleDrawer === 'where' ? 'auto' : 0}\n        id={`${baseClass}-where`}\n      >\n        <WhereBuilder\n          collectionPluralLabel={collectionConfig?.labels?.plural}\n          collectionSlug={collectionConfig.slug}\n          fieldMap={fieldMap}\n          key={String(hasWhereParam.current && !searchParams?.where)}\n        />\n      </AnimateHeight>\n      {enableSort && (\n        <AnimateHeight\n          className={`${baseClass}__sort`}\n          height={visibleDrawer === 'sort' ? 'auto' : 0}\n          id={`${baseClass}-sort`}\n        >\n          <p>Sort Complex</p>\n          {/* <SortComplex\n            collection={collection}\n            handleChange={handleSortChange}\n            modifySearchQuery={modifySearchQuery}\n          /> */}\n        </AnimateHeight>\n      )}\n    </div>\n  )\n}\n"],"names":["useWindowInfo","getTranslation","React","useEffect","useRef","useState","AnimateHeightImport","AnimateHeight","default","useListInfo","useUseTitleField","ChevronIcon","SearchIcon","useListQuery","useSearchParams","useTranslation","ColumnSelector","DeleteMany","EditMany","Pill","PublishMany","SearchFilter","UnpublishMany","WhereBuilder","validateWhereQuery","getTextFieldsToBeSearched","baseClass","ListControls","props","collectionConfig","enableColumns","enableSort","fieldMap","handleSearchChange","collectionSlug","searchParams","titleField","i18n","t","breakpoints","s","smallBreak","search","setSearch","searchLabel","fieldComponentProps","label","name","listSearchableFields","admin","searchLabelTranslated","hasWhereParam","Boolean","where","shouldInitializeWhereOpened","visibleDrawer","setVisibleDrawer","undefined","current","length","reduce","placeholderText","field","i","div","className","fieldName","handleChange","initialParams","setValue","value","Fragment","collection","aria-controls","aria-expanded","icon","onClick","pillStyle","height","id","slug","collectionPluralLabel","labels","plural","String","p"],"mappings":"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"}

package/dist/elements/ListControls/index.scss

@@ -5,6 +5,9 @@
     display: flex;
     align-items: center;
     background-color: var(--theme-elevation-50);
+    border-radius: var(--style-radius-m);
+    padding: base(0.6);
+    gap: base(0.6);
   }
 
   .search-filter {
@@ -18,21 +21,13 @@
   &__buttons-wrap {
     display: flex;
     align-items: center;
-    gap: base(0.5);
-
-    [dir='ltr'] & {
-      margin-right: base(0.5);
-    }
-
-    [dir='rtl'] & {
-      margin-left: base(0.5);
-    }
+    gap: base(0.2);
 
     .pill {
-      background-color: var(--theme-elevation-200);
+      background-color: var(--theme-elevation-150);
 
       &:hover {
-        background-color: var(--theme-elevation-150);
+        background-color: var(--theme-elevation-100);
       }
     }
   }
@@ -56,7 +51,6 @@
     }
 
     .search-filter {
-      margin-bottom: base(0.5);
       width: 100%;
     }
 

package/dist/elements/ListDrawer/types.d.ts

@@ -12,12 +12,12 @@ export type ListDrawerProps = {
     }) => void;
     selectedCollection?: string;
 };
-export type ListTogglerProps = HTMLAttributes<HTMLButtonElement> & {
+export type ListTogglerProps = {
     children?: React.ReactNode;
     className?: string;
     disabled?: boolean;
     drawerSlug?: string;
-};
+} & HTMLAttributes<HTMLButtonElement>;
 export type UseListDrawer = (args: {
     collectionSlugs?: string[];
     filterOptions?: FilterOptionsResult;

package/dist/elements/ListDrawer/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/ListDrawer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAC7E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,MAAM,MAAM,eAAe,GAAG;IAC5B,eAAe,EAAE,MAAM,EAAE,CAAA;IACzB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,aAAa,CAAC,EAAE,mBAAmB,CAAA;IACnC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IAC/F,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,iBAAiB,CAAC,GAAG;IACjE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,aAAa,GAAG,CAAC,IAAI,EAAE;IACjC,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,aAAa,CAAC,EAAE,mBAAmB,CAAA;IACnC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,KAAK;IACJ,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;IAC3C,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,WAAW,GAAG,UAAU,CAAC,CAAC;IACvE;QACE,WAAW,EAAE,MAAM,IAAI,CAAA;QACvB,WAAW,EAAE,MAAM,CAAA;QACnB,UAAU,EAAE,MAAM,CAAA;QAClB,YAAY,EAAE,OAAO,CAAA;QACrB,UAAU,EAAE,MAAM,IAAI,CAAA;QACtB,YAAY,EAAE,MAAM,IAAI,CAAA;KACzB;CACF,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/ListDrawer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAC7E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,MAAM,MAAM,eAAe,GAAG;IAC5B,eAAe,EAAE,MAAM,EAAE,CAAA;IACzB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,aAAa,CAAC,EAAE,mBAAmB,CAAA;IACnC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IAC/F,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAA;AAErC,MAAM,MAAM,aAAa,GAAG,CAAC,IAAI,EAAE;IACjC,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,aAAa,CAAC,EAAE,mBAAmB,CAAA;IACnC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,KAAK;IACJ,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;IAC3C,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,WAAW,GAAG,UAAU,CAAC,CAAC;IACvE;QACE,WAAW,EAAE,MAAM,IAAI,CAAA;QACvB,WAAW,EAAE,MAAM,CAAA;QACnB,UAAU,EAAE,MAAM,CAAA;QAClB,YAAY,EAAE,OAAO,CAAA;QACrB,UAAU,EAAE,MAAM,IAAI,CAAA;QACtB,YAAY,EAAE,MAAM,IAAI,CAAA;KACzB;CACF,CAAA"}

package/dist/elements/ListDrawer/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ListDrawer/types.ts"],"sourcesContent":["import type { FilterOptionsResult, SanitizedCollectionConfig } from 'payload'\nimport type React from 'react'\nimport type { HTMLAttributes } from 'react'\n\nexport type ListDrawerProps = {\n  collectionSlugs: string[]\n  customHeader?: React.ReactNode\n  drawerSlug?: string\n  filterOptions?: FilterOptionsResult\n  onSelect?: (args: { collectionSlug: SanitizedCollectionConfig['slug']; docID: string }) => void\n  selectedCollection?: string\n}\n\nexport type ListTogglerProps = HTMLAttributes<HTMLButtonElement> & {\n  children?: React.ReactNode\n  className?: string\n  disabled?: boolean\n  drawerSlug?: string\n}\n\nexport type UseListDrawer = (args: {\n  collectionSlugs?: string[]\n  filterOptions?: FilterOptionsResult\n  selectedCollection?: string\n  uploads?: boolean // finds all collections with upload: true\n}) => [\n  React.FC<Pick<ListDrawerProps, 'onSelect'>>, // drawer\n  React.FC<Pick<ListTogglerProps, 'children' | 'className' | 'disabled'>>, // toggler\n  {\n    closeDrawer: () => void\n    drawerDepth: number\n    drawerSlug: string\n    isDrawerOpen: boolean\n    openDrawer: () => void\n    toggleDrawer: () => void\n  },\n]\n"],"names":[],"mappings":"AAoBA,WAgBC"}
+{"version":3,"sources":["../../../src/elements/ListDrawer/types.ts"],"sourcesContent":["import type { FilterOptionsResult, SanitizedCollectionConfig } from 'payload'\nimport type React from 'react'\nimport type { HTMLAttributes } from 'react'\n\nexport type ListDrawerProps = {\n  collectionSlugs: string[]\n  customHeader?: React.ReactNode\n  drawerSlug?: string\n  filterOptions?: FilterOptionsResult\n  onSelect?: (args: { collectionSlug: SanitizedCollectionConfig['slug']; docID: string }) => void\n  selectedCollection?: string\n}\n\nexport type ListTogglerProps = {\n  children?: React.ReactNode\n  className?: string\n  disabled?: boolean\n  drawerSlug?: string\n} & HTMLAttributes<HTMLButtonElement>\n\nexport type UseListDrawer = (args: {\n  collectionSlugs?: string[]\n  filterOptions?: FilterOptionsResult\n  selectedCollection?: string\n  uploads?: boolean // finds all collections with upload: true\n}) => [\n  React.FC<Pick<ListDrawerProps, 'onSelect'>>, // drawer\n  React.FC<Pick<ListTogglerProps, 'children' | 'className' | 'disabled'>>, // toggler\n  {\n    closeDrawer: () => void\n    drawerDepth: number\n    drawerSlug: string\n    isDrawerOpen: boolean\n    openDrawer: () => void\n    toggleDrawer: () => void\n  },\n]\n"],"names":[],"mappings":"AAoBA,WAgBC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Localizer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAuDA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Localizer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAgDA,CAAA"}

package/dist/elements/Localizer/index.js

@@ -1,11 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
-import { useRouter } from 'next/navigation.js';
 import React from 'react';
 import { useConfig } from '../../providers/Config/index.js';
 import { useLocale } from '../../providers/Locale/index.js';
-import { useRouteCache } from '../../providers/RouteCache/index.js';
 import { useSearchParams } from '../../providers/SearchParams/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { Popup, PopupList } from '../Popup/index.js';
@@ -19,8 +17,6 @@ export const Localizer = (props)=>{
     const { i18n } = useTranslation();
     const locale = useLocale();
     const { stringifyParams } = useSearchParams();
-    const router = useRouter();
-    const { clearRouteCache } = useRouteCache();
     if (localization) {
         const { locales } = localization;
         return /*#__PURE__*/ _jsx("div", {
@@ -36,15 +32,12 @@ export const Localizer = (props)=>{
                             const localeOptionLabel = getTranslation(localeOption.label, i18n);
                             return /*#__PURE__*/ _jsxs(PopupList.Button, {
                                 active: locale.code === localeOption.code,
-                                onClick: ()=>{
-                                    router.replace(stringifyParams({
-                                        params: {
-                                            locale: localeOption.code
-                                        }
-                                    }));
-                                    clearRouteCache();
-                                    close();
-                                },
+                                href: stringifyParams({
+                                    params: {
+                                        locale: localeOption.code
+                                    }
+                                }),
+                                onClick: close,
                                 children: [
                                     localeOptionLabel,
                                     localeOptionLabel !== localeOption.code && ` (${localeOption.code})`

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Localizer/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport { useRouter } from 'next/navigation.js'\nimport React from 'react'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useRouteCache } from '../../providers/RouteCache/index.js'\nimport { useSearchParams } from '../../providers/SearchParams/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport { LocalizerLabel } from './LocalizerLabel/index.js'\nimport './index.scss'\n\nconst baseClass = 'localizer'\n\nexport const Localizer: React.FC<{\n  className?: string\n}> = (props) => {\n  const { className } = props\n  const config = useConfig()\n  const { localization } = config\n\n  const { i18n } = useTranslation()\n  const locale = useLocale()\n  const { stringifyParams } = useSearchParams()\n  const router = useRouter()\n  const { clearRouteCache } = useRouteCache()\n\n  if (localization) {\n    const { locales } = localization\n\n    return (\n      <div className={[baseClass, className].filter(Boolean).join(' ')}>\n        <Popup\n          button={<LocalizerLabel />}\n          horizontalAlign=\"right\"\n          render={({ close }) => (\n            <PopupList.ButtonGroup>\n              {locales.map((localeOption) => {\n                const localeOptionLabel = getTranslation(localeOption.label, i18n)\n\n                return (\n                  <PopupList.Button\n                    active={locale.code === localeOption.code}\n                    key={localeOption.code}\n                    onClick={() => {\n                      router.replace(\n                        stringifyParams({\n                          params: {\n                            locale: localeOption.code,\n                          },\n                        }),\n                      )\n                      clearRouteCache()\n                      close()\n                    }}\n                  >\n                    {localeOptionLabel}\n                    {localeOptionLabel !== localeOption.code && ` (${localeOption.code})`}\n                  </PopupList.Button>\n                )\n              })}\n            </PopupList.ButtonGroup>\n          )}\n          showScrollbar\n          size=\"large\"\n        />\n      </div>\n    )\n  }\n\n  return null\n}\n"],"names":["getTranslation","useRouter","React","useConfig","useLocale","useRouteCache","useSearchParams","useTranslation","Popup","PopupList","LocalizerLabel","baseClass","Localizer","props","className","config","localization","i18n","locale","stringifyParams","router","clearRouteCache","locales","div","filter","Boolean","join","button","horizontalAlign","render","close","ButtonGroup","map","localeOption","localeOptionLabel","label","Button","active","code","onClick","replace","params","showScrollbar","size"],"mappings":"AAAA;;AACA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,SAASC,SAAS,QAAQ,qBAAoB;AAC9C,OAAOC,WAAW,QAAO;AAEzB,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,aAAa,QAAQ,sCAAqC;AACnE,SAASC,eAAe,QAAQ,wCAAuC;AACvE,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,KAAK,EAAEC,SAAS,QAAQ,oBAAmB;AACpD,SAASC,cAAc,QAAQ,4BAA2B;AAC1D,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,YAER,CAACC;IACJ,MAAM,EAAEC,SAAS,EAAE,GAAGD;IACtB,MAAME,SAASZ;IACf,MAAM,EAAEa,YAAY,EAAE,GAAGD;IAEzB,MAAM,EAAEE,IAAI,EAAE,GAAGV;IACjB,MAAMW,SAASd;IACf,MAAM,EAAEe,eAAe,EAAE,GAAGb;IAC5B,MAAMc,SAASnB;IACf,MAAM,EAAEoB,eAAe,EAAE,GAAGhB;IAE5B,IAAIW,cAAc;QAChB,MAAM,EAAEM,OAAO,EAAE,GAAGN;QAEpB,qBACE,KAACO;YAAIT,WAAW;gBAACH;gBAAWG;aAAU,CAACU,MAAM,CAACC,SAASC,IAAI,CAAC;sBAC1D,cAAA,KAAClB;gBACCmB,sBAAQ,KAACjB;gBACTkB,iBAAgB;gBAChBC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,KAACrB,UAAUsB,WAAW;kCACnBT,QAAQU,GAAG,CAAC,CAACC;4BACZ,MAAMC,oBAAoBlC,eAAeiC,aAAaE,KAAK,EAAElB;4BAE7D,qBACE,MAACR,UAAU2B,MAAM;gCACfC,QAAQnB,OAAOoB,IAAI,KAAKL,aAAaK,IAAI;gCAEzCC,SAAS;oCACPnB,OAAOoB,OAAO,CACZrB,gBAAgB;wCACdsB,QAAQ;4CACNvB,QAAQe,aAAaK,IAAI;wCAC3B;oCACF;oCAEFjB;oCACAS;gCACF;;oCAECI;oCACAA,sBAAsBD,aAAaK,IAAI,IAAI,CAAC,EAAE,EAAEL,aAAaK,IAAI,CAAC,CAAC,CAAC;;+BAdhEL,aAAaK,IAAI;wBAiB5B;;gBAGJI,aAAa;gBACbC,MAAK;;;IAIb;IAEA,OAAO;AACT,EAAC"}
+{"version":3,"sources":["../../../src/elements/Localizer/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useSearchParams } from '../../providers/SearchParams/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport { LocalizerLabel } from './LocalizerLabel/index.js'\nimport './index.scss'\n\nconst baseClass = 'localizer'\n\nexport const Localizer: React.FC<{\n  className?: string\n}> = (props) => {\n  const { className } = props\n  const config = useConfig()\n  const { localization } = config\n\n  const { i18n } = useTranslation()\n  const locale = useLocale()\n  const { stringifyParams } = useSearchParams()\n\n  if (localization) {\n    const { locales } = localization\n\n    return (\n      <div className={[baseClass, className].filter(Boolean).join(' ')}>\n        <Popup\n          button={<LocalizerLabel />}\n          horizontalAlign=\"right\"\n          render={({ close }) => (\n            <PopupList.ButtonGroup>\n              {locales.map((localeOption) => {\n                const localeOptionLabel = getTranslation(localeOption.label, i18n)\n\n                return (\n                  <PopupList.Button\n                    active={locale.code === localeOption.code}\n                    href={stringifyParams({\n                      params: {\n                        locale: localeOption.code,\n                      },\n                    })}\n                    key={localeOption.code}\n                    onClick={close}\n                  >\n                    {localeOptionLabel}\n                    {localeOptionLabel !== localeOption.code && ` (${localeOption.code})`}\n                  </PopupList.Button>\n                )\n              })}\n            </PopupList.ButtonGroup>\n          )}\n          showScrollbar\n          size=\"large\"\n        />\n      </div>\n    )\n  }\n\n  return null\n}\n"],"names":["getTranslation","React","useConfig","useLocale","useSearchParams","useTranslation","Popup","PopupList","LocalizerLabel","baseClass","Localizer","props","className","config","localization","i18n","locale","stringifyParams","locales","div","filter","Boolean","join","button","horizontalAlign","render","close","ButtonGroup","map","localeOption","localeOptionLabel","label","Button","active","code","href","params","onClick","showScrollbar","size"],"mappings":"AAAA;;AACA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,WAAW,QAAO;AAEzB,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,eAAe,QAAQ,wCAAuC;AACvE,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,KAAK,EAAEC,SAAS,QAAQ,oBAAmB;AACpD,SAASC,cAAc,QAAQ,4BAA2B;AAC1D,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,YAER,CAACC;IACJ,MAAM,EAAEC,SAAS,EAAE,GAAGD;IACtB,MAAME,SAASX;IACf,MAAM,EAAEY,YAAY,EAAE,GAAGD;IAEzB,MAAM,EAAEE,IAAI,EAAE,GAAGV;IACjB,MAAMW,SAASb;IACf,MAAM,EAAEc,eAAe,EAAE,GAAGb;IAE5B,IAAIU,cAAc;QAChB,MAAM,EAAEI,OAAO,EAAE,GAAGJ;QAEpB,qBACE,KAACK;YAAIP,WAAW;gBAACH;gBAAWG;aAAU,CAACQ,MAAM,CAACC,SAASC,IAAI,CAAC;sBAC1D,cAAA,KAAChB;gBACCiB,sBAAQ,KAACf;gBACTgB,iBAAgB;gBAChBC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,KAACnB,UAAUoB,WAAW;kCACnBT,QAAQU,GAAG,CAAC,CAACC;4BACZ,MAAMC,oBAAoB9B,eAAe6B,aAAaE,KAAK,EAAEhB;4BAE7D,qBACE,MAACR,UAAUyB,MAAM;gCACfC,QAAQjB,OAAOkB,IAAI,KAAKL,aAAaK,IAAI;gCACzCC,MAAMlB,gBAAgB;oCACpBmB,QAAQ;wCACNpB,QAAQa,aAAaK,IAAI;oCAC3B;gCACF;gCAEAG,SAASX;;oCAERI;oCACAA,sBAAsBD,aAAaK,IAAI,IAAI,CAAC,EAAE,EAAEL,aAAaK,IAAI,CAAC,CAAC,CAAC;;+BAJhEL,aAAaK,IAAI;wBAO5B;;gBAGJI,aAAa;gBACbC,MAAK;;;IAIb;IAEA,OAAO;AACT,EAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Logout/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAuCvC,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC;IAC5B,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAUA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Logout/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AA2CvC,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC;IAC5B,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAUA,CAAA"}

package/dist/elements/Logout/index.js

@@ -5,17 +5,22 @@ import { LogOutIcon } from '../../icons/LogOut/index.js';
 import { useComponentMap } from '../../providers/ComponentMap/index.js';
 import { useConfig } from '../../providers/Config/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
+import { formatAdminURL } from '../../utilities/formatAdminURL.js';
 const baseClass = 'nav';
 const DefaultLogout = ({ Link, tabIndex })=>{
     const { t } = useTranslation();
     const config = useConfig();
-    const { admin: { routes: { logout: logoutRoute } }, routes: { admin } } = config;
+    const { admin: { routes: { logout: logoutRoute } }, routes: { admin: adminRoute } } = config;
     const basePath = process.env.NEXT_BASE_PATH ?? '';
     const LinkElement = Link || 'a';
     return /*#__PURE__*/ _jsx(LinkElement, {
         "aria-label": t('authentication:logOut'),
         className: `${baseClass}__log-out`,
-        href: `${basePath}${admin}${logoutRoute}`,
+        href: formatAdminURL({
+            adminRoute,
+            basePath,
+            path: logoutRoute
+        }),
         tabIndex: tabIndex,
         children: /*#__PURE__*/ _jsx(LogOutIcon, {})
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Logout/index.tsx"],"sourcesContent":["'use client'\nimport React, { Fragment } from 'react'\n\nimport { LogOutIcon } from '../../icons/LogOut/index.js'\nimport { useComponentMap } from '../../providers/ComponentMap/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\n\nconst baseClass = 'nav'\n\nconst DefaultLogout: React.FC<{\n  Link: React.ComponentType\n  tabIndex?: number\n}> = ({ Link, tabIndex }) => {\n  const { t } = useTranslation()\n  const config = useConfig()\n\n  const {\n    admin: {\n      routes: { logout: logoutRoute },\n    },\n    routes: { admin },\n  } = config\n\n  const basePath = process.env.NEXT_BASE_PATH ?? ''\n\n  const LinkElement = Link || 'a'\n\n  return (\n    <LinkElement\n      aria-label={t('authentication:logOut')}\n      className={`${baseClass}__log-out`}\n      href={`${basePath}${admin}${logoutRoute}`}\n      tabIndex={tabIndex}\n    >\n      <LogOutIcon />\n    </LinkElement>\n  )\n}\n\nexport const Logout: React.FC<{\n  Link?: React.ComponentType\n  tabIndex?: number\n}> = ({ Link, tabIndex = 0 }) => {\n  const {\n    componentMap: { LogoutButton: CustomLogout },\n  } = useComponentMap()\n\n  if (CustomLogout) {\n    return <Fragment>{CustomLogout}</Fragment>\n  }\n\n  return <DefaultLogout Link={Link} tabIndex={tabIndex} />\n}\n"],"names":["React","Fragment","LogOutIcon","useComponentMap","useConfig","useTranslation","baseClass","DefaultLogout","Link","tabIndex","t","config","admin","routes","logout","logoutRoute","basePath","process","env","NEXT_BASE_PATH","LinkElement","aria-label","className","href","Logout","componentMap","LogoutButton","CustomLogout"],"mappings":"AAAA;;AACA,OAAOA,SAASC,QAAQ,QAAQ,QAAO;AAEvC,SAASC,UAAU,QAAQ,8BAA6B;AACxD,SAASC,eAAe,QAAQ,wCAAuC;AACvE,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,cAAc,QAAQ,uCAAsC;AAErE,MAAMC,YAAY;AAElB,MAAMC,gBAGD,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAE;IACtB,MAAM,EAAEC,CAAC,EAAE,GAAGL;IACd,MAAMM,SAASP;IAEf,MAAM,EACJQ,OAAO,EACLC,QAAQ,EAAEC,QAAQC,WAAW,EAAE,EAChC,EACDF,QAAQ,EAAED,KAAK,EAAE,EAClB,GAAGD;IAEJ,MAAMK,WAAWC,QAAQC,GAAG,CAACC,cAAc,IAAI;IAE/C,MAAMC,cAAcZ,QAAQ;IAE5B,qBACE,KAACY;QACCC,cAAYX,EAAE;QACdY,WAAW,CAAC,EAAEhB,UAAU,SAAS,CAAC;QAClCiB,MAAM,CAAC,EAAEP,SAAS,EAAEJ,MAAM,EAAEG,YAAY,CAAC;QACzCN,UAAUA;kBAEV,cAAA,KAACP;;AAGP;AAEA,OAAO,MAAMsB,SAGR,CAAC,EAAEhB,IAAI,EAAEC,WAAW,CAAC,EAAE;IAC1B,MAAM,EACJgB,cAAc,EAAEC,cAAcC,YAAY,EAAE,EAC7C,GAAGxB;IAEJ,IAAIwB,cAAc;QAChB,qBAAO,KAAC1B;sBAAU0B;;IACpB;IAEA,qBAAO,KAACpB;QAAcC,MAAMA;QAAMC,UAAUA;;AAC9C,EAAC"}
+{"version":3,"sources":["../../../src/elements/Logout/index.tsx"],"sourcesContent":["'use client'\nimport React, { Fragment } from 'react'\n\nimport { LogOutIcon } from '../../icons/LogOut/index.js'\nimport { useComponentMap } from '../../providers/ComponentMap/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { formatAdminURL } from '../../utilities/formatAdminURL.js'\n\nconst baseClass = 'nav'\n\nconst DefaultLogout: React.FC<{\n  Link: React.ComponentType\n  tabIndex?: number\n}> = ({ Link, tabIndex }) => {\n  const { t } = useTranslation()\n  const config = useConfig()\n\n  const {\n    admin: {\n      routes: { logout: logoutRoute },\n    },\n    routes: { admin: adminRoute },\n  } = config\n\n  const basePath = process.env.NEXT_BASE_PATH ?? ''\n  const LinkElement = Link || 'a'\n\n  return (\n    <LinkElement\n      aria-label={t('authentication:logOut')}\n      className={`${baseClass}__log-out`}\n      href={formatAdminURL({\n        adminRoute,\n        basePath,\n        path: logoutRoute,\n      })}\n      tabIndex={tabIndex}\n    >\n      <LogOutIcon />\n    </LinkElement>\n  )\n}\n\nexport const Logout: React.FC<{\n  Link?: React.ComponentType\n  tabIndex?: number\n}> = ({ Link, tabIndex = 0 }) => {\n  const {\n    componentMap: { LogoutButton: CustomLogout },\n  } = useComponentMap()\n\n  if (CustomLogout) {\n    return <Fragment>{CustomLogout}</Fragment>\n  }\n\n  return <DefaultLogout Link={Link} tabIndex={tabIndex} />\n}\n"],"names":["React","Fragment","LogOutIcon","useComponentMap","useConfig","useTranslation","formatAdminURL","baseClass","DefaultLogout","Link","tabIndex","t","config","admin","routes","logout","logoutRoute","adminRoute","basePath","process","env","NEXT_BASE_PATH","LinkElement","aria-label","className","href","path","Logout","componentMap","LogoutButton","CustomLogout"],"mappings":"AAAA;;AACA,OAAOA,SAASC,QAAQ,QAAQ,QAAO;AAEvC,SAASC,UAAU,QAAQ,8BAA6B;AACxD,SAASC,eAAe,QAAQ,wCAAuC;AACvE,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,cAAc,QAAQ,oCAAmC;AAElE,MAAMC,YAAY;AAElB,MAAMC,gBAGD,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAE;IACtB,MAAM,EAAEC,CAAC,EAAE,GAAGN;IACd,MAAMO,SAASR;IAEf,MAAM,EACJS,OAAO,EACLC,QAAQ,EAAEC,QAAQC,WAAW,EAAE,EAChC,EACDF,QAAQ,EAAED,OAAOI,UAAU,EAAE,EAC9B,GAAGL;IAEJ,MAAMM,WAAWC,QAAQC,GAAG,CAACC,cAAc,IAAI;IAC/C,MAAMC,cAAcb,QAAQ;IAE5B,qBACE,KAACa;QACCC,cAAYZ,EAAE;QACda,WAAW,CAAC,EAAEjB,UAAU,SAAS,CAAC;QAClCkB,MAAMnB,eAAe;YACnBW;YACAC;YACAQ,MAAMV;QACR;QACAN,UAAUA;kBAEV,cAAA,KAACR;;AAGP;AAEA,OAAO,MAAMyB,SAGR,CAAC,EAAElB,IAAI,EAAEC,WAAW,CAAC,EAAE;IAC1B,MAAM,EACJkB,cAAc,EAAEC,cAAcC,YAAY,EAAE,EAC7C,GAAG3B;IAEJ,IAAI2B,cAAc;QAChB,qBAAO,KAAC7B;sBAAU6B;;IACpB;IAEA,qBAAO,KAACtB;QAAcC,MAAMA;QAAMC,UAAUA;;AAC9C,EAAC"}

package/dist/elements/NavGroup/index.scss

@@ -49,8 +49,8 @@
 
   &--collapsed {
     .collapsible__toggle {
-      border-bottom-right-radius: $style-radius-s;
-      border-bottom-left-radius: $style-radius-s;
+      border-bottom-right-radius: $style-radius-m;
+      border-bottom-left-radius: $style-radius-m;
     }
   }
 }

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

@@ -9,9 +9,9 @@ export type PillProps = {
     children?: React.ReactNode;
     className?: string;
     draggable?: boolean;
-    elementProps?: HTMLAttributes<HTMLElement> & {
+    elementProps?: {
         ref: React.RefCallback<HTMLElement>;
-    };
+    } & HTMLAttributes<HTMLElement>;
     icon?: React.ReactNode;
     id?: string;
     onClick?: () => void;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Pill/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAe,cAAc,EAAE,MAAM,OAAO,CAAA;AAIxD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG;QAC3C,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAA;KACpC,CAAA;IACD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;IACvF,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,CAAA;AAGD,OAAO,cAAc,CAAA;AAmFrB,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAKpC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Pill/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAe,cAAc,EAAE,MAAM,OAAO,CAAA;AAIxD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,CAAC,EAAE;QACb,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAA;KACpC,GAAG,cAAc,CAAC,WAAW,CAAC,CAAA;IAC/B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;IACvF,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,CAAA;AAGD,OAAO,cAAc,CAAA;AAkFrB,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAKpC,CAAA"}

package/dist/elements/Pill/index.js

@@ -54,15 +54,11 @@ const StaticPill = (props)=>{
         onClick: onClick,
         type: Element === 'button' ? 'button' : undefined,
         children: [
-            icon && alignIcon === 'left' && /*#__PURE__*/ _jsx("span", {
-                className: `${baseClass}__icon`,
-                children: icon
-            }),
             /*#__PURE__*/ _jsx("span", {
                 className: `${baseClass}__label`,
                 children: children
             }),
-            icon && alignIcon === 'right' && /*#__PURE__*/ _jsx("span", {
+            icon && /*#__PURE__*/ _jsx("span", {
                 className: `${baseClass}__icon`,
                 children: icon
             })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Pill/index.tsx"],"sourcesContent":["'use client'\nimport type { ElementType, HTMLAttributes } from 'react'\n\nimport LinkWithDefault from 'next/link.js'\nconst Link = LinkWithDefault.default\nimport React from 'react' // TODO: abstract this out to support all routers\n\nexport type PillProps = {\n  alignIcon?: 'left' | 'right'\n  'aria-checked'?: boolean\n  'aria-controls'?: string\n  'aria-expanded'?: boolean\n  'aria-label'?: string\n  children?: React.ReactNode\n  className?: string\n  draggable?: boolean\n  elementProps?: HTMLAttributes<HTMLElement> & {\n    ref: React.RefCallback<HTMLElement>\n  }\n  icon?: React.ReactNode\n  id?: string\n  onClick?: () => void\n  pillStyle?: 'dark' | 'error' | 'light' | 'light-gray' | 'success' | 'warning' | 'white'\n  rounded?: boolean\n  to?: string\n}\n\nexport type RenderedTypeProps = {\n  children: React.ReactNode\n  className?: string\n  onClick?: () => void\n  to: string\n  type?: 'button'\n}\n\nimport { useDraggableSortable } from '../DraggableSortable/useDraggableSortable/index.js'\nimport './index.scss'\n\nconst baseClass = 'pill'\n\nconst DraggablePill: React.FC<PillProps> = (props) => {\n  const { id, className } = props\n\n  const { attributes, isDragging, listeners, setNodeRef, transform } = useDraggableSortable({\n    id,\n  })\n\n  return (\n    <StaticPill\n      {...props}\n      className={[isDragging && `${baseClass}--is-dragging`, className].filter(Boolean).join(' ')}\n      elementProps={{\n        ...listeners,\n        ...attributes,\n        ref: setNodeRef,\n        style: {\n          transform,\n        },\n      }}\n    />\n  )\n}\n\nconst StaticPill: React.FC<PillProps> = (props) => {\n  const {\n    alignIcon = 'right',\n    'aria-checked': ariaChecked,\n    'aria-controls': ariaControls,\n    'aria-expanded': ariaExpanded,\n    'aria-label': ariaLabel,\n    children,\n    className,\n    draggable,\n    elementProps,\n    icon,\n    onClick,\n    pillStyle = 'light',\n    rounded,\n    to,\n  } = props\n\n  const classes = [\n    baseClass,\n    `${baseClass}--style-${pillStyle}`,\n    className && className,\n    to && `${baseClass}--has-link`,\n    (to || onClick) && `${baseClass}--has-action`,\n    icon && `${baseClass}--has-icon`,\n    icon && `${baseClass}--align-icon-${alignIcon}`,\n    draggable && `${baseClass}--draggable`,\n    rounded && `${baseClass}--rounded`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  let Element: ElementType | React.FC<RenderedTypeProps> = 'div'\n\n  if (onClick && !to) Element = 'button'\n  if (to) Element = Link\n\n  return (\n    <Element\n      {...elementProps}\n      aria-checked={ariaChecked}\n      aria-controls={ariaControls}\n      aria-expanded={ariaExpanded}\n      aria-label={ariaLabel}\n      className={classes}\n      href={to || null}\n      onClick={onClick}\n      type={Element === 'button' ? 'button' : undefined}\n    >\n      {icon && alignIcon === 'left' && <span className={`${baseClass}__icon`}>{icon}</span>}\n      <span className={`${baseClass}__label`}>{children}</span>\n      {icon && alignIcon === 'right' && <span className={`${baseClass}__icon`}>{icon}</span>}\n    </Element>\n  )\n}\n\nexport const Pill: React.FC<PillProps> = (props) => {\n  const { draggable } = props\n\n  if (draggable) return <DraggablePill {...props} />\n  return <StaticPill {...props} />\n}\n"],"names":["LinkWithDefault","Link","default","React","useDraggableSortable","baseClass","DraggablePill","props","id","className","attributes","isDragging","listeners","setNodeRef","transform","StaticPill","filter","Boolean","join","elementProps","ref","style","alignIcon","ariaChecked","ariaControls","ariaExpanded","ariaLabel","children","draggable","icon","onClick","pillStyle","rounded","to","classes","Element","aria-checked","aria-controls","aria-expanded","aria-label","href","type","undefined","span","Pill"],"mappings":"AAAA;;AAGA,OAAOA,qBAAqB,eAAc;AAC1C,MAAMC,OAAOD,gBAAgBE,OAAO;AACpC,OAAOC,WAAW,QAAO,CAAC,iDAAiD;AA8B3E,SAASC,oBAAoB,QAAQ,qDAAoD;AACzF,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,MAAMC,gBAAqC,CAACC;IAC1C,MAAM,EAAEC,EAAE,EAAEC,SAAS,EAAE,GAAGF;IAE1B,MAAM,EAAEG,UAAU,EAAEC,UAAU,EAAEC,SAAS,EAAEC,UAAU,EAAEC,SAAS,EAAE,GAAGV,qBAAqB;QACxFI;IACF;IAEA,qBACE,KAACO;QACE,GAAGR,KAAK;QACTE,WAAW;YAACE,cAAc,CAAC,EAAEN,UAAU,aAAa,CAAC;YAAEI;SAAU,CAACO,MAAM,CAACC,SAASC,IAAI,CAAC;QACvFC,cAAc;YACZ,GAAGP,SAAS;YACZ,GAAGF,UAAU;YACbU,KAAKP;YACLQ,OAAO;gBACLP;YACF;QACF;;AAGN;AAEA,MAAMC,aAAkC,CAACR;IACvC,MAAM,EACJe,YAAY,OAAO,EACnB,gBAAgBC,WAAW,EAC3B,iBAAiBC,YAAY,EAC7B,iBAAiBC,YAAY,EAC7B,cAAcC,SAAS,EACvBC,QAAQ,EACRlB,SAAS,EACTmB,SAAS,EACTT,YAAY,EACZU,IAAI,EACJC,OAAO,EACPC,YAAY,OAAO,EACnBC,OAAO,EACPC,EAAE,EACH,GAAG1B;IAEJ,MAAM2B,UAAU;QACd7B;QACA,CAAC,EAAEA,UAAU,QAAQ,EAAE0B,UAAU,CAAC;QAClCtB,aAAaA;QACbwB,MAAM,CAAC,EAAE5B,UAAU,UAAU,CAAC;QAC7B4B,CAAAA,MAAMH,OAAM,KAAM,CAAC,EAAEzB,UAAU,YAAY,CAAC;QAC7CwB,QAAQ,CAAC,EAAExB,UAAU,UAAU,CAAC;QAChCwB,QAAQ,CAAC,EAAExB,UAAU,aAAa,EAAEiB,UAAU,CAAC;QAC/CM,aAAa,CAAC,EAAEvB,UAAU,WAAW,CAAC;QACtC2B,WAAW,CAAC,EAAE3B,UAAU,SAAS,CAAC;KACnC,CACEW,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,IAAIiB,UAAqD;IAEzD,IAAIL,WAAW,CAACG,IAAIE,UAAU;IAC9B,IAAIF,IAAIE,UAAUlC;IAElB,qBACE,MAACkC;QACE,GAAGhB,YAAY;QAChBiB,gBAAcb;QACdc,iBAAeb;QACfc,iBAAeb;QACfc,cAAYb;QACZjB,WAAWyB;QACXM,MAAMP,MAAM;QACZH,SAASA;QACTW,MAAMN,YAAY,WAAW,WAAWO;;YAEvCb,QAAQP,cAAc,wBAAU,KAACqB;gBAAKlC,WAAW,CAAC,EAAEJ,UAAU,MAAM,CAAC;0BAAGwB;;0BACzE,KAACc;gBAAKlC,WAAW,CAAC,EAAEJ,UAAU,OAAO,CAAC;0BAAGsB;;YACxCE,QAAQP,cAAc,yBAAW,KAACqB;gBAAKlC,WAAW,CAAC,EAAEJ,UAAU,MAAM,CAAC;0BAAGwB;;;;AAGhF;AAEA,OAAO,MAAMe,OAA4B,CAACrC;IACxC,MAAM,EAAEqB,SAAS,EAAE,GAAGrB;IAEtB,IAAIqB,WAAW,qBAAO,KAACtB;QAAe,GAAGC,KAAK;;IAC9C,qBAAO,KAACQ;QAAY,GAAGR,KAAK;;AAC9B,EAAC"}
+{"version":3,"sources":["../../../src/elements/Pill/index.tsx"],"sourcesContent":["'use client'\nimport type { ElementType, HTMLAttributes } from 'react'\n\nimport LinkWithDefault from 'next/link.js'\nconst Link = LinkWithDefault.default\nimport React from 'react' // TODO: abstract this out to support all routers\n\nexport type PillProps = {\n  alignIcon?: 'left' | 'right'\n  'aria-checked'?: boolean\n  'aria-controls'?: string\n  'aria-expanded'?: boolean\n  'aria-label'?: string\n  children?: React.ReactNode\n  className?: string\n  draggable?: boolean\n  elementProps?: {\n    ref: React.RefCallback<HTMLElement>\n  } & HTMLAttributes<HTMLElement>\n  icon?: React.ReactNode\n  id?: string\n  onClick?: () => void\n  pillStyle?: 'dark' | 'error' | 'light' | 'light-gray' | 'success' | 'warning' | 'white'\n  rounded?: boolean\n  to?: string\n}\n\nexport type RenderedTypeProps = {\n  children: React.ReactNode\n  className?: string\n  onClick?: () => void\n  to: string\n  type?: 'button'\n}\n\nimport { useDraggableSortable } from '../DraggableSortable/useDraggableSortable/index.js'\nimport './index.scss'\n\nconst baseClass = 'pill'\n\nconst DraggablePill: React.FC<PillProps> = (props) => {\n  const { id, className } = props\n\n  const { attributes, isDragging, listeners, setNodeRef, transform } = useDraggableSortable({\n    id,\n  })\n\n  return (\n    <StaticPill\n      {...props}\n      className={[isDragging && `${baseClass}--is-dragging`, className].filter(Boolean).join(' ')}\n      elementProps={{\n        ...listeners,\n        ...attributes,\n        ref: setNodeRef,\n        style: {\n          transform,\n        },\n      }}\n    />\n  )\n}\n\nconst StaticPill: React.FC<PillProps> = (props) => {\n  const {\n    alignIcon = 'right',\n    'aria-checked': ariaChecked,\n    'aria-controls': ariaControls,\n    'aria-expanded': ariaExpanded,\n    'aria-label': ariaLabel,\n    children,\n    className,\n    draggable,\n    elementProps,\n    icon,\n    onClick,\n    pillStyle = 'light',\n    rounded,\n    to,\n  } = props\n\n  const classes = [\n    baseClass,\n    `${baseClass}--style-${pillStyle}`,\n    className && className,\n    to && `${baseClass}--has-link`,\n    (to || onClick) && `${baseClass}--has-action`,\n    icon && `${baseClass}--has-icon`,\n    icon && `${baseClass}--align-icon-${alignIcon}`,\n    draggable && `${baseClass}--draggable`,\n    rounded && `${baseClass}--rounded`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  let Element: ElementType | React.FC<RenderedTypeProps> = 'div'\n\n  if (onClick && !to) Element = 'button'\n  if (to) Element = Link\n\n  return (\n    <Element\n      {...elementProps}\n      aria-checked={ariaChecked}\n      aria-controls={ariaControls}\n      aria-expanded={ariaExpanded}\n      aria-label={ariaLabel}\n      className={classes}\n      href={to || null}\n      onClick={onClick}\n      type={Element === 'button' ? 'button' : undefined}\n    >\n      <span className={`${baseClass}__label`}>{children}</span>\n      {icon && <span className={`${baseClass}__icon`}>{icon}</span>}\n    </Element>\n  )\n}\n\nexport const Pill: React.FC<PillProps> = (props) => {\n  const { draggable } = props\n\n  if (draggable) return <DraggablePill {...props} />\n  return <StaticPill {...props} />\n}\n"],"names":["LinkWithDefault","Link","default","React","useDraggableSortable","baseClass","DraggablePill","props","id","className","attributes","isDragging","listeners","setNodeRef","transform","StaticPill","filter","Boolean","join","elementProps","ref","style","alignIcon","ariaChecked","ariaControls","ariaExpanded","ariaLabel","children","draggable","icon","onClick","pillStyle","rounded","to","classes","Element","aria-checked","aria-controls","aria-expanded","aria-label","href","type","undefined","span","Pill"],"mappings":"AAAA;;AAGA,OAAOA,qBAAqB,eAAc;AAC1C,MAAMC,OAAOD,gBAAgBE,OAAO;AACpC,OAAOC,WAAW,QAAO,CAAC,iDAAiD;AA8B3E,SAASC,oBAAoB,QAAQ,qDAAoD;AACzF,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,MAAMC,gBAAqC,CAACC;IAC1C,MAAM,EAAEC,EAAE,EAAEC,SAAS,EAAE,GAAGF;IAE1B,MAAM,EAAEG,UAAU,EAAEC,UAAU,EAAEC,SAAS,EAAEC,UAAU,EAAEC,SAAS,EAAE,GAAGV,qBAAqB;QACxFI;IACF;IAEA,qBACE,KAACO;QACE,GAAGR,KAAK;QACTE,WAAW;YAACE,cAAc,CAAC,EAAEN,UAAU,aAAa,CAAC;YAAEI;SAAU,CAACO,MAAM,CAACC,SAASC,IAAI,CAAC;QACvFC,cAAc;YACZ,GAAGP,SAAS;YACZ,GAAGF,UAAU;YACbU,KAAKP;YACLQ,OAAO;gBACLP;YACF;QACF;;AAGN;AAEA,MAAMC,aAAkC,CAACR;IACvC,MAAM,EACJe,YAAY,OAAO,EACnB,gBAAgBC,WAAW,EAC3B,iBAAiBC,YAAY,EAC7B,iBAAiBC,YAAY,EAC7B,cAAcC,SAAS,EACvBC,QAAQ,EACRlB,SAAS,EACTmB,SAAS,EACTT,YAAY,EACZU,IAAI,EACJC,OAAO,EACPC,YAAY,OAAO,EACnBC,OAAO,EACPC,EAAE,EACH,GAAG1B;IAEJ,MAAM2B,UAAU;QACd7B;QACA,CAAC,EAAEA,UAAU,QAAQ,EAAE0B,UAAU,CAAC;QAClCtB,aAAaA;QACbwB,MAAM,CAAC,EAAE5B,UAAU,UAAU,CAAC;QAC7B4B,CAAAA,MAAMH,OAAM,KAAM,CAAC,EAAEzB,UAAU,YAAY,CAAC;QAC7CwB,QAAQ,CAAC,EAAExB,UAAU,UAAU,CAAC;QAChCwB,QAAQ,CAAC,EAAExB,UAAU,aAAa,EAAEiB,UAAU,CAAC;QAC/CM,aAAa,CAAC,EAAEvB,UAAU,WAAW,CAAC;QACtC2B,WAAW,CAAC,EAAE3B,UAAU,SAAS,CAAC;KACnC,CACEW,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,IAAIiB,UAAqD;IAEzD,IAAIL,WAAW,CAACG,IAAIE,UAAU;IAC9B,IAAIF,IAAIE,UAAUlC;IAElB,qBACE,MAACkC;QACE,GAAGhB,YAAY;QAChBiB,gBAAcb;QACdc,iBAAeb;QACfc,iBAAeb;QACfc,cAAYb;QACZjB,WAAWyB;QACXM,MAAMP,MAAM;QACZH,SAASA;QACTW,MAAMN,YAAY,WAAW,WAAWO;;0BAExC,KAACC;gBAAKlC,WAAW,CAAC,EAAEJ,UAAU,OAAO,CAAC;0BAAGsB;;YACxCE,sBAAQ,KAACc;gBAAKlC,WAAW,CAAC,EAAEJ,UAAU,MAAM,CAAC;0BAAGwB;;;;AAGvD;AAEA,OAAO,MAAMe,OAA4B,CAACrC;IACxC,MAAM,EAAEqB,SAAS,EAAE,GAAGrB;IAEtB,IAAIqB,WAAW,qBAAO,KAACtB;QAAe,GAAGC,KAAK;;IAC9C,qBAAO,KAACQ;QAAY,GAAGR,KAAK;;AAC9B,EAAC"}

package/dist/elements/Pill/index.scss

@@ -2,7 +2,7 @@
 
 .pill {
   font-size: 1rem;
-  line-height: base(1);
+  line-height: base(1.2);
   display: inline-flex;
   background: var(--theme-elevation-150);
   color: var(--theme-elevation-800);
@@ -12,7 +12,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   border: 0;
-  padding: 0 base(0.25);
+  padding: 0 base(0.4);
   align-items: center;
   flex-shrink: 0;
 
@@ -34,6 +34,7 @@
 
   .icon {
     flex-shrink: 0;
+    margin: base(0.1);
   }
 
   &__label {
@@ -42,10 +43,6 @@
     text-overflow: ellipsis;
   }
 
-  &__icon {
-    padding: calc(var(--base) / 4);
-  }
-
   &--has-action {
     cursor: pointer;
     text-decoration: none;
@@ -56,27 +53,17 @@
   }
 
   &--has-icon {
+    padding-inline-start: base(0.4);
+    padding-inline-end: base(0.1);
     svg {
       display: block;
     }
   }
 
-  [dir='rtl'] &--align-icon-left {
-    padding-right: 0;
-    padding-left: 10px;
-  }
-
-  [dir='rtl'] &--align-icon-right {
-    padding-right: 10px;
-    padding-left: 0;
-  }
-
   &--align-icon-left {
-    padding-left: 0;
-  }
-
-  &--align-icon-right {
-    padding-right: 0;
+    flex-direction: row-reverse;
+    padding-inline-start: base(0.1);
+    padding-inline-end: base(0.4);
   }
 
   &--style-white {
@@ -111,12 +98,18 @@
   }
 
   &--style-warning {
-    background: var(--theme-warning-500);
+    background: var(--theme-warning-150);
+    color: var(--theme-warning-800);
   }
 
   &--style-success {
-    background: var(--theme-success-500);
-    color: var(--color-base-800);
+    background: var(--theme-success-150);
+    color: var(--theme-success-800);
+  }
+
+  &--style-error {
+    background: var(--theme-error-150);
+    color: var(--theme-error-800);
   }
 
   &--style-dark {
@@ -138,21 +131,3 @@
     }
   }
 }
-
-html[data-theme='dark'] {
-  .pill {
-    &--style-error {
-      background: var(--theme-error-500);
-      color: var(--color-base-1000);
-    }
-  }
-}
-
-html[data-theme='light'] {
-  .pill {
-    &--style-error {
-      background: var(--theme-error-250);
-      color: var(--theme-error-750);
-    }
-  }
-}

package/dist/elements/Popup/index.scss

@@ -9,6 +9,12 @@
   --popup-padding: calc(var(--base) * 0.5);
   position: relative;
 
+  &__trigger-wrap {
+    display: flex;
+    align-items: stretch;
+    height: 100%;
+  }
+
   &__content {
     position: absolute;
     background: var(--popup-bg);

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PreviewButton/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AA2BzB,KAAK,KAAK,GAAG;IACX,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAIzC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PreviewButton/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AA6BzB,KAAK,KAAK,GAAG;IACX,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAIzC,CAAA"}

package/dist/elements/PreviewButton/index.js

@@ -9,11 +9,13 @@ const DefaultPreviewButton = ()=>{
     return /*#__PURE__*/ _jsx(Button, {
         buttonStyle: "secondary",
         className: baseClass,
+        icon: 'link',
+        iconPosition: "left",
         // disabled={disabled}
         onClick: ()=>generatePreviewURL({
                 openPreviewWindow: true
             }),
-        size: "small",
+        size: "medium",
         children: label
     });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/PreviewButton/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { Button } from '../Button/index.js'\nimport { usePreviewURL } from './usePreviewURL.js'\n\nconst baseClass = 'preview-btn'\n\nconst DefaultPreviewButton: React.FC = () => {\n  const { generatePreviewURL, label } = usePreviewURL()\n\n  return (\n    <Button\n      buttonStyle=\"secondary\"\n      className={baseClass}\n      // disabled={disabled}\n      onClick={() =>\n        generatePreviewURL({\n          openPreviewWindow: true,\n        })\n      }\n      size=\"small\"\n    >\n      {label}\n    </Button>\n  )\n}\n\ntype Props = {\n  CustomComponent?: React.ReactNode\n}\n\nexport const PreviewButton: React.FC<Props> = ({ CustomComponent }) => {\n  if (CustomComponent) return CustomComponent\n\n  return <DefaultPreviewButton />\n}\n"],"names":["React","Button","usePreviewURL","baseClass","DefaultPreviewButton","generatePreviewURL","label","buttonStyle","className","onClick","openPreviewWindow","size","PreviewButton","CustomComponent"],"mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAEzB,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,SAASC,aAAa,QAAQ,qBAAoB;AAElD,MAAMC,YAAY;AAElB,MAAMC,uBAAiC;IACrC,MAAM,EAAEC,kBAAkB,EAAEC,KAAK,EAAE,GAAGJ;IAEtC,qBACE,KAACD;QACCM,aAAY;QACZC,WAAWL;QACX,sBAAsB;QACtBM,SAAS,IACPJ,mBAAmB;gBACjBK,mBAAmB;YACrB;QAEFC,MAAK;kBAEJL;;AAGP;AAMA,OAAO,MAAMM,gBAAiC,CAAC,EAAEC,eAAe,EAAE;IAChE,IAAIA,iBAAiB,OAAOA;IAE5B,qBAAO,KAACT;AACV,EAAC"}
+{"version":3,"sources":["../../../src/elements/PreviewButton/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { Button } from '../Button/index.js'\nimport { usePreviewURL } from './usePreviewURL.js'\n\nconst baseClass = 'preview-btn'\n\nconst DefaultPreviewButton: React.FC = () => {\n  const { generatePreviewURL, label } = usePreviewURL()\n\n  return (\n    <Button\n      buttonStyle=\"secondary\"\n      className={baseClass}\n      icon={'link'}\n      iconPosition=\"left\"\n      // disabled={disabled}\n      onClick={() =>\n        generatePreviewURL({\n          openPreviewWindow: true,\n        })\n      }\n      size=\"medium\"\n    >\n      {label}\n    </Button>\n  )\n}\n\ntype Props = {\n  CustomComponent?: React.ReactNode\n}\n\nexport const PreviewButton: React.FC<Props> = ({ CustomComponent }) => {\n  if (CustomComponent) return CustomComponent\n\n  return <DefaultPreviewButton />\n}\n"],"names":["React","Button","usePreviewURL","baseClass","DefaultPreviewButton","generatePreviewURL","label","buttonStyle","className","icon","iconPosition","onClick","openPreviewWindow","size","PreviewButton","CustomComponent"],"mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAEzB,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,SAASC,aAAa,QAAQ,qBAAoB;AAElD,MAAMC,YAAY;AAElB,MAAMC,uBAAiC;IACrC,MAAM,EAAEC,kBAAkB,EAAEC,KAAK,EAAE,GAAGJ;IAEtC,qBACE,KAACD;QACCM,aAAY;QACZC,WAAWL;QACXM,MAAM;QACNC,cAAa;QACb,sBAAsB;QACtBC,SAAS,IACPN,mBAAmB;gBACjBO,mBAAmB;YACrB;QAEFC,MAAK;kBAEJP;;AAGP;AAMA,OAAO,MAAMQ,gBAAiC,CAAC,EAAEC,eAAe,EAAE;IAChE,IAAIA,iBAAiB,OAAOA;IAE5B,qBAAO,KAACX;AACV,EAAC"}

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

@@ -1,16 +1,16 @@
 import type { Data, FileSize, SanitizedCollectionConfig } from 'payload';
 import React from 'react';
 import './index.scss';
-type FileInfo = FileSize & {
+type FileInfo = {
     url: string;
-};
+} & FileSize;
 type FilesSizesWithUrl = {
     [key: string]: FileInfo;
 };
 export type PreviewSizesProps = {
-    doc: Data & {
+    doc: {
         sizes?: FilesSizesWithUrl;
-    };
+    } & Data;
     imageCacheTag?: string;
     uploadConfig: SanitizedCollectionConfig['upload'];
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PreviewSizes/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,yBAAyB,EAAyB,MAAM,SAAS,CAAA;AAE/F,OAAO,KAAuC,MAAM,OAAO,CAAA;AAG3D,OAAO,cAAc,CAAA;AAIrB,KAAK,QAAQ,GAAG,QAAQ,GAAG;IACzB,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AACD,KAAK,iBAAiB,GAAG;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,CAAA;CACxB,CAAA;AAsDD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,GAAG,EAAE,IAAI,GAAG;QACV,KAAK,CAAC,EAAE,iBAAiB,CAAA;KAC1B,CAAA;IACD,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4EpD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PreviewSizes/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,yBAAyB,EAAyB,MAAM,SAAS,CAAA;AAE/F,OAAO,KAAuC,MAAM,OAAO,CAAA;AAG3D,OAAO,cAAc,CAAA;AAIrB,KAAK,QAAQ,GAAG;IACd,GAAG,EAAE,MAAM,CAAA;CACZ,GAAG,QAAQ,CAAA;AACZ,KAAK,iBAAiB,GAAG;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,CAAA;CACxB,CAAA;AAsDD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,GAAG,EAAE;QACH,KAAK,CAAC,EAAE,iBAAiB,CAAA;KAC1B,GAAG,IAAI,CAAA;IACR,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4EpD,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/PreviewSizes/index.tsx"],"sourcesContent":["'use client'\nimport type { Data, FileSize, SanitizedCollectionConfig, SanitizedUploadConfig } from 'payload'\n\nimport React, { useEffect, useMemo, useState } from 'react'\n\nimport { FileMeta } from '../FileDetails/FileMeta/index.js'\nimport './index.scss'\n\nconst baseClass = 'preview-sizes'\n\ntype FileInfo = FileSize & {\n  url: string\n}\ntype FilesSizesWithUrl = {\n  [key: string]: FileInfo\n}\n\nconst sortSizes = (sizes: FilesSizesWithUrl, imageSizes: SanitizedUploadConfig['imageSizes']) => {\n  if (!imageSizes || imageSizes.length === 0) return sizes\n\n  const orderedSizes: FilesSizesWithUrl = {}\n\n  imageSizes.forEach(({ name }) => {\n    if (sizes[name]) {\n      orderedSizes[name] = sizes[name]\n    }\n  })\n\n  return orderedSizes\n}\n\ntype PreviewSizeCardProps = {\n  active: boolean\n  meta: FileInfo\n  name: string\n  onClick?: () => void\n  previewSrc: string\n}\nconst PreviewSizeCard: React.FC<PreviewSizeCardProps> = ({\n  name,\n  active,\n  meta,\n  onClick,\n  previewSrc,\n}) => {\n  return (\n    <div\n      className={[`${baseClass}__sizeOption`, active && `${baseClass}--selected`]\n        .filter(Boolean)\n        .join(' ')}\n      onClick={typeof onClick === 'function' ? onClick : undefined}\n      onKeyDown={(e) => {\n        if (typeof onClick !== 'function') return\n        if (e.key === 'Enter') onClick()\n      }}\n      role=\"button\"\n      tabIndex={0}\n    >\n      <div className={`${baseClass}__image`}>\n        <img alt={meta.filename} src={previewSrc} />\n      </div>\n      <div className={`${baseClass}__sizeMeta`}>\n        <div className={`${baseClass}__sizeName`}>{name}</div>\n        <FileMeta {...meta} />\n      </div>\n    </div>\n  )\n}\n\nexport type PreviewSizesProps = {\n  doc: Data & {\n    sizes?: FilesSizesWithUrl\n  }\n  imageCacheTag?: string\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const PreviewSizes: React.FC<PreviewSizesProps> = ({ doc, imageCacheTag, uploadConfig }) => {\n  const { imageSizes } = uploadConfig\n  const { sizes } = doc\n\n  const [orderedSizes, setOrderedSizes] = useState<FilesSizesWithUrl>(() =>\n    sortSizes(sizes, imageSizes),\n  )\n  const [selectedSize, setSelectedSize] = useState<null | string>(null)\n\n  const generateImageUrl = (doc) => {\n    if (!doc.filename) return null\n    if (doc.url) return `${doc.url}${imageCacheTag ? `?${imageCacheTag}` : ''}`\n  }\n  useEffect(() => {\n    setOrderedSizes(sortSizes(sizes, imageSizes))\n  }, [sizes, imageSizes, imageCacheTag])\n\n  const mainPreviewSrc = selectedSize\n    ? generateImageUrl(doc.sizes[selectedSize])\n    : generateImageUrl(doc)\n\n  const originalImage = useMemo(\n    (): FileInfo => ({\n      filename: doc.filename,\n      filesize: doc.filesize,\n      height: doc.height,\n      mimeType: doc.mimeType,\n      url: doc.url,\n      width: doc.width,\n    }),\n    [doc],\n  )\n  const originalFilename = 'Original'\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__imageWrap`}>\n        <div className={`${baseClass}__meta`}>\n          <div className={`${baseClass}__sizeName`}>{selectedSize || originalFilename}</div>\n          <FileMeta {...(selectedSize ? orderedSizes[selectedSize] : originalImage)} />\n        </div>\n        <img alt={doc.filename} className={`${baseClass}__preview`} src={mainPreviewSrc} />\n      </div>\n      <div className={`${baseClass}__listWrap`}>\n        <div className={`${baseClass}__list`}>\n          <PreviewSizeCard\n            active={!selectedSize}\n            meta={originalImage}\n            name={originalFilename}\n            onClick={() => setSelectedSize(null)}\n            previewSrc={generateImageUrl(doc)}\n          />\n\n          {Object.entries(orderedSizes).map(([key, val]) => {\n            const selected = selectedSize === key\n            const previewSrc = generateImageUrl(val)\n\n            if (previewSrc) {\n              return (\n                <PreviewSizeCard\n                  active={selected}\n                  key={key}\n                  meta={val}\n                  name={key}\n                  onClick={() => setSelectedSize(key)}\n                  previewSrc={previewSrc}\n                />\n              )\n            }\n\n            return null\n          })}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":["React","useEffect","useMemo","useState","FileMeta","baseClass","sortSizes","sizes","imageSizes","length","orderedSizes","forEach","name","PreviewSizeCard","active","meta","onClick","previewSrc","div","className","filter","Boolean","join","undefined","onKeyDown","e","key","role","tabIndex","img","alt","filename","src","PreviewSizes","doc","imageCacheTag","uploadConfig","setOrderedSizes","selectedSize","setSelectedSize","generateImageUrl","url","mainPreviewSrc","originalImage","filesize","height","mimeType","width","originalFilename","Object","entries","map","val","selected"],"mappings":"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"}
+{"version":3,"sources":["../../../src/elements/PreviewSizes/index.tsx"],"sourcesContent":["'use client'\nimport type { Data, FileSize, SanitizedCollectionConfig, SanitizedUploadConfig } from 'payload'\n\nimport React, { useEffect, useMemo, useState } from 'react'\n\nimport { FileMeta } from '../FileDetails/FileMeta/index.js'\nimport './index.scss'\n\nconst baseClass = 'preview-sizes'\n\ntype FileInfo = {\n  url: string\n} & FileSize\ntype FilesSizesWithUrl = {\n  [key: string]: FileInfo\n}\n\nconst sortSizes = (sizes: FilesSizesWithUrl, imageSizes: SanitizedUploadConfig['imageSizes']) => {\n  if (!imageSizes || imageSizes.length === 0) return sizes\n\n  const orderedSizes: FilesSizesWithUrl = {}\n\n  imageSizes.forEach(({ name }) => {\n    if (sizes[name]) {\n      orderedSizes[name] = sizes[name]\n    }\n  })\n\n  return orderedSizes\n}\n\ntype PreviewSizeCardProps = {\n  active: boolean\n  meta: FileInfo\n  name: string\n  onClick?: () => void\n  previewSrc: string\n}\nconst PreviewSizeCard: React.FC<PreviewSizeCardProps> = ({\n  name,\n  active,\n  meta,\n  onClick,\n  previewSrc,\n}) => {\n  return (\n    <div\n      className={[`${baseClass}__sizeOption`, active && `${baseClass}--selected`]\n        .filter(Boolean)\n        .join(' ')}\n      onClick={typeof onClick === 'function' ? onClick : undefined}\n      onKeyDown={(e) => {\n        if (typeof onClick !== 'function') return\n        if (e.key === 'Enter') onClick()\n      }}\n      role=\"button\"\n      tabIndex={0}\n    >\n      <div className={`${baseClass}__image`}>\n        <img alt={meta.filename} src={previewSrc} />\n      </div>\n      <div className={`${baseClass}__sizeMeta`}>\n        <div className={`${baseClass}__sizeName`}>{name}</div>\n        <FileMeta {...meta} />\n      </div>\n    </div>\n  )\n}\n\nexport type PreviewSizesProps = {\n  doc: {\n    sizes?: FilesSizesWithUrl\n  } & Data\n  imageCacheTag?: string\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const PreviewSizes: React.FC<PreviewSizesProps> = ({ doc, imageCacheTag, uploadConfig }) => {\n  const { imageSizes } = uploadConfig\n  const { sizes } = doc\n\n  const [orderedSizes, setOrderedSizes] = useState<FilesSizesWithUrl>(() =>\n    sortSizes(sizes, imageSizes),\n  )\n  const [selectedSize, setSelectedSize] = useState<null | string>(null)\n\n  const generateImageUrl = (doc) => {\n    if (!doc.filename) return null\n    if (doc.url) return `${doc.url}${imageCacheTag ? `?${imageCacheTag}` : ''}`\n  }\n  useEffect(() => {\n    setOrderedSizes(sortSizes(sizes, imageSizes))\n  }, [sizes, imageSizes, imageCacheTag])\n\n  const mainPreviewSrc = selectedSize\n    ? generateImageUrl(doc.sizes[selectedSize])\n    : generateImageUrl(doc)\n\n  const originalImage = useMemo(\n    (): FileInfo => ({\n      filename: doc.filename,\n      filesize: doc.filesize,\n      height: doc.height,\n      mimeType: doc.mimeType,\n      url: doc.url,\n      width: doc.width,\n    }),\n    [doc],\n  )\n  const originalFilename = 'Original'\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__imageWrap`}>\n        <div className={`${baseClass}__meta`}>\n          <div className={`${baseClass}__sizeName`}>{selectedSize || originalFilename}</div>\n          <FileMeta {...(selectedSize ? orderedSizes[selectedSize] : originalImage)} />\n        </div>\n        <img alt={doc.filename} className={`${baseClass}__preview`} src={mainPreviewSrc} />\n      </div>\n      <div className={`${baseClass}__listWrap`}>\n        <div className={`${baseClass}__list`}>\n          <PreviewSizeCard\n            active={!selectedSize}\n            meta={originalImage}\n            name={originalFilename}\n            onClick={() => setSelectedSize(null)}\n            previewSrc={generateImageUrl(doc)}\n          />\n\n          {Object.entries(orderedSizes).map(([key, val]) => {\n            const selected = selectedSize === key\n            const previewSrc = generateImageUrl(val)\n\n            if (previewSrc) {\n              return (\n                <PreviewSizeCard\n                  active={selected}\n                  key={key}\n                  meta={val}\n                  name={key}\n                  onClick={() => setSelectedSize(key)}\n                  previewSrc={previewSrc}\n                />\n              )\n            }\n\n            return null\n          })}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":["React","useEffect","useMemo","useState","FileMeta","baseClass","sortSizes","sizes","imageSizes","length","orderedSizes","forEach","name","PreviewSizeCard","active","meta","onClick","previewSrc","div","className","filter","Boolean","join","undefined","onKeyDown","e","key","role","tabIndex","img","alt","filename","src","PreviewSizes","doc","imageCacheTag","uploadConfig","setOrderedSizes","selectedSize","setSelectedSize","generateImageUrl","url","mainPreviewSrc","originalImage","filesize","height","mimeType","width","originalFilename","Object","entries","map","val","selected"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PublishButton/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAO1C,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAiC7D,CAAA;AAED,KAAK,KAAK,GAAG;IACX,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAGzC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PublishButton/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAS1C,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CA2C7D,CAAA;AAED,KAAK,KAAK,GAAG;IACX,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAGzC,CAAA"}