@payloadcms/ui 4.0.0-internal.1f9ae9a → 4.0.0-internal.293e026

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","useWindowInfo","validateWhereQuery","React","Fragment","useEffect","useRef","useState","Popup","PopupList","ChevronIcon","Dots","useListQuery","useTranslation","AnimateHeight","Button","ColumnsButton","GroupByControl","QueryPresetBar","ListSearchFilter","WhereBuilder","baseClass","ListControls","props","$","beforeActions","collectionConfig","collectionSlug","disableQueryPresets","enableColumns","t0","enableFilters","t1","enableSort","t2","hasCreatePermission","listMenuItems","newDocumentURL","queryPreset","activePreset","queryPresetPermissions","renderedFilters","resolvedFilterOptions","undefined","handleSearchChange","query","t","breakpoints","t3","s","smallBreak","searchLabelTranslated","label","split","hasWhereParam","Boolean","where","shouldInitializeWhereOpened","visibleDrawer","setVisibleDrawer","t4","current","t5","t6","_jsxs","className","children","_jsx","onSearchChange","searchQueryParam","search","enableQueryPresets","buttonStyle","extraButtonProps","icon","direction","size","onClick","admin","groupBy","slug","fields","el","id","to","Array","isArray","length","button","ariaLabel","horizontalAlign","verticalAlign","ButtonGroup","map","_temp","height","collectionPluralLabel","labels","plural","item","i"],"sources":["../../../src/elements/ListControls/index.tsx"],"sourcesContent":["'use client'\n\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport { validateWhereQuery } from 'payload/shared'\nimport React, { Fragment, useEffect, useRef, useState } from 'react'\n\nimport type { ListControlsProps } from './types.js'\n\nimport { Popup, PopupList } from '../../elements/Popup/index.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { Dots } from '../../icons/Dots/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { AnimateHeight } from '../AnimateHeight/index.js'\nimport { Button } from '../Button/index.js'\nimport { ColumnsButton } from '../ColumnsButton/index.js'\nimport { GroupByControl } from '../GroupByControl/index.js'\nimport { QueryPresetBar } from '../QueryPresets/QueryPresetBar/index.js'\nimport { ListSearchFilter } from '../Search/ListSearchFilter/index.js'\nimport { WhereBuilder } from '../WhereBuilder/index.js'\nimport './index.css'\n\nconst baseClass = 'list-controls'\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 {\n    beforeActions,\n    collectionConfig,\n    collectionSlug,\n    disableQueryPresets,\n    enableColumns = true,\n    enableFilters = true,\n    enableSort = false,\n    hasCreatePermission,\n    listMenuItems,\n    newDocumentURL,\n    queryPreset: activePreset,\n    queryPresetPermissions,\n    renderedFilters,\n    resolvedFilterOptions,\n  } = props\n\n  const { handleSearchChange, query } = useListQuery()\n\n  const { t } = useTranslation()\n\n  const {\n    breakpoints: { s: smallBreak },\n  } = useWindowInfo()\n\n  // Simplified placeholder - just \"Search\" instead of \"Search by X, Y, Z\"\n  const searchLabelTranslated = t('general:searchBy', { label: '' }).split(' ')[0]\n\n  const hasWhereParam = useRef(Boolean(query?.where))\n\n  const shouldInitializeWhereOpened = validateWhereQuery(query?.where)\n\n  const [visibleDrawer, setVisibleDrawer] = useState<'columns' | 'sort' | 'where'>(\n    shouldInitializeWhereOpened ? 'where' : undefined,\n  )\n\n  useEffect(() => {\n    if (hasWhereParam.current && !query?.where) {\n      hasWhereParam.current = false\n    } else if (query?.where) {\n      hasWhereParam.current = true\n    }\n  }, [setVisibleDrawer, query?.where])\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__search-row`}>\n        <div className={`${baseClass}__left`}>\n          <ListSearchFilter\n            key={collectionSlug}\n            label={searchLabelTranslated}\n            onSearchChange={handleSearchChange}\n            searchQueryParam={query?.search}\n          />\n          {collectionConfig?.enableQueryPresets && !disableQueryPresets && (\n            <QueryPresetBar\n              activePreset={activePreset}\n              collectionSlug={collectionSlug}\n              queryPresetPermissions={queryPresetPermissions}\n            />\n          )}\n        </div>\n        <div className={`${baseClass}__spacer`} />\n        <div className={`${baseClass}__actions`}>\n          {!smallBreak && beforeActions}\n          {enableFilters && (\n            <Button\n              buttonStyle=\"secondary\"\n              className={`${baseClass}__toggle-where`}\n              extraButtonProps={{\n                'aria-controls': `${baseClass}-where`,\n                'aria-expanded': visibleDrawer === 'where',\n              }}\n              icon={<ChevronIcon direction={visibleDrawer === 'where' ? 'up' : 'down'} size={16} />}\n              id=\"toggle-list-filters\"\n              onClick={() => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined)}\n              size=\"medium\"\n            >\n              {t('general:filters')}\n            </Button>\n          )}\n          {collectionConfig.admin.groupBy && (\n            <GroupByControl\n              collectionSlug={collectionConfig.slug}\n              fields={collectionConfig.fields}\n            />\n          )}\n          {enableColumns && <ColumnsButton collectionSlug={collectionConfig.slug} />}\n          {enableSort && (\n            <Button\n              buttonStyle=\"secondary\"\n              className={`${baseClass}__toggle-sort`}\n              extraButtonProps={{\n                'aria-controls': `${baseClass}-sort`,\n                'aria-expanded': visibleDrawer === 'sort',\n              }}\n              icon={<ChevronIcon size={16} />}\n              id=\"toggle-list-sort\"\n              onClick={() => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined)}\n              size=\"medium\"\n            >\n              {t('general:sort')}\n            </Button>\n          )}\n          {hasCreatePermission && newDocumentURL && (\n            <Button\n              buttonStyle=\"primary\"\n              className={`${baseClass}__create-new`}\n              el=\"link\"\n              id=\"create-new-doc\"\n              size=\"medium\"\n              to={newDocumentURL}\n            >\n              {t('general:createNew')}\n            </Button>\n          )}\n          {listMenuItems && Array.isArray(listMenuItems) && listMenuItems.length > 0 && (\n            <Popup\n              button={<Dots ariaLabel={t('general:moreOptions')} />}\n              className={`${baseClass}__popup`}\n              horizontalAlign=\"right\"\n              id=\"list-menu\"\n              size=\"medium\"\n              verticalAlign=\"bottom\"\n            >\n              <PopupList.ButtonGroup>\n                {listMenuItems.map((item, i) => (\n                  <Fragment key={`list-menu-item-${i}`}>{item}</Fragment>\n                ))}\n              </PopupList.ButtonGroup>\n            </Popup>\n          )}\n        </div>\n      </div>\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          fields={collectionConfig?.fields}\n          renderedFilters={renderedFilters}\n          resolvedFilterOptions={resolvedFilterOptions}\n        />\n      </AnimateHeight>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","useWindowInfo","React","Fragment","useEffect","useRef","useState","Popup","PopupList","ChevronIcon","Dots","useListQuery","useTranslation","Button","ColumnsButton","GroupByControl","QueryPresetBar","ListSearchFilter","WhereBuilder","baseClass","ListControls","props","$","beforeActions","collectionConfig","collectionSlug","disableQueryPresets","enableColumns","t0","enableFilters","t1","enableSort","t2","hasCreatePermission","isWhereOpen","isWhereOpenFromProps","listMenuItems","newDocumentURL","onWhereToggle","queryPreset","activePreset","queryPresetPermissions","renderedFilters","resolvedFilterOptions","undefined","isControlled","handleSearchChange","hasActiveFilters","query","t","breakpoints","t3","s","smallBreak","searchLabelTranslated","label","split","hasWhereParam","Boolean","where","visibleDrawer","setVisibleDrawer","t4","current","t5","t6","t7","handleWhereToggle","_jsxs","className","children","_jsx","onSearchChange","searchQueryParam","search","enableQueryPresets","buttonStyle","extraButtonProps","icon","direction","size","onClick","selected","slug","fields","el","id","to","Array","isArray","length","button","ariaLabel","horizontalAlign","verticalAlign","ButtonGroup","map","_temp","collectionPluralLabel","labels","plural","onClose","item","i"],"sources":["../../../src/elements/ListControls/index.tsx"],"sourcesContent":["'use client'\n\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport React, { Fragment, useEffect, useRef, useState } from 'react'\n\nimport type { ListControlsProps } from './types.js'\n\nimport { Popup, PopupList } from '../../elements/Popup/index.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { Dots } from '../../icons/Dots/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { ColumnsButton } from '../ColumnsButton/index.js'\nimport { GroupByControl } from '../GroupByControl/index.js'\nimport { QueryPresetBar } from '../QueryPresets/QueryPresetBar/index.js'\nimport { ListSearchFilter } from '../Search/ListSearchFilter/index.js'\nimport { WhereBuilder } from '../WhereBuilder/index.js'\nimport './index.css'\n\nconst baseClass = 'list-controls'\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 {\n    beforeActions,\n    collectionConfig,\n    collectionSlug,\n    disableQueryPresets,\n    enableColumns = true,\n    enableFilters = true,\n    enableSort = false,\n    hasCreatePermission,\n    isWhereOpen: isWhereOpenFromProps,\n    listMenuItems,\n    newDocumentURL,\n    onWhereToggle,\n    queryPreset: activePreset,\n    queryPresetPermissions,\n    renderedFilters,\n    resolvedFilterOptions,\n  } = props\n\n  const isControlled = typeof onWhereToggle === 'function'\n\n  const { handleSearchChange, hasActiveFilters, query } = useListQuery()\n\n  const { t } = useTranslation()\n\n  const {\n    breakpoints: { s: smallBreak },\n  } = useWindowInfo()\n\n  // Simplified placeholder - just \"Search\" instead of \"Search by X, Y, Z\"\n  const searchLabelTranslated = t('general:searchBy', { label: '' }).split(' ')[0]\n\n  const hasWhereParam = useRef(Boolean(query?.where))\n\n  const [visibleDrawer, setVisibleDrawer] = useState<'columns' | 'sort' | 'where'>(\n    hasActiveFilters ? 'where' : undefined,\n  )\n\n  useEffect(() => {\n    if (hasWhereParam.current && !query?.where) {\n      hasWhereParam.current = false\n    } else if (query?.where) {\n      hasWhereParam.current = true\n    }\n  }, [setVisibleDrawer, query?.where])\n\n  const isWhereOpen = isControlled ? Boolean(isWhereOpenFromProps) : visibleDrawer === 'where'\n  const handleWhereToggle = isControlled\n    ? onWhereToggle\n    : () => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined)\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__search-row`}>\n        <div className={`${baseClass}__left`}>\n          <ListSearchFilter\n            key={collectionSlug}\n            label={searchLabelTranslated}\n            onSearchChange={handleSearchChange}\n            searchQueryParam={query?.search}\n          />\n          {collectionConfig?.enableQueryPresets && !disableQueryPresets && (\n            <QueryPresetBar\n              activePreset={activePreset}\n              collectionSlug={collectionSlug}\n              queryPresetPermissions={queryPresetPermissions}\n            />\n          )}\n        </div>\n        <div className={`${baseClass}__spacer`} />\n        <div className={`${baseClass}__actions`}>\n          {!smallBreak && beforeActions}\n          {enableFilters && (\n            <Button\n              buttonStyle=\"secondary\"\n              className={`${baseClass}__toggle-where`}\n              extraButtonProps={{\n                'aria-controls': `${baseClass}-where`,\n                'aria-expanded': visibleDrawer === 'where',\n              }}\n              icon={<ChevronIcon direction={isWhereOpen ? 'up' : 'down'} size={16} />}\n              id=\"toggle-list-filters\"\n              onClick={handleWhereToggle}\n              selected={isWhereOpen || hasActiveFilters}\n              size=\"medium\"\n            >\n              {t('general:filters')}\n            </Button>\n          )}\n          <GroupByControl collectionSlug={collectionConfig.slug} fields={collectionConfig.fields} />\n          {enableColumns && <ColumnsButton collectionSlug={collectionConfig.slug} />}\n          {enableSort && (\n            <Button\n              buttonStyle=\"secondary\"\n              className={`${baseClass}__toggle-sort`}\n              extraButtonProps={{\n                'aria-controls': `${baseClass}-sort`,\n                'aria-expanded': visibleDrawer === 'sort',\n              }}\n              icon={<ChevronIcon size={16} />}\n              id=\"toggle-list-sort\"\n              onClick={() => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined)}\n              size=\"medium\"\n            >\n              {t('general:sort')}\n            </Button>\n          )}\n          {hasCreatePermission && newDocumentURL && (\n            <Button\n              buttonStyle=\"primary\"\n              className={`${baseClass}__create-new`}\n              el=\"link\"\n              id=\"create-new-doc\"\n              size=\"medium\"\n              to={newDocumentURL}\n            >\n              {t('general:createNew')}\n            </Button>\n          )}\n          {listMenuItems && Array.isArray(listMenuItems) && listMenuItems.length > 0 && (\n            <Popup\n              button={<Dots ariaLabel={t('general:moreOptions')} />}\n              className={`${baseClass}__popup`}\n              horizontalAlign=\"right\"\n              id=\"list-menu\"\n              size=\"medium\"\n              verticalAlign=\"bottom\"\n            >\n              <PopupList.ButtonGroup>\n                {listMenuItems.map((item, i) => (\n                  <Fragment key={`list-menu-item-${i}`}>{item}</Fragment>\n                ))}\n              </PopupList.ButtonGroup>\n            </Popup>\n          )}\n        </div>\n      </div>\n      {!isControlled && isWhereOpen && (\n        <div className={`${baseClass}__where`} id={`${baseClass}-where`}>\n          <WhereBuilder\n            collectionPluralLabel={collectionConfig?.labels?.plural}\n            collectionSlug={collectionConfig.slug}\n            fields={collectionConfig?.fields}\n            onClose={() => setVisibleDrawer(undefined)}\n            renderedFilters={renderedFilters}\n            resolvedFilterOptions={resolvedFilterOptions}\n          />\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -21,8 +21,10 @@ export type ListControlsProps = {
     readonly handleSortChange?: (sort: string) => void;
     readonly handleWhereChange?: (where: Where) => void;
     readonly hasCreatePermission?: boolean;
+    readonly isWhereOpen?: boolean;
     readonly listMenuItems?: React.ReactNode[];
     readonly newDocumentURL?: string;
+    readonly onWhereToggle?: () => void;
     readonly queryPreset?: QueryPreset;
     readonly queryPresetPermissions?: SanitizedCollectionPermission;
     readonly renderedFilters?: Map<string, React.ReactNode>;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControls/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,sBAAsB,EACtB,WAAW,EACX,qBAAqB,EACrB,6BAA6B,EAC7B,KAAK,EACN,MAAM,SAAS,CAAA;AAEhB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAC1C,QAAQ,CAAC,gBAAgB,EAAE,sBAAsB,CAAA;IACjD,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B;;;OAGG;IACH,QAAQ,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IACpC;;;OAGG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAA;IAClC,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACtD,QAAQ,CAAC,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAClD,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IACnD,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAC1C,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,CAAA;IAChC,QAAQ,CAAC,WAAW,CAAC,EAAE,WAAW,CAAA;IAClC,QAAQ,CAAC,sBAAsB,CAAC,EAAE,6BAA6B,CAAA;IAC/D,QAAQ,CAAC,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;IACvD,QAAQ,CAAC,qBAAqB,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAA;CACpE,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControls/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,sBAAsB,EACtB,WAAW,EACX,qBAAqB,EACrB,6BAA6B,EAC7B,KAAK,EACN,MAAM,SAAS,CAAA;AAEhB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAC1C,QAAQ,CAAC,gBAAgB,EAAE,sBAAsB,CAAA;IACjD,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B;;;OAGG;IACH,QAAQ,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IACpC;;;OAGG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAA;IAClC,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACtD,QAAQ,CAAC,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAClD,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IACnD,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAC1C,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,CAAA;IAChC,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IACnC,QAAQ,CAAC,WAAW,CAAC,EAAE,WAAW,CAAA;IAClC,QAAQ,CAAC,sBAAsB,CAAC,EAAE,6BAA6B,CAAA;IAC/D,QAAQ,CAAC,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;IACvD,QAAQ,CAAC,qBAAqB,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAA;CACpE,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/ListControls/types.ts"],"sourcesContent":["import type {\n  ClientCollectionConfig,\n  QueryPreset,\n  ResolvedFilterOptions,\n  SanitizedCollectionPermission,\n  Where,\n} from 'payload'\n\nexport type ListControlsProps = {\n  readonly beforeActions?: React.ReactNode[]\n  readonly collectionConfig: ClientCollectionConfig\n  readonly collectionSlug: string\n  /**\n   * @deprecated\n   * These are now handled by the `ListSelection` component\n   */\n  readonly disableBulkDelete?: boolean\n  /**\n   * @deprecated\n   * These are now handled by the `ListSelection` component\n   */\n  readonly disableBulkEdit?: boolean\n  readonly disableQueryPresets?: boolean\n  readonly enableColumns?: boolean\n  readonly enableFilters?: boolean\n  readonly enableSort?: boolean\n  readonly handleSearchChange?: (search: string) => void\n  readonly handleSortChange?: (sort: string) => void\n  readonly handleWhereChange?: (where: Where) => void\n  readonly hasCreatePermission?: boolean\n  readonly listMenuItems?: React.ReactNode[]\n  readonly newDocumentURL?: string\n  readonly queryPreset?: QueryPreset\n  readonly queryPresetPermissions?: SanitizedCollectionPermission\n  readonly renderedFilters?: Map<string, React.ReactNode>\n  readonly resolvedFilterOptions?: Map<string, ResolvedFilterOptions>\n}\n"],"mappings":"AAQA","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/ListControls/types.ts"],"sourcesContent":["import type {\n  ClientCollectionConfig,\n  QueryPreset,\n  ResolvedFilterOptions,\n  SanitizedCollectionPermission,\n  Where,\n} from 'payload'\n\nexport type ListControlsProps = {\n  readonly beforeActions?: React.ReactNode[]\n  readonly collectionConfig: ClientCollectionConfig\n  readonly collectionSlug: string\n  /**\n   * @deprecated\n   * These are now handled by the `ListSelection` component\n   */\n  readonly disableBulkDelete?: boolean\n  /**\n   * @deprecated\n   * These are now handled by the `ListSelection` component\n   */\n  readonly disableBulkEdit?: boolean\n  readonly disableQueryPresets?: boolean\n  readonly enableColumns?: boolean\n  readonly enableFilters?: boolean\n  readonly enableSort?: boolean\n  readonly handleSearchChange?: (search: string) => void\n  readonly handleSortChange?: (sort: string) => void\n  readonly handleWhereChange?: (where: Where) => void\n  readonly hasCreatePermission?: boolean\n  readonly isWhereOpen?: boolean\n  readonly listMenuItems?: React.ReactNode[]\n  readonly newDocumentURL?: string\n  readonly onWhereToggle?: () => void\n  readonly queryPreset?: QueryPreset\n  readonly queryPresetPermissions?: SanitizedCollectionPermission\n  readonly renderedFilters?: Map<string, React.ReactNode>\n  readonly resolvedFilterOptions?: Map<string, ResolvedFilterOptions>\n}\n"],"mappings":"AAQA","ignoreList":[]}

package/dist/elements/ListSelection/index.css

@@ -2,7 +2,7 @@
   .list-selection {
     display: flex;
     margin-left: auto;
-    color: var(--theme-elevation-500);
+    color: var(--color-text-secondary);
     gap: var(--spacer-1);
     align-items: center;
   }

package/dist/elements/LivePreview/ToolbarArea/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 export declare const ToolbarArea: React.FC<{
     children: React.ReactNode;
 }>;

package/dist/elements/LivePreview/ToolbarArea/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/LivePreview/ToolbarArea/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAYA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/LivePreview/ToolbarArea/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAYA,CAAA"}

package/dist/elements/LivePreview/ToolbarArea/index.js

@@ -4,7 +4,7 @@ import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useDroppable } from '@dnd-kit/core';
 import React from 'react';
-import './index.scss';
+import './index.css';
 const baseClass = 'toolbar-area';
 export const ToolbarArea = props => {
   const $ = _c(4);

package/dist/elements/LivePreview/ToolbarArea/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","useDroppable","React","baseClass","ToolbarArea","props","$","children","t0","Symbol","for","id","setNodeRef","t1","_jsx","className","ref"],"sources":["../../../../src/elements/LivePreview/ToolbarArea/index.tsx"],"sourcesContent":["'use client'\nimport { useDroppable } from '@dnd-kit/core'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'toolbar-area'\n\nexport const ToolbarArea: React.FC<{\n  children: React.ReactNode\n}> = (props) => {\n  const { children } = props\n\n  const { setNodeRef } = useDroppable({\n    id: 'live-preview-area',\n  })\n\n  return (\n    <div className={baseClass} ref={setNodeRef}>\n      {children}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,SAASC,YAAY,QAAQ;AAC7B,OAAOC,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,WAAA,GAERC,KAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EACH;IAAAO;EAAA,IAAqBF,KAAA;EAAA,IAAAG,EAAA;EAAA,IAAAF,CAAA,QAAAG,MAAA,CAAAC,GAAA;IAEeF,EAAA;MAAAG,EAAA,EAC9B;IAAA;IACNL,CAAA,MAAAE,EAAA;EAAA;IAAAA,EAAA,GAAAF,CAAA;EAAA;EAFA;IAAAM;EAAA,IAAuBX,YAAA,CAAaO,EAEpC;EAAA,IAAAK,EAAA;EAAA,IAAAP,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAAM,UAAA;IAGEC,EAAA,GAAAC,IAAA,CAAC;MAAAC,SAAA,EAAAZ,SAAA;MAAAa,GAAA,EAA+BJ,UAAA;MAAAL;IAAA,C;;;;;;;SAAhCM,E;CAIJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","useDroppable","React","baseClass","ToolbarArea","props","$","children","t0","Symbol","for","id","setNodeRef","t1","_jsx","className","ref"],"sources":["../../../../src/elements/LivePreview/ToolbarArea/index.tsx"],"sourcesContent":["'use client'\nimport { useDroppable } from '@dnd-kit/core'\nimport React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'toolbar-area'\n\nexport const ToolbarArea: React.FC<{\n  children: React.ReactNode\n}> = (props) => {\n  const { children } = props\n\n  const { setNodeRef } = useDroppable({\n    id: 'live-preview-area',\n  })\n\n  return (\n    <div className={baseClass} ref={setNodeRef}>\n      {children}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,SAASC,YAAY,QAAQ;AAC7B,OAAOC,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,WAAA,GAERC,KAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EACH;IAAAO;EAAA,IAAqBF,KAAA;EAAA,IAAAG,EAAA;EAAA,IAAAF,CAAA,QAAAG,MAAA,CAAAC,GAAA;IAEeF,EAAA;MAAAG,EAAA,EAC9B;IAAA;IACNL,CAAA,MAAAE,EAAA;EAAA;IAAAA,EAAA,GAAAF,CAAA;EAAA;EAFA;IAAAM;EAAA,IAAuBX,YAAA,CAAaO,EAEpC;EAAA,IAAAK,EAAA;EAAA,IAAAP,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAAM,UAAA;IAGEC,EAAA,GAAAC,IAAA,CAAC;MAAAC,SAAA,EAAAZ,SAAA;MAAAa,GAAA,EAA+BJ,UAAA;MAAAL;IAAA,C;;;;;;;SAAhCM,E;CAIJ","ignoreList":[]}

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

@@ -1,18 +1,2 @@
-import { Modal, useModal } from '@faceless-ui/modal';
-import React from 'react';
-import './index.css';
-export { Modal, useModal };
-export type AlertModalProps = {
-    readonly actions?: React.ReactNode;
-    readonly children: React.ReactNode;
-    readonly className?: string;
-    readonly closeOnBlur?: boolean;
-    readonly compact?: boolean;
-    readonly headerActions?: React.ReactNode;
-    readonly onClose?: () => void;
-    readonly slug: string;
-    readonly title?: React.ReactNode;
-    readonly zIndex?: number;
-};
-export declare const AlertModal: React.FC<AlertModalProps>;
+export { Modal, useModal } from '@faceless-ui/modal';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Modal/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AACpD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAA;AAI1B,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxC,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IAC7B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CACzB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAkChD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Modal/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA"}

package/dist/elements/Modal/index.js

@@ -1,47 +1,4 @@
 'use client';
 
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Modal, useModal } from '@faceless-ui/modal';
-import React from 'react';
-import './index.css';
-export { Modal, useModal };
-const baseClass = 'alert-modal';
-export const AlertModal = ({
-  slug,
-  actions,
-  children,
-  className,
-  closeOnBlur = false,
-  compact,
-  headerActions,
-  onClose,
-  title,
-  zIndex
-}) => {
-  return /*#__PURE__*/_jsx(Modal, {
-    className: `${baseClass}${compact ? ` ${baseClass}--compact` : ''}${className ? ` ${className}` : ''}`,
-    closeOnBlur: closeOnBlur,
-    onClose: onClose,
-    slug: slug,
-    style: zIndex != null ? {
-      zIndex
-    } : undefined,
-    children: /*#__PURE__*/_jsxs("div", {
-      className: `${baseClass}__wrapper`,
-      children: [title || headerActions ? /*#__PURE__*/_jsxs("div", {
-        className: `${baseClass}__header${headerActions ? ` ${baseClass}__header--with-actions` : ''}`,
-        children: [title ? /*#__PURE__*/_jsx("h4", {
-          className: `${baseClass}__title`,
-          children: title
-        }) : null, headerActions]
-      }) : null, /*#__PURE__*/_jsx("div", {
-        className: `${baseClass}__content`,
-        children: children
-      }), actions ? /*#__PURE__*/_jsx("div", {
-        className: `${baseClass}__controls`,
-        children: actions
-      }) : null]
-    })
-  });
-};
+export { Modal, useModal } from '@faceless-ui/modal';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Modal","useModal","React","baseClass","AlertModal","slug","actions","children","className","closeOnBlur","compact","headerActions","onClose","title","zIndex","_jsx","style","undefined","_jsxs"],"sources":["../../../src/elements/Modal/index.tsx"],"sourcesContent":["'use client'\nimport { Modal, useModal } from '@faceless-ui/modal'\nimport React from 'react'\n\nimport './index.css'\n\nexport { Modal, useModal }\n\nconst baseClass = 'alert-modal'\n\nexport type AlertModalProps = {\n  readonly actions?: React.ReactNode\n  readonly children: React.ReactNode\n  readonly className?: string\n  readonly closeOnBlur?: boolean\n  readonly compact?: boolean\n  readonly headerActions?: React.ReactNode\n  readonly onClose?: () => void\n  readonly slug: string\n  readonly title?: React.ReactNode\n  readonly zIndex?: number\n}\n\nexport const AlertModal: React.FC<AlertModalProps> = ({\n  slug,\n  actions,\n  children,\n  className,\n  closeOnBlur = false,\n  compact,\n  headerActions,\n  onClose,\n  title,\n  zIndex,\n}) => {\n  return (\n    <Modal\n      className={`${baseClass}${compact ? ` ${baseClass}--compact` : ''}${className ? ` ${className}` : ''}`}\n      closeOnBlur={closeOnBlur}\n      onClose={onClose}\n      slug={slug}\n      style={zIndex != null ? { zIndex } : undefined}\n    >\n      <div className={`${baseClass}__wrapper`}>\n        {title || headerActions ? (\n          <div\n            className={`${baseClass}__header${headerActions ? ` ${baseClass}__header--with-actions` : ''}`}\n          >\n            {title ? <h4 className={`${baseClass}__title`}>{title}</h4> : null}\n            {headerActions}\n          </div>\n        ) : null}\n        <div className={`${baseClass}__content`}>{children}</div>\n        {actions ? <div className={`${baseClass}__controls`}>{actions}</div> : null}\n      </div>\n    </Modal>\n  )\n}\n"],"mappings":"AAAA;;;AACA,SAASA,KAAK,EAAEC,QAAQ,QAAQ;AAChC,OAAOC,KAAA,MAAW;AAElB,OAAO;AAEP,SAASF,KAAK,EAAEC,QAAQ;AAExB,MAAME,SAAA,GAAY;AAelB,OAAO,MAAMC,UAAA,GAAwCA,CAAC;EACpDC,IAAI;EACJC,OAAO;EACPC,QAAQ;EACRC,SAAS;EACTC,WAAA,GAAc,KAAK;EACnBC,OAAO;EACPC,aAAa;EACbC,OAAO;EACPC,KAAK;EACLC;AAAM,CACP;EACC,oBACEC,IAAA,CAACf,KAAA;IACCQ,SAAA,EAAW,GAAGL,SAAA,GAAYO,OAAA,GAAU,IAAIP,SAAA,WAAoB,GAAG,KAAKK,SAAA,GAAY,IAAIA,SAAA,EAAW,GAAG,IAAI;IACtGC,WAAA,EAAaA,WAAA;IACbG,OAAA,EAASA,OAAA;IACTP,IAAA,EAAMA,IAAA;IACNW,KAAA,EAAOF,MAAA,IAAU,OAAO;MAAEA;IAAO,IAAIG,SAAA;cAErC,aAAAC,KAAA,CAAC;MAAIV,SAAA,EAAW,GAAGL,SAAA,WAAoB;iBACpCU,KAAA,IAASF,aAAA,gBACRO,KAAA,CAAC;QACCV,SAAA,EAAW,GAAGL,SAAA,WAAoBQ,aAAA,GAAgB,IAAIR,SAAA,wBAAiC,GAAG,IAAI;mBAE7FU,KAAA,gBAAQE,IAAA,CAAC;UAAGP,SAAA,EAAW,GAAGL,SAAA,SAAkB;oBAAGU;aAAc,MAC7DF,aAAA;WAED,M,aACJI,IAAA,CAAC;QAAIP,SAAA,EAAW,GAAGL,SAAA,WAAoB;kBAAGI;UACzCD,OAAA,gBAAUS,IAAA,CAAC;QAAIP,SAAA,EAAW,GAAGL,SAAA,YAAqB;kBAAGG;WAAiB;;;AAI/E","ignoreList":[]}
+{"version":3,"file":"index.js","names":["Modal","useModal"],"sources":["../../../src/elements/Modal/index.tsx"],"sourcesContent":["'use client'\nexport { Modal, useModal } from '@faceless-ui/modal'\n"],"mappings":"AAAA;;AACA,SAASA,KAAK,EAAEC,QAAQ,QAAQ","ignoreList":[]}

package/dist/elements/Nav/NavWrapper/{index.scss → index.css}

@@ -1,5 +1,3 @@
-@import '../../../scss/styles.scss';
-
 @layer payload-default {
   .nav {
     position: sticky;
@@ -8,10 +6,10 @@
     flex-shrink: 0;
     height: 100vh;
     width: var(--nav-width);
-    border-right: 1px solid var(--theme-elevation-100);
+    border-right: var(--stroke-width-small) solid var(--color-border);
     [dir='rtl'] & {
       border-right: none;
-      border-left: 1px solid var(--theme-elevation-100);
+      border-left: var(--stroke-width-small) solid var(--color-border);
     }
   }
 }

package/dist/elements/Nav/NavWrapper/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 /**
  * @internal
  */

package/dist/elements/Nav/NavWrapper/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Nav/NavWrapper/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AAErB;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAqBA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Nav/NavWrapper/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,aAAa,CAAA;AAEpB;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAqBA,CAAA"}

package/dist/elements/Nav/NavWrapper/index.js

@@ -4,7 +4,7 @@ import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { useNav } from '../context.js';
-import './index.scss';
+import './index.css';
 /**
  * @internal
  */

package/dist/elements/Nav/NavWrapper/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useNav","NavWrapper","props","$","baseClass","children","hydrated","navOpen","navRef","t0","t1","t2","filter","Boolean","t3","join","t4","undefined","t5","t6","_jsx","className","inert","ref"],"sources":["../../../../src/elements/Nav/NavWrapper/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useNav } from '../context.js'\nimport './index.scss'\n\n/**\n * @internal\n */\nexport const NavWrapper: React.FC<{\n  baseClass?: string\n  children: React.ReactNode\n}> = (props) => {\n  const { baseClass, children } = props\n\n  const { hydrated, navOpen, navRef } = useNav()\n\n  return (\n    <aside\n      className={[\n        baseClass,\n        navOpen && `${baseClass}--nav-open`,\n        hydrated && `${baseClass}--nav-hydrated`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      inert={!navOpen ? true : undefined}\n    >\n      <div className={`${baseClass}__scroll`} ref={navRef}>\n        {children}\n      </div>\n    </aside>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,MAAM,QAAQ;AACvB,OAAO;AAEP;;;AAGA,OAAO,MAAMC,UAAA,GAGRC,KAAA;EAAA,MAAAC,CAAA,GAAAL,EAAA;EACH;IAAAM,SAAA;IAAAC;EAAA,IAAgCH,KAAA;EAEhC;IAAAI,QAAA;IAAAC,OAAA;IAAAC;EAAA,IAAsCR,MAAA;EAMhC,MAAAS,EAAA,GAAAF,OAAA,IAAW,GAAGH,SAAA,YAAqB;EACnC,MAAAM,EAAA,GAAAJ,QAAA,IAAY,GAAGF,SAAA,gBAAyB;EAAA,IAAAO,EAAA;EAAA,IAAAR,CAAA,QAAAC,SAAA,IAAAD,CAAA,QAAAM,EAAA,IAAAN,CAAA,QAAAO,EAAA;IAH/BC,EAAA,IACTP,SAAA,EACAK,EAAmC,EACnCC,EAAwC,EAAAE,MAAA,CAAAC,OAEhC;IAAAV,CAAA,MAAAC,SAAA;IAAAD,CAAA,MAAAM,EAAA;IAAAN,CAAA,MAAAO,EAAA;IAAAP,CAAA,MAAAQ,EAAA;EAAA;IAAAA,EAAA,GAAAR,CAAA;EAAA;EALC,MAAAW,EAAA,GAAAH,EAKD,CAAAI,IAAA,CACF;EACD,MAAAC,EAAA,IAACT,OAAA,UAAAU,SAAiB;EAET,MAAAC,EAAA,MAAGd,SAAA,UAAmB;EAAA,IAAAe,EAAA;EAAA,IAAAhB,CAAA,QAAAE,QAAA,IAAAF,CAAA,QAAAK,MAAA,IAAAL,CAAA,QAAAW,EAAA,IAAAX,CAAA,QAAAa,EAAA,IAAAb,CAAA,QAAAe,EAAA;IAVxCC,EAAA,GAAAC,IAAA,CAAC;MAAAC,SAAA,EACYP,EAMH;MAAAQ,KAAA,EACDN,EAAkB;MAAAX,QAAA,EAEzBe,IAAA,CAAC;QAAAC,SAAA,EAAeH,EAAsB;QAAAK,GAAA,EAAOf,MAAA;QAAAH;MAAA,C;;;;;;;;;;;SAV/Cc,E;CAeJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useNav","NavWrapper","props","$","baseClass","children","hydrated","navOpen","navRef","t0","t1","t2","filter","Boolean","t3","join","t4","undefined","t5","t6","_jsx","className","inert","ref"],"sources":["../../../../src/elements/Nav/NavWrapper/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useNav } from '../context.js'\nimport './index.css'\n\n/**\n * @internal\n */\nexport const NavWrapper: React.FC<{\n  baseClass?: string\n  children: React.ReactNode\n}> = (props) => {\n  const { baseClass, children } = props\n\n  const { hydrated, navOpen, navRef } = useNav()\n\n  return (\n    <aside\n      className={[\n        baseClass,\n        navOpen && `${baseClass}--nav-open`,\n        hydrated && `${baseClass}--nav-hydrated`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      inert={!navOpen ? true : undefined}\n    >\n      <div className={`${baseClass}__scroll`} ref={navRef}>\n        {children}\n      </div>\n    </aside>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,MAAM,QAAQ;AACvB,OAAO;AAEP;;;AAGA,OAAO,MAAMC,UAAA,GAGRC,KAAA;EAAA,MAAAC,CAAA,GAAAL,EAAA;EACH;IAAAM,SAAA;IAAAC;EAAA,IAAgCH,KAAA;EAEhC;IAAAI,QAAA;IAAAC,OAAA;IAAAC;EAAA,IAAsCR,MAAA;EAMhC,MAAAS,EAAA,GAAAF,OAAA,IAAW,GAAGH,SAAA,YAAqB;EACnC,MAAAM,EAAA,GAAAJ,QAAA,IAAY,GAAGF,SAAA,gBAAyB;EAAA,IAAAO,EAAA;EAAA,IAAAR,CAAA,QAAAC,SAAA,IAAAD,CAAA,QAAAM,EAAA,IAAAN,CAAA,QAAAO,EAAA;IAH/BC,EAAA,IACTP,SAAA,EACAK,EAAmC,EACnCC,EAAwC,EAAAE,MAAA,CAAAC,OAEhC;IAAAV,CAAA,MAAAC,SAAA;IAAAD,CAAA,MAAAM,EAAA;IAAAN,CAAA,MAAAO,EAAA;IAAAP,CAAA,MAAAQ,EAAA;EAAA;IAAAA,EAAA,GAAAR,CAAA;EAAA;EALC,MAAAW,EAAA,GAAAH,EAKD,CAAAI,IAAA,CACF;EACD,MAAAC,EAAA,IAACT,OAAA,UAAAU,SAAiB;EAET,MAAAC,EAAA,MAAGd,SAAA,UAAmB;EAAA,IAAAe,EAAA;EAAA,IAAAhB,CAAA,QAAAE,QAAA,IAAAF,CAAA,QAAAK,MAAA,IAAAL,CAAA,QAAAW,EAAA,IAAAX,CAAA,QAAAa,EAAA,IAAAb,CAAA,QAAAe,EAAA;IAVxCC,EAAA,GAAAC,IAAA,CAAC;MAAAC,SAAA,EACYP,EAMH;MAAAQ,KAAA,EACDN,EAAkB;MAAAX,QAAA,EAEzBe,IAAA,CAAC;QAAAC,SAAA,EAAeH,EAAsB;QAAAK,GAAA,EAAOf,MAAA;QAAAH;MAAA,C;;;;;;;;;;;SAV/Cc,E;CAeJ","ignoreList":[]}

package/dist/elements/Nav/SidebarTabs/index.css

@@ -38,6 +38,12 @@
     &:hover {
       color: var(--color-icon);
     }
+
+    &:focus-visible {
+      outline: var(--accessibility-outline);
+      outline-offset: var(--accessibility-outline-offset);
+      border-radius: var(--button-radius);
+    }
   }
 
   .sidebar-tabs__tab--active {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/NavGroup/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAIvC,OAAO,aAAa,CAAA;AAMpB,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuDpC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/NavGroup/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAKvC,OAAO,aAAa,CAAA;AAIpB,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAmDpC,CAAA"}

package/dist/elements/NavGroup/index.js

@@ -6,19 +6,17 @@ import { PREFERENCE_KEYS } from 'payload/shared';
 import React, { useState } from 'react';
 import { ChevronIcon } from '../../icons/Chevron/index.js';
 import { usePreferences } from '../../providers/Preferences/index.js';
-import './index.css';
-import { AnimateHeight } from '../AnimateHeight/index.js';
 import { useNav } from '../Nav/context.js';
+import './index.css';
 const baseClass = 'nav-group';
 export const NavGroup = t0 => {
-  const $ = _c(22);
+  const $ = _c(21);
   const {
     children,
     isOpen: isOpenFromProps,
     label
   } = t0;
   const [collapsed, setCollapsed] = useState(typeof isOpenFromProps !== "undefined" ? !isOpenFromProps : false);
-  const [animate, setAnimate] = useState(false);
   const {
     setPreference
   } = usePreferences();
@@ -29,7 +27,6 @@ export const NavGroup = t0 => {
     let t1;
     if ($[0] !== collapsed || $[1] !== label || $[2] !== setPreference) {
       t1 = () => {
-        setAnimate(true);
         const newGroupPrefs = {};
         if (!newGroupPrefs?.[label]) {
           newGroupPrefs[label] = {
@@ -77,7 +74,7 @@ export const NavGroup = t0 => {
     const t10 = !navOpen ? -1 : 0;
     const t11 = collapsed ? "right" : "down";
     let t12;
-    if ($[9] !== animate || $[10] !== children || $[11] !== collapsed || $[12] !== label || $[13] !== t10 || $[14] !== t11 || $[15] !== t5 || $[16] !== t6 || $[17] !== t9 || $[18] !== toggleCollapsed) {
+    if ($[9] !== children || $[10] !== collapsed || $[11] !== label || $[12] !== t10 || $[13] !== t11 || $[14] !== t5 || $[15] !== t6 || $[16] !== t9 || $[17] !== toggleCollapsed) {
       t12 = _jsxs("div", {
         className: t5,
         id: t6,
@@ -96,40 +93,35 @@ export const NavGroup = t0 => {
             className: `${baseClass}__label`,
             children: label
           })]
-        }), _jsx(AnimateHeight, {
-          duration: animate ? 200 : 0,
-          height: collapsed ? 0 : "auto",
-          children: _jsx("div", {
-            className: `${baseClass}__content`,
-            children
-          })
+        }), !collapsed && _jsx("div", {
+          className: `${baseClass}__content`,
+          children
         })]
       });
-      $[9] = animate;
-      $[10] = children;
-      $[11] = collapsed;
-      $[12] = label;
-      $[13] = t10;
-      $[14] = t11;
-      $[15] = t5;
-      $[16] = t6;
-      $[17] = t9;
-      $[18] = toggleCollapsed;
-      $[19] = t12;
+      $[9] = children;
+      $[10] = collapsed;
+      $[11] = label;
+      $[12] = t10;
+      $[13] = t11;
+      $[14] = t5;
+      $[15] = t6;
+      $[16] = t9;
+      $[17] = toggleCollapsed;
+      $[18] = t12;
     } else {
-      t12 = $[19];
+      t12 = $[18];
     }
     return t12;
   }
   let t1;
-  if ($[20] !== children) {
+  if ($[19] !== children) {
     t1 = _jsx(React.Fragment, {
       children
     });
-    $[20] = children;
-    $[21] = t1;
+    $[19] = children;
+    $[20] = t1;
   } else {
-    t1 = $[21];
+    t1 = $[20];
   }
   return t1;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","PREFERENCE_KEYS","React","useState","ChevronIcon","usePreferences","AnimateHeight","useNav","baseClass","NavGroup","t0","$","children","isOpen","isOpenFromProps","label","collapsed","setCollapsed","animate","setAnimate","setPreference","navOpen","t1","newGroupPrefs","open","Boolean","NAV","groups","toggleCollapsed","t2","t3","t4","filter","t5","join","t6","t7","t8","t9","t10","t11","t12","_jsxs","className","id","onClick","tabIndex","type","_jsx","direction","size","duration","height","Fragment"],"sources":["../../../src/elements/NavGroup/index.tsx"],"sourcesContent":["'use client'\nimport type { NavPreferences } from 'payload'\n\nimport { PREFERENCE_KEYS } from 'payload/shared'\nimport React, { useState } from 'react'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { usePreferences } from '../../providers/Preferences/index.js'\nimport './index.css'\nimport { AnimateHeight } from '../AnimateHeight/index.js'\nimport { useNav } from '../Nav/context.js'\n\nconst baseClass = 'nav-group'\n\ntype Props = {\n  children: React.ReactNode\n  isOpen?: boolean\n  label: string\n}\n\nexport const NavGroup: React.FC<Props> = ({ children, isOpen: isOpenFromProps, label }) => {\n  const [collapsed, setCollapsed] = useState(\n    typeof isOpenFromProps !== 'undefined' ? !isOpenFromProps : false,\n  )\n\n  const [animate, setAnimate] = useState(false)\n  const { setPreference } = usePreferences()\n  const { navOpen } = useNav()\n\n  if (label) {\n    const toggleCollapsed = () => {\n      setAnimate(true)\n      const newGroupPrefs: NavPreferences['groups'] = {}\n\n      if (!newGroupPrefs?.[label]) {\n        newGroupPrefs[label] = { open: Boolean(collapsed) }\n      } else {\n        newGroupPrefs[label].open = Boolean(collapsed)\n      }\n\n      void setPreference(PREFERENCE_KEYS.NAV, { groups: newGroupPrefs }, true)\n      setCollapsed(!collapsed)\n    }\n\n    return (\n      <div\n        className={[`${baseClass}`, `${label}`, collapsed && `${baseClass}--collapsed`]\n          .filter(Boolean)\n          .join(' ')}\n        id={`nav-group-${label}`}\n      >\n        <button\n          className={[\n            `${baseClass}__toggle`,\n            `${baseClass}__toggle--${collapsed ? 'collapsed' : 'open'}`,\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          onClick={toggleCollapsed}\n          tabIndex={!navOpen ? -1 : 0}\n          type=\"button\"\n        >\n          <div className={`${baseClass}__indicator`}>\n            <ChevronIcon direction={collapsed ? 'right' : 'down'} size={16} />\n          </div>\n          <div className={`${baseClass}__label`}>{label}</div>\n        </button>\n        <AnimateHeight duration={animate ? 200 : 0} height={collapsed ? 0 : 'auto'}>\n          <div className={`${baseClass}__content`}>{children}</div>\n        </AnimateHeight>\n      </div>\n    )\n  }\n\n  return <React.Fragment>{children}</React.Fragment>\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","PREFERENCE_KEYS","React","useState","ChevronIcon","usePreferences","useNav","baseClass","NavGroup","t0","$","children","isOpen","isOpenFromProps","label","collapsed","setCollapsed","setPreference","navOpen","t1","newGroupPrefs","open","Boolean","NAV","groups","toggleCollapsed","t2","t3","t4","filter","t5","join","t6","t7","t8","t9","t10","t11","t12","_jsxs","className","id","onClick","tabIndex","type","_jsx","direction","size","Fragment"],"sources":["../../../src/elements/NavGroup/index.tsx"],"sourcesContent":["'use client'\nimport type { NavPreferences } from 'payload'\n\nimport { PREFERENCE_KEYS } from 'payload/shared'\nimport React, { useState } from 'react'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { usePreferences } from '../../providers/Preferences/index.js'\nimport { useNav } from '../Nav/context.js'\nimport './index.css'\n\nconst baseClass = 'nav-group'\n\ntype Props = {\n  children: React.ReactNode\n  isOpen?: boolean\n  label: string\n}\n\nexport const NavGroup: React.FC<Props> = ({ children, isOpen: isOpenFromProps, label }) => {\n  const [collapsed, setCollapsed] = useState(\n    typeof isOpenFromProps !== 'undefined' ? !isOpenFromProps : false,\n  )\n\n  const { setPreference } = usePreferences()\n  const { navOpen } = useNav()\n\n  if (label) {\n    const toggleCollapsed = () => {\n      const newGroupPrefs: NavPreferences['groups'] = {}\n\n      if (!newGroupPrefs?.[label]) {\n        newGroupPrefs[label] = { open: Boolean(collapsed) }\n      } else {\n        newGroupPrefs[label].open = Boolean(collapsed)\n      }\n\n      void setPreference(PREFERENCE_KEYS.NAV, { groups: newGroupPrefs }, true)\n      setCollapsed(!collapsed)\n    }\n\n    return (\n      <div\n        className={[`${baseClass}`, `${label}`, collapsed && `${baseClass}--collapsed`]\n          .filter(Boolean)\n          .join(' ')}\n        id={`nav-group-${label}`}\n      >\n        <button\n          className={[\n            `${baseClass}__toggle`,\n            `${baseClass}__toggle--${collapsed ? 'collapsed' : 'open'}`,\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          onClick={toggleCollapsed}\n          tabIndex={!navOpen ? -1 : 0}\n          type=\"button\"\n        >\n          <div className={`${baseClass}__indicator`}>\n            <ChevronIcon direction={collapsed ? 'right' : 'down'} size={16} />\n          </div>\n          <div className={`${baseClass}__label`}>{label}</div>\n        </button>\n        {!collapsed && <div className={`${baseClass}__content`}>{children}</div>}\n      </div>\n    )\n  }\n\n  return <React.Fragment>{children}</React.Fragment>\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Pill/index.css

@@ -13,7 +13,7 @@
     line-height: var(--text-body-medium-line-height);
     letter-spacing: var(--text-body-medium-letter-spacing);
     display: inline-flex;
-    background: var(--ramp-black-200);
+    background: var(--color-bg-secondary);
     color: var(--color-text);
     border-radius: var(--button-radius);
     cursor: inherit;

package/dist/elements/PillSelector/index.css

@@ -2,7 +2,7 @@
   .pill-selector {
     display: flex;
     flex-wrap: wrap;
-    background: var(--theme-elevation-50);
+    background: var(--color-bg-secondary);
     padding: var(--spacer-4);
     gap: var(--spacer-2-5);
   }

package/dist/elements/Popup/PopupDivider/index.css

@@ -1,5 +1,3 @@
-@import '../../../scss/styles.scss';
-
 @layer payload-default {
   .popup-divider {
     height: var(--stroke-width-small);

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Popup/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,SAAS,MAAM,4BAA4B,CAAA;AAEvD,OAAO,KAAmD,MAAM,OAAO,CAAA;AAIvE,OAAO,aAAa,CAAA;AAuBpB,MAAM,MAAM,UAAU,GAAG;IACvB,eAAe,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAA;IAClD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAC1C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC/B,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IACjC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;OAIG;IACH,eAAe,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC7C,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACxC;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IACzD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QACrB,MAAM,EAAE,OAAO,CAAA;QACf,eAAe,EAAE,OAAO,CAAA;QACxB,eAAe,EAAE,IAAI,CAAA;QACrB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAA;QAChC,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAA;KACtC,KAAK,KAAK,CAAC,SAAS,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,IAAI,CAAC,EAAE,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnD;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;IACjC;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CACjC,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAoZtC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Popup/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,SAAS,MAAM,4BAA4B,CAAA;AAEvD,OAAO,KAAmD,MAAM,OAAO,CAAA;AAKvE,OAAO,aAAa,CAAA;AAuBpB,MAAM,MAAM,UAAU,GAAG;IACvB,eAAe,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAA;IAClD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAC1C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC/B,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IACjC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;OAIG;IACH,eAAe,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC7C,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACxC;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IACzD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QACrB,MAAM,EAAE,OAAO,CAAA;QACf,eAAe,EAAE,OAAO,CAAA;QACxB,eAAe,EAAE,IAAI,CAAA;QACrB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAA;QAChC,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAA;KACtC,KAAK,KAAK,CAAC,SAAS,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,IAAI,CAAC,EAAE,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnD;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;IACjC;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CACjC,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAsatC,CAAA"}

package/dist/elements/Popup/index.js

@@ -1,10 +1,11 @@
 'use client';
 
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export * as PopupList from './PopupButtonList/index.js';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useEffectEvent } from '../../hooks/useEffectEvent.js';
+import { ThemeProvider } from '../../providers/Theme/index.js';
 import './index.css';
 import { PopupTrigger } from './PopupTrigger/index.js';
 const baseClass = 'popup';
@@ -230,10 +231,19 @@ export const Popup = props => {
   // /////////////////////////////////////
   useEffect(() => {
     if (!active) {
+      const popup_1 = popupRef.current;
+      if (popup_1) {
+        // Clear inline position styles so the CSS `top: -9999px` rule on
+        // `.popup__hidden-content` takes effect. Without this, the inline
+        // styles set during positioning would win over the CSS rule, keeping
+        // portaled children (e.g. a ReactSelect menu) visually on-screen.
+        popup_1.style.top = '';
+        popup_1.style.left = '';
+      }
       return;
     }
-    const popup_1 = popupRef.current;
-    if (!popup_1) {
+    const popup_2 = popupRef.current;
+    if (!popup_2) {
       return;
     }
     // /////////////////////////////////////
@@ -262,7 +272,7 @@ export const Popup = props => {
     if (openedViaKeyboardRef.current) {
       // Use requestAnimationFrame to ensure DOM is ready.
       requestAnimationFrame(() => {
-        const firstFocusable = popup_1.querySelector(TABBABLE_SELECTOR);
+        const firstFocusable = popup_2.querySelector(TABBABLE_SELECTOR);
         firstFocusable?.focus();
       });
     }
@@ -279,7 +289,7 @@ export const Popup = props => {
     });
     document.addEventListener('mousedown', handleClickOutside);
     document.addEventListener('keydown', handleKeyDown);
-    popup_1.addEventListener('click', handleActionableClick);
+    popup_2.addEventListener('click', handleActionableClick);
     return () => {
       cancelAnimationFrame(rafId);
       window.removeEventListener('resize', updatePosition);
@@ -288,7 +298,7 @@ export const Popup = props => {
       });
       document.removeEventListener('mousedown', handleClickOutside);
       document.removeEventListener('keydown', handleKeyDown);
-      popup_1.removeEventListener('click', handleActionableClick);
+      popup_2.removeEventListener('click', handleActionableClick);
     };
   }, [active]);
   useEffect(() => {
@@ -333,11 +343,18 @@ export const Popup = props => {
       "data-popup-id": id || undefined,
       "data-theme": theme === 'auto' ? undefined : theme,
       ref: popupRef,
-      children: [/*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx("div", {
         className: `${baseClass}__scroll-container${showScrollbar ? ` ${baseClass}__scroll-container--show-scrollbar` : ''}`,
-        children: [render?.({
-          close: () => setActive(false)
-        }), children]
+        children: theme === 'auto' ? /*#__PURE__*/_jsxs(_Fragment, {
+          children: [render?.({
+            close: () => setActive(false)
+          }), children]
+        }) : /*#__PURE__*/_jsxs(ThemeProvider, {
+          theme: theme,
+          children: [render?.({
+            close: () => setActive(false)
+          }), children]
+        })
       }), caret && /*#__PURE__*/_jsx("div", {
         className: `${baseClass}__caret`
       })]