paris 0.23.0 → 0.24.0

package/dist/stories/codeinput/CodeInput.js

@@ -0,0 +1,105 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { useRef, useCallback, useEffect } from 'react';
+import styles from './CodeInput.module.scss.js';
+
+const CodeInput = ({
+  value,
+  onChange,
+  onComplete,
+  length = 6,
+  status = "default",
+  disabled = false,
+  loading = false,
+  autoFocus = false,
+  "aria-label": ariaLabel = "Verification code"
+}) => {
+  const inputsRef = useRef([]);
+  const digits = value.split("").slice(0, length);
+  const focusAt = useCallback(
+    (index) => {
+      const clamped = Math.max(0, Math.min(index, length - 1));
+      const input = inputsRef.current[clamped];
+      input?.focus();
+      input?.select();
+    },
+    [length]
+  );
+  useEffect(() => {
+    if (autoFocus) focusAt(0);
+  }, [autoFocus, focusAt]);
+  const emit = useCallback(
+    (next) => {
+      const sliced = next.slice(0, length);
+      onChange(sliced);
+      if (sliced.length === length) onComplete?.(sliced);
+    },
+    [length, onChange, onComplete]
+  );
+  const handleChange = (index) => (event) => {
+    const typed = event.target.value.replace(/\D/g, "");
+    if (!typed) return;
+    const chars = value.split("");
+    let cursor = index;
+    for (const char of typed) {
+      if (cursor >= length) break;
+      chars[cursor] = char;
+      cursor += 1;
+    }
+    emit(chars.join(""));
+    focusAt(cursor);
+  };
+  const handleKeyDown = (index) => (event) => {
+    const chars = value.split("");
+    if (event.key === "Backspace") {
+      event.preventDefault();
+      if (chars[index]) {
+        chars[index] = "";
+        emit(chars.join(""));
+      } else if (index > 0) {
+        chars[index - 1] = "";
+        emit(chars.join(""));
+        focusAt(index - 1);
+      }
+    } else if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      focusAt(index - 1);
+    } else if (event.key === "ArrowRight") {
+      event.preventDefault();
+      focusAt(index + 1);
+    }
+  };
+  const handlePaste = (event) => {
+    event.preventDefault();
+    const pasted = event.clipboardData.getData("text").replace(/\D/g, "").slice(0, length);
+    if (!pasted) return;
+    emit(pasted);
+    focusAt(pasted.length);
+  };
+  return /* @__PURE__ */ jsx("div", { className: clsx(styles.container, loading && styles.loading), role: "group", "aria-label": ariaLabel, children: Array.from({ length }).map((_, index) => /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref: (element) => {
+        inputsRef.current[index] = element;
+      },
+      className: clsx(styles.segment, status === "error" && styles.error),
+      type: "text",
+      inputMode: "numeric",
+      autoComplete: index === 0 ? "one-time-code" : "off",
+      maxLength: 1,
+      disabled,
+      readOnly: loading,
+      value: digits[index] ?? "",
+      "aria-label": `Digit ${index + 1}`,
+      onChange: handleChange(index),
+      onKeyDown: handleKeyDown(index),
+      onPaste: handlePaste,
+      onFocus: (event) => event.target.select()
+    },
+    index
+  )) });
+};
+
+export { CodeInput };
+//# sourceMappingURL=CodeInput.js.map

package/dist/stories/codeinput/CodeInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeInput.js","sources":["../../../src/stories/codeinput/CodeInput.tsx"],"sourcesContent":["'use client';\n\nimport { clsx } from 'clsx';\nimport type { ChangeEvent, ClipboardEvent, FC, KeyboardEvent } from 'react';\nimport { useCallback, useEffect, useRef } from 'react';\nimport styles from './CodeInput.module.scss';\n\nexport type CodeInputProps = {\n    /** The current code value. Controlled — pass the digits entered so far. */\n    value: string;\n    /** Called with the new value whenever a segment changes. */\n    onChange: (value: string) => void;\n    /** Called once the final segment is filled (i.e. `value.length === length`). */\n    onComplete?: (value: string) => void;\n    /**\n     * Number of digit segments.\n     * @default 6\n     */\n    length?: number;\n    /**\n     * Visual status of the segments.\n     * @default 'default'\n     */\n    status?: 'default' | 'error';\n    /** Disables all segments. */\n    disabled?: boolean;\n    /**\n     * Locks the input and plays a validating animation (a right-to-left fill, then a glare that\n     * sweeps across the segments). Use while a submitted code is being verified.\n     */\n    loading?: boolean;\n    /** Focus the first segment on mount. */\n    autoFocus?: boolean;\n    /**\n     * Accessible label for the group of segments.\n     * @default 'Verification code'\n     */\n    'aria-label'?: string;\n};\n\n/**\n * A segmented numeric code input — `length` single-digit cells with auto-advance, paste-to-fill,\n * backspace-retreat, and arrow-key navigation. Intended for one-time PIN / SMS verification codes.\n *\n * <hr />\n *\n * To use this component, import it as follows:\n *\n * ```js\n * import { CodeInput } from 'paris/codeinput';\n * ```\n * @constructor\n */\nexport const CodeInput: FC<CodeInputProps> = ({\n    value,\n    onChange,\n    onComplete,\n    length = 6,\n    status = 'default',\n    disabled = false,\n    loading = false,\n    autoFocus = false,\n    'aria-label': ariaLabel = 'Verification code',\n}) => {\n    const inputsRef = useRef<Array<HTMLInputElement | null>>([]);\n    const digits = value.split('').slice(0, length);\n\n    const focusAt = useCallback(\n        (index: number) => {\n            const clamped = Math.max(0, Math.min(index, length - 1));\n            const input = inputsRef.current[clamped];\n            input?.focus();\n            input?.select();\n        },\n        [length],\n    );\n\n    useEffect(() => {\n        if (autoFocus) focusAt(0);\n    }, [autoFocus, focusAt]);\n\n    const emit = useCallback(\n        (next: string) => {\n            const sliced = next.slice(0, length);\n            onChange(sliced);\n            if (sliced.length === length) onComplete?.(sliced);\n        },\n        [length, onChange, onComplete],\n    );\n\n    const handleChange = (index: number) => (event: ChangeEvent<HTMLInputElement>) => {\n        const typed = event.target.value.replace(/\\D/g, '');\n        if (!typed) return;\n        const chars = value.split('');\n        let cursor = index;\n        for (const char of typed) {\n            if (cursor >= length) break;\n            chars[cursor] = char;\n            cursor += 1;\n        }\n        emit(chars.join(''));\n        focusAt(cursor);\n    };\n\n    const handleKeyDown = (index: number) => (event: KeyboardEvent<HTMLInputElement>) => {\n        const chars = value.split('');\n        if (event.key === 'Backspace') {\n            event.preventDefault();\n            if (chars[index]) {\n                chars[index] = '';\n                emit(chars.join(''));\n            } else if (index > 0) {\n                chars[index - 1] = '';\n                emit(chars.join(''));\n                focusAt(index - 1);\n            }\n        } else if (event.key === 'ArrowLeft') {\n            event.preventDefault();\n            focusAt(index - 1);\n        } else if (event.key === 'ArrowRight') {\n            event.preventDefault();\n            focusAt(index + 1);\n        }\n    };\n\n    const handlePaste = (event: ClipboardEvent<HTMLInputElement>) => {\n        event.preventDefault();\n        const pasted = event.clipboardData.getData('text').replace(/\\D/g, '').slice(0, length);\n        if (!pasted) return;\n        emit(pasted);\n        focusAt(pasted.length);\n    };\n\n    return (\n        <div className={clsx(styles.container, loading && styles.loading)} role=\"group\" aria-label={ariaLabel}>\n            {Array.from({ length }).map((_, index) => (\n                <input\n                    // biome-ignore lint/suspicious/noArrayIndexKey: fixed-length positional code segments are stable\n                    key={index}\n                    ref={(element) => {\n                        inputsRef.current[index] = element;\n                    }}\n                    className={clsx(styles.segment, status === 'error' && styles.error)}\n                    type=\"text\"\n                    inputMode=\"numeric\"\n                    autoComplete={index === 0 ? 'one-time-code' : 'off'}\n                    maxLength={1}\n                    disabled={disabled}\n                    readOnly={loading}\n                    value={digits[index] ?? ''}\n                    aria-label={`Digit ${index + 1}`}\n                    onChange={handleChange(index)}\n                    onKeyDown={handleKeyDown(index)}\n                    onPaste={handlePaste}\n                    onFocus={(event) => event.target.select()}\n                />\n            ))}\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}

package/dist/stories/codeinput/CodeInput.module.css

@@ -0,0 +1,63 @@
+.paris_container_IcGkk {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 0;
+}
+
+.paris_loading_qeyK6 {
+  position: relative;
+  overflow: hidden;
+  pointer-events: none;
+}
+.paris_loading_qeyK6::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border-radius: 4px;
+  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.7) 50%, transparent 70%);
+  transform: translateX(130%);
+  animation: paris_codeGlare_13XXQ 1.3s ease-in-out 0.45s infinite;
+}
+
+@keyframes paris_codeGlare_13XXQ {
+  to {
+    transform: translateX(-130%);
+  }
+}
+.paris_segment_lMDZE {
+  box-sizing: border-box;
+  width: 30px;
+  height: 34px;
+  padding: 6.5px 2px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background-color: var(--pte-new-colors-inputFill);
+  color: var(--pte-new-colors-contentPrimary);
+  text-align: center;
+  outline: none;
+  caret-color: var(--pte-new-colors-contentPrimary);
+  font-size: var(--pte-typography-styles-paragraphSmall-fontSize);
+  font-style: var(--pte-typography-styles-paragraphSmall-fontStyle);
+  font-weight: var(--pte-typography-styles-paragraphSmall-fontWeight);
+  letter-spacing: var(--pte-typography-styles-paragraphSmall-letterSpacing);
+  line-height: var(--pte-typography-styles-paragraphSmall-lineHeight);
+  transition: var(--pte-animations-interaction);
+}
+.paris_segment_lMDZE:focus {
+  background-color: var(--pte-new-colors-inputFillFocus);
+  border-color: var(--pte-new-colors-inputBorderFocus);
+}
+.paris_segment_lMDZE:disabled {
+  background-color: var(--pte-new-colors-inputFillDisabled);
+  color: var(--pte-new-colors-contentDisabled);
+  cursor: default;
+  pointer-events: none;
+}
+.paris_segment_lMDZE.paris_error_Yls6v {
+  background-color: var(--pte-new-colors-inputFillNegative);
+  border-color: var(--pte-new-colors-inputBorderNegative);
+  color: var(--pte-new-colors-contentNegative);
+  caret-color: var(--pte-new-colors-contentNegative);
+}

package/dist/stories/codeinput/CodeInput.module.scss.js

@@ -0,0 +1,13 @@
+import './CodeInput.module.css';const container = "paris_container_IcGkk";
+const loading = "paris_loading_qeyK6";
+const segment = "paris_segment_lMDZE";
+const error = "paris_error_Yls6v";
+const styles = {
+	container: container,
+	loading: loading,
+	segment: segment,
+	error: error
+};
+
+export { container, styles as default, error, loading, segment };
+//# sourceMappingURL=CodeInput.module.scss.js.map

package/dist/stories/codeinput/CodeInput.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeInput.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/dist/stories/codeinput/index.js

@@ -0,0 +1,2 @@
+export { CodeInput } from './CodeInput.js';
+//# sourceMappingURL=index.js.map

package/dist/stories/codeinput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/stories/combobox/Combobox.d.ts

@@ -0,0 +1,125 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ButtonProps } from '../button';
+import { FieldProps } from '../field';
+import { InputProps } from '../input';
+import { TextProps } from '../text';
+export type Option<T extends Record<string, any> = Record<string, any>> = {
+    id: string;
+    node: ReactNode;
+    metadata?: T;
+} | {
+    id: null;
+    node: string;
+    metadata?: T;
+};
+export type ComboboxProps<T extends Record<string, any>> = {
+    /**
+     * The  {@link Option}s to render in the select box.
+     *
+     * Each option should have an id (`string`) and node ({@link ReactNode}) property at minimum. You can also pass in any other metadata through the `metadata` attribute.
+     *
+     * For type safety, you can pass in a type parameter to `ComboboxProps`. This will be used as the type for the `metadata` property of each option.
+     */
+    options: Option<T>[];
+    /**
+     * The option to render as selected in the select box.
+     *
+     * If `null`, no option will be selected.
+     */
+    value?: Option<T> | null;
+    /**
+     * The initial value for uncontrolled mode. If `value` is provided, this is ignored.
+     */
+    defaultValue?: Option<T> | null;
+    /**
+     * The interaction handler for the Combobox. This will be called when the user selects an option from the dropdown.
+     *
+     * @param option - The selected option, or `null` if the user has cleared the selection.
+     */
+    onChange?: (option: Option<T> | null) => void | Promise<void>;
+    /**
+     * The interaction handler for when the user types in the input. The input is controlled internally, but you can use this to update the input value in your own state.
+     * @param value - The current value of the input.
+     */
+    onInputChange?: (value: string) => void | Promise<void>;
+    /**
+     * Whether to allow the user to create a custom value.
+     *
+     * If `true`, the user will be able to type in a custom value. This will be passed to the `onChange` handler as an option with an ID of `null` and a `node` value containing the user's input as a string.
+     * @default false
+     */
+    allowCustomValue?: boolean;
+    /**
+     * Whether to show the custom value option in the dropdown. This is irrelevant if `allowCustomValue` is `false`.
+     * @default true
+     */
+    showCustomValueOption?: boolean;
+    /**
+     * The text to use for the custom creation option. This should include a `%v` placeholder, which will be replaced with the user's input.
+     *
+     * For example, if the user types in `foo` and this is set to "New %v", the custom value option will be rendered as `New "foo"`.
+     * @default Create "%v"...
+     */
+    customValueString?: string;
+    /**
+     * A function that will be called to create an {@link Option} based on the user's custom typed query value. This is useful for adding custom styling by  allowing you to pass a custom `Option.node` based on the value. This overrides the `customValueString` prop.
+     * @param value
+     */
+    customValueToOption?: (value: string) => Option<T>;
+    /**
+     * Called when the combobox dropdown opens or closes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Whether to hide the clear button when a value is selected. This will never be hidden if the selected option's node is not a strong, because there is no other way to clear the value as of now.
+     */
+    hideClearButton?: boolean;
+    /**
+     * The size of the options dropdown, in pixels.
+     */
+    maxHeight?: number;
+    /**
+     * Adds a bottom border to the dropdown options.
+     * @default false
+     */
+    hasOptionBorder?: boolean;
+    /**
+     * Whether the dropdown should open immediately when focused, vs only after starting to type.
+     * @default false
+     */
+    hideOptionsInitially?: boolean;
+    /**
+     * Prop overrides for other rendered elements. Overrides for the input itself should be passed directly to the component.
+     */
+    overrides?: {
+        field?: FieldProps;
+        container?: ComponentPropsWithoutRef<'div'>;
+        inputContainer?: ComponentPropsWithoutRef<'div'>;
+        input?: ComponentPropsWithoutRef<'input'>;
+        optionsContainer?: ComponentPropsWithoutRef<'ul'>;
+        option?: ComponentPropsWithoutRef<'li'>;
+        customValueOption?: ComponentPropsWithoutRef<'li'>;
+        label?: TextProps<'label'>;
+        description?: TextProps<'p'>;
+        startEnhancerContainer?: ComponentPropsWithoutRef<'div'>;
+        endEnhancerContainer?: ComponentPropsWithoutRef<'div'>;
+        clearButton?: ButtonProps;
+    };
+} & Omit<InputProps, 'type' | 'overrides'>;
+/**
+ * A Combobox component is used to render a searchable select.
+ *
+ * When the selected option node is a string, the combobox will act like an input even when an option is selected, allowing users to edit the selected option directly in order to pick a new one. To circumvent this and make selected options non-editable, pass nodes that are `Text` components instead.
+ *
+ * When `allowCustomValue` is `true`, a custom value option will be added to the dropdown. This option's text can be customized by passing a value for `customValueString`, where `%v` within the string is the user's input. You can provide an entirely custom node through `renderCustomValueOption`. By default, `onChange` will be called for every input change when custom values are allowed.
+ *
+ * <hr />
+ *
+ * To use this component, import it as follows:
+ *
+ * ```js
+ * import { Combobox } from 'paris/combobox';
+ * ```
+ * @constructor
+ */
+export declare function Combobox<T extends Record<string, any> = Record<string, any>>({ options, value, defaultValue, onChange, label, status, hideLabel, description, hideDescription, descriptionPosition, placeholder, startEnhancer, endEnhancer, disabled, onInputChange, allowCustomValue, showCustomValueOption, customValueString, customValueToOption, onOpenChange, hideClearButton, maxHeight, hasOptionBorder, hideOptionsInitially, overrides, }: ComboboxProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/stories/combobox/Combobox.js

@@ -0,0 +1,257 @@
+'use client';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { faClose } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Combobox as Combobox$1, ComboboxButton, ComboboxInput, ComboboxOptions, ComboboxOption } from '@headlessui/react';
+import { clsx } from 'clsx';
+import { useId, useState, useRef, useCallback, useLayoutEffect, useMemo } from 'react';
+import { OpenChangeEffect } from '../../helpers/OpenChangeEffect.js';
+import { MemoizedEnhancer } from '../../helpers/renderEnhancer.js';
+import { useControllableState } from '../../helpers/useControllableState.js';
+import { Button } from '../button/Button.js';
+import { Field } from '../field/Field.js';
+import inputStyles from '../input/Input.module.scss.js';
+import styles from '../select/Select.module.scss.js';
+import { Text } from '../text/Text.js';
+import 'pte';
+import { theme, pget } from '../theme/themes.js';
+import { TextWhenString } from '../utility/TextWhenString.js';
+
+function Combobox({
+  options,
+  value,
+  defaultValue,
+  onChange,
+  label,
+  status,
+  hideLabel,
+  description,
+  hideDescription,
+  descriptionPosition,
+  placeholder,
+  startEnhancer,
+  endEnhancer,
+  disabled,
+  onInputChange,
+  allowCustomValue,
+  showCustomValueOption = true,
+  customValueString = 'Create "%v"',
+  customValueToOption,
+  onOpenChange,
+  hideClearButton = false,
+  maxHeight = 320,
+  hasOptionBorder = false,
+  hideOptionsInitially = false,
+  overrides
+}) {
+  const inputID = useId();
+  const [resolvedValue, setResolvedValue] = useControllableState({
+    value,
+    defaultValue,
+    onChange
+  });
+  const [query, setQuery] = useState("");
+  const containerElRef = useRef(null);
+  const inputElRef = useRef(null);
+  const [anchorOffset, setAnchorOffset] = useState(0);
+  const containerRef = useCallback((node) => {
+    containerElRef.current = node;
+  }, []);
+  const inputRef = useCallback((node) => {
+    inputElRef.current = node;
+  }, []);
+  useLayoutEffect(() => {
+    if (containerElRef.current && inputElRef.current) {
+      const containerLeft = containerElRef.current.getBoundingClientRect().left;
+      const inputLeft = inputElRef.current.getBoundingClientRect().left;
+      setAnchorOffset(containerLeft - inputLeft);
+    }
+  }, [startEnhancer, resolvedValue]);
+  const optionsWithCustomValue = useMemo(
+    () => [...allowCustomValue && customValueToOption ? [customValueToOption(query)] : [], ...options],
+    [allowCustomValue, customValueToOption, options, query]
+  );
+  return /* @__PURE__ */ jsx(
+    Field,
+    {
+      htmlFor: inputID,
+      label,
+      hideLabel,
+      description,
+      hideDescription,
+      descriptionPosition,
+      disabled,
+      overrides: {
+        container: overrides?.container,
+        label: overrides?.label,
+        description: overrides?.description
+      },
+      ...overrides?.field ?? {},
+      children: /* @__PURE__ */ jsx(
+        Combobox$1,
+        {
+          as: "div",
+          immediate: !hideOptionsInitially,
+          value: resolvedValue?.id ?? null,
+          onChange: (id) => {
+            const sel = optionsWithCustomValue.find((o) => o.id === id);
+            if (sel) {
+              setResolvedValue(sel);
+            } else if (id) {
+              setResolvedValue({ id: null, node: id });
+            }
+          },
+          children: ({ open }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(OpenChangeEffect, { open, onOpenChange }),
+            /* @__PURE__ */ jsxs(
+              ComboboxButton,
+              {
+                as: "div",
+                ref: containerRef,
+                tabIndex: -1,
+                "data-status": disabled ? "disabled" : status || "default",
+                ...overrides?.inputContainer,
+                className: clsx(overrides?.inputContainer?.className, inputStyles.inputContainer),
+                children: [
+                  !!startEnhancer && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      ...overrides?.startEnhancerContainer,
+                      className: clsx(inputStyles.enhancer, overrides?.startEnhancerContainer?.className),
+                      "data-status": disabled ? "disabled" : status || "default",
+                      children: !!startEnhancer && /* @__PURE__ */ jsx(
+                        MemoizedEnhancer,
+                        {
+                          enhancer: startEnhancer,
+                          size: parseInt(
+                            pget("typography.styles.paragraphSmall.fontSize") || theme.typography.styles.paragraphSmall.fontSize,
+                            10
+                          )
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { className: styles.content, children: resolvedValue?.node && typeof resolvedValue.node !== "string" ? resolvedValue.node : /* @__PURE__ */ jsx(
+                    ComboboxInput,
+                    {
+                      ref: inputRef,
+                      id: inputID,
+                      ...overrides?.input,
+                      placeholder,
+                      displayValue: () => resolvedValue?.node,
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        overrides?.input?.onClick?.(e);
+                      },
+                      onKeyDown: (e) => {
+                        e.stopPropagation();
+                        overrides?.input?.onKeyDown?.(e);
+                      },
+                      onChange: (e) => {
+                        setQuery(e.target.value);
+                        if (onInputChange) onInputChange(e.target.value);
+                        if (overrides?.input?.onChange) overrides.input.onChange(e);
+                        if (allowCustomValue && e.target.value) {
+                          setResolvedValue(
+                            customValueToOption?.(e.target.value) || {
+                              id: null,
+                              node: e.target.value
+                            }
+                          );
+                        }
+                      },
+                      "aria-disabled": disabled,
+                      "data-status": disabled ? "disabled" : status || "default",
+                      className: clsx(overrides?.input?.className, inputStyles.input, styles.field)
+                    }
+                  ) }),
+                  !!resolvedValue && (!hideClearButton || typeof resolvedValue.node !== "string") && /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      size: "xs",
+                      shape: "circle",
+                      startEnhancer: /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: faClose, fontSize: "10px" }),
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        setResolvedValue(null);
+                      },
+                      ...overrides?.clearButton,
+                      children: "Clear"
+                    }
+                  ),
+                  !!endEnhancer && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      ...overrides?.endEnhancerContainer,
+                      className: clsx(inputStyles.enhancer, overrides?.endEnhancerContainer?.className),
+                      "data-status": disabled ? "disabled" : status || "default",
+                      children: !!endEnhancer && /* @__PURE__ */ jsx(
+                        MemoizedEnhancer,
+                        {
+                          enhancer: endEnhancer,
+                          size: parseInt(
+                            pget("typography.styles.paragraphSmall.fontSize") || theme.typography.styles.paragraphSmall.fontSize,
+                            10
+                          )
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              ComboboxOptions,
+              {
+                as: "ul",
+                anchor: {
+                  to: "bottom start",
+                  gap: 9,
+                  offset: anchorOffset
+                },
+                transition: true,
+                ...overrides?.optionsContainer,
+                className: clsx(overrides?.optionsContainer?.className, styles.options),
+                style: {
+                  "--options-maxHeight": `${maxHeight}px`,
+                  ...overrides?.optionsContainer?.style
+                },
+                children: [
+                  allowCustomValue && showCustomValueOption && !customValueToOption && query.length > 0 && /* @__PURE__ */ jsx(
+                    ComboboxOption,
+                    {
+                      as: "li",
+                      value: query,
+                      "data-selected": false,
+                      className: clsx(overrides?.customValueOption?.className, styles.option),
+                      ...overrides?.customValueOption,
+                      children: /* @__PURE__ */ jsx(Text, { as: "span", kind: "paragraphSmall", children: customValueString.replace("%v", query) })
+                    }
+                  ),
+                  (optionsWithCustomValue || []).map((option) => /* @__PURE__ */ jsx(
+                    ComboboxOption,
+                    {
+                      as: "li",
+                      value: option.id,
+                      ...overrides?.option,
+                      className: clsx(
+                        overrides?.option?.className,
+                        styles.option,
+                        hasOptionBorder && styles.optionBorder
+                      ),
+                      children: /* @__PURE__ */ jsx(TextWhenString, { as: "span", kind: "paragraphSmall", children: option.node })
+                    },
+                    option.id
+                  ))
+                ]
+              }
+            )
+          ] })
+        }
+      )
+    }
+  );
+}
+
+export { Combobox };
+//# sourceMappingURL=Combobox.js.map