@koobiq/react-components 0.0.1-beta.2 → 0.0.1-beta.21

package/dist/components/Select/Select.js

@@ -0,0 +1,179 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useDOMRef, useBoolean, mergeProps, clsx, useElementSize } from "@koobiq/react-core";
+import { IconChevronDownS16 } from "@koobiq/react-icons";
+import { useSelectState, useSelect, HiddenSelect } from "@koobiq/react-primitives";
+import s from "./Select.module.css.js";
+import { FieldSelect } from "../FieldComponents/FieldSelect/FieldSelect.js";
+import { PopoverInner } from "../Popover/Popover.js";
+import { ListInner } from "../List/List.js";
+import { FieldLabel } from "../FieldComponents/FieldLabel/FieldLabel.js";
+import { FieldInputGroup } from "../FieldComponents/FieldInputGroup/FieldInputGroup.js";
+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";
+function SelectRender(props, ref) {
+  const {
+    fullWidth = false,
+    hiddenLabel = false,
+    "data-testid": testId,
+    open,
+    onOpenChange,
+    defaultOpen,
+    items,
+    error,
+    caption,
+    endAddon,
+    required,
+    disabled,
+    children,
+    slotProps,
+    startAddon,
+    selectedKey,
+    placeholder,
+    errorMessage,
+    disabledKeys,
+    onSelectionChange,
+    defaultSelectedKey,
+    renderValue: renderValueProp,
+    ...other
+  } = props;
+  const state = useSelectState({
+    ...other,
+    items,
+    defaultOpen,
+    onOpenChange,
+    isOpen: open,
+    placeholder,
+    selectedKey,
+    disabledKeys,
+    errorMessage,
+    isInvalid: error,
+    onSelectionChange,
+    defaultSelectedKey,
+    isRequired: required,
+    isDisabled: disabled,
+    children
+  });
+  const domRef = useDOMRef(ref);
+  const [opened, { on, off }] = useBoolean(state.isOpen);
+  const {
+    menuProps,
+    valueProps,
+    triggerProps,
+    labelProps: labelPropsCommon
+  } = useSelect(
+    {
+      ...other,
+      placeholder,
+      errorMessage,
+      disabledKeys,
+      isInvalid: error,
+      isRequired: required,
+      isDisabled: disabled
+    },
+    { ...state, isOpen: state.isOpen || opened },
+    domRef
+  );
+  const rootProps = mergeProps(
+    {
+      "data-testid": testId,
+      "data-fullwidth": fullWidth,
+      "data-disabled": disabled,
+      "data-required": required,
+      "data-error": error,
+      className: clsx(s.base, fullWidth && s.fullWidth)
+    },
+    other
+  );
+  const { ref: containerRef, width } = useElementSize();
+  const listProps = mergeProps(
+    { className: s.list, state },
+    slotProps?.list,
+    menuProps
+  );
+  const labelProps = mergeProps(
+    { hidden: hiddenLabel, required },
+    slotProps?.label,
+    labelPropsCommon
+  );
+  const groupProps = mergeProps(
+    {
+      slotProps: {
+        end: { className: s.addon },
+        start: { className: s.addon }
+      },
+      startAddon,
+      endAddon: /* @__PURE__ */ jsxs(Fragment, { children: [
+        endAddon,
+        /* @__PURE__ */ jsx(IconChevronDownS16, {})
+      ] }),
+      error,
+      ref: containerRef
+    },
+    slotProps?.group
+  );
+  const controlProps = mergeProps(
+    {
+      error,
+      disabled,
+      ref: domRef,
+      placeholder
+    },
+    slotProps?.control,
+    valueProps,
+    triggerProps
+  );
+  const captionProps = slotProps?.caption;
+  const errorProps = mergeProps({ error }, slotProps?.errorMessage);
+  const popoverProps = mergeProps(
+    {
+      state,
+      offset: 4,
+      size: width,
+      hideArrow: true,
+      anchorRef: domRef,
+      className: s.popover,
+      placement: "bottom start",
+      type: "listbox",
+      slotProps: {
+        transition: {
+          onEnter: on,
+          onExited: off
+        }
+      }
+    },
+    slotProps?.popover
+  );
+  const renderDefaultValue = (selectedItem) => selectedItem?.rendered;
+  const renderValue = renderValueProp || renderDefaultValue;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { ...rootProps, children: [
+      /* @__PURE__ */ jsx(FieldLabel, { ...labelProps, children: props.label }),
+      /* @__PURE__ */ jsx(
+        HiddenSelect,
+        {
+          state,
+          isDisabled: disabled,
+          triggerRef: domRef,
+          label: props.label,
+          name: props.name
+        }
+      ),
+      /* @__PURE__ */ jsx(FieldInputGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldSelect, { ...controlProps, children: renderValue(state?.selectedItem) }) }),
+      /* @__PURE__ */ jsx(FieldCaption, { ...captionProps, children: captionProps?.children || caption }),
+      /* @__PURE__ */ jsx(FieldError, { ...errorProps, children: errorProps.children || errorMessage })
+    ] }),
+    /* @__PURE__ */ jsx(PopoverInner, { ...popoverProps, children: /* @__PURE__ */ jsx(ListInner, { ...listProps }) })
+  ] });
+}
+const SelectComponent = forwardRef(SelectRender);
+const Select = SelectComponent;
+Select.Item = Item;
+Select.Section = Section;
+Select.ItemText = ListItemText;
+export {
+  Select
+};

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

@@ -0,0 +1,20 @@
+const base = "kbq-select-6d31ad";
+const fullWidth = "kbq-select-fullWidth-1dfc13";
+const addon = "kbq-select-addon-cbc524";
+const popover = "kbq-select-popover-79fc05";
+const list = "kbq-select-list-8ffac0";
+const s = {
+  base,
+  fullWidth,
+  addon,
+  popover,
+  list
+};
+export {
+  addon,
+  base,
+  s as default,
+  fullWidth,
+  list,
+  popover
+};

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

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

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

@@ -0,0 +1,87 @@
+import type { ComponentRef, CSSProperties, ReactElement, ReactNode, Ref } from 'react';
+import type { Node } from '@koobiq/react-primitives';
+import type { FieldErrorProps, FieldLabelProps, FieldSelectProps, FieldCaptionProps, FieldInputGroupProps } from '../FieldComponents';
+import type { ListPropItems, ListPropChildren, ListPropDisabledKeys } from '../List';
+import type { PopoverProps } from '../Popover';
+export type SelectKey = string | number;
+export type SelectPropOnSelectionChange = (selected: SelectKey) => void;
+export type SelectProps<T extends object> = {
+    /** Additional CSS-classes. */
+    className?: string;
+    /** The content to display as the label. */
+    label?: ReactNode;
+    /** The contents of the collection. */
+    children?: ListPropChildren<T>;
+    /** Item objects in the collection. */
+    items?: ListPropItems<T>;
+    /** Addon placed before the children. */
+    startAddon?: ReactNode;
+    /** Addon placed after the children. */
+    endAddon?: ReactNode;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** The text appears in a control until the user puts focus on the field. */
+    placeholder?: string;
+    /**
+     * If `true`, the input will indicate an error.
+     * @default false
+     * */
+    error?: boolean;
+    /** Message for the error state */
+    errorMessage?: string | number;
+    /**
+     * If `true`, the label is hidden. Be sure to add aria-label to the input element.
+     * @default false
+     * */
+    hiddenLabel?: boolean;
+    /** The helper text content. */
+    caption?: string | number;
+    /**
+     * If true, the input will take up the full width of its container.
+     * @default false
+     * */
+    fullWidth?: boolean;
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     * */
+    disabled?: boolean;
+    /**
+     * If `true`, the label is displayed as required and the input element is required.
+     * @default false
+     * */
+    required?: boolean;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    /** Ref to the control */
+    ref?: Ref<HTMLButtonElement>;
+    /** The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. */
+    disabledKeys?: ListPropDisabledKeys<T>;
+    /** The initial selected key in the collection (uncontrolled). */
+    defaultSelectedKey?: SelectKey;
+    /** The currently selected key in the collection (controlled). */
+    selectedKey?: SelectKey | null;
+    /** Handler that is called when the selection changes. */
+    onSelectionChange?: SelectPropOnSelectionChange;
+    /** Sets the open state of the menu. */
+    open?: boolean;
+    /** Sets the default open state of the menu. */
+    defaultOpen?: boolean;
+    /** Method that is called when the open state of the menu changes. */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** A render function for displaying the selected value. */
+    renderValue?: (props: Node<T> | null) => ReactElement;
+    name?: string;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        popover?: PopoverProps;
+        label?: FieldLabelProps;
+        list?: ListPropChildren<T>;
+        control?: FieldSelectProps;
+        caption?: FieldCaptionProps;
+        group?: FieldInputGroupProps;
+        errorMessage?: FieldErrorProps;
+    };
+};
+export type SelectComponentProp = <T extends object>(props: SelectProps<T>) => ReactElement | null;
+export type SelectRef = ComponentRef<'button'>;

package/dist/components/SidePanel/SidePanel.d.ts

@@ -1,2 +1,10 @@
+import { Dialog } from '../Dialog';
 import type { SidePanelProps } from './types';
-export declare const SidePanel: import("react").ForwardRefExoticComponent<SidePanelProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const SidePanelComponent: import("react").ForwardRefExoticComponent<SidePanelProps & import("react").RefAttributes<HTMLDivElement>>;
+type CompoundedComponent = typeof SidePanelComponent & {
+    Header: typeof Dialog.Header;
+    Body: typeof Dialog.Body;
+    Footer: typeof Dialog.Footer;
+};
+export declare const SidePanel: CompoundedComponent;
+export {};

package/dist/components/SidePanel/SidePanel.js

@@ -7,23 +7,24 @@ import { Transition } from "react-transition-group";
 import s from "./SidePanel.module.css.js";
 import { Backdrop } from "../Backdrop/Backdrop.js";
 import { Dialog } from "../Dialog/Dialog.js";
-const SidePanel = forwardRef(
+const SidePanelComponent = forwardRef(
   (props, ref) => {
     const {
-      hideCloseButton = false,
-      position = "left",
       size = "medium",
-      disableExitOnEscapeKeyDown,
-      disableExitOnClickOutside,
-      disableFocusManagement,
-      portalContainer,
-      open: openProp,
-      hideBackdrop,
-      onOpenChange,
-      defaultOpen,
-      children,
+      position = "left",
+      hideCloseButton = false,
       control,
+      children,
       slotProps,
+      defaultOpen,
+      onOpenChange,
+      hideBackdrop,
+      open: openProp,
+      portalContainer,
+      disableFocusManagement,
+      disableExitOnClickOutside,
+      disableExitOnEscapeKeyDown,
+      shouldCloseOnInteractOutside,
       ...other
     } = props;
     const state = useOverlayTriggerState({
@@ -43,6 +44,7 @@ const SidePanel = forwardRef(
     const { modalProps: modalCommonProps, underlayProps } = useModalOverlay(
       {
         ...props,
+        shouldCloseOnInteractOutside,
         isDismissable: !disableExitOnClickOutside,
         isKeyboardDismissDisabled: disableExitOnEscapeKeyDown
       },
@@ -57,10 +59,10 @@ const SidePanel = forwardRef(
     };
     const containerProps = mergeProps(
       {
-        className: clsx(s.base, s[size], s[position]),
+        ref: containerRef,
         "data-size": size,
         "data-position": position,
-        ref: containerRef
+        className: clsx(s.base, s[size], s[position])
       },
       other
     );
@@ -81,15 +83,14 @@ const SidePanel = forwardRef(
     const panelProps = mergeProps(
       modalCommonProps,
       {
-        className: s.panel,
-        ref: modalRef
+        ref: modalRef,
+        className: s.panel
       },
       slotProps?.panel
     );
-    const { isDisabled, onPress, ...otherTriggerProps } = triggerProps;
+    const { isDisabled, ...otherTriggerProps } = triggerProps;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       control?.({
-        onClick: onPress,
         disabled: isDisabled,
         ...otherTriggerProps
       }),
@@ -119,7 +120,11 @@ const SidePanel = forwardRef(
     ] });
   }
 );
-SidePanel.displayName = "SidePanel";
+SidePanelComponent.displayName = "SidePanel";
+const SidePanel = SidePanelComponent;
+SidePanel.Header = Dialog.Header;
+SidePanel.Body = Dialog.Body;
+SidePanel.Footer = Dialog.Footer;
 export {
   SidePanel
 };

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

@@ -1,4 +1,17 @@
 export * from './SidePanel';
 export * from './types';
-export { DialogHeader, DialogFooter, DialogContent } from '../Dialog';
-export { DialogHeader as SidePanelHeader, DialogContent as SidePanelContent, DialogFooter as SidePanelFooter, } from '../Dialog';
+/**
+ * @deprecated
+ * This component has been deprecated, please use `SidePanel.Header` instead.
+ */
+export declare const SidePanelHeader: import("react").ForwardRefExoticComponent<Omit<import("../Dialog").DialogHeaderProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * @deprecated
+ * This component has been deprecated, please use `SidePanel.Body` instead.
+ */
+export declare const SidePanelContent: import("react").ForwardRefExoticComponent<Omit<import("../Dialog").DialogBodyProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * @deprecated
+ * This component has been deprecated, please use `SidePanel.Footer` instead.
+ */
+export declare const SidePanelFooter: import("react").ForwardRefExoticComponent<Omit<import("../Dialog").DialogFooterProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/SidePanel/index.js

@@ -0,0 +1,9 @@
+import { Dialog } from "../Dialog/Dialog.js";
+const SidePanelHeader = Dialog.Header;
+const SidePanelContent = Dialog.Body;
+const SidePanelFooter = Dialog.Footer;
+export {
+  SidePanelContent,
+  SidePanelFooter,
+  SidePanelHeader
+};

package/dist/components/SidePanel/types.d.ts

@@ -65,6 +65,13 @@ export type SidePanelProps = {
      * @default false
      */
     disableFocusManagement?: boolean;
+    /**
+     * When user interacts with the argument element outside of the overlay ref,
+     * return true if onClose should be called. This gives you a chance to filter
+     * out interaction with elements that should not dismiss the overlay.
+     * By default, onClose will always be called on interaction outside the overlay ref.
+     */
+    shouldCloseOnInteractOutside?: (element: Element) => boolean;
     /** The props used for each slot inside. */
     slotProps?: {
         dialog?: DialogProps;

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

@@ -2,7 +2,6 @@ const base = "kbq-skeletonblock-e98401";
 const hasChildren = "kbq-skeletonblock-hasChildren-88ab53";
 const s = {
   base,
-  "skeleton-wave": "kbq-skeletonblock-skeleton-wave-3094a0",
   hasChildren
 };
 export {

package/dist/components/SkeletonTypography/utils.js

@@ -4,10 +4,13 @@ const getRowWidth = (idx, rows = 0) => {
     return "50%";
   }
   switch (idx % 3) {
+    // The first, fourth etc.
     case 0:
       return "95%";
+    // The second, fifth etc.
     case 1:
       return "100%";
+    // The third, sixth etc.
     case 2:
       return "90%";
   }

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

@@ -0,0 +1,24 @@
+import type { ComponentPropsWithRef, CSSProperties, ReactNode } from 'react';
+import type { ItemProps as AriaItemProps } from '@koobiq/react-primitives';
+import type { IconButtonProps } from '../IconButton';
+export type TagProps<T> = AriaItemProps<T> & {
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    /** Icon placed before the children. */
+    icon?: ReactNode;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        root?: ComponentPropsWithRef<'div'>;
+        icon?: ComponentPropsWithRef<'span'>;
+        content?: ComponentPropsWithRef<'span'>;
+        removeIcon?: IconButtonProps;
+    };
+};
+export declare function Tag<T>(_props: TagProps<T>): null;
+export declare namespace Tag {
+    var getCollectionNode: unknown;
+}

package/dist/components/TagGroup/Tag.js

@@ -0,0 +1,10 @@
+"use client";
+import { Item } from "@koobiq/react-primitives";
+const ItemInner = Item;
+function Tag(_props) {
+  return null;
+}
+Tag.getCollectionNode = ItemInner.getCollectionNode;
+export {
+  Tag
+};

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

@@ -0,0 +1,2 @@
+import type { TagGroupComponentProp } from './types';
+export declare const TagGroup: TagGroupComponentProp;

package/dist/components/TagGroup/TagGroup.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useDOMRef, mergeProps, clsx } from "@koobiq/react-core";
+import { useListState, useTagGroup } from "@koobiq/react-primitives";
+import s from "./TagGroup.module.css.js";
+import { TagInner } from "./components/TagInner/TagInner.js";
+function TagGroupRender(props, ref) {
+  const { variant = "theme-fade", style, className, slotProps } = props;
+  const domRef = useDOMRef(ref);
+  const state = useListState(props);
+  const { gridProps } = useTagGroup(props, state, domRef);
+  const rootProps = mergeProps(
+    { className: clsx(s.base, className), style, ref: domRef },
+    gridProps,
+    slotProps?.root
+  );
+  return /* @__PURE__ */ jsx("div", { ...rootProps, children: [...state.collection].map((item) => /* @__PURE__ */ jsx(TagInner, { item, variant, state }, item.key)) });
+}
+const TagGroup = forwardRef(TagGroupRender);
+export {
+  TagGroup
+};

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

@@ -0,0 +1,8 @@
+const base = "kbq-taggroup-20136b";
+const s = {
+  base
+};
+export {
+  base,
+  s as default
+};

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

@@ -0,0 +1,11 @@
+import { type AriaTagProps, type ListState } from '@koobiq/react-primitives';
+import type { TagGroupPropVariant } from '../../index';
+export type TagInnerProps<T> = AriaTagProps<T> & {
+    state: ListState<T>;
+    /**
+     * The variant to use.
+     * @default theme-fade
+     * */
+    variant?: TagGroupPropVariant;
+};
+export declare function TagInner<T>(props: TagInnerProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/TagGroup/components/TagInner/TagInner.js

@@ -0,0 +1,86 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useFocusRing, useHover, mergeProps, clsx, isNotNil } from "@koobiq/react-core";
+import { IconXmarkS16 } from "@koobiq/react-icons";
+import { useLocalizedStringFormatter, useTag } from "@koobiq/react-primitives";
+import { utilClasses } from "../../../../styles/utility.js";
+import intlMessages from "../../intl.json.js";
+import s from "./TagInner.module.css.js";
+import { matchVariantToCloseButton } from "./utils.js";
+import { IconButton } from "../../../IconButton/IconButton.js";
+const textNormalMedium = utilClasses.typography["text-normal-medium"];
+function TagInner(props) {
+  const { item, state, variant = "theme-fade" } = props;
+  const { slotProps, icon, className, style } = item.props;
+  const ref = useRef(null);
+  const stringFormatter = useLocalizedStringFormatter(intlMessages);
+  const { focusProps, isFocusVisible, isFocused } = useFocusRing({
+    within: false
+  });
+  const {
+    rowProps,
+    gridCellProps,
+    removeButtonProps: removeButtonPropsAria,
+    allowsRemoving,
+    isDisabled,
+    isPressed
+  } = useTag(props, state, ref);
+  const { hoverProps, isHovered } = useHover({ isDisabled });
+  const rootProps = mergeProps(
+    {
+      className: clsx(
+        s.base,
+        s[variant],
+        isFocused && s.focused,
+        isHovered && s.hovered,
+        isDisabled && s.disabled,
+        textNormalMedium,
+        className
+      ),
+      style,
+      "data-variant": variant,
+      "data-focused": isFocused,
+      "data-pressed": isPressed,
+      "data-hovered": isHovered,
+      "aria-disabled": isDisabled,
+      "data-disabled": isDisabled,
+      "data-focus-visible": isFocusVisible
+    },
+    rowProps,
+    hoverProps,
+    focusProps,
+    slotProps?.root
+  );
+  const removeButtonProps = mergeProps(
+    {
+      tabIndex: -1,
+      compact: true,
+      disabled: isDisabled,
+      className: s.cancelIcon,
+      variant: matchVariantToCloseButton[variant],
+      "aria-label": stringFormatter.format("close")
+    },
+    removeButtonPropsAria,
+    slotProps?.removeIcon
+  );
+  const contentProps = mergeProps(
+    {
+      className: s.content
+    },
+    slotProps?.content
+  );
+  const iconProps = mergeProps(
+    {
+      className: s.icon
+    },
+    slotProps?.icon
+  );
+  return /* @__PURE__ */ jsx("div", { ref, ...rootProps, children: /* @__PURE__ */ jsxs("div", { ...gridCellProps, children: [
+    isNotNil(icon) && /* @__PURE__ */ jsx("span", { ...iconProps, children: icon }),
+    isNotNil(item.rendered) && /* @__PURE__ */ jsx("span", { ...contentProps, children: item.rendered }),
+    allowsRemoving && /* @__PURE__ */ jsx(IconButton, { size: "l", ...removeButtonProps, children: /* @__PURE__ */ jsx(IconXmarkS16, {}) })
+  ] }) });
+}
+export {
+  TagInner
+};

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

@@ -0,0 +1,30 @@
+const base = "kbq-taginner-f9f19a";
+const content = "kbq-taginner-content-72ca39";
+const icon = "kbq-taginner-icon-df45be";
+const cancelIcon = "kbq-taginner-cancelIcon-8a3dbe";
+const hovered = "kbq-taginner-hovered-abf199";
+const focused = "kbq-taginner-focused-16f44f";
+const disabled = "kbq-taginner-disabled-0c6073";
+const s = {
+  base,
+  content,
+  icon,
+  cancelIcon,
+  "theme-fade": "kbq-taginner-theme-fade-68b99c",
+  "contrast-fade": "kbq-taginner-contrast-fade-39d7a7",
+  "error-fade": "kbq-taginner-error-fade-6d7d03",
+  "warning-fade": "kbq-taginner-warning-fade-9403c7",
+  hovered,
+  focused,
+  disabled
+};
+export {
+  base,
+  cancelIcon,
+  content,
+  s as default,
+  disabled,
+  focused,
+  hovered,
+  icon
+};

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

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

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

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