@servicetitan/anvil2 1.49.5 → 1.49.6

package/dist/SearchField-D6bICv4b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchField-D6bICv4b.js","sources":["../../hammer-icon/mdi/round/search.svg","../src/components/SearchField/SearchField.tsx"],"sourcesContent":["import * as React from \"react\";\nconst SvgSearch = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: \"1em\", height: \"1em\", viewBox: \"0 0 24 24\", ...props }, /* @__PURE__ */ React.createElement(\"path\", { d: \"M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" }));\nexport default SvgSearch;\n","import {\n  forwardRef,\n  ComponentPropsWithoutRef,\n  useId,\n  useRef,\n  ChangeEvent,\n  KeyboardEvent,\n  useState,\n  useEffect,\n} from \"react\";\nimport cx from \"classnames\";\n\nimport textfieldStyles from \"../TextField/TextField.module.scss\";\nimport Close from \"@servicetitan/hammer-icon/mdi/round/close.svg\";\nimport Search from \"@servicetitan/hammer-icon/mdi/round/search.svg\";\nimport styles from \"./SearchField.module.scss\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\nimport { SrOnly } from \"../SrOnly\";\nimport { Icon } from \"../Icon\";\nimport { useTrackingId, useMergeRefs } from \"../../hooks\";\nimport { DataTrackingId, LayoutUtilProps, Size } from \"../../types\";\n\n/**\n * Props for the SearchField component\n * @extends Omit<ComponentPropsWithoutRef<\"input\">, \"size\" | \"prefix\" | \"required\" | \"children\">\n * @extends LayoutUtilProps\n */\nexport type SearchFieldProps = Omit<\n  ComponentPropsWithoutRef<\"input\">,\n  \"size\" | \"prefix\" | \"required\" | \"children\"\n> &\n  LayoutUtilProps & {\n    /**\n     * Size of the search field\n     * @default \"medium\"\n     */\n    size?: Extract<Size, \"small\" | \"medium\" | \"large\">;\n    /**\n     * Whether the search field is disabled\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Callback when the clear button is clicked or activated via keyboard (Enter/Space)\n     */\n    onClear?: () => void;\n  } & DataTrackingId;\n\n/**\n * SearchField component for text input with search functionality.\n *\n * Features:\n * - Search icon prefix for visual clarity\n * - Clear button that appears when input has value\n * - Arrow key navigation between input and clear button (Right arrow to clear button, Left arrow back to input)\n * - Clear button activated with Enter/Space keys\n * - Focus returns to input after clearing\n * - Multiple size variants (small, medium, large)\n * - Controlled and uncontrolled modes\n * - Disabled and read-only states\n * - Accessibility support with proper ARIA attributes\n * - Layout utility props for positioning and spacing\n * - Automatic value detection for clear button visibility\n * - Search-specific input type and autocomplete settings\n * - Screen reader support with placeholder announcements\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <SearchField\n *   placeholder=\"Search users...\"\n *   onChange={(e) => setSearchTerm(e.target.value)}\n *   onClear={() => setSearchTerm(\"\")}\n * />\n *\n * @example\n * <SearchField\n *   size=\"large\"\n *   value={searchValue}\n *   onChange={(e) => setSearchValue(e.target.value)}\n *   disabled={isLoading}\n * />\n */\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(\n  function SearchField(props, ref) {\n    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n    const {\n      className,\n      size,\n      onChange,\n      onClear,\n      id: idProp,\n      disabled,\n      style,\n      value,\n      placeholder = \"Search...\",\n      autoComplete = \"off\",\n      ...rest\n    } = componentProps;\n\n    const [hasValue, setHasValue] = useState(\n      rest.defaultValue || value ? true : false,\n    );\n    const placeholderUid = useId();\n\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const styleCombined = { ...style, ...layoutStyles };\n\n    const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {\n      if (e.target.value) {\n        setHasValue(true);\n      } else {\n        setHasValue(false);\n      }\n      onChange?.(e);\n    };\n\n    useEffect(() => {\n      if (typeof value === \"undefined\") return;\n      if (value === \"\" || !value) {\n        setHasValue(false);\n      } else {\n        setHasValue(true);\n      }\n    }, [value]);\n\n    const handleClear = () => {\n      if (!inputRef.current) return;\n      if (disabled || rest.readOnly) return;\n      onClear?.();\n      if (value) {\n        inputRef.current.focus();\n        return;\n      }\n      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n        window.HTMLInputElement.prototype,\n        \"value\",\n      )?.set;\n      nativeInputValueSetter?.call(inputRef.current, \"\");\n      inputRef.current.dispatchEvent(new Event(\"input\", { bubbles: true }));\n      setHasValue(false);\n      inputRef.current.focus();\n    };\n\n    const handleClearKeyDown = (e: KeyboardEvent<HTMLSpanElement>) => {\n      if (e.code === \"Enter\" || e.code === \"Space\") {\n        e.preventDefault();\n        handleClear();\n      } else if (e.code === \"ArrowLeft\") {\n        e.preventDefault();\n        inputRef.current?.focus();\n      }\n    };\n\n    const handleInputKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n      if (e.code === \"ArrowRight\" && hasValue) {\n        const input = e.currentTarget;\n        // Only move focus if cursor is at the end\n        if (input.selectionStart === input.value.length) {\n          e.preventDefault();\n          const clearButton = input.parentElement?.querySelector(\n            '[role=\"button\"]',\n          ) as HTMLElement;\n          clearButton?.focus();\n        }\n      }\n    };\n\n    const data = {\n      value: props.value,\n      defaultValue: props.defaultValue,\n      disabled: props.disabled,\n      readOnly: props.readOnly,\n      size: props.size,\n    };\n\n    const trackingId = useTrackingId({\n      name: \"SearchField\",\n      data,\n      hasOverride: !!props[\"data-tracking-id\"],\n    });\n\n    return (\n      <div\n        className={cx(\n          textfieldStyles[\"textfield\"],\n          styles[\"searchfield\"],\n          className,\n        )}\n        data-anv=\"SearchField\"\n        style={styleCombined}\n      >\n        <div\n          className={cx(\n            textfieldStyles[\"input-wrapper\"],\n            styles[\"input-wrapper\"],\n            {\n              [textfieldStyles[\"small\"]]: size === \"small\",\n              [textfieldStyles[\"large\"]]: size === \"large\",\n            },\n          )}\n          role=\"presentation\"\n          onClick={() => inputRef.current?.focus()}\n        >\n          <div aria-hidden className={textfieldStyles[\"prefix\"]}>\n            <Icon aria-label=\"search\" svg={Search} />\n          </div>\n          <input\n            className={cx(textfieldStyles[\"input\"], styles[\"input\"])}\n            ref={useMergeRefs([ref, inputRef])}\n            onChange={handleOnChange}\n            onKeyDown={handleInputKeyDown}\n            placeholder={placeholder}\n            value={value}\n            type=\"search\"\n            autoComplete={autoComplete}\n            disabled={disabled}\n            aria-labelledby={placeholderUid}\n            data-tracking-id={trackingId}\n            {...rest}\n          />\n          <Icon\n            aria-label=\"Clear search\"\n            svg={Close}\n            role=\"button\"\n            onClick={handleClear}\n            onKeyDown={handleClearKeyDown}\n            tabIndex={-1}\n            className={styles[\"clear\"]}\n            aria-disabled={disabled}\n            style={{\n              visibility: hasValue ? \"visible\" : \"hidden\",\n            }}\n          />\n        </div>\n        <SrOnly id={placeholderUid}>{placeholder}</SrOnly>\n      </div>\n    );\n  },\n);\n"],"names":["SearchField","textfieldStyles","Search","Close"],"mappings":"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"}

package/dist/SearchField.css

@@ -1,29 +1,34 @@
 @layer starter, reset, base, state, application;
 @layer reset {
-  ._searchfield_1s8tg_2 input[type=search]::-webkit-search-cancel-button {
+  ._searchfield_44tin_2 input[type=search]::-webkit-search-cancel-button {
     display: none;
   }
 }
 @layer base {
-  ._searchfield_1s8tg_2 ._input-wrapper_1s8tg_7 {
-    padding-inline-end: 0.75rem;
+  ._searchfield_44tin_2 ._input-wrapper_44tin_7 {
+    padding-inline-end: 0.5rem;
   }
-  ._searchfield_1s8tg_2 ._input-wrapper_1s8tg_7:has(._clear_1s8tg_10:active) {
+  ._searchfield_44tin_2 ._input-wrapper_44tin_7:has(._clear_44tin_10:active) {
     outline: 0.125rem solid var(--focus-ring-color, #0265DC);
     outline-offset: 0.125rem;
   }
-  ._searchfield_1s8tg_2 ._input-wrapper_1s8tg_7 ._input_1s8tg_7::-moz-placeholder {
+  ._searchfield_44tin_2 ._input-wrapper_44tin_7 ._input_44tin_7 {
+    padding-inline-end: 0.5rem;
+  }
+  ._searchfield_44tin_2 ._input-wrapper_44tin_7 ._input_44tin_7::-moz-placeholder {
     color: var(--foreground-color-subdued, #737475);
   }
-  ._searchfield_1s8tg_2 ._input-wrapper_1s8tg_7 ._input_1s8tg_7::placeholder {
+  ._searchfield_44tin_2 ._input-wrapper_44tin_7 ._input_44tin_7::placeholder {
     color: var(--foreground-color-subdued, #737475);
   }
-  ._searchfield_1s8tg_2 ._clear_1s8tg_10 {
+  ._searchfield_44tin_2 ._clear_44tin_10 {
+    border-radius: 0.375rem;
+    padding: 0.25rem;
     cursor: pointer;
   }
 }
 @layer state {
-  ._searchfield_1s8tg_2 ._input-wrapper_1s8tg_7:has(._clear_1s8tg_10:active) {
+  ._searchfield_44tin_2 ._input-wrapper_44tin_7:has(._clear_44tin_10:active) {
     outline: 0.125rem solid var(--focus-ring-color, #0265DC);
     outline-offset: 0.125rem;
   }

package/dist/SearchField.js

@@ -1,2 +1,2 @@
-export { S as SearchField } from './SearchField-DrgNbG3I.js';
+export { S as SearchField } from './SearchField-D6bICv4b.js';
 //# sourceMappingURL=SearchField.js.map

package/dist/{SelectCard-DViLgRGh.js → SelectCard-DDN7qqHv.js}

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useContext, createContext, useState, useId, forwardRef, useLayoutEffect } from 'react';
 import { c as cx } from './index-tZvMCc77.js';
-import { C as CheckboxGroup, a as Checkbox } from './Checkbox-DwuDx-t4.js';
-import { R as RadioGroup, a as Radio } from './RadioGroup-m46C69uO.js';
+import { C as CheckboxGroup, a as Checkbox } from './Checkbox-nE-_tWmc.js';
+import { R as RadioGroup, a as Radio } from './RadioGroup-BAjpkCjp.js';
 import { C as Card } from './Card-Ch3sMUo5.js';
 import { u as useOptionallyControlledState } from './useOptionallyControlledState-DbDuos5L.js';
 
@@ -222,4 +222,4 @@ const SelectCard = Object.assign(SelectCardElement, {
 });
 
 export { SelectCard as S, SelectCardElement as a, SelectCardGroup as b };
-//# sourceMappingURL=SelectCard-DViLgRGh.js.map
+//# sourceMappingURL=SelectCard-DDN7qqHv.js.map

package/dist/{SelectCard-DViLgRGh.js.map → SelectCard-DDN7qqHv.js.map}

@@ -1 +1 @@
-{"version":3,"file":"SelectCard-DViLgRGh.js","sources":["../src/components/SelectCard/internal/SelectCardContext.tsx","../src/components/SelectCard/internal/SelectCardProvider.tsx","../src/components/SelectCard/SelectCardGroup.tsx","../src/components/SelectCard/SelectCard.tsx"],"sourcesContent":["import { ChangeEvent, createContext, useContext } from \"react\";\n\n/**\n * Interface for the select card state\n */\nexport interface ISelectCardState {\n  /**\n   * When `true`, adds the item to the selected state holder.\n   */\n  checked: boolean;\n\n  /**\n   * Gives an explicit id to each item in the set.\n   */\n  id?: string | number;\n}\n\n/**\n * Interface for the select card onChange options\n */\nexport interface ISelectCardOnChangeOptions {\n  /**\n   * When `true`, doesn't fire the user's `onChange`\n   */\n  internal?: boolean;\n}\n\n/**\n * Interface for the select card context\n */\nexport interface ISelectCardContext {\n  /**\n   * Callback function that is triggered when the selection state changes.\n   *\n   * @callback OnChangeCallback\n   * @param {ChangeEvent<HTMLInputElement>} [e] - The native HTML input change event.\n   * @param {ISelectCardState} [state] - The current state of the select card component after the change.\n   * @returns {void}\n   */\n  onChange: (\n    e?: ChangeEvent<HTMLInputElement>,\n    state?: ISelectCardState,\n    options?: ISelectCardOnChangeOptions,\n  ) => void;\n\n  /**\n   * Sets how many cards the user can select, either 'single' (radio buttons) or 'multiple' (checkboxes)\n   */\n  selectionMode: \"single\" | \"multiple\";\n\n  /**\n   * Used internally to create a UUID for the HTML `name` property on radios.\n   */\n  radioName: string;\n\n  /**\n   * Creates a set of ids that are selected.\n   */\n  selection: Set<string | number>;\n}\n\nexport const SelectCardContext = createContext<ISelectCardContext | null>(null);\n\n/**\n * Custom hook for accessing the SelectCard context.\n * @returns The SelectCard context or null if not within a SelectCardProvider\n */\nexport const useSelectCardContext = () => useContext(SelectCardContext);\n","import { ChangeEvent, ReactNode, useId, useState } from \"react\";\nimport {\n  ISelectCardContext,\n  ISelectCardOnChangeOptions,\n  ISelectCardState,\n  SelectCardContext,\n} from \"./SelectCardContext\";\n\n/**\n * Props for the SelectCardProvider component\n * @extends Omit<ISelectCardContext, \"radioName\" | \"selection\">\n */\ninterface ISelectCardProviderProps\n  extends Omit<ISelectCardContext, \"radioName\" | \"selection\"> {\n  children: ReactNode;\n}\n\n/**\n * SelectCardProvider component for managing selection state across SelectCard components.\n *\n * Features:\n * - Provides context for SelectCard components to share selection state\n * - Manages selection mode (single vs multiple)\n * - Handles selection state updates and callbacks\n * - Generates unique radio button names for single selection mode\n * - Maintains a set of selected card IDs\n * - Integrates with SelectCardGroup for automatic context provision\n *\n * @example\n * <SelectCardProvider\n *   selectionMode=\"multiple\"\n *   onChange={(e, state) => console.log('Selection changed:', state)}\n * >\n *   <SelectCard id=\"1\" onChange={() => {}}>Option 1</SelectCard>\n *   <SelectCard id=\"2\" onChange={() => {}}>Option 2</SelectCard>\n * </SelectCardProvider>\n */\nexport const SelectCardProvider = ({\n  children,\n  onChange,\n  selectionMode,\n}: ISelectCardProviderProps) => {\n  const [selection, setSelection] = useState<Set<string | number>>(new Set());\n\n  const radioName = useId();\n\n  const handleChange = (\n    e?: ChangeEvent<HTMLInputElement>,\n    state?: ISelectCardState,\n    options?: ISelectCardOnChangeOptions,\n  ) => {\n    if (!state || !state.id) {\n      if (!options?.internal) {\n        onChange(e, state);\n      }\n\n      return;\n    }\n\n    // Set internal selection\n    if (selectionMode === \"single\") {\n      if (state.checked) {\n        setSelection(new Set([state.id]));\n      } else {\n        setSelection(new Set());\n      }\n    } else {\n      if (state.checked) {\n        setSelection(selection.add(state.id));\n      } else {\n        selection.delete(state.id);\n        setSelection(selection);\n      }\n    }\n\n    if (!options?.internal) {\n      onChange(e, state);\n    }\n  };\n\n  const context = {\n    selectionMode,\n    onChange: handleChange,\n    radioName,\n    selection,\n  };\n\n  return (\n    <SelectCardContext.Provider value={context}>\n      {children}\n    </SelectCardContext.Provider>\n  );\n};\n","import { forwardRef, ReactNode } from \"react\";\nimport { CheckboxGroup, CheckboxGroupProps } from \"../Checkbox/CheckboxGroup\";\nimport { RadioGroup } from \"../Radio\";\nimport { SelectCardProvider } from \"./internal/SelectCardProvider\";\nimport { ISelectCardContext } from \"./internal/SelectCardContext\";\n\n/**\n * Props for the SelectCardGroup component\n * @extends Omit<ISelectCardContext, \"radioName\" | \"selection\">\n */\nexport interface SelectCardGroupProps\n  extends Omit<ISelectCardContext, \"radioName\" | \"selection\"> {\n  /**\n   * Associates the legend with content below.\n   */\n  ariaLabelledBy?: string;\n\n  children?: ReactNode;\n\n  /**\n   * Sets the legend on the group.\n   */\n  legend: CheckboxGroupProps[\"legend\"];\n\n  /**\n   * When `true`, sets \"required\" text in label.\n   * @accessibility This does not enforce error when nothing is selected.\n   * @default false\n   */\n  required?: boolean;\n}\n\n/**\n * SelectCardGroup component for managing groups of selectable cards.\n *\n * Features:\n * - Manages selection state for multiple SelectCard components\n * - Supports both single and multiple selection modes\n * - Provides proper accessibility with legends and ARIA labels\n * - Handles required field validation\n * - Automatic radio button grouping for single selection\n * - Context provider for child SelectCard components\n * - Integrates with CheckboxGroup and RadioGroup for proper form semantics\n *\n * @example\n * <SelectCardGroup\n *   legend=\"Choose your plan\"\n *   selectionMode=\"single\"\n *   onChange={(e, state) => console.log('Selection changed:', state)}\n * >\n *   <SelectCard id=\"basic\" onChange={() => {}}>\n *     <Text variant=\"headline\" size=\"small\" el=\"h3\">Basic Plan</Text>\n *   </SelectCard>\n *   <SelectCard id=\"premium\" onChange={() => {}}>\n *     <Text variant=\"headline\" size=\"small\" el=\"h3\">Premium Plan</Text>\n *   </SelectCard>\n * </SelectCardGroup>\n */\nexport const SelectCardGroup = forwardRef<\n  HTMLInputElement,\n  SelectCardGroupProps\n>((props, _ref) => {\n  const {\n    ariaLabelledBy,\n    children,\n    legend,\n    onChange,\n    required = false,\n    selectionMode,\n    ...rest\n  } = props;\n\n  return (\n    <SelectCardProvider onChange={onChange} selectionMode={selectionMode}>\n      {selectionMode === \"multiple\" && (\n        <CheckboxGroup\n          aria-labelledby={ariaLabelledBy}\n          legend={legend}\n          required={required}\n          {...rest}\n        >\n          {children}\n        </CheckboxGroup>\n      )}\n      {selectionMode === \"single\" && (\n        <RadioGroup\n          aria-labelledby={ariaLabelledBy}\n          legend={legend}\n          required={required}\n          {...rest}\n        >\n          {children}\n        </RadioGroup>\n      )}\n    </SelectCardProvider>\n  );\n});\n\nSelectCardGroup.displayName = \"SelectCardGroup\";\n","import { useLayoutEffect, useState, forwardRef, type ChangeEvent } from \"react\";\nimport cx from \"classnames\";\n\nimport { SelectCardGroup } from \"./SelectCardGroup\";\nimport { Card, CardProps } from \"../Card\";\nimport { Radio, RadioProps } from \"../Radio/internal/Radio\";\nimport { Checkbox, CheckboxProps } from \"../Checkbox/internal/Checkbox\";\nimport { useOptionallyControlledState } from \"../../internal/hooks\";\n\nimport styles from \"./SelectCard.module.scss\";\nimport { useSelectCardContext } from \"./internal/SelectCardContext\";\n\n/**\n * Props for the SelectCard component\n * @extends Omit<CardProps, \"onChange\" | \"id\">\n */\nexport interface SelectCardProps extends Omit<CardProps, \"onChange\" | \"id\"> {\n  /**\n   * Passes props to the underlying `<Checkbox />` component.\n   */\n  checkboxProps?: Omit<CheckboxProps, \"label\">;\n\n  /**\n   * Controlled state. When provided, the component becomes controlled.\n   */\n  checked?: boolean;\n\n  /**\n   * Uncontrolled state.\n   */\n  defaultChecked?: boolean;\n\n  /**\n   * When `true`, disables the card.\n   */\n  disabled?: boolean;\n\n  /**\n   * When `true`, sets error styling on the card.\n   */\n  errored?: boolean;\n\n  /**\n   * A unique identifier for the card, used to track the selection state.\n   */\n  id: string | number;\n\n  /**\n   * Function called on selection state change.\n   */\n  onChange: (value: boolean) => void;\n\n  /**\n   * Passes props to the underlying `<Radio />` component.\n   */\n  radioProps?: Omit<RadioProps, \"label\">;\n\n  /**\n   * Removes the drop shadow effect on the card.\n   */\n  removeDropShadow?: boolean;\n}\n\nexport const SelectCardElement = forwardRef<HTMLInputElement, SelectCardProps>(\n  (props, ref) => {\n    const {\n      checkboxProps,\n      children,\n      checked: checkedProp,\n      className,\n      defaultChecked: defaultCheckedProp,\n      disabled,\n      errored,\n      radioProps,\n      onChange,\n      removeDropShadow,\n      id,\n      ...rest\n    } = props;\n\n    const [checked, setChecked] = useOptionallyControlledState<boolean>({\n      controlledValue: checkedProp,\n      defaultValue: defaultCheckedProp || false,\n      onChange,\n    });\n\n    const context = useSelectCardContext();\n\n    // we need to re-render after setting the initial selection state on context\n    const [_, setForceRenderCount] = useState(0);\n    useLayoutEffect(() => {\n      if (defaultCheckedProp) {\n        context?.onChange(\n          undefined,\n          {\n            id,\n            checked: defaultCheckedProp,\n          },\n          { internal: true },\n        );\n\n        setForceRenderCount((prev) => prev + 1);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    const handleChange = (event?: ChangeEvent<HTMLInputElement>) => {\n      const newChecked = event ? event.target.checked : false;\n      setChecked(newChecked);\n      context?.onChange(event, {\n        id,\n        checked: newChecked,\n      });\n    };\n\n    // A selection in the group context supersedes the normal checked state of the card\n    const isChecked = context ? context.selection.has(id) : checked;\n\n    return (\n      <>\n        {(!context || context?.selectionMode === \"multiple\") && (\n          <Checkbox\n            {...checkboxProps}\n            defaultChecked={defaultCheckedProp}\n            onChange={handleChange}\n            disabled={disabled}\n            ref={ref}\n            label={\n              <Card\n                {...rest}\n                className={cx(styles[\"select-card\"], className, {\n                  [styles[\"select-card--remove-drop-shadow\"]]: removeDropShadow,\n                  [styles[\"select-card--selected\"]]: isChecked && !errored,\n                  [styles[\"select-card--errored\"]]: errored,\n                  [styles[\"select-card--disabled\"]]: disabled,\n                })}\n              >\n                {children}\n              </Card>\n            }\n            hideCheckbox\n          />\n        )}\n        {context?.selectionMode === \"single\" && (\n          <Radio\n            {...radioProps}\n            defaultChecked={defaultCheckedProp}\n            onChange={handleChange}\n            disabled={disabled}\n            ref={ref}\n            name={context.radioName}\n            label={\n              <Card\n                {...rest}\n                className={cx(styles[\"select-card\"], className, {\n                  [styles[\"select-card--remove-drop-shadow\"]]: removeDropShadow,\n                  [styles[\"select-card--selected\"]]: isChecked && !errored,\n                  [styles[\"select-card--errored\"]]: errored,\n                  [styles[\"select-card--disabled\"]]: disabled,\n                })}\n              >\n                {children}\n              </Card>\n            }\n            hideRadio\n          />\n        )}\n      </>\n    );\n  },\n);\n\nSelectCardElement.displayName = \"SelectCard\";\n\n/**\n * SelectCard component for creating interactive card-based selection interfaces.\n *\n * Features:\n * - Supports both single selection (radio) and multiple selection (checkbox) modes\n * - Automatic context detection for selection behavior\n * - Visual feedback for selected, disabled, and error states\n * - Accessible with proper ARIA roles and keyboard navigation\n * - Customizable styling through Card component props\n * - Hover and focus states with smooth transitions\n * - Integration with SelectCardGroup for grouped selection\n *\n * @example\n * <SelectCard\n *   id=\"option-1\"\n *   onChange={(checked) => console.log('Selected:', checked)}\n * >\n *   <Text variant=\"headline\" size=\"small\">Option 1</Text>\n *   <Text>Description of option 1</Text>\n * </SelectCard>\n */\nexport const SelectCard = Object.assign(SelectCardElement, {\n  /**\n   * SelectCardGroup component for managing groups of selectable cards.\n   *\n   * Features:\n   * - Manages selection state for multiple SelectCard components\n   * - Supports both single and multiple selection modes\n   * - Provides proper accessibility with legends and ARIA labels\n   * - Handles required field validation\n   * - Automatic radio button grouping for single selection\n   * - Context provider for child SelectCard components\n   *\n   * @example\n   * <SelectCard.Group\n   *   legend=\"Choose your plan\"\n   *   selectionMode=\"single\"\n   *   onChange={(e, state) => console.log('Selection changed:', state)}\n   * >\n   *   <SelectCard id=\"basic\" onChange={() => {}}>\n   *     <Text variant=\"headline\" size=\"small\">Basic Plan</Text>\n   *   </SelectCard>\n   *   <SelectCard id=\"premium\" onChange={() => {}}>\n   *     <Text variant=\"headline\" size=\"small\">Premium Plan</Text>\n   *   </SelectCard>\n   * </SelectCard.Group>\n   */\n  Group: SelectCardGroup,\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SelectCard-DDN7qqHv.js","sources":["../src/components/SelectCard/internal/SelectCardContext.tsx","../src/components/SelectCard/internal/SelectCardProvider.tsx","../src/components/SelectCard/SelectCardGroup.tsx","../src/components/SelectCard/SelectCard.tsx"],"sourcesContent":["import { ChangeEvent, createContext, useContext } from \"react\";\n\n/**\n * Interface for the select card state\n */\nexport interface ISelectCardState {\n  /**\n   * When `true`, adds the item to the selected state holder.\n   */\n  checked: boolean;\n\n  /**\n   * Gives an explicit id to each item in the set.\n   */\n  id?: string | number;\n}\n\n/**\n * Interface for the select card onChange options\n */\nexport interface ISelectCardOnChangeOptions {\n  /**\n   * When `true`, doesn't fire the user's `onChange`\n   */\n  internal?: boolean;\n}\n\n/**\n * Interface for the select card context\n */\nexport interface ISelectCardContext {\n  /**\n   * Callback function that is triggered when the selection state changes.\n   *\n   * @callback OnChangeCallback\n   * @param {ChangeEvent<HTMLInputElement>} [e] - The native HTML input change event.\n   * @param {ISelectCardState} [state] - The current state of the select card component after the change.\n   * @returns {void}\n   */\n  onChange: (\n    e?: ChangeEvent<HTMLInputElement>,\n    state?: ISelectCardState,\n    options?: ISelectCardOnChangeOptions,\n  ) => void;\n\n  /**\n   * Sets how many cards the user can select, either 'single' (radio buttons) or 'multiple' (checkboxes)\n   */\n  selectionMode: \"single\" | \"multiple\";\n\n  /**\n   * Used internally to create a UUID for the HTML `name` property on radios.\n   */\n  radioName: string;\n\n  /**\n   * Creates a set of ids that are selected.\n   */\n  selection: Set<string | number>;\n}\n\nexport const SelectCardContext = createContext<ISelectCardContext | null>(null);\n\n/**\n * Custom hook for accessing the SelectCard context.\n * @returns The SelectCard context or null if not within a SelectCardProvider\n */\nexport const useSelectCardContext = () => useContext(SelectCardContext);\n","import { ChangeEvent, ReactNode, useId, useState } from \"react\";\nimport {\n  ISelectCardContext,\n  ISelectCardOnChangeOptions,\n  ISelectCardState,\n  SelectCardContext,\n} from \"./SelectCardContext\";\n\n/**\n * Props for the SelectCardProvider component\n * @extends Omit<ISelectCardContext, \"radioName\" | \"selection\">\n */\ninterface ISelectCardProviderProps\n  extends Omit<ISelectCardContext, \"radioName\" | \"selection\"> {\n  children: ReactNode;\n}\n\n/**\n * SelectCardProvider component for managing selection state across SelectCard components.\n *\n * Features:\n * - Provides context for SelectCard components to share selection state\n * - Manages selection mode (single vs multiple)\n * - Handles selection state updates and callbacks\n * - Generates unique radio button names for single selection mode\n * - Maintains a set of selected card IDs\n * - Integrates with SelectCardGroup for automatic context provision\n *\n * @example\n * <SelectCardProvider\n *   selectionMode=\"multiple\"\n *   onChange={(e, state) => console.log('Selection changed:', state)}\n * >\n *   <SelectCard id=\"1\" onChange={() => {}}>Option 1</SelectCard>\n *   <SelectCard id=\"2\" onChange={() => {}}>Option 2</SelectCard>\n * </SelectCardProvider>\n */\nexport const SelectCardProvider = ({\n  children,\n  onChange,\n  selectionMode,\n}: ISelectCardProviderProps) => {\n  const [selection, setSelection] = useState<Set<string | number>>(new Set());\n\n  const radioName = useId();\n\n  const handleChange = (\n    e?: ChangeEvent<HTMLInputElement>,\n    state?: ISelectCardState,\n    options?: ISelectCardOnChangeOptions,\n  ) => {\n    if (!state || !state.id) {\n      if (!options?.internal) {\n        onChange(e, state);\n      }\n\n      return;\n    }\n\n    // Set internal selection\n    if (selectionMode === \"single\") {\n      if (state.checked) {\n        setSelection(new Set([state.id]));\n      } else {\n        setSelection(new Set());\n      }\n    } else {\n      if (state.checked) {\n        setSelection(selection.add(state.id));\n      } else {\n        selection.delete(state.id);\n        setSelection(selection);\n      }\n    }\n\n    if (!options?.internal) {\n      onChange(e, state);\n    }\n  };\n\n  const context = {\n    selectionMode,\n    onChange: handleChange,\n    radioName,\n    selection,\n  };\n\n  return (\n    <SelectCardContext.Provider value={context}>\n      {children}\n    </SelectCardContext.Provider>\n  );\n};\n","import { forwardRef, ReactNode } from \"react\";\nimport { CheckboxGroup, CheckboxGroupProps } from \"../Checkbox/CheckboxGroup\";\nimport { RadioGroup } from \"../Radio\";\nimport { SelectCardProvider } from \"./internal/SelectCardProvider\";\nimport { ISelectCardContext } from \"./internal/SelectCardContext\";\n\n/**\n * Props for the SelectCardGroup component\n * @extends Omit<ISelectCardContext, \"radioName\" | \"selection\">\n */\nexport interface SelectCardGroupProps\n  extends Omit<ISelectCardContext, \"radioName\" | \"selection\"> {\n  /**\n   * Associates the legend with content below.\n   */\n  ariaLabelledBy?: string;\n\n  children?: ReactNode;\n\n  /**\n   * Sets the legend on the group.\n   */\n  legend: CheckboxGroupProps[\"legend\"];\n\n  /**\n   * When `true`, sets \"required\" text in label.\n   * @accessibility This does not enforce error when nothing is selected.\n   * @default false\n   */\n  required?: boolean;\n}\n\n/**\n * SelectCardGroup component for managing groups of selectable cards.\n *\n * Features:\n * - Manages selection state for multiple SelectCard components\n * - Supports both single and multiple selection modes\n * - Provides proper accessibility with legends and ARIA labels\n * - Handles required field validation\n * - Automatic radio button grouping for single selection\n * - Context provider for child SelectCard components\n * - Integrates with CheckboxGroup and RadioGroup for proper form semantics\n *\n * @example\n * <SelectCardGroup\n *   legend=\"Choose your plan\"\n *   selectionMode=\"single\"\n *   onChange={(e, state) => console.log('Selection changed:', state)}\n * >\n *   <SelectCard id=\"basic\" onChange={() => {}}>\n *     <Text variant=\"headline\" size=\"small\" el=\"h3\">Basic Plan</Text>\n *   </SelectCard>\n *   <SelectCard id=\"premium\" onChange={() => {}}>\n *     <Text variant=\"headline\" size=\"small\" el=\"h3\">Premium Plan</Text>\n *   </SelectCard>\n * </SelectCardGroup>\n */\nexport const SelectCardGroup = forwardRef<\n  HTMLInputElement,\n  SelectCardGroupProps\n>((props, _ref) => {\n  const {\n    ariaLabelledBy,\n    children,\n    legend,\n    onChange,\n    required = false,\n    selectionMode,\n    ...rest\n  } = props;\n\n  return (\n    <SelectCardProvider onChange={onChange} selectionMode={selectionMode}>\n      {selectionMode === \"multiple\" && (\n        <CheckboxGroup\n          aria-labelledby={ariaLabelledBy}\n          legend={legend}\n          required={required}\n          {...rest}\n        >\n          {children}\n        </CheckboxGroup>\n      )}\n      {selectionMode === \"single\" && (\n        <RadioGroup\n          aria-labelledby={ariaLabelledBy}\n          legend={legend}\n          required={required}\n          {...rest}\n        >\n          {children}\n        </RadioGroup>\n      )}\n    </SelectCardProvider>\n  );\n});\n\nSelectCardGroup.displayName = \"SelectCardGroup\";\n","import { useLayoutEffect, useState, forwardRef, type ChangeEvent } from \"react\";\nimport cx from \"classnames\";\n\nimport { SelectCardGroup } from \"./SelectCardGroup\";\nimport { Card, CardProps } from \"../Card\";\nimport { Radio, RadioProps } from \"../Radio/internal/Radio\";\nimport { Checkbox, CheckboxProps } from \"../Checkbox/internal/Checkbox\";\nimport { useOptionallyControlledState } from \"../../internal/hooks\";\n\nimport styles from \"./SelectCard.module.scss\";\nimport { useSelectCardContext } from \"./internal/SelectCardContext\";\n\n/**\n * Props for the SelectCard component\n * @extends Omit<CardProps, \"onChange\" | \"id\">\n */\nexport interface SelectCardProps extends Omit<CardProps, \"onChange\" | \"id\"> {\n  /**\n   * Passes props to the underlying `<Checkbox />` component.\n   */\n  checkboxProps?: Omit<CheckboxProps, \"label\">;\n\n  /**\n   * Controlled state. When provided, the component becomes controlled.\n   */\n  checked?: boolean;\n\n  /**\n   * Uncontrolled state.\n   */\n  defaultChecked?: boolean;\n\n  /**\n   * When `true`, disables the card.\n   */\n  disabled?: boolean;\n\n  /**\n   * When `true`, sets error styling on the card.\n   */\n  errored?: boolean;\n\n  /**\n   * A unique identifier for the card, used to track the selection state.\n   */\n  id: string | number;\n\n  /**\n   * Function called on selection state change.\n   */\n  onChange: (value: boolean) => void;\n\n  /**\n   * Passes props to the underlying `<Radio />` component.\n   */\n  radioProps?: Omit<RadioProps, \"label\">;\n\n  /**\n   * Removes the drop shadow effect on the card.\n   */\n  removeDropShadow?: boolean;\n}\n\nexport const SelectCardElement = forwardRef<HTMLInputElement, SelectCardProps>(\n  (props, ref) => {\n    const {\n      checkboxProps,\n      children,\n      checked: checkedProp,\n      className,\n      defaultChecked: defaultCheckedProp,\n      disabled,\n      errored,\n      radioProps,\n      onChange,\n      removeDropShadow,\n      id,\n      ...rest\n    } = props;\n\n    const [checked, setChecked] = useOptionallyControlledState<boolean>({\n      controlledValue: checkedProp,\n      defaultValue: defaultCheckedProp || false,\n      onChange,\n    });\n\n    const context = useSelectCardContext();\n\n    // we need to re-render after setting the initial selection state on context\n    const [_, setForceRenderCount] = useState(0);\n    useLayoutEffect(() => {\n      if (defaultCheckedProp) {\n        context?.onChange(\n          undefined,\n          {\n            id,\n            checked: defaultCheckedProp,\n          },\n          { internal: true },\n        );\n\n        setForceRenderCount((prev) => prev + 1);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    const handleChange = (event?: ChangeEvent<HTMLInputElement>) => {\n      const newChecked = event ? event.target.checked : false;\n      setChecked(newChecked);\n      context?.onChange(event, {\n        id,\n        checked: newChecked,\n      });\n    };\n\n    // A selection in the group context supersedes the normal checked state of the card\n    const isChecked = context ? context.selection.has(id) : checked;\n\n    return (\n      <>\n        {(!context || context?.selectionMode === \"multiple\") && (\n          <Checkbox\n            {...checkboxProps}\n            defaultChecked={defaultCheckedProp}\n            onChange={handleChange}\n            disabled={disabled}\n            ref={ref}\n            label={\n              <Card\n                {...rest}\n                className={cx(styles[\"select-card\"], className, {\n                  [styles[\"select-card--remove-drop-shadow\"]]: removeDropShadow,\n                  [styles[\"select-card--selected\"]]: isChecked && !errored,\n                  [styles[\"select-card--errored\"]]: errored,\n                  [styles[\"select-card--disabled\"]]: disabled,\n                })}\n              >\n                {children}\n              </Card>\n            }\n            hideCheckbox\n          />\n        )}\n        {context?.selectionMode === \"single\" && (\n          <Radio\n            {...radioProps}\n            defaultChecked={defaultCheckedProp}\n            onChange={handleChange}\n            disabled={disabled}\n            ref={ref}\n            name={context.radioName}\n            label={\n              <Card\n                {...rest}\n                className={cx(styles[\"select-card\"], className, {\n                  [styles[\"select-card--remove-drop-shadow\"]]: removeDropShadow,\n                  [styles[\"select-card--selected\"]]: isChecked && !errored,\n                  [styles[\"select-card--errored\"]]: errored,\n                  [styles[\"select-card--disabled\"]]: disabled,\n                })}\n              >\n                {children}\n              </Card>\n            }\n            hideRadio\n          />\n        )}\n      </>\n    );\n  },\n);\n\nSelectCardElement.displayName = \"SelectCard\";\n\n/**\n * SelectCard component for creating interactive card-based selection interfaces.\n *\n * Features:\n * - Supports both single selection (radio) and multiple selection (checkbox) modes\n * - Automatic context detection for selection behavior\n * - Visual feedback for selected, disabled, and error states\n * - Accessible with proper ARIA roles and keyboard navigation\n * - Customizable styling through Card component props\n * - Hover and focus states with smooth transitions\n * - Integration with SelectCardGroup for grouped selection\n *\n * @example\n * <SelectCard\n *   id=\"option-1\"\n *   onChange={(checked) => console.log('Selected:', checked)}\n * >\n *   <Text variant=\"headline\" size=\"small\">Option 1</Text>\n *   <Text>Description of option 1</Text>\n * </SelectCard>\n */\nexport const SelectCard = Object.assign(SelectCardElement, {\n  /**\n   * SelectCardGroup component for managing groups of selectable cards.\n   *\n   * Features:\n   * - Manages selection state for multiple SelectCard components\n   * - Supports both single and multiple selection modes\n   * - Provides proper accessibility with legends and ARIA labels\n   * - Handles required field validation\n   * - Automatic radio button grouping for single selection\n   * - Context provider for child SelectCard components\n   *\n   * @example\n   * <SelectCard.Group\n   *   legend=\"Choose your plan\"\n   *   selectionMode=\"single\"\n   *   onChange={(e, state) => console.log('Selection changed:', state)}\n   * >\n   *   <SelectCard id=\"basic\" onChange={() => {}}>\n   *     <Text variant=\"headline\" size=\"small\">Basic Plan</Text>\n   *   </SelectCard>\n   *   <SelectCard id=\"premium\" onChange={() => {}}>\n   *     <Text variant=\"headline\" size=\"small\">Premium Plan</Text>\n   *   </SelectCard>\n   * </SelectCard.Group>\n   */\n  Group: SelectCardGroup,\n});\n"],"names":[],"mappings":"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"}

package/dist/SelectCard.js

@@ -1,2 +1,2 @@
-export { S as SelectCard, a as SelectCardElement, b as SelectCardGroup, S as default } from './SelectCard-DViLgRGh.js';
+export { S as SelectCard, a as SelectCardElement, b as SelectCardGroup, S as default } from './SelectCard-DDN7qqHv.js';
 //# sourceMappingURL=SelectCard.js.map

package/dist/SelectField.js

@@ -1,2 +1,2 @@
-export { S as SelectField, a as SelectFieldSync } from './SelectFieldSync-DF05HvD4.js';
+export { S as SelectField, a as SelectFieldSync } from './SelectFieldSync-DQm3_D0v.js';
 //# sourceMappingURL=SelectField.js.map

package/dist/{SelectFieldSync-DF05HvD4.js → SelectFieldSync-DQm3_D0v.js}

@@ -11,16 +11,17 @@ import { S as SvgCheck } from './check-Cf67OWrZ.js';
 import { T as Text } from './Text-kPA-VzsB.js';
 import { u as useIntersectionObserver } from './useIntersectionObserver-BEmMDO3P.js';
 import { S as SrOnly } from './SrOnly-CTsYSuby.js';
-import { s as styles$4 } from './SelectTriggerBase.module-DUhQNr6j.js';
+import { s as styles$4 } from './SelectTriggerBase.module-Ce49lamD.js';
 import { S as SvgChevronRight } from './chevron_right-BdpsxX7x.js';
 import { S as SvgClose } from './close-DZj38AEh.js';
-import { F as FieldLabel } from './FieldLabel-BIStrC2x.js';
+import { F as FieldLabel } from './FieldLabel-jqlQ1Ldh.js';
 import { B as computePosition, A as autoUpdate, o as offset, L as autoPlacement, i as size, D as DialogContext } from './DrawerContext-Cs3k160L.js';
 import { u as useBreakpoint } from './useBreakpoint-BGCsBhQ7.js';
 import './anvil-fonts.css';import './SelectFieldSync.css';/* empty css                     */
 import { D as DialogCancelButton } from './DialogCancelButton-sTEfx5kf.js';
 import { u as useDialogScrollLock } from './useDialogScrollLock-BW-aVboo.js';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-BlIWftBb.js';
+import { F as FieldMessage } from './FieldMessage-DWONT3dr.js';
 
 const DEFAULT_PAGE_SIZE = 20;
 const DEFAULT_CACHE_MAX_SIZE = 15;
@@ -310,7 +311,7 @@ const SelectFieldList = ({
             selectionType: "single",
             checked: selectedOption?.id === item.original.id,
             highlighted: highlightedIndex === index,
-            disabled: disabled ?? false
+            disabled: (disabled || item.disabled) ?? false
           },
           item.id
         )) : /* @__PURE__ */ jsx("div", { className: styles$3["empty"], children: /* @__PURE__ */ jsx(Text, { subdued: true, size: "small", children: "No match found" }) }) }) }),
@@ -337,17 +338,22 @@ const SelectFieldInput = ({
   disableClearButton,
   disableToggleButton,
   disabled,
+  readOnly,
+  error,
   onClear,
   id,
   inputWrapperRef,
   htmlInputWrapperProps,
   inputProps,
-  toggleButtonProps
+  toggleButtonProps,
+  prefix,
+  suffix
 }) => {
   const inputWrapperClassNames = cx(styles$4["input-wrapper"], {
     [styles$4["small"]]: size === "small",
     [styles$4["large"]]: size === "large",
-    [styles$4["no-clear-button"]]: disableClearButton
+    [styles$4["no-clear-button"]]: disableClearButton,
+    [styles$4["disabled"]]: disabled || readOnly
   });
   return /* @__PURE__ */ jsxs(
     "div",
@@ -356,15 +362,21 @@ const SelectFieldInput = ({
       ...htmlInputWrapperProps,
       className: cx(inputWrapperClassNames, htmlInputWrapperProps?.className),
       children: [
+        prefix ? /* @__PURE__ */ jsx("div", { className: styles$4["prefix"], children: prefix }) : null,
         /* @__PURE__ */ jsx(
           "input",
           {
             id,
             placeholder,
+            disabled,
+            readOnly,
             ...inputProps,
-            className: cx(styles$4["input"], inputProps?.className)
+            className: cx(styles$4["input"], inputProps?.className, {
+              [styles$4["error"]]: error
+            })
           }
         ),
+        suffix ? /* @__PURE__ */ jsx("div", { className: styles$4["suffix"], children: suffix }) : null,
         /* @__PURE__ */ jsxs("div", { className: styles$4["buttons-wrapper"], children: [
           disableClearButton ? null : /* @__PURE__ */ jsx("div", { className: styles$4["close-button-wrapper"], children: /* @__PURE__ */ jsx(
             Button,
@@ -403,9 +415,21 @@ SelectFieldInput.displayName = "SelectFieldInput";
 
 const SelectFieldLabel = ({
   label,
-  getLabelProps
+  getLabelProps,
+  required,
+  moreInfo,
+  openMoreInfo
 }) => {
-  return /* @__PURE__ */ jsx(FieldLabel, { ...getLabelProps(), children: label });
+  return /* @__PURE__ */ jsx(
+    FieldLabel,
+    {
+      ...getLabelProps(),
+      required,
+      moreInfo,
+      openMoreInfo,
+      children: label
+    }
+  );
 };
 
 function useDebouncedCallback(callback, delay = 300) {
@@ -446,7 +470,8 @@ const useCombo = ({
   onInputValueChange,
   onIsOpenChange,
   displayAs = "popover",
-  disableHighlightOnOpen = false
+  disableHighlightOnOpen = false,
+  disabled
 }) => {
   const downshiftItems = useMemo(() => {
     const items = options.map(
@@ -477,6 +502,12 @@ const useCombo = ({
     openMenu,
     setHighlightedIndex
   } = useCombobox({
+    isItemDisabled: (item, _index) => {
+      if (!item) {
+        return false;
+      }
+      return (disabled || item.disabled) ?? false;
+    },
     selectedItem: selectedDownshiftItem,
     onSelectedItemChange: ({
       selectedItem: si
@@ -521,6 +552,7 @@ function mapOptionToDownshiftItem(option) {
   return {
     id: option.id,
     type: "option",
+    disabled: option.disabled ?? false,
     original: option
   };
 }
@@ -749,10 +781,30 @@ const SelectField = forwardRef(
       debounceMs = 200,
       onSelectedOptionChange,
       cache,
-      size
+      size,
+      error,
+      hint,
+      description,
+      errorAriaLive: errorAriaLiveProp = "assertive",
+      required,
+      disabled,
+      readOnly,
+      prefix,
+      suffix
     } = componentProps;
     const autoId = useId();
     const id = idProp ?? autoId;
+    const helperUid = useId();
+    const [hasFocus, setHasFocus] = useState(false);
+    const handleFocus = () => {
+      setHasFocus(true);
+    };
+    const handleBlur = () => {
+      setHasFocus(false);
+    };
+    const errorMessage = typeof error !== "boolean" ? error : void 0;
+    const hasHelperText = hint || errorMessage || description;
+    const isDisabledOrReadOnly = (disabled || readOnly) ?? false;
     const { isMobile } = useAdaptiveView();
     const displayAs = displayMenuAsProp === "auto" ? isMobile ? "dialog" : "popover" : displayMenuAsProp;
     const initialLoad = initialLoadProp === "auto" ? "immediate" : initialLoadProp;
@@ -834,6 +886,7 @@ const SelectField = forwardRef(
       closeMenu
     } = useCombo({
       displayAs,
+      disabled: isDisabledOrReadOnly,
       options,
       pinnedOptions: [],
       selectedOption,
@@ -872,23 +925,50 @@ const SelectField = forwardRef(
     const handleLoadMore = async () => {
       await loadMore(adjustInputValueForSelectedOption(inputValue));
     };
-    const disableClearButton = disableClearButtonProp || !selectedOption;
+    const disableClearButton = disableClearButtonProp || !selectedOption || isDisabledOrReadOnly;
     if (displayAs === "dialog") {
       return /* @__PURE__ */ jsxs("div", { className: styles$4["search-field"], style: { ...layoutStyles }, children: [
-        /* @__PURE__ */ jsx(SelectFieldLabel, { label, getLabelProps }),
+        /* @__PURE__ */ jsx(
+          SelectFieldLabel,
+          {
+            label,
+            getLabelProps,
+            required
+          }
+        ),
         /* @__PURE__ */ jsx(
           SelectFieldInput,
           {
+            disabled,
+            readOnly,
             disableToggleButton: false,
             placeholder,
             disableClearButton,
             toggleButtonProps: getToggleButtonProps(),
             onClear: () => onSelectedOptionChange(null),
             id: `${id}-input`,
-            inputProps: getInputProps(),
-            size
+            inputProps: getInputProps({
+              "aria-describedby": hasHelperText ? helperUid : void 0,
+              "aria-invalid": error ? true : void 0,
+              onFocus: handleFocus,
+              onBlur: handleBlur
+            }),
+            size,
+            error: !!error,
+            prefix,
+            suffix
           }
         ),
+        hasHelperText ? /* @__PURE__ */ jsx(
+          FieldMessage,
+          {
+            id: helperUid,
+            hint,
+            errorMessage,
+            errorAriaLive: isOpen || hasFocus ? errorAriaLiveProp : "off",
+            description
+          }
+        ) : null,
         /* @__PURE__ */ jsx(
           FieldDialog,
           {
@@ -899,6 +979,8 @@ const SelectField = forwardRef(
             field: /* @__PURE__ */ jsx(
               SelectFieldInput,
               {
+                disabled,
+                readOnly,
                 inputProps: getInputProps(),
                 disableToggleButton: true,
                 placeholder,
@@ -906,7 +988,10 @@ const SelectField = forwardRef(
                 onClear: () => onSelectedOptionChange(null),
                 id: `${id}-dialog-input`,
                 inputWrapperRef,
-                size: "medium"
+                size: "medium",
+                error: !!error,
+                prefix,
+                suffix
               }
             ),
             children: /* @__PURE__ */ jsx(
@@ -922,6 +1007,7 @@ const SelectField = forwardRef(
                 onLoadMore: handleLoadMore,
                 loading,
                 loadingMore,
+                disabled: isDisabledOrReadOnly,
                 style: {
                   paddingInline: 24,
                   paddingBlockEnd: 24
@@ -933,12 +1019,25 @@ const SelectField = forwardRef(
       ] });
     }
     return /* @__PURE__ */ jsxs("div", { className: styles$4["search-field"], style: { ...layoutStyles }, children: [
-      /* @__PURE__ */ jsx(SelectFieldLabel, { label, getLabelProps }),
+      /* @__PURE__ */ jsx(
+        SelectFieldLabel,
+        {
+          label,
+          getLabelProps,
+          required
+        }
+      ),
       /* @__PURE__ */ jsx(
         SelectFieldInput,
         {
+          disabled,
+          readOnly,
           inputProps: getInputProps({
-            popovertarget: `${id}-popover`
+            popovertarget: `${id}-popover`,
+            "aria-describedby": hasHelperText ? helperUid : void 0,
+            "aria-invalid": error ? true : void 0,
+            onFocus: handleFocus,
+            onBlur: handleBlur
           }),
           toggleButtonProps: getToggleButtonProps(),
           disableToggleButton: false,
@@ -948,9 +1047,22 @@ const SelectField = forwardRef(
           id: `${id}-input`,
           popoverTarget: `${id}-popover`,
           inputWrapperRef,
-          size
+          size,
+          error: !!error,
+          prefix,
+          suffix
         }
       ),
+      hasHelperText ? /* @__PURE__ */ jsx(
+        FieldMessage,
+        {
+          id: helperUid,
+          hint,
+          errorMessage,
+          errorAriaLive: isOpen || hasFocus ? errorAriaLiveProp : "off",
+          description
+        }
+      ) : null,
       /* @__PURE__ */ jsx(
         FieldPopover,
         {
@@ -970,6 +1082,7 @@ const SelectField = forwardRef(
               onLoadMore: handleLoadMore,
               loading,
               loadingMore,
+              disabled: isDisabledOrReadOnly,
               style: {
                 padding: 8
               }
@@ -1006,4 +1119,4 @@ const SelectFieldSync = (props) => {
 };
 
 export { SelectField as S, SelectFieldSync as a, useAdaptiveView as u };
-//# sourceMappingURL=SelectFieldSync-DF05HvD4.js.map
+//# sourceMappingURL=SelectFieldSync-DQm3_D0v.js.map