@clickhouse/click-ui 0.6.1 → 0.6.2-rc2

package/dist/types/components/Assets/Flags/France.d.ts

@@ -0,0 +1,4 @@
+import { SVGAssetProps } from '../../../types';
+import * as React from 'react';
+declare const France: (props: SVGAssetProps) => React.ReactElement;
+export default France;

package/dist/types/components/Assets/Flags/system/types.d.ts

@@ -1,7 +1,7 @@
 import { SVGAttributes } from 'react';
 import { AssetSize } from '../../../../types';
 import { ThemeName } from '../../../../theme/theme.types';
-export type FlagName = 'australia' | 'brazil' | 'canada' | 'european-union' | 'germany' | 'great-britain' | 'hong-kong' | 'india' | 'indonesia' | 'ireland' | 'israel' | 'japan' | 'malaysia' | 'mexico' | 'netherlands' | 'singapore' | 'south-africa' | 'south-korea' | 'sweden' | 'switzerland' | 'taiwan' | 'united-arab-emirates' | 'united-kingdom' | 'united-states';
+export type FlagName = 'australia' | 'brazil' | 'canada' | 'european-union' | 'france' | 'germany' | 'great-britain' | 'hong-kong' | 'india' | 'indonesia' | 'ireland' | 'israel' | 'japan' | 'malaysia' | 'mexico' | 'netherlands' | 'singapore' | 'south-africa' | 'south-korea' | 'sweden' | 'switzerland' | 'taiwan' | 'united-arab-emirates' | 'united-kingdom' | 'united-states';
 export interface FlagProps extends SVGAttributes<SVGElement> {
     name: FlagName;
     theme?: ThemeName;

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

@@ -50,6 +50,7 @@ interface Props extends PopoverProps, Omit<DivProps, 'onChange' | 'dir' | 'onSel
     placeholder?: string;
     onOpenChange?: (open: boolean) => void;
     label?: ReactNode;
+    container?: HTMLElement | null;
     error?: ReactNode;
     disabled?: boolean;
     dir?: 'start' | 'end';
@@ -59,7 +60,7 @@ interface Props extends PopoverProps, Omit<DivProps, 'onChange' | 'dir' | 'onSel
 export type AutoCompleteProps = (SelectOptionType & Props) | (SelectChildrenType & Props);
 export declare const SelectPopoverRoot: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<PopoverProps, never>> & string & Omit<import('react').FC<PopoverProps>, keyof import('react').Component<any, {}, any>>;
 export declare const AutoComplete: {
-    ({ onSelect: onSelectProp, options, children, onOpenChange: onOpenChangeProp, disabled, value, placeholder, ...props }: AutoCompleteProps): import("react/jsx-runtime").JSX.Element;
+    ({ onSelect: onSelectProp, options, children, onOpenChange: onOpenChangeProp, disabled, value, placeholder, container, ...props }: AutoCompleteProps): import("react/jsx-runtime").JSX.Element;
     Group: import('react').ForwardRefExoticComponent<SelectGroupProps & import('react').RefAttributes<HTMLDivElement>>;
     Item: import('react').ForwardRefExoticComponent<SelectItemProps & import('react').RefAttributes<HTMLDivElement>>;
 };

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

@@ -1,10 +1,14 @@
 import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+import { IconName } from '../Icon';
 export type ButtonGroupType = 'default' | 'borderless';
 export type SelectionValue = string | Set<string>;
+/** Props for each button in the group. When `iconOnly` is true, set `aria-label` on each option. */
 export interface ButtonGroupElementProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
     value: string;
     label?: ReactNode;
+    icon?: IconName;
 }
+/** When `iconOnly` is true, provide `aria-label` on the group and each option. */
 export interface ButtonGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
     options: Array<ButtonGroupElementProps>;
     selected?: SelectionValue;
@@ -12,5 +16,6 @@ export interface ButtonGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, '
     onClick?: (value: string, selected: SelectionValue) => void;
     fillWidth?: boolean;
     type?: ButtonGroupType;
+    iconOnly?: boolean;
     multiple?: boolean;
 }

package/dist/types/components/ButtonGroup/index.d.ts

@@ -1,2 +1,2 @@
 export { ButtonGroup } from './ButtonGroup';
-export type { ButtonGroupElementProps, ButtonGroupProps, SelectionValue, } from './ButtonGroup.types';
+export type { ButtonGroupElementProps, ButtonGroupProps, ButtonGroupType, SelectionValue, } from './ButtonGroup.types';

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

@@ -10,7 +10,7 @@ export declare const ContextMenu: {
         displayName: string;
     };
     Content: {
-        ({ sub, children, showArrow, side, align, ...props }: ContextMenuContentProps | ContextMenuSubContentProps): import("react/jsx-runtime").JSX.Element;
+        ({ sub, children, container, showArrow, side, align, ...props }: ContextMenuContentProps | ContextMenuSubContentProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Group: {
@@ -38,8 +38,10 @@ type DeprecatedFields = {
 };
 type ContextMenuContentProps = RightMenu.ContextMenuContentProps & {
     sub?: true;
+    container?: HTMLElement | null;
 } & ArrowProps & DeprecatedFields;
 type ContextMenuSubContentProps = RightMenu.ContextMenuSubContentProps & {
     sub?: never;
+    container?: HTMLElement | null;
 } & ArrowProps & DeprecatedFields;
 export default ContextMenu;

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

@@ -1,6 +1,7 @@
 import { Timezone } from './utils';
 export interface DatePickerProps {
     allowOnlyDatesList?: Array<Date>;
+    container?: HTMLElement | null;
     date?: Date;
     disabled?: boolean;
     futureDatesDisabled?: boolean;
@@ -9,4 +10,4 @@ export interface DatePickerProps {
     responsivePositioning?: boolean;
     timezone?: Timezone;
 }
-export declare const DatePicker: ({ allowOnlyDatesList, date, disabled, futureDatesDisabled, onSelectDate, placeholder, responsivePositioning, timezone, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DatePicker: ({ allowOnlyDatesList, container, date, disabled, futureDatesDisabled, onSelectDate, placeholder, responsivePositioning, timezone, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -3,7 +3,7 @@ import { DialogContentProps, DialogProps, DialogTriggerProps } from './Dialog.ty
 export declare const Dialog: {
     ({ children, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;
     Trigger: {
-        ({ children, asChild, ...props }: DialogTriggerProps): import("react/jsx-runtime").JSX.Element;
+        ({ children, asChild, className, ...props }: DialogTriggerProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Close: {
@@ -11,7 +11,7 @@ export declare const Dialog: {
         displayName: string;
     };
     Content: {
-        ({ title, description, children, showClose, onClose, forceMount, container, showOverlay, reducePadding, ...props }: DialogContentProps): import("react/jsx-runtime").JSX.Element;
+        ({ title, description, children, showClose, onClose, forceMount, container, showOverlay, reducePadding, className, ...props }: DialogContentProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
 };

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

@@ -9,7 +9,7 @@ export declare const Dropdown: {
         displayName: string;
     };
     Content: {
-        ({ sub, children, showArrow, responsivePositioning, ...props }: DropdownContentProps | DropdownSubContentProps): import("react/jsx-runtime").JSX.Element;
+        ({ sub, children, container, showArrow, responsivePositioning, ...props }: DropdownContentProps | DropdownSubContentProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Group: {
@@ -40,10 +40,12 @@ export type ArrowProps = {
 };
 interface StyledDropdownContentProps extends DropdownMenu.DropdownMenuContentProps {
     children?: ReactNode;
+    container?: HTMLElement | null;
     responsivePositioning?: boolean;
 }
 interface StyledDropdownSubContentProps extends DropdownMenu.DropdownMenuSubContentProps {
     children?: ReactNode;
+    container?: HTMLElement | null;
     responsivePositioning?: boolean;
 }
 type DropdownContentProps = StyledDropdownContentProps & SubDropdownProps & ArrowProps;

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

@@ -9,7 +9,7 @@ export declare const Flyout: {
         displayName: string;
     };
     Content: {
-        ({ showOverlay, children, container, strategy, size, type, closeOnInteractOutside, width, align, onInteractOutside, ...props }: FlyoutContentProps): import("react/jsx-runtime").JSX.Element;
+        ({ showOverlay, children, container, strategy, size, type, closeOnInteractOutside, width, align, hasShadow, onInteractOutside, ...props }: FlyoutContentProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Element: {

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

@@ -20,6 +20,8 @@ export interface FlyoutContentProps extends HTMLAttributes<HTMLDivElement> {
     closeOnInteractOutside?: boolean;
     width?: string;
     align?: FlyoutAlignmentType;
+    /** Whether to show a shadow on the flyout */
+    hasShadow?: boolean;
     onInteractOutside?: (event: CustomEvent) => void;
     onEscapeKeyDown?: (event: KeyboardEvent) => void;
     onPointerDownOutside?: (event: CustomEvent) => void;

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

@@ -25,9 +25,9 @@ interface MultiAccordionCommonProps {
 }
 export type MultiAccordionProps = MultiAccordionCommonProps & (Omit<RadixAccordion.AccordionMultipleProps, 'children'> | Omit<RadixAccordion.AccordionSingleProps, 'children'>);
 export declare const MultiAccordion: {
-    ({ size, children, fillWidth, showCheck, showBorder, gap, markAsCompleted, ...delegated }: MultiAccordionProps): import("react/jsx-runtime").JSX.Element;
+    ({ size, children, fillWidth, showCheck, showBorder, gap, markAsCompleted, className, ...delegated }: MultiAccordionProps): import("react/jsx-runtime").JSX.Element;
     Item: {
-        ({ value, title, color, icon, iconSize, gap, children, isCompleted, ...props }: MultiAccordionItemProps): ReactElement;
+        ({ value, title, color, icon, iconSize, gap, children, isCompleted, className, ...props }: MultiAccordionItemProps): ReactElement;
         displayName: string;
     };
 };

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

@@ -2,26 +2,16 @@ import { TabsProps } from './Tabs.types';
 import * as RadixTabs from '@radix-ui/react-tabs';
 declare const Tabs: {
     ({ defaultValue, children, ariaLabel, onValueChange, ...delegated }: TabsProps): import("react/jsx-runtime").JSX.Element;
-    TriggersList: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<RadixTabs.TabsListProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
-    }, never>> & string & Omit<import('react').ForwardRefExoticComponent<RadixTabs.TabsListProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
-    Trigger: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<RadixTabs.TabsTriggerProps & import('react').RefAttributes<HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLButtonElement> | null | undefined;
-    }, never>> & string & Omit<import('react').ForwardRefExoticComponent<RadixTabs.TabsTriggerProps & import('react').RefAttributes<HTMLButtonElement>>, keyof import('react').Component<any, {}, any>>;
-    Content: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<RadixTabs.TabsContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
-    }, never>> & string & Omit<import('react').ForwardRefExoticComponent<RadixTabs.TabsContentProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
+    TriggersList: import('react').ForwardRefExoticComponent<Omit<RadixTabs.TabsListProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Trigger: import('react').ForwardRefExoticComponent<Omit<RadixTabs.TabsTriggerProps & import('react').RefAttributes<HTMLButtonElement>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+    Content: import('react').ForwardRefExoticComponent<Omit<RadixTabs.TabsContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+};
+declare const FullWidthTabs: {
+    ({ className, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
+    Trigger: import('react').ForwardRefExoticComponent<Omit<RadixTabs.TabsTriggerProps & import('react').RefAttributes<HTMLButtonElement>, "ref"> & {
+        width?: string;
+    } & import('react').RefAttributes<HTMLButtonElement>>;
+    TriggersList: import('react').ForwardRefExoticComponent<Omit<RadixTabs.TabsListProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Content: import('react').ForwardRefExoticComponent<Omit<RadixTabs.TabsContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 };
-declare const FullWidthTabs: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<TabsProps, never>> & string & Omit<{
-    ({ defaultValue, children, ariaLabel, onValueChange, ...delegated }: TabsProps): import("react/jsx-runtime").JSX.Element;
-    TriggersList: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<RadixTabs.TabsListProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
-    }, never>> & string & Omit<import('react').ForwardRefExoticComponent<RadixTabs.TabsListProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
-    Trigger: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<RadixTabs.TabsTriggerProps & import('react').RefAttributes<HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLButtonElement> | null | undefined;
-    }, never>> & string & Omit<import('react').ForwardRefExoticComponent<RadixTabs.TabsTriggerProps & import('react').RefAttributes<HTMLButtonElement>>, keyof import('react').Component<any, {}, any>>;
-    Content: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<RadixTabs.TabsContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
-    }, never>> & string & Omit<import('react').ForwardRefExoticComponent<RadixTabs.TabsContentProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
-}, keyof import('react').Component<any, {}, any>>;
 export { Tabs, FullWidthTabs };

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

@@ -1,6 +1,5 @@
 import { HTMLAttributes } from 'react';
-import { TooltipProps } from './Tooltip.types';
-import * as RadixTooltip from '@radix-ui/react-tooltip';
+import { TooltipContentProps, TooltipProps } from './Tooltip.types';
 export declare const Tooltip: {
     ({ children, open, disabled, ...props }: TooltipProps): import("react/jsx-runtime").JSX.Element;
     Trigger: {
@@ -8,14 +7,7 @@ export declare const Tooltip: {
         displayName: string;
     };
     Content: {
-        ({ showArrow, children, sideOffset, maxWidth, ...props }: TooltipContentProps): import("react/jsx-runtime").JSX.Element;
+        ({ showArrow, children, sideOffset, maxWidth, container, ...props }: TooltipContentProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
 };
-interface TooltipContentProps extends RadixTooltip.TooltipContentProps {
-    /** Whether to show an arrow pointing to the trigger element */
-    showArrow?: boolean;
-    /** Maximum width of the tooltip content */
-    maxWidth?: string;
-}
-export {};

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

@@ -5,4 +5,5 @@ export interface TooltipProps extends RadixTooltip.TooltipProps {
 export interface TooltipContentProps extends RadixTooltip.TooltipContentProps {
     showArrow?: boolean;
     maxWidth?: string;
+    container?: HTMLElement | null;
 }

package/dist/types/index.d.ts

@@ -131,7 +131,8 @@ export { Title } from './components/Title';
 export type { TitleProps } from './components/Title';
 export { VerticalStepper } from './components/VerticalStepper';
 export type { VerticalStepperProps, VerticalStepProps, } from './components/VerticalStepper';
-export { ClickUIProvider, ThemeProvider } from './providers';
+export { ClickUIProvider, PortalProvider, ThemeProvider, usePortalContainer, useResolvedPortalContainer, } from './providers';
+export type { PortalContainer, PortalProviderProps } from './providers';
 export { THEMES, themes } from './theme/theme.core';
 export type { ThemeName, Theme } from './theme/theme.types';
 export { isValidThemeName, getFallbackThemeName, getDefaultThemeName, getAvailableThemeNames, } from './theme/theme.utils';

package/dist/types/providers/PortalContext.d.ts

@@ -0,0 +1,4 @@
+export type PortalContainer = HTMLElement | null;
+export declare const PortalContainerContext: import('react').Context<PortalContainer>;
+export declare const usePortalContainer: () => PortalContainer;
+export declare const useResolvedPortalContainer: (container?: PortalContainer) => PortalContainer;

package/dist/types/providers/PortalProvider.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement, ReactNode } from 'react';
+import { PortalContainer } from './PortalContext';
+export interface PortalProviderProps {
+    children: ReactNode;
+    container?: PortalContainer;
+}
+export declare const PortalProvider: ({ children, container, }: PortalProviderProps) => ReactElement;

package/dist/types/providers/index.d.ts

@@ -1,2 +1,6 @@
 export { ClickUIProvider } from './ClickUIProvider';
+export { PortalProvider } from './PortalProvider';
+export { usePortalContainer, useResolvedPortalContainer } from './PortalContext';
+export type { PortalContainer } from './PortalContext';
+export type { PortalProviderProps } from './PortalProvider';
 export { ThemeProvider } from './ThemeProvider';

package/dist/types/theme/theme.core.d.ts

@@ -772,6 +772,21 @@ export declare const themes: {
                                 x: string;
                             };
                         };
+                        icon: {
+                            default: {
+                                y: string;
+                                x: string;
+                            };
+                            borderless: {
+                                y: string;
+                                x: string;
+                            };
+                        };
+                    };
+                    icon: {
+                        size: {
+                            all: string;
+                        };
                     };
                     color: {
                         background: {
@@ -4589,6 +4604,21 @@ export declare const themes: {
                                 x: string;
                             };
                         };
+                        icon: {
+                            default: {
+                                y: string;
+                                x: string;
+                            };
+                            borderless: {
+                                y: string;
+                                x: string;
+                            };
+                        };
+                    };
+                    icon: {
+                        size: {
+                            all: string;
+                        };
                     };
                     color: {
                         background: {

package/dist/types/theme/tokens/variables.dark.d.ts

@@ -769,6 +769,21 @@ declare const theme: {
                             x: string;
                         };
                     };
+                    icon: {
+                        default: {
+                            y: string;
+                            x: string;
+                        };
+                        borderless: {
+                            y: string;
+                            x: string;
+                        };
+                    };
+                };
+                icon: {
+                    size: {
+                        all: string;
+                    };
                 };
                 color: {
                     background: {

package/dist/types/theme/tokens/variables.light.d.ts

@@ -769,6 +769,21 @@ declare const theme: {
                             x: string;
                         };
                     };
+                    icon: {
+                        default: {
+                            y: string;
+                            x: string;
+                        };
+                        borderless: {
+                            y: string;
+                            x: string;
+                        };
+                    };
+                };
+                icon: {
+                    size: {
+                        all: string;
+                    };
                 };
                 color: {
                     background: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "v0.6.1",
+  "version": "v0.6.2-rc2",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",
@@ -399,7 +399,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@h6s/calendar": "2.0.1",
+    "@h6s/calendar": "2.2.0",
     "@radix-ui/react-accordion": "1.2.12",
     "@radix-ui/react-avatar": "1.1.1",
     "@radix-ui/react-checkbox": "1.1.2",
@@ -452,7 +452,6 @@
     "@vitejs/plugin-react": "^5.1.2",
     "babel-plugin-styled-components": "^2.1.4",
     "chromatic": "^13.3.4",
-    "date-fns": "4.1.0",
     "eslint": "^9",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.32.0",