@j2-health/design-system 0.6.8 → 0.6.10

package/dist/index.cjs

@@ -58,6 +58,7 @@ const require_StatusPill = require("./src/components/statusPill/StatusPill.cjs")
 const require_useSteps = require("./src/components/steps/useSteps.cjs");
 const require_Steps = require("./src/components/steps/Steps.cjs");
 const require_StepDrawer = require("./src/components/stepDrawer/StepDrawer.cjs");
+const require_SwatchPicker = require("./src/components/swatchPicker/SwatchPicker.cjs");
 const require_SwatchStrip = require("./src/components/swatchStrip/SwatchStrip.cjs");
 const require_Switch = require("./src/components/switch/Switch.cjs");
 const require_Table = require("./src/components/table/Table.cjs");
@@ -126,6 +127,7 @@ exports.StepDrawer = require_StepDrawer.StepDrawer;
 exports.Steps = require_Steps.Steps;
 exports.SummarizedSelect = require_SummarizedSelect.SummarizedSelect;
 exports.Swatch = require_Swatch.Swatch;
+exports.SwatchPicker = require_SwatchPicker.SwatchPicker;
 exports.SwatchStrip = require_SwatchStrip.SwatchStrip;
 exports.Switch = require_Switch.Switch;
 exports.Table = require_Table.Table;

package/dist/index.d.ts

@@ -44,6 +44,7 @@ export * from './src/components/statusPill/index.js';
 export * from './src/components/stepDrawer/index.js';
 export * from './src/components/steps/index.js';
 export * from './src/components/swatch/index.js';
+export * from './src/components/swatchPicker/index.js';
 export * from './src/components/swatchStrip/index.js';
 export * from './src/components/switch/index.js';
 export * from './src/components/table/index.js';

package/dist/index.js

@@ -57,6 +57,7 @@ import { StatusPill } from "./src/components/statusPill/StatusPill.js";
 import { useSteps } from "./src/components/steps/useSteps.js";
 import { Steps } from "./src/components/steps/Steps.js";
 import { StepDrawer, useStepDrawerSlots } from "./src/components/stepDrawer/StepDrawer.js";
+import { SwatchPicker } from "./src/components/swatchPicker/SwatchPicker.js";
 import { SwatchStrip } from "./src/components/swatchStrip/SwatchStrip.js";
 import { Switch } from "./src/components/switch/Switch.js";
 import { Table } from "./src/components/table/Table.js";
@@ -66,4 +67,4 @@ import { VennDiagram } from "./src/components/vennDiagram/VennDiagram.js";
 import { UserProfile } from "./src/components/legacyNavMenu/UserProfile.js";
 import { LegacyNavMenu } from "./src/components/legacyNavMenu/LegacyNavMenu.js";
 import { icons } from "./index2.js";
-export { Alert, AntdInput, AntdSearchInput, AntdSelect, AntdTextArea, AppConfigProvider, BarChart, BareButton, Breadcrumb, BulkActionBar, Button, Callout, Card, ChangeChip, Checkbox, CheckboxTree, Collapse, Drawer, Dropdown, EmptyState, FileDropzone, FiltersForm, Form, HighchartsReact, Input, InputNumber, LegacyNavMenu, ListPopover, ListRow, ManageColumnsPanel, Menu, Modal, MultiValueTextOperatorOptions, NavMenu, NotificationModal, Pagination, Popover, Progress, Radio, RadioCardGroup, RadioGroup, Rate, Select, SelectAll, Skeleton, Slider, Spinner, StatusPill, StepDrawer, Steps, SummarizedSelect, Swatch, SwatchStrip, Switch, Table, Tabs, Tag, ThresholdBar, Tooltip, UserProfile, VennDiagram, appTheme, icons, isMultiValueTextOperator, mergeProps, normalizeMultiValues, operatorOptionsFor, tailwindPreset, useMessage, useNotification, useStepDrawerSlots, useSteps, withDesignSystemPaginationOverrides };
+export { Alert, AntdInput, AntdSearchInput, AntdSelect, AntdTextArea, AppConfigProvider, BarChart, BareButton, Breadcrumb, BulkActionBar, Button, Callout, Card, ChangeChip, Checkbox, CheckboxTree, Collapse, Drawer, Dropdown, EmptyState, FileDropzone, FiltersForm, Form, HighchartsReact, Input, InputNumber, LegacyNavMenu, ListPopover, ListRow, ManageColumnsPanel, Menu, Modal, MultiValueTextOperatorOptions, NavMenu, NotificationModal, Pagination, Popover, Progress, Radio, RadioCardGroup, RadioGroup, Rate, Select, SelectAll, Skeleton, Slider, Spinner, StatusPill, StepDrawer, Steps, SummarizedSelect, Swatch, SwatchPicker, SwatchStrip, Switch, Table, Tabs, Tag, ThresholdBar, Tooltip, UserProfile, VennDiagram, appTheme, icons, isMultiValueTextOperator, mergeProps, normalizeMultiValues, operatorOptionsFor, tailwindPreset, useMessage, useNotification, useStepDrawerSlots, useSteps, withDesignSystemPaginationOverrides };

package/dist/index2.js

@@ -57,6 +57,7 @@ import { StatusPill } from "./src/components/statusPill/StatusPill.js";
 import { useSteps } from "./src/components/steps/useSteps.js";
 import { Steps } from "./src/components/steps/Steps.js";
 import { StepDrawer, useStepDrawerSlots } from "./src/components/stepDrawer/StepDrawer.js";
+import { SwatchPicker } from "./src/components/swatchPicker/SwatchPicker.js";
 import { SwatchStrip } from "./src/components/swatchStrip/SwatchStrip.js";
 import { Switch } from "./src/components/switch/Switch.js";
 import { Table } from "./src/components/table/Table.js";
@@ -66,4 +67,4 @@ import { VennDiagram } from "./src/components/vennDiagram/VennDiagram.js";
 import { UserProfile } from "./src/components/legacyNavMenu/UserProfile.js";
 import { LegacyNavMenu } from "./src/components/legacyNavMenu/LegacyNavMenu.js";
 import * as icons from "@phosphor-icons/react";
-export { Alert, AntdInput, AntdSearchInput, AntdSelect, AntdTextArea, AppConfigProvider, BarChart, BareButton, Breadcrumb, BulkActionBar, Button, Callout, Card, ChangeChip, Checkbox, CheckboxTree, Collapse, Drawer, Dropdown, EmptyState, FileDropzone, FiltersForm, Form, HighchartsReact, Input, InputNumber, LegacyNavMenu, ListPopover, ListRow, ManageColumnsPanel, Menu, Modal, MultiValueTextOperatorOptions, NavMenu, NotificationModal, Pagination, Popover, Progress, Radio, RadioCardGroup, RadioGroup, Rate, Select, SelectAll, Skeleton, Slider, Spinner, StatusPill, StepDrawer, Steps, SummarizedSelect, Swatch, SwatchStrip, Switch, Table, Tabs, Tag, ThresholdBar, Tooltip, UserProfile, VennDiagram, appTheme, icons, isMultiValueTextOperator, mergeProps, normalizeMultiValues, operatorOptionsFor, tailwindPreset, useMessage, useNotification, useStepDrawerSlots, useSteps, withDesignSystemPaginationOverrides };
+export { Alert, AntdInput, AntdSearchInput, AntdSelect, AntdTextArea, AppConfigProvider, BarChart, BareButton, Breadcrumb, BulkActionBar, Button, Callout, Card, ChangeChip, Checkbox, CheckboxTree, Collapse, Drawer, Dropdown, EmptyState, FileDropzone, FiltersForm, Form, HighchartsReact, Input, InputNumber, LegacyNavMenu, ListPopover, ListRow, ManageColumnsPanel, Menu, Modal, MultiValueTextOperatorOptions, NavMenu, NotificationModal, Pagination, Popover, Progress, Radio, RadioCardGroup, RadioGroup, Rate, Select, SelectAll, Skeleton, Slider, Spinner, StatusPill, StepDrawer, Steps, SummarizedSelect, Swatch, SwatchPicker, SwatchStrip, Switch, Table, Tabs, Tag, ThresholdBar, Tooltip, UserProfile, VennDiagram, appTheme, icons, isMultiValueTextOperator, mergeProps, normalizeMultiValues, operatorOptionsFor, tailwindPreset, useMessage, useNotification, useStepDrawerSlots, useSteps, withDesignSystemPaginationOverrides };

package/dist/src/components/checkboxTree/CheckboxTree.cjs

@@ -1,6 +1,6 @@
 const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
-const require_utils = require("./utils.cjs");
 const require_TreeNode = require("./TreeNode.cjs");
+const require_utils = require("./utils.cjs");
 let react = require("react");
 react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/src/components/checkboxTree/CheckboxTree.js

@@ -1,5 +1,5 @@
-import { getAllLeafKeys, getAllParentKeys, getLeafKeys } from "./utils.js";
 import { TreeNode } from "./TreeNode.js";
+import { getAllLeafKeys, getAllParentKeys, getLeafKeys } from "./utils.js";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 // src/components/checkboxTree/CheckboxTree.tsx

package/dist/src/components/filterform/FilterGroup.cjs

@@ -1,7 +1,7 @@
 const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
 const require_Button = require("../button/Button.cjs");
-const require_FiltersForm_module = require("./FiltersForm.module.css.cjs");
 const require_FilterInput = require("./FilterInput.cjs");
+const require_FiltersForm_module = require("./FiltersForm.module.css.cjs");
 let _phosphor_icons_react = require("@phosphor-icons/react");
 _phosphor_icons_react = require_runtime.__toESM(_phosphor_icons_react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/src/components/filterform/FilterGroup.js

@@ -1,6 +1,6 @@
 import { Button } from "../button/Button.js";
-import FiltersForm_module_default from "./FiltersForm.module.css.js";
 import { FilterInput } from "./FilterInput.js";
+import FiltersForm_module_default from "./FiltersForm.module.css.js";
 import { TrashIcon } from "@phosphor-icons/react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import cx from "classnames";

package/dist/src/components/filterform/FilterInput.cjs

@@ -1,6 +1,6 @@
 const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
-const require_filterHelpers = require("./filterHelpers.cjs");
 const require_useFilterField = require("./useFilterField.cjs");
+const require_filterHelpers = require("./filterHelpers.cjs");
 let react = require("react");
 let react$1 = require_runtime.__toESM(react, 1);
 react = require_runtime.__toESM(react);

package/dist/src/components/filterform/FilterInput.js

@@ -1,5 +1,5 @@
-import { normalizeMultiValues, tooManyValuesMessage } from "./filterHelpers.js";
 import { useFilterField } from "./useFilterField.js";
+import { normalizeMultiValues, tooManyValuesMessage } from "./filterHelpers.js";
 import * as React from "react";
 import { Input, InputNumber, Select, Typography } from "antd";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/src/components/form/FormItem.cjs

@@ -1,5 +1,5 @@
-const require_FormItemFieldContext = require("./FormItemFieldContext.cjs");
 const require_FormikField = require("./FormikField.cjs");
+const require_FormItemFieldContext = require("./FormItemFieldContext.cjs");
 let antd = require("antd");
 let react_jsx_runtime = require("react/jsx-runtime");
 let formik = require("formik");

package/dist/src/components/form/FormItem.js

@@ -1,5 +1,5 @@
-import { FormItemFieldContext } from "./FormItemFieldContext.js";
 import { FormikField } from "./FormikField.js";
+import { FormItemFieldContext } from "./FormItemFieldContext.js";
 import { Form } from "antd";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { getIn, useFormikContext } from "formik";

package/dist/src/components/input/AntdInput.d.ts

@@ -61,7 +61,7 @@ export declare const AntdInput: import('react').ForwardRefExoticComponent<{
     name?: string | undefined | undefined;
     nonce?: string | undefined | undefined;
     part?: string | undefined | undefined;
-    type?: import('@rc-component/input/lib/utils/types').LiteralUnion<"button" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "number" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week", string> | undefined;
+    type?: import('@rc-component/input/es/utils/types').LiteralUnion<"button" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "number" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week", string> | undefined;
     width?: number | string | undefined | undefined;
     role?: import('react').AriaRole | undefined;
     tabIndex?: number | undefined | undefined;
@@ -289,7 +289,7 @@ export declare const AntdInput: import('react').ForwardRefExoticComponent<{
     onTransitionRunCapture?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
     onTransitionStart?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
     onTransitionStartCapture?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
-    value?: import('@rc-component/input/lib/interface').ValueType;
+    value?: import('@rc-component/input/es/interface').ValueType;
     prefixCls?: string | undefined;
     list?: string | undefined | undefined;
     step?: number | string | undefined | undefined;
@@ -342,7 +342,7 @@ export declare const AntdInput: import('react').ForwardRefExoticComponent<{
     is?: string | undefined | undefined;
     exportparts?: string | undefined | undefined;
     multiple?: boolean | undefined | undefined;
-    count?: import('@rc-component/input/lib/interface').CountConfig | undefined;
+    count?: import('@rc-component/input/es/interface').CountConfig | undefined;
     placeholder?: string | undefined | undefined;
     checked?: boolean | undefined | undefined;
     required?: boolean | undefined | undefined;
@@ -355,14 +355,11 @@ export declare const AntdInput: import('react').ForwardRefExoticComponent<{
     src?: string | undefined | undefined;
     readOnly?: boolean | undefined | undefined;
     onClear?: (() => void) | undefined;
-    allowClear?: boolean | {
-        disabled?: boolean;
-        clearIcon?: import('react').ReactNode;
-    } | undefined;
+    allowClear?: (boolean | import('@rc-component/util').AllowClearConfig) | undefined;
     suffix?: import('react').ReactNode;
     onPressEnter?: import('react').KeyboardEventHandler<HTMLInputElement> | undefined;
     showCount?: boolean | {
-        formatter: import('@rc-component/input/lib/interface').ShowCountFormatter;
+        formatter: import('@rc-component/input/es/interface').ShowCountFormatter;
     } | undefined;
     htmlSize?: number | undefined;
 } & import('react').RefAttributes<InputRef>>;

package/dist/src/components/input/AntdSearchInput.d.ts

@@ -73,7 +73,7 @@ export declare const AntdSearchInput: import('react').ForwardRefExoticComponent<
     name?: string | undefined | undefined;
     nonce?: string | undefined | undefined;
     part?: string | undefined | undefined;
-    type?: import('@rc-component/input/lib/utils/types').LiteralUnion<"button" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "number" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week", string> | undefined;
+    type?: import('@rc-component/input/es/utils/types').LiteralUnion<"button" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "number" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week", string> | undefined;
     width?: number | string | undefined | undefined;
     role?: import('react').AriaRole | undefined;
     tabIndex?: number | undefined | undefined;
@@ -301,7 +301,7 @@ export declare const AntdSearchInput: import('react').ForwardRefExoticComponent<
     onTransitionRunCapture?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
     onTransitionStart?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
     onTransitionStartCapture?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
-    value?: import('@rc-component/input/lib/interface').ValueType;
+    value?: import('@rc-component/input/es/interface').ValueType;
     prefixCls?: string | undefined;
     list?: string | undefined | undefined;
     step?: number | string | undefined | undefined;
@@ -354,7 +354,7 @@ export declare const AntdSearchInput: import('react').ForwardRefExoticComponent<
     is?: string | undefined | undefined;
     exportparts?: string | undefined | undefined;
     multiple?: boolean | undefined | undefined;
-    count?: import('@rc-component/input/lib/interface').CountConfig | undefined;
+    count?: import('@rc-component/input/es/interface').CountConfig | undefined;
     placeholder?: string | undefined | undefined;
     checked?: boolean | undefined | undefined;
     required?: boolean | undefined | undefined;
@@ -367,13 +367,10 @@ export declare const AntdSearchInput: import('react').ForwardRefExoticComponent<
     src?: string | undefined | undefined;
     readOnly?: boolean | undefined | undefined;
     onClear?: (() => void) | undefined;
-    allowClear?: boolean | {
-        disabled?: boolean;
-        clearIcon?: import('react').ReactNode;
-    } | undefined;
+    allowClear?: (boolean | import('@rc-component/util').AllowClearConfig) | undefined;
     suffix?: import('react').ReactNode;
     showCount?: boolean | {
-        formatter: import('@rc-component/input/lib/interface').ShowCountFormatter;
+        formatter: import('@rc-component/input/es/interface').ShowCountFormatter;
     } | undefined;
     htmlSize?: number | undefined;
 } & import('react').RefAttributes<InputRef>>;

package/dist/src/components/input/AntdTextArea.d.ts

@@ -273,7 +273,7 @@ export declare const AntdTextArea: import('react').ForwardRefExoticComponent<{
     onTransitionRunCapture?: import('react').TransitionEventHandler<HTMLTextAreaElement> | undefined;
     onTransitionStart?: import('react').TransitionEventHandler<HTMLTextAreaElement> | undefined;
     onTransitionStartCapture?: import('react').TransitionEventHandler<HTMLTextAreaElement> | undefined;
-    value?: import('@rc-component/input/lib/interface').ValueOrTextAreaValue;
+    value?: import('@rc-component/input/es/interface').ValueOrTextAreaValue;
     prefixCls?: string | undefined;
     disabled?: boolean | undefined | undefined;
     defaultChecked?: boolean | undefined | undefined;
@@ -321,7 +321,7 @@ export declare const AntdTextArea: import('react').ForwardRefExoticComponent<{
     exportparts?: string | undefined | undefined;
     wrap?: string | undefined | undefined;
     rows?: number | undefined | undefined;
-    count?: import('@rc-component/input/lib/interface').CountConfig | undefined;
+    count?: import('@rc-component/input/es/interface').CountConfig | undefined;
     placeholder?: string | undefined | undefined;
     required?: boolean | undefined | undefined;
     autoComplete?: string | undefined | undefined;
@@ -331,13 +331,10 @@ export declare const AntdTextArea: import('react').ForwardRefExoticComponent<{
     minLength?: number | undefined | undefined;
     readOnly?: boolean | undefined | undefined;
     onClear?: (() => void) | undefined;
-    allowClear?: boolean | {
-        disabled?: boolean;
-        clearIcon?: import('react').ReactNode;
-    } | undefined;
+    allowClear?: (boolean | import('@rc-component/util').AllowClearConfig) | undefined;
     onPressEnter?: import('react').KeyboardEventHandler<HTMLTextAreaElement> | undefined;
     showCount?: boolean | {
-        formatter: import('@rc-component/input/lib/interface').ShowCountFormatter;
+        formatter: import('@rc-component/input/es/interface').ShowCountFormatter;
     } | undefined;
     onResize?: ((size: {
         width: number;

package/dist/src/components/legacyNavMenu/LegacyNavMenu.cjs

@@ -1,6 +1,6 @@
 const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
-const require_j2_logo_menu_collapse = require("../../svgs/j2-logo-menu-collapse.svg.cjs");
 const require_LegacyNavMenu_module = require("./LegacyNavMenu.module.css.cjs");
+const require_j2_logo_menu_collapse = require("../../svgs/j2-logo-menu-collapse.svg.cjs");
 const require_UserProfile = require("./UserProfile.cjs");
 let react = require("react");
 react = require_runtime.__toESM(react, 1);

package/dist/src/components/legacyNavMenu/LegacyNavMenu.js

@@ -1,5 +1,5 @@
-import SvgJ2LogoMenuCollapse from "../../svgs/j2-logo-menu-collapse.svg.js";
 import LegacyNavMenu_module_default from "./LegacyNavMenu.module.css.js";
+import SvgJ2LogoMenuCollapse from "../../svgs/j2-logo-menu-collapse.svg.js";
 import { UserProfile } from "./UserProfile.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/src/components/listpopover/ListPopover.cjs

@@ -1,6 +1,6 @@
 const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
-const require_Button = require("../button/Button.cjs");
 const require_Popover = require("../popover/Popover.cjs");
+const require_Button = require("../button/Button.cjs");
 const require_Tooltip = require("../tooltip/Tooltip.cjs");
 const require_ListPopover_module = require("./ListPopover.module.css.cjs");
 let _phosphor_icons_react = require("@phosphor-icons/react");

package/dist/src/components/listpopover/ListPopover.js

@@ -1,5 +1,5 @@
-import { Button } from "../button/Button.js";
 import { Popover } from "../popover/Popover.js";
+import { Button } from "../button/Button.js";
 import { Tooltip } from "../tooltip/Tooltip.js";
 import ListPopover_module_default from "./ListPopover.module.css.js";
 import { CopyIcon } from "@phosphor-icons/react";

package/dist/src/components/navMenu/NavMenu.cjs

@@ -1,12 +1,12 @@
 const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
-const require_Button = require("../button/Button.cjs");
-const require_Tooltip = require("../tooltip/Tooltip.cjs");
 const require_Menu = require("../menu/Menu.cjs");
 const require_j2_logo_menu_collapse = require("../../svgs/j2-logo-menu-collapse.svg.cjs");
 const require_j2_logo_menu = require("../../svgs/j2-logo-menu.svg.cjs");
 const require_menu_sidebar_expand = require("../../svgs/menu-sidebar-expand.svg.cjs");
 const require_menu_sidebar_collapse = require("../../svgs/menu-sidebar-collapse.svg.cjs");
+const require_Button = require("../button/Button.cjs");
 const require_NavMenu_module = require("./NavMenu.module.css.cjs");
+const require_Tooltip = require("../tooltip/Tooltip.cjs");
 let react = require("react");
 let react$1 = require_runtime.__toESM(react, 1);
 react = require_runtime.__toESM(react);

package/dist/src/components/navMenu/NavMenu.js

@@ -1,11 +1,11 @@
-import { Button } from "../button/Button.js";
-import { Tooltip } from "../tooltip/Tooltip.js";
 import { Menu } from "../menu/Menu.js";
 import SvgJ2LogoMenuCollapse from "../../svgs/j2-logo-menu-collapse.svg.js";
 import SvgJ2LogoMenu from "../../svgs/j2-logo-menu.svg.js";
 import SvgMenuSidebarExpand from "../../svgs/menu-sidebar-expand.svg.js";
 import SvgMenuSidebarCollapse from "../../svgs/menu-sidebar-collapse.svg.js";
+import { Button } from "../button/Button.js";
 import NavMenu_module_default from "./NavMenu.module.css.js";
+import { Tooltip } from "../tooltip/Tooltip.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import cx from "classnames";

package/dist/src/components/select/SummarizedSelect.cjs

@@ -82,7 +82,7 @@ var OpenAtTop = ({ openCount, selectRef, children }) => {
 	}, [openCount, selectRef]);
 	return children;
 };
-function SummarizedSelect({ searchPlaceholder, formControlPlaceholder, loading, multiple, value, onChange, options, renderLabel, rootClassName, popupClassName, variant, trigger = "select", triggerWeight, defaultOpen = false, flattenOnSearch = false, scrollToSelectedOnOpen = true, groupDividers = false, ...props }) {
+function SummarizedSelect({ searchPlaceholder, formControlPlaceholder, loading, multiple, value, onChange, options, renderLabel, rootClassName, popupClassName, variant, trigger = "select", triggerWeight, defaultOpen = false, flattenOnSearch = false, scrollToSelectedOnOpen = true, groupDividers = false, searchSuffix, ...props }) {
 	const isHeadline = variant === "headlined";
 	const isField = variant === "field";
 	const antVariant = isHeadline ? "borderless" : isField ? "outlined" : variant;
@@ -91,6 +91,7 @@ function SummarizedSelect({ searchPlaceholder, formControlPlaceholder, loading,
 	const [focusTrigger, setFocusTrigger] = (0, react.useState)(defaultOpen ? 1 : 0);
 	const [isOpen, setIsOpen] = (0, react.useState)(defaultOpen);
 	const inputRef = (0, react.useRef)(null);
+	const popupRef = (0, react.useRef)(null);
 	const selectRef = (0, react.useRef)(null);
 	const measureSpanRef = (0, react.useRef)(null);
 	const [measuredWidth, setMeasuredWidth] = (0, react.useState)();
@@ -137,6 +138,7 @@ function SummarizedSelect({ searchPlaceholder, formControlPlaceholder, loading,
 	const flatFilteredOptions = (0, react.useMemo)(() => {
 		return getAllOptions(filteredOptions);
 	}, [filteredOptions]);
+	const shownValues = (0, react.useMemo)(() => flatFilteredOptions.map((o) => String(o.value)).join("\0"), [flatFilteredOptions]);
 	const allFlatOptions = (0, react.useMemo)(() => {
 		return getAllOptions(options);
 	}, [options]);
@@ -204,77 +206,101 @@ function SummarizedSelect({ searchPlaceholder, formControlPlaceholder, loading,
 		});
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: option.label });
 	};
+	const focusSearch = () => setTimeout(() => inputRef.current?.focus({ preventScroll: true }));
+	const renderSearchSuffix = () => searchSuffix ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "flex items-center gap-2",
+		onClick: (e) => {
+			e.stopPropagation();
+			if (e.target.closest(".ant-select-item-option, [role=\"option\"]")) focusSearch();
+		},
+		onKeyDownCapture: (e) => {
+			if (e.key === "Escape" || e.key === "Enter") focusSearch();
+		},
+		onKeyDown: (e) => e.stopPropagation(),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"aria-hidden": true,
+			className: "h-4 w-px bg-j2-border-secondary"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.ConfigProvider, {
+			getPopupContainer: () => popupRef.current ?? document.body,
+			children: searchSuffix
+		})]
+	}) : void 0;
 	const popupRender = (menu) => {
 		const valueToLabel = (val) => {
 			const option = allFlatOptions.find((opt) => opt.value === val);
 			return option ? option.label : val;
 		};
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "mb-2 px-2 pb-2 border-b -mx-1 mt-1",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Input, {
-					ref: inputRef,
-					placeholder: searchPlaceholder || "Search...",
-					value: searchValue,
-					onChange: (e) => {
-						setSearchValue(e.target.value);
-						e.stopPropagation();
-						e.preventDefault();
-					},
-					onKeyDown: handleKeyDown,
-					onClick: (e) => e.stopPropagation(),
-					prefix: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_phosphor_icons_react.MagnifyingGlassIcon, {
-						size: 16,
-						className: "text-j2-text-placeholder"
-					}),
-					allowClear: true
-				}, focusTrigger)
-			}),
-			multiple && value.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "px-2 pb-2",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "flex flex-wrap gap-y-1",
-					children: value.map((value) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tag.Tag, {
-						className: "opacity-100 z-10 flex max-w-full",
-						status: "default",
-						closable: true,
-						onClose: () => handleTagClose(value),
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "overflow-ellipsis overflow-hidden",
-							title: valueToLabel(value),
-							children: valueToLabel(value)
-						})
-					}, value))
-				})
-			}) : null,
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: (0, classnames.default)(require_SummarizedSelect_module.default.menuContainer, "rounded-lg", {
-					[require_SummarizedSelect_module.default.headlinedMenuContainer]: isHeadline,
-					[require_SummarizedSelect_module.default.menuContainerMultiple]: multiple
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: popupRef,
+			className: (0, classnames.default)({ relative: searchSuffix != null }),
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "mb-2 px-2 pb-2 border-b -mx-1 mt-1",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Input, {
+						ref: inputRef,
+						placeholder: searchPlaceholder || "Search...",
+						value: searchValue,
+						onChange: (e) => {
+							setSearchValue(e.target.value);
+							e.stopPropagation();
+							e.preventDefault();
+						},
+						onKeyDown: handleKeyDown,
+						onClick: (e) => e.stopPropagation(),
+						prefix: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_phosphor_icons_react.MagnifyingGlassIcon, {
+							size: 16,
+							className: "text-j2-text-placeholder"
+						}),
+						suffix: renderSearchSuffix(),
+						allowClear: true
+					}, focusTrigger)
 				}),
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: scrollToSelectedOnOpen ? menu : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OpenAtTop, {
-					openCount: focusTrigger,
-					selectRef,
-					children: menu
-				}) }, searchValue)
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "flex justify-between items-center",
-				children: multiple && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "w-full mt-1 pt-1 border-t border-j2-border-secondary",
+				multiple && value.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "px-2 pb-2",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						"aria-selected": "false",
-						className: (0, classnames.default)("ant-select-item ant-select-item-option w-full", require_SummarizedSelect_module.default.clearAllButton),
-						title: "Clear all",
-						onClick: handleToggleAll,
+						className: "flex flex-wrap gap-y-1",
+						children: value.map((value) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tag.Tag, {
+							className: "opacity-100 z-10 flex max-w-full",
+							status: "default",
+							closable: true,
+							onClose: () => handleTagClose(value),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "overflow-ellipsis overflow-hidden",
+								title: valueToLabel(value),
+								children: valueToLabel(value)
+							})
+						}, value))
+					})
+				}) : null,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: (0, classnames.default)(require_SummarizedSelect_module.default.menuContainer, "rounded-lg", {
+						[require_SummarizedSelect_module.default.headlinedMenuContainer]: isHeadline,
+						[require_SummarizedSelect_module.default.menuContainerMultiple]: multiple
+					}),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: scrollToSelectedOnOpen ? menu : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OpenAtTop, {
+						openCount: focusTrigger,
+						selectRef,
+						children: menu
+					}) }, `${searchValue}\u0000${shownValues}`)
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex justify-between items-center",
+					children: multiple && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "w-full mt-1 pt-1 border-t border-j2-border-secondary",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "ant-select-item-option-content text-center font-semibold",
-							children: "Clear all"
+							"aria-selected": "false",
+							className: (0, classnames.default)("ant-select-item ant-select-item-option w-full", require_SummarizedSelect_module.default.clearAllButton),
+							title: "Clear all",
+							onClick: handleToggleAll,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "ant-select-item-option-content text-center font-semibold",
+								children: "Clear all"
+							})
 						})
 					})
 				})
-			})
-		] });
+			]
+		});
 	};
 	const handleOpenChange = (open) => {
 		setIsOpen(open);
@@ -290,7 +316,11 @@ function SummarizedSelect({ searchPlaceholder, formControlPlaceholder, loading,
 			"aria-selected": isSelected,
 			onClick: () => handleOptionClick(optionValue),
 			className: (0, classnames.default)("px-3 py-1.5 rounded cursor-pointer text-sm", isSelected ? "bg-[var(--j2-color-primary-bg-hover)] font-semibold text-[var(--j2-color-primary)] hover:bg-[var(--j2-color-primary-bg-hover)]" : "hover:bg-[var(--j2-color-bg-hover)]"),
-			children: hasLogo ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			children: props.optionRender ? props.optionRender({
+				...option,
+				key: optionValue,
+				data: option
+			}, { index: flatFilteredOptions.indexOf(option) }) : hasLogo ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex items-center gap-2",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "h-4 shrink-0",
@@ -308,7 +338,8 @@ function SummarizedSelect({ searchPlaceholder, formControlPlaceholder, loading,
 			return option ? option.label : val;
 		};
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "bg-white rounded-lg shadow-md p-2 min-w-[240px]",
+			ref: popupRef,
+			className: "relative bg-white rounded-lg shadow-md p-2 min-w-[240px]",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "pb-2 border-b border-j2-border-secondary",
@@ -326,6 +357,7 @@ function SummarizedSelect({ searchPlaceholder, formControlPlaceholder, loading,
 							size: 16,
 							className: "text-j2-text-placeholder"
 						}),
+						suffix: renderSearchSuffix(),
 						allowClear: true
 					}, focusTrigger)
 				}),
@@ -396,6 +428,7 @@ function SummarizedSelect({ searchPlaceholder, formControlPlaceholder, loading,
 			onOpenChange: handleOpenChange,
 			trigger: ["click"],
 			disabled: props.disabled,
+			getPopupContainer: props.getPopupContainer,
 			popupRender: dropdownPopupRender,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Typography.Link, {
 				disabled: props.disabled,
@@ -451,7 +484,7 @@ function SummarizedSelect({ searchPlaceholder, formControlPlaceholder, loading,
 				[require_SummarizedSelect_module.default.headlinedSelect]: isHeadline,
 				[require_SummarizedSelect_module.default.fieldSelect]: isField
 			}),
-			popup: { root: popupClassName }
+			popup: { root: (0, classnames.default)(popupClassName, { [require_SummarizedSelect_module.default.hasSearchSuffix]: searchSuffix != null }) }
 		},
 		variant: antVariant,
 		...props