@payloadcms/ui 4.0.0-internal.cd47d20 → 4.0.0-internal.ce66a41

package/dist/elements/ReactSelect/ValueContainer/index.js

@@ -1,5 +1,6 @@
 'use client';
 
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import React from 'react';
@@ -8,6 +9,7 @@ import { useTranslation } from '../../../providers/Translation/index.js';
 import './index.css';
 const baseClass = 'value-container';
 export const ValueContainer = props => {
+  const $ = _c(2);
   const {
     selectProps: t0
   } = props;
@@ -18,6 +20,25 @@ export const ValueContainer = props => {
   const {
     i18n
   } = useTranslation();
+  const selectProps = props.selectProps;
+  let t1;
+  if ($[0] !== selectProps) {
+    t1 = child => {
+      if (!React.isValidElement(child) || child.props.role !== "combobox") {
+        return child;
+      }
+      const describedBy = [child.props["aria-describedby"], selectProps["aria-describedby"]].join(" ").split(/\s+/).filter(Boolean);
+      return React.cloneElement(child, {
+        "aria-describedby": [...new Set(describedBy)].join(" ") || undefined,
+        "aria-required": selectProps["aria-required"] ?? child.props["aria-required"]
+      });
+    };
+    $[0] = selectProps;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const children = React.Children.map(props.children, t1);
   let titleText = "";
   if (value && !Array.isArray(value) && typeof value === "object" && "label" in value) {
     const labelText = value.label ? getTranslation(value.label, i18n) : "";
@@ -31,7 +52,8 @@ export const ValueContainer = props => {
       className: `${baseClass}__label`,
       children: customProps?.valueContainerLabel
     }), _jsx(SelectComponents.ValueContainer, {
-      ...props
+      ...props,
+      children
     })]
   });
 };

package/dist/elements/ReactSelect/ValueContainer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["getTranslation","React","components","SelectComponents","useTranslation","baseClass","ValueContainer","props","selectProps","t0","customProps","value","undefined","i18n","titleText","Array","isArray","labelText","label","_jsxs","className","ref","droppableRef","title","children","valueContainerLabel","_jsx"],"sources":["../../../../src/elements/ReactSelect/ValueContainer/index.tsx"],"sourcesContent":["'use client'\nimport type { OptionLabel } from 'payload'\nimport type { ValueContainerProps } from 'react-select'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\nimport { components as SelectComponents } from 'react-select'\n\nimport type { Option } from '../types.js'\n\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'value-container'\n\nexport const ValueContainer: React.FC<ValueContainerProps<Option, any>> = (props) => {\n  // @ts-expect-error-next-line // TODO Fix this - moduleResolution 16 breaks our declare module\n  const { selectProps: { customProps, value } = {} } = props\n  const { i18n } = useTranslation()\n\n  // Get the title for single-value selects\n  let titleText = ''\n  if (value && !Array.isArray(value) && typeof value === 'object' && 'label' in value) {\n    const labelText = value.label ? getTranslation(value.label as OptionLabel, i18n) : ''\n    titleText = typeof labelText === 'string' ? labelText : ''\n  }\n\n  return (\n    <div className={baseClass} ref={customProps?.droppableRef} title={titleText}>\n      {customProps?.valueContainerLabel && (\n        <span className={`${baseClass}__label`}>{customProps?.valueContainerLabel}</span>\n      )}\n      <SelectComponents.ValueContainer {...props} />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAIA,SAASA,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAClB,SAASC,UAAA,IAAcC,gBAAgB,QAAQ;AAI/C,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,cAAA,GAA6DC,KAAA;EAExE;IAAAC,WAAA,EAAAC;EAAA,IAAqDF,KAAA;EAAhC;IAAAG,WAAA;IAAAC;EAAA,IAAAF,EAA2B,KAAAG,SAAA,QAA3BH,EAA2B;EAChD;IAAAI;EAAA,IAAiBT,cAAA;EAGjB,IAAAU,SAAA,GAAgB;EAAA,IACZH,KAAA,KAAUI,KAAA,CAAAC,OAAA,CAAcL,KAAA,KAAU,OAAOA,KAAA,KAAU,YAAY,WAAWA,KAAA;IAC5E,MAAAM,SAAA,GAAkBN,KAAA,CAAAO,KAAA,GAAclB,cAAA,CAAeW,KAAA,CAAAO,KAAA,EAA4BL,IAAA,IAAQ;IACnFC,SAAA,CAAAA,CAAA,CAAYA,MAAA,CAAOG,SAAA,KAAc,WAAWA,SAAA,GAAY;EAAxD;EAAA,OAIAE,KAAA,CAAC;IAAAC,SAAA,EAAAf,SAAA;IAAAgB,GAAA,EAA+BX,WAAA,EAAAY,YAAA;IAAAC,KAAA,EAAkCT,SAAA;IAAAU,QAAA,GAC/Dd,WAAA,EAAAe,mBAAA,IACCC,IAAA,CAAC;MAAAN,SAAA,EAAgB,GAAAf,SAAA,SAAqB;MAAAmB,QAAA,EAAGd,WAAA,EAAAe;IAAA,C,GAE3CC,IAAA,CAAAvB,gBAAA,CAAAG,cAAA;MAAA,GAAqCC;IAAK,C;;CAGhD","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","components","SelectComponents","useTranslation","baseClass","ValueContainer","props","$","selectProps","t0","customProps","value","undefined","i18n","t1","child","isValidElement","role","describedBy","join","split","filter","Boolean","cloneElement","Set","children","Children","map","titleText","Array","isArray","labelText","label","_jsxs","className","ref","droppableRef","title","valueContainerLabel","_jsx"],"sources":["../../../../src/elements/ReactSelect/ValueContainer/index.tsx"],"sourcesContent":["'use client'\nimport type { OptionLabel } from 'payload'\nimport type { AriaAttributes } from 'react'\nimport type { ValueContainerProps } from 'react-select'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\nimport { components as SelectComponents } from 'react-select'\n\nimport type { Option, ReactSelectAdapterProps } from '../types.js'\n\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'value-container'\n\nexport const ValueContainer: React.FC<ValueContainerProps<Option, any>> = (props) => {\n  // @ts-expect-error-next-line // TODO Fix this - moduleResolution 16 breaks our declare module\n  const { selectProps: { customProps, value } = {} } = props\n  const { i18n } = useTranslation()\n  const selectProps = props.selectProps as Pick<\n    ReactSelectAdapterProps,\n    'aria-describedby' | 'aria-required'\n  >\n\n  const children = React.Children.map(props.children, (child) => {\n    if (\n      !React.isValidElement<{ role?: string } & AriaAttributes>(child) ||\n      child.props.role !== 'combobox'\n    ) {\n      return child\n    }\n\n    const describedBy = [child.props['aria-describedby'], selectProps['aria-describedby']]\n      .join(' ')\n      .split(/\\s+/)\n      .filter(Boolean)\n\n    return React.cloneElement(child, {\n      'aria-describedby': [...new Set(describedBy)].join(' ') || undefined,\n      'aria-required': selectProps['aria-required'] ?? child.props['aria-required'],\n    })\n  })\n\n  let titleText = ''\n  if (value && !Array.isArray(value) && typeof value === 'object' && 'label' in value) {\n    const labelText = value.label ? getTranslation(value.label as OptionLabel, i18n) : ''\n    titleText = typeof labelText === 'string' ? labelText : ''\n  }\n\n  return (\n    <div className={baseClass} ref={customProps?.droppableRef} title={titleText}>\n      {customProps?.valueContainerLabel && (\n        <span className={`${baseClass}__label`}>{customProps?.valueContainerLabel}</span>\n      )}\n      <SelectComponents.ValueContainer {...props}>{children}</SelectComponents.ValueContainer>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAKA,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAClB,SAASC,UAAA,IAAcC,gBAAgB,QAAQ;AAI/C,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,cAAA,GAA6DC,KAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAExE;IAAAU,WAAA,EAAAC;EAAA,IAAqDH,KAAA;EAAhC;IAAAI,WAAA;IAAAC;EAAA,IAAAF,EAA2B,KAAAG,SAAA,QAA3BH,EAA2B;EAChD;IAAAI;EAAA,IAAiBV,cAAA;EACjB,MAAAK,WAAA,GAAoBF,KAAA,CAAAE,WAAA;EAAiB,IAAAM,EAAA;EAAA,IAAAP,CAAA,QAAAC,WAAA;IAKeM,EAAA,GAAAC,KAAA;MAAA,IAEhD,CAACf,KAAA,CAAAgB,cAAA,CAAyDD,KAAA,KAC1DA,KAAA,CAAAT,KAAA,CAAAW,IAAA,KAAqB;QAAA,OAEdF,KAAA;MAAA;MAGT,MAAAG,WAAA,GAAoB,CAACH,KAAA,CAAAT,KAAA,CAAY,qBAAqBE,WAAW,CAAC,qBAAAW,IAAA,CAC1D,KAAAC,KAAA,MACC,EAAAC,MAAA,CAAAC,OACC;MAAA,OAEHtB,KAAA,CAAAuB,YAAA,CAAmBR,KAAA;QAAA,oBACJ,QAAAS,GAAA,CAAYN,WAAA,GAAAA,IAAA,CAAmB,QAAAN,SAAQ;QAAA,iBAC1CJ,WAAW,CAAC,oBAAoBO,KAAA,CAAAT,KAAA,CAAY;MAAgB,CAC/E;IAAA;IACFC,CAAA,MAAAC,WAAA;IAAAD,CAAA,MAAAO,EAAA;EAAA;IAAAA,EAAA,GAAAP,CAAA;EAAA;EAjBA,MAAAkB,QAAA,GAAiBzB,KAAA,CAAA0B,QAAA,CAAAC,GAAA,CAAmBrB,KAAA,CAAAmB,QAAA,EAAgBX,EAiBpD;EAEA,IAAAc,SAAA,GAAgB;EAAA,IACZjB,KAAA,KAAUkB,KAAA,CAAAC,OAAA,CAAcnB,KAAA,KAAU,OAAOA,KAAA,KAAU,YAAY,WAAWA,KAAA;IAC5E,MAAAoB,SAAA,GAAkBpB,KAAA,CAAAqB,KAAA,GAAcjC,cAAA,CAAeY,KAAA,CAAAqB,KAAA,EAA4BnB,IAAA,IAAQ;IACnFe,SAAA,CAAAA,CAAA,CAAYA,MAAA,CAAOG,SAAA,KAAc,WAAWA,SAAA,GAAY;EAAxD;EAAA,OAIAE,KAAA,CAAC;IAAAC,SAAA,EAAA9B,SAAA;IAAA+B,GAAA,EAA+BzB,WAAA,EAAA0B,YAAA;IAAAC,KAAA,EAAkCT,SAAA;IAAAH,QAAA,GAC/Df,WAAA,EAAA4B,mBAAA,IACCC,IAAA,CAAC;MAAAL,SAAA,EAAgB,GAAA9B,SAAA,SAAqB;MAAAqB,QAAA,EAAGf,WAAA,EAAA4B;IAAA,C,GAE3CC,IAAA,CAAArC,gBAAA,CAAAG,cAAA;MAAA,GAAqCC,KAAK;MAAAmB;IAAA,C;;CAGhD","ignoreList":[]}

package/dist/elements/ReactSelect/index.css

@@ -12,7 +12,6 @@
       border: var(--stroke-width-small) solid var(--field-color-border);
       border-radius: var(--field-border-radius);
       color: var(--color-text);
-      font-family: var(--text-body-medium-font-family);
       font-size: var(--text-body-medium-font-size);
       font-weight: var(--text-body-medium-font-weight);
       line-height: var(--text-body-medium-line-height);
@@ -113,14 +112,12 @@
   .rs__group-heading {
     color: var(--color-text-tertiary);
     padding: var(--spacer-2-5) var(--spacer-3) var(--spacer-1);
-    font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
     line-height: var(--text-body-medium-line-height);
   }
 
   .rs__option {
-    font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
     line-height: var(--text-body-medium-line-height);
@@ -137,6 +134,11 @@
     background-color: var(--color-bg-selected);
   }
 
+  .rs__option--is-disabled {
+    color: var(--color-text-disabled);
+    cursor: not-allowed;
+  }
+
   .react-select--error {
     div.rs__control {
       border: var(--stroke-width-small) solid var(--field-color-border-error);

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

@@ -46,8 +46,11 @@ export type OptionGroup = {
     options: Option[];
 };
 export type ReactSelectAdapterProps = {
+    'aria-describedby'?: AriaAttributes['aria-describedby'];
+    'aria-invalid'?: AriaAttributes['aria-invalid'];
     'aria-label'?: AriaAttributes['aria-label'];
     'aria-labelledby'?: AriaAttributes['aria-labelledby'];
+    'aria-required'?: AriaAttributes['aria-required'];
     backspaceRemovesValue?: boolean;
     blurInputOnSelect?: boolean;
     captureMenuScroll?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/ReactSelect/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/ReactSelect/types.ts"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/ReactSelect/types.ts"],"sourcesContent":["import type { LabelFunction } from 'payload'\nimport type { AriaAttributes } from 'react'\nimport type {\n  ClassNamesConfig,\n  CommonProps,\n  GroupBase,\n  Props as ReactSelectStateManagerProps,\n  StylesConfig,\n} from 'react-select'\n\nimport type { DocumentDrawerProps } from '../DocumentDrawer/types.js'\n\nexport type CustomSelectProps = {\n  clearValueLabel?: string\n  disableKeyDown?: boolean\n  disableMouseDown?: boolean\n  draggableProps?: any\n  droppableRef?: React.RefObject<HTMLDivElement | null>\n  editableProps?: (\n    data: Option<{ label: string; value: string }>,\n    className: string,\n    selectProps: ReactSelectStateManagerProps,\n  ) => any\n  /** Force the portaled menu to render with a specific theme, independent of the control's ambient theme. */\n  menuPortalTheme?: 'dark' | 'light'\n  onDelete?: DocumentDrawerProps['onDelete']\n  onDocumentOpen?: (args: {\n    collectionSlug: string\n    hasReadPermission: boolean\n    id: number | string\n    openInNewTab?: boolean\n  }) => void\n  onDuplicate?: DocumentDrawerProps['onSave']\n  onSave?: DocumentDrawerProps['onSave']\n  removeValueLabel?: string\n  valueContainerLabel?: string\n}\n\n// augment the types for the `Select` component from `react-select`\n// this is to include the `selectProps` prop at the top-level `Select` component\n// @ts-expect-error-next-line // TODO Fix this - moduleResolution 16 breaks our declare module\ndeclare module 'react-select/dist/declarations/src/Select' {\n  export interface Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {\n    customProps?: CustomSelectProps\n  }\n}\n\n// augment the types for the `CommonPropsAndClassName` from `react-select`\n// this will include the `selectProps` prop to every `react-select` component automatically\n// @ts-expect-error-next-line // TODO Fix this - moduleResolution 16 breaks our declare module\ndeclare module 'react-select/dist/declarations/src' {\n  export interface CommonPropsAndClassName<\n    Option,\n    IsMulti extends boolean,\n    Group extends GroupBase<Option>,\n  > extends CommonProps<Option, IsMulti, Group> {\n    customProps?: CustomSelectProps & ReactSelectStateManagerProps<Option, IsMulti, Group>\n  }\n}\n\nexport type Option<TValue = unknown> = {\n  [key: string]: unknown\n  //* The ID is used to identify the option in the UI. If it doesn't exist and value cannot be transformed into a string, sorting won't work */\n  id?: string\n  value: TValue\n}\n\nexport type OptionGroup = {\n  label: string\n  options: Option[]\n}\n\nexport type ReactSelectAdapterProps = {\n  'aria-label'?: AriaAttributes['aria-label']\n  'aria-labelledby'?: AriaAttributes['aria-labelledby']\n  backspaceRemovesValue?: boolean\n  blurInputOnSelect?: boolean\n  captureMenuScroll?: boolean\n  className?: string\n  classNames?: ClassNamesConfig<Option, boolean, GroupBase<Option>>\n  components?: {\n    [key: string]: React.FC<any>\n  }\n  customProps?: CustomSelectProps\n  disabled?: boolean\n  filterOption?:\n    | ((\n        {\n          allowEdit,\n          data,\n          label,\n          value,\n        }: { allowEdit: boolean; data: Option; label: string; value: string },\n        search: string,\n      ) => boolean)\n    | undefined\n  formatOptionLabel?: ReactSelectStateManagerProps<\n    Option,\n    boolean,\n    GroupBase<Option>\n  >['formatOptionLabel']\n  getOptionLabel?: ReactSelectStateManagerProps<\n    Option,\n    boolean,\n    GroupBase<Option>\n  >['getOptionLabel']\n  getOptionValue?: ReactSelectStateManagerProps<\n    Option,\n    boolean,\n    GroupBase<Option>\n  >['getOptionValue']\n  id?: string\n  inputId?: string\n  isClearable?: boolean\n  /** Allows you to create own values in the UI despite them not being pre-specified */\n  isCreatable?: boolean\n  isLoading?: boolean\n  /** Allows you to specify multiple values instead of just one */\n  isMulti?: boolean\n  isOptionSelected?: any\n  isSearchable?: boolean\n  isSortable?: boolean\n  menuIsOpen?: boolean\n  menuPortalTarget?: HTMLElement | null\n  menuPosition?: 'absolute' | 'fixed'\n  noOptionsMessage?: (obj: { inputValue: string }) => string\n  numberOnly?: boolean\n  onChange?: (value: Option | Option[]) => void\n  onInputChange?: (val: string) => void\n  onMenuClose?: () => void\n  onMenuOpen?: () => void\n  onMenuScrollToBottom?: () => void\n  options: Option[] | OptionGroup[]\n  placeholder?: LabelFunction | string\n  showError?: boolean\n  styles?: StylesConfig<Option>\n  value?: Option | Option[]\n}\n"],"mappings":"AAwEA","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/ReactSelect/types.ts"],"sourcesContent":["import type { LabelFunction } from 'payload'\nimport type { AriaAttributes } from 'react'\nimport type {\n  ClassNamesConfig,\n  CommonProps,\n  GroupBase,\n  Props as ReactSelectStateManagerProps,\n  StylesConfig,\n} from 'react-select'\n\nimport type { DocumentDrawerProps } from '../DocumentDrawer/types.js'\n\nexport type CustomSelectProps = {\n  clearValueLabel?: string\n  disableKeyDown?: boolean\n  disableMouseDown?: boolean\n  draggableProps?: any\n  droppableRef?: React.RefObject<HTMLDivElement | null>\n  editableProps?: (\n    data: Option<{ label: string; value: string }>,\n    className: string,\n    selectProps: ReactSelectStateManagerProps,\n  ) => any\n  /** Force the portaled menu to render with a specific theme, independent of the control's ambient theme. */\n  menuPortalTheme?: 'dark' | 'light'\n  onDelete?: DocumentDrawerProps['onDelete']\n  onDocumentOpen?: (args: {\n    collectionSlug: string\n    hasReadPermission: boolean\n    id: number | string\n    openInNewTab?: boolean\n  }) => void\n  onDuplicate?: DocumentDrawerProps['onSave']\n  onSave?: DocumentDrawerProps['onSave']\n  removeValueLabel?: string\n  valueContainerLabel?: string\n}\n\n// augment the types for the `Select` component from `react-select`\n// this is to include the `selectProps` prop at the top-level `Select` component\n// @ts-expect-error-next-line // TODO Fix this - moduleResolution 16 breaks our declare module\ndeclare module 'react-select/dist/declarations/src/Select' {\n  export interface Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {\n    customProps?: CustomSelectProps\n  }\n}\n\n// augment the types for the `CommonPropsAndClassName` from `react-select`\n// this will include the `selectProps` prop to every `react-select` component automatically\n// @ts-expect-error-next-line // TODO Fix this - moduleResolution 16 breaks our declare module\ndeclare module 'react-select/dist/declarations/src' {\n  export interface CommonPropsAndClassName<\n    Option,\n    IsMulti extends boolean,\n    Group extends GroupBase<Option>,\n  > extends CommonProps<Option, IsMulti, Group> {\n    customProps?: CustomSelectProps & ReactSelectStateManagerProps<Option, IsMulti, Group>\n  }\n}\n\nexport type Option<TValue = unknown> = {\n  [key: string]: unknown\n  //* The ID is used to identify the option in the UI. If it doesn't exist and value cannot be transformed into a string, sorting won't work */\n  id?: string\n  value: TValue\n}\n\nexport type OptionGroup = {\n  label: string\n  options: Option[]\n}\n\nexport type ReactSelectAdapterProps = {\n  'aria-describedby'?: AriaAttributes['aria-describedby']\n  'aria-invalid'?: AriaAttributes['aria-invalid']\n  'aria-label'?: AriaAttributes['aria-label']\n  'aria-labelledby'?: AriaAttributes['aria-labelledby']\n  'aria-required'?: AriaAttributes['aria-required']\n  backspaceRemovesValue?: boolean\n  blurInputOnSelect?: boolean\n  captureMenuScroll?: boolean\n  className?: string\n  classNames?: ClassNamesConfig<Option, boolean, GroupBase<Option>>\n  components?: {\n    [key: string]: React.FC<any>\n  }\n  customProps?: CustomSelectProps\n  disabled?: boolean\n  filterOption?:\n    | ((\n        {\n          allowEdit,\n          data,\n          label,\n          value,\n        }: { allowEdit: boolean; data: Option; label: string; value: string },\n        search: string,\n      ) => boolean)\n    | undefined\n  formatOptionLabel?: ReactSelectStateManagerProps<\n    Option,\n    boolean,\n    GroupBase<Option>\n  >['formatOptionLabel']\n  getOptionLabel?: ReactSelectStateManagerProps<\n    Option,\n    boolean,\n    GroupBase<Option>\n  >['getOptionLabel']\n  getOptionValue?: ReactSelectStateManagerProps<\n    Option,\n    boolean,\n    GroupBase<Option>\n  >['getOptionValue']\n  id?: string\n  inputId?: string\n  isClearable?: boolean\n  /** Allows you to create own values in the UI despite them not being pre-specified */\n  isCreatable?: boolean\n  isLoading?: boolean\n  /** Allows you to specify multiple values instead of just one */\n  isMulti?: boolean\n  isOptionSelected?: any\n  isSearchable?: boolean\n  isSortable?: boolean\n  menuIsOpen?: boolean\n  menuPortalTarget?: HTMLElement | null\n  menuPosition?: 'absolute' | 'fixed'\n  noOptionsMessage?: (obj: { inputValue: string }) => string\n  numberOnly?: boolean\n  onChange?: (value: Option | Option[]) => void\n  onInputChange?: (val: string) => void\n  onMenuClose?: () => void\n  onMenuOpen?: () => void\n  onMenuScrollToBottom?: () => void\n  options: Option[] | OptionGroup[]\n  placeholder?: LabelFunction | string\n  showError?: boolean\n  styles?: StylesConfig<Option>\n  value?: Option | Option[]\n}\n"],"mappings":"AAwEA","ignoreList":[]}

package/dist/elements/RenderTitle/index.css

@@ -1,14 +1,13 @@
 @layer payload-default {
   .render-title {
-    --render-title-letter-spacing: var(--text-heading-large-letter-spacing);
+    --render-title-letter-spacing: var(--text-heading-xl-letter-spacing);
 
     display: inline-flex;
     align-items: center;
-    min-height: var(--text-heading-large-line-height);
-    font-family: var(--text-heading-large-font-family);
-    font-size: var(--text-heading-large-font-size);
-    font-weight: var(--text-heading-large-font-weight);
-    line-height: var(--text-heading-large-line-height);
+    min-height: var(--text-heading-xl-line-height);
+    font-size: var(--text-heading-xl-font-size);
+    font-weight: var(--text-heading-xl-font-weight);
+    line-height: var(--text-heading-xl-line-height);
     letter-spacing: var(--render-title-letter-spacing);
     color: var(--color-text);
     margin: 0;
@@ -29,6 +28,10 @@
   .render-title__id {
     vertical-align: middle;
     position: relative;
+    font-size: var(--text-mono-large-font-size);
+    font-weight: var(--text-mono-large-weight);
+    line-height: var(--text-mono-large-line-height);
+    letter-spacing: var(--text-mono-large-letter-spacing);
   }
 
   .render-title__link {
@@ -47,7 +50,6 @@
       --render-title-letter-spacing: -0.075px;
 
       min-height: var(--text-heading-medium-line-height);
-      font-family: var(--text-heading-medium-font-family);
       font-size: var(--text-heading-medium-font-size);
       font-weight: var(--text-heading-medium-font-weight);
       line-height: var(--text-heading-medium-line-height);

package/dist/elements/Search/ListSearchFilter/index.d.ts

@@ -4,8 +4,9 @@ type ListSearchFilterProps = {
     disabled?: boolean;
     label?: string;
     onSearchChange: (search: string) => void;
+    onSearchInputChange?: (search: string) => void;
     searchQueryParam?: string;
 };
-export declare function ListSearchFilter({ className, disabled, label, onSearchChange, searchQueryParam, }: ListSearchFilterProps): React.JSX.Element;
+export declare function ListSearchFilter({ className, disabled, label, onSearchChange, onSearchInputChange, searchQueryParam, }: ListSearchFilterProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/Search/ListSearchFilter/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Search/ListSearchFilter/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAK1D,KAAK,qBAAqB,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,QAAQ,EACR,KAAmB,EACnB,cAAc,EACd,gBAAgB,GACjB,EAAE,qBAAqB,qBAgDvB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Search/ListSearchFilter/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAM1D,KAAK,qBAAqB,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9C,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,QAAQ,EACR,KAAmB,EACnB,cAAc,EACd,mBAAmB,EACnB,gBAAgB,GACjB,EAAE,qBAAqB,qBA2DvB"}

package/dist/elements/Search/ListSearchFilter/index.js

@@ -1,16 +1,22 @@
 'use client';
 
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useEffect, useRef, useState } from 'react';
 import { useDebounce } from '../../../hooks/useDebounce.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
 import { SearchInput } from '../SearchInput/index.js';
 export function ListSearchFilter({
   className,
   disabled,
   label = 'Search...',
   onSearchChange,
+  onSearchInputChange,
   searchQueryParam
 }) {
+  const {
+    t
+  } = useTranslation();
+  const descriptionID = React.useId();
   const [search, setSearch] = useState(typeof searchQueryParam === 'string' ? searchQueryParam : undefined);
   const shouldUpdateState = useRef(true);
   const previousSearch = useRef(typeof searchQueryParam === 'string' ? searchQueryParam : undefined);
@@ -19,34 +25,44 @@ export function ListSearchFilter({
     if (searchQueryParam !== previousSearch.current) {
       shouldUpdateState.current = false;
       setSearch(searchQueryParam);
+      onSearchInputChange?.(searchQueryParam || '');
       previousSearch.current = searchQueryParam;
     }
     return () => {
       shouldUpdateState.current = true;
       previousSearch.current = undefined;
     };
-  }, [searchQueryParam]);
+  }, [onSearchInputChange, searchQueryParam]);
   useEffect(() => {
     if (debouncedSearch !== previousSearch.current && shouldUpdateState.current) {
       onSearchChange(debouncedSearch);
       previousSearch.current = debouncedSearch;
     }
   }, [debouncedSearch, onSearchChange]);
-  return /*#__PURE__*/_jsx(SearchInput, {
-    autoComplete: "off",
-    className: className,
-    disabled: disabled,
-    id: "search-filter-input",
-    onChange: value => {
-      shouldUpdateState.current = true;
-      setSearch(value);
-    },
-    onClear: () => {
-      shouldUpdateState.current = true;
-      setSearch('');
-    },
-    placeholder: label,
-    value: search || ''
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("span", {
+      className: "sr-only",
+      id: descriptionID,
+      children: t('general:searchAutomatically')
+    }), /*#__PURE__*/_jsx(SearchInput, {
+      "aria-describedby": descriptionID,
+      autoComplete: "off",
+      className: className,
+      disabled: disabled,
+      id: "search-filter-input",
+      onChange: value => {
+        shouldUpdateState.current = true;
+        setSearch(value);
+        onSearchInputChange?.(value);
+      },
+      onClear: () => {
+        shouldUpdateState.current = true;
+        setSearch('');
+        onSearchInputChange?.('');
+      },
+      placeholder: label,
+      value: search || ''
+    })]
   });
 }
 //# sourceMappingURL=index.js.map

package/dist/elements/Search/ListSearchFilter/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useEffect","useRef","useState","useDebounce","SearchInput","ListSearchFilter","className","disabled","label","onSearchChange","searchQueryParam","search","setSearch","undefined","shouldUpdateState","previousSearch","debouncedSearch","current","_jsx","autoComplete","id","onChange","value","onClear","placeholder"],"sources":["../../../../src/elements/Search/ListSearchFilter/index.tsx"],"sourcesContent":["'use client'\n\nimport React, { useEffect, useRef, useState } from 'react'\n\nimport { useDebounce } from '../../../hooks/useDebounce.js'\nimport { SearchInput } from '../SearchInput/index.js'\n\ntype ListSearchFilterProps = {\n  className?: string\n  disabled?: boolean\n  label?: string\n  onSearchChange: (search: string) => void\n  searchQueryParam?: string\n}\n\nexport function ListSearchFilter({\n  className,\n  disabled,\n  label = 'Search...',\n  onSearchChange,\n  searchQueryParam,\n}: ListSearchFilterProps) {\n  const [search, setSearch] = useState(\n    typeof searchQueryParam === 'string' ? searchQueryParam : undefined,\n  )\n\n  const shouldUpdateState = useRef(true)\n  const previousSearch = useRef(typeof searchQueryParam === 'string' ? searchQueryParam : undefined)\n\n  const debouncedSearch = useDebounce(search, 300)\n\n  useEffect(() => {\n    if (searchQueryParam !== previousSearch.current) {\n      shouldUpdateState.current = false\n      setSearch(searchQueryParam)\n      previousSearch.current = searchQueryParam\n    }\n\n    return () => {\n      shouldUpdateState.current = true\n      previousSearch.current = undefined\n    }\n  }, [searchQueryParam])\n\n  useEffect(() => {\n    if (debouncedSearch !== previousSearch.current && shouldUpdateState.current) {\n      onSearchChange(debouncedSearch)\n      previousSearch.current = debouncedSearch\n    }\n  }, [debouncedSearch, onSearchChange])\n\n  return (\n    <SearchInput\n      autoComplete=\"off\"\n      className={className}\n      disabled={disabled}\n      id=\"search-filter-input\"\n      onChange={(value) => {\n        shouldUpdateState.current = true\n        setSearch(value)\n      }}\n      onClear={() => {\n        shouldUpdateState.current = true\n        setSearch('')\n      }}\n      placeholder={label}\n      value={search || ''}\n    />\n  )\n}\n"],"mappings":"AAAA;;;AAEA,OAAOA,KAAA,IAASC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ;AAEnD,SAASC,WAAW,QAAQ;AAC5B,SAASC,WAAW,QAAQ;AAU5B,OAAO,SAASC,iBAAiB;EAC/BC,SAAS;EACTC,QAAQ;EACRC,KAAA,GAAQ,WAAW;EACnBC,cAAc;EACdC;AAAgB,CACM;EACtB,MAAM,CAACC,MAAA,EAAQC,SAAA,CAAU,GAAGV,QAAA,CAC1B,OAAOQ,gBAAA,KAAqB,WAAWA,gBAAA,GAAmBG,SAAA;EAG5D,MAAMC,iBAAA,GAAoBb,MAAA,CAAO;EACjC,MAAMc,cAAA,GAAiBd,MAAA,CAAO,OAAOS,gBAAA,KAAqB,WAAWA,gBAAA,GAAmBG,SAAA;EAExF,MAAMG,eAAA,GAAkBb,WAAA,CAAYQ,MAAA,EAAQ;EAE5CX,SAAA,CAAU;IACR,IAAIU,gBAAA,KAAqBK,cAAA,CAAeE,OAAO,EAAE;MAC/CH,iBAAA,CAAkBG,OAAO,GAAG;MAC5BL,SAAA,CAAUF,gBAAA;MACVK,cAAA,CAAeE,OAAO,GAAGP,gBAAA;IAC3B;IAEA,OAAO;MACLI,iBAAA,CAAkBG,OAAO,GAAG;MAC5BF,cAAA,CAAeE,OAAO,GAAGJ,SAAA;IAC3B;EACF,GAAG,CAACH,gBAAA,CAAiB;EAErBV,SAAA,CAAU;IACR,IAAIgB,eAAA,KAAoBD,cAAA,CAAeE,OAAO,IAAIH,iBAAA,CAAkBG,OAAO,EAAE;MAC3ER,cAAA,CAAeO,eAAA;MACfD,cAAA,CAAeE,OAAO,GAAGD,eAAA;IAC3B;EACF,GAAG,CAACA,eAAA,EAAiBP,cAAA,CAAe;EAEpC,oBACES,IAAA,CAACd,WAAA;IACCe,YAAA,EAAa;IACbb,SAAA,EAAWA,SAAA;IACXC,QAAA,EAAUA,QAAA;IACVa,EAAA,EAAG;IACHC,QAAA,EAAWC,KAAA;MACTR,iBAAA,CAAkBG,OAAO,GAAG;MAC5BL,SAAA,CAAUU,KAAA;IACZ;IACAC,OAAA,EAASA,CAAA;MACPT,iBAAA,CAAkBG,OAAO,GAAG;MAC5BL,SAAA,CAAU;IACZ;IACAY,WAAA,EAAahB,KAAA;IACbc,KAAA,EAAOX,MAAA,IAAU;;AAGvB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useEffect","useRef","useState","useDebounce","useTranslation","SearchInput","ListSearchFilter","className","disabled","label","onSearchChange","onSearchInputChange","searchQueryParam","t","descriptionID","useId","search","setSearch","undefined","shouldUpdateState","previousSearch","debouncedSearch","current","_jsxs","_Fragment","_jsx","id","autoComplete","onChange","value","onClear","placeholder"],"sources":["../../../../src/elements/Search/ListSearchFilter/index.tsx"],"sourcesContent":["'use client'\n\nimport React, { useEffect, useRef, useState } from 'react'\n\nimport { useDebounce } from '../../../hooks/useDebounce.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { SearchInput } from '../SearchInput/index.js'\n\ntype ListSearchFilterProps = {\n  className?: string\n  disabled?: boolean\n  label?: string\n  onSearchChange: (search: string) => void\n  onSearchInputChange?: (search: string) => void\n  searchQueryParam?: string\n}\n\nexport function ListSearchFilter({\n  className,\n  disabled,\n  label = 'Search...',\n  onSearchChange,\n  onSearchInputChange,\n  searchQueryParam,\n}: ListSearchFilterProps) {\n  const { t } = useTranslation()\n  const descriptionID = React.useId()\n  const [search, setSearch] = useState(\n    typeof searchQueryParam === 'string' ? searchQueryParam : undefined,\n  )\n\n  const shouldUpdateState = useRef(true)\n  const previousSearch = useRef(typeof searchQueryParam === 'string' ? searchQueryParam : undefined)\n\n  const debouncedSearch = useDebounce(search, 300)\n\n  useEffect(() => {\n    if (searchQueryParam !== previousSearch.current) {\n      shouldUpdateState.current = false\n      setSearch(searchQueryParam)\n      onSearchInputChange?.(searchQueryParam || '')\n      previousSearch.current = searchQueryParam\n    }\n\n    return () => {\n      shouldUpdateState.current = true\n      previousSearch.current = undefined\n    }\n  }, [onSearchInputChange, searchQueryParam])\n\n  useEffect(() => {\n    if (debouncedSearch !== previousSearch.current && shouldUpdateState.current) {\n      onSearchChange(debouncedSearch)\n      previousSearch.current = debouncedSearch\n    }\n  }, [debouncedSearch, onSearchChange])\n\n  return (\n    <>\n      <span className=\"sr-only\" id={descriptionID}>\n        {t('general:searchAutomatically')}\n      </span>\n      <SearchInput\n        aria-describedby={descriptionID}\n        autoComplete=\"off\"\n        className={className}\n        disabled={disabled}\n        id=\"search-filter-input\"\n        onChange={(value) => {\n          shouldUpdateState.current = true\n          setSearch(value)\n          onSearchInputChange?.(value)\n        }}\n        onClear={() => {\n          shouldUpdateState.current = true\n          setSearch('')\n          onSearchInputChange?.('')\n        }}\n        placeholder={label}\n        value={search || ''}\n      />\n    </>\n  )\n}\n"],"mappings":"AAAA;;;AAEA,OAAOA,KAAA,IAASC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ;AAEnD,SAASC,WAAW,QAAQ;AAC5B,SAASC,cAAc,QAAQ;AAC/B,SAASC,WAAW,QAAQ;AAW5B,OAAO,SAASC,iBAAiB;EAC/BC,SAAS;EACTC,QAAQ;EACRC,KAAA,GAAQ,WAAW;EACnBC,cAAc;EACdC,mBAAmB;EACnBC;AAAgB,CACM;EACtB,MAAM;IAAEC;EAAC,CAAE,GAAGT,cAAA;EACd,MAAMU,aAAA,GAAgBf,KAAA,CAAMgB,KAAK;EACjC,MAAM,CAACC,MAAA,EAAQC,SAAA,CAAU,GAAGf,QAAA,CAC1B,OAAOU,gBAAA,KAAqB,WAAWA,gBAAA,GAAmBM,SAAA;EAG5D,MAAMC,iBAAA,GAAoBlB,MAAA,CAAO;EACjC,MAAMmB,cAAA,GAAiBnB,MAAA,CAAO,OAAOW,gBAAA,KAAqB,WAAWA,gBAAA,GAAmBM,SAAA;EAExF,MAAMG,eAAA,GAAkBlB,WAAA,CAAYa,MAAA,EAAQ;EAE5ChB,SAAA,CAAU;IACR,IAAIY,gBAAA,KAAqBQ,cAAA,CAAeE,OAAO,EAAE;MAC/CH,iBAAA,CAAkBG,OAAO,GAAG;MAC5BL,SAAA,CAAUL,gBAAA;MACVD,mBAAA,GAAsBC,gBAAA,IAAoB;MAC1CQ,cAAA,CAAeE,OAAO,GAAGV,gBAAA;IAC3B;IAEA,OAAO;MACLO,iBAAA,CAAkBG,OAAO,GAAG;MAC5BF,cAAA,CAAeE,OAAO,GAAGJ,SAAA;IAC3B;EACF,GAAG,CAACP,mBAAA,EAAqBC,gBAAA,CAAiB;EAE1CZ,SAAA,CAAU;IACR,IAAIqB,eAAA,KAAoBD,cAAA,CAAeE,OAAO,IAAIH,iBAAA,CAAkBG,OAAO,EAAE;MAC3EZ,cAAA,CAAeW,eAAA;MACfD,cAAA,CAAeE,OAAO,GAAGD,eAAA;IAC3B;EACF,GAAG,CAACA,eAAA,EAAiBX,cAAA,CAAe;EAEpC,oBACEa,KAAA,CAAAC,SAAA;4BACEC,IAAA,CAAC;MAAKlB,SAAA,EAAU;MAAUmB,EAAA,EAAIZ,aAAA;gBAC3BD,CAAA,CAAE;qBAELY,IAAA,CAACpB,WAAA;MACC,oBAAkBS,aAAA;MAClBa,YAAA,EAAa;MACbpB,SAAA,EAAWA,SAAA;MACXC,QAAA,EAAUA,QAAA;MACVkB,EAAA,EAAG;MACHE,QAAA,EAAWC,KAAA;QACTV,iBAAA,CAAkBG,OAAO,GAAG;QAC5BL,SAAA,CAAUY,KAAA;QACVlB,mBAAA,GAAsBkB,KAAA;MACxB;MACAC,OAAA,EAASA,CAAA;QACPX,iBAAA,CAAkBG,OAAO,GAAG;QAC5BL,SAAA,CAAU;QACVN,mBAAA,GAAsB;MACxB;MACAoB,WAAA,EAAatB,KAAA;MACboB,KAAA,EAAOb,MAAA,IAAU;;;AAIzB","ignoreList":[]}

package/dist/elements/Search/SearchInput/index.css

@@ -43,7 +43,6 @@
     min-width: 0;
     padding-inline: var(--spacer-4) var(--spacer-3);
     background: transparent;
-    font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
     line-height: var(--text-body-medium-line-height);

package/dist/elements/Search/SearchInput/index.d.ts

@@ -2,6 +2,7 @@ import type { BrowserAutoComplete } from 'payload';
 import React from 'react';
 import './index.css';
 type SearchInputProps = {
+    'aria-describedby'?: string;
     'aria-label'?: string;
     autoComplete?: BrowserAutoComplete;
     className?: string;

package/dist/elements/Search/SearchInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Search/SearchInput/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAElD,OAAO,KAAsB,MAAM,OAAO,CAAA;AAM1C,OAAO,aAAa,CAAA;AAIpB,KAAK,gBAAgB,GAAG;IACtB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,YAAY,CAAC,EAAE,mBAAmB,CAAA;IAClC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAoDlD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Search/SearchInput/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAElD,OAAO,KAAsB,MAAM,OAAO,CAAA;AAM1C,OAAO,aAAa,CAAA;AAIpB,KAAK,gBAAgB,GAAG;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,YAAY,CAAC,EAAE,mBAAmB,CAAA;IAClC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAsDlD,CAAA"}

package/dist/elements/Search/SearchInput/index.js

@@ -10,9 +10,10 @@ import { Button } from '../../Button/index.js';
 import './index.css';
 const baseClass = 'search-input';
 export const SearchInput = t0 => {
-  const $ = _c(20);
+  const $ = _c(21);
   const {
     id,
+    "aria-describedby": ariaDescribedBy,
     "aria-label": ariaLabel,
     autoComplete,
     className,
@@ -50,18 +51,19 @@ export const SearchInput = t0 => {
   }
   const t3 = t2.join(" ");
   let t4;
-  if ($[5] !== ariaLabel || $[6] !== autoComplete || $[7] !== disabled || $[8] !== handleKeyDown || $[9] !== id || $[10] !== onChange || $[11] !== onClear || $[12] !== onSearch || $[13] !== placeholder || $[14] !== t || $[15] !== t3 || $[16] !== value) {
+  if ($[5] !== ariaDescribedBy || $[6] !== ariaLabel || $[7] !== autoComplete || $[8] !== disabled || $[9] !== handleKeyDown || $[10] !== id || $[11] !== onChange || $[12] !== onClear || $[13] !== onSearch || $[14] !== placeholder || $[15] !== t || $[16] !== t3 || $[17] !== value) {
     let t5;
-    if ($[18] !== onChange) {
+    if ($[19] !== onChange) {
       t5 = e_0 => onChange(e_0.target.value);
-      $[18] = onChange;
-      $[19] = t5;
+      $[19] = onChange;
+      $[20] = t5;
     } else {
-      t5 = $[19];
+      t5 = $[20];
     }
     t4 = _jsxs("div", {
       className: t3,
       children: [_jsx(SearchIcon, {}), _jsx("input", {
+        "aria-describedby": ariaDescribedBy,
         "aria-label": ariaLabel ?? placeholder,
         autoComplete,
         className: `${baseClass}__input`,
@@ -85,21 +87,22 @@ export const SearchInput = t0 => {
         size: "medium"
       })]
     });
-    $[5] = ariaLabel;
-    $[6] = autoComplete;
-    $[7] = disabled;
-    $[8] = handleKeyDown;
-    $[9] = id;
-    $[10] = onChange;
-    $[11] = onClear;
-    $[12] = onSearch;
-    $[13] = placeholder;
-    $[14] = t;
-    $[15] = t3;
-    $[16] = value;
-    $[17] = t4;
+    $[5] = ariaDescribedBy;
+    $[6] = ariaLabel;
+    $[7] = autoComplete;
+    $[8] = disabled;
+    $[9] = handleKeyDown;
+    $[10] = id;
+    $[11] = onChange;
+    $[12] = onClear;
+    $[13] = onSearch;
+    $[14] = placeholder;
+    $[15] = t;
+    $[16] = t3;
+    $[17] = value;
+    $[18] = t4;
   } else {
-    t4 = $[17];
+    t4 = $[18];
   }
   return t4;
 };

package/dist/elements/Search/SearchInput/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useCallback","SearchIcon","XIcon","useTranslation","Button","baseClass","SearchInput","t0","$","id","ariaLabel","autoComplete","className","disabled","onChange","onClear","onSearch","placeholder","value","t","t1","e","key","nativeEvent","isComposing","length","handleKeyDown","t2","filter","Boolean","t3","join","t4","t5","e_0","target","_jsxs","children","_jsx","onKeyDown","undefined","type","buttonStyle","icon","size","round"],"sources":["../../../../src/elements/Search/SearchInput/index.tsx"],"sourcesContent":["'use client'\n\nimport type { BrowserAutoComplete } from 'payload'\n\nimport React, { useCallback } from 'react'\n\nimport { SearchIcon } from '../../../icons/Search/index.js'\nimport { XIcon } from '../../../icons/X/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport './index.css'\n\nconst baseClass = 'search-input'\n\ntype SearchInputProps = {\n  'aria-label'?: string\n  autoComplete?: BrowserAutoComplete\n  className?: string\n  disabled?: boolean\n  id?: string\n  onChange: (value: string) => void\n  onClear?: () => void\n  onSearch?: (value: string) => void\n  placeholder?: string\n  value: string\n}\n\nexport const SearchInput: React.FC<SearchInputProps> = ({\n  id,\n  'aria-label': ariaLabel,\n  autoComplete,\n  className,\n  disabled,\n  onChange,\n  onClear,\n  onSearch,\n  placeholder,\n  value,\n}) => {\n  const { t } = useTranslation()\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Enter' && !e.nativeEvent.isComposing && value.length > 0) {\n        onSearch(value)\n      }\n    },\n    [value, onSearch],\n  )\n\n  return (\n    <div className={[baseClass, className].filter(Boolean).join(' ')}>\n      <SearchIcon />\n      <input\n        aria-label={ariaLabel ?? placeholder}\n        autoComplete={autoComplete}\n        className={`${baseClass}__input`}\n        disabled={disabled}\n        id={id}\n        onChange={(e) => onChange(e.target.value)}\n        onKeyDown={onSearch ? handleKeyDown : undefined}\n        placeholder={placeholder}\n        type=\"text\"\n        value={value}\n      />\n      {onClear && value.length > 0 && (\n        <Button\n          aria-label={t('general:clear')}\n          buttonStyle=\"ghost\"\n          className={`${baseClass}__clear`}\n          icon={<XIcon size={16} />}\n          margin={false}\n          onClick={onClear}\n          round\n          size=\"medium\"\n        />\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useCallback","SearchIcon","XIcon","useTranslation","Button","baseClass","SearchInput","t0","$","id","ariaDescribedBy","ariaLabel","autoComplete","className","disabled","onChange","onClear","onSearch","placeholder","value","t","t1","e","key","nativeEvent","isComposing","length","handleKeyDown","t2","filter","Boolean","t3","join","t4","t5","e_0","target","_jsxs","children","_jsx","onKeyDown","undefined","type","buttonStyle","icon","size","round"],"sources":["../../../../src/elements/Search/SearchInput/index.tsx"],"sourcesContent":["'use client'\n\nimport type { BrowserAutoComplete } from 'payload'\n\nimport React, { useCallback } from 'react'\n\nimport { SearchIcon } from '../../../icons/Search/index.js'\nimport { XIcon } from '../../../icons/X/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport './index.css'\n\nconst baseClass = 'search-input'\n\ntype SearchInputProps = {\n  'aria-describedby'?: string\n  'aria-label'?: string\n  autoComplete?: BrowserAutoComplete\n  className?: string\n  disabled?: boolean\n  id?: string\n  onChange: (value: string) => void\n  onClear?: () => void\n  onSearch?: (value: string) => void\n  placeholder?: string\n  value: string\n}\n\nexport const SearchInput: React.FC<SearchInputProps> = ({\n  id,\n  'aria-describedby': ariaDescribedBy,\n  'aria-label': ariaLabel,\n  autoComplete,\n  className,\n  disabled,\n  onChange,\n  onClear,\n  onSearch,\n  placeholder,\n  value,\n}) => {\n  const { t } = useTranslation()\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Enter' && !e.nativeEvent.isComposing && value.length > 0) {\n        onSearch(value)\n      }\n    },\n    [value, onSearch],\n  )\n\n  return (\n    <div className={[baseClass, className].filter(Boolean).join(' ')}>\n      <SearchIcon />\n      <input\n        aria-describedby={ariaDescribedBy}\n        aria-label={ariaLabel ?? placeholder}\n        autoComplete={autoComplete}\n        className={`${baseClass}__input`}\n        disabled={disabled}\n        id={id}\n        onChange={(e) => onChange(e.target.value)}\n        onKeyDown={onSearch ? handleKeyDown : undefined}\n        placeholder={placeholder}\n        type=\"text\"\n        value={value}\n      />\n      {onClear && value.length > 0 && (\n        <Button\n          aria-label={t('general:clear')}\n          buttonStyle=\"ghost\"\n          className={`${baseClass}__clear`}\n          icon={<XIcon size={16} />}\n          margin={false}\n          onClick={onClear}\n          round\n          size=\"medium\"\n        />\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/SegmentedControl/index.css

@@ -0,0 +1,9 @@
+@layer payload-default {
+  .segmented-control { display: flex; margin: 0; border: none; padding: var(--spacer-0); min-width: 0; line-height: 0; }
+  .segmented-control__options { display: inline-flex; width: 100%; padding: var(--spacer-0); border-radius: var(--radius-medium); background-color: var(--color-bg-secondary); }
+  .segmented-control__option { position: relative; display: inline-block; flex: 1; }
+  .segmented-control__input { position: absolute; inset: var(--spacer-0); width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
+  .segmented-control__icon { display: flex; align-items: center; justify-content: center; width: var(--spacer-4); height: var(--spacer-4); padding: var(--spacer-0); border-radius: var(--radius-medium); background-color: transparent; color: var(--color-text-secondary); }
+  .segmented-control__input:checked + .segmented-control__icon { background-color: var(--color-bg); box-shadow: inset 0 0 0 var(--stroke-width-small) var(--color-border); color: var(--color-text); }
+  .segmented-control__input:focus-visible + .segmented-control__icon { outline: var(--stroke-width-small) solid var(--color-border-selected); outline-offset: -1px; box-shadow: none; }
+}

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import './index.css';
+export type SegmentedControlRootProps = {
+    readonly children: React.ReactNode;
+    readonly className?: string;
+    readonly legend: string;
+    readonly onChange: (value: string) => void;
+    readonly value: string;
+};
+export type SegmentedControlOptionProps = {
+    readonly 'aria-label': string;
+    readonly icon: React.ReactNode;
+    readonly tooltip?: string;
+    readonly value: string;
+};
+export declare const SegmentedControl: {
+    Option: React.FC<SegmentedControlOptionProps>;
+    Root: React.FC<SegmentedControlRootProps>;
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/SegmentedControl/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoC,MAAM,OAAO,CAAA;AAGxD,OAAO,aAAa,CAAA;AAMpB,MAAM,MAAM,yBAAyB,GAAG;IACtC,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;CACvB,CAAA;AAwBD,MAAM,MAAM,2BAA2B,GAAG;IACxC,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAA;IAC7B,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;CACvB,CAAA;AA8CD,eAAO,MAAM,gBAAgB;;;CAAmB,CAAA"}