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

package/dist/elements/ListDrawer/index.scss

@@ -1,109 +1,118 @@
 @import '../../scss/styles.scss';
 
-.list-drawer {
-  &__header {
-    margin-top: base(2.5);
-    width: 100%;
+@layer payload-default {
+  .list-drawer {
+    &__header {
+      margin-top: base(2.5);
+      width: 100%;
+
+      @include mid-break {
+        margin-top: base(1.5);
+      }
+    }
 
-    @include mid-break {
-      margin-top: base(1.5);
+    &__header-wrap {
+      display: flex;
+      gap: base(1);
     }
-  }
 
-  &__header-wrap {
-    display: flex;
-    gap: base(1);
-  }
+    &__header-content {
+      display: flex;
+      flex-wrap: wrap;
+      flex-grow: 1;
+      align-items: flex-start;
+      align-items: center;
 
-  &__header-content {
-    display: flex;
-    flex-wrap: wrap;
-    flex-grow: 1;
-    align-items: flex-start;
+      button .pill {
+        pointer-events: none;
+        margin: 0;
+        top: 4px;
+        margin-left: base(0.5);
+      }
+    }
 
-    button .pill {
-      pointer-events: none;
+    &__header-text {
       margin: 0;
-      top: 4px;
-      margin-left: base(0.5);
     }
-  }
-
-  &__header-text {
-    margin: 0;
-  }
 
-  &__header-close {
-    flex-shrink: 0;
-  }
+    &__header-close {
+      flex-shrink: 0;
+    }
 
-  &__toggler {
-    background: transparent;
-    border: 0;
-    padding: 0;
-    cursor: pointer;
-    color: inherit;
+    &__toggler {
+      background: transparent;
+      border: 0;
+      padding: 0;
+      cursor: pointer;
+      color: inherit;
+      border-radius: var(--style-radius-s);
+
+      &:focus:not(:focus-visible),
+      &:focus-within:not(:focus-visible) {
+        outline: none;
+      }
 
-    &:focus:not(:focus-visible),
-    &:focus-within:not(:focus-visible) {
-      outline: none;
-    }
+      &:focus-visible {
+        outline: var(--accessibility-outline);
+        outline-offset: var(--accessibility-outline-offset);
+      }
 
-    &:disabled {
-      pointer-events: none;
+      &:disabled {
+        pointer-events: none;
+      }
     }
-  }
 
-  &__header-close {
-    border: 0;
-    background-color: transparent;
-    padding: 0;
-    margin: 0;
-    cursor: pointer;
-    overflow: hidden;
-    width: base(1);
-    height: base(1);
-
-    svg {
-      width: base(2);
-      height: base(2);
-      position: relative;
-      inset-inline-start: base(-0.5);
-      top: base(-0.5);
-
-      .stroke {
-        stroke-width: 2px;
-        vector-effect: non-scaling-stroke;
+    &__header-close {
+      border: 0;
+      background-color: transparent;
+      padding: 0;
+      margin: 0;
+      cursor: pointer;
+      overflow: hidden;
+      width: base(1);
+      height: base(1);
+
+      svg {
+        width: base(2);
+        height: base(2);
+        position: relative;
+        inset-inline-start: base(-0.5);
+        top: base(-0.5);
+
+        .stroke {
+          stroke-width: 2px;
+          vector-effect: non-scaling-stroke;
+        }
       }
     }
-  }
 
-  &__select-collection-wrap {
-    margin-top: base(1);
-  }
-
-  &__first-cell {
-    border: 0;
-    background-color: transparent;
-    padding: 0;
-    cursor: pointer;
-    text-decoration: underline;
-    text-align: left;
-    white-space: nowrap;
-  }
-
-  @include mid-break {
-    .collection-list__header {
-      margin-bottom: base(0.5);
+    &__select-collection-wrap {
+      margin-top: base(1);
     }
 
-    &__select-collection-wrap {
-      margin-top: calc(var(--base) / 2);
+    &__first-cell {
+      border: 0;
+      background-color: transparent;
+      padding: 0;
+      cursor: pointer;
+      text-decoration: underline;
+      text-align: left;
+      white-space: nowrap;
     }
 
-    &__header-content {
-      button .pill {
-        top: 2px;
+    @include mid-break {
+      .collection-list__header {
+        margin-bottom: base(0.5);
+      }
+
+      &__select-collection-wrap {
+        margin-top: calc(var(--base) / 2);
+      }
+
+      &__header-content {
+        button .pill {
+          top: 2px;
+        }
       }
     }
   }

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

@@ -1,11 +1,15 @@
 import type { FilterOptionsResult, SanitizedCollectionConfig } from 'payload';
 import type React from 'react';
 import type { HTMLAttributes } from 'react';
+import type { useSelection } from '../../providers/Selection/index.js';
 export type ListDrawerProps = {
+    readonly allowCreate?: boolean;
     readonly collectionSlugs: string[];
     readonly customHeader?: React.ReactNode;
     readonly drawerSlug?: string;
+    readonly enableRowSelections?: boolean;
     readonly filterOptions?: FilterOptionsResult;
+    readonly onBulkSelect?: (selected: ReturnType<typeof useSelection>['selected']) => void;
     readonly onSelect?: (args: {
         collectionSlug: SanitizedCollectionConfig['slug'];
         docID: string;
@@ -24,14 +28,16 @@ export type UseListDrawer = (args: {
     selectedCollection?: string;
     uploads?: boolean;
 }) => [
-    React.FC<Pick<ListDrawerProps, 'onSelect'>>,
+    React.FC<Pick<ListDrawerProps, 'allowCreate' | 'enableRowSelections' | 'onBulkSelect' | 'onSelect'>>,
     React.FC<Pick<ListTogglerProps, 'children' | 'className' | 'disabled'>>,
     {
         closeDrawer: () => void;
+        collectionSlugs: SanitizedCollectionConfig['slug'][];
         drawerDepth: number;
         drawerSlug: string;
         isDrawerOpen: boolean;
         openDrawer: () => void;
+        setCollectionSlugs: React.Dispatch<React.SetStateAction<SanitizedCollectionConfig['slug'][]>>;
         toggleDrawer: () => void;
     }
 ];

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,QAAQ,CAAC,eAAe,EAAE,MAAM,EAAE,CAAA;IAClC,QAAQ,CAAC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,aAAa,CAAC,EAAE,mBAAmB,CAAA;IAC5C,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QACzB,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;QACjD,KAAK,EAAE,MAAM,CAAA;KACd,KAAK,IAAI,CAAA;IACV,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAA;CACrC,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"}
+{"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,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAA;AAEtE,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,eAAe,EAAE,MAAM,EAAE,CAAA;IAClC,QAAQ,CAAC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,aAAa,CAAC,EAAE,mBAAmB,CAAA;IAC5C,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,UAAU,CAAC,KAAK,IAAI,CAAA;IACvF,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QACzB,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;QACjD,KAAK,EAAE,MAAM,CAAA;KACd,KAAK,IAAI,CAAA;IACV,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAA;CACrC,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,CACN,IAAI,CAAC,eAAe,EAAE,aAAa,GAAG,qBAAqB,GAAG,cAAc,GAAG,UAAU,CAAC,CAC3F;IACD,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,WAAW,GAAG,UAAU,CAAC,CAAC;IACvE;QACE,WAAW,EAAE,MAAM,IAAI,CAAA;QACvB,eAAe,EAAE,yBAAyB,CAAC,MAAM,CAAC,EAAE,CAAA;QACpD,WAAW,EAAE,MAAM,CAAA;QACnB,UAAU,EAAE,MAAM,CAAA;QAClB,YAAY,EAAE,OAAO,CAAA;QACrB,UAAU,EAAE,MAAM,IAAI,CAAA;QACtB,kBAAkB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,yBAAyB,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAA;QAC7F,YAAY,EAAE,MAAM,IAAI,CAAA;KACzB;CACF,CAAA"}

package/dist/elements/ListDrawer/types.js

@@ -1,3 +1,2 @@
-export { };
-
+export {};
 //# sourceMappingURL=types.js.map

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  readonly collectionSlugs: string[]\n  readonly customHeader?: React.ReactNode\n  readonly drawerSlug?: string\n  readonly filterOptions?: FilterOptionsResult\n  readonly onSelect?: (args: {\n    collectionSlug: SanitizedCollectionConfig['slug']\n    docID: string\n  }) => void\n  readonly 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":"AAuBA,WAgBC"}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/ListDrawer/types.ts"],"sourcesContent":["import type { FilterOptionsResult, SanitizedCollectionConfig } from 'payload'\nimport type React from 'react'\nimport type { HTMLAttributes } from 'react'\n\nimport type { useSelection } from '../../providers/Selection/index.js'\n\nexport type ListDrawerProps = {\n  readonly allowCreate?: boolean\n  readonly collectionSlugs: string[]\n  readonly customHeader?: React.ReactNode\n  readonly drawerSlug?: string\n  readonly enableRowSelections?: boolean\n  readonly filterOptions?: FilterOptionsResult\n  readonly onBulkSelect?: (selected: ReturnType<typeof useSelection>['selected']) => void\n  readonly onSelect?: (args: {\n    collectionSlug: SanitizedCollectionConfig['slug']\n    docID: string\n  }) => void\n  readonly 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<\n    Pick<ListDrawerProps, 'allowCreate' | 'enableRowSelections' | 'onBulkSelect' | 'onSelect'>\n  >, // drawer\n  React.FC<Pick<ListTogglerProps, 'children' | 'className' | 'disabled'>>, // toggler\n  {\n    closeDrawer: () => void\n    collectionSlugs: SanitizedCollectionConfig['slug'][]\n    drawerDepth: number\n    drawerSlug: string\n    isDrawerOpen: boolean\n    openDrawer: () => void\n    setCollectionSlugs: React.Dispatch<React.SetStateAction<SanitizedCollectionConfig['slug'][]>>\n    toggleDrawer: () => void\n  },\n]\n"],"mappings":"AA4BA","ignoreList":[]}

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import './index.scss';
+type Props = {
+    children?: React.ReactNode;
+    className?: string;
+    heading: string;
+};
+export declare function ListHeader({ children, className, heading }: Props): React.JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ListHeader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,MAAM,CAAA;CAChB,CAAA;AACD,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,KAAK,qBAOjE"}

package/dist/elements/ListHeader/index.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import './index.scss';
+const baseClass = 'list-header';
+export function ListHeader({
+  children,
+  className,
+  heading
+}) {
+  return /*#__PURE__*/_jsxs("header", {
+    className: [baseClass, className].filter(Boolean).join(' '),
+    children: [/*#__PURE__*/_jsx("h1", {
+      children: heading
+    }), children]
+  });
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","baseClass","ListHeader","children","className","heading","_jsxs","filter","Boolean","join","_jsx"],"sources":["../../../src/elements/ListHeader/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'list-header'\n\ntype Props = {\n  children?: React.ReactNode\n  className?: string\n  heading: string\n}\nexport function ListHeader({ children, className, heading }: Props) {\n  return (\n    <header className={[baseClass, className].filter(Boolean).join(' ')}>\n      <h1>{heading}</h1>\n      {children}\n    </header>\n  )\n}\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAOlB,OAAO,SAASC,WAAW;EAAEC,QAAQ;EAAEC,SAAS;EAAEC;AAAO,CAAS;EAChE,oBACEC,KAAA,CAAC;IAAOF,SAAA,EAAW,CAACH,SAAA,EAAWG,SAAA,CAAU,CAACG,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;4BAC7DC,IAAA,CAAC;gBAAIL;QACJF,QAAA;;AAGP","ignoreList":[]}

package/dist/elements/ListHeader/index.scss

@@ -0,0 +1,12 @@
+@layer payload-default {
+  .list-header {
+    display: flex;
+    align-items: flex-end;
+    flex-wrap: wrap;
+    gap: calc(var(--base) * 0.8);
+
+    h1 {
+      margin: 0;
+    }
+  }
+}

package/dist/elements/ListSelection/index.js

@@ -1,46 +1,64 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { Fragment } from 'react';
 import { SelectAllStatus, useSelection } from '../../providers/Selection/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import './index.scss';
 const baseClass = 'list-selection';
-export const ListSelection = ({ label })=>{
-    const { count, selectAll, toggleAll, totalDocs } = useSelection();
-    const { t } = useTranslation();
-    if (count === 0) {
-        return null;
-    }
-    return /*#__PURE__*/ _jsxs("div", {
-        className: baseClass,
-        children: [
-            /*#__PURE__*/ _jsx("span", {
-                children: t('general:selectedCount', {
-                    count,
-                    label
-                })
-            }),
-            selectAll !== SelectAllStatus.AllAvailable && /*#__PURE__*/ _jsxs(Fragment, {
-                children: [
-                    ' ',
-                    "—",
-                    /*#__PURE__*/ _jsx("button", {
-                        "aria-label": t('general:selectAll', {
-                            count,
-                            label
-                        }),
-                        className: `${baseClass}__button`,
-                        onClick: ()=>toggleAll(true),
-                        type: "button",
-                        children: t('general:selectAll', {
-                            count: totalDocs,
-                            label
-                        })
-                    })
-                ]
-            })
-        ]
+export const ListSelection = t0 => {
+  const $ = _c(7);
+  const {
+    label
+  } = t0;
+  const {
+    count,
+    selectAll,
+    toggleAll,
+    totalDocs
+  } = useSelection();
+  const {
+    t
+  } = useTranslation();
+  if (count === 0) {
+    return null;
+  }
+  let t1;
+  if ($[0] !== count || $[1] !== label || $[2] !== t || $[3] !== selectAll || $[4] !== toggleAll || $[5] !== totalDocs) {
+    t1 = _jsxs("div", {
+      className: baseClass,
+      children: [_jsx("span", {
+        children: t("general:selectedCount", {
+          count,
+          label
+        })
+      }), selectAll !== SelectAllStatus.AllAvailable && _jsxs(Fragment, {
+        children: [" ", "\u2014", _jsx("button", {
+          "aria-label": t("general:selectAll", {
+            count,
+            label
+          }),
+          className: `${baseClass}__button`,
+          onClick: () => toggleAll(true),
+          type: "button",
+          children: t("general:selectAll", {
+            count: totalDocs,
+            label
+          })
+        })]
+      })]
     });
+    $[0] = count;
+    $[1] = label;
+    $[2] = t;
+    $[3] = selectAll;
+    $[4] = toggleAll;
+    $[5] = totalDocs;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  return t1;
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ListSelection/index.tsx"],"sourcesContent":["'use client'\nimport React, { Fragment } from 'react'\n\nimport { SelectAllStatus, useSelection } from '../../providers/Selection/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'list-selection'\n\nexport type ListSelectionProps = {\n  label: string\n}\n\nexport const ListSelection: React.FC<ListSelectionProps> = ({ label }) => {\n  const { count, selectAll, toggleAll, totalDocs } = useSelection()\n  const { t } = useTranslation()\n\n  if (count === 0) {\n    return null\n  }\n\n  return (\n    <div className={baseClass}>\n      <span>{t('general:selectedCount', { count, label })}</span>\n      {selectAll !== SelectAllStatus.AllAvailable && (\n        <Fragment>\n          {' '}\n          &mdash;\n          <button\n            aria-label={t('general:selectAll', { count, label })}\n            className={`${baseClass}__button`}\n            onClick={() => toggleAll(true)}\n            type=\"button\"\n          >\n            {t('general:selectAll', { count: totalDocs, label })}\n          </button>\n        </Fragment>\n      )}\n    </div>\n  )\n}\n"],"names":["React","Fragment","SelectAllStatus","useSelection","useTranslation","baseClass","ListSelection","label","count","selectAll","toggleAll","totalDocs","t","div","className","span","AllAvailable","button","aria-label","onClick","type"],"mappings":"AAAA;;AACA,OAAOA,SAASC,QAAQ,QAAQ,QAAO;AAEvC,SAASC,eAAe,EAAEC,YAAY,QAAQ,qCAAoC;AAClF,SAASC,cAAc,QAAQ,uCAAsC;AACrE,OAAO,eAAc;AAErB,MAAMC,YAAY;AAMlB,OAAO,MAAMC,gBAA8C,CAAC,EAAEC,KAAK,EAAE;IACnE,MAAM,EAAEC,KAAK,EAAEC,SAAS,EAAEC,SAAS,EAAEC,SAAS,EAAE,GAAGR;IACnD,MAAM,EAAES,CAAC,EAAE,GAAGR;IAEd,IAAII,UAAU,GAAG;QACf,OAAO;IACT;IAEA,qBACE,MAACK;QAAIC,WAAWT;;0BACd,KAACU;0BAAMH,EAAE,yBAAyB;oBAAEJ;oBAAOD;gBAAM;;YAChDE,cAAcP,gBAAgBc,YAAY,kBACzC,MAACf;;oBACE;oBAAI;kCAEL,KAACgB;wBACCC,cAAYN,EAAE,qBAAqB;4BAAEJ;4BAAOD;wBAAM;wBAClDO,WAAW,CAAC,EAAET,UAAU,QAAQ,CAAC;wBACjCc,SAAS,IAAMT,UAAU;wBACzBU,MAAK;kCAEJR,EAAE,qBAAqB;4BAAEJ,OAAOG;4BAAWJ;wBAAM;;;;;;AAM9D,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","React","Fragment","SelectAllStatus","useSelection","useTranslation","baseClass","ListSelection","t0","$","label","count","selectAll","toggleAll","totalDocs","t","t1","_jsxs","className","children","_jsx","AllAvailable","onClick","type"],"sources":["../../../src/elements/ListSelection/index.tsx"],"sourcesContent":["'use client'\nimport React, { Fragment } from 'react'\n\nimport { SelectAllStatus, useSelection } from '../../providers/Selection/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'list-selection'\n\nexport type ListSelectionProps = {\n  label: string\n}\n\nexport const ListSelection: React.FC<ListSelectionProps> = ({ label }) => {\n  const { count, selectAll, toggleAll, totalDocs } = useSelection()\n  const { t } = useTranslation()\n\n  if (count === 0) {\n    return null\n  }\n\n  return (\n    <div className={baseClass}>\n      <span>{t('general:selectedCount', { count, label })}</span>\n      {selectAll !== SelectAllStatus.AllAvailable && (\n        <Fragment>\n          {' '}\n          &mdash;\n          <button\n            aria-label={t('general:selectAll', { count, label })}\n            className={`${baseClass}__button`}\n            onClick={() => toggleAll(true)}\n            type=\"button\"\n          >\n            {t('general:selectAll', { count: totalDocs, label })}\n          </button>\n        </Fragment>\n      )}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,eAAe,EAAEC,YAAY,QAAQ;AAC9C,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAMlB,OAAO,MAAMC,aAAA,GAA8CC,EAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAAC;IAAAU;EAAA,IAAAF,EAAS;EACnE;IAAAG,KAAA;IAAAC,SAAA;IAAAC,SAAA;IAAAC;EAAA,IAAmDV,YAAA;EACnD;IAAAW;EAAA,IAAcV,cAAA;EAAA,IAEVM,KAAA,MAAU;IAAA;EAAA;EAAA,IAAAK,EAAA;EAAA,IAAAP,CAAA,QAAAE,KAAA,IAAAF,CAAA,QAAAC,KAAA,IAAAD,CAAA,QAAAM,CAAA,IAAAN,CAAA,QAAAG,SAAA,IAAAH,CAAA,QAAAI,SAAA,IAAAJ,CAAA,QAAAK,SAAA;IAKZE,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EAAAZ,SAAA;MAAAa,QAAA,GACCC,IAAA,CAAC;QAAAD,QAAA,EAAMJ,CAAA,CAAE;UAAAJ,KAAA;UAAAD;QAAA,CAAwC;MAAA,C,GAChDE,SAAA,KAAAT,eAAA,CAAAkB,YAA0C,IACzCJ,KAAA,CAAAf,QAAA;QAAAiB,QAAA,GACG,KAAI,UAELC,IAAA,CAAC;UAAA,cACaL,CAAA,CAAE;YAAAJ,KAAA;YAAAD;UAAA,CAAoC;UAAAQ,SAAA,EACvC,GAAAZ,SAAA,UAAsB;UAAAgB,OAAA,EAAAA,CAAA,KAClBT,SAAA,KAAU;UAAAU,IAAA,EACpB;UAAAJ,QAAA,EAEJJ,CAAA,CAAE;YAAAJ,KAAA,EAA8BG,SAAA;YAAAJ;UAAA,CAAiB;QAAA,C;;;;;;;;;;;;;SAZ1DM,E;CAkBJ","ignoreList":[]}

package/dist/elements/ListSelection/index.scss

@@ -1,18 +1,20 @@
 @import '../../scss/styles.scss';
 
-.list-selection {
-  margin-left: auto;
-  color: var(--theme-elevation-500);
-
-  &__button {
+@layer payload-default {
+  .list-selection {
+    margin-left: auto;
     color: var(--theme-elevation-500);
-    background: unset;
-    border: none;
-    text-decoration: underline;
-    cursor: pointer;
-  }
 
-  @include small-break {
-    margin-bottom: base(0.5);
+    &__button {
+      color: var(--theme-elevation-500);
+      background: unset;
+      border: none;
+      text-decoration: underline;
+      cursor: pointer;
+    }
+
+    @include small-break {
+      margin-bottom: base(0.5);
+    }
   }
 }