se-design 1.0.3 → 1.0.8-5.dev.0

package/dist/index43.js.map

@@ -1 +1 @@
-{"version":3,"file":"index43.js","sources":["../src/components/AutoCompleteInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport './style.scss';\nimport { Icon } from '../Icon';\n\nexport interface AutoCompleteInputProps {\n  value: string;\n  disabled?: boolean;\n  maxLength?: number;\n  onChange: (value: string, fromSuggestion?: boolean) => void;\n  tag?: string;\n  error?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  suggestions?: { label: string; value: string }[];\n  customRenderSuggestions?: (suggestions: any, handleSuggestionClick: (suggestion: string) => void) => any;\n  onSuggestionClick?: (suggestion: string) => void;\n  automationId?: 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    customRenderSuggestions,\n    onSuggestionClick,\n    automationId = '',\n    ...props\n  }) => {\n    const [filteredSuggestions, setFilteredSuggestions] = React.useState<{ label: string; value: string }[]>([\n      ...suggestions\n    ]);\n    const [isSuggestionBoxVisible, setSuggestionBoxVisible] = React.useState<boolean>(false);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const handleInputChange = React.useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const inputValue = e.target.value;\n\n        if (customRenderSuggestions) {\n          onChange(inputValue, false);\n        } else {\n          onChange(inputValue);\n          if (inputValue === '') {\n            setFilteredSuggestions([...suggestions]);\n          } else if (inputValue) {\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, customRenderSuggestions]\n    );\n\n    useEffect(() => {\n      // if (customRenderSuggestions) {\n      setFilteredSuggestions([...suggestions]);\n      // }\n    }, [suggestions]);\n\n    useEffect(() => {\n      const handleClickOutside = (event: MouseEvent) => {\n        if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n          setSuggestionBoxVisible(false);\n        }\n      };\n\n      document.addEventListener('mousedown', handleClickOutside);\n      return () => {\n        document.removeEventListener('mousedown', handleClickOutside);\n      };\n    }, []);\n\n    const handleInputClick = () => {\n      setSuggestionBoxVisible(true);\n    };\n\n    const handleSuggestionClick = (suggestion: string) => {\n      onChange(suggestion, true);\n      setSuggestionBoxVisible(false);\n      onSuggestionClick && onSuggestionClick(suggestion);\n    };\n\n    const handleClearInput = () => {\n      onChange('', false);\n    };\n\n    return (\n      <div className=\"main-container-autocomplete-se-design\" ref={containerRef} data-automation-id={automationId}>\n        {label && <span className={`label-container ${disabled ? 'label-container-disabled' : ''}`}>{label}</span>}\n        <div className=\"input-container-wrapper\">\n          <div className=\"input-wrapper\" style={{ pointerEvents: disabled ? 'none' : 'auto' }}>\n            {React.createElement(tag, {\n              value: value,\n              onChange: handleInputChange,\n              onClick: handleInputClick,\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              ...props\n            })}\n            {value && <Icon name=\"close\" className=\"input-icon-close\" size={15} onClick={handleClearInput} stroke={disabled ? 'var(--color-gray-600)' : ''} />}\n            {filteredSuggestions.length > 0 && (\n              <Icon name=\"chevron\" rotation={isSuggestionBoxVisible ? '180' : '0'} className=\"input-icon-chevron\" stroke={disabled ? 'var(--color-gray-600)' : ''} />\n            )}\n          </div>\n          {isSuggestionBoxVisible && filteredSuggestions.length > 0 && (\n            <div className=\"suggestions-list\" data-automation-id=\"autocomplete-suggestions-list\">\n              {customRenderSuggestions\n                ? customRenderSuggestions(filteredSuggestions, handleSuggestionClick)\n                : filteredSuggestions.map((suggestion, index) => (\n                    <div\n                      key={index}\n                      className=\"suggestion-item\"\n                      onClick={() => handleSuggestionClick(suggestion.value)}\n                      data-automation-id={`autocomplete-suggestion-item-${index}`}\n                    >\n                      {suggestion.label}\n                    </div>\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=\"error-message\" className=\"error-message\">\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","memo","value","onChange","disabled","maxLength","tag","error","errorMessage","label","placeholder","suggestions","customRenderSuggestions","onSuggestionClick","automationId","props","filteredSuggestions","setFilteredSuggestions","React","useState","isSuggestionBoxVisible","setSuggestionBoxVisible","containerRef","useRef","handleInputChange","useCallback","e","inputValue","target","filtered","filter","suggestion","toLowerCase","includes","useEffect","handleClickOutside","event","current","contains","addEventListener","removeEventListener","handleInputClick","handleSuggestionClick","handleClearInput","createElement","className","ref","style","pointerEvents","onClick","length","Icon","name","size","stroke","rotation","map","index","key","id"],"mappings":"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"}
+{"version":3,"file":"index43.js","sources":["../src/components/MessageBar/index.tsx"],"sourcesContent":["import React, { FC, useRef, useState } from 'react';\nimport { Map } from 'src/utils/common.types';\nimport { useDismissOnEscape } from '../../utils/a11y';\nimport { Icon, IconProps } from '../Icon';\nimport { Button, ButtonProps } from '../Button';\nimport './style.scss';\n\nexport type MessageBarType = 'info' | 'alert' | 'nudge';\n\nexport interface MessageBarProps {\n  messageBarCtnClassName?: string;\n  messageBarType: MessageBarType;\n  message: string;\n  hasCloseIcon?: boolean;\n  hasButton?: boolean;\n  buttonLabel: string | '';\n  buttonOnClick?: () => void;\n  handleClose?: () => void;\n  automationId?: string;\n  /**\n   * Override the leading icon. Merged on top of the variant default\n   * (name + fill color derived from `messageBarType`).\n   * Pass `null` to suppress the leading icon entirely.\n   */\n  iconProps?: Partial<IconProps> | null;\n  /**\n   * Override props for the CTA button. Spread after the variant defaults\n   * (label/onClick/className/type/size), so any field can be replaced —\n   * including `iconProps` to add an icon to the button.\n   */\n  buttonProps?: Partial<ButtonProps>;\n  /**\n   * Accessible name for the close icon. Defaults to \"Close message\".\n   */\n  closeButtonAriaLabel?: string;\n}\n\n/**\n * Per-variant defaults for the leading icon. Single `info` glyph everywhere;\n * stroke matches the variant's text color. `info` and `nudge` render rotated\n * 180° to read as inverted; `alert` keeps the default orientation.\n */\nconst DEFAULT_ICON_BY_TYPE: Record<MessageBarType, { stroke: string; rotation: '0' | '180' }> = {\n  info: { stroke: 'var(--color-yellow-700)', rotation: '180' },\n  alert: { stroke: 'var(--color-gray-900)', rotation: '0' },\n  nudge: { stroke: 'var(--color-white)', rotation: '180' }\n};\n\nconst classNames: Map = {\n  messageBarCtn: \"min-h-[45px] fixed top-0 w-full flex items-center justify-center py-2\",\n  messageCtn: \"flex items-center justify-center gap-2 flex-wrap px-4 pr-12\",\n  info: \"bg-[var(--color-yellow-50)]\",\n  alert: \"bg-[var(--color-red-50)]\",\n  nudge: \"bg-[var(--color-blue-500)]\",\n  infoMessage: \"text-[var(--color-yellow-700)] text-center\",\n  alertMessage: \"text-[var(--color-gray-900)] text-center\",\n  nudgeMessage: \"text-[var(--color-white)] text-center\",\n  closeIconCtn: \"absolute right-[12px] cursor-pointer rounded-full p-1\",\n  closeIconCtnInfo: \"hover:bg-[var(--color-gray-200)]\",\n  closeIconCtnAlert: \"hover:bg-[var(--color-gray-200)]\",\n  closeIconCtnNudge: \"hover:bg-[var(--color-blue-700)]\",\n};\n\n/**\n * Per-variant default Button theme. Picked so the CTA surface has a\n * non-text contrast of >= 3:1 against the bar background (WCAG 1.4.11).\n * Consumers can override via `buttonProps`.\n */\nconst DEFAULT_BUTTON_THEME_BY_TYPE: Record<MessageBarType, ButtonProps['theme']> = {\n  info: 'blue',\n  alert: 'red',\n  nudge: 'white'\n};\n\nexport const MessageBar: FC<MessageBarProps> = ({\n  messageBarCtnClassName = \"\",\n  messageBarType = 'info',\n  message = '',\n  hasCloseIcon = false,\n  hasButton = false,\n  buttonLabel = '',\n  buttonOnClick = () => {},\n  handleClose = () => {},\n  automationId = '',\n  iconProps,\n  buttonProps,\n  closeButtonAriaLabel = 'Close message'\n}) => {\n  const [visible, setVisible] = useState(true);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const handleClickOnCloseIcon = React.useCallback(() => {\n    setVisible(false);\n    const timer = setTimeout(() => {\n      handleClose?.();\n    }, 300);\n    return () => clearTimeout(timer);\n  }, [handleClose]);\n\n  // SR announcements: pending shared live-announcer component.\n  const { onKeyDown: onEscapeKeyDown } = useDismissOnEscape({\n    onDismiss: handleClickOnCloseIcon,\n    enabled: hasCloseIcon && visible\n  });\n\n  const messageClass = {\n    info: classNames.infoMessage,\n    alert: classNames.alertMessage,\n    nudge: classNames.nudgeMessage\n  }[messageBarType] ?? classNames.infoMessage;\n\n  const closeIconHoverClass = {\n    info: classNames.closeIconCtnInfo,\n    alert: classNames.closeIconCtnAlert,\n    nudge: classNames.closeIconCtnNudge\n  }[messageBarType] ?? classNames.closeIconCtnInfo;\n\n  const closeIconStroke = messageBarType === 'nudge' ? 'var(--color-white)' : 'var(--color-gray-700)';\n\n  const defaultButtonTheme = DEFAULT_BUTTON_THEME_BY_TYPE[messageBarType] ?? DEFAULT_BUTTON_THEME_BY_TYPE.info;\n\n  const variantIcon = DEFAULT_ICON_BY_TYPE[messageBarType] ?? DEFAULT_ICON_BY_TYPE.info;\n  const showLeadingIcon = iconProps !== null;\n  const mergedIconProps: IconProps = {\n    name: 'info',\n    stroke: variantIcon.stroke,\n    rotation: variantIcon.rotation,\n    className: 'shrink-0',\n    ...iconProps\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      className={`se-design-message-bar ${messageBarCtnClassName} ${classNames.messageBarCtn} ${classNames[messageBarType]} ${visible ? \"show\" : \"hide\"}`}\n      data-automation-id={automationId}\n      onKeyDown={onEscapeKeyDown}\n    >\n      <div className={classNames.messageCtn}>\n        {showLeadingIcon && <Icon {...mergedIconProps} />}\n        <span className={`${messageClass} break-words min-w-0`}>{message}</span>\n        {hasButton && (\n          <Button\n            label={buttonLabel}\n            type='primary'\n            size=\"sm\"\n            theme={defaultButtonTheme}\n            onClick={buttonOnClick}\n            className=\"alert-btn\"\n            {...buttonProps}\n          />\n        )}\n      </div>\n      {hasCloseIcon && (\n        <Icon\n          name={\"close\"}\n          className={`${classNames.closeIconCtn} ${closeIconHoverClass}`}\n          stroke={closeIconStroke}\n          onClick={handleClickOnCloseIcon}\n          ariaLabel={closeButtonAriaLabel}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default MessageBar;"],"names":["DEFAULT_ICON_BY_TYPE","info","stroke","rotation","alert","nudge","classNames","messageBarCtn","messageCtn","infoMessage","alertMessage","nudgeMessage","closeIconCtn","closeIconCtnInfo","closeIconCtnAlert","closeIconCtnNudge","DEFAULT_BUTTON_THEME_BY_TYPE","MessageBar","messageBarCtnClassName","messageBarType","message","hasCloseIcon","hasButton","buttonLabel","buttonOnClick","handleClose","automationId","iconProps","buttonProps","closeButtonAriaLabel","visible","setVisible","useState","containerRef","useRef","handleClickOnCloseIcon","React","useCallback","timer","setTimeout","clearTimeout","onKeyDown","onEscapeKeyDown","useDismissOnEscape","onDismiss","enabled","messageClass","closeIconHoverClass","closeIconStroke","defaultButtonTheme","variantIcon","showLeadingIcon","mergedIconProps","name","className","createElement","ref","Icon","Button","_extends","label","type","size","theme","onClick","ariaLabel"],"mappings":"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"}

package/dist/index44.js

@@ -1,99 +1,61 @@
-import t, { useState as o, useRef as $, useEffect as f } from "react";
+import e, { useState as d, useEffect as h } from "react";
+import { Icon as r } from "./index6.js";
 /* empty css         */
-import s from "./index180.js";
-import { Icon as g } from "./index5.js";
-const P = ({
-  onCountrycodeChange: E,
-  onNumberChange: N,
-  error: m,
-  errorMessage: v,
-  value: a,
-  label: u,
-  automationId: w = ""
+const t = {
+  toastBarCtn: "min-h-[48px] fixed top-0 w-full flex items-center justify-center z-[1020] pr-[44px]",
+  success: "var(--color-green-500)",
+  error: "var(--color-red-500)",
+  info: "var(--color-gray-700)",
+  toastMessageCtn: "flex items-center gap-2",
+  toastMessage: "text-[var(--color-white)] text-center word-break",
+  closeIconCtn: "absolute right-[12px] cursor-pointer hover:bg-white/20 rounded-full p-1 focus-visible:!outline-2 focus-visible:!outline-[var(--color-white)] focus-visible:!outline-offset-2"
+}, x = ({
+  toastBarCtnClassName: a = "",
+  type: o,
+  message: c = "",
+  shouldAutoClose: l = !1,
+  delay: i = 5e3,
+  onClose: n = () => {
+  },
+  containerStyle: m = {}
 }) => {
-  const [y, p] = o(a?.countryCode || s[0].dial_code), [c, r] = o(!1), [h, L] = o(s), [_, b] = o(""), [S, C] = o(""), i = $(null), l = s.find((e) => e.dial_code === y), I = (e) => {
-    e && (p(e), E(e)), r(!1);
-  }, V = (e) => {
-    const n = e.target.value;
-    b(n);
-    const R = s.filter((d) => d.name.toLowerCase().includes(n.toLowerCase()) || d.dial_code.toLowerCase().includes(n.toLowerCase()) || d.code.toLowerCase().includes(n.toLowerCase()));
-    L(R);
+  const [u, f] = d(!0);
+  h(() => {
+    if (l) {
+      const v = setTimeout(() => {
+        s();
+      }, i);
+      return () => clearTimeout(v);
+    }
+  }, []);
+  const s = () => {
+    setTimeout(() => {
+      f(!1), setTimeout(() => {
+        n?.();
+      }, 300);
+    }, 300);
   };
-  f(() => {
-    const e = (n) => {
-      i.current && !i.current.contains(n.target) && r(!1);
-    };
-    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, []), f(() => {
-    a && (p(a.countryCode), C(a.number));
-  }, [a]);
-  const k = (e) => {
-    const n = e.replace(/\D/g, "");
-    console.log("numericValue", n), C(n), N(n);
-  };
-  return /* @__PURE__ */ t.createElement("div", {
-    className: "phone-input-container-se-design-main-container",
-    "data-automation-id": w
-  }, u && /* @__PURE__ */ t.createElement("div", {
-    className: "label-container"
-  }, u), /* @__PURE__ */ t.createElement("div", {
-    className: `phone-input-container-se-design-main ${m ? "error" : ""}`,
-    ref: i
-  }, /* @__PURE__ */ t.createElement("div", {
-    className: "phone-input-container-se-design"
-  }, /* @__PURE__ */ t.createElement("div", {
-    className: "phone-input-container-se-design-country-code",
-    onClick: () => {
-      r(!c);
-    },
-    "data-automation-id": "country-code-selector"
-  }, /* @__PURE__ */ t.createElement("img", {
-    src: `https://flagcdn.com/${l?.code.toLowerCase()}.svg`,
-    alt: l?.name,
-    width: "16"
-  }), l?.dial_code, /* @__PURE__ */ t.createElement(g, {
-    name: "chevron",
-    className: c ? "rotate-180" : ""
-  })), /* @__PURE__ */ t.createElement("span", {
-    className: "divider"
-  }), /* @__PURE__ */ t.createElement("input", {
-    type: "tel",
-    placeholder: "Enter phone number",
-    className: "phone-input-container-se-design-phone-number-input",
-    onChange: (e) => k(e.target.value),
-    value: S,
-    pattern: "[0-9]*",
-    "data-automation-id": "phone-number-input-field"
-  })), c && /* @__PURE__ */ t.createElement("div", {
-    className: "phone-input-container-se-design-country-code-list",
-    "data-automation-id": "country-code-list"
-  }, /* @__PURE__ */ t.createElement("div", {
-    className: "search-input-wrapper"
-  }, /* @__PURE__ */ t.createElement(g, {
-    name: "search",
-    className: "search-icon"
-  }), /* @__PURE__ */ t.createElement("input", {
-    type: "text",
-    placeholder: "Search",
-    className: "phone-input-container-se-design-country-code-list-item-input",
-    onChange: V,
-    value: _,
-    "data-automation-id": "country-code-search-input"
-  })), h.length > 0 ? h.map((e) => /* @__PURE__ */ t.createElement("div", {
-    key: e.code,
-    className: "phone-input-container-se-design-country-code-list-item",
-    onClick: () => I(e.dial_code)
-  }, /* @__PURE__ */ t.createElement("img", {
-    src: `https://flagcdn.com/${e.code.toLowerCase()}.svg`,
-    alt: e.name,
-    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-resuts"
-  }, "No results found"))), m && /* @__PURE__ */ t.createElement("div", {
-    className: "error-message"
-  }, v));
+  return /* @__PURE__ */ e.createElement("div", {
+    className: `se-design-toast-bar ${a} ${t.toastBarCtn} ${u ? "show" : "hide"}`,
+    style: {
+      background: t[o],
+      ...m
+    }
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: t.toastMessageCtn
+  }, /* @__PURE__ */ e.createElement(r, {
+    name: o === "info" ? "info" : o === "error" ? "stop" : "checked-circle",
+    stroke: "var(--color-white)"
+  }), /* @__PURE__ */ e.createElement("span", {
+    className: t.toastMessage
+  }, c)), /* @__PURE__ */ e.createElement(r, {
+    name: "close",
+    stroke: "var(--color-white)",
+    className: t.closeIconCtn,
+    onClick: s
+  }));
 };
 export {
-  P as PhoneInput
+  x as ToastBar
 };
 //# sourceMappingURL=index44.js.map

package/dist/index44.js.map

@@ -1 +1 @@
-{"version":3,"file":"index44.js","sources":["../src/components/PhoneInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport './style.scss';\nimport countriesInfoJson from './countriesInfo.json';\nimport { Icon } from '../Icon';\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\nexport const PhoneInput: React.FC<PhoneInputProps> = ({\n  onCountrycodeChange,\n  onNumberChange,\n  error,\n  errorMessage,\n  value,\n  label,\n  automationId = ''\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\n  const countryInfo = countriesInfoJson.find((country) => country.dial_code === countryCode);\n\n  const handleCountryCodeSelect = (country: string) => {\n    if (country) {\n      setCountryCode(country);\n      onCountrycodeChange(country);\n    }\n    setDisplaySelectCountryCode(false);\n  };\n\n  const handleCountryCodeSearch = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const searchValue = event.target.value;\n    setSearchValue(searchValue);\n    const filteredCountries = countriesInfoJson.filter(\n      (country) =>\n        country.name.toLowerCase().includes(searchValue.toLowerCase()) ||\n        country.dial_code.toLowerCase().includes(searchValue.toLowerCase()) ||\n        country.code.toLowerCase().includes(searchValue.toLowerCase())\n    );\n    setCountriesInfo(filteredCountries);\n  };\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n        setDisplaySelectCountryCode(false);\n      }\n    };\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, []);\n\n  useEffect(() => {\n    if (value) {\n      setCountryCode(value.countryCode);\n      setEnteredNumber(value.number);\n    }\n  }, [value]);\n\n  const handleEnteredNumberChange = (value: string) => {\n    const numericValue = value.replace(/\\D/g, ''); // Remove non-numeric characters\n    console.log('numericValue', numericValue);\n    setEnteredNumber(numericValue);\n    onNumberChange(numericValue);\n  };\n\n  return (\n    <div className=\"phone-input-container-se-design-main-container\" data-automation-id={automationId}>\n      {label && <div className=\"label-container\">{label}</div>}\n      <div className={`phone-input-container-se-design-main ${error ? 'error' : ''}`} ref={containerRef}>\n        <div className=\"phone-input-container-se-design\">\n          <div\n            className=\"phone-input-container-se-design-country-code\"\n            onClick={() => {\n              setDisplaySelectCountryCode(!displaySelectCountryCode);\n            }}\n            data-automation-id=\"country-code-selector\"\n          >\n            <img\n              src={`https://flagcdn.com/${countryInfo?.code.toLowerCase()}.svg`}\n              alt={countryInfo?.name}\n              width=\"16\"\n            />\n            {countryInfo?.dial_code}\n            <Icon name=\"chevron\" className={!displaySelectCountryCode ? '' : 'rotate-180'} />\n          </div>\n          <span className=\"divider\" />\n          <input\n            type=\"tel\"\n            placeholder=\"Enter phone number\"\n            className=\"phone-input-container-se-design-phone-number-input\"\n            onChange={(event) => handleEnteredNumberChange(event.target.value)}\n            value={enteredNumber}\n            pattern=\"[0-9]*\"\n            data-automation-id=\"phone-number-input-field\"\n          />\n        </div>\n\n        {displaySelectCountryCode && (\n          <div className=\"phone-input-container-se-design-country-code-list\" data-automation-id=\"country-code-list\">\n            <div className=\"search-input-wrapper\">\n              <Icon name=\"search\" className=\"search-icon\" />\n              <input\n                type=\"text\"\n                placeholder=\"Search\"\n                className=\"phone-input-container-se-design-country-code-list-item-input\"\n                onChange={handleCountryCodeSearch}\n                value={searchValue}\n                data-automation-id=\"country-code-search-input\"\n              />\n            </div>\n            {countriesInfo.length > 0 ? (\n              countriesInfo.map((country) => (\n                <div\n                  key={country.code}\n                  className=\"phone-input-container-se-design-country-code-list-item\"\n                  onClick={() => handleCountryCodeSelect(country.dial_code)}\n                >\n                  <img src={`https://flagcdn.com/${country.code.toLowerCase()}.svg`} alt={country.name} width=\"16\" />\n                  <span>{country.name}</span>\n                  <span>({country.dial_code})</span>\n                </div>\n              ))\n            ) : (\n              <div className=\"phone-input-container-se-design-country-code-list-item-no-resuts\">No results found</div>\n            )}\n          </div>\n        )}\n      </div>\n      {error && <div className=\"error-message\">{errorMessage}</div>}\n    </div>\n  );\n};\n"],"names":["PhoneInput","onCountrycodeChange","onNumberChange","error","errorMessage","value","label","automationId","countryCode","setCountryCode","useState","countriesInfoJson","dial_code","displaySelectCountryCode","setDisplaySelectCountryCode","countriesInfo","setCountriesInfo","searchValue","setSearchValue","enteredNumber","setEnteredNumber","containerRef","useRef","countryInfo","find","country","handleCountryCodeSelect","handleCountryCodeSearch","event","target","filteredCountries","filter","name","toLowerCase","includes","code","useEffect","handleClickOutside","current","contains","addEventListener","document","removeEventListener","number","handleEnteredNumberChange","numericValue","replace","log","React","createElement","className","ref","onClick","src","alt","width","Icon","type","placeholder","onChange","pattern","length","map","key"],"mappings":"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"}
+{"version":3,"file":"index44.js","sources":["../src/components/ToastBar/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from \"react\";\nimport { Map } from \"../../utils/common.types\";\nimport { Icon } from \"../Icon\";\nimport \"./style.scss\";\n\nexport interface ToastBarProps {\n  toastBarCtnClassName?: string;\n  type: \"success\" | \"error\" | \"info\";\n  message: string;\n  shouldAutoClose?: boolean;\n  delay?: number;\n  onClose?: () => void;\n  containerStyle?: React.CSSProperties;\n}\n\nconst classNames: Map = {\n  toastBarCtn: \"min-h-[48px] fixed top-0 w-full flex items-center justify-center z-[1020] pr-[44px]\",\n  success: \"var(--color-green-500)\",\n  error: \"var(--color-red-500)\",\n  info: \"var(--color-gray-700)\",\n  toastMessageCtn: \"flex items-center gap-2\",\n  toastMessage: \"text-[var(--color-white)] text-center word-break\",\n  closeIconCtn: \"absolute right-[12px] cursor-pointer hover:bg-white/20 rounded-full p-1 focus-visible:!outline-2 focus-visible:!outline-[var(--color-white)] focus-visible:!outline-offset-2\",\n};\n\nexport const ToastBar: FC<ToastBarProps> = ({\n  toastBarCtnClassName = \"\",\n  type,\n  message = \"\",\n  shouldAutoClose = false,\n  delay = 5000,\n  onClose = () => {},\n  containerStyle = {}\n}) => {\n  const [visible, setVisible] = useState(true);\n\n  useEffect(() => {\n    if (shouldAutoClose) {\n      const timer = setTimeout(() => {\n        handleClose();\n      }, delay);\n      return () => clearTimeout(timer);\n    }\n  }, []);\n\n  const handleClose = () => {\n    setTimeout(() => {\n      setVisible(false);\n      setTimeout(() => {\n        onClose?.();\n      }, 300);\n    }, 300);\n  };\n\n  return (\n    <div\n      className={`se-design-toast-bar ${toastBarCtnClassName} ${classNames.toastBarCtn} ${visible ? \"show\" : \"hide\"}`}\n      style={{ background: classNames[type], ...containerStyle }}\n    >\n      <div className={classNames.toastMessageCtn} >\n        <Icon name={type === \"info\" ? \"info\" : type === \"error\" ? \"stop\" : \"checked-circle\"} stroke={'var(--color-white)'} />\n        <span className={classNames.toastMessage}>{message}</span>\n      </div>\n      <Icon name=\"close\" stroke={'var(--color-white)'} className={classNames.closeIconCtn} onClick={handleClose} />\n    </div>\n  );\n};"],"names":["React__default","useState","useEffect","Icon","classNames","toastBarCtn","success","error","info","toastMessageCtn","toastMessage","closeIconCtn","ToastBar","toastBarCtnClassName","type","message","shouldAutoClose","delay","onClose","containerStyle","visible","setVisible","timer","setTimeout","handleClose","clearTimeout","React","createElement","className","style","background","name","stroke","onClick"],"mappings":"AAeA,OAAAA,KAAA,YAAAC,GAAA,aAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAkB;AAAA,EACtBC,aAAa;AAAA,EACbC,SAAS;AAAA,EACTC,OAAO;AAAA,EACPC,MAAM;AAAA,EACNC,iBAAiB;AAAA,EACjBC,cAAc;AAAA,EACdC,cAAc;AAChB,GAEaC,IAA8BA,CAAC;AAAA,EAC1CC,sBAAAA,IAAuB;AAAA,EACvBC,MAAAA;AAAAA,EACAC,SAAAA,IAAU;AAAA,EACVC,iBAAAA,IAAkB;AAAA,EAClBC,OAAAA,IAAQ;AAAA,EACRC,SAAAA,IAAUA,MAAM;AAAA,EAAC;AAAA,EACjBC,gBAAAA,IAAiB,CAAA;AACnB,MAAM;AACJ,QAAM,CAACC,GAASC,CAAU,IAAIpB,EAAS,EAAI;AAE3CC,EAAAA,EAAU,MAAM;AACd,QAAIc,GAAiB;AACnB,YAAMM,IAAQC,WAAW,MAAM;AAC7BC,QAAAA,EAAAA;AAAAA,MACF,GAAGP,CAAK;AACR,aAAO,MAAMQ,aAAaH,CAAK;AAAA,IACjC;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAME,IAAcA,MAAM;AACxBD,eAAW,MAAM;AACfF,MAAAA,EAAW,EAAK,GAChBE,WAAW,MAAM;AACfL,QAAAA,IAAAA;AAAAA,MACF,GAAG,GAAG;AAAA,IACR,GAAG,GAAG;AAAA,EACR;AAEA,SACEQ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,uBAAuBf,CAAoB,IAAIT,EAAWC,WAAW,IAAIe,IAAU,SAAS,MAAM;AAAA,IAC7GS,OAAO;AAAA,MAAEC,YAAY1B,EAAWU,CAAI;AAAA,MAAG,GAAGK;AAAAA,IAAAA;AAAAA,EAAe,GAEzDO,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAWxB,EAAWK;AAAAA,EAAAA,GACzBiB,gBAAAA,EAAAC,cAACxB,GAAI;AAAA,IAAC4B,MAAMjB,MAAS,SAAS,SAASA,MAAS,UAAU,SAAS;AAAA,IAAkBkB,QAAQ;AAAA,EAAA,CAAuB,GACpHN,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMC,WAAWxB,EAAWM;AAAAA,EAAAA,GAAeK,CAAc,CACtD,GACLW,gBAAAA,EAAAC,cAACxB,GAAI;AAAA,IAAC4B,MAAK;AAAA,IAAQC,QAAQ;AAAA,IAAsBJ,WAAWxB,EAAWO;AAAAA,IAAcsB,SAAST;AAAAA,EAAAA,CAAc,CACzG;AAET;"}

package/dist/index45.js

@@ -1,41 +1,149 @@
-import o from "react";
-const m = ({
-  progress: a,
-  backgroundColor: n = "#E8E8E8",
-  progressColor: s = "#0066FF",
-  size: e = 40,
-  strokeWidth: r = 4
-}) => {
-  const t = (e - r) / 2, c = t * 2 * Math.PI, l = c - a / 100 * c;
-  return /* @__PURE__ */ o.createElement("svg", {
-    width: e,
-    height: e,
-    style: {
-      transform: "rotate(-90deg)"
+import e, { useState as k, useRef as S, useCallback as P, useEffect as Z } from "react";
+/* empty css         */
+import { Icon as x } from "./index6.js";
+import { useStableId as L } from "./index205.js";
+import { getA11yNameAttributes as ee } from "./index81.js";
+import "./index72.js";
+import { useCombobox as te } from "./index68.js";
+function u() {
+  return u = Object.assign ? Object.assign.bind() : function(o) {
+    for (var i = 1; i < arguments.length; i++) {
+      var t = arguments[i];
+      for (var a in t) ({}).hasOwnProperty.call(t, a) && (o[a] = t[a]);
     }
-  }, /* @__PURE__ */ o.createElement("circle", {
-    cx: e / 2,
-    cy: e / 2,
-    r: t,
-    stroke: n,
-    strokeWidth: r,
-    fill: "none"
-  }), /* @__PURE__ */ o.createElement("circle", {
-    cx: e / 2,
-    cy: e / 2,
-    r: t,
-    stroke: s,
-    strokeWidth: r,
-    strokeDasharray: c,
-    strokeDashoffset: l,
-    fill: "none",
-    strokeLinecap: "round",
+    return o;
+  }, u.apply(null, arguments);
+}
+const ce = /* @__PURE__ */ e.memo(({
+  value: o,
+  onChange: i,
+  disabled: t = !1,
+  maxLength: a,
+  tag: B = "input",
+  error: l = !1,
+  errorMessage: F,
+  label: p,
+  placeholder: R,
+  suggestions: c = [],
+  onSelect: $,
+  renderOption: d,
+  optionClassName: j,
+  automationId: A = "",
+  ariaLabel: b,
+  ariaLabelledBy: O,
+  ariaDescribedBy: V,
+  ..._
+}) => {
+  const [s, v] = k([...c]), [E, g] = k(!1), H = S(null), N = S(null), f = L(void 0, "autocomplete"), z = `${f}-input`, D = `${f}-listbox`, y = `${f}-label`, C = `${f}-error`, w = P((r) => {
+    g(!1), $?.(r);
+  }, [$]), {
+    containerProps: K,
+    inputProps: M,
+    listboxProps: q,
+    getOptionProps: G,
+    highlightedIndex: J,
+    setHighlightedIndex: h,
+    isKeyboardFocused: Q
+  } = te({
+    items: s,
+    isOpen: E,
+    onOpenChange: g,
+    onSelect: w,
+    listboxId: D
+  }), T = P((r) => {
+    const n = r.target.value;
+    if (h(-1), i(n), !d)
+      if (n === "")
+        v([...c]);
+      else {
+        const I = c?.filter((m) => typeof m == "object" && m?.label?.toLowerCase().includes(n?.toLowerCase() ?? ""));
+        v([...I]);
+      }
+  }, [i, c, d, h]);
+  Z(() => {
+    v([...c]);
+  }, [c]);
+  const U = () => {
+    g(!0);
+  }, W = () => {
+    s.length > 0 && g(!0);
+  }, X = () => {
+    i(""), h(-1), N.current?.focus();
+  }, Y = ee({
+    ariaLabelledBy: p && !b ? y : O,
+    ariaLabel: b,
+    ariaDescribedBy: l ? C : V
+  });
+  return /* @__PURE__ */ e.createElement("div", u({
+    className: "main-container-autocomplete-se-design",
+    ref: H,
+    "data-automation-id": A
+  }, K), p && /* @__PURE__ */ e.createElement("span", {
+    id: y,
+    className: `label-container ${t ? "label-container-disabled" : ""}`
+  }, p), /* @__PURE__ */ e.createElement("div", {
+    className: "input-container-wrapper"
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: "input-wrapper",
     style: {
-      transition: "stroke-dashoffset 0.3s ease"
+      pointerEvents: t ? "none" : "auto"
     }
-  }));
-};
+  }, /* @__PURE__ */ e.createElement(B, {
+    ref: N,
+    id: z,
+    value: o,
+    onChange: T,
+    onClick: U,
+    onFocus: W,
+    ...M,
+    disabled: t,
+    className: `${l ? "input-container-error" : "input-container-default"} ${t ? "input-container-disabled" : ""} ${s.length > 0 || o ? "with-icon" : ""} ${s.length > 0 && o ? "with-icons" : ""}`,
+    maxLength: a,
+    placeholder: R,
+    "aria-invalid": l || void 0,
+    ...Y,
+    ..._
+  }), o && /* @__PURE__ */ e.createElement(x, {
+    name: "close",
+    className: "input-icon-close",
+    size: 15,
+    onClick: X,
+    stroke: t ? "var(--color-gray-600)" : "",
+    ariaLabel: "Clear input"
+  }), s.length > 0 && /* @__PURE__ */ e.createElement(x, {
+    name: "chevron",
+    rotation: E ? "180" : "0",
+    className: "input-icon-chevron",
+    stroke: t ? "var(--color-gray-600)" : "",
+    "aria-hidden": "true"
+  })), E && s.length > 0 && /* @__PURE__ */ e.createElement("div", u({}, q, {
+    "aria-label": p || b || "Suggestions",
+    className: "suggestions-list",
+    "data-automation-id": "autocomplete-suggestions-list"
+  }), s.map((r, n) => {
+    const I = G(n, !1), m = J === n;
+    return /* @__PURE__ */ e.createElement("div", u({
+      key: n
+    }, I, {
+      className: `${j || "suggestion-item"} ${m ? `suggestion-item-highlighted${Q ? " suggestion-item-keyboard-highlight" : ""}` : ""}`,
+      onClick: () => w(r),
+      onMouseEnter: () => h(n),
+      "data-automation-id": `autocomplete-suggestion-item-${n}`
+    }), d ? d(r, {
+      isHighlighted: m,
+      index: n
+    }) : r.label);
+  }))), (l || a) && /* @__PURE__ */ e.createElement("div", {
+    className: `${l ? "error-and-max-word" : "max-word-container"} ${t ? "disabled" : ""}`
+  }, l && /* @__PURE__ */ e.createElement("div", {
+    id: C,
+    className: "error-message",
+    role: "alert"
+  }, F), a && /* @__PURE__ */ e.createElement("div", {
+    className: "max-word"
+  }, o.length, "/", a)));
+});
 export {
-  m as CircularProgressBar
+  ce as AutoCompleteInput
 };
 //# sourceMappingURL=index45.js.map

package/dist/index45.js.map

@@ -1 +1 @@
-{"version":3,"file":"index45.js","sources":["../src/components/CircularProgressBar/index.tsx"],"sourcesContent":["import React from 'react';\n\ninterface CircularProgressBarProps {\n  progress: number;\n  backgroundColor?: string;\n  progressColor?: string;\n  size?: number;\n  strokeWidth?: number;\n}\n\nexport const CircularProgressBar = ({\n  progress,\n  backgroundColor = '#E8E8E8',\n  progressColor = '#0066FF',\n  size = 40,\n  strokeWidth = 4\n}: CircularProgressBarProps) => {\n  const radius = (size - strokeWidth) / 2;\n  const circumference = radius * 2 * Math.PI;\n  const strokeDashoffset = circumference - (progress / 100) * circumference;\n\n  return (\n    <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>\n      {/* Background circle */}\n      <circle cx={size / 2} cy={size / 2} r={radius} stroke={backgroundColor} strokeWidth={strokeWidth} fill=\"none\" />\n      {/* Progress circle */}\n      <circle\n        cx={size / 2}\n        cy={size / 2}\n        r={radius}\n        stroke={progressColor}\n        strokeWidth={strokeWidth}\n        strokeDasharray={circumference}\n        strokeDashoffset={strokeDashoffset}\n        fill=\"none\"\n        strokeLinecap=\"round\"\n        style={{ transition: 'stroke-dashoffset 0.3s ease' }}\n      />\n    </svg>\n  );\n};\n"],"names":["CircularProgressBar","progress","backgroundColor","progressColor","size","strokeWidth","radius","circumference","Math","PI","strokeDashoffset","React","createElement","width","height","style","transform","cx","cy","r","stroke","fill","strokeDasharray","strokeLinecap","transition"],"mappings":";AAUO,MAAMA,IAAsBA,CAAC;AAAA,EAClCC,UAAAA;AAAAA,EACAC,iBAAAA,IAAkB;AAAA,EAClBC,eAAAA,IAAgB;AAAA,EAChBC,MAAAA,IAAO;AAAA,EACPC,aAAAA,IAAc;AACU,MAAM;AACxBC,QAAAA,KAAUF,IAAOC,KAAe,GAChCE,IAAgBD,IAAS,IAAIE,KAAKC,IAClCC,IAAmBH,IAAiBN,IAAW,MAAOM;AAG1DI,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,OAAOT;AAAAA,IAAMU,QAAQV;AAAAA,IAAMW,OAAO;AAAA,MAAEC,WAAW;AAAA,IAAiB;AAAA,EAAA,GAEnEJ,gBAAAA,EAAAA,cAAA,UAAA;AAAA,IAAQK,IAAIb,IAAO;AAAA,IAAGc,IAAId,IAAO;AAAA,IAAGe,GAAGb;AAAAA,IAAQc,QAAQlB;AAAAA,IAAiBG,aAAAA;AAAAA,IAA0BgB,MAAK;AAAA,EAAA,CAAQ,GAE/GT,gBAAAA,EAAAA,cAAA,UAAA;AAAA,IACEK,IAAIb,IAAO;AAAA,IACXc,IAAId,IAAO;AAAA,IACXe,GAAGb;AAAAA,IACHc,QAAQjB;AAAAA,IACRE,aAAAA;AAAAA,IACAiB,iBAAiBf;AAAAA,IACjBG,kBAAAA;AAAAA,IACAW,MAAK;AAAA,IACLE,eAAc;AAAA,IACdR,OAAO;AAAA,MAAES,YAAY;AAAA,IAA8B;AAAA,EACpD,CAAA,CACE;AAET;"}
+{"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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"}