@koobiq/react-components 0.3.1 → 0.5.0

package/dist/components/Select/Select.js

@@ -1,13 +1,16 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { deprecate } from "@koobiq/logger";
-import { useDOMRef, useBoolean, useElementSize, mergeProps, clsx } from "@koobiq/react-core";
-import { IconChevronDownS16 } from "@koobiq/react-icons";
-import { useSelectState, removeDataAttributes, useSelect, HiddenSelect } from "@koobiq/react-primitives";
+import { forwardRef, useCallback } from "react";
+import { useLocalizedStringFormatter, useDOMRef, useElementSize, mergeProps, clsx } from "@koobiq/react-core";
+import { IconXmarkCircle16, IconChevronDownS16 } from "@koobiq/react-icons";
+import { useMultiSelectState, removeDataAttributes, useMultiSelect } from "@koobiq/react-primitives";
 import { PopoverInner } from "../Popover/PopoverInner.js";
+import intlMessages from "./intl.js";
 import s from "./Select.module.css.js";
 import { FieldSelect } from "../FieldComponents/FieldSelect/FieldSelect.js";
-import { ListInner } from "../List/List.js";
+import { SelectList } from "./components/SelectList/SelectList.js";
+import { TagGroup } from "./components/TagGroup/TagGroup.js";
+import { List } from "../List/List.js";
+import { IconButton } from "../IconButton/IconButton.js";
 import { FieldControl } from "../FieldComponents/FieldControl/FieldControl.js";
 import { FieldLabel } from "../FieldComponents/FieldLabel/FieldLabel.js";
 import { FieldContentGroup } from "../FieldComponents/FieldContentGroup/FieldContentGroup.js";
@@ -15,97 +18,63 @@ import { FieldCaption } from "../FieldComponents/FieldCaption/FieldCaption.js";
 import { FieldError } from "../FieldComponents/FieldError/FieldError.js";
 import { Item } from "../Collections/Item.js";
 import { Section } from "../Collections/Section.js";
-import { ListItemText } from "../List/components/ListItemText/ListItemText.js";
+import { Divider } from "../Collections/Divider.js";
 function SelectRender(props, ref) {
   const {
     fullWidth = false,
+    isClearable = false,
     "data-testid": testId,
+    selectionMode = "single",
+    selectedTagsOverflow = "responsive",
+    isRequired,
+    isDisabled,
+    caption,
+    errorMessage,
     className,
     style,
-    open,
-    isOpen: isOpenProp,
-    hiddenLabel,
-    isLabelHidden: isLabelHiddenProp,
-    disabled,
-    isDisabled: isDisabledProp,
-    error,
-    isInvalid: isInvalidProp,
-    required,
-    isRequired: isRequiredProp,
-    caption,
+    isLabelHidden,
     placeholder,
     endAddon,
     slotProps,
     startAddon,
+    onClear,
     label,
-    name,
-    errorMessage,
     renderValue: renderValueProp
   } = props;
-  const isOpen = isOpenProp ?? open;
-  const isInvalid = isInvalidProp ?? error ?? false;
-  const isDisabled = isDisabledProp ?? disabled ?? false;
-  const isRequired = isRequiredProp ?? required ?? false;
-  const isLabelHidden = isLabelHiddenProp ?? hiddenLabel ?? false;
-  if (process.env.NODE_ENV !== "production" && "disabled" in props) {
-    deprecate(
-      'Select: the "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
-    );
-  }
-  if (process.env.NODE_ENV !== "production" && "required" in props) {
-    deprecate(
-      'Select: the "required" prop is deprecated. Use "isRequired" prop to replace it.'
-    );
-  }
-  if (process.env.NODE_ENV !== "production" && "error" in props) {
-    deprecate(
-      'Select: the "error" prop is deprecated. Use "isInvalid" prop to replace it.'
-    );
-  }
-  if (process.env.NODE_ENV !== "production" && "open" in props) {
-    deprecate(
-      'Select: the "open" prop is deprecated. Use "isOpen" prop to replace it.'
-    );
-  }
-  if (process.env.NODE_ENV !== "production" && "hiddenLabel" in props) {
-    deprecate(
-      'Select: the "hiddenLabel" prop is deprecated. Use "isLabelHidden" prop to replace it.'
-    );
-  }
+  const t = useLocalizedStringFormatter(intlMessages);
   const domRef = useDOMRef(ref);
-  const state = useSelectState({
-    ...removeDataAttributes(props),
-    isOpen,
-    isInvalid,
-    isDisabled,
-    isRequired
-  });
-  const [opened, { on, off }] = useBoolean(state.isOpen);
+  const state = useMultiSelectState(
+    removeDataAttributes({ ...props, selectionMode })
+  );
+  const hasClearButton = isClearable && !isDisabled && state.selectedItems;
+  const handleClear = useCallback(() => {
+    state.selectionManager.clearSelection();
+    onClear?.();
+  }, [onClear, state]);
   const {
+    isInvalid,
     menuProps,
     valueProps,
     triggerProps,
     labelProps: labelPropsAria,
     descriptionProps,
     errorMessageProps
-  } = useSelect(
-    {
-      ...removeDataAttributes(props),
-      isOpen,
-      isInvalid,
-      isDisabled,
-      isRequired
-    },
-    { ...state, isOpen: state.isOpen || opened },
+  } = useMultiSelect(
+    removeDataAttributes({
+      ...props,
+      selectionMode,
+      disallowEmptySelection: true
+    }),
+    state,
     domRef
   );
   const { ref: containerRef, width } = useElementSize();
   const rootProps = mergeProps({
     "data-testid": testId,
-    "data-invalid": isInvalid,
     "data-fullwidth": fullWidth,
-    "data-disabled": isDisabled,
-    "data-required": isRequired,
+    "data-invalid": isInvalid,
+    "data-disabled": props.isDisabled,
+    "data-required": props.isRequired,
     className: clsx(s.base, fullWidth && s.fullWidth, className),
     style
   });
@@ -119,16 +88,28 @@ function SelectRender(props, ref) {
     slotProps?.label,
     labelPropsAria
   );
+  const clearButtonProps = mergeProps(
+    {
+      "aria-label": t.format("clear"),
+      onPress: handleClear,
+      className: s.clearButton,
+      variant: isInvalid ? "error" : "fade-contrast",
+      preventFocusOnPress: true
+    },
+    slotProps?.clearButton
+  );
   const groupProps = mergeProps(
     {
       slotProps: {
         endAddon: { className: s.addon },
         startAddon: { className: s.addon }
       },
+      className: clsx(isClearable && s.clearable),
       startAddon,
       endAddon: /* @__PURE__ */ jsxs(Fragment, { children: [
         endAddon,
-        /* @__PURE__ */ jsx(IconChevronDownS16, { className: s.chevron })
+        hasClearButton && /* @__PURE__ */ jsx(IconButton, { ...clearButtonProps, children: /* @__PURE__ */ jsx(IconXmarkCircle16, {}) }),
+        /* @__PURE__ */ jsx("span", { className: s.chevron, children: /* @__PURE__ */ jsx(IconChevronDownS16, {}) })
       ] }),
       isInvalid,
       isDisabled,
@@ -138,21 +119,15 @@ function SelectRender(props, ref) {
   );
   const controlProps = mergeProps(
     {
-      isInvalid,
-      isDisabled,
       ref: domRef,
-      placeholder
+      placeholder,
+      isInvalid,
+      isDisabled
     },
     slotProps?.control,
     valueProps,
     triggerProps
   );
-  const captionProps = mergeProps({ children: caption }, slotProps?.caption, descriptionProps);
-  const errorProps = mergeProps(
-    { isInvalid, children: errorMessage },
-    slotProps?.errorMessage,
-    errorMessageProps
-  );
   const popoverProps = mergeProps(
     {
       state,
@@ -162,43 +137,50 @@ function SelectRender(props, ref) {
       anchorRef: domRef,
       className: s.popover,
       placement: "bottom start",
-      type: "listbox",
-      slotProps: {
-        transition: {
-          onEnter: on,
-          onExited: off
-        }
-      }
+      type: "listbox"
     },
     slotProps?.popover
   );
-  const renderDefaultValue = (selectedItem) => selectedItem?.rendered;
+  const captionProps = mergeProps({ children: caption }, slotProps?.caption, descriptionProps);
+  const errorProps = mergeProps(
+    { isInvalid, children: errorMessage },
+    slotProps?.errorMessage,
+    errorMessageProps
+  );
+  const renderDefaultValue = (state2, states) => {
+    if (!state2.selectedItems) return null;
+    if (selectionMode === "multiple")
+      return /* @__PURE__ */ jsx(
+        TagGroup,
+        {
+          state: state2,
+          states,
+          selectedTagsOverflow
+        }
+      );
+    return state2.selectedItems[0].textValue;
+  };
   const renderValue = renderValueProp || renderDefaultValue;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(FieldControl, { ...rootProps, children: [
       /* @__PURE__ */ jsx(FieldLabel, { ...labelProps }),
-      /* @__PURE__ */ jsx(
-        HiddenSelect,
-        {
-          name,
-          label,
-          state,
-          triggerRef: domRef,
-          isDisabled
-        }
-      ),
-      /* @__PURE__ */ jsx(FieldContentGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldSelect, { ...controlProps, children: renderValue(state?.selectedItem) }) }),
+      /* @__PURE__ */ jsx(FieldContentGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldSelect, { ...controlProps, children: renderValue(state, {
+        isInvalid,
+        isDisabled: props.isDisabled,
+        isRequired: props.isRequired
+      }) }) }),
       /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
       /* @__PURE__ */ jsx(FieldError, { ...errorProps })
     ] }),
-    /* @__PURE__ */ jsx(PopoverInner, { ...popoverProps, children: /* @__PURE__ */ jsx(ListInner, { ...listProps }) })
+    /* @__PURE__ */ jsx(PopoverInner, { ...popoverProps, children: /* @__PURE__ */ jsx(SelectList, { ...listProps }) })
   ] });
 }
 const SelectComponent = forwardRef(SelectRender);
 const Select = SelectComponent;
 Select.Item = Item;
 Select.Section = Section;
-Select.ItemText = ListItemText;
+Select.Divider = Divider;
+Select.ItemText = List.ItemText;
 export {
   Select
 };

package/dist/components/Select/Select.module.css.js

@@ -2,20 +2,26 @@ const base = "kbq-select-6d31ad";
 const fullWidth = "kbq-select-fullWidth-1dfc13";
 const addon = "kbq-select-addon-cbc524";
 const chevron = "kbq-select-chevron-0b4fa3";
-const popover = "kbq-select-popover-79fc05";
 const list = "kbq-select-list-8ffac0";
+const popover = "kbq-select-popover-79fc05";
+const clearButton = "kbq-select-clearButton-8031a1";
+const clearable = "kbq-select-clearable-2f5092";
 const s = {
   base,
   fullWidth,
   addon,
   chevron,
+  list,
   popover,
-  list
+  clearButton,
+  clearable
 };
 export {
   addon,
   base,
   chevron,
+  clearButton,
+  clearable,
   s as default,
   fullWidth,
   list,

package/dist/components/Select/components/SelectList/SelectList.d.ts

@@ -0,0 +1,8 @@
+import type { Ref } from 'react';
+import { type MultiSelectState } from '@koobiq/react-primitives';
+import type { ListProps } from '../../../List';
+export type SelectListProps<T extends object> = {
+    state: MultiSelectState<T>;
+    listRef?: Ref<HTMLUListElement>;
+} & Omit<ListProps<T>, 'ref'>;
+export declare function SelectList<T extends object>(props: SelectListProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Select/components/SelectList/SelectList.js

@@ -0,0 +1,51 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useDOMRef, mergeProps, clsx, isNotNil } from "@koobiq/react-core";
+import { useListBox } from "@koobiq/react-primitives";
+import { utilClasses } from "../../../../styles/utility.js";
+import s from "./SelectList.module.css.js";
+import { SelectOption } from "../SelectOption/SelectOption.js";
+import { Typography } from "../../../Typography/Typography.js";
+import { ListSection } from "../../../List/components/ListSection/ListSection.js";
+import { Divider } from "../../../Divider/Divider.js";
+const { list } = utilClasses;
+function SelectList(props) {
+  const { label, className, style, slotProps, state, listRef } = props;
+  const domRef = useDOMRef(listRef);
+  const { listBoxProps, labelProps } = useListBox(props, state, domRef);
+  const titleProps = mergeProps(
+    {
+      className: s.label,
+      variant: "text-normal-strong"
+    },
+    slotProps?.label,
+    labelProps
+  );
+  const listProps = mergeProps(
+    {
+      style,
+      ref: domRef,
+      className: clsx(list, className)
+    },
+    slotProps?.list,
+    listBoxProps
+  );
+  const renderItems = (treeState) => [...treeState.collection].map((item) => {
+    switch (item.type) {
+      case "divider":
+        return /* @__PURE__ */ jsx(Divider, { className: s.divider }, item.key);
+      case "item":
+        return /* @__PURE__ */ jsx(SelectOption, { item, state }, item.key);
+      case "section":
+        return /* @__PURE__ */ jsx(ListSection, { section: item, state }, item.key);
+      default:
+        return null;
+    }
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isNotNil(label) && /* @__PURE__ */ jsx(Typography, { ...titleProps, children: label }),
+    /* @__PURE__ */ jsx("ul", { ...listProps, children: renderItems(state) })
+  ] });
+}
+export {
+  SelectList
+};

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

@@ -0,0 +1,11 @@
+const label = "kbq-selectlist-label-4b49f4";
+const divider = "kbq-selectlist-divider-7c167f";
+const s = {
+  label,
+  divider
+};
+export {
+  s as default,
+  divider,
+  label
+};

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

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

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

@@ -0,0 +1,7 @@
+import type { Node } from '@koobiq/react-core';
+import { type MultiSelectState } from '@koobiq/react-primitives';
+export type SelectOptionProps<T> = {
+    item: Node<T>;
+    state: MultiSelectState<T>;
+};
+export declare function SelectOption<T>({ item, state }: SelectOptionProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Select/components/SelectOption/SelectOption.js

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

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

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

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

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

package/dist/components/Select/components/Tag/Tag.js

@@ -0,0 +1,64 @@
+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
+  } = props;
+  const stringFormatter = useLocalizedStringFormatter(intlMessages);
+  const rootProps = mergeProps({
+    className: clsx(
+      s.base,
+      s[variant],
+      isDisabled && s.disabled,
+      textNormalMedium,
+      className
+    ),
+    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/Select/components/Tag/index.d.ts

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

package/dist/components/Select/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/Select/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/Select/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/Select/components/TagGroup/TagGroup.d.ts

@@ -0,0 +1,13 @@
+import type { FC } from 'react';
+import type { MultiSelectState } from '@koobiq/react-primitives';
+import type { SelectPropSelectedTagsOverflow } from '../../types';
+export type TagGroupProps<T> = {
+    state: MultiSelectState<T>;
+    states: {
+        isInvalid?: boolean;
+        isDisabled?: boolean;
+        isRequired?: boolean;
+    };
+    selectedTagsOverflow?: SelectPropSelectedTagsOverflow;
+};
+export declare const TagGroup: FC<TagGroupProps<unknown>>;

package/dist/components/Select/components/TagGroup/TagGroup.js

@@ -0,0 +1,24 @@
+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;
+}
+const 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/Select/components/TagGroup/TagGroup.module.css.js

@@ -0,0 +1,23 @@
+const container = "kbq-taggroup-container-c4d544";
+const hasStartAddon = "kbq-taggroup-hasStartAddon-40d1f9";
+const base = "kbq-taggroup-8253a5";
+const tag = "kbq-taggroup-tag-b9306f";
+const more = "kbq-taggroup-more-b2d6b9";
+const hidden = "kbq-taggroup-hidden-eadb46";
+const s = {
+  container,
+  hasStartAddon,
+  base,
+  tag,
+  more,
+  hidden
+};
+export {
+  base,
+  container,
+  s as default,
+  hasStartAddon,
+  hidden,
+  more,
+  tag
+};

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

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+import type { TagGroupProps } from './TagGroup';
+export declare const TagGroupMultiline: FC<TagGroupProps<unknown>>;

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

@@ -0,0 +1,47 @@
+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 { useFieldContentGroup } from "../../../FieldComponents/FieldContentGroup/FieldContentGroupContext.js";
+const TagGroupMultiline = ({
+  state,
+  states
+}) => {
+  const { isDisabled, isInvalid } = states;
+  const t = useLocalizedStringFormatter(intlMessages);
+  const { hasStartAddon } = useFieldContentGroup();
+  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/Select/components/TagGroup/TagGroupResponsive.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+import type { TagGroupProps } from './TagGroup';
+export declare const TagGroupResponsive: FC<TagGroupProps<unknown>>;