@eightshift/ui-components 5.0.0 → 5.0.2

package/dist/components/responsive-preview/responsive-preview.js

@@ -0,0 +1,123 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
+import { upperFirst } from "../../utilities/es-dash.js";
+import { BreakpointPreview } from "../breakpoint-preview/breakpoint-preview.js";
+import { icons } from "../../icons/icons.js";
+import { RichLabel } from "../rich-label/rich-label.js";
+/**
+ * A component that displays a preview of the responsive settings.
+ *
+ * **Note**: Only intended for horizontal groups of buttons that don't wrap.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {Object} props.value - The value object.
+ * @param {boolean} props.isDesktopFirst - Whether the desktop-first mode is enabled.
+ * @param {string[]} props.breakpoints - Breakpoints to use.
+ * @param {string[]} [props.desktopFirstBreakpoints] - Breakpoints to use in desktop-first mode. If not provided, the breakpoints will be used in reverse order.
+ * @param {{label: string, value: string}[]} props.options - Options of the attribute the component is linked to. `{ value: string, label: string }[]`.
+ * @param {Object} props.breakpointData - Breakpoints to use. `{ [breakpoint: string]: number }`.
+ * @param {Object<string, number>} [props.breakpointUiData] - Allows overriding breakpoint names and icons. `{ [breakpoint: string]: { label: string, icon: JSX.Element|string } }`.
+ *
+ * @returns {JSX.Element} The ResponsivePreview component.
+ *
+ * @example
+ * <ResponsivePreview
+ * 	value={value}
+ * 	isDesktopFirst={isDesktopFirst}
+ * 	breakpoints={breakpoints}
+ * 	options={options}
+ * 	breakpointData={breakpointData} // e.g. from global manifest
+ * />
+ *
+ * @preserve
+ */
+const ResponsivePreview = (props) => {
+  var _a, _b;
+  const {
+    value,
+    isDesktopFirst: rawIsDesktopFirst,
+    breakpoints: rawBreakpoints,
+    desktopFirstBreakpoints: rawDesktopFirstBreakpoints,
+    options,
+    breakpointData,
+    breakpointUiData
+  } = props;
+  const isDesktopFirst = rawIsDesktopFirst ?? (value == null ? void 0 : value["_desktopFirst"]) ?? false;
+  const breakpoints = rawBreakpoints;
+  const desktopFirstBreakpoints = rawDesktopFirstBreakpoints ?? rawBreakpoints.slice(0, -1);
+  const firstMobileFirstOverride = breakpoints.find((breakpoint) => value == null ? void 0 : value[breakpoint]);
+  const lastDesktopFirstOverride = desktopFirstBreakpoints.toReversed().find((breakpoint) => value == null ? void 0 : value[breakpoint]);
+  let previewItems = [];
+  if (firstMobileFirstOverride && !isDesktopFirst) {
+    previewItems = [
+      ...previewItems,
+      {
+        breakpoint: __("Default", "eightshift-ui-components"),
+        value: ((_a = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value["_default"]))) == null ? void 0 : _a.label) ?? upperFirst(value == null ? void 0 : value["_default"])
+      }
+    ];
+    breakpoints.forEach((breakpoint) => {
+      var _a2, _b2;
+      if (typeof (value == null ? void 0 : value[breakpoint]) === "undefined") {
+        return;
+      }
+      previewItems = [
+        ...previewItems,
+        {
+          width: breakpointData[breakpoint],
+          breakpoint: ((_a2 = breakpointUiData == null ? void 0 : breakpointUiData[breakpoint]) == null ? void 0 : _a2.label) ?? breakpoint,
+          value: ((_b2 = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value[breakpoint]))) == null ? void 0 : _b2.label) ?? upperFirst(value == null ? void 0 : value[breakpoint])
+        }
+      ];
+    });
+  }
+  if (lastDesktopFirstOverride && isDesktopFirst) {
+    desktopFirstBreakpoints.forEach((breakpoint) => {
+      var _a2, _b2;
+      if (typeof (value == null ? void 0 : value[breakpoint]) === "undefined") {
+        return;
+      }
+      previewItems = [
+        ...previewItems,
+        {
+          alignEnd: true,
+          widthEnd: breakpointData[breakpoint.replace("max-", "")],
+          breakpoint: ((_a2 = breakpointUiData == null ? void 0 : breakpointUiData[breakpoint.replace("max-", "")]) == null ? void 0 : _a2.label) ?? breakpoint.replace("max-", ""),
+          value: ((_b2 = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value[breakpoint]))) == null ? void 0 : _b2.label) ?? upperFirst(value == null ? void 0 : value[breakpoint])
+        }
+      ];
+    });
+    previewItems = [
+      ...previewItems,
+      {
+        breakpoint: __("Default", "eightshift-ui-components"),
+        value: ((_b = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value["_default"]))) == null ? void 0 : _b.label) ?? upperFirst(value == null ? void 0 : value["_default"])
+      }
+    ];
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "es:flex es:min-w-72 es:flex-col es:items-start es:gap-4 es:p-2 es:text-sm", children: [
+    /* @__PURE__ */ jsxs("div", { className: "es:flex es:w-full es:items-center es:gap-2.5", children: [
+      /* @__PURE__ */ jsx(
+        RichLabel,
+        {
+          icon: icons.previewResponsive,
+          label: __("Responsive preview", "eightshift-ui-components")
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "es:ml-auto es:select-none es:rounded es:bg-secondary-100 es:px-1 es:py-0.5 es:text-xs es:text-secondary-500", children: isDesktopFirst ? __("Desktop-first", "eightshift-ui-components") : __("Mobile-first", "eightshift-ui-components") })
+    ] }),
+    previewItems.length === 0 && /* @__PURE__ */ jsx("span", { className: "es:text-sm es:italic es:text-secondary-500", children: __("No overrides applied", "eightshift-ui-components") }),
+    /* @__PURE__ */ jsx(
+      BreakpointPreview,
+      {
+        blocks: previewItems,
+        dotsStart: true,
+        dotsEnd: true
+      }
+    )
+  ] });
+};
+export {
+  ResponsivePreview
+};

package/dist/components/rich-label/rich-label.js

@@ -0,0 +1,66 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
+/**
+ * Component that displays a label, with an optional icon and subtitle.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {JSX.Element} [props.icon] - Icon to display.
+ * @param {string} [props.label] - Label to display.
+ * @param {string} [props.subtitle] - Subtitle to display.
+ * @param {JSX.Element} [props.as] - Element to render the label as. Not compatible with `contentsOnly`.
+ * @param {string} [props.className] - Classes to pass to the label.
+ * @param {string} [props.iconClassName] - Classes to pass to the icon.
+ * @param {boolean} [props.fullWidth=false] - If `true`, the component will take up as much space as it can.
+ * @param {boolean} [props.contentsOnly] - If `true`, only the label (/icon/subtitle) will be rendered, without any wrapping elements. Useful if you want to provide your own layout.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ * @param {boolean} [props.noColor] - If `true`, colors on text won't be set, opacity will be used instead.
+ * @param {boolean} [props.fullSizeSubtitle] - If `true`, the subtitle is the same size as the label.
+ * @param {boolean} [props.inlineSubtitle] - If `true`, the subtitle is shown after the label instead of below it.
+ *
+ * @returns {JSX.Element} The RichLabel component.
+ *
+ * @example
+ * <RichLabel
+ * 	icon={icons.myIcon}
+ * 	label='My label'
+ * />
+ *
+ * @preserve
+ */
+const RichLabel = (props) => {
+  const { icon, label, subtitle, as, className, iconClassName, fullWidth = false, contentsOnly, hidden, noColor, fullSizeSubtitle, inlineSubtitle } = props;
+  if (hidden) {
+    return null;
+  }
+  const ComponentToRender = as ?? "div";
+  if (contentsOnly) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      icon && /* @__PURE__ */ jsx("span", { className: clsx("es:icon:size-5.5", !noColor && "es:text-slate-500"), children: icon }),
+      label && /* @__PURE__ */ jsx("span", { className: clsx("es:text-balance", !noColor && "es:text-secondary-800"), children: label }),
+      subtitle && /* @__PURE__ */ jsx("span", { className: clsx("es:text-balance es:text-xs es:opacity-65", !noColor && "es:text-secondary-800"), children: subtitle })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    ComponentToRender,
+    {
+      className: clsx(
+        "es:flex es:items-center es:gap-1.5 es:text-sm",
+        !noColor && "es:text-secondary-800 es:[&>span>svg]:text-slate-500",
+        noColor && "es:[&>span>svg]:opacity-80",
+        fullWidth && "es:grow",
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: clsx("es:icon:size-5.5", iconClassName), children: icon }),
+        (label || subtitle) && /* @__PURE__ */ jsxs("div", { className: clsx("es:flex es:items-start es:text-balance es:text-start", inlineSubtitle ? "es:gap-1.5" : "es:flex-col"), children: [
+          label && /* @__PURE__ */ jsx("span", { children: label }),
+          subtitle && /* @__PURE__ */ jsx("span", { className: clsx(!fullSizeSubtitle && "es:text-xs", "es:opacity-65"), children: subtitle })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  RichLabel
+};

package/dist/components/select/async-multi-select.js

@@ -0,0 +1,157 @@
+import { jsx } from "react/jsx-runtime";
+import { useId } from "react";
+import { A as AsyncSelect$1 } from "../../react-select-async.esm-D937XTWW.js";
+import { D as DndContext, g as getDragEndHandler, S as SortableContext, a as getMultiValueRemove, b as getMultiValue } from "../../multi-select-components-Sp-JEFEX.js";
+import { r as restrictToParentElement } from "../../modifiers.esm-BuJQPI1X.js";
+import { CustomSelectDefaultClearIndicator, CustomSelectDefaultDropdownIndicator, CustomSelectDefaultMultiValueRemove } from "./custom-select-default-components.js";
+import { BaseControl } from "../base-control/base-control.js";
+import { eightshiftSelectClasses } from "./styles.js";
+import { c as components } from "../../index-641ee5b8.esm-BPU8rMZr.js";
+/**
+ * Multi-select menu with async loading and re-ordering.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {string} [props.label] - Label of the component.
+ * @param {string} [props.help] - Help text of the component.
+ * @param {string} [props.icon] - Icon of the component.
+ * @param {string} [props.subtitle] - Subtitle of the component.
+ * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to show to the right of the label.
+ * @param {boolean} [props.inline] - Whether the Select menu is displayed inline with the label, to the right.
+ * @param {boolean|{label: string, value: string, metadata: Object<string, any>?}[]} [props.preloadOptions=true] - If `true`, the initial loading is done as soon as the component is loaded. If an array of `{label: '', value: ''}` option is provided, that is loaded immediately, dynamic fetching only happens in search. If `false`, nothing is loaded immediately, fetching only happens when an user types to search.
+ * @param {Function<Promise>} props.loadOptions - Async function that returns an array of `{label: '', value: ''}`-formatted items. `loadOptions(searchText: string): Promise<{label: string, value: string, [metadata]: Array}[]>`.
+ * @param {{label: string, value: string, metadata: Object<string, any>?}[]} props.value - Current value of the select.
+ * @param {Function} props.onChange - Function to call when the value changes.
+ * @param {boolean} [props.clearable] - Whether the select is clearable.
+ * @param {boolean} [props.noSearch] - Whether the search is disabled.
+ * @param {boolean} [props.disabled] - Whether the select is disabled.
+ * @param {boolean} [props.keepMenuOpenAfterSelect] - Whether the menu stays open after an select.
+ * @param {string} [props.placeholder] - Placeholder text to show when no value is selected.
+ * @param {JSX.Element} [props.customClearIndicator] - If provided, replaces the default 'Clear all' button.
+ * @param {JSX.Element} [props.customDropdownArrow] - If provided, replaces the default dropdown arrow indicator.
+ * @param {JSX.Element} [props.customMenuOption] - If provided, replaces the default item in the dropdown menu (react-select's `components.Option`).
+ * @param {JSX.Element} [props.customValueDisplay] - If provided, replaces the default current value display of each selected item (react-select's `components.MultiValue`).
+ * @param {JSX.Element} [props.customValueRemove] - If provided, replaces the default item remove button (react-select's `components.MultiValueRemove`.
+ * @param {JSX.Element} [props.customValueContainer] - If provided, replaces the default items container component (react-select's `components.MultiValueContainer`).
+ * @param {Function} [props.processLoadedOptions] - Allows modifying (filtering, grouping, ...) options output after the items have been dynamically fetched. Must include `label`, `value`, and `id` keys in the output, additional fields can be added as required.
+ * @param {string} [props.className] - Classes to pass to the select menu.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ *
+ * @returns {JSX.Element} The AsyncMultiSelect component.
+ *
+ * @example
+ * const [value, setValue] = useState([]);
+ *
+ * const loadOptions = async (searchText) => {
+ * 	const response = await fetch(`https://api.example.com/items?q=${searchText}`);
+ * 	const data = await response.json();
+ *
+ * 	return data.items.map((item) => ({
+ * 		label: item.name,
+ * 		value: item.id,
+ * 	}));
+ * };
+ *
+ * <AsyncMultiSelect
+ * 	label='Select items'
+ * 	loadOptions={loadOptions}
+ * 	value={value}
+ * 	onChange={setValue}
+ * />
+ *
+ * @preserve
+ */
+const AsyncMultiSelect = (props) => {
+  const {
+    label,
+    help,
+    icon,
+    subtitle,
+    actions,
+    inline,
+    loadOptions,
+    preloadOptions = true,
+    value: rawValue,
+    onChange,
+    disabled = false,
+    noSearch = false,
+    clearable = false,
+    keepMenuOpenAfterSelect = false,
+    className,
+    placeholder,
+    customMenuOption,
+    customValueRemove,
+    customValueDisplay,
+    customDropdownArrow,
+    customValueContainer,
+    customClearIndicator,
+    processLoadedOptions = (options) => options,
+    hidden,
+    ...additionalProps
+  } = props;
+  const idBase = useId();
+  const value = rawValue.map((item, index) => ({
+    ...item,
+    id: (item == null ? void 0 : item.value) ?? `${idBase}-${index}`
+  }));
+  const modifiedOnChange = (v) => {
+    onChange(v == null ? void 0 : v.map((item) => ({ ...item, id: void 0 })));
+  };
+  if (hidden) {
+    return null;
+  }
+  const customLoadOptions = async (searchText) => {
+    const results = await loadOptions(searchText);
+    return processLoadedOptions((results == null ? void 0 : results.map((item) => ({ id: item.value, ...item }))) ?? []);
+  };
+  return /* @__PURE__ */ jsx(
+    BaseControl,
+    {
+      label,
+      icon,
+      subtitle,
+      actions,
+      help,
+      inline,
+      children: /* @__PURE__ */ jsx(
+        DndContext,
+        {
+          modifiers: [restrictToParentElement],
+          onDragEnd: getDragEndHandler(modifiedOnChange, value),
+          children: /* @__PURE__ */ jsx(SortableContext, { items: value.map(({ id }) => id), children: /* @__PURE__ */ jsx(
+            AsyncSelect$1,
+            {
+              isMulti: true,
+              unstyled: true,
+              loadOptions: customLoadOptions,
+              defaultOptions: preloadOptions,
+              value,
+              onChange: modifiedOnChange,
+              closeMenuOnSelect: !keepMenuOpenAfterSelect,
+              isClearable: clearable,
+              isSearchable: !noSearch,
+              isDisabled: disabled,
+              className,
+              placeholder,
+              classNames: eightshiftSelectClasses,
+              components: {
+                MultiValue: getMultiValue(customValueDisplay ?? components.MultiValue),
+                MultiValueContainer: customValueContainer ?? components.MultiValueContainer,
+                MultiValueRemove: getMultiValueRemove(customValueRemove ?? CustomSelectDefaultMultiValueRemove),
+                Option: customMenuOption ?? components.Option,
+                IndicatorSeparator: null,
+                DropdownIndicator: customDropdownArrow ?? CustomSelectDefaultDropdownIndicator,
+                ClearIndicator: customClearIndicator ?? CustomSelectDefaultClearIndicator
+              },
+              menuPortalTarget: document.body,
+              ...additionalProps
+            }
+          ) })
+        }
+      )
+    }
+  );
+};
+export {
+  AsyncMultiSelect
+};

package/dist/components/select/async-single-select.js

@@ -0,0 +1,137 @@
+import { jsx } from "react/jsx-runtime";
+import { A as AsyncSelect$1 } from "../../react-select-async.esm-D937XTWW.js";
+import { CustomSelectDefaultClearIndicator, CustomSelectDefaultDropdownIndicator } from "./custom-select-default-components.js";
+import { BaseControl } from "../base-control/base-control.js";
+import { eightshiftSelectClasses } from "./styles.js";
+import { c as components } from "../../index-641ee5b8.esm-BPU8rMZr.js";
+/**
+ * Select menu with async loading.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {string} [props.label] - Label of the component.
+ * @param {string} [props.help] - Help text of the component.
+ * @param {string} [props.icon] - Icon of the component.
+ * @param {string} [props.subtitle] - Subtitle of the component.
+ * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to show to the right of the label.
+ * @param {boolean} [props.inline] - Whether the Select menu is displayed inline with the label, to the right.
+ * @param {boolean|{label: string, value: string, metadata: Object<string, any>?}[]} [props.preloadOptions=true] - If `true`, the initial loading is done as soon as the component is loaded. If an array of `{label: '', value: ''}` option is provided, that is loaded immediately, dynamic fetching only happens in search. If `false`, nothing is loaded immediately, fetching only happens when an user types to search.
+ * @param {Function} props.loadOptions - Async function that returns an array of `{label: '', value: ''}`-formatted items. `loadOptions(searchText: string): Promise<{label: string, value: string, metadata: Object<string, any>?}[]>`.
+ * @param {{label: string, value: string, metadata: Object<string, any>?}} props.value - Current value of the select.
+ * @param {Function} props.onChange - Function to call when the value changes.
+ * @param {boolean} [props.clearable=false] - Whether the select is clearable.
+ * @param {boolean} [props.noSearch=false] - Whether the search is disabled.
+ * @param {boolean} [props.disabled=false] - Whether the select is disabled.
+ * @param {boolean} [props.keepMenuOpenAfterSelect=false] - Whether the menu stays open after an select.
+ * @param {string} [props.placeholder] - Placeholder text to show when no value is selected.
+ * @param {JSX.Element} [props.customDropdownIndicator] - If provided, replaces the default dropdown arrow indicator.
+ * @param {JSX.Element} [props.customClearIndicator] - If provided and `noClear` is `false`, replaces the default 'Clear all' button.
+ * @param {JSX.Element} [props.customMenuOption] - If provided, replaces the default item in the dropdown menu (react-select's `components.Option`).
+ * @param {JSX.Element} [props.customValueDisplay] - If provided, replaces the default current value display of each selected item (react-select's `components.SingleValue`).
+ * @param {Function} [props.processLoadedOptions] - Allows modifying (filtering, grouping, ...) options output after the items have been dynamically fetched. Must include `label`, `value`, and `id` keys in the output, additional fields can be added as required.
+ * @param {string} props.className - Classes to pass to the select menu.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ *
+ * @returns {JSX.Element} The AsyncSelect component.
+ *
+ * @example
+ * const [value, setValue] = useState(null);
+ *
+ * const loadOptions = async (searchText) => {
+ * 	const response = await fetch(`https://api.example.com/items?q=${searchText}`);
+ * 	const data = await response.json();
+ *
+ * 	return data.items.map((item) => ({
+ * 		label: item.name,
+ * 		value: item.id,
+ * 	}));
+ * };
+ *
+ * <AsyncMultiSelect
+ * 	label='Select items'
+ * 	loadOptions={loadOptions}
+ * 	value={value}
+ * 	onChange={setValue}
+ * />
+ *
+ * @preserve
+ */
+const AsyncSelect = (props) => {
+  const {
+    label,
+    help,
+    icon,
+    subtitle,
+    actions,
+    inline,
+    loadOptions,
+    preloadOptions = true,
+    value,
+    onChange,
+    noSearch = false,
+    disabled = false,
+    clearable = false,
+    keepMenuOpenAfterSelect = false,
+    className,
+    placeholder,
+    customMenuOption,
+    customValueDisplay,
+    customDropdownArrow,
+    customClearIndicator,
+    processLoadedOptions = (options) => options,
+    hidden,
+    ...additionalProps
+  } = props;
+  if (hidden) {
+    return null;
+  }
+  const customLoadOptions = async (searchText) => {
+    const results = await loadOptions(searchText);
+    return processLoadedOptions((results == null ? void 0 : results.map((item) => ({ id: item.value, ...item }))) ?? []);
+  };
+  return /* @__PURE__ */ jsx(
+    BaseControl,
+    {
+      label,
+      icon,
+      subtitle,
+      actions,
+      help,
+      inline,
+      children: /* @__PURE__ */ jsx(
+        AsyncSelect$1,
+        {
+          unstyled: true,
+          loadOptions: customLoadOptions,
+          defaultOptions: preloadOptions,
+          value,
+          onChange: (value2) => {
+            if (value2 && "id" in value2) {
+              delete value2.id;
+            }
+            onChange(value2);
+          },
+          closeMenuOnSelect: !keepMenuOpenAfterSelect,
+          isClearable: clearable,
+          isSearchable: !noSearch,
+          isDisabled: disabled,
+          className,
+          placeholder,
+          classNames: eightshiftSelectClasses,
+          components: {
+            Option: customMenuOption ?? components.Option,
+            SingleValue: customValueDisplay ?? components.SingleValue,
+            IndicatorSeparator: null,
+            DropdownIndicator: customDropdownArrow ?? CustomSelectDefaultDropdownIndicator,
+            ClearIndicator: customClearIndicator ?? CustomSelectDefaultClearIndicator
+          },
+          menuPortalTarget: document.body,
+          ...additionalProps
+        }
+      )
+    }
+  );
+};
+export {
+  AsyncSelect
+};

package/dist/components/select/custom-select-default-components.js

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import { icons } from "../../icons/icons.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as components } from "../../index-641ee5b8.esm-BPU8rMZr.js";
+/**
+ * Default dropdown indicator for CustomSelect.
+ *
+ * @param {import('react-select').DropdownIndicatorProps} props - components.DropdownIndicator props.
+ *
+ * @preserve
+ */
+const CustomSelectDefaultDropdownIndicator = (props) => {
+  return /* @__PURE__ */ jsx(components.DropdownIndicator, { ...props, children: React__default.cloneElement(icons.dropdownCaretAlt, {
+    className: clsx(props.selectProps.menuIsOpen && "es:-scale-y-100 ")
+  }) });
+};
+/**
+ * Default clear indicator for CustomSelect.
+ *
+ * @param {import('react-select').ClearIndicatorProps} props - components.DropdownIndicator props.
+ *
+ * @preserve
+ */
+const CustomSelectDefaultClearIndicator = (props) => /* @__PURE__ */ jsx(components.ClearIndicator, { ...props, children: icons.clear });
+/**
+ * Default multiple value remove element for CustomSelect.
+ *
+ * @param {import('react-select').MultiValueRemoveProps} props - components.MultiValueRemove props.
+ *
+ * @preserve
+ */
+const CustomSelectDefaultMultiValueRemove = (props) => /* @__PURE__ */ jsx(components.MultiValueRemove, { ...props, children: React__default.cloneElement(icons.clear, { className: "es:size-4" }) });
+export {
+  CustomSelectDefaultClearIndicator,
+  CustomSelectDefaultDropdownIndicator,
+  CustomSelectDefaultMultiValueRemove
+};

package/dist/components/select/multi-select-components.js

@@ -0,0 +1,8 @@
+import "react/jsx-runtime";
+import { g, b, a } from "../../multi-select-components-Sp-JEFEX.js";
+import "../../lite-DVmmD_-j.js";
+export {
+  g as getDragEndHandler,
+  b as getMultiValue,
+  a as getMultiValueRemove
+};