@koobiq/react-components 0.24.0 → 0.26.0

package/dist/components/SelectNext/components/SelectList/SelectList.js

@@ -0,0 +1,131 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useLocalizedStringFormatter, useFilter, useControlledState, useMultiRef, mergeProps, clsx } from "@koobiq/react-core";
+import { useAutocompleteState, useAutocomplete, UNSTABLE_useFilteredListState, useListBox } from "@koobiq/react-primitives";
+import { utilClasses } from "../../../../styles/utility.js";
+import intlMessages from "../../intl.js";
+import { SelectContext } from "../../SelectContext.js";
+import { CollectionRoot } from "../../utils.js";
+import s from "./SelectList.module.css.js";
+import { SearchInput } from "../../../SearchInput/SearchInput.js";
+import { Divider } from "../../../Divider/Divider.js";
+import { ListEmptyState } from "../../../List/components/ListEmptyState/ListEmptyState.js";
+import { ListLoadingState } from "../../../List/components/ListLoadingState/ListLoadingState.js";
+const { list } = utilClasses;
+function SelectList(props) {
+  const {
+    style,
+    isLoading,
+    className,
+    onLoadMore,
+    slotProps,
+    inputValue,
+    isSearchable,
+    onInputChange,
+    defaultFilter,
+    state: inState,
+    defaultInputValue,
+    noItemsText: noItemsTextProp,
+    loadingText: loadingTextProp
+  } = props;
+  const t = useLocalizedStringFormatter(intlMessages);
+  const domRef = useRef(null);
+  const inputRef = useRef(null);
+  const collectionRef = useRef(null);
+  const { contains } = useFilter({ sensitivity: "base" });
+  const [filterText, setFilterText] = useControlledState(
+    inputValue,
+    defaultInputValue ?? "",
+    onInputChange
+  );
+  const noItemsText = (() => {
+    if (noItemsTextProp !== void 0) return noItemsTextProp;
+    const hasQuery = isSearchable && filterText.trim().length > 0;
+    return hasQuery ? t.format("nothing found") : t.format("empty items");
+  })();
+  const autocompleteState = useAutocompleteState({
+    inputValue: isSearchable ? filterText : "",
+    onInputChange: isSearchable ? setFilterText : () => {
+    }
+  });
+  const {
+    inputProps,
+    collectionProps,
+    filter: filterFn,
+    collectionRef: mergedCollectionRef
+  } = useAutocomplete(
+    {
+      inputRef,
+      collectionRef,
+      filter: defaultFilter || contains
+    },
+    autocompleteState
+  );
+  const listRef = useMultiRef([mergedCollectionRef, domRef]);
+  const state = UNSTABLE_useFilteredListState(
+    inState,
+    isSearchable ? filterFn : null
+  );
+  const isEmpty = state.collection.size === 0;
+  const { listBoxProps } = useListBox(
+    mergeProps(props, isSearchable ? collectionProps : null),
+    state,
+    domRef
+  );
+  const rootProps = mergeProps({ className: s.base }, slotProps?.root);
+  const listProps = mergeProps(
+    {
+      style,
+      ref: listRef,
+      "data-padded": true,
+      className: clsx(list, className)
+    },
+    listBoxProps
+  );
+  const searchInputProps = mergeProps(
+    {
+      autoFocus: true,
+      fullWidth: true,
+      isLabelHidden: true,
+      className: s.search,
+      placeholder: t.format("search"),
+      "aria-label": t.format("search"),
+      variant: "transparent"
+    },
+    slotProps?.["search-input"],
+    inputProps
+  );
+  const loadingText = loadingTextProp ?? t.format("loading");
+  const { collection } = state;
+  return /* @__PURE__ */ jsxs("div", { ...rootProps, children: [
+    isSearchable && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(SearchInput, { ref: inputRef, ...searchInputProps }),
+      /* @__PURE__ */ jsx(Divider, { disablePaddings: true, ...slotProps?.divider })
+    ] }),
+    /* @__PURE__ */ jsxs("ul", { ...listProps, children: [
+      /* @__PURE__ */ jsx(SelectContext.Provider, { value: state, children: /* @__PURE__ */ jsx(CollectionRoot, { collection }) }),
+      /* @__PURE__ */ jsx(
+        ListEmptyState,
+        {
+          isEmpty,
+          isLoading,
+          noItemsText
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ListLoadingState,
+        {
+          root: domRef.current,
+          isLoading,
+          onLoadMore,
+          loadingText,
+          observeDeps: [state.collection]
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  SelectList
+};

package/dist/components/SelectNext/components/SelectList/SelectList.module.css.js

@@ -0,0 +1,11 @@
+const base = "kbq-selectlist-68b1db";
+const search = "kbq-selectlist-search-800542";
+const s = {
+  base,
+  search
+};
+export {
+  base,
+  s as default,
+  search
+};

package/dist/components/SelectNext/components/SelectList/index.d.ts

@@ -0,0 +1 @@
+export * from './SelectList';

package/dist/components/SelectNext/components/SelectOption/SelectOption.d.ts

@@ -0,0 +1,37 @@
+import type { Key, ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+export type SelectOptionProps<T = object> = ExtendableComponentPropsWithRef<{
+    className?: string;
+    /** The unique id of the item. */
+    id?: Key;
+    /** The object value that this item represents. When using dynamic collections, this is set automatically. */
+    value?: T;
+    /** A string representation of the item's contents, used for features like typeahead. */
+    textValue?: string;
+    /** An accessibility label for this item. */
+    'aria-label'?: string;
+    /** Whether the item is disabled. */
+    isDisabled?: boolean;
+    /**
+     * Handler that is called when a user performs an action on the item. The exact user event depends on
+     * the collection's `selectionBehavior` prop and the interaction modality.
+     */
+    onAction?: () => void;
+}, 'a'>;
+export declare const SelectOption: <T extends object>(props: Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "value" | "className" | "id" | "aria-label" | "isDisabled" | "textValue" | "onAction"> & {
+    className?: string;
+    /** The unique id of the item. */
+    id?: Key;
+    /** The object value that this item represents. When using dynamic collections, this is set automatically. */
+    value?: object | undefined;
+    /** A string representation of the item's contents, used for features like typeahead. */
+    textValue?: string;
+    /** An accessibility label for this item. */
+    'aria-label'?: string;
+    /** Whether the item is disabled. */
+    isDisabled?: boolean;
+    /**
+     * Handler that is called when a user performs an action on the item. The exact user event depends on
+     * the collection's `selectionBehavior` prop and the interaction modality.
+     */
+    onAction?: () => void;
+} & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement | null;

package/dist/components/SelectNext/components/SelectOption/SelectOption.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useContext } from "react";
+import { useMultiRef, useHover, usePress, filterDOMProps, clsx, mergeProps } from "@koobiq/react-core";
+import { createLeafComponent, ItemNode, useOption } from "@koobiq/react-primitives";
+import { utilClasses } from "../../../../styles/utility.js";
+import { SelectContext } from "../../SelectContext.js";
+import { Checkbox } from "../../../Checkbox/Checkbox.js";
+const textVariant = utilClasses.typography;
+const { listItem } = utilClasses;
+const SelectOption = createLeafComponent(ItemNode, function SelectItem(props, forwardedRef, item) {
+  const { href, className, style } = props;
+  const domRef = useRef(null);
+  const ref = useMultiRef([forwardedRef, domRef]);
+  const state = useContext(SelectContext);
+  const { optionProps, isSelected, isDisabled, isFocusVisible } = useOption(
+    { key: item.key },
+    state,
+    domRef
+  );
+  const { hoverProps, isHovered } = useHover({ isDisabled });
+  const { isPressed, pressProps } = usePress({ isDisabled });
+  const Tag = href ? "a" : "li";
+  const DOMProps = filterDOMProps(props, { global: true });
+  delete DOMProps.id;
+  delete DOMProps.onClick;
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      ref,
+      style,
+      "data-hovered": isHovered || void 0,
+      "data-pressed": isPressed || void 0,
+      "data-disabled": isDisabled || void 0,
+      "data-selected": isSelected || void 0,
+      "data-focus-visible": isFocusVisible || void 0,
+      ...mergeProps(optionProps, hoverProps, pressProps),
+      className: clsx(listItem, textVariant["text-normal"], className),
+      children: [
+        state.selectionManager.selectionMode === "multiple" && /* @__PURE__ */ jsx(Checkbox, { isDisabled, isSelected, isReadOnly: true }),
+        item.rendered
+      ]
+    }
+  );
+});
+export {
+  SelectOption
+};

package/dist/components/SelectNext/components/SelectOption/index.d.ts

@@ -0,0 +1 @@
+export * from './SelectOption';

package/dist/components/SelectNext/components/SelectSection/SelectSection.d.ts

@@ -0,0 +1,9 @@
+import type { Key, SectionProps, ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+export type SelectSectionProps<T> = ExtendableComponentPropsWithRef<SectionProps<T> & {
+    /** The unique id of the item. */
+    id?: Key;
+}, 'section'>;
+export declare const SelectSection: <T extends object>(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "id" | keyof SectionProps<T_1>> & SectionProps<T> & {
+    /** The unique id of the item. */
+    id?: Key;
+} & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement | null;

package/dist/components/SelectNext/components/SelectSection/SelectSection.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { filterDOMProps, mergeProps } from "@koobiq/react-core";
+import { createBranchComponent, SectionNode, useListBoxSection } from "@koobiq/react-primitives";
+import { utilClasses } from "../../../../styles/utility.js";
+import { SelectContext } from "../../SelectContext.js";
+import { CollectionBranch } from "../../utils.js";
+import { Typography } from "../../../Typography/Typography.js";
+const { listHeading } = utilClasses;
+function SelectSectionInner(props, ref, section) {
+  const state = useContext(SelectContext);
+  const { className, style } = props;
+  const { headingProps, groupProps } = useListBoxSection({
+    heading: section.rendered,
+    "aria-label": props["aria-label"] ?? void 0
+  });
+  const DOMProps = filterDOMProps(props, { global: true });
+  delete DOMProps.id;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ...mergeProps(DOMProps, groupProps),
+      className,
+      style,
+      ref,
+      children: [
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            as: "span",
+            display: "block",
+            variant: "caps-compact-strong",
+            color: "contrast-secondary",
+            className: listHeading,
+            ...headingProps,
+            children: props.title
+          }
+        ),
+        /* @__PURE__ */ jsx(CollectionBranch, { collection: state.collection, parent: section })
+      ]
+    }
+  );
+}
+const SelectSection = createBranchComponent(
+  SectionNode,
+  SelectSectionInner
+);
+export {
+  SelectSection
+};

package/dist/components/SelectNext/components/SelectSection/index.d.ts

@@ -0,0 +1 @@
+export * from './SelectSection';

package/dist/components/SelectNext/components/Tag/Tag.d.ts

@@ -0,0 +1,18 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+import type { TagGroupPropVariant } from '../../../TagGroup';
+type TagProps = ExtendableComponentPropsWithRef<{
+    /**
+     * The variant to use.
+     * @default 'theme-fade'
+     */
+    variant?: TagGroupPropVariant;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+    icon?: ReactNode;
+    isDisabled?: boolean;
+    onRemove?: () => void;
+}, 'div'>;
+export declare const Tag: import("react").ForwardRefExoticComponent<Omit<TagProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/SelectNext/components/Tag/Tag.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useLocalizedStringFormatter, mergeProps, clsx, isNotNil } from "@koobiq/react-core";
+import { IconXmarkS16 } from "@koobiq/react-icons";
+import { utilClasses } from "../../../../styles/utility.js";
+import s from "../../../TagGroup/components/Tag/Tag.module.css.js";
+import intlMessages from "./intl.json.js";
+import { matchVariantToCloseButton } from "./utils.js";
+import { IconButton } from "../../../IconButton/IconButton.js";
+const textNormalMedium = utilClasses.typography["text-normal-medium"];
+const Tag = forwardRef((props, ref) => {
+  const {
+    variant = "theme-fade",
+    icon,
+    className,
+    style,
+    isDisabled,
+    children,
+    onRemove,
+    ...other
+  } = props;
+  const stringFormatter = useLocalizedStringFormatter(intlMessages);
+  const rootProps = mergeProps({
+    className: clsx(
+      s.base,
+      s[variant],
+      isDisabled && s.disabled,
+      textNormalMedium,
+      className
+    ),
+    ...other,
+    style
+  });
+  const removeButtonProps = {
+    isCompact: true,
+    isDisabled,
+    className: s.cancelIcon,
+    variant: matchVariantToCloseButton[variant],
+    "aria-label": stringFormatter.format("remove")
+  };
+  const contentProps = mergeProps({
+    className: s.content
+  });
+  const iconProps = mergeProps({
+    className: s.icon
+  });
+  return /* @__PURE__ */ jsxs("div", { ref, ...rootProps, children: [
+    isNotNil(icon) && /* @__PURE__ */ jsx("span", { ...iconProps, children: icon }),
+    isNotNil(children) && /* @__PURE__ */ jsx("span", { ...contentProps, children }),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        as: "div",
+        size: "l",
+        ...removeButtonProps,
+        tabIndex: void 0,
+        onPress: onRemove,
+        children: /* @__PURE__ */ jsx(IconXmarkS16, {})
+      }
+    )
+  ] });
+});
+Tag.displayName = "SelectTag";
+export {
+  Tag
+};

package/dist/components/SelectNext/components/Tag/index.d.ts

@@ -0,0 +1 @@
+export * from './Tag';

package/dist/components/SelectNext/components/Tag/intl.json.js

@@ -0,0 +1,7 @@
+const intlMessages = {
+  "ru-RU": { "remove": "Удалить" },
+  "en-US": { "remove": "Remove" }
+};
+export {
+  intlMessages as default
+};

package/dist/components/SelectNext/components/Tag/utils.d.ts

@@ -0,0 +1,3 @@
+import type { IconButtonPropVariant } from '../../../IconButton';
+import type { TagGroupPropVariant } from '../../../TagGroup';
+export declare const matchVariantToCloseButton: Record<TagGroupPropVariant, IconButtonPropVariant>;

package/dist/components/SelectNext/components/Tag/utils.js

@@ -0,0 +1,9 @@
+const matchVariantToCloseButton = {
+  "theme-fade": "theme",
+  "contrast-fade": "fade-contrast",
+  "error-fade": "error",
+  "warning-fade": "warning"
+};
+export {
+  matchVariantToCloseButton
+};

package/dist/components/SelectNext/components/TagGroup/TagGroup.d.ts

@@ -0,0 +1,13 @@
+import type { SelectState } from '@koobiq/react-primitives';
+import type { SelectionMode } from '@react-types/select';
+import type { SelectNextPropSelectedTagsOverflow } from '../../types';
+export type TagGroupProps<T extends object, M extends SelectionMode = 'single'> = {
+    state: SelectState<T, M>;
+    states: {
+        isInvalid?: boolean;
+        isDisabled?: boolean;
+        isRequired?: boolean;
+    };
+    selectedTagsOverflow?: SelectNextPropSelectedTagsOverflow;
+};
+export declare function TagGroup<T extends object, M extends SelectionMode = 'single'>({ selectedTagsOverflow, ...rest }: TagGroupProps<T, M>): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/SelectNext/components/TagGroup/TagGroup.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { logger } from "@koobiq/logger";
+import { TagGroupMultiline } from "./TagGroupMultiline.js";
+import { TagGroupResponsive } from "./TagGroupResponsive.js";
+function assertNever(x) {
+  logger.error(`Unhandled selectedTagsOverflow variant: ${x}`);
+  return null;
+}
+function TagGroup({
+  selectedTagsOverflow = "responsive",
+  ...rest
+}) {
+  switch (selectedTagsOverflow) {
+    case "responsive":
+      return /* @__PURE__ */ jsx(TagGroupResponsive, { ...rest });
+    case "multiline":
+      return /* @__PURE__ */ jsx(TagGroupMultiline, { ...rest });
+    default:
+      return assertNever(selectedTagsOverflow);
+  }
+}
+export {
+  TagGroup
+};

package/dist/components/SelectNext/components/TagGroup/TagGroup.module.css.js

@@ -0,0 +1,20 @@
+const container = "kbq-taggroup-container-5d455a";
+const hasStartAddon = "kbq-taggroup-hasStartAddon-eb7d88";
+const base = "kbq-taggroup-b97495";
+const tag = "kbq-taggroup-tag-262753";
+const more = "kbq-taggroup-more-db5a34";
+const s = {
+  container,
+  hasStartAddon,
+  base,
+  tag,
+  more
+};
+export {
+  base,
+  container,
+  s as default,
+  hasStartAddon,
+  more,
+  tag
+};

package/dist/components/SelectNext/components/TagGroup/TagGroupMultiline.d.ts

@@ -0,0 +1,3 @@
+import type { SelectionMode } from '@react-types/select';
+import type { TagGroupProps } from './TagGroup';
+export declare function TagGroupMultiline<T extends object, M extends SelectionMode = 'single'>({ state, states }: TagGroupProps<T, M>): import("react/jsx-runtime").JSX.Element;

package/dist/components/SelectNext/components/TagGroup/TagGroupMultiline.js

@@ -0,0 +1,44 @@
+import { jsx } from "react/jsx-runtime";
+import { useLocalizedStringFormatter, clsx } from "@koobiq/react-core";
+import intlMessages from "../../intl.js";
+import s from "./TagGroup.module.css.js";
+import { Tag } from "../Tag/Tag.js";
+import { useFormFieldControlGroup } from "../../../FormField/FormFieldControlGroup/FormFieldControlGroupContext.js";
+function TagGroupMultiline({ state, states }) {
+  const { isDisabled, isInvalid } = states;
+  const t = useLocalizedStringFormatter(intlMessages);
+  const { hasStartAddon } = useFormFieldControlGroup();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(s.container, hasStartAddon && s.hasStartAddon),
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: s.base,
+          "data-limit-tags": "multiline",
+          "aria-label": t.format("selected items"),
+          children: state.selectedItems?.map((item) => /* @__PURE__ */ jsx(
+            Tag,
+            {
+              className: s.tag,
+              isDisabled,
+              variant: isInvalid ? "error-fade" : "contrast-fade",
+              onRemove: () => {
+                if (state.selectionManager.isSelected(item.key)) {
+                  state.selectionManager.toggleSelection(item.key);
+                }
+              },
+              children: item.textValue
+            },
+            item.key
+          ))
+        }
+      )
+    }
+  );
+}
+export {
+  TagGroupMultiline
+};

package/dist/components/SelectNext/components/TagGroup/TagGroupResponsive.d.ts

@@ -0,0 +1,3 @@
+import type { SelectionMode } from '@react-types/select';
+import type { TagGroupProps } from './TagGroup';
+export declare function TagGroupResponsive<T extends object, M extends SelectionMode = 'single'>({ state, states }: TagGroupProps<T, M>): import("react/jsx-runtime").JSX.Element;

package/dist/components/SelectNext/components/TagGroup/TagGroupResponsive.js

@@ -0,0 +1,65 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useHideOverflowItems, useLocalizedStringFormatter, clsx } from "@koobiq/react-core";
+import intlMessages from "../../intl.js";
+import s from "./TagGroup.module.css.js";
+import { getHiddenCount } from "./utils.js";
+import { useFormFieldControlGroup } from "../../../FormField/FormFieldControlGroup/FormFieldControlGroupContext.js";
+import { Tag } from "../Tag/Tag.js";
+function TagGroupResponsive({ state, states }) {
+  const { isDisabled, isInvalid } = states;
+  const length = state?.selectedItems?.length || 0;
+  const { parentRef, visibleMap, itemsRefs } = useHideOverflowItems({
+    length: length + 1,
+    pinnedIndex: 0
+  });
+  const hiddenCount = getHiddenCount(visibleMap);
+  const t = useLocalizedStringFormatter(intlMessages);
+  const { hasStartAddon } = useFormFieldControlGroup();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(s.container, hasStartAddon && s.hasStartAddon),
+      ref: parentRef,
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: s.base,
+            "data-limit-tags": "responsive",
+            "aria-label": t.format("selected items"),
+            children: state.selectedItems?.map((item, i) => /* @__PURE__ */ jsx(
+              Tag,
+              {
+                className: s.tag,
+                ref: itemsRefs[i],
+                isDisabled,
+                "aria-hidden": !visibleMap[i] || void 0,
+                variant: isInvalid ? "error-fade" : "contrast-fade",
+                onRemove: () => {
+                  if (state.selectionManager.isSelected(item.key)) {
+                    state.selectionManager.toggleSelection(item.key);
+                  }
+                },
+                children: item.textValue
+              },
+              item.key
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: s.more,
+            ref: itemsRefs[itemsRefs.length - 1],
+            "aria-hidden": !visibleMap[length] || void 0,
+            children: t.format("more", { count: hiddenCount })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  TagGroupResponsive
+};

package/dist/components/SelectNext/components/TagGroup/index.d.ts

@@ -0,0 +1 @@
+export * from './TagGroup';

package/dist/components/SelectNext/components/TagGroup/utils.d.ts

@@ -0,0 +1 @@
+export declare const getHiddenCount: (map: boolean[]) => number;

package/dist/components/SelectNext/components/TagGroup/utils.js

@@ -0,0 +1,4 @@
+const getHiddenCount = (map) => map.filter((item) => !item).length;
+export {
+  getHiddenCount
+};

package/dist/components/SelectNext/components/index.d.ts

@@ -0,0 +1,5 @@
+export * from './SelectList';
+export * from './Tag';
+export * from './SelectOption';
+export * from './SelectSection';
+export * from './TagGroup';

package/dist/components/SelectNext/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Select';
+export * from './types';

package/dist/components/SelectNext/intl.d.ts

@@ -0,0 +1,2 @@
+declare const _default: Record<string, Record<string, string>>;
+export default _default;

package/dist/components/SelectNext/intl.js

@@ -0,0 +1,21 @@
+const intlMessages = {
+  "ru-RU": {
+    "empty items": "Нет вариантов выбора",
+    "nothing found": "Ничего не найдено",
+    loading: "Загрузка…",
+    "selected items": "Выбранные элементы",
+    search: "Поиск",
+    more: ({ count }) => `+${count}`
+  },
+  "en-US": {
+    "empty items": "No options available",
+    "nothing found": "Nothing found",
+    "selected items": "Selected items",
+    loading: "Loading…",
+    search: "Search",
+    more: ({ count }) => `+${count}`
+  }
+};
+export {
+  intlMessages as default
+};