@synerise/ds-autocomplete 1.2.48 → 1.2.49

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.49](https://github.com/Synerise/synerise-design/compare/@synerise/ds-autocomplete@1.2.48...@synerise/ds-autocomplete@1.2.49) (2026-07-09)
+
+**Note:** Version bump only for package @synerise/ds-autocomplete
+
 ## [1.2.48](https://github.com/Synerise/synerise-design/compare/@synerise/ds-autocomplete@1.2.47...@synerise/ds-autocomplete@1.2.48) (2026-06-17)
 
 **Note:** Version bump only for package @synerise/ds-autocomplete

package/dist/Autocomplete.d.ts

@@ -1,7 +1,10 @@
-import { AutoComplete as AntdAutoComplete } from 'antd';
-import { FC } from 'react';
+import { default as React } from 'react';
 import { AutocompleteProps } from './Autocomplete.types';
-declare const Autocomplete: FC<AutocompleteProps> & {
-    Option: typeof AntdAutoComplete.Option;
+declare const Autocomplete: {
+    ({ className, style, label, description, errorText, disabled, error, handleInputRef, getPopupContainer, autoResize, readOnly, tooltip, tooltipConfig, icon1, icon1Tooltip, icon2, icon2Tooltip, options, children, value, defaultValue, placeholder, allowClear, autoFocus, maxLength, id, defaultActiveFirstOption, notFoundContent, placement, open, defaultOpen, onDropdownVisibleChange, onChange, onSearch, filterOption, onSelect, onFocus, onBlur, }: AutocompleteProps): React.JSX.Element;
+    Option: {
+        (_props: import('./Option').OptionProps): null;
+        displayName: string;
+    };
 };
 export default Autocomplete;

package/dist/Autocomplete.js

@@ -1,16 +1,18 @@
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { AutoComplete } from "antd";
-import { useRef, useEffect, useCallback, useMemo } from "react";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState, useMemo, useCallback, useEffect } from "react";
+import Dropdown from "@synerise/ds-dropdown";
 import FormField from "@synerise/ds-form-field";
-import { AutosizeWrapper } from "@synerise/ds-input";
+import { useAutosizeWidth, SIZER_STYLE } from "@synerise/ds-input";
 import Tooltip from "@synerise/ds-tooltip";
-import { useResizeObserver } from "@synerise/ds-utils";
-import { IconWrapper, AutocompleteWrapper, ComponentWrapper } from "./Autocomplete.styles.js";
+import { IconWrapper, AutocompleteWrapper, ComponentWrapper, InputContainer, NativeInput, ClearButton } from "./Autocomplete.styles.js";
+import AutocompleteDropdown from "./AutocompleteDropdown/AutocompleteDropdown.js";
+import { Option } from "./Option.js";
 import { getIconsWidth } from "./utils/getIconsWidth.js";
-import "./style/index.css";
+import { getOptionsFromChildren } from "./utils/getOptionsFromChildren.js";
 const AUTOSIZE_EXTRA_WIDTH = 27;
 const Autocomplete = ({
   className,
+  style,
   label,
   description,
   errorText,
@@ -26,67 +28,184 @@ const Autocomplete = ({
   icon1Tooltip,
   icon2,
   icon2Tooltip,
-  ...rest
+  options,
+  children,
+  value,
+  defaultValue,
+  placeholder,
+  allowClear,
+  autoFocus,
+  maxLength,
+  id,
+  defaultActiveFirstOption = true,
+  notFoundContent,
+  placement = "bottomLeft",
+  open,
+  defaultOpen,
+  onDropdownVisibleChange,
+  onChange,
+  onSearch,
+  filterOption,
+  onSelect,
+  onFocus,
+  onBlur
 }) => {
-  const scrollLeftRef = useRef(0);
-  const antSelectRef = useRef(null);
   const inputRef = useRef(null);
-  const autosizeRef = useRef(null);
-  const autocompleteInputRef = useRef(null);
-  const elementRef = useRef(null);
-  useEffect(() => {
-    handleInputRef && handleInputRef(antSelectRef);
-  }, [antSelectRef, handleInputRef]);
-  useEffect(() => {
-    if (autosizeRef.current) {
-      autocompleteInputRef.current = autosizeRef.current.inputWrapperRef.current;
-      inputRef.current = autosizeRef.current.inputRef.current;
+  const externalHandleRef = useRef(null);
+  const skipOpenOnFocusRef = useRef(false);
+  const isDisabled = !!(readOnly || disabled);
+  const isControlledOpen = open !== void 0;
+  const [internalOpen, setInternalOpen] = useState(!!defaultOpen);
+  const isOpen = isControlledOpen ? !!open : internalOpen;
+  const [internalValue, setInternalValue] = useState(typeof defaultValue === "string" ? defaultValue : "");
+  const currentValue = value !== void 0 ? value : internalValue;
+  const resolvedOptions = useMemo(() => {
+    if (options && options.length > 0) {
+      return options;
     }
-  }, []);
-  const getParentNode = (triggerNode) => {
-    return triggerNode.parentNode;
-  };
-  const stretchToFit = autoResize && autoResize !== true && Boolean(autoResize.stretchToFit);
-  const placeholderString = typeof rest.placeholder === "string" ? rest.placeholder : void 0;
-  const handlePreAutosize = useCallback(() => {
-    scrollLeftRef.current = inputRef.current?.scrollLeft || 0;
-    autocompleteInputRef.current && autocompleteInputRef.current.style.removeProperty("max-width");
-  }, []);
-  const handleAutosize = useCallback(() => {
-    const parentRect = elementRef.current && elementRef.current.getBoundingClientRect();
-    if (stretchToFit && autocompleteInputRef.current && parentRect?.width) {
-      autocompleteInputRef.current.style.maxWidth = `${parentRect?.width + 1}px`;
-      inputRef.current && inputRef.current.scrollTo(scrollLeftRef.current, 0);
+    return getOptionsFromChildren(children);
+  }, [options, children]);
+  const displayedOptions = useMemo(() => {
+    const query = currentValue;
+    if (!filterOption || !query) {
+      return resolvedOptions;
     }
-  }, [stretchToFit]);
-  const handleWrapperResize = useCallback(() => {
-    handlePreAutosize();
-    handleAutosize();
-  }, [handleAutosize, handlePreAutosize]);
-  const transformRef = useCallback((element) => {
-    autocompleteInputRef.current = element;
-    return element.querySelector("input");
-  }, []);
-  useResizeObserver(elementRef, handleWrapperResize);
+    const match = typeof filterOption === "function" ? filterOption : (input, option) => {
+      const optionLabel = typeof option.label === "string" ? option.label : "";
+      return `${option.value} ${optionLabel}`.toLowerCase().includes(input.toLowerCase());
+    };
+    return resolvedOptions.filter((option) => match(query, option));
+  }, [filterOption, resolvedOptions, currentValue]);
+  const setOpen = useCallback((nextOpen) => {
+    if (isDisabled) {
+      return;
+    }
+    if (!isControlledOpen) {
+      setInternalOpen(nextOpen);
+    }
+    onDropdownVisibleChange && onDropdownVisibleChange(nextOpen);
+  }, [isControlledOpen, isDisabled, onDropdownVisibleChange]);
+  const handleSelect = useCallback((selectedValue) => {
+    if (value === void 0) {
+      setInternalValue(selectedValue);
+      if (inputRef.current) {
+        inputRef.current.value = selectedValue;
+      }
+    }
+    onSelect && onSelect(selectedValue);
+    onChange && onChange(selectedValue);
+    setOpen(false);
+    skipOpenOnFocusRef.current = true;
+    inputRef.current && inputRef.current.focus();
+  }, [onChange, onSelect, setOpen, value]);
+  const handleChange = useCallback((event) => {
+    const nextValue = event.currentTarget.value;
+    if (value === void 0) {
+      setInternalValue(nextValue);
+    }
+    onSearch && onSearch(nextValue);
+    onChange && onChange(nextValue);
+    if (!isOpen) {
+      setOpen(true);
+    }
+  }, [isOpen, onChange, onSearch, setOpen, value]);
+  const handleFocus = useCallback((event) => {
+    onFocus && onFocus(event);
+    if (skipOpenOnFocusRef.current) {
+      skipOpenOnFocusRef.current = false;
+      return;
+    }
+    setOpen(true);
+  }, [onFocus, setOpen]);
+  const handleClick = useCallback(() => {
+    if (!isOpen) {
+      setOpen(true);
+    }
+  }, [isOpen, setOpen]);
+  const handleClear = useCallback(() => {
+    if (value === void 0) {
+      setInternalValue("");
+      if (inputRef.current) {
+        inputRef.current.value = "";
+      }
+    }
+    onSearch && onSearch("");
+    onChange && onChange("");
+    inputRef.current && inputRef.current.focus();
+  }, [onChange, onSearch, value]);
+  const handleKeyDown = useCallback((event) => {
+    if (event.key === "Enter" && isOpen && defaultActiveFirstOption !== false) {
+      const firstEnabled = displayedOptions.find((option) => !option.disabled);
+      if (firstEnabled) {
+        event.preventDefault();
+        handleSelect(firstEnabled.value);
+      }
+    }
+  }, [isOpen, defaultActiveFirstOption, displayedOptions, handleSelect]);
+  useEffect(() => {
+    externalHandleRef.current = {
+      focus: () => inputRef.current?.focus(),
+      blur: () => inputRef.current?.blur(),
+      input: inputRef.current
+    };
+    handleInputRef && handleInputRef(externalHandleRef);
+  }, [handleInputRef]);
+  const getParentNode = useCallback((triggerNode) => triggerNode.parentNode, []);
   const iconCount = +!!icon1 + +!!icon2;
+  const placeholderString = typeof placeholder === "string" ? placeholder : void 0;
+  const {
+    sizerRef,
+    containerRef
+  } = useAutosizeWidth({
+    value: currentValue,
+    placeholder: placeholderString,
+    extraWidth: AUTOSIZE_EXTRA_WIDTH + getIconsWidth(iconCount),
+    inputRef
+  });
   const handleIconsClick = useCallback(() => {
-    antSelectRef.current?.focus();
+    inputRef.current && inputRef.current.focus();
   }, []);
   const icons = useMemo(() => {
+    if (!icon1 && !icon2) {
+      return null;
+    }
     const icon1WithTooltip = icon1Tooltip ? /* @__PURE__ */ jsx(Tooltip, { title: icon1Tooltip, children: icon1 }) : icon1;
     const icon2WithTooltip = icon2Tooltip ? /* @__PURE__ */ jsx(Tooltip, { title: icon2Tooltip, children: icon2 }) : icon2;
-    return /* @__PURE__ */ jsx(Fragment, { children: (icon1WithTooltip || icon2WithTooltip) && /* @__PURE__ */ jsxs(IconWrapper, { onClick: handleIconsClick, children: [
+    return /* @__PURE__ */ jsxs(IconWrapper, { onClick: handleIconsClick, children: [
       icon1WithTooltip,
       " ",
       icon2WithTooltip
-    ] }) });
+    ] });
   }, [handleIconsClick, icon1, icon2, icon1Tooltip, icon2Tooltip]);
-  return /* @__PURE__ */ jsx(AutocompleteWrapper, { ref: elementRef, autoResize, className: `ds-autocomplete ${className || ""}`, children: /* @__PURE__ */ jsx(FormField, { label, tooltip, tooltipConfig, description, errorText, children: /* @__PURE__ */ jsx(ComponentWrapper, { readOnly, error: !!errorText || error, iconCount, children: /* @__PURE__ */ jsxs(AutosizeWrapper, { autoResize: !!autoResize, value: rest.value, placeholder: placeholderString, transformRef, ref: autosizeRef, extraWidth: AUTOSIZE_EXTRA_WIDTH + getIconsWidth(iconCount), preAutosize: handlePreAutosize, onAutosize: handleAutosize, children: [
-    /* @__PURE__ */ jsx(AutoComplete, { ...rest, disabled: readOnly || disabled, dropdownClassName: "ds-autocomplete-dropdown ps__child--consume", getPopupContainer: getPopupContainer || getParentNode, ref: antSelectRef, "data-testid": "autocomplete-autosize-input" }),
-    icons
-  ] }) }) }) });
+  const showClear = !!allowClear && !isDisabled && currentValue !== "";
+  const hasDropdownContent = displayedOptions.length > 0 || notFoundContent !== void 0 && notFoundContent !== null;
+  return /* @__PURE__ */ jsx(AutocompleteWrapper, { autoResize, style, className: `ds-autocomplete ${className || ""}`, children: /* @__PURE__ */ jsx(FormField, { label, tooltip, tooltipConfig, description, errorText, id, children: /* @__PURE__ */ jsx(ComponentWrapper, { readOnly, error: !!errorText || error, iconCount, children: /* @__PURE__ */ jsx(
+    Dropdown,
+    {
+      open: isOpen && hasDropdownContent,
+      onOpenChange: setOpen,
+      disabled: isDisabled,
+      placement,
+      size: "match-trigger",
+      trigger: [],
+      getPopupContainer: getPopupContainer || getParentNode,
+      overlayClassName: "ds-autocomplete-dropdown ps__child--consume",
+      asChild: true,
+      overlay: /* @__PURE__ */ jsx(AutocompleteDropdown, { options: displayedOptions, notFoundContent, onSelect: handleSelect }),
+      children: /* @__PURE__ */ jsxs(InputContainer, { ref: containerRef, autoResize, children: [
+        /* @__PURE__ */ jsx(NativeInput, { ref: inputRef, iconCount, role: "combobox", "aria-expanded": isOpen, "aria-autocomplete": "list", autoComplete: "off", "data-testid": "autocomplete-autosize-input", id, ...value !== void 0 ? {
+          value
+        } : {
+          defaultValue
+        }, placeholder: placeholderString, disabled: isDisabled, autoFocus, maxLength, onChange: handleChange, onClick: handleClick, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur }),
+        autoResize && /* @__PURE__ */ jsx("span", { ref: sizerRef, style: SIZER_STYLE, "aria-hidden": true }),
+        showClear && /* @__PURE__ */ jsx(ClearButton, { type: "button", "aria-label": "clear", "data-testid": "autocomplete-clear", onClick: handleClear, children: "×" }),
+        icons
+      ] })
+    }
+  ) }) }) });
 };
-Autocomplete.Option = AutoComplete.Option;
+Autocomplete.Option = Option;
 export {
   Autocomplete as default
 };

package/dist/Autocomplete.styles.d.ts

@@ -1,8 +1,15 @@
 import { AutoResizeProp } from '@synerise/ds-input';
+export declare const InputContainer: import('styled-components').StyledComponent<"div", any, {
+    autoResize?: AutoResizeProp;
+}, never>;
+export declare const NativeInput: import('styled-components').StyledComponent<"input", any, {
+    iconCount?: number;
+}, never>;
 export declare const AutocompleteWrapper: import('styled-components').StyledComponent<"div", any, {
     autoResize?: AutoResizeProp;
 }, never>;
 export declare const IconWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ClearButton: import('styled-components').StyledComponent<"button", any, {}, never>;
 export declare const ComponentWrapper: import('styled-components').StyledComponent<"div", any, {
     error?: boolean;
     readOnly?: boolean;

package/dist/Autocomplete.styles.js

@@ -1,43 +1,59 @@
 import styled, { css } from "styled-components";
-import { autoresizeConfObjToCss } from "@synerise/ds-input/dist/Input.styles";
 import { ICON_OFFSET, ICON_GAP } from "./Autocomplete.const.js";
 import { getIconsWidth } from "./utils/getIconsWidth.js";
-const active = () => css(["transition:ease-in-out all 0.2s,width 0s,min-width 0s,max-width 0s;box-shadow:inset 0 0 0 1px ", ";border:1px solid ", ";background-color:", ";"], (props) => props.theme.palette["blue-600"], (props) => props.theme.palette["blue-600"], (props) => props.theme.palette["blue-050"]);
-const error = () => css(["transition:ease-in-out all 0.2s,width 0s,min-width 0s,max-width 0s;box-shadow:inset 0 0 0 1px ", ";background:", ";border:1px solid ", ";"], (props) => props.theme.palette["red-600"], (props) => props.theme.palette["red-050"], (props) => props.theme.palette["red-600"]);
-const readonly = () => css(["background-color:", ";color:", ";input{cursor:auto;}"], (props) => props.theme.palette.white, (props) => props.theme.palette["grey-700"]);
+const baseTransition = /* @__PURE__ */ css(["transition:ease-in-out all 0.2s,width 0s,min-width 0s,max-width 0s;"]);
+const active = () => css(["", ";box-shadow:inset 0 0 0 1px ", ";border:1px solid ", ";background-color:", ";"], baseTransition, (props) => props.theme.palette["blue-600"], (props) => props.theme.palette["blue-600"], (props) => props.theme.palette["blue-050"]);
+const errorStyle = () => css(["", ";box-shadow:inset 0 0 0 1px ", ";background:", ";border:1px solid ", ";"], baseTransition, (props) => props.theme.palette["red-600"], (props) => props.theme.palette["red-050"], (props) => props.theme.palette["red-600"]);
+const readonly = () => css(["background-color:", ";color:", ";cursor:auto;"], (props) => props.theme.palette.white, (props) => props.theme.palette["grey-700"]);
+const InputContainer = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Autocompletestyles__InputContainer",
+  componentId: "sc-10de6ms-0"
+})(["position:relative;display:inline-flex;align-items:center;box-sizing:border-box;width:", ";", ""], (props) => props.autoResize ? "auto" : "100%", (props) => {
+  const ar = props.autoResize;
+  if (!ar || ar === true) {
+    return "";
+  }
+  let maxWidth = "";
+  if (ar.maxWidth) {
+    maxWidth = `max-width: ${ar.maxWidth};`;
+  } else if (ar.stretchToFit) {
+    maxWidth = "max-width: 100%;";
+  }
+  return css(["min-width:", ";", ""], ar.minWidth, maxWidth);
+});
+const NativeInput = /* @__PURE__ */ styled.input.withConfig({
+  displayName: "Autocompletestyles__NativeInput",
+  componentId: "sc-10de6ms-1"
+})(["box-sizing:border-box;width:100%;height:32px;margin:0;&&{padding:0 10px;padding-right:", ";}border:1px solid ", ";border-radius:3px;background-color:", ";color:", ";font-family:inherit;font-size:13px;line-height:1.54;font-feature-settings:'tnum';outline:none;", ";&::placeholder{color:", ";}&:hover:not(:disabled){border-color:", ";}&:disabled{background-color:", ";color:", ";cursor:not-allowed;}&:focus{", ";&:hover{", ";}}"], (props) => `${getIconsWidth(props.iconCount || 0) + 10}px`, (props) => props.theme.palette["grey-300"], (props) => props.theme.palette.white, (props) => props.theme.palette["grey-700"], baseTransition, (props) => props.theme.palette["grey-500"], (props) => props.theme.palette["grey-400"], (props) => props.theme.palette["grey-050"], (props) => props.theme.palette["grey-400"], active(), active());
 const AutocompleteWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Autocompletestyles__AutocompleteWrapper",
-  componentId: "sc-10de6ms-0"
-})(["input{font-feature-settings:'tnum';}.ant-select-auto-complete{width:", ";", ";grid-area:1 / 1;}.ant-select > span{position:absolute;left:0;top:0;}.ant-select-dropdown{.ant-select-selection__rendered{margin:0;}.ant-select-selection:hover .ant-select-selection__rendered{margin-right:10px;}.ant-select-selection__clear{font-size:15px;color:", ";width:16px;height:16px;margin-top:-7px;}&.ant-select:not(.ant-select-no-arrow) .ant-select-selection__clear{right:12px;&:hover{color:", ";}}.ant-select-dropdown-menu-item{font-weight:normal;strong{font-weight:500;}}}.ant-select-selection-search-input{padding:0;padding-right:10px;}"], (props) => props.autoResize ? "100%" : "200px", (props) => autoresizeConfObjToCss({
-  ...props,
-  boxSizing: "border-box"
-}), (props) => props.theme.palette["grey-600"], (props) => props.theme.palette["grey-700"]);
+  componentId: "sc-10de6ms-2"
+})(["width:", ";"], (props) => props.autoResize ? "100%" : "200px");
 const IconWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Autocompletestyles__IconWrapper",
-  componentId: "sc-10de6ms-1"
+  componentId: "sc-10de6ms-3"
 })(["position:absolute;right:", "px;top:0;display:flex;bottom:0;align-items:center;gap:", "px;z-index:5;"], ICON_OFFSET, ICON_GAP);
+const ClearButton = /* @__PURE__ */ styled.button.withConfig({
+  displayName: "Autocompletestyles__ClearButton",
+  componentId: "sc-10de6ms-4"
+})(["position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;color:", ";font-size:15px;line-height:1;cursor:pointer;z-index:6;&:hover{color:", ";}"], (props) => props.theme.palette["grey-600"], (props) => props.theme.palette["grey-700"]);
 const ComponentWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Autocompletestyles__ComponentWrapper",
-  componentId: "sc-10de6ms-2"
-})(["&&&{", ";.ant-select-auto-complete{", "}}}"], (props) => props.iconCount && `
-    position: relative;
-    display: inline-block;
-    & {
-        .ant-select .ant-select-selector .ant-select-selection-search {
-          right: ${getIconsWidth(props.iconCount)}px;
-        }
-      }
-  `, (props) => {
+  componentId: "sc-10de6ms-5"
+})(["&&&{", ";", "}"], (props) => props.iconCount ? css(["position:relative;"]) : "", (props) => {
   if (props.readOnly) {
-    return css([".ant-select-selector{&:hover{", "}", "}"], readonly(), readonly());
+    return css(["", "{", ";&:hover{", ";}}"], NativeInput, readonly(), readonly());
   }
   if (props.error) {
-    return css([".ant-select-selector{&:hover{", "}", "}"], error(), error());
+    return css(["", "{", ";&:hover{", ";}}"], NativeInput, errorStyle(), errorStyle());
   }
-  return css(["&.ant-select{.ant-select-selector{padding:0 10px;}.ant-input{transition:ease-in-out all 0.3s,width 0s,min-width 0s,max-width 0s;&:focus{", " &:hover{", "}}}}"], active(), active());
+  return "";
 });
 export {
   AutocompleteWrapper,
+  ClearButton,
   ComponentWrapper,
-  IconWrapper
+  IconWrapper,
+  InputContainer,
+  NativeInput
 };

package/dist/Autocomplete.types.d.ts

@@ -1,17 +1,76 @@
-import { AutoCompleteProps as OriginalProps, RefSelectProps } from 'antd';
-import { MutableRefObject, ReactNode } from 'react';
+import { CSSProperties, MutableRefObject, ReactNode } from 'react';
+import { DropdownPlacement } from '@synerise/ds-dropdown';
 import { FormFieldCommonProps } from '@synerise/ds-form-field';
 import { AutoResizeProp } from '@synerise/ds-input';
-export type OverrideProps = FormFieldCommonProps & {
+export type AutocompleteOption = {
+    value: string;
+    label?: ReactNode;
+    disabled?: boolean;
+};
+/**
+ * Imperative handle exposed through `handleInputRef`. Native replacement for the
+ * antd `RefSelectProps` — only the focus affordance the icon slots rely on is
+ * guaranteed, alongside the underlying `<input>` element.
+ */
+export type AutocompleteInputHandle = {
+    focus: () => void;
+    blur: () => void;
+    input: HTMLInputElement | null;
+};
+export type AutocompleteProps = FormFieldCommonProps & {
     className?: string;
+    /** Inline style applied to the outer wrapper (e.g. `{ width: 350 }`). */
+    style?: CSSProperties;
     icon1?: ReactNode;
     icon1Tooltip?: ReactNode;
     icon2?: ReactNode;
     icon2Tooltip?: ReactNode;
     error?: boolean;
-    getPopupContainer?: (node: HTMLElement) => HTMLElement;
     readOnly?: boolean;
-    handleInputRef?: (ref: MutableRefObject<RefSelectProps | null>) => void;
     autoResize?: AutoResizeProp;
+    /**
+     * Container the floating dropdown is mounted into. Defaults to the trigger's
+     * `parentNode` (mirrors the legacy antd `getParentNode`).
+     */
+    getPopupContainer?: (node: HTMLElement) => HTMLElement;
+    handleInputRef?: (ref: MutableRefObject<AutocompleteInputHandle | null>) => void;
+    /** Options shown in the dropdown. The component does NOT filter them. */
+    options?: AutocompleteOption[];
+    /** Declarative options via `Autocomplete.Option` children. */
+    children?: ReactNode;
+    value?: string;
+    defaultValue?: string;
+    placeholder?: ReactNode;
+    disabled?: boolean;
+    allowClear?: boolean;
+    autoFocus?: boolean;
+    maxLength?: number;
+    id?: string;
+    /**
+     * antd parity. When `true` (default), pressing Enter while the dropdown is open —
+     * before arrow-navigating into the list — selects the first enabled option. Set
+     * `false` to require explicit arrow-key navigation before Enter selects.
+     */
+    defaultActiveFirstOption?: boolean;
+    /** Rendered inside the dropdown when there are no options. */
+    notFoundContent?: ReactNode;
+    placement?: DropdownPlacement;
+    /** Controlled dropdown visibility. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. */
+    defaultOpen?: boolean;
+    onDropdownVisibleChange?: (open: boolean) => void;
+    onChange?: (value: string) => void;
+    /** Fired on every input keystroke. */
+    onSearch?: (value: string) => void;
+    /**
+     * Optional client-side filtering (antd-parity). Off by default (consumers
+     * filter server-side via `onSearch`). `true` = default match on the option's
+     * value / string label; a function `(inputValue, option) => boolean` = custom.
+     */
+    filterOption?: boolean | ((inputValue: string, option: AutocompleteOption) => boolean);
+    /** Fired when an option is chosen. */
+    onSelect?: (value: string) => void;
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
 };
-export type AutocompleteProps = OverrideProps & Omit<OriginalProps, 'tagRender' | 'fieldNames' | 'filterSort' | 'filterOption' | 'tokenSeparators' | 'transitionName' | 'showArrow' | 'animation' | 'searchValue' | 'showArrow' | 'listItemHeight' | 'menuItemSelectedIcon' | 'maxTagCount' | 'maxTagPlaceholder' | 'maxTagTextLength' | 'fieldNames' | 'filterOption' | 'backfill' | 'bordered' | 'choiceTransitionName' | 'showSearch'>;

package/dist/AutocompleteDropdown/AutocompleteDropdown.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { AutocompleteDropdownProps } from './AutocompleteDropdown.types';
+declare const AutocompleteDropdown: ({ options, notFoundContent, visibleRows, rowHeight, onSelect, }: AutocompleteDropdownProps) => React.JSX.Element;
+export default AutocompleteDropdown;

package/dist/AutocompleteDropdown/AutocompleteDropdown.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import Scrollbar from "@synerise/ds-scrollbar";
+import { DropdownWrapper, NotFound, ScrollList, Inner, ListItem } from "./AutocompleteDropdown.style.js";
+const DEFAULT_ROW_HEIGHT = 32;
+const DEFAULT_VISIBLE_ROWS = 10;
+const AutocompleteDropdown = ({
+  options,
+  notFoundContent,
+  visibleRows = DEFAULT_VISIBLE_ROWS,
+  rowHeight = DEFAULT_ROW_HEIGHT,
+  onSelect
+}) => {
+  if (options.length === 0) {
+    return /* @__PURE__ */ jsx(DropdownWrapper, { children: /* @__PURE__ */ jsx(NotFound, { "data-testid": "autocomplete-not-found", children: notFoundContent }) });
+  }
+  const maxHeight = Math.min(visibleRows, options.length) * rowHeight;
+  return /* @__PURE__ */ jsx(DropdownWrapper, { children: /* @__PURE__ */ jsx(ScrollList, { children: /* @__PURE__ */ jsx(Scrollbar, { absolute: true, maxHeight, children: /* @__PURE__ */ jsx(Inner, { children: options.map((option) => /* @__PURE__ */ jsx(ListItem, { role: "option", "data-testid": "autocomplete-option", text: option.label ?? option.value, disabled: option.disabled, onClick: () => {
+    if (!option.disabled) {
+      onSelect(option.value);
+    }
+  } }, option.value)) }) }) }) });
+};
+export {
+  AutocompleteDropdown as default
+};

package/dist/AutocompleteDropdown/AutocompleteDropdown.style.d.ts

@@ -0,0 +1,6 @@
+import { StyledListItem } from '@synerise/ds-list-item';
+export declare const DropdownWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ScrollList: import('styled-components').StyledComponent<({ children, onClick, maxToShowItems, texts, ...htmlAttributes }: import('@synerise/ds-list-item').ListWrapperProps) => React.JSX.Element, any, {}, never>;
+export declare const Inner: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const NotFound: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ListItem: StyledListItem;

package/dist/AutocompleteDropdown/AutocompleteDropdown.style.js

@@ -0,0 +1,31 @@
+import styled from "styled-components";
+import DSListItem, { ListWrapper } from "@synerise/ds-list-item";
+const DropdownWrapper = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "AutocompleteDropdownstyle__DropdownWrapper",
+  componentId: "sc-7kdjse-0"
+})(["display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;min-width:200px;"]);
+const ScrollList = /* @__PURE__ */ styled(ListWrapper).withConfig({
+  displayName: "AutocompleteDropdownstyle__ScrollList",
+  componentId: "sc-7kdjse-1"
+})(["&&{padding-right:0;}"]);
+const Inner = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "AutocompleteDropdownstyle__Inner",
+  componentId: "sc-7kdjse-2"
+})(["padding-right:8px;"]);
+const NotFound = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "AutocompleteDropdownstyle__NotFound",
+  componentId: "sc-7kdjse-3"
+})(["display:flex;align-items:center;justify-content:center;padding:8px 12px;color:", ";font-weight:normal;"], ({
+  theme
+}) => theme.palette["grey-600"]);
+const ListItem = /* @__PURE__ */ styled(DSListItem).withConfig({
+  displayName: "AutocompleteDropdownstyle__ListItem",
+  componentId: "sc-7kdjse-4"
+})(["min-width:auto;font-weight:normal;strong{font-weight:500;}"]);
+export {
+  DropdownWrapper,
+  Inner,
+  ListItem,
+  NotFound,
+  ScrollList
+};

package/dist/AutocompleteDropdown/AutocompleteDropdown.types.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { AutocompleteOption } from '../Autocomplete.types';
+export type AutocompleteDropdownProps = {
+    options: AutocompleteOption[];
+    notFoundContent?: ReactNode;
+    visibleRows?: number;
+    rowHeight?: number;
+    onSelect: (value: string) => void;
+};

package/dist/AutocompleteDropdown/AutocompleteDropdown.types.js

@@ -0,0 +1 @@
+

package/dist/Option.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+export type OptionProps = {
+    value: string;
+    disabled?: boolean;
+    children?: ReactNode;
+};
+/**
+ * Declarative option marker. It renders nothing on its own — `Autocomplete`
+ * reads its props (`value`, `children` → label) to build the internal options
+ * list. Kept for backwards compatibility with the antd `AutoComplete.Option` API.
+ */
+export declare const Option: {
+    (_props: OptionProps): null;
+    displayName: string;
+};

package/dist/Option.js

@@ -0,0 +1,5 @@
+const Option = (_props) => null;
+Option.displayName = "Autocomplete.Option";
+export {
+  Option
+};

package/dist/index.d.ts

@@ -1,3 +1,4 @@
-import { AutocompleteProps } from './Autocomplete.types';
+import { AutocompleteInputHandle, AutocompleteOption, AutocompleteProps } from './Autocomplete.types';
+import { OptionProps } from './Option';
 export { default } from './Autocomplete';
-export type { AutocompleteProps };
+export type { AutocompleteProps, AutocompleteOption, AutocompleteInputHandle, OptionProps, };

package/dist/utils/getOptionsFromChildren.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { AutocompleteOption } from '../Autocomplete.types';
+/**
+ * Maps declarative `<Autocomplete.Option>` children to the internal option
+ * shape. Only direct `Option` children are considered; anything else is ignored.
+ */
+export declare const getOptionsFromChildren: (children: ReactNode) => AutocompleteOption[];

package/dist/utils/getOptionsFromChildren.js

@@ -0,0 +1,24 @@
+import { Children, isValidElement } from "react";
+import { Option } from "../Option.js";
+const getOptionsFromChildren = (children) => {
+  const options = [];
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child) || child.type !== Option) {
+      return;
+    }
+    const {
+      value,
+      disabled,
+      children: label
+    } = child.props;
+    options.push({
+      value,
+      disabled,
+      label
+    });
+  });
+  return options;
+};
+export {
+  getOptionsFromChildren
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-autocomplete",
-  "version": "1.2.48",
+  "version": "1.2.49",
   "description": "Autocomplete UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -41,17 +41,20 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
+    "@synerise/ds-dropdown": "^1.3.18",
     "@synerise/ds-form-field": "^1.3.23",
-    "@synerise/ds-input": "^1.7.11",
+    "@synerise/ds-input": "^1.7.12",
+    "@synerise/ds-list-item": "^1.6.0",
+    "@synerise/ds-scrollbar": "^1.5.1",
+    "@synerise/ds-search": "^1.5.32",
     "@synerise/ds-tooltip": "^1.5.3",
     "@synerise/ds-utils": "^1.10.1"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
-    "antd": "4.24.16",
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3",
     "vitest": "4"
   },
-  "gitHead": "d8c64070f58f14e3fb1bfbcbf00d1e3b8fd51eb8"
+  "gitHead": "5c90008871be36fb52553a2ed3a633acf5db5b3b"
 }

package/dist/style/index.css

@@ -1 +0,0 @@
-.ant-select-auto-complete{box-sizing:border-box;margin:0;padding:0;color:#6a7580;font-size:13px;font-variant:tabular-nums;line-height:1.38;list-style:none;font-feature-settings:'tnum'}.ant-select-auto-complete .ant-select-clear{right:13px}.ant-select-single .ant-select-selector{display:flex}.ant-select-single .ant-select-selector .ant-select-selection-search{position:absolute;top:0;right:15px;bottom:0;left:15px}.ant-select-single .ant-select-selector .ant-select-selection-search-input{width:100%}.ant-select-single .ant-select-selector .ant-select-selection-item,.ant-select-single .ant-select-selector .ant-select-selection-placeholder{padding:0;line-height:30px;transition:all .3s,visibility 0s}.ant-select-single .ant-select-selector .ant-select-selection-item{position:relative;user-select:none}.ant-select-single .ant-select-selector .ant-select-selection-placeholder{transition:none;pointer-events:none}.ant-select-single .ant-select-selector .ant-select-selection-item::after,.ant-select-single .ant-select-selector .ant-select-selection-placeholder::after,.ant-select-single .ant-select-selector::after{display:inline-block;width:0;visibility:hidden;content:'\a0'}.ant-select-single.ant-select-show-arrow .ant-select-selection-search{right:28px}.ant-select-single.ant-select-show-arrow .ant-select-selection-item,.ant-select-single.ant-select-show-arrow .ant-select-selection-placeholder{padding-right:17px}.ant-select-single.ant-select-open .ant-select-selection-item{color:#b5bdc3}.ant-select-single:not(.ant-select-customize-input) .ant-select-selector{width:100%;height:32px;padding:0 15px}.ant-select-single:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-search-input{height:30px}.ant-select-single:not(.ant-select-customize-input) .ant-select-selector::after{line-height:30px}.ant-select-single.ant-select-customize-input .ant-select-selector::after{display:none}.ant-select-single.ant-select-customize-input .ant-select-selector .ant-select-selection-search{position:static;width:100%}.ant-select-single.ant-select-customize-input .ant-select-selector .ant-select-selection-placeholder{position:absolute;right:0;left:0;padding:0 15px}.ant-select-single.ant-select-customize-input .ant-select-selector .ant-select-selection-placeholder::after{display:none}.ant-select-single.ant-select-lg:not(.ant-select-customize-input) .ant-select-selector{height:40px}.ant-select-single.ant-select-lg:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-item,.ant-select-single.ant-select-lg:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-placeholder,.ant-select-single.ant-select-lg:not(.ant-select-customize-input) .ant-select-selector::after{line-height:38px}.ant-select-single.ant-select-lg:not(.ant-select-customize-input):not(.ant-select-customize-input) .ant-select-selection-search-input{height:38px}.ant-select-single.ant-select-sm:not(.ant-select-customize-input) .ant-select-selector{height:24px}.ant-select-single.ant-select-sm:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-item,.ant-select-single.ant-select-sm:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-placeholder,.ant-select-single.ant-select-sm:not(.ant-select-customize-input) .ant-select-selector::after{line-height:22px}.ant-select-single.ant-select-sm:not(.ant-select-customize-input):not(.ant-select-customize-input) .ant-select-selection-search-input{height:22px}.ant-select-single.ant-select-sm:not(.ant-select-customize-input) .ant-select-selection-search{right:7px;left:7px}.ant-select-single.ant-select-sm:not(.ant-select-customize-input) .ant-select-selector{padding:0 7px}.ant-select-single.ant-select-sm:not(.ant-select-customize-input).ant-select-show-arrow .ant-select-selection-search{right:26.5px}.ant-select-single.ant-select-sm:not(.ant-select-customize-input).ant-select-show-arrow .ant-select-selection-item,.ant-select-single.ant-select-sm:not(.ant-select-customize-input).ant-select-show-arrow .ant-select-selection-placeholder{padding-right:19.5px}.ant-select-single.ant-select-lg:not(.ant-select-customize-input) .ant-select-selector{padding:0 15px}.ant-select-selection-overflow{position:relative;display:flex;flex:auto;flex-wrap:wrap;max-width:100%}.ant-select-selection-overflow-item{flex:none;align-self:center;max-width:100%}.ant-select-multiple .ant-select-selector{display:flex;flex-wrap:wrap;align-items:center;padding:1px 4px}.ant-select-show-search.ant-select-multiple .ant-select-selector{cursor:text}.ant-select-disabled.ant-select-multiple .ant-select-selector{background:#f9fafb;cursor:not-allowed}.ant-select-multiple .ant-select-selector::after{display:inline-block;width:0;margin:2px 0;line-height:24px;visibility:hidden;content:'\a0'}.ant-select-multiple.ant-select-allow-clear .ant-select-selector,.ant-select-multiple.ant-select-show-arrow .ant-select-selector{padding-right:27px}.ant-select-multiple .ant-select-selection-item{position:relative;display:flex;flex:none;box-sizing:border-box;max-width:100%;height:24px;margin-top:2px;margin-bottom:2px;line-height:22px;background:#f3f5f6;border:1px solid #e9edee;border-radius:3px;cursor:default;transition:font-size .3s,line-height .3s,height .3s;user-select:none;margin-inline-end:4px;padding-inline-start:8px;padding-inline-end:4px}.ant-select-disabled.ant-select-multiple .ant-select-selection-item{color:#bfbfbf;border-color:#dbe0e3;cursor:not-allowed}.ant-select-multiple .ant-select-selection-item-content{display:inline-block;margin-right:4px;overflow:hidden;white-space:pre;text-overflow:ellipsis}.ant-select-multiple .ant-select-selection-item-remove{color:inherit;font-style:normal;line-height:0;text-align:center;text-transform:none;vertical-align:-.125em;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:inline-flex;align-items:center;color:#232936;font-weight:700;font-size:10px;line-height:inherit;cursor:pointer}.ant-select-multiple .ant-select-selection-item-remove>*{line-height:1}.ant-select-multiple .ant-select-selection-item-remove svg{display:inline-block}.ant-select-multiple .ant-select-selection-item-remove::before{display:none}.ant-select-multiple .ant-select-selection-item-remove .ant-select-multiple .ant-select-selection-item-remove-icon{display:block}.ant-select-multiple .ant-select-selection-item-remove>.anticon{vertical-align:middle}.ant-select-multiple .ant-select-selection-item-remove:hover{color:rgba(0,0,0,.75)}.ant-select-multiple .ant-select-selection-overflow-item+.ant-select-selection-overflow-item .ant-select-selection-search{margin-inline-start:0}.ant-select-multiple .ant-select-selection-search{position:relative;max-width:100%;margin-inline-start:11px}.ant-select-multiple .ant-select-selection-search-input,.ant-select-multiple .ant-select-selection-search-mirror{height:24px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';line-height:24px;transition:all .3s}.ant-select-multiple .ant-select-selection-search-input{width:100%;min-width:4.1px}.ant-select-multiple .ant-select-selection-search-mirror{position:absolute;top:0;left:0;z-index:999;white-space:pre;visibility:hidden}.ant-select-multiple .ant-select-selection-placeholder{position:absolute;top:50%;right:15px;left:15px;transform:translateY(-50%);transition:all .3s}.ant-select-multiple.ant-select-lg .ant-select-selector::after{line-height:40px}.ant-select-multiple.ant-select-lg .ant-select-selection-item{height:40px;line-height:38px}.ant-select-multiple.ant-select-lg .ant-select-selection-search{height:40px;line-height:40px}.ant-select-multiple.ant-select-lg .ant-select-selection-search-input,.ant-select-multiple.ant-select-lg .ant-select-selection-search-mirror{height:40px;line-height:38px}.ant-select-multiple.ant-select-sm .ant-select-selector::after{line-height:16px}.ant-select-multiple.ant-select-sm .ant-select-selection-item{height:16px;line-height:14px}.ant-select-multiple.ant-select-sm .ant-select-selection-search{height:16px;line-height:16px}.ant-select-multiple.ant-select-sm .ant-select-selection-search-input,.ant-select-multiple.ant-select-sm .ant-select-selection-search-mirror{height:16px;line-height:14px}.ant-select-multiple.ant-select-sm .ant-select-selection-placeholder{left:7px}.ant-select-multiple.ant-select-sm .ant-select-selection-search{margin-inline-start:3px}.ant-select-disabled .ant-select-selection-item-remove{display:none}.ant-select-status-error.ant-select:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer) .ant-select-selector{background-color:#fff;border-color:#f52922!important}.ant-select-status-error.ant-select:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer).ant-select-focused .ant-select-selector,.ant-select-status-error.ant-select:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer).ant-select-open .ant-select-selector{border-color:#ff584d;box-shadow:0 0 0 0 rgba(245,41,34,.2);border-right-width:1px;outline:0}.ant-select-status-warning.ant-select:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer) .ant-select-selector{background-color:#fff;border-color:#fab700!important}.ant-select-status-warning.ant-select:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer).ant-select-focused .ant-select-selector,.ant-select-status-warning.ant-select:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer).ant-select-open .ant-select-selector{border-color:#ffcd29;box-shadow:0 0 0 0 rgba(250,183,0,.2);border-right-width:1px;outline:0}.ant-select-status-error.ant-select-has-feedback .ant-select-clear,.ant-select-status-success.ant-select-has-feedback .ant-select-clear,.ant-select-status-validating.ant-select-has-feedback .ant-select-clear,.ant-select-status-warning.ant-select-has-feedback .ant-select-clear{right:32px}.ant-select-status-error.ant-select-has-feedback .ant-select-selection-selected-value,.ant-select-status-success.ant-select-has-feedback .ant-select-selection-selected-value,.ant-select-status-validating.ant-select-has-feedback .ant-select-selection-selected-value,.ant-select-status-warning.ant-select-has-feedback .ant-select-selection-selected-value{padding-right:42px}.ant-select{box-sizing:border-box;margin:0;padding:0;color:#6a7580;font-size:13px;font-variant:tabular-nums;line-height:1.38;list-style:none;font-feature-settings:'tnum';position:relative;display:inline-block;cursor:pointer}.ant-select:not(.ant-select-customize-input) .ant-select-selector{position:relative;background-color:#fff;border:1px solid #dbe0e3;border-radius:3px;transition:all .3s cubic-bezier(.645, .045, .355, 1)}.ant-select:not(.ant-select-customize-input) .ant-select-selector input{cursor:pointer}.ant-select-show-search.ant-select:not(.ant-select-customize-input) .ant-select-selector{cursor:text}.ant-select-show-search.ant-select:not(.ant-select-customize-input) .ant-select-selector input{cursor:auto}.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector{border-color:#38f;box-shadow:0 0 0 0 rgba(11,104,255,.2);border-right-width:1px;outline:0}.ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector{color:#b5bdc3;background:#f9fafb;cursor:not-allowed}.ant-select-multiple.ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector{background:#f9fafb}.ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector input{cursor:not-allowed}.ant-select:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-search-input{margin:0;padding:0;background:0 0;border:none;outline:0;appearance:none}.ant-select:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-search-input::-webkit-search-cancel-button{display:none;-webkit-appearance:none}.ant-select:not(.ant-select-disabled):hover .ant-select-selector{border-color:#b5bdc3;border-right-width:1px}.ant-select-selection-item{flex:1;overflow:hidden;font-weight:400;white-space:nowrap;text-overflow:ellipsis}@media all and (-ms-high-contrast:none){.ant-select-selection-item,.ant-select-selection-item ::-ms-backdrop{flex:auto}}.ant-select-selection-placeholder{flex:1;overflow:hidden;color:#b5bdc3;white-space:nowrap;text-overflow:ellipsis;pointer-events:none}@media all and (-ms-high-contrast:none){.ant-select-selection-placeholder,.ant-select-selection-placeholder ::-ms-backdrop{flex:auto}}.ant-select-arrow{display:inline-flex;color:inherit;font-style:normal;line-height:0;text-transform:none;vertical-align:-.125em;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:absolute;top:50%;right:15px;display:flex;align-items:center;height:11px;margin-top:-5.5px;color:#b5bdc3;font-size:11px;line-height:1;text-align:center;pointer-events:none}.ant-select-arrow>*{line-height:1}.ant-select-arrow svg{display:inline-block}.ant-select-arrow::before{display:none}.ant-select-arrow .ant-select-arrow-icon{display:block}.ant-select-arrow .anticon{vertical-align:top;transition:transform .3s}.ant-select-arrow .anticon>svg{vertical-align:top}.ant-select-arrow .anticon:not(.ant-select-suffix){pointer-events:auto}.ant-select-disabled .ant-select-arrow{cursor:not-allowed}.ant-select-arrow>:not(:last-child){margin-inline-end:8px}.ant-select-clear{position:absolute;top:50%;right:15px;z-index:1;display:inline-block;width:11px;height:11px;margin-top:-5.5px;color:#b5bdc3;font-size:11px;font-style:normal;line-height:1;text-align:center;text-transform:none;background:#fff;cursor:pointer;opacity:0;transition:color .3s ease,opacity .15s ease;text-rendering:auto}.ant-select-clear::before{display:block}.ant-select-clear:hover{color:#232936}.ant-select:hover .ant-select-clear{opacity:1}.ant-select-dropdown{margin:0;padding:0;color:#6a7580;font-variant:tabular-nums;line-height:1.38;list-style:none;font-feature-settings:'tnum';position:absolute;top:-9999px;left:-9999px;z-index:991050;box-sizing:border-box;padding:4px 0;overflow:hidden;font-size:13px;font-variant:initial;background-color:#fff;border-radius:3px;outline:0;box-shadow:0 2px 6px rgba(171,178,183,.12)}.ant-select-dropdown.ant-slide-up-appear.ant-slide-up-appear-active.ant-select-dropdown-placement-bottomLeft,.ant-select-dropdown.ant-slide-up-enter.ant-slide-up-enter-active.ant-select-dropdown-placement-bottomLeft{animation-name:antSlideUpIn}.ant-select-dropdown.ant-slide-up-appear.ant-slide-up-appear-active.ant-select-dropdown-placement-topLeft,.ant-select-dropdown.ant-slide-up-enter.ant-slide-up-enter-active.ant-select-dropdown-placement-topLeft{animation-name:antSlideDownIn}.ant-select-dropdown.ant-slide-up-leave.ant-slide-up-leave-active.ant-select-dropdown-placement-bottomLeft{animation-name:antSlideUpOut}.ant-select-dropdown.ant-slide-up-leave.ant-slide-up-leave-active.ant-select-dropdown-placement-topLeft{animation-name:antSlideDownOut}.ant-select-dropdown-hidden{display:none}.ant-select-dropdown-empty{color:#b5bdc3}.ant-select-item-empty{position:relative;display:block;min-height:32px;padding:5px 16px;color:#6a7580;font-weight:400;font-size:13px;line-height:22px;color:#b5bdc3}.ant-select-item{position:relative;display:block;min-height:32px;padding:5px 16px;color:#6a7580;font-weight:400;font-size:13px;line-height:22px;cursor:pointer;transition:background .3s ease}.ant-select-item-group{color:#232936;font-size:11px;cursor:default}.ant-select-item-option{display:flex}.ant-select-item-option-content{flex:auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ant-select-item-option-state{flex:none}.ant-select-item-option-active:not(.ant-select-item-option-disabled){background-color:#f4faff}.ant-select-item-option-selected:not(.ant-select-item-option-disabled){color:#6a7580;font-weight:500;background-color:#fff}.ant-select-item-option-selected:not(.ant-select-item-option-disabled) .ant-select-item-option-state{color:#0b68ff}.ant-select-item-option-disabled{color:#b5bdc3;cursor:not-allowed}.ant-select-item-option-disabled.ant-select-item-option-selected{background-color:#f9fafb}.ant-select-item-option-grouped{padding-left:32px}.ant-select-lg{font-size:13px}.ant-select-borderless .ant-select-selector{background-color:transparent!important;border-color:transparent!important;box-shadow:none!important}.ant-select.ant-select-in-form-item{width:100%}.ant-select-compact-item:not(.ant-select-compact-last-item){margin-right:-1px}.ant-select-compact-item:not(.ant-select-compact-last-item).ant-select-compact-item-rtl{margin-right:0;margin-left:-1px}.ant-select-compact-item:active>*,.ant-select-compact-item:focus>*,.ant-select-compact-item:hover>*{z-index:2}.ant-select-compact-item.ant-select-focused>*{z-index:2}.ant-select-compact-item[disabled]>*{z-index:0}.ant-select-compact-item:not(.ant-select-compact-first-item):not(.ant-select-compact-last-item).ant-select>.ant-select-selector{border-radius:0}.ant-select-compact-item.ant-select-compact-first-item.ant-select:not(.ant-select-compact-last-item):not(.ant-select-compact-item-rtl)>.ant-select-selector{border-top-right-radius:0;border-bottom-right-radius:0}.ant-select-compact-item.ant-select-compact-last-item.ant-select:not(.ant-select-compact-first-item):not(.ant-select-compact-item-rtl)>.ant-select-selector{border-top-left-radius:0;border-bottom-left-radius:0}.ant-select-compact-item.ant-select.ant-select-compact-first-item.ant-select-compact-item-rtl:not(.ant-select-compact-last-item)>.ant-select-selector{border-top-left-radius:0;border-bottom-left-radius:0}.ant-select-compact-item.ant-select.ant-select-compact-last-item.ant-select-compact-item-rtl:not(.ant-select-compact-first-item)>.ant-select-selector{border-top-right-radius:0;border-bottom-right-radius:0}.ant-select-rtl{direction:rtl}.ant-select-rtl .ant-select-arrow{right:initial;left:15px}.ant-select-rtl .ant-select-clear{right:initial;left:15px}.ant-select-dropdown-rtl{direction:rtl}.ant-select-dropdown-rtl .ant-select-item-option-grouped{padding-right:32px;padding-left:16px}.ant-select-rtl.ant-select-multiple.ant-select-allow-clear .ant-select-selector,.ant-select-rtl.ant-select-multiple.ant-select-show-arrow .ant-select-selector{padding-right:4px;padding-left:27px}.ant-select-rtl.ant-select-multiple .ant-select-selection-item{text-align:right}.ant-select-rtl.ant-select-multiple .ant-select-selection-item-content{margin-right:0;margin-left:4px;text-align:right}.ant-select-rtl.ant-select-multiple .ant-select-selection-search-mirror{right:0;left:auto}.ant-select-rtl.ant-select-multiple .ant-select-selection-placeholder{right:15px;left:auto}.ant-select-rtl.ant-select-multiple.ant-select-sm .ant-select-selection-placeholder{right:7px}.ant-select-rtl.ant-select-single .ant-select-selector .ant-select-selection-item,.ant-select-rtl.ant-select-single .ant-select-selector .ant-select-selection-placeholder{right:0;left:9px;text-align:right}.ant-select-rtl.ant-select-single.ant-select-show-arrow .ant-select-selection-search{right:15px;left:28px}.ant-select-rtl.ant-select-single.ant-select-show-arrow .ant-select-selection-item,.ant-select-rtl.ant-select-single.ant-select-show-arrow .ant-select-selection-placeholder{padding-right:0;padding-left:17px}.ant-select-rtl.ant-select-single.ant-select-sm:not(.ant-select-customize-input).ant-select-show-arrow .ant-select-selection-search{right:6px}.ant-select-rtl.ant-select-single.ant-select-sm:not(.ant-select-customize-input).ant-select-show-arrow .ant-select-selection-item,.ant-select-rtl.ant-select-single.ant-select-sm:not(.ant-select-customize-input).ant-select-show-arrow .ant-select-selection-placeholder{padding-right:0;padding-left:19.5px}.ant-select-selection-selected-value{color:#57616d}.ant-select-selection-placeholder{color:#949ea6;padding-left:2px}.ant-select-dropdown{margin-top:4px}.ant-select-dropdown-menu-item{font-weight:500;color:#57616d}.ant-select-dropdown-menu-item:hover{background-color:#f9fafb;color:#0b68ff}.ant-select-item-group{padding:8px 12px;text-transform:uppercase;color:#949ea6;font-size:10px;line-height:16px;font-weight:500}.ant-select-multiple .ant-select-selection-item{background-color:#f3f5f6}.ant-select-multiple .ant-select-selection-item:hover{background-color:#e9edee}.ant-select-multiple .ant-select-selection-item:hover .ant-select-selection-item-remove svg{color:#f52922;fill:#f52922}.ant-select-dropdown-menu-item:hover:not( .ant-select-dropdown-menu-item-disabled){background-color:#f9fafb}.ant-select-dropdown-menu-item-active{background-color:#f9fafb;color:#57616d}.ant-select-dropdown-menu-item-active:not( .ant-select-dropdown-menu-item-disabled){background:#f9fafb;color:#0b68ff}.ant-select-item-option-disabled{opacity:.4}.ant-select-item-option-disabled:hover .ant-select-item-option-content{background-color:#f9fafb;color:#57616d}.ant-select-dropdown-menu-item-selected.ant-select-dropdown-menu-item-selected{background:0 0;color:#57616d}.ant-select-item-option-selected:after{position:absolute;width:24px;height:24px;right:8px;content:url('data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbnMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0iIzc2ZGMyNSIgdmlld0JveD0iMCAwIDI0IDI0Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6bm9uZTt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPjAxLTAyLWNoZWNrLXM8L3RpdGxlPjxyZWN0IGlkPSJjYW52YXMiIGNsYXNzPSJjbHMtMSIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ii8+PHBhdGggZD0iTTEwLjYxLDE1Ljc0YS43NS43NSwwLDAsMS0uNTMtLjIyTDcsMTIuMzZhLjc1Ljc1LDAsMSwxLDEuMDYtMWwyLjU4LDIuNjFMMTYsOC40OGEuNzcuNzcsMCwwLDEsMS4wNywwLC43NS43NSwwLDAsMSwwLDEuMDZsLTUuODksNkEuNzkuNzksMCwwLDEsMTAuNjEsMTUuNzRaIi8+PC9zdmc+');color:#54cb0b;font-size:20px;z-index:11}.ant-select-item-option-selected>.ant-select-item-option-content{padding-right:32px}.ant-select-dropdown{box-shadow:0 8px 16px rgba(171,178,183,.32)}.ant-select-dropdown .ant-empty{display:flex;flex-direction:column;justify-content:center;align-items:center}.ant-select-dropdown .ant-empty p{margin:0}.ant-select-arrow{background-image:url('data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbnMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6bm9uZTt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPjAxLTAzLWFuZ2xlLWRvd24tczwvdGl0bGU+PHJlY3QgaWQ9ImNhbnZhcyIgY2xhc3M9ImNscy0xIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiLz48cGF0aCBmaWxsPSIjNmE3NTgwIiBkPSJNMTIsMTQuMzhhLjc5Ljc5LDAsMCwxLS41My0uMjJMOC4yMiwxMC45MWEuNzcuNzcsMCwwLDEsMC0xLjA3Ljc1Ljc1LDAsMCwxLDEuMDYsMEwxMiwxMi41NmwyLjcyLTIuNzJhLjc1Ljc1LDAsMCwxLDEuMDYsMCwuNzcuNzcsMCwwLDEsMCwxLjA3bC0zLjI1LDMuMjVBLjc5Ljc5LDAsMCwxLDEyLDE0LjM4WiIvPjwvc3ZnPg==');width:24px;height:24px;background-position:center;background-repeat:no-repeat;background-size:contain;top:50%;right:8px;transform-origin:50% 25%;display:flex;transform:translateY(-50%);align-items:center;justify-content:center;margin-top:0}.ant-select-arrow .anticon-down{display:none}.ant-select-arrow i{display:none!important}.ant-select-open:not(.ant-select-show-search) .ant-select-arrow{transform:rotateZ(-180deg)}.ant-select-open.ant-select-show-search .ant-select-arrow{background:0 0}.ant-select-dropdown{box-shadow:0 16px 32px 0 rgba(35,41,54,.1);padding:8px}.ant-select-dropdown .ant-select-item-option-content{font-size:13px;line-height:18px;color:#57616d;font-weight:500}.ant-select-dropdown .ant-select-item-option-active{background-color:transparent}.ant-select-dropdown .ant-select-item-option{border-radius:3px;height:32px;display:flex;align-items:center;justify-content:flex-start;padding:0 8px 0 12px}.ant-select-dropdown .ant-select-item-option:hover{background-color:#f9fafb}.ant-select-dropdown .ant-select-item-option:hover .ant-select-item-option-content{color:#0b68ff}.ant-select-dropdown .ant-select-item-option-disabled{opacity:.4}.ant-select-dropdown .ant-select-item-option-disabled:hover{background-color:transparent}.ant-select-dropdown .ant-select-item-option-disabled:hover .ant-select-item-option-content{background-color:transparent;color:#57616d}.ant-select-item-option-state{display:none}.ant-select{color:#57616d;font-size:13px;line-height:18px;font-weight:400}.ant-select.ant-select-single .ant-select-selector{padding:0 12px}.ant-select:hover.error .ant-select-selector{border-color:#f52922}.ant-select-focused .ant-select-selector,.ant-select-selector:active,.ant-select-selector:focus{border-color:#0b68ff!important;box-shadow:inset 0 0 0 1px #0b68ff!important;background:#f4faff!important}.ant-select-disabled .ant-select-selector{border-color:#dbe0e3!important;box-shadow:none!important;background:#f9fafb!important}.ant-select-focused .ant-select-clear{background-color:#f4faff!important}.ant-select .ant-select-clear{width:24px;height:24px;top:9px;right:8px}.ant-select .ant-select-clear svg{fill:#f52922;color:#f52922}.ant-select .ant-select-selector .ant-select-selection-search .ant-select-selection-search-input{left:12px;right:12px}.ant-select-multiple.ant-select-multiple.ant-select-multiple .ant-select-selection-search{left:12px;margin:0;min-width:10px}.ant-select-multiple.ant-select-multiple.ant-select-multiple .ant-select-selection-placeholder{left:12px;right:12px}.ant-select-multiple.ant-select-multiple.ant-select-multiple .ant-select-selection-search-input{margin:0;margin-left:0!important;padding:0}.ant-select-multiple.ant-select-multiple.ant-select-multiple .ant-select-selection-item{padding:0 0 0 8px;border:0}.ant-select-multiple.ant-select-multiple.ant-select-multiple .ant-select-selection-item{margin-left:2px;margin-right:2px}.ant-select-multiple.ant-select-multiple.ant-select-multiple .ant-select-selection-item+.ant-select-selection-search{left:4px}.ant-select-multiple .ant-select-selector{padding:1px 10px 1px 1px}.ant-select-multiple .ant-select-selection-item-remove svg{fill:#f52922;color:#f52922}.ant-select-dropdown-menu-item-group-title{color:#57616d}.ant-select-single .ant-select-selector .ant-select-selection-search{left:10px}.ds-autocomplete-dropdown.ds-autocomplete-dropdown{box-shadow:0 16px 32px 0 rgba(35,41,54,.1);padding:8px}.ds-autocomplete-dropdown.ds-autocomplete-dropdown .ant-select-item-option.ant-select-item-option-active:not(.ant-select-item-option-disabled){color:#57616d;background:#f9fafb}.ds-autocomplete .ant-select .ant-select-selector .ant-select-selection-search .ant-select-selection-search-input{right:15px}.ds-autocomplete .ant-select-single .ant-select-selector .ant-select-selection-search{left:12px}