@payloadcms/ui 3.43.0-internal.693bd81 → 3.43.0

package/dist/elements/HTMLDiff/index.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { HtmlDiff } from './diff/index.js';
+import './index.scss';
+const baseClass = 'html-diff';
+export const getHTMLDiffComponents = ({
+  fromHTML,
+  toHTML,
+  tokenizeByCharacter
+}) => {
+  const diffHTML = new HtmlDiff(fromHTML, toHTML, {
+    tokenizeByCharacter
+  });
+  const [oldHTML, newHTML] = diffHTML.getSideBySideContents();
+  const From = oldHTML ? /*#__PURE__*/_jsx("div", {
+    className: `${baseClass}__diff-old html-diff`,
+    dangerouslySetInnerHTML: {
+      __html: oldHTML
+    }
+  }) : null;
+  const To = newHTML ? /*#__PURE__*/_jsx("div", {
+    className: `${baseClass}__diff-new html-diff`,
+    dangerouslySetInnerHTML: {
+      __html: newHTML
+    }
+  }) : null;
+  return {
+    From,
+    To
+  };
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","HtmlDiff","baseClass","getHTMLDiffComponents","fromHTML","toHTML","tokenizeByCharacter","diffHTML","oldHTML","newHTML","getSideBySideContents","From","_jsx","className","dangerouslySetInnerHTML","__html","To"],"sources":["../../../src/elements/HTMLDiff/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport { HtmlDiff } from './diff/index.js'\nimport './index.scss'\n\nconst baseClass = 'html-diff'\n\nexport const getHTMLDiffComponents = ({\n  fromHTML,\n  toHTML,\n  tokenizeByCharacter,\n}: {\n  fromHTML: string\n  toHTML: string\n  tokenizeByCharacter?: boolean\n}): {\n  From: React.ReactNode\n  To: React.ReactNode\n} => {\n  const diffHTML = new HtmlDiff(fromHTML, toHTML, {\n    tokenizeByCharacter,\n  })\n\n  const [oldHTML, newHTML] = diffHTML.getSideBySideContents()\n\n  const From = oldHTML ? (\n    <div\n      className={`${baseClass}__diff-old html-diff`}\n      dangerouslySetInnerHTML={{ __html: oldHTML }}\n    />\n  ) : null\n\n  const To = newHTML ? (\n    <div\n      className={`${baseClass}__diff-new html-diff`}\n      dangerouslySetInnerHTML={{ __html: newHTML }}\n    />\n  ) : null\n\n  return { From, To }\n}\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,SAASC,QAAQ,QAAQ;AACzB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,qBAAA,GAAwBA,CAAC;EACpCC,QAAQ;EACRC,MAAM;EACNC;AAAmB,CAKpB;EAIC,MAAMC,QAAA,GAAW,IAAIN,QAAA,CAASG,QAAA,EAAUC,MAAA,EAAQ;IAC9CC;EACF;EAEA,MAAM,CAACE,OAAA,EAASC,OAAA,CAAQ,GAAGF,QAAA,CAASG,qBAAqB;EAEzD,MAAMC,IAAA,GAAOH,OAAA,gBACXI,IAAA,CAAC;IACCC,SAAA,EAAW,GAAGX,SAAA,sBAA+B;IAC7CY,uBAAA,EAAyB;MAAEC,MAAA,EAAQP;IAAQ;OAE3C;EAEJ,MAAMQ,EAAA,GAAKP,OAAA,gBACTG,IAAA,CAAC;IACCC,SAAA,EAAW,GAAGX,SAAA,sBAA+B;IAC7CY,uBAAA,EAAyB;MAAEC,MAAA,EAAQN;IAAQ;OAE3C;EAEJ,OAAO;IAAEE,IAAA;IAAMK;EAAG;AACpB","ignoreList":[]}

package/dist/elements/HTMLDiff/index.scss

@@ -0,0 +1,170 @@
+@import '../../scss/styles.scss';
+@import './colors.scss';
+
+@layer payload-default {
+  .html-diff {
+    font-size: base(0.7);
+    letter-spacing: 0.02em;
+
+    &-no-value {
+      color: var(--theme-elevation-400);
+    }
+
+    pre {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    // Apply background color to parents that have children with diffs
+    p,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    blockquote,
+    pre,
+    h6 {
+      &:not([data-enable-match='false']) {
+        &:has([data-match-type='create']) {
+          position: relative;
+          z-index: 1;
+          &::before {
+            content: '';
+            position: absolute;
+            top: -(base(0.5));
+            bottom: -(base(0.5));
+            left: -10px;
+            right: -(base(0.5));
+            display: block;
+            background-color: var(--diff-create-parent-bg);
+            color: var(--diff-create-parent-color);
+            z-index: -1; /* Place behind the text */
+          }
+        }
+
+        &:has([data-match-type='delete']) {
+          position: relative;
+          z-index: 1;
+          &::before {
+            content: '';
+            position: absolute;
+            top: -(base(0.5));
+            bottom: -(base(0.5));
+            left: -(base(0.5));
+            right: -10px;
+            display: block;
+            background-color: var(--diff-delete-parent-bg);
+            color: var(--diff-delete-parent-color);
+            z-index: -1; /* Place behind the text */
+          }
+        }
+      }
+    }
+
+    li {
+      &:not([data-enable-match='false']) {
+        &:has([data-match-type='create']) {
+          position: relative;
+          z-index: 1;
+          &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: -10px;
+            right: -(base(0.5));
+            display: block;
+            background-color: var(--diff-create-parent-bg);
+            color: var(--diff-create-parent-color);
+            z-index: -1; /* Place behind the text */
+          }
+        }
+
+        &:has([data-match-type='delete']) {
+          position: relative;
+          z-index: 1;
+          &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: -(base(0.5));
+            right: -10px;
+            display: block;
+            background-color: var(--diff-delete-parent-bg);
+            color: var(--diff-delete-parent-color);
+            z-index: -1; /* Place behind the text */
+          }
+        }
+      }
+    }
+
+    li::marker {
+      color: var(--theme-text);
+    }
+
+    [data-match-type='delete']:not([data-enable-match='false']):not(
+        :is([data-enable-match='false'] *)
+      ) {
+      color: var(--diff-delete-pill-color);
+      text-decoration-color: var(--diff-delete-pill-color);
+      text-decoration-line: line-through;
+      background-color: var(--diff-delete-pill-bg);
+      border-radius: 4px;
+      text-decoration-thickness: 1px;
+    }
+
+    a[data-match-type='delete']
+      :not([data-enable-match='false'])
+      :not(:is([data-enable-match='false'] *)) {
+      color: var(--diff-delete-link-color);
+    }
+
+    // :not(img) required to increase specificity
+    a[data-match-type='create']:not(img)
+      :not([data-enable-match='false'])
+      :not(:is([data-enable-match='false'] *)) {
+      color: var(--diff-create-link-color);
+    }
+
+    [data-match-type='create']:not(img):not([data-enable-match='false']):not(
+        :is([data-enable-match='false'] *)
+      ) {
+      background-color: var(--diff-create-pill-bg);
+      color: var(--diff-create-pill-color);
+      border-radius: 4px;
+    }
+
+    .html-diff {
+      &-create-inline-wrapper,
+      &-delete-inline-wrapper {
+        display: inline-flex;
+      }
+
+      &-create-block-wrapper,
+      &-delete-block-wrapper {
+        display: flex;
+      }
+
+      &-create-inline-wrapper,
+      &-delete-inline-wrapper,
+      &-create-block-wrapper,
+      &-delete-block-wrapper {
+        position: relative;
+        align-items: center;
+        flex-direction: row;
+
+        &::after {
+          position: absolute;
+          top: 0;
+          left: 0;
+          display: block;
+          width: 100%;
+          height: 100%;
+          content: '';
+        }
+      }
+    }
+  }
+}

package/dist/elements/ListControls/index.scss

@@ -34,7 +34,7 @@
       gap: calc(var(--base) / 4);
     }
 
-    .column-selector,
+    .pill-selector,
     .where-builder,
     .sort-complex {
       margin-top: base(1);
@@ -82,7 +82,7 @@
         width: 100%;
       }
 
-      .column-selector,
+      .pill-selector,
       .where-builder,
       .sort-complex {
         margin-top: calc(var(--base) / 2);

package/dist/elements/ListHeader/DrawerTitleActions/ListDrawerCreateNewDocButton.js

@@ -25,6 +25,7 @@ export function ListDrawerCreateNewDocButton(t0) {
     t1 = _jsx(DocumentDrawerToggler, {
       className: `${baseClass}__create-new-button`,
       children: _jsx(Pill, {
+        size: "small",
         children: t("general:createNew")
       })
     }, "create-new-button-toggler");

package/dist/elements/ListHeader/DrawerTitleActions/ListDrawerCreateNewDocButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListDrawerCreateNewDocButton.js","names":["c","_c","useTranslation","useListDrawerContext","Pill","baseClass","ListDrawerCreateNewDocButton","t0","$","hasCreatePermission","DocumentDrawerToggler","t","t1","_jsx","className","children"],"sources":["../../../../src/elements/ListHeader/DrawerTitleActions/ListDrawerCreateNewDocButton.tsx"],"sourcesContent":["'use client'\n\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { useListDrawerContext } from '../../ListDrawer/Provider.js'\nimport { Pill } from '../../Pill/index.js'\n\nconst baseClass = 'list-header'\n\ntype DefaultDrawerTitleActionsProps = {\n  hasCreatePermission: boolean\n}\n\nexport function ListDrawerCreateNewDocButton({\n  hasCreatePermission,\n}: DefaultDrawerTitleActionsProps) {\n  const { DocumentDrawerToggler } = useListDrawerContext()\n  const { t } = useTranslation()\n\n  if (!hasCreatePermission) {\n    return null\n  }\n\n  return (\n    <DocumentDrawerToggler\n      className={`${baseClass}__create-new-button`}\n      key=\"create-new-button-toggler\"\n    >\n      <Pill>{t('general:createNew')}</Pill>\n    </DocumentDrawerToggler>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,SAASC,cAAc,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ;AACrC,SAASC,IAAI,QAAQ;AAErB,MAAMC,SAAA,GAAY;AAMlB,OAAO,SAAAC,6BAAAC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAAsC;IAAAQ;EAAA,IAAAF,EAEZ;EAC/B;IAAAG;EAAA,IAAkCP,oBAAA;EAClC;IAAAQ;EAAA,IAAcT,cAAA;EAAA,KAETO,mBAAA;IAAA;EAAA;EAAA,IAAAG,EAAA;EAAA,IAAAJ,CAAA,QAAAE,qBAAA,IAAAF,CAAA,QAAAG,CAAA;IAKHC,EAAA,GAAAC,IAAA,CAACH,qBAAA;MAAAI,SAAA,EACY,GAAAT,SAAA,qBAAiC;MAAAU,QAAA,EAG5CF,IAAA,CAAAT,IAAA;QAAAW,QAAA,EAAOJ,CAAA,CAAE;MAAA,C;OAFL;IAAAH,CAAA,MAAAE,qBAAA;IAAAF,CAAA,MAAAG,CAAA;IAAAH,CAAA,MAAAI,EAAA;EAAA;IAAAA,EAAA,GAAAJ,CAAA;EAAA;EAAA,OAFNI,EAEM;AAAA","ignoreList":[]}
+{"version":3,"file":"ListDrawerCreateNewDocButton.js","names":["c","_c","useTranslation","useListDrawerContext","Pill","baseClass","ListDrawerCreateNewDocButton","t0","$","hasCreatePermission","DocumentDrawerToggler","t","t1","_jsx","className","children","size"],"sources":["../../../../src/elements/ListHeader/DrawerTitleActions/ListDrawerCreateNewDocButton.tsx"],"sourcesContent":["'use client'\n\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { useListDrawerContext } from '../../ListDrawer/Provider.js'\nimport { Pill } from '../../Pill/index.js'\n\nconst baseClass = 'list-header'\n\ntype DefaultDrawerTitleActionsProps = {\n  hasCreatePermission: boolean\n}\n\nexport function ListDrawerCreateNewDocButton({\n  hasCreatePermission,\n}: DefaultDrawerTitleActionsProps) {\n  const { DocumentDrawerToggler } = useListDrawerContext()\n  const { t } = useTranslation()\n\n  if (!hasCreatePermission) {\n    return null\n  }\n\n  return (\n    <DocumentDrawerToggler\n      className={`${baseClass}__create-new-button`}\n      key=\"create-new-button-toggler\"\n    >\n      <Pill size=\"small\">{t('general:createNew')}</Pill>\n    </DocumentDrawerToggler>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,SAASC,cAAc,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ;AACrC,SAASC,IAAI,QAAQ;AAErB,MAAMC,SAAA,GAAY;AAMlB,OAAO,SAAAC,6BAAAC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAAsC;IAAAQ;EAAA,IAAAF,EAEZ;EAC/B;IAAAG;EAAA,IAAkCP,oBAAA;EAClC;IAAAQ;EAAA,IAAcT,cAAA;EAAA,KAETO,mBAAA;IAAA;EAAA;EAAA,IAAAG,EAAA;EAAA,IAAAJ,CAAA,QAAAE,qBAAA,IAAAF,CAAA,QAAAG,CAAA;IAKHC,EAAA,GAAAC,IAAA,CAACH,qBAAA;MAAAI,SAAA,EACY,GAAAT,SAAA,qBAAiC;MAAAU,QAAA,EAG5CF,IAAA,CAAAT,IAAA;QAAAY,IAAA,EAAW;QAAAD,QAAA,EAASJ,CAAA,CAAE;MAAA,C;OAFlB;IAAAH,CAAA,MAAAE,qBAAA;IAAAF,CAAA,MAAAG,CAAA;IAAAH,CAAA,MAAAI,EAAA;EAAA;IAAAA,EAAA,GAAAJ,CAAA;EAAA;EAAA,OAFNI,EAEM;AAAA","ignoreList":[]}

package/dist/elements/ListHeader/TitleActions/ListCreateNewDocInFolderButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListCreateNewDocInFolderButton.d.ts","sourceRoot":"","sources":["../../../../src/elements/ListHeader/TitleActions/ListCreateNewDocInFolderButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAA0B,cAAc,EAAE,MAAM,SAAS,CAAA;AAIrE,OAAO,KAAK,MAAM,OAAO,CAAA;AAWzB,wBAAgB,8BAA8B,CAAC,EAC7C,WAAW,EACX,eAAe,EACf,eAAe,EACf,UAAU,GACX,EAAE;IACD,WAAW,EAAE,MAAM,CAAA;IACnB,eAAe,EAAE,cAAc,EAAE,CAAA;IACjC,eAAe,EAAE,CAAC,IAAI,EAAE;QACtB,cAAc,EAAE,cAAc,CAAA;QAC9B,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KAC7B,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IAC1B,UAAU,EAAE,MAAM,CAAA;CACnB,qBAwHA"}
+{"version":3,"file":"ListCreateNewDocInFolderButton.d.ts","sourceRoot":"","sources":["../../../../src/elements/ListHeader/TitleActions/ListCreateNewDocInFolderButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAA0B,cAAc,EAAE,MAAM,SAAS,CAAA;AAIrE,OAAO,KAAK,MAAM,OAAO,CAAA;AAWzB,wBAAgB,8BAA8B,CAAC,EAC7C,WAAW,EACX,eAAe,EACf,eAAe,EACf,UAAU,GACX,EAAE;IACD,WAAW,EAAE,MAAM,CAAA;IACnB,eAAe,EAAE,cAAc,EAAE,CAAA;IACjC,eAAe,EAAE,CAAC,IAAI,EAAE;QACtB,cAAc,EAAE,cAAc,CAAA;QAC9B,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KAC7B,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IAC1B,UAAU,EAAE,MAAM,CAAA;CACnB,qBAsHA"}

package/dist/elements/ListHeader/TitleActions/ListCreateNewDocInFolderButton.js

@@ -87,15 +87,15 @@ export function ListCreateNewDocInFolderButton(t0) {
         initialData: {
           [folderFieldName]: folderID
         },
-        onSave: t6 => {
+        onSave: async t6 => {
           const {
             doc
           } = t6;
-          closeModal(newDocInFolderDrawerSlug);
-          onCreateSuccess({
+          await onCreateSuccess({
             collectionSlug: createCollectionSlug,
             doc
           });
+          closeModal(newDocInFolderDrawerSlug);
         },
         redirectAfterCreate: false
       });
@@ -152,13 +152,11 @@ export function ListCreateNewDocInFolderButton(t0) {
         initialData: {
           [folderFieldName]: folderID
         },
-        onSave: result => {
-          if (typeof onCreateSuccess === "function") {
-            onCreateSuccess({
-              collectionSlug: folderCollectionConfig.slug,
-              doc: result.doc
-            });
-          }
+        onSave: async result => {
+          await onCreateSuccess({
+            collectionSlug: folderCollectionConfig.slug,
+            doc: result.doc
+          });
           closeFolderDrawer();
         },
         redirectAfterCreate: false

package/dist/elements/ListHeader/TitleActions/ListCreateNewDocInFolderButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListCreateNewDocInFolderButton.js","names":["c","_c","useModal","getTranslation","React","useConfig","useFolder","useTranslation","Button","DocumentDrawer","useDocumentDrawer","Popup","PopupList","baseClass","ListCreateNewDocInFolderButton","t0","$","buttonLabel","collectionSlugs","onCreateSuccess","slugPrefix","newDocInFolderDrawerSlug","i18n","closeModal","openModal","config","folderCollectionConfig","folderCollectionSlug","folderFieldName","folderID","t1","collectionSlug","FolderDocumentDrawer","t2","closeDrawer","closeFolderDrawer","openDrawer","openFolderDrawer","createCollectionSlug","setCreateCollectionSlug","useState","t3","reduce","acc","collectionConfig","collections","find","t4","slug","push","enabledCollections","length","t5","_jsx","drawerSlug","initialData","onSave","t6","doc","redirectAfterCreate","_jsxs","Fragment","children","buttonStyle","className","el","onClick","size","button","icon","ButtonGroup","map","collection","index","labels","singular","includes","result"],"sources":["../../../../src/elements/ListHeader/TitleActions/ListCreateNewDocInFolderButton.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientCollectionConfig, CollectionSlug } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useFolder } from '../../../providers/Folders/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { DocumentDrawer, useDocumentDrawer } from '../../DocumentDrawer/index.js'\nimport { Popup, PopupList } from '../../Popup/index.js'\n\nconst baseClass = 'create-new-doc-in-folder'\n\nexport function ListCreateNewDocInFolderButton({\n  buttonLabel,\n  collectionSlugs,\n  onCreateSuccess,\n  slugPrefix,\n}: {\n  buttonLabel: string\n  collectionSlugs: CollectionSlug[]\n  onCreateSuccess: (args: {\n    collectionSlug: CollectionSlug\n    doc: Record<string, unknown>\n  }) => Promise<void> | void\n  slugPrefix: string\n}) {\n  const newDocInFolderDrawerSlug = `${slugPrefix}-new-doc-in-folder-drawer`\n  const { i18n } = useTranslation()\n  const { closeModal, openModal } = useModal()\n  const { config } = useConfig()\n  const { folderCollectionConfig, folderCollectionSlug, folderFieldName, folderID } = useFolder()\n  const [FolderDocumentDrawer, , { closeDrawer: closeFolderDrawer, openDrawer: openFolderDrawer }] =\n    useDocumentDrawer({\n      collectionSlug: folderCollectionSlug,\n    })\n  const [createCollectionSlug, setCreateCollectionSlug] = React.useState<string | undefined>()\n  const [enabledCollections] = React.useState<ClientCollectionConfig[]>(() =>\n    collectionSlugs.reduce((acc, collectionSlug) => {\n      const collectionConfig = config.collections.find(({ slug }) => slug === collectionSlug)\n      if (collectionConfig) {\n        acc.push(collectionConfig)\n      }\n      return acc\n    }, []),\n  )\n\n  if (enabledCollections.length === 0) {\n    return null\n  }\n\n  return (\n    <React.Fragment>\n      {enabledCollections.length === 1 ? (\n        // If there is only 1 option, do not render a popup\n        <Button\n          buttonStyle=\"pill\"\n          className={`${baseClass}__button`}\n          el=\"div\"\n          onClick={() => {\n            if (enabledCollections[0].slug === folderCollectionConfig.slug) {\n              openFolderDrawer()\n            } else {\n              setCreateCollectionSlug(enabledCollections[0].slug)\n              openModal(newDocInFolderDrawerSlug)\n            }\n          }}\n          size=\"small\"\n        >\n          {buttonLabel}\n        </Button>\n      ) : (\n        <Popup\n          button={\n            <Button\n              buttonStyle=\"pill\"\n              className={`${baseClass}__popup-button`}\n              el=\"div\"\n              icon=\"chevron\"\n              size=\"small\"\n            >\n              {buttonLabel}\n            </Button>\n          }\n          buttonType=\"default\"\n          className={`${baseClass}__action-popup`}\n        >\n          <PopupList.ButtonGroup>\n            {enabledCollections.map((collection, index) => {\n              return (\n                <PopupList.Button\n                  key={index}\n                  onClick={() => {\n                    if (collection.slug === folderCollectionConfig.slug) {\n                      openFolderDrawer()\n                    } else {\n                      setCreateCollectionSlug(collection.slug)\n                      openModal(newDocInFolderDrawerSlug)\n                    }\n                  }}\n                >\n                  {getTranslation(collection.labels.singular, i18n)}\n                </PopupList.Button>\n              )\n            })}\n          </PopupList.ButtonGroup>\n        </Popup>\n      )}\n\n      {createCollectionSlug && (\n        <DocumentDrawer\n          collectionSlug={createCollectionSlug}\n          drawerSlug={newDocInFolderDrawerSlug}\n          initialData={{\n            [folderFieldName]: folderID,\n          }}\n          onSave={({ doc }) => {\n            closeModal(newDocInFolderDrawerSlug)\n            void onCreateSuccess({\n              collectionSlug: createCollectionSlug,\n              doc,\n            })\n          }}\n          redirectAfterCreate={false}\n        />\n      )}\n\n      {collectionSlugs.includes(folderCollectionConfig.slug) && (\n        <FolderDocumentDrawer\n          initialData={{\n            [folderFieldName]: folderID,\n          }}\n          onSave={(result) => {\n            if (typeof onCreateSuccess === 'function') {\n              void onCreateSuccess({\n                collectionSlug: folderCollectionConfig.slug,\n                doc: result.doc,\n              })\n            }\n            closeFolderDrawer()\n          }}\n          redirectAfterCreate={false}\n        />\n      )}\n    </React.Fragment>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ListCreateNewDocInFolderButton.js","names":["c","_c","useModal","getTranslation","React","useConfig","useFolder","useTranslation","Button","DocumentDrawer","useDocumentDrawer","Popup","PopupList","baseClass","ListCreateNewDocInFolderButton","t0","$","buttonLabel","collectionSlugs","onCreateSuccess","slugPrefix","newDocInFolderDrawerSlug","i18n","closeModal","openModal","config","folderCollectionConfig","folderCollectionSlug","folderFieldName","folderID","t1","collectionSlug","FolderDocumentDrawer","t2","closeDrawer","closeFolderDrawer","openDrawer","openFolderDrawer","createCollectionSlug","setCreateCollectionSlug","useState","t3","reduce","acc","collectionConfig","collections","find","t4","slug","push","enabledCollections","length","t5","_jsx","drawerSlug","initialData","onSave","t6","doc","redirectAfterCreate","_jsxs","Fragment","children","buttonStyle","className","el","onClick","size","button","icon","ButtonGroup","map","collection","index","labels","singular","includes","result"],"sources":["../../../../src/elements/ListHeader/TitleActions/ListCreateNewDocInFolderButton.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientCollectionConfig, CollectionSlug } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useFolder } from '../../../providers/Folders/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { DocumentDrawer, useDocumentDrawer } from '../../DocumentDrawer/index.js'\nimport { Popup, PopupList } from '../../Popup/index.js'\n\nconst baseClass = 'create-new-doc-in-folder'\n\nexport function ListCreateNewDocInFolderButton({\n  buttonLabel,\n  collectionSlugs,\n  onCreateSuccess,\n  slugPrefix,\n}: {\n  buttonLabel: string\n  collectionSlugs: CollectionSlug[]\n  onCreateSuccess: (args: {\n    collectionSlug: CollectionSlug\n    doc: Record<string, unknown>\n  }) => Promise<void> | void\n  slugPrefix: string\n}) {\n  const newDocInFolderDrawerSlug = `${slugPrefix}-new-doc-in-folder-drawer`\n  const { i18n } = useTranslation()\n  const { closeModal, openModal } = useModal()\n  const { config } = useConfig()\n  const { folderCollectionConfig, folderCollectionSlug, folderFieldName, folderID } = useFolder()\n  const [FolderDocumentDrawer, , { closeDrawer: closeFolderDrawer, openDrawer: openFolderDrawer }] =\n    useDocumentDrawer({\n      collectionSlug: folderCollectionSlug,\n    })\n  const [createCollectionSlug, setCreateCollectionSlug] = React.useState<string | undefined>()\n  const [enabledCollections] = React.useState<ClientCollectionConfig[]>(() =>\n    collectionSlugs.reduce((acc, collectionSlug) => {\n      const collectionConfig = config.collections.find(({ slug }) => slug === collectionSlug)\n      if (collectionConfig) {\n        acc.push(collectionConfig)\n      }\n      return acc\n    }, []),\n  )\n\n  if (enabledCollections.length === 0) {\n    return null\n  }\n\n  return (\n    <React.Fragment>\n      {enabledCollections.length === 1 ? (\n        // If there is only 1 option, do not render a popup\n        <Button\n          buttonStyle=\"pill\"\n          className={`${baseClass}__button`}\n          el=\"div\"\n          onClick={() => {\n            if (enabledCollections[0].slug === folderCollectionConfig.slug) {\n              openFolderDrawer()\n            } else {\n              setCreateCollectionSlug(enabledCollections[0].slug)\n              openModal(newDocInFolderDrawerSlug)\n            }\n          }}\n          size=\"small\"\n        >\n          {buttonLabel}\n        </Button>\n      ) : (\n        <Popup\n          button={\n            <Button\n              buttonStyle=\"pill\"\n              className={`${baseClass}__popup-button`}\n              el=\"div\"\n              icon=\"chevron\"\n              size=\"small\"\n            >\n              {buttonLabel}\n            </Button>\n          }\n          buttonType=\"default\"\n          className={`${baseClass}__action-popup`}\n        >\n          <PopupList.ButtonGroup>\n            {enabledCollections.map((collection, index) => {\n              return (\n                <PopupList.Button\n                  key={index}\n                  onClick={() => {\n                    if (collection.slug === folderCollectionConfig.slug) {\n                      openFolderDrawer()\n                    } else {\n                      setCreateCollectionSlug(collection.slug)\n                      openModal(newDocInFolderDrawerSlug)\n                    }\n                  }}\n                >\n                  {getTranslation(collection.labels.singular, i18n)}\n                </PopupList.Button>\n              )\n            })}\n          </PopupList.ButtonGroup>\n        </Popup>\n      )}\n\n      {createCollectionSlug && (\n        <DocumentDrawer\n          collectionSlug={createCollectionSlug}\n          drawerSlug={newDocInFolderDrawerSlug}\n          initialData={{\n            [folderFieldName]: folderID,\n          }}\n          onSave={async ({ doc }) => {\n            await onCreateSuccess({\n              collectionSlug: createCollectionSlug,\n              doc,\n            })\n            closeModal(newDocInFolderDrawerSlug)\n          }}\n          redirectAfterCreate={false}\n        />\n      )}\n\n      {collectionSlugs.includes(folderCollectionConfig.slug) && (\n        <FolderDocumentDrawer\n          initialData={{\n            [folderFieldName]: folderID,\n          }}\n          onSave={async (result) => {\n            await onCreateSuccess({\n              collectionSlug: folderCollectionConfig.slug,\n              doc: result.doc,\n            })\n            closeFolderDrawer()\n          }}\n          redirectAfterCreate={false}\n        />\n      )}\n    </React.Fragment>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/ListHeader/index.scss

@@ -33,7 +33,7 @@
       margin-bottom: 4px;
       display: flex;
       flex-wrap: wrap;
-      align-items: flex-end;
+      align-items: center;
       gap: calc(var(--base) * 0.5);
     }
 

package/dist/elements/Nav/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/elements/Nav/context.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAIhD,KAAK,cAAc,GAAG;IACpB,QAAQ,EAAE,OAAO,CAAA;IACjB,OAAO,EAAE,OAAO,CAAA;IAChB,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC9C,UAAU,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACpC,aAAa,EAAE,OAAO,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,UAAU,+BAMrB,CAAA;AAEF,eAAO,MAAM,MAAM,sBAA8B,CAAA;AAYjD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,CA+EA,CAAA"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/elements/Nav/context.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAIhD,KAAK,cAAc,GAAG;IACpB,QAAQ,EAAE,OAAO,CAAA;IACjB,OAAO,EAAE,OAAO,CAAA;IAChB,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC9C,UAAU,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACpC,aAAa,EAAE,OAAO,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,UAAU,+BAMrB,CAAA;AAEF,eAAO,MAAM,MAAM,sBAA8B,CAAA;AAYjD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,CAkFA,CAAA"}

package/dist/elements/Nav/context.js

@@ -81,9 +81,12 @@ export const NavProvider = ({
       setNavOpen(false);
     }
     setHydrated(true);
-    setTimeout(() => {
+    const timeout = setTimeout(() => {
       setShouldAnimate(true);
     }, 100);
+    return () => {
+      clearTimeout(timeout);
+    };
   }, [largeBreak, midBreak, smallBreak]);
   // when the component unmounts, clear all body scroll locks
   useEffect(() => {

package/dist/elements/Nav/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":["useWindowInfo","usePathname","React","useEffect","useRef","usePreferences","NavContext","createContext","hydrated","navOpen","navRef","setNavOpen","shouldAnimate","useNav","use","getNavPreference","getPreference","navPrefs","preferredState","open","NavProvider","children","initialIsOpen","breakpoints","l","largeBreak","m","midBreak","s","smallBreak","pathname","useState","setShouldAnimate","setHydrated","setNavFromPreferences","current","style","overscrollBehavior","setTimeout","_jsx","value"],"sources":["../../../src/elements/Nav/context.tsx"],"sourcesContent":["'use client'\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport { usePathname } from 'next/navigation.js'\nimport React, { useEffect, useRef } from 'react'\n\nimport { usePreferences } from '../../providers/Preferences/index.js'\n\ntype NavContextType = {\n  hydrated: boolean\n  navOpen: boolean\n  navRef: React.RefObject<HTMLDivElement | null>\n  setNavOpen: (value: boolean) => void\n  shouldAnimate: boolean\n}\n\nexport const NavContext = React.createContext<NavContextType>({\n  hydrated: false,\n  navOpen: true,\n  navRef: null,\n  setNavOpen: () => {},\n  shouldAnimate: false,\n})\n\nexport const useNav = () => React.use(NavContext)\n\nconst getNavPreference = async (getPreference): Promise<boolean> => {\n  const navPrefs = await getPreference('nav')\n  const preferredState = navPrefs?.open\n  if (typeof preferredState === 'boolean') {\n    return preferredState\n  } else {\n    return true\n  }\n}\n\nexport const NavProvider: React.FC<{\n  children: React.ReactNode\n  initialIsOpen?: boolean\n}> = ({ children, initialIsOpen }) => {\n  const {\n    breakpoints: { l: largeBreak, m: midBreak, s: smallBreak },\n  } = useWindowInfo()\n\n  const pathname = usePathname()\n\n  const { getPreference } = usePreferences()\n  const navRef = useRef(null)\n\n  // initialize the nav to be closed\n  // this is because getting the preference is async\n  // so instead of closing it after the preference is loaded\n  // we will open it after the preference is loaded\n  const [navOpen, setNavOpen] = React.useState(initialIsOpen)\n\n  const [shouldAnimate, setShouldAnimate] = React.useState(false)\n  const [hydrated, setHydrated] = React.useState(false)\n\n  // on load check the user's preference and set \"initial\" state\n  useEffect(() => {\n    if (largeBreak === false) {\n      const setNavFromPreferences = async () => {\n        const preferredState = await getNavPreference(getPreference)\n        setNavOpen(preferredState)\n      }\n\n      void setNavFromPreferences()\n    }\n  }, [largeBreak, getPreference, setNavOpen])\n\n  // on smaller screens where the nav is a modal\n  // close the nav when the user navigates away\n  useEffect(() => {\n    if (smallBreak === true) {\n      setNavOpen(false)\n    }\n  }, [pathname])\n\n  // on open and close, lock the body scroll\n  // do not do this on desktop, the sidebar is not a modal\n  useEffect(() => {\n    if (navRef.current) {\n      if (navOpen && midBreak) {\n        navRef.current.style.overscrollBehavior = 'contain'\n      } else {\n        navRef.current.style.overscrollBehavior = 'auto'\n      }\n    }\n  }, [navOpen, midBreak])\n\n  // on smaller screens where the nav is a modal\n  // close the nav when the user resizes down to mobile\n  // the sidebar is a modal on mobile\n  useEffect(() => {\n    if (largeBreak === true || midBreak === true || smallBreak === true) {\n      setNavOpen(false)\n    }\n    setHydrated(true)\n\n    setTimeout(() => {\n      setShouldAnimate(true)\n    }, 100)\n  }, [largeBreak, midBreak, smallBreak])\n\n  // when the component unmounts, clear all body scroll locks\n  useEffect(() => {\n    return () => {\n      if (navRef.current) {\n        navRef.current.style.overscrollBehavior = 'auto'\n      }\n    }\n  }, [])\n\n  return (\n    <NavContext value={{ hydrated, navOpen, navRef, setNavOpen, shouldAnimate }}>\n      {children}\n    </NavContext>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"context.js","names":["useWindowInfo","usePathname","React","useEffect","useRef","usePreferences","NavContext","createContext","hydrated","navOpen","navRef","setNavOpen","shouldAnimate","useNav","use","getNavPreference","getPreference","navPrefs","preferredState","open","NavProvider","children","initialIsOpen","breakpoints","l","largeBreak","m","midBreak","s","smallBreak","pathname","useState","setShouldAnimate","setHydrated","setNavFromPreferences","current","style","overscrollBehavior","timeout","setTimeout","clearTimeout","_jsx","value"],"sources":["../../../src/elements/Nav/context.tsx"],"sourcesContent":["'use client'\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport { usePathname } from 'next/navigation.js'\nimport React, { useEffect, useRef } from 'react'\n\nimport { usePreferences } from '../../providers/Preferences/index.js'\n\ntype NavContextType = {\n  hydrated: boolean\n  navOpen: boolean\n  navRef: React.RefObject<HTMLDivElement | null>\n  setNavOpen: (value: boolean) => void\n  shouldAnimate: boolean\n}\n\nexport const NavContext = React.createContext<NavContextType>({\n  hydrated: false,\n  navOpen: true,\n  navRef: null,\n  setNavOpen: () => {},\n  shouldAnimate: false,\n})\n\nexport const useNav = () => React.use(NavContext)\n\nconst getNavPreference = async (getPreference): Promise<boolean> => {\n  const navPrefs = await getPreference('nav')\n  const preferredState = navPrefs?.open\n  if (typeof preferredState === 'boolean') {\n    return preferredState\n  } else {\n    return true\n  }\n}\n\nexport const NavProvider: React.FC<{\n  children: React.ReactNode\n  initialIsOpen?: boolean\n}> = ({ children, initialIsOpen }) => {\n  const {\n    breakpoints: { l: largeBreak, m: midBreak, s: smallBreak },\n  } = useWindowInfo()\n\n  const pathname = usePathname()\n\n  const { getPreference } = usePreferences()\n  const navRef = useRef(null)\n\n  // initialize the nav to be closed\n  // this is because getting the preference is async\n  // so instead of closing it after the preference is loaded\n  // we will open it after the preference is loaded\n  const [navOpen, setNavOpen] = React.useState(initialIsOpen)\n\n  const [shouldAnimate, setShouldAnimate] = React.useState(false)\n  const [hydrated, setHydrated] = React.useState(false)\n\n  // on load check the user's preference and set \"initial\" state\n  useEffect(() => {\n    if (largeBreak === false) {\n      const setNavFromPreferences = async () => {\n        const preferredState = await getNavPreference(getPreference)\n        setNavOpen(preferredState)\n      }\n\n      void setNavFromPreferences()\n    }\n  }, [largeBreak, getPreference, setNavOpen])\n\n  // on smaller screens where the nav is a modal\n  // close the nav when the user navigates away\n  useEffect(() => {\n    if (smallBreak === true) {\n      setNavOpen(false)\n    }\n  }, [pathname])\n\n  // on open and close, lock the body scroll\n  // do not do this on desktop, the sidebar is not a modal\n  useEffect(() => {\n    if (navRef.current) {\n      if (navOpen && midBreak) {\n        navRef.current.style.overscrollBehavior = 'contain'\n      } else {\n        navRef.current.style.overscrollBehavior = 'auto'\n      }\n    }\n  }, [navOpen, midBreak])\n\n  // on smaller screens where the nav is a modal\n  // close the nav when the user resizes down to mobile\n  // the sidebar is a modal on mobile\n  useEffect(() => {\n    if (largeBreak === true || midBreak === true || smallBreak === true) {\n      setNavOpen(false)\n    }\n    setHydrated(true)\n\n    const timeout = setTimeout(() => {\n      setShouldAnimate(true)\n    }, 100)\n    return () => {\n      clearTimeout(timeout)\n    }\n  }, [largeBreak, midBreak, smallBreak])\n\n  // when the component unmounts, clear all body scroll locks\n  useEffect(() => {\n    return () => {\n      if (navRef.current) {\n        navRef.current.style.overscrollBehavior = 'auto'\n      }\n    }\n  }, [])\n\n  return (\n    <NavContext value={{ hydrated, navOpen, navRef, setNavOpen, shouldAnimate }}>\n      {children}\n    </NavContext>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,5 +1,6 @@
 import type { HTMLAttributes } from 'react';
 import React from 'react';
+export type PillStyle = 'always-white' | 'dark' | 'error' | 'light' | 'light-gray' | 'success' | 'warning' | 'white';
 export type PillProps = {
     alignIcon?: 'left' | 'right';
     'aria-checked'?: boolean;
@@ -15,7 +16,10 @@ export type PillProps = {
     icon?: React.ReactNode;
     id?: string;
     onClick?: () => void;
-    pillStyle?: 'always-white' | 'dark' | 'error' | 'light' | 'light-gray' | 'success' | 'warning' | 'white';
+    /**
+     * @default 'light'
+     */
+    pillStyle?: PillStyle;
     rounded?: boolean;
     size?: 'medium' | 'small';
     to?: string;

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;AAExD,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,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,EACN,cAAc,GACd,MAAM,GACN,OAAO,GACP,OAAO,GACP,YAAY,GACZ,SAAS,GACT,SAAS,GACT,OAAO,CAAA;IACX,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IACzB,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;AA2FrB,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAOpC,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;AAExD,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,MAAM,SAAS,GACjB,cAAc,GACd,MAAM,GACN,OAAO,GACP,OAAO,GACP,YAAY,GACZ,SAAS,GACT,SAAS,GACT,OAAO,CAAA;AAEX,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;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IACzB,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;AA2FrB,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAOpC,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","Link","useDraggableSortable","baseClass","DraggablePill","props","$","id","className","t0","attributes","isDragging","listeners","setNodeRef","transform","t1","t2","filter","Boolean","t3","join","t4","_jsx","StaticPill","elementProps","ref","style","alignIcon","ariaChecked","ariaControls","ariaExpanded","ariaLabel","children","draggable","icon","onClick","pillStyle","rounded","size","to","classes","Element","_jsxs","href","type","undefined","Pill"],"sources":["../../../src/elements/Pill/index.tsx"],"sourcesContent":["'use client'\nimport type { ElementType, HTMLAttributes } from 'react'\n\nimport React from 'react' // TODO: abstract this out to support all routers\n\nimport { Link } from '../Link/index.js'\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?:\n    | 'always-white'\n    | 'dark'\n    | 'error'\n    | 'light'\n    | 'light-gray'\n    | 'success'\n    | 'warning'\n    | 'white'\n  rounded?: boolean\n  size?: 'medium' | 'small'\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    id,\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    size = 'medium',\n    to,\n  } = props\n\n  const classes = [\n    baseClass,\n    `${baseClass}--style-${pillStyle}`,\n    `${baseClass}--size-${size}`,\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) {\n    Element = 'button'\n  }\n\n  if (to) {\n    Element = Link\n  }\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      id={id}\n      onClick={onClick}\n      type={Element === 'button' ? 'button' : undefined}\n    >\n      <span className={`${baseClass}__label`}>{children}</span>\n      {Boolean(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) {\n    return <DraggablePill {...props} />\n  }\n  return <StaticPill {...props} />\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","Link","useDraggableSortable","baseClass","DraggablePill","props","$","id","className","t0","attributes","isDragging","listeners","setNodeRef","transform","t1","t2","filter","Boolean","t3","join","t4","_jsx","StaticPill","elementProps","ref","style","alignIcon","ariaChecked","ariaControls","ariaExpanded","ariaLabel","children","draggable","icon","onClick","pillStyle","rounded","size","to","classes","Element","_jsxs","href","type","undefined","Pill"],"sources":["../../../src/elements/Pill/index.tsx"],"sourcesContent":["'use client'\nimport type { ElementType, HTMLAttributes } from 'react'\n\nimport React from 'react' // TODO: abstract this out to support all routers\n\nimport { Link } from '../Link/index.js'\n\nexport type PillStyle =\n  | 'always-white'\n  | 'dark'\n  | 'error'\n  | 'light'\n  | 'light-gray'\n  | 'success'\n  | 'warning'\n  | 'white'\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  /**\n   * @default 'light'\n   */\n  pillStyle?: PillStyle\n  rounded?: boolean\n  size?: 'medium' | 'small'\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    id,\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    size = 'medium',\n    to,\n  } = props\n\n  const classes = [\n    baseClass,\n    `${baseClass}--style-${pillStyle}`,\n    `${baseClass}--size-${size}`,\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) {\n    Element = 'button'\n  }\n\n  if (to) {\n    Element = Link\n  }\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      id={id}\n      onClick={onClick}\n      type={Element === 'button' ? 'button' : undefined}\n    >\n      <span className={`${baseClass}__label`}>{children}</span>\n      {Boolean(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) {\n    return <DraggablePill {...props} />\n  }\n  return <StaticPill {...props} />\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import './index.scss';
+export type SelectablePill = {
+    key?: string;
+    Label?: React.ReactNode;
+    name: string;
+    selected: boolean;
+};
+export type Props = {
+    draggable?: {
+        onDragEnd: (args: {
+            moveFromIndex: number;
+            moveToIndex: number;
+        }) => void;
+    };
+    onClick?: (args: {
+        pill: SelectablePill;
+    }) => Promise<void> | void;
+    pills: SelectablePill[];
+};
+/**
+ * Displays a wrappable list of pills that can be selected or deselected.
+ * If `draggable` is true, the pills can be reordered by dragging.
+ */
+export declare const PillSelector: React.FC<Props>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PillSelector/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,cAAc,GAAG;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,MAAM,MAAM,KAAK,GAAG;IAClB,SAAS,CAAC,EAAE;QACV,SAAS,EAAE,CAAC,IAAI,EAAE;YAAE,aAAa,EAAE,MAAM,CAAC;YAAC,WAAW,EAAE,MAAM,CAAA;SAAE,KAAK,IAAI,CAAA;KAC1E,CAAA;IACD,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,cAAc,CAAA;KAAE,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IAClE,KAAK,EAAE,cAAc,EAAE,CAAA;CACxB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiDxC,CAAA"}

package/dist/elements/PillSelector/index.js

@@ -0,0 +1,72 @@
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { PlusIcon } from '../../icons/Plus/index.js';
+import { XIcon } from '../../icons/X/index.js';
+import { DraggableSortable } from '../DraggableSortable/index.js';
+import { Pill } from '../Pill/index.js';
+import './index.scss';
+const baseClass = 'pill-selector';
+/**
+ * Displays a wrappable list of pills that can be selected or deselected.
+ * If `draggable` is true, the pills can be reordered by dragging.
+ */
+export const PillSelector = ({
+  draggable,
+  onClick,
+  pills
+}) => {
+  const Wrapper = React.useMemo(() => {
+    if (draggable) {
+      return ({
+        children
+      }) => /*#__PURE__*/_jsx(DraggableSortable, {
+        className: baseClass,
+        ids: pills.map(pill => pill.name),
+        onDragEnd: ({
+          moveFromIndex,
+          moveToIndex
+        }) => {
+          draggable.onDragEnd({
+            moveFromIndex,
+            moveToIndex
+          });
+        },
+        children: children
+      });
+    } else {
+      return ({
+        children: children_0
+      }) => /*#__PURE__*/_jsx("div", {
+        className: baseClass,
+        children: children_0
+      });
+    }
+  }, [draggable, pills]);
+  return /*#__PURE__*/_jsx(Wrapper, {
+    children: pills.map((pill_0, i) => {
+      return /*#__PURE__*/_jsx(Pill, {
+        alignIcon: "left",
+        "aria-checked": pill_0.selected,
+        className: [`${baseClass}__pill`, pill_0.selected && `${baseClass}__pill--selected`].filter(Boolean).join(' '),
+        draggable: Boolean(draggable),
+        icon: pill_0.selected ? /*#__PURE__*/_jsx(XIcon, {}) : /*#__PURE__*/_jsx(PlusIcon, {}),
+        id: pill_0.name,
+        onClick: () => {
+          if (onClick) {
+            void onClick({
+              pill: pill_0
+            });
+          }
+        },
+        size: "small",
+        children: pill_0.Label ?? /*#__PURE__*/_jsx("span", {
+          className: `${baseClass}__pill-label`,
+          children: pill_0.name
+        })
+      }, pill_0.key ?? `${pill_0.name}-${i}`);
+    })
+  });
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","PlusIcon","XIcon","DraggableSortable","Pill","baseClass","PillSelector","draggable","onClick","pills","Wrapper","useMemo","children","_jsx","className","ids","map","pill","name","onDragEnd","moveFromIndex","moveToIndex","i","alignIcon","selected","filter","Boolean","join","icon","id","size","Label","key"],"sources":["../../../src/elements/PillSelector/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { DraggableSortable } from '../DraggableSortable/index.js'\nimport { Pill } from '../Pill/index.js'\nimport './index.scss'\n\nconst baseClass = 'pill-selector'\n\nexport type SelectablePill = {\n  key?: string\n  Label?: React.ReactNode\n  name: string\n  selected: boolean\n}\n\nexport type Props = {\n  draggable?: {\n    onDragEnd: (args: { moveFromIndex: number; moveToIndex: number }) => void\n  }\n  onClick?: (args: { pill: SelectablePill }) => Promise<void> | void\n  pills: SelectablePill[]\n}\n\n/**\n * Displays a wrappable list of pills that can be selected or deselected.\n * If `draggable` is true, the pills can be reordered by dragging.\n */\nexport const PillSelector: React.FC<Props> = ({ draggable, onClick, pills }) => {\n  const Wrapper = React.useMemo(() => {\n    if (draggable) {\n      return ({ children }) => (\n        <DraggableSortable\n          className={baseClass}\n          ids={pills.map((pill) => pill.name)}\n          onDragEnd={({ moveFromIndex, moveToIndex }) => {\n            draggable.onDragEnd({\n              moveFromIndex,\n              moveToIndex,\n            })\n          }}\n        >\n          {children}\n        </DraggableSortable>\n      )\n    } else {\n      return ({ children }) => <div className={baseClass}>{children}</div>\n    }\n  }, [draggable, pills])\n\n  return (\n    <Wrapper>\n      {pills.map((pill, i) => {\n        return (\n          <Pill\n            alignIcon=\"left\"\n            aria-checked={pill.selected}\n            className={[`${baseClass}__pill`, pill.selected && `${baseClass}__pill--selected`]\n              .filter(Boolean)\n              .join(' ')}\n            draggable={Boolean(draggable)}\n            icon={pill.selected ? <XIcon /> : <PlusIcon />}\n            id={pill.name}\n            key={pill.key ?? `${pill.name}-${i}`}\n            onClick={() => {\n              if (onClick) {\n                void onClick({ pill })\n              }\n            }}\n            size=\"small\"\n          >\n            {pill.Label ?? <span className={`${baseClass}__pill-label`}>{pill.name}</span>}\n          </Pill>\n        )\n      })}\n    </Wrapper>\n  )\n}\n"],"mappings":"AAAA;;;AAEA,OAAOA,KAAA,MAAW;AAElB,SAASC,QAAQ,QAAQ;AACzB,SAASC,KAAK,QAAQ;AACtB,SAASC,iBAAiB,QAAQ;AAClC,SAASC,IAAI,QAAQ;AACrB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAiBlB;;;;AAIA,OAAO,MAAMC,YAAA,GAAgCA,CAAC;EAAEC,SAAS;EAAEC,OAAO;EAAEC;AAAK,CAAE;EACzE,MAAMC,OAAA,GAAUV,KAAA,CAAMW,OAAO,CAAC;IAC5B,IAAIJ,SAAA,EAAW;MACb,OAAO,CAAC;QAAEK;MAAQ,CAAE,kBAClBC,IAAA,CAACV,iBAAA;QACCW,SAAA,EAAWT,SAAA;QACXU,GAAA,EAAKN,KAAA,CAAMO,GAAG,CAAEC,IAAA,IAASA,IAAA,CAAKC,IAAI;QAClCC,SAAA,EAAWA,CAAC;UAAEC,aAAa;UAAEC;QAAW,CAAE;UACxCd,SAAA,CAAUY,SAAS,CAAC;YAClBC,aAAA;YACAC;UACF;QACF;kBAECT;;IAGP,OAAO;MACL,OAAO,CAAC;QAAEA,QAAQ,EAARA;MAAQ,CAAE,kBAAKC,IAAA,CAAC;QAAIC,SAAA,EAAWT,SAAA;kBAAYO;;IACvD;EACF,GAAG,CAACL,SAAA,EAAWE,KAAA,CAAM;EAErB,oBACEI,IAAA,CAACH,OAAA;cACED,KAAA,CAAMO,GAAG,CAAC,CAACC,MAAA,EAAMK,CAAA;MAChB,oBACET,IAAA,CAACT,IAAA;QACCmB,SAAA,EAAU;QACV,gBAAcN,MAAA,CAAKO,QAAQ;QAC3BV,SAAA,EAAW,CAAC,GAAGT,SAAA,QAAiB,EAAEY,MAAA,CAAKO,QAAQ,IAAI,GAAGnB,SAAA,kBAA2B,CAAC,CAC/EoB,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;QACRpB,SAAA,EAAWmB,OAAA,CAAQnB,SAAA;QACnBqB,IAAA,EAAMX,MAAA,CAAKO,QAAQ,gBAAGX,IAAA,CAACX,KAAA,qBAAWW,IAAA,CAACZ,QAAA;QACnC4B,EAAA,EAAIZ,MAAA,CAAKC,IAAI;QAEbV,OAAA,EAASA,CAAA;UACP,IAAIA,OAAA,EAAS;YACX,KAAKA,OAAA,CAAQ;cAAES,IAAA,EAAAA;YAAK;UACtB;QACF;QACAa,IAAA,EAAK;kBAEJb,MAAA,CAAKc,KAAK,iBAAIlB,IAAA,CAAC;UAAKC,SAAA,EAAW,GAAGT,SAAA,cAAuB;oBAAGY,MAAA,CAAKC;;SAR7DD,MAAA,CAAKe,GAAG,IAAI,GAAGf,MAAA,CAAKC,IAAI,IAAII,CAAA,EAAG;IAW1C;;AAGN","ignoreList":[]}

package/dist/elements/{ColumnSelector → PillSelector}/index.scss

@@ -1,18 +1,18 @@
 @import '../../scss/styles.scss';
 
 @layer payload-default {
-  .column-selector {
+  .pill-selector {
     display: flex;
     flex-wrap: wrap;
     background: var(--theme-elevation-50);
     padding: var(--base);
     gap: calc(var(--base) / 2);
 
-    &__column {
+    &__pill {
       background-color: transparent;
       box-shadow: 0 0 0 1px var(--theme-elevation-150);
 
-      &.column-selector__column {
+      &.pill-selector__pill {
         cursor: pointer;
 
         &:hover {
@@ -20,7 +20,7 @@
         }
       }
 
-      &.column-selector__column--active {
+      &.pill-selector__pill--selected {
         background-color: var(--theme-elevation-0);
         box-shadow:
           0 0px 1px 1px var(--theme-elevation-150),
@@ -41,7 +41,7 @@
     }
 
     @include small-break {
-      padding: calc(var(--base) / 2) calc(var(--base) / 2) 0;
+      padding: calc(var(--base) / 2);
     }
   }
 }