se-design 1.0.83-dev.4 → 1.0.83-r-dev.1

package/dist/index45.js.map

@@ -1 +1 @@
-{"version":3,"file":"index45.js","sources":["../src/components/AutoCompleteInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useCallback, useState } from 'react';\nimport './style.scss';\nimport { Icon } from '../Icon';\nimport { useStableId } from '../../utils/useStableId';\nimport { getA11yNameAttributes, useCombobox } from '../../utils/a11y';\n\nexport interface AutoCompleteInputProps {\n  value: string;\n  disabled?: boolean;\n  maxLength?: number;\n  /** Called when the user types in the input. Not called on suggestion selection. */\n  onChange: (value: string) => void;\n  tag?: string;\n  error?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  /**\n   * Suggestion items. Default rendering expects { label, value } shape.\n   * When renderOption is provided, any shape is accepted.\n   */\n  suggestions?: any[];\n  /**\n   * Called when a suggestion is selected (click or Enter key).\n   * Receives the full item object from the suggestions array.\n   */\n  onSelect?: (item: any) => void;\n  /**\n   * Render custom content for each suggestion option. The component handles the option wrapper\n   * (ARIA props, highlight, click, keyboard navigation). You only provide the inner content.\n   */\n  renderOption?: (suggestion: any, context: { isHighlighted: boolean; index: number }) => React.ReactNode;\n  /**\n   * Custom CSS class for option elements. Replaces the default 'suggestion-item' class.\n   * Useful with renderOption to apply custom styling to option wrappers.\n   */\n  optionClassName?: string;\n  automationId?: string;\n  /**\n   * Accessible label for the input. Used when no visible label is provided.\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of element(s) that label this input. Takes precedence over ariaLabel.\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) providing additional description.\n   */\n  ariaDescribedBy?: string;\n}\n\nexport const AutoCompleteInput: React.FC<AutoCompleteInputProps> = React.memo(\n  ({\n    value,\n    onChange,\n    disabled = false,\n    maxLength,\n    tag = 'input',\n    error = false,\n    errorMessage,\n    label,\n    placeholder,\n    suggestions = [],\n    onSelect,\n    renderOption,\n    optionClassName,\n    automationId = '',\n    ariaLabel,\n    ariaLabelledBy,\n    ariaDescribedBy,\n    ...props\n  }) => {\n    const [filteredSuggestions, setFilteredSuggestions] = useState<any[]>([...suggestions]);\n    const [isSuggestionBoxVisible, setSuggestionBoxVisible] = useState<boolean>(false);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    // Generate stable unique IDs per instance so label, input, listbox, and error never share IDs (HTML/ARIA require unique ids).\n    const instanceId = useStableId(undefined, 'autocomplete');\n    const inputId = `${instanceId}-input`;\n    const listboxId = `${instanceId}-listbox`;\n    const labelId = `${instanceId}-label`;\n    const errorId = `${instanceId}-error`;\n\n    const handleSelectSuggestion = useCallback(\n      (item: any) => {\n        setSuggestionBoxVisible(false);\n        onSelect?.(item);\n      },\n      [onSelect]\n    );\n\n    // Use the comprehensive useCombobox hook\n    const {\n      containerProps,\n      inputProps: comboboxInputProps,\n      listboxProps,\n      getOptionProps,\n      highlightedIndex,\n      setHighlightedIndex,\n      isKeyboardFocused\n    } = useCombobox<any>({\n      items: filteredSuggestions,\n      isOpen: isSuggestionBoxVisible,\n      onOpenChange: setSuggestionBoxVisible,\n      onSelect: handleSelectSuggestion,\n      listboxId\n    });\n\n    const handleInputChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const inputValue = e.target.value;\n        setHighlightedIndex(-1); // Reset highlight on input change\n        onChange(inputValue);\n\n        // Internal filtering for default rendering (when no renderOption, component manages filtering)\n        if (!renderOption) {\n          if (inputValue === '') {\n            setFilteredSuggestions([...suggestions]);\n          } else {\n            const filtered = suggestions?.filter(\n              (suggestion) =>\n                typeof suggestion === 'object' &&\n                suggestion?.label?.toLowerCase().includes(inputValue?.toLowerCase() ?? '')\n            );\n            setFilteredSuggestions([...filtered]);\n          }\n        }\n      },\n      [onChange, suggestions, renderOption, setHighlightedIndex]\n    );\n\n    useEffect(() => {\n      setFilteredSuggestions([...suggestions]);\n    }, [suggestions]);\n\n    const handleInputClick = () => {\n      setSuggestionBoxVisible(true);\n    };\n\n    const handleInputFocus = () => {\n      if (filteredSuggestions.length > 0) {\n        setSuggestionBoxVisible(true);\n      }\n    };\n\n    const handleClearInput = () => {\n      onChange('');\n      setHighlightedIndex(-1);\n      inputRef.current?.focus();\n    };\n\n    // Build ARIA name attributes: when ariaLabel is provided use it (e.g. \"Signer 1 name\"); otherwise use visible label or ariaLabelledBy\n    const a11yNameProps = getA11yNameAttributes({\n      ariaLabelledBy: label && !ariaLabel ? labelId : ariaLabelledBy,\n      ariaLabel,\n      ariaDescribedBy: error ? errorId : ariaDescribedBy\n    });\n\n    return (\n      <div \n        className=\"main-container-autocomplete-se-design\" \n        ref={containerRef} \n        data-automation-id={automationId}\n        {...containerProps}\n      >\n        {label && (\n          <span\n            id={labelId}\n            className={`label-container ${disabled ? 'label-container-disabled' : ''}`}\n          >\n            {label}\n          </span>\n        )}\n        <div className=\"input-container-wrapper\">\n          <div className=\"input-wrapper\" style={{ pointerEvents: disabled ? 'none' : 'auto' }}>\n            {React.createElement(tag, {\n              ref: inputRef,\n              id: inputId,\n              value: value,\n              onChange: handleInputChange,\n              onClick: handleInputClick,\n              onFocus: handleInputFocus,\n              ...comboboxInputProps,\n              disabled,\n              className: `${error ? 'input-container-error' : 'input-container-default'} ${disabled ? 'input-container-disabled' : ''} ${filteredSuggestions.length > 0 || value ? 'with-icon' : ''} ${filteredSuggestions.length > 0 && value ? 'with-icons' : ''}`,\n              maxLength,\n              placeholder,\n              'aria-invalid': error || undefined,\n              ...a11yNameProps,\n              ...props\n            })}\n            {value && (\n              <Icon\n                name=\"close\"\n                className=\"input-icon-close\"\n                size={15}\n                onClick={handleClearInput}\n                stroke={disabled ? 'var(--color-gray-600)' : ''}\n                ariaLabel=\"Clear input\"\n              />\n            )}\n            {filteredSuggestions.length > 0 && (\n              <Icon\n                name=\"chevron\"\n                rotation={isSuggestionBoxVisible ? '180' : '0'}\n                className=\"input-icon-chevron\"\n                stroke={disabled ? 'var(--color-gray-600)' : ''}\n                aria-hidden=\"true\"\n              />\n            )}\n          </div>\n          {isSuggestionBoxVisible && filteredSuggestions.length > 0 && (\n            <div\n              {...listboxProps}\n              aria-label={label || ariaLabel || 'Suggestions'}\n              className=\"suggestions-list\"\n              data-automation-id=\"autocomplete-suggestions-list\"\n            >\n              {filteredSuggestions.map((suggestion, index) => {\n                const optionProps = getOptionProps(index, false);\n                const isHighlighted = highlightedIndex === index;\n                return (\n                  <div\n                    key={index}\n                    {...optionProps}\n                    className={`${optionClassName || 'suggestion-item'} ${isHighlighted ? `suggestion-item-highlighted${isKeyboardFocused ? ' suggestion-item-keyboard-highlight' : ''}` : ''}`}\n                    onClick={() => handleSelectSuggestion(suggestion)}\n                    onMouseEnter={() => setHighlightedIndex(index)}\n                    data-automation-id={`autocomplete-suggestion-item-${index}`}\n                  >\n                    {renderOption\n                      ? renderOption(suggestion, { isHighlighted, index })\n                      : suggestion.label}\n                  </div>\n                );\n              })}\n            </div>\n          )}\n        </div>\n        {(error || maxLength) && (\n          <div className={`${error ? 'error-and-max-word' : 'max-word-container'} ${disabled ? 'disabled' : ''}`}>\n            {error && (\n              <div id={errorId} className=\"error-message\" role=\"alert\">\n                {errorMessage}\n              </div>\n            )}\n            {maxLength && (\n              <div className=\"max-word\">\n                {value.length}/{maxLength}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["AutoCompleteInput","React","memo","value","onChange","disabled","maxLength","tag","error","errorMessage","label","placeholder","suggestions","onSelect","renderOption","optionClassName","automationId","ariaLabel","ariaLabelledBy","ariaDescribedBy","props","filteredSuggestions","setFilteredSuggestions","useState","isSuggestionBoxVisible","setSuggestionBoxVisible","containerRef","useRef","inputRef","instanceId","useStableId","undefined","inputId","listboxId","labelId","errorId","handleSelectSuggestion","useCallback","item","containerProps","inputProps","comboboxInputProps","listboxProps","getOptionProps","highlightedIndex","setHighlightedIndex","isKeyboardFocused","useCombobox","items","isOpen","onOpenChange","handleInputChange","e","inputValue","target","filtered","filter","suggestion","toLowerCase","includes","useEffect","handleInputClick","handleInputFocus","length","handleClearInput","current","focus","a11yNameProps","getA11yNameAttributes","createElement","_extends","className","ref","id","style","pointerEvents","onClick","onFocus","Icon","name","size","stroke","rotation","map","index","optionProps","isHighlighted","key","onMouseEnter","role"],"mappings":"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"}
+{"version":3,"file":"index45.js","sources":["../src/components/AutoCompleteInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useCallback, useState } from 'react';\nimport './style.scss';\nimport { Icon } from '../Icon';\nimport { useStableId } from '../../utils/useStableId';\nimport { getA11yNameAttributes, useCombobox } from '../../utils/a11y';\n\nexport interface AutoCompleteInputProps {\n  value: string;\n  disabled?: boolean;\n  maxLength?: number;\n  /** Called when the user types in the input. Not called on suggestion selection. */\n  onChange: (value: string) => void;\n  tag?: string;\n  error?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  /**\n   * Suggestion items. Default rendering expects { label, value } shape.\n   * When renderOption is provided, any shape is accepted.\n   */\n  suggestions?: any[];\n  /**\n   * Called when a suggestion is selected (click or Enter key).\n   * Receives the full item object from the suggestions array.\n   */\n  onSelect?: (item: any) => void;\n  /**\n   * Render custom content for each suggestion option. The component handles the option wrapper\n   * (ARIA props, highlight, click, keyboard navigation). You only provide the inner content.\n   */\n  renderOption?: (suggestion: any, context: { isHighlighted: boolean; index: number }) => React.ReactNode;\n  /**\n   * Custom CSS class for option elements. Replaces the default 'suggestion-item' class.\n   * Useful with renderOption to apply custom styling to option wrappers.\n   */\n  optionClassName?: string;\n  automationId?: string;\n  /**\n   * Accessible label for the input. Used when no visible label is provided.\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of element(s) that label this input. Takes precedence over ariaLabel.\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) providing additional description.\n   */\n  ariaDescribedBy?: string;\n}\n\nexport const AutoCompleteInput: React.FC<AutoCompleteInputProps> = React.memo(\n  ({\n    value,\n    onChange,\n    disabled = false,\n    maxLength,\n    tag = 'input',\n    error = false,\n    errorMessage,\n    label,\n    placeholder,\n    suggestions = [],\n    onSelect,\n    renderOption,\n    optionClassName,\n    automationId = '',\n    ariaLabel,\n    ariaLabelledBy,\n    ariaDescribedBy,\n    ...props\n  }) => {\n    const [filteredSuggestions, setFilteredSuggestions] = useState<any[]>([...suggestions]);\n    const [isSuggestionBoxVisible, setSuggestionBoxVisible] = useState<boolean>(false);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    // Generate stable unique IDs per instance so label, input, listbox, and error never share IDs (HTML/ARIA require unique ids).\n    const instanceId = useStableId(undefined, 'autocomplete');\n    const inputId = `${instanceId}-input`;\n    const listboxId = `${instanceId}-listbox`;\n    const labelId = `${instanceId}-label`;\n    const errorId = `${instanceId}-error`;\n\n    const handleSelectSuggestion = useCallback(\n      (item: any) => {\n        setSuggestionBoxVisible(false);\n        onSelect?.(item);\n      },\n      [onSelect]\n    );\n\n    // Use the comprehensive useCombobox hook\n    const {\n      containerProps,\n      inputProps: comboboxInputProps,\n      listboxProps,\n      getOptionProps,\n      highlightedIndex,\n      setHighlightedIndex\n    } = useCombobox<any>({\n      items: filteredSuggestions,\n      isOpen: isSuggestionBoxVisible,\n      onOpenChange: setSuggestionBoxVisible,\n      onSelect: handleSelectSuggestion,\n      listboxId\n    });\n\n    const handleInputChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const inputValue = e.target.value;\n        setHighlightedIndex(-1); // Reset highlight on input change\n        onChange(inputValue);\n\n        // Internal filtering for default rendering (when no renderOption, component manages filtering)\n        if (!renderOption) {\n          if (inputValue === '') {\n            setFilteredSuggestions([...suggestions]);\n          } else {\n            const filtered = suggestions?.filter(\n              (suggestion) =>\n                typeof suggestion === 'object' &&\n                suggestion?.label?.toLowerCase().includes(inputValue?.toLowerCase() ?? '')\n            );\n            setFilteredSuggestions([...filtered]);\n          }\n        }\n      },\n      [onChange, suggestions, renderOption, setHighlightedIndex]\n    );\n\n    useEffect(() => {\n      setFilteredSuggestions([...suggestions]);\n    }, [suggestions]);\n\n    const handleInputClick = () => {\n      setSuggestionBoxVisible(true);\n    };\n\n    const handleInputFocus = () => {\n      if (filteredSuggestions.length > 0) {\n        setSuggestionBoxVisible(true);\n      }\n    };\n\n    const handleClearInput = () => {\n      onChange('');\n      setHighlightedIndex(-1);\n      inputRef.current?.focus();\n    };\n\n    // Build ARIA name attributes: when ariaLabel is provided use it (e.g. \"Signer 1 name\"); otherwise use visible label or ariaLabelledBy\n    const a11yNameProps = getA11yNameAttributes({\n      ariaLabelledBy: label && !ariaLabel ? labelId : ariaLabelledBy,\n      ariaLabel,\n      ariaDescribedBy: error ? errorId : ariaDescribedBy\n    });\n\n    return (\n      <div \n        className=\"main-container-autocomplete-se-design\" \n        ref={containerRef} \n        data-automation-id={automationId}\n        {...containerProps}\n      >\n        {label && (\n          <span\n            id={labelId}\n            className={`label-container ${disabled ? 'label-container-disabled' : ''}`}\n          >\n            {label}\n          </span>\n        )}\n        <div className=\"input-container-wrapper\">\n          <div className=\"input-wrapper\" style={{ pointerEvents: disabled ? 'none' : 'auto' }}>\n            {React.createElement(tag, {\n              ref: inputRef,\n              id: inputId,\n              value: value,\n              onChange: handleInputChange,\n              onClick: handleInputClick,\n              onFocus: handleInputFocus,\n              ...comboboxInputProps,\n              disabled,\n              className: `${error ? 'input-container-error' : 'input-container-default'} ${disabled ? 'input-container-disabled' : ''} ${filteredSuggestions.length > 0 || value ? 'with-icon' : ''} ${filteredSuggestions.length > 0 && value ? 'with-icons' : ''}`,\n              maxLength,\n              placeholder,\n              'aria-invalid': error || undefined,\n              ...a11yNameProps,\n              ...props\n            })}\n            {value && (\n              <Icon\n                name=\"close\"\n                className=\"input-icon-close\"\n                size={15}\n                onClick={handleClearInput}\n                stroke={disabled ? 'var(--color-gray-600)' : ''}\n                ariaLabel=\"Clear input\"\n              />\n            )}\n            {filteredSuggestions.length > 0 && (\n              <Icon\n                name=\"chevron\"\n                rotation={isSuggestionBoxVisible ? '180' : '0'}\n                className=\"input-icon-chevron\"\n                stroke={disabled ? 'var(--color-gray-600)' : ''}\n                aria-hidden=\"true\"\n              />\n            )}\n          </div>\n          {isSuggestionBoxVisible && filteredSuggestions.length > 0 && (\n            <div\n              {...listboxProps}\n              aria-label={label || ariaLabel || 'Suggestions'}\n              className=\"suggestions-list\"\n              data-automation-id=\"autocomplete-suggestions-list\"\n            >\n              {filteredSuggestions.map((suggestion, index) => {\n                const optionProps = getOptionProps(index, false);\n                const isHighlighted = highlightedIndex === index;\n                return (\n                  <div\n                    key={index}\n                    {...optionProps}\n                    className={`${optionClassName || 'suggestion-item'} ${isHighlighted ? 'suggestion-item-highlighted' : ''}`}\n                    onClick={() => handleSelectSuggestion(suggestion)}\n                    onMouseEnter={() => setHighlightedIndex(index)}\n                    data-automation-id={`autocomplete-suggestion-item-${index}`}\n                  >\n                    {renderOption\n                      ? renderOption(suggestion, { isHighlighted, index })\n                      : suggestion.label}\n                  </div>\n                );\n              })}\n            </div>\n          )}\n        </div>\n        {(error || maxLength) && (\n          <div className={`${error ? 'error-and-max-word' : 'max-word-container'} ${disabled ? 'disabled' : ''}`}>\n            {error && (\n              <div id={errorId} className=\"error-message\" role=\"alert\">\n                {errorMessage}\n              </div>\n            )}\n            {maxLength && (\n              <div className=\"max-word\">\n                {value.length}/{maxLength}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["AutoCompleteInput","React","memo","value","onChange","disabled","maxLength","tag","error","errorMessage","label","placeholder","suggestions","onSelect","renderOption","optionClassName","automationId","ariaLabel","ariaLabelledBy","ariaDescribedBy","props","filteredSuggestions","setFilteredSuggestions","useState","isSuggestionBoxVisible","setSuggestionBoxVisible","containerRef","useRef","inputRef","instanceId","useStableId","undefined","inputId","listboxId","labelId","errorId","handleSelectSuggestion","useCallback","item","containerProps","inputProps","comboboxInputProps","listboxProps","getOptionProps","highlightedIndex","setHighlightedIndex","useCombobox","items","isOpen","onOpenChange","handleInputChange","e","inputValue","target","filtered","filter","suggestion","toLowerCase","includes","useEffect","handleInputClick","handleInputFocus","length","handleClearInput","current","focus","a11yNameProps","getA11yNameAttributes","createElement","_extends","className","ref","id","style","pointerEvents","onClick","onFocus","Icon","name","size","stroke","rotation","map","index","optionProps","isHighlighted","key","onMouseEnter","role"],"mappings":"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"}

package/dist/index46.js

@@ -1,200 +1,204 @@
-import t, { useState as h, useRef as f, useCallback as g, useEffect as _ } from "react";
-/* empty css         */
-import C from "./index232.js";
-import { Icon as M } from "./index6.js";
-import { useStableId as v } from "./index205.js";
-import { getA11yNameAttributes as T } from "./index81.js";
-import "./index72.js";
-import { useCombobox as le } from "./index68.js";
-function c() {
-  return c = Object.assign ? Object.assign.bind() : function(i) {
-    for (var l = 1; l < arguments.length; l++) {
-      var r = arguments[l];
-      for (var u in r) ({}).hasOwnProperty.call(r, u) && (i[u] = r[u]);
-    }
-    return i;
-  }, c.apply(null, arguments);
-}
-const ve = ({
-  onCountrycodeChange: i,
-  onNumberChange: l,
-  error: r,
-  errorMessage: u,
-  value: d,
-  label: s,
-  automationId: p = "",
-  ariaLabel: P,
-  ariaLabelledBy: x,
-  ariaDescribedBy: z,
-  phoneNumberAriaLabel: $,
-  countryCodeAriaLabel: G,
-  disabled: a = !1
+import e, { useRef as R, useState as g, useCallback as C, useEffect as b } from "react";
+const A = ({
+  size: n = 14,
+  className: s
+}) => /* @__PURE__ */ e.createElement("svg", {
+  width: n,
+  height: n,
+  viewBox: "0 0 18 18",
+  fill: "currentColor",
+  className: s,
+  "aria-hidden": "true"
+}, /* @__PURE__ */ e.createElement("path", {
+  d: "M3.025,5.623c.068,.204,.26,.342,.475,.342s.406-.138,.475-.342l.421-1.263,1.263-.421c.204-.068,.342-.259,.342-.474s-.138-.406-.342-.474l-1.263-.421-.421-1.263c-.137-.408-.812-.408-.949,0l-.421,1.263-1.263,.421c-.204,.068-.342,.259-.342,.474s.138,.406,.342,.474l1.263,.421,.421,1.263Z"
+}), /* @__PURE__ */ e.createElement("path", {
+  d: "M16.525,8.803l-4.535-1.793-1.793-4.535c-.227-.572-1.168-.572-1.395,0l-1.793,4.535-4.535,1.793c-.286,.113-.475,.39-.475,.697s.188,.584,.475,.697l4.535,1.793,1.793,4.535c.113,.286,.39,.474,.697,.474s.584-.188,.697-.474l1.793-4.535,4.535-1.793c.286-.113,.475-.39,.475-.697s-.188-.584-.475-.697Z"
+})), U = ({
+  size: n = 14
+}) => /* @__PURE__ */ e.createElement("svg", {
+  width: n,
+  height: n,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  "aria-hidden": "true"
+}, /* @__PURE__ */ e.createElement("circle", {
+  cx: "12",
+  cy: "12",
+  r: "10"
+}), /* @__PURE__ */ e.createElement("path", {
+  d: "M12 6v6l4 2"
+})), q = ({
+  size: n = 14
+}) => /* @__PURE__ */ e.createElement("svg", {
+  width: n,
+  height: n,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "2.2",
+  strokeLinecap: "round",
+  "aria-hidden": "true"
+}, /* @__PURE__ */ e.createElement("path", {
+  d: "M18 6 6 18M6 6l12 12"
+})), H = /[.*+?^${}()|[\]\\]/g, J = (n, s, m) => {
+  const o = (m && m.length ? m : [s]).map((r) => (r || "").trim()).filter(Boolean);
+  if (!o.length) return n;
+  o.sort((r, i) => i.length - r.length);
+  const k = new Set(o.map((r) => r.toLowerCase())), l = o.map((r) => r.replace(H, "\\$&")).join("|");
+  return n.split(new RegExp(`(${l})`, "ig")).map((r, i) => k.has(r.toLowerCase()) ? /* @__PURE__ */ e.createElement("mark", {
+    key: i
+  }, r) : /* @__PURE__ */ e.createElement(e.Fragment, {
+    key: i
+  }, r));
+}, P = /* @__PURE__ */ e.memo(({
+  value: n,
+  onChange: s,
+  onSelect: m,
+  onSubmit: o,
+  onClear: k,
+  suggestions: l = [],
+  isLoading: v = !1,
+  helperText: r,
+  helperVariant: i = "info",
+  placeholder: S = "Get any of your contracts",
+  placeholderPrefix: d,
+  examples: u,
+  collapsed: c = !1,
+  onExpand: I,
+  automationId: B = "nl-search-input",
+  ariaLabel: F = "Natural language search"
 }) => {
-  const [E, k] = h(d?.countryCode || C[0].dial_code), [n, y] = h(!1), [w, B] = h(C), [Q, R] = h(""), [U, F] = h(""), W = f(null), O = f(null), K = f(null), m = f(!1), N = v(p, "phone-label"), V = v(p, "phone-listbox"), X = v(p, "phone-input"), j = v(p, "phone-error"), b = C.find((e) => e.dial_code === E), q = g(() => {
-    y(!1), R(""), B(C);
-  }, []), I = g((e) => {
-    e && (k(e), i(e)), q();
-  }, [i, q]), Y = g((e) => {
-    m.current = !0, I(e.dial_code);
-  }, [I]), {
-    containerProps: H,
-    inputProps: Z,
-    listboxProps: ee,
-    getOptionProps: te,
-    highlightedIndex: ne,
-    setHighlightedIndex: J
-  } = le({
-    items: w,
-    isOpen: n,
-    onOpenChange: y,
-    onSelect: Y,
-    listboxId: V
-  }), oe = (e) => {
-    const o = e.target.value;
-    R(o), J(-1);
-    const S = C.filter((A) => A.name.toLowerCase().includes(o.toLowerCase()) || A.dial_code.toLowerCase().includes(o.toLowerCase()) || A.code.toLowerCase().includes(o.toLowerCase()));
-    B(S);
-  }, D = f(n);
-  _(() => {
-    let e = null;
-    return D.current && !n && m.current && (e = requestAnimationFrame(() => {
-      O.current?.focus();
-    })), D.current && !n && (m.current = !1), D.current = n, () => {
-      e !== null && cancelAnimationFrame(e);
-    };
-  }, [n]), _(() => {
-    d && (k(d.countryCode), F(d.number));
-  }, [d]), _(() => {
-    let e = null;
-    return n && (e = requestAnimationFrame(() => {
-      K.current?.focus();
-    })), () => {
-      e !== null && cancelAnimationFrame(e);
-    };
-  }, [n]);
-  const re = (e) => {
-    const o = e.replace(/\D/g, "");
-    F(o), l(o);
-  }, L = g(() => {
-    a || y((e) => !e);
-  }, [a]), ae = g((e) => {
-    if (!a)
-      switch (e.key) {
-        case "Enter":
-        case " ":
-          e.preventDefault(), L();
-          break;
-        case "ArrowDown":
-          e.preventDefault(), n || y(!0);
-          break;
+  const D = R(null), K = R(null), [w, E] = g(!1), [h, N] = g(-1), j = C(() => {
+    c && I?.();
+  }, [c, I]), p = !!u && u.length > 0 && !n && !w, [L, W] = g(0), [f, _] = g(""), [y, $] = g("typing");
+  b(() => {
+    if (!p) return;
+    const t = u[L % u.length] || "";
+    let a = 60;
+    if (y === "typing")
+      if (f.length < t.length)
+        a = 55 + Math.random() * 35;
+      else {
+        const x = setTimeout(() => $("erasing"), 1800);
+        return () => clearTimeout(x);
       }
-  }, [a, n, L]), ce = T({
-    ariaLabelledBy: x || (!P && s ? N : void 0),
-    ariaLabel: x ? void 0 : P || (s ? void 0 : "Phone number")
-  }), se = T({
-    ariaLabelledBy: !$ && s ? N : void 0,
-    ariaLabel: $ || (s ? void 0 : "Phone number"),
-    ariaDescribedBy: r ? j : z
-  }), ie = G || `Select country code. Current: ${b?.name} ${b?.dial_code}`;
-  return /* @__PURE__ */ t.createElement("div", c({
-    className: "phone-input-container-se-design-main-container",
-    "data-automation-id": p
-  }, H, {
-    onKeyDownCapture: (e) => {
-      e.key === "Escape" && n && (m.current = !0), H.onKeyDownCapture(e);
-    }
-  }), s && /* @__PURE__ */ t.createElement("div", {
-    id: N,
-    className: "label-container"
-  }, s), /* @__PURE__ */ t.createElement("div", c({
-    role: "group"
-  }, ce, {
-    className: `phone-input-container-se-design-main ${r ? "error" : ""}`,
-    ref: W
-  }), /* @__PURE__ */ t.createElement("div", {
-    className: "phone-input-container-se-design"
-  }, /* @__PURE__ */ t.createElement("button", {
-    ref: O,
-    type: "button",
-    className: `phone-input-container-se-design-country-code focus-outline rounded ${a ? "cursor-not-allowed opacity-60" : ""}`,
-    onClick: L,
-    onKeyDown: ae,
-    "aria-haspopup": "listbox",
-    "aria-expanded": n,
-    "aria-controls": n ? V : void 0,
-    "aria-label": ie,
-    disabled: a,
-    "data-automation-id": "country-code-selector"
-  }, /* @__PURE__ */ t.createElement("img", {
-    src: `https://flagcdn.com/${b?.code.toLowerCase()}.svg`,
-    alt: "",
-    "aria-hidden": "true",
-    width: "16"
-  }), /* @__PURE__ */ t.createElement("span", null, b?.dial_code), /* @__PURE__ */ t.createElement(M, {
-    name: "chevron",
-    className: n ? "rotate-180" : "",
-    "aria-hidden": "true"
-  })), /* @__PURE__ */ t.createElement("span", {
-    className: "divider",
-    "aria-hidden": "true"
-  }), /* @__PURE__ */ t.createElement("input", c({
-    id: X,
-    type: "tel",
-    placeholder: "Enter phone number",
-    className: `phone-input-container-se-design-phone-number-input ${a ? "disabled" : ""}`,
-    onChange: (e) => re(e.target.value),
-    value: U,
-    pattern: "[0-9]*",
-    disabled: a,
-    "aria-invalid": r || void 0
-  }, se, {
-    "data-automation-id": "phone-number-input-field"
-  }))), n && /* @__PURE__ */ t.createElement("div", c({}, ee, {
-    className: "phone-input-container-se-design-country-code-list",
-    "aria-label": "Select country",
-    "data-automation-id": "country-code-list"
-  }), /* @__PURE__ */ t.createElement("div", {
-    className: "search-input-wrapper"
-  }, /* @__PURE__ */ t.createElement(M, {
-    name: "search",
-    className: "search-icon",
-    "aria-hidden": "true"
-  }), /* @__PURE__ */ t.createElement("input", c({
-    ref: K
-  }, Z, {
+    else if (y === "erasing")
+      if (f.length > 0)
+        a = 28;
+      else {
+        const x = setTimeout(() => {
+          W((O) => (O + 1) % u.length), $("typing");
+        }, 260);
+        return () => clearTimeout(x);
+      }
+    const M = setTimeout(() => {
+      y === "typing" ? _(t.slice(0, f.length + 1)) : y === "erasing" && _(t.slice(0, f.length - 1));
+    }, a);
+    return () => clearTimeout(M);
+  }, [p, L, f, y, u]), b(() => {
+    p || (_(""), $("typing"));
+  }, [p]), b(() => {
+    N(-1);
+  }, [l]), b(() => {
+    if (!w) return;
+    const t = (a) => {
+      D.current && !D.current.contains(a.target) && E(!1);
+    };
+    return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
+  }, [w]);
+  const Z = w && l.length > 0, T = C((t) => {
+    m?.(t), E(!1);
+  }, [m]), z = C((t) => {
+    t.key === "ArrowDown" && l.length ? (t.preventDefault(), N((a) => (a + 1) % l.length)) : t.key === "ArrowUp" && l.length ? (t.preventDefault(), N((a) => a <= 0 ? l.length - 1 : a - 1)) : t.key === "Enter" ? h >= 0 && l[h] ? (t.preventDefault(), T(l[h])) : n.trim() && (t.preventDefault(), o?.(n.trim()), E(!1)) : t.key === "Escape" && E(!1);
+  }, [l, h, n, T, o]), G = C(() => {
+    s(""), k?.();
+  }, [s, k]);
+  return /* @__PURE__ */ e.createElement("div", {
+    className: `nl-wrap${c ? " is-collapsed" : ""}`,
+    ref: D,
+    "data-automation-id": B
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: `nl-input-row${w ? " is-active" : ""}${v ? " is-loading" : ""}${c ? " is-collapsed" : ""}`
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: "nl-mark",
+    "aria-hidden": !c,
+    role: c ? "button" : void 0,
+    "aria-label": c ? "Open AI search" : void 0,
+    tabIndex: c ? 0 : -1,
+    onClick: j,
+    onKeyDown: c ? (t) => {
+      (t.key === "Enter" || t.key === " ") && (t.preventDefault(), I?.());
+    } : void 0
+  }, /* @__PURE__ */ e.createElement(A, {
+    size: 14
+  })), /* @__PURE__ */ e.createElement("input", {
+    ref: K,
     type: "text",
-    placeholder: "Search countries",
-    className: "phone-input-container-se-design-country-code-list-item-input",
-    onChange: oe,
-    value: Q,
-    "aria-label": "Search countries",
-    "data-automation-id": "country-code-search-input"
-  }))), w.length > 0 ? w.map((e, o) => {
-    const S = te(o, e.dial_code === E);
-    return /* @__PURE__ */ t.createElement("div", c({
-      key: e.code
-    }, S, {
-      className: `phone-input-container-se-design-country-code-list-item ${ne === o ? "highlighted" : ""} ${e.dial_code === E ? "selected" : ""}`,
-      onClick: () => {
-        m.current = !0, I(e.dial_code);
-      },
-      onMouseEnter: () => J(o)
-    }), /* @__PURE__ */ t.createElement("img", {
-      src: `https://flagcdn.com/${e.code.toLowerCase()}.svg`,
-      alt: "",
-      "aria-hidden": "true",
-      width: "16"
-    }), /* @__PURE__ */ t.createElement("span", null, e.name), /* @__PURE__ */ t.createElement("span", null, "(", e.dial_code, ")"));
-  }) : /* @__PURE__ */ t.createElement("div", {
-    className: "phone-input-container-se-design-country-code-list-item-no-results",
-    role: "status"
-  }, "No results found"))), r && /* @__PURE__ */ t.createElement("div", {
-    id: j,
-    className: "error-message",
-    role: "alert"
-  }, u));
-};
+    className: "nl-input",
+    value: n,
+    placeholder: p ? "" : S,
+    autoComplete: "off",
+    "aria-label": F,
+    tabIndex: c ? -1 : 0,
+    disabled: c,
+    onChange: (t) => s(t.target.value),
+    onFocus: () => E(!0),
+    onKeyDown: z
+  }), p && /* @__PURE__ */ e.createElement("div", {
+    className: "nl-typewriter",
+    "aria-hidden": "true"
+  }, d && /* @__PURE__ */ e.createElement("span", {
+    className: "nl-typewriter__prefix"
+  }, d), /* @__PURE__ */ e.createElement("span", {
+    className: "nl-typewriter__example"
+  }, f), /* @__PURE__ */ e.createElement("span", {
+    className: "nl-typewriter__caret"
+  }), d && /['"`]\s*$/.test(d) && /* @__PURE__ */ e.createElement("span", {
+    className: "nl-typewriter__prefix"
+  }, d.trim().slice(-1))), v && /* @__PURE__ */ e.createElement("span", {
+    className: "nl-spinner show",
+    role: "status",
+    "aria-label": "Resolving"
+  }), !v && n && /* @__PURE__ */ e.createElement("button", {
+    type: "button",
+    className: "nl-clear show",
+    title: "Clear search",
+    onClick: G
+  }, /* @__PURE__ */ e.createElement(q, {
+    size: 14
+  }))), Z && /* @__PURE__ */ e.createElement("div", {
+    className: "nl-suggestions show",
+    role: "listbox"
+  }, l.map((t, a) => /* @__PURE__ */ e.createElement("button", {
+    key: `${t.source}-${t.text}`,
+    type: "button",
+    role: "option",
+    "aria-selected": a === h,
+    className: `nl-sug${a === h ? " kb-active" : ""}`,
+    onMouseEnter: () => N(a),
+    onMouseDown: (M) => {
+      M.preventDefault(), T(t);
+    }
+  }, t.source === "recent" ? /* @__PURE__ */ e.createElement(U, {
+    size: 16
+  }) : /* @__PURE__ */ e.createElement(A, {
+    size: 16,
+    className: "sparkle"
+  }), /* @__PURE__ */ e.createElement("span", {
+    className: "sug-text"
+  }, J(t.text, n.trim(), t.highlight_terms)), t.source === "recent" && /* @__PURE__ */ e.createElement("span", {
+    className: "sug-meta"
+  }, "Recent")))), r && /* @__PURE__ */ e.createElement("div", {
+    className: `nl-helper nl-helper--${i}`,
+    role: i === "error" ? "alert" : "status"
+  }, r));
+});
+P.displayName = "NLSearchInput";
 export {
-  ve as PhoneInput
+  P as NLSearchInput
 };
 //# sourceMappingURL=index46.js.map

package/dist/index46.js.map

@@ -1 +1 @@
-{"version":3,"file":"index46.js","sources":["../src/components/PhoneInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState, useCallback } from 'react';\nimport './style.scss';\nimport countriesInfoJson from './countriesInfo.json';\nimport { Icon } from '../Icon';\nimport { useStableId } from '../../utils/useStableId';\nimport { getA11yNameAttributes, useCombobox } from '../../utils/a11y';\n\nexport interface PhoneInputProps {\n  onCountrycodeChange: (countryCode: string) => void;\n  onNumberChange: (number: string) => void;\n  error?: boolean;\n  errorMessage?: string;\n  value?: {\n    countryCode: string;\n    number: string;\n  };\n  label?: string;\n  automationId?: string;\n  /**\n   * Accessible label for the entire phone input group (role=\"group\").\n   * Provides context for screen readers (e.g., \"Two-step verification phone number for signer 1\").\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of element(s) that label the group (highest precedence over ariaLabel).\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) providing additional description for the phone number input.\n   */\n  ariaDescribedBy?: string;\n  /**\n   * Override aria-label for the phone number input specifically.\n   * Defaults to the visible label text or 'Phone number'.\n   */\n  phoneNumberAriaLabel?: string;\n  /**\n   * Override aria-label for the country code combobox button.\n   * Defaults to \"Select country code. Current: {name} {dial_code}\".\n   */\n  countryCodeAriaLabel?: string;\n  /**\n   * Whether the input is disabled\n   */\n  disabled?: boolean;\n}\n\nexport const PhoneInput: React.FC<PhoneInputProps> = ({\n  onCountrycodeChange,\n  onNumberChange,\n  error,\n  errorMessage,\n  value,\n  label,\n  automationId = '',\n  ariaLabel,\n  ariaLabelledBy,\n  ariaDescribedBy,\n  phoneNumberAriaLabel,\n  countryCodeAriaLabel,\n  disabled = false\n}) => {\n  const [countryCode, setCountryCode] = useState(value?.countryCode || countriesInfoJson[0].dial_code);\n  const [displaySelectCountryCode, setDisplaySelectCountryCode] = useState(false);\n  const [countriesInfo, setCountriesInfo] = useState(countriesInfoJson);\n  const [searchValue, setSearchValue] = useState('');\n  const [enteredNumber, setEnteredNumber] = useState('');\n  const containerRef = useRef<HTMLDivElement>(null);\n  const countryButtonRef = useRef<HTMLButtonElement>(null);\n  const searchInputRef = useRef<HTMLInputElement>(null);\n  const restoreFocusToButtonRef = useRef(false);\n\n  // Generate stable IDs for ARIA relationships\n  const labelId = useStableId(automationId, 'phone-label');\n  const listboxId = useStableId(automationId, 'phone-listbox');\n  const phoneInputId = useStableId(automationId, 'phone-input');\n  const errorId = useStableId(automationId, 'phone-error');\n\n  const countryInfo = countriesInfoJson.find((country) => country.dial_code === countryCode);\n\n  // Close dropdown and reset state\n  const closeDropdown = useCallback(() => {\n    setDisplaySelectCountryCode(false);\n    setSearchValue('');\n    setCountriesInfo(countriesInfoJson);\n  }, []);\n\n  const handleCountryCodeSelect = useCallback(\n    (country: string) => {\n      if (country) {\n        setCountryCode(country);\n        onCountrycodeChange(country);\n      }\n      closeDropdown();\n      // Focus return is handled by useEffect that watches displaySelectCountryCode\n    },\n    [onCountrycodeChange, closeDropdown]\n  );\n\n  const handleSelectFromDropdown = useCallback(\n    (country: typeof countriesInfoJson[0]) => {\n      restoreFocusToButtonRef.current = true;\n      handleCountryCodeSelect(country.dial_code);\n    },\n    [handleCountryCodeSelect]\n  );\n\n  // Use comprehensive useCombobox hook for country search\n  const {\n    containerProps,\n    inputProps: comboboxInputProps,\n    listboxProps,\n    getOptionProps,\n    highlightedIndex,\n    setHighlightedIndex\n  } = useCombobox({\n    items: countriesInfo,\n    isOpen: displaySelectCountryCode,\n    onOpenChange: setDisplaySelectCountryCode,\n    onSelect: handleSelectFromDropdown,\n    listboxId\n  });\n\n  const handleCountryCodeSearch = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const searchVal = event.target.value;\n    setSearchValue(searchVal);\n    setHighlightedIndex(-1);\n    const filteredCountries = countriesInfoJson.filter(\n      (country) =>\n        country.name.toLowerCase().includes(searchVal.toLowerCase()) ||\n        country.dial_code.toLowerCase().includes(searchVal.toLowerCase()) ||\n        country.code.toLowerCase().includes(searchVal.toLowerCase())\n    );\n    setCountriesInfo(filteredCountries);\n  };\n\n  // Return focus to button when dropdown closes\n  const prevDisplaySelectCountryCodeRef = useRef(displaySelectCountryCode);\n  useEffect(() => {\n    let rafId: number | null = null;\n    // If dropdown was open and is now closed, return focus to button\n    // ONLY when the close was triggered from within the component (Escape/selection),\n    // not when the user moved focus outside (focus-out dismissal).\n    if (prevDisplaySelectCountryCodeRef.current && !displaySelectCountryCode && restoreFocusToButtonRef.current) {\n      rafId = requestAnimationFrame(() => {\n        countryButtonRef.current?.focus();\n      });\n    }\n    if (prevDisplaySelectCountryCodeRef.current && !displaySelectCountryCode) {\n      restoreFocusToButtonRef.current = false;\n    }\n    prevDisplaySelectCountryCodeRef.current = displaySelectCountryCode;\n    return () => {\n      if (rafId !== null) {\n        cancelAnimationFrame(rafId);\n      }\n    };\n  }, [displaySelectCountryCode]);\n\n  useEffect(() => {\n    if (value) {\n      setCountryCode(value.countryCode);\n      setEnteredNumber(value.number);\n    }\n  }, [value]);\n\n  // Focus search input when dropdown opens\n  useEffect(() => {\n    let rafId: number | null = null;\n    if (displaySelectCountryCode) {\n      rafId = requestAnimationFrame(() => {\n        searchInputRef.current?.focus();\n      });\n    }\n    return () => {\n      if (rafId !== null) {\n        cancelAnimationFrame(rafId);\n      }\n    };\n  }, [displaySelectCountryCode]);\n\n  const handleEnteredNumberChange = (val: string) => {\n    const numericValue = val.replace(/\\D/g, ''); // Remove non-numeric characters\n    setEnteredNumber(numericValue);\n    onNumberChange(numericValue);\n  };\n\n  const toggleDropdown = useCallback(() => {\n    if (disabled) return;\n    setDisplaySelectCountryCode((prev) => !prev);\n  }, [disabled]);\n\n  const handleCountryButtonKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (disabled) return;\n\n      switch (e.key) {\n        case 'Enter':\n        case ' ':\n          e.preventDefault();\n          toggleDropdown();\n          break;\n        case 'ArrowDown':\n          e.preventDefault();\n          if (!displaySelectCountryCode) {\n            setDisplaySelectCountryCode(true);\n          }\n          break;\n        // Escape is handled by useDismissOnEscape hook\n      }\n    },\n    [disabled, displaySelectCountryCode, toggleDropdown]\n  );\n\n  // Group label (role=\"group\"): ariaLabelledBy > ariaLabel > visible label > fallback\n  const groupAriaLabelledBy = ariaLabelledBy || (!ariaLabel && label ? labelId : undefined);\n  const groupAriaLabel = !ariaLabelledBy ? (ariaLabel || (!label ? 'Phone number' : undefined)) : undefined;\n  const groupA11yProps = getA11yNameAttributes({ ariaLabelledBy: groupAriaLabelledBy, ariaLabel: groupAriaLabel });\n\n  // Phone number input: caller override > visible label > fallback 'Phone number'\n  const phoneInputA11yProps = getA11yNameAttributes({\n    ariaLabelledBy: !phoneNumberAriaLabel && label ? labelId : undefined,\n    ariaLabel: phoneNumberAriaLabel || (!label ? 'Phone number' : undefined),\n    ariaDescribedBy: error ? errorId : ariaDescribedBy\n  });\n\n  // Country code button label: caller override > default dynamic label\n  const computedCountryCodeAriaLabel = countryCodeAriaLabel ||\n    `Select country code. Current: ${countryInfo?.name} ${countryInfo?.dial_code}`;\n\n  return (\n    <div \n      className=\"phone-input-container-se-design-main-container\" \n      data-automation-id={automationId}\n      {...containerProps}\n      onKeyDownCapture={(e) => {\n        if (e.key === 'Escape' && displaySelectCountryCode) {\n          restoreFocusToButtonRef.current = true;\n        }\n        containerProps.onKeyDownCapture(e);\n      }}\n    >\n      {label && (\n        <div id={labelId} className=\"label-container\">\n          {label}\n        </div>\n      )}\n      <div\n        role=\"group\"\n        {...groupA11yProps}\n        className={`phone-input-container-se-design-main ${error ? 'error' : ''}`}\n        ref={containerRef}\n      >\n        <div className=\"phone-input-container-se-design\">\n          <button\n            ref={countryButtonRef}\n            type=\"button\"\n            className={`phone-input-container-se-design-country-code focus-outline rounded ${disabled ? 'cursor-not-allowed opacity-60' : ''}`}\n            onClick={toggleDropdown}\n            onKeyDown={handleCountryButtonKeyDown}\n            aria-haspopup=\"listbox\"\n            aria-expanded={displaySelectCountryCode}\n            aria-controls={displaySelectCountryCode ? listboxId : undefined}\n            aria-label={computedCountryCodeAriaLabel}\n            disabled={disabled}\n            data-automation-id=\"country-code-selector\"\n          >\n            <img\n              src={`https://flagcdn.com/${countryInfo?.code.toLowerCase()}.svg`}\n              alt=\"\"\n              aria-hidden=\"true\"\n              width=\"16\"\n            />\n            <span>{countryInfo?.dial_code}</span>\n            <Icon\n              name=\"chevron\"\n              className={!displaySelectCountryCode ? '' : 'rotate-180'}\n              aria-hidden=\"true\"\n            />\n          </button>\n          <span className=\"divider\" aria-hidden=\"true\" />\n          <input\n            id={phoneInputId}\n            type=\"tel\"\n            placeholder=\"Enter phone number\"\n            className={`phone-input-container-se-design-phone-number-input ${disabled ? 'disabled' : ''}`}\n            onChange={(event) => handleEnteredNumberChange(event.target.value)}\n            value={enteredNumber}\n            pattern=\"[0-9]*\"\n            disabled={disabled}\n            aria-invalid={error || undefined}\n            {...phoneInputA11yProps}\n            data-automation-id=\"phone-number-input-field\"\n          />\n        </div>\n\n        {displaySelectCountryCode && (\n          <div\n            {...listboxProps}\n            className=\"phone-input-container-se-design-country-code-list\"\n            aria-label=\"Select country\"\n            data-automation-id=\"country-code-list\"\n          >\n            <div className=\"search-input-wrapper\">\n              <Icon name=\"search\" className=\"search-icon\" aria-hidden=\"true\" />\n              <input\n                ref={searchInputRef}\n                {...comboboxInputProps}\n                type=\"text\"\n                placeholder=\"Search countries\"\n                className=\"phone-input-container-se-design-country-code-list-item-input\"\n                onChange={handleCountryCodeSearch}\n                value={searchValue}\n                aria-label=\"Search countries\"\n                data-automation-id=\"country-code-search-input\"\n              />\n            </div>\n            {countriesInfo.length > 0 ? (\n              countriesInfo.map((country, index) => {\n                const optionProps = getOptionProps(index, country.dial_code === countryCode);\n                return (\n                  <div\n                    key={country.code}\n                    {...optionProps}\n                    className={`phone-input-container-se-design-country-code-list-item ${\n                      highlightedIndex === index ? 'highlighted' : ''\n                    } ${country.dial_code === countryCode ? 'selected' : ''}`}\n                    onClick={() => {\n                      restoreFocusToButtonRef.current = true;\n                      handleCountryCodeSelect(country.dial_code);\n                    }}\n                    onMouseEnter={() => setHighlightedIndex(index)}\n                  >\n                    <img\n                      src={`https://flagcdn.com/${country.code.toLowerCase()}.svg`}\n                      alt=\"\"\n                      aria-hidden=\"true\"\n                      width=\"16\"\n                    />\n                    <span>{country.name}</span>\n                    <span>({country.dial_code})</span>\n                  </div>\n                );\n              })\n            ) : (\n              <div className=\"phone-input-container-se-design-country-code-list-item-no-results\" role=\"status\">\n                No results found\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n      {error && (\n        <div id={errorId} className=\"error-message\" role=\"alert\">\n          {errorMessage}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["PhoneInput","onCountrycodeChange","onNumberChange","error","errorMessage","value","label","automationId","ariaLabel","ariaLabelledBy","ariaDescribedBy","phoneNumberAriaLabel","countryCodeAriaLabel","disabled","countryCode","setCountryCode","useState","countriesInfoJson","dial_code","displaySelectCountryCode","setDisplaySelectCountryCode","countriesInfo","setCountriesInfo","searchValue","setSearchValue","enteredNumber","setEnteredNumber","containerRef","useRef","countryButtonRef","searchInputRef","restoreFocusToButtonRef","labelId","useStableId","listboxId","phoneInputId","errorId","countryInfo","find","country","closeDropdown","useCallback","handleCountryCodeSelect","handleSelectFromDropdown","current","containerProps","inputProps","comboboxInputProps","listboxProps","getOptionProps","highlightedIndex","setHighlightedIndex","useCombobox","items","isOpen","onOpenChange","onSelect","handleCountryCodeSearch","event","searchVal","target","filteredCountries","filter","name","toLowerCase","includes","code","prevDisplaySelectCountryCodeRef","useEffect","rafId","requestAnimationFrame","focus","cancelAnimationFrame","number","handleEnteredNumberChange","val","numericValue","replace","toggleDropdown","prev","handleCountryButtonKeyDown","e","key","preventDefault","groupA11yProps","getA11yNameAttributes","undefined","groupAriaLabel","phoneInputA11yProps","computedCountryCodeAriaLabel","React","createElement","_extends","className","onKeyDownCapture","id","role","ref","type","onClick","onKeyDown","src","alt","width","Icon","placeholder","onChange","pattern","length","map","index","optionProps","onMouseEnter"],"mappings":"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"}
+{"version":3,"file":"index46.js","sources":["../src/components/NLSearch/NLSearchInput.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\n\nexport type NLSuggestionSource = 'recent' | 'global';\n\nexport interface NLSuggestion {\n  text: string;\n  source: NLSuggestionSource;\n  /**\n   * Words inside `text` the backend wants <mark>-highlighted. Set when\n   * the user's typed prefix matched via a synonym (typed \"documents\",\n   * suggestion says \"contracts\" — backend returns `[\"contracts\"]` so the\n   * canonical word still lights up). Empty/undefined falls back to\n   * highlighting the literal typed query.\n   */\n  highlight_terms?: string[];\n}\n\nexport interface NLSearchInputProps {\n  value: string;\n  onChange: (value: string) => void;\n  onSelect?: (suggestion: NLSuggestion) => void;\n  onSubmit?: (text: string) => void;\n  onClear?: () => void;\n  suggestions?: NLSuggestion[];\n  isLoading?: boolean;\n  helperText?: string;\n  helperVariant?: 'info' | 'warning' | 'error';\n  placeholder?: string;\n  /**\n   * When provided alongside `examples`, the input renders a typewriter\n   * placeholder overlay: `<placeholderPrefix><typed-example>` cycling\n   * through the list every ~5s. The native `placeholder` prop is\n   * suppressed while the overlay is active so the two don't collide.\n   */\n  placeholderPrefix?: string;\n  examples?: string[];\n  /**\n   * When true, the bar collapses to just the sparkle disc — the input,\n   * placeholder overlay, clear button, and helper line all hide via\n   * width + opacity transitions. Clicking the disc fires `onExpand`\n   * (the parent toggles `collapsed` back to false). Auto-focuses the\n   * input after the expand animation finishes.\n   */\n  collapsed?: boolean;\n  onExpand?: () => void;\n  automationId?: string;\n  ariaLabel?: string;\n}\n\nconst SparkleIcon = ({ size = 14, className }: { size?: number; className?: string }) => (\n  <svg width={size} height={size} viewBox=\"0 0 18 18\" fill=\"currentColor\" className={className} aria-hidden=\"true\">\n    <path d=\"M3.025,5.623c.068,.204,.26,.342,.475,.342s.406-.138,.475-.342l.421-1.263,1.263-.421c.204-.068,.342-.259,.342-.474s-.138-.406-.342-.474l-1.263-.421-.421-1.263c-.137-.408-.812-.408-.949,0l-.421,1.263-1.263,.421c-.204,.068-.342,.259-.342,.474s.138,.406,.342,.474l1.263,.421,.421,1.263Z\" />\n    <path d=\"M16.525,8.803l-4.535-1.793-1.793-4.535c-.227-.572-1.168-.572-1.395,0l-1.793,4.535-4.535,1.793c-.286,.113-.475,.39-.475,.697s.188,.584,.475,.697l4.535,1.793,1.793,4.535c.113,.286,.39,.474,.697,.474s.584-.188,.697-.474l1.793-4.535,4.535-1.793c.286-.113,.475-.39,.475-.697s-.188-.584-.475-.697Z\" />\n  </svg>\n);\n\nconst ClockIcon = ({ size = 14 }: { size?: number }) => (\n  <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n    <circle cx=\"12\" cy=\"12\" r=\"10\" />\n    <path d=\"M12 6v6l4 2\" />\n  </svg>\n);\n\nconst CloseIcon = ({ size = 14 }: { size?: number }) => (\n  <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" aria-hidden=\"true\">\n    <path d=\"M18 6 6 18M6 6l12 12\" />\n  </svg>\n);\n\nconst RE_SPECIAL = /[.*+?^${}()|[\\]\\\\]/g;\n\n/**\n * Wrap each case-insensitive occurrence of `terms` (any of them) inside\n * `text` in a <mark>. Long terms first so \"contracts\" wins over a\n * shorter prefix that overlaps. Falls back to splitting on the literal\n * `query` if no `terms` were provided by the backend.\n */\nconst highlightMatch = (\n  text: string,\n  query: string,\n  terms?: string[],\n): React.ReactNode => {\n  const needles = (terms && terms.length ? terms : [query])\n    .map((t) => (t || '').trim())\n    .filter(Boolean);\n  if (!needles.length) return text;\n  // Longest first so substrings don't pre-empt the longer canonical\n  // match (e.g. \"contracts\" should win over \"con\").\n  needles.sort((a, b) => b.length - a.length);\n  const needleSet = new Set(needles.map((n) => n.toLowerCase()));\n  const pattern = needles.map((n) => n.replace(RE_SPECIAL, '\\\\$&')).join('|');\n  const parts = text.split(new RegExp(`(${pattern})`, 'ig'));\n  return parts.map((part, idx) =>\n    needleSet.has(part.toLowerCase())\n      ? <mark key={idx}>{part}</mark>\n      : <React.Fragment key={idx}>{part}</React.Fragment>,\n  );\n};\n\nexport const NLSearchInput: React.FC<NLSearchInputProps> = React.memo(\n  ({\n    value,\n    onChange,\n    onSelect,\n    onSubmit,\n    onClear,\n    suggestions = [],\n    isLoading = false,\n    helperText,\n    helperVariant = 'info',\n    placeholder = 'Get any of your contracts',\n    placeholderPrefix,\n    examples,\n    collapsed = false,\n    onExpand,\n    automationId = 'nl-search-input',\n    ariaLabel = 'Natural language search'\n  }) => {\n    const wrapRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const [focused, setFocused] = useState(false);\n    const [activeIndex, setActiveIndex] = useState(-1);\n\n    const handleMarkClick = useCallback(() => {\n      if (collapsed) onExpand?.();\n    }, [collapsed, onExpand]);\n\n    // Typewriter overlay state. Only animates when:\n    //   • caller passed a non-empty `examples` list,\n    //   • the input is empty (no user-typed value),\n    //   • the input isn't focused.\n    // On any of those conditions flipping false the overlay hides\n    // instantly and the native input takes over.\n    const showTypewriter =\n      !!examples && examples.length > 0 && !value && !focused;\n    const [twIdx, setTwIdx] = useState(0);\n    const [twText, setTwText] = useState('');\n    const [twPhase, setTwPhase] = useState<'typing' | 'holding' | 'erasing'>('typing');\n\n    useEffect(() => {\n      if (!showTypewriter) return undefined;\n      const target = examples![twIdx % examples!.length] || '';\n      let delay = 60;\n      if (twPhase === 'typing') {\n        if (twText.length < target.length) {\n          delay = 55 + Math.random() * 35; // slight jitter for organic feel\n        } else {\n          // Finished typing — hold the full sentence before erasing.\n          const t = setTimeout(() => setTwPhase('erasing'), 1800);\n          return () => clearTimeout(t);\n        }\n      } else if (twPhase === 'erasing') {\n        if (twText.length > 0) {\n          delay = 28;\n        } else {\n          // Erased — short pause then cycle to next example.\n          const t = setTimeout(() => {\n            setTwIdx((i) => (i + 1) % examples!.length);\n            setTwPhase('typing');\n          }, 260);\n          return () => clearTimeout(t);\n        }\n      }\n      const tick = setTimeout(() => {\n        if (twPhase === 'typing') setTwText(target.slice(0, twText.length + 1));\n        else if (twPhase === 'erasing') setTwText(target.slice(0, twText.length - 1));\n      }, delay);\n      return () => clearTimeout(tick);\n    }, [showTypewriter, twIdx, twText, twPhase, examples]);\n\n    // Reset typewriter when overlay re-engages so it starts cleanly.\n    useEffect(() => {\n      if (!showTypewriter) {\n        setTwText('');\n        setTwPhase('typing');\n      }\n    }, [showTypewriter]);\n\n    useEffect(() => {\n      setActiveIndex(-1);\n    }, [suggestions]);\n\n    useEffect(() => {\n      if (!focused) return undefined;\n      const onDocClick = (e: MouseEvent) => {\n        if (wrapRef.current && !wrapRef.current.contains(e.target as Node)) {\n          setFocused(false);\n        }\n      };\n      document.addEventListener('mousedown', onDocClick);\n      return () => document.removeEventListener('mousedown', onDocClick);\n    }, [focused]);\n\n    const showPopover = focused && suggestions.length > 0;\n\n    const pick = useCallback(\n      (s: NLSuggestion) => {\n        onSelect?.(s);\n        setFocused(false);\n      },\n      [onSelect]\n    );\n\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'ArrowDown' && suggestions.length) {\n          e.preventDefault();\n          setActiveIndex((i) => (i + 1) % suggestions.length);\n        } else if (e.key === 'ArrowUp' && suggestions.length) {\n          e.preventDefault();\n          setActiveIndex((i) => (i <= 0 ? suggestions.length - 1 : i - 1));\n        } else if (e.key === 'Enter') {\n          if (activeIndex >= 0 && suggestions[activeIndex]) {\n            e.preventDefault();\n            pick(suggestions[activeIndex]);\n          } else if (value.trim()) {\n            e.preventDefault();\n            onSubmit?.(value.trim());\n            setFocused(false);\n          }\n        } else if (e.key === 'Escape') {\n          setFocused(false);\n        }\n      },\n      [suggestions, activeIndex, value, pick, onSubmit]\n    );\n\n    const handleClear = useCallback(() => {\n      onChange('');\n      onClear?.();\n    }, [onChange, onClear]);\n\n    return (\n      <div\n        className={`nl-wrap${collapsed ? ' is-collapsed' : ''}`}\n        ref={wrapRef}\n        data-automation-id={automationId}\n      >\n        <div className={`nl-input-row${focused ? ' is-active' : ''}${isLoading ? ' is-loading' : ''}${collapsed ? ' is-collapsed' : ''}`}>\n          <div\n            className=\"nl-mark\"\n            aria-hidden={!collapsed}\n            role={collapsed ? 'button' : undefined}\n            aria-label={collapsed ? 'Open AI search' : undefined}\n            tabIndex={collapsed ? 0 : -1}\n            onClick={handleMarkClick}\n            onKeyDown={collapsed ? (e) => {\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                onExpand?.();\n              }\n            } : undefined}\n          >\n            <SparkleIcon size={14} />\n          </div>\n          <input\n            ref={inputRef}\n            type=\"text\"\n            className=\"nl-input\"\n            value={value}\n            placeholder={showTypewriter ? '' : placeholder}\n            autoComplete=\"off\"\n            aria-label={ariaLabel}\n            // Skip the bar in tab order while collapsed; restored on\n            // expand. Prevents users from \"clicking\" the hidden input\n            // via keyboard.\n            tabIndex={collapsed ? -1 : 0}\n            disabled={collapsed}\n            onChange={(e) => onChange(e.target.value)}\n            onFocus={() => setFocused(true)}\n            onKeyDown={handleKeyDown}\n          />\n          {showTypewriter && (\n            <div className=\"nl-typewriter\" aria-hidden=\"true\">\n              {placeholderPrefix && (\n                <span className=\"nl-typewriter__prefix\">{placeholderPrefix}</span>\n              )}\n              <span className=\"nl-typewriter__example\">{twText}</span>\n              <span className=\"nl-typewriter__caret\" />\n              {/* Closing quote — paired with the opening quote the\n                  caller passes in via placeholderPrefix. Hidden when\n                  the prefix doesn't end with an opening quote so the\n                  component degrades cleanly for callers that pass a\n                  prefix without quotes. */}\n              {placeholderPrefix && /['\"`]\\s*$/.test(placeholderPrefix) && (\n                <span className=\"nl-typewriter__prefix\">\n                  {placeholderPrefix.trim().slice(-1)}\n                </span>\n              )}\n            </div>\n          )}\n          {isLoading && <span className=\"nl-spinner show\" role=\"status\" aria-label=\"Resolving\" />}\n          {!isLoading && value && (\n            <button type=\"button\" className=\"nl-clear show\" title=\"Clear search\" onClick={handleClear}>\n              <CloseIcon size={14} />\n            </button>\n          )}\n        </div>\n\n        {showPopover && (\n          <div className=\"nl-suggestions show\" role=\"listbox\">\n            {suggestions.map((s, i) => (\n              <button\n                key={`${s.source}-${s.text}`}\n                type=\"button\"\n                role=\"option\"\n                aria-selected={i === activeIndex}\n                className={`nl-sug${i === activeIndex ? ' kb-active' : ''}`}\n                onMouseEnter={() => setActiveIndex(i)}\n                onMouseDown={(e) => {\n                  e.preventDefault();\n                  pick(s);\n                }}\n              >\n                {s.source === 'recent' ? (\n                  <ClockIcon size={16} />\n                ) : (\n                  <SparkleIcon size={16} className=\"sparkle\" />\n                )}\n                <span className=\"sug-text\">{highlightMatch(s.text, value.trim(), s.highlight_terms)}</span>\n                {s.source === 'recent' && <span className=\"sug-meta\">Recent</span>}\n              </button>\n            ))}\n          </div>\n        )}\n\n        {helperText && (\n          <div\n            className={`nl-helper nl-helper--${helperVariant}`}\n            role={helperVariant === 'error' ? 'alert' : 'status'}\n          >\n            {helperText}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nNLSearchInput.displayName = 'NLSearchInput';\n"],"names":["SparkleIcon","size","className","React","createElement","width","height","viewBox","fill","d","ClockIcon","stroke","strokeWidth","strokeLinecap","strokeLinejoin","cx","cy","r","CloseIcon","RE_SPECIAL","highlightMatch","text","query","terms","needles","length","map","t","trim","filter","Boolean","sort","a","b","needleSet","Set","n","toLowerCase","pattern","replace","join","split","RegExp","part","idx","has","key","Fragment","NLSearchInput","memo","value","onChange","onSelect","onSubmit","onClear","suggestions","isLoading","helperText","helperVariant","placeholder","placeholderPrefix","examples","collapsed","onExpand","automationId","ariaLabel","wrapRef","useRef","inputRef","focused","setFocused","useState","activeIndex","setActiveIndex","handleMarkClick","useCallback","showTypewriter","twIdx","setTwIdx","twText","setTwText","twPhase","setTwPhase","useEffect","target","delay","Math","random","setTimeout","clearTimeout","i","tick","slice","onDocClick","e","current","contains","document","addEventListener","removeEventListener","showPopover","pick","s","handleKeyDown","preventDefault","handleClear","ref","role","undefined","tabIndex","onClick","onKeyDown","type","autoComplete","disabled","onFocus","test","title","source","onMouseEnter","onMouseDown","highlight_terms","displayName"],"mappings":"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"}