@officesdk/design 0.2.0 → 0.2.1

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

@@ -0,0 +1,1843 @@
+import React$1 from 'react';
+import { TooltipProps as TooltipProps$1 } from 'rc-tooltip/lib/Tooltip';
+import { DropdownProps as DropdownProps$1 } from 'rc-dropdown';
+import * as styled_components from 'styled-components';
+import { ThemedStyledInterface } from 'styled-components';
+import { DialogProps } from 'rc-dialog';
+import { Theme } from '@officesdk/design/theme';
+
+interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Button variant type
+     * - 'icon': Square icon button without padding, size based on iconSize
+     */
+    variant?: 'solid' | 'outlined' | 'text' | 'icon';
+    /**
+     * Button color type
+     * - 'status' is only available for 'text' variant
+     */
+    colorType?: 'default' | 'guidance' | 'alert' | 'status';
+    /**
+     * Button size
+     */
+    size?: 'small' | 'medium' | 'large' | 'extraLarge';
+    /**
+     * Whether the button is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the button is in loading state
+     */
+    loading?: boolean;
+    /**
+     * Whether the button should take full width of its container
+     */
+    fullWidth?: boolean;
+    /**
+     * Icon to display with the button text
+     * - If string: treated as icon src URL, rendered using Icon component
+     * - If ReactNode: rendered directly
+     */
+    icon?: string | React$1.ReactNode;
+    /**
+     * Icon placement relative to text (only for text buttons)
+     */
+    iconPlacement?: 'before' | 'after';
+    /**
+     * Whether the icon button should have a border (only for variant='icon')
+     */
+    iconBordered?: boolean;
+}
+/**
+ * Button Component
+ *
+ * @example
+ * // Basic button
+ * <Button>button</Button>
+ *
+ * @example
+ * // Button with icon (string URL)
+ * <Button icon="https://example.com/icon.svg" iconPlacement="before">button</Button>
+ *
+ * @example
+ * // Button with icon (ReactNode)
+ * <Button icon={<CustomIcon />} iconPlacement="after">button</Button>
+ *
+ * @example
+ * // Icon variant button (square, no padding)
+ * <Button variant="icon" icon={<CustomIcon />} iconBordered />
+ *
+ * @example
+ * // Icon variant button without border
+ * <Button variant="icon" icon={<CustomIcon />} />
+ */
+declare const Button: React$1.FC<ButtonProps>;
+
+interface SpinButtonProps {
+    /**
+     * Current value
+     */
+    value?: number;
+    /**
+     * Default value
+     */
+    defaultValue?: number;
+    /**
+     * Minimum value
+     */
+    min?: number;
+    /**
+     * Maximum value
+     */
+    max?: number;
+    /**
+     * Step increment/decrement
+     */
+    step?: number;
+    /**
+     * Size variant
+     */
+    size?: 'small' | 'large';
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether to show alert state (red border)
+     */
+    alert?: boolean;
+    /**
+     * Whether to show the slider
+     */
+    showSlider?: boolean;
+    /**
+     * Number of decimal places
+     */
+    precision?: number;
+    /**
+     * Format the display value
+     */
+    formatter?: (value: number) => string;
+    /**
+     * Parse the input value
+     */
+    parser?: (displayValue: string) => number;
+    /**
+     * Callback when value changes
+     */
+    onChange?: (value: number | null) => void;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Custom style
+     */
+    style?: React$1.CSSProperties;
+}
+/**
+ * SpinButton Component - Spin Button
+ *
+ * A numeric input with increment/decrement buttons
+ *
+ * @example
+ * <SpinButton value={35} onChange={(val) => console.log(val)} />
+ */
+declare const SpinButton: React$1.FC<SpinButtonProps>;
+
+interface SwitchProps {
+    /**
+     * Whether the switch is checked
+     */
+    checked?: boolean;
+    /**
+     * Default checked state
+     */
+    defaultChecked?: boolean;
+    /**
+     * Size variant
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Whether the switch is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Callback when checked state changes
+     */
+    onChange?: (checked: boolean) => void;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Custom style
+     */
+    style?: React$1.CSSProperties;
+}
+/**
+ * Switch Component
+ *
+ * A toggle switch for binary states
+ *
+ * @example
+ * <Switch checked={true} onChange={(checked) => console.log(checked)} />
+ */
+declare const Switch: React$1.FC<SwitchProps>;
+
+interface RadioProps {
+    /**
+     * Whether the radio is checked
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * Default checked state
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * Whether the radio is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Value of the radio
+     */
+    value?: string | number;
+    /**
+     * Name attribute for grouping radios
+     */
+    name?: string;
+    /**
+     * ID attribute for the radio (used with htmlFor in labels)
+     */
+    id?: string;
+    /**
+     * Callback when checked state changes
+     */
+    onChange?: (event: React$1.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * prevent default click event, if true, change event will not be triggered
+     * @default false
+     */
+    clickPreventDefault?: boolean;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Custom style
+     */
+    style?: React$1.CSSProperties;
+}
+/**
+ * Radio Component
+ *
+ * A radio button for selecting one option from a group
+ *
+ * @example
+ * <Radio checked={true} onChange={(e) => console.log(e.target.checked)} />
+ */
+declare const Radio: React$1.FC<RadioProps>;
+
+interface CheckboxProps {
+    /**
+     * Whether the checkbox is checked
+     */
+    checked?: boolean;
+    /**
+     * Default checked state
+     */
+    defaultChecked?: boolean;
+    /**
+     * Whether the checkbox is in indeterminate state
+     */
+    indeterminate?: boolean;
+    /**
+     * Whether the checkbox is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Value of the checkbox
+     */
+    value?: string | number;
+    /**
+     * Name attribute for the checkbox
+     */
+    name?: string;
+    /**
+     * ID attribute for the checkbox (used with htmlFor in labels)
+     */
+    id?: string;
+    /**
+     * Callback when checked state changes
+     */
+    onChange?: (event: React$1.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * prevent default click event, if true, change event will not be triggered
+     * @default false
+     */
+    clickPreventDefault?: boolean;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Custom style
+     */
+    style?: React$1.CSSProperties;
+}
+/**
+ * Checkbox Component
+ *
+ * A checkbox for selecting multiple options
+ *
+ * @example
+ * <Checkbox checked={true} onChange={(e) => console.log(e.target.checked)} />
+ *
+ * @example
+ * // Indeterminate state
+ * <Checkbox indeterminate={true} />
+ */
+declare const Checkbox: React$1.FC<CheckboxProps>;
+
+interface SliderProps {
+    /**
+     * Current value (0-100)
+     */
+    value?: number;
+    /**
+     * Default value
+     */
+    defaultValue?: number;
+    /**
+     * Minimum value
+     */
+    min?: number;
+    /**
+     * Maximum value
+     */
+    max?: number;
+    /**
+     * Step increment
+     */
+    step?: number;
+    /**
+     * Whether the slider is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Callback when value changes
+     */
+    onChange?: (value: number) => void;
+    /**
+     * Callback when dragging starts
+     */
+    onDragStart?: () => void;
+    /**
+     * Callback when dragging ends
+     */
+    onDragEnd?: () => void;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Custom style
+     */
+    style?: React$1.CSSProperties;
+}
+/**
+ * Slider Component
+ *
+ * A slider for selecting a value from a range
+ *
+ * @example
+ * <Slider value={35} onChange={(val) => console.log(val)} />
+ */
+declare const Slider: React$1.FC<SliderProps>;
+
+type InputSize = 'mini' | 'small' | 'medium' | 'large';
+type LineType = 'outlined' | 'underlined' | 'borderless';
+interface InputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
+    /**
+     * Input line type
+     */
+    lineType?: LineType;
+    /**
+     * Input size
+     */
+    size?: InputSize;
+    /**
+     * Whether the input has an error state
+     */
+    error?: boolean;
+    /**
+     * Whether the input is in readonly mode
+     */
+    readOnly?: boolean;
+    /**
+     * Node to display before the input
+     */
+    prefixNode?: React$1.ReactNode;
+    /**
+     * Node to display after the input
+     */
+    suffixNode?: React$1.ReactNode;
+    /**
+     * Whether to show clear button when input has value
+     */
+    clearable?: boolean;
+    /**
+     * Clear button click handler
+     */
+    onClear?: () => void;
+    /**
+     * Custom clear icon
+     */
+    clearIcon?: React$1.ReactNode;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Custom inline styles
+     */
+    style?: React$1.CSSProperties;
+    /**
+     * Custom input className
+     */
+    inputClassName?: string;
+    /**
+     * Custom input styles
+     */
+    inputStyle?: React$1.CSSProperties;
+}
+/**
+ * Input Component
+ *
+ * @example
+ * // Basic outlined input (default)
+ * <Input placeholder="Enter text" />
+ *
+ * @example
+ * // Underlined input
+ * <Input lineType="underlined" placeholder="Enter text" />
+ *
+ * @example
+ * // Input with prefix and suffix
+ * <Input prefixNode={<SearchIcon />} suffixNode={<Icon />} />
+ *
+ * @example
+ * // Input with clearable
+ * <Input clearable onClear={() => console.log('cleared')} />
+ *
+ * @example
+ * // Input with error state
+ * <Input error placeholder="Enter text" />
+ */
+declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;
+
+interface SearchInputProps extends Omit<InputProps, 'prefixNode' | 'suffixNode'> {
+    /**
+     * Line type (outlined or underlined)
+     */
+    lineType?: 'outlined' | 'underlined';
+    /**
+     * SearchInput size
+     */
+    size?: 'mini' | 'small' | 'medium' | 'large';
+    /**
+     * Whether to show the clear button when input has value
+     */
+    clearable?: boolean;
+    /**
+     * Callback when clear button is clicked
+     */
+    onClear?: () => void;
+    /**
+     * Custom search icon (URL string or React node)
+     */
+    searchIcon?: string | React$1.ReactNode;
+}
+/**
+ * SearchInput Component
+ *
+ * A wrapper around Input component with search icon and clear functionality
+ *
+ * @example
+ * // Basic search input
+ * <SearchInput placeholder="Search..." />
+ *
+ * @example
+ * // Underlined search input
+ * <SearchInput lineType="underlined" placeholder="Search..." />
+ *
+ * @example
+ * // Search input without clearable
+ * <SearchInput clearable={false} placeholder="Search..." />
+ *
+ * @example
+ * // Different sizes
+ * <SearchInput size="small" placeholder="Search..." />
+ * <SearchInput size="medium" placeholder="Search..." />
+ * <SearchInput size="large" placeholder="Search..." />
+ */
+declare const SearchInput: React$1.ForwardRefExoticComponent<SearchInputProps & React$1.RefAttributes<HTMLInputElement>>;
+
+/**
+ * UnderlinedInput Component
+ *
+ * @deprecated Use <Input lineType="underlined" /> instead
+ *
+ * This component is a simple alias for Input with lineType="underlined"
+ * and will be removed in a future version.
+ *
+ * @example
+ * // Old way (deprecated)
+ * <UnderlinedInput placeholder="Search..." />
+ *
+ * // New way (recommended)
+ * <Input lineType="underlined" placeholder="Search..." />
+ */
+declare const UnderlinedInput: React$1.ForwardRefExoticComponent<Omit<InputProps, "lineType"> & React$1.RefAttributes<HTMLInputElement>>;
+
+interface NumberInputProps {
+    /**
+     * Current value
+     */
+    value?: number;
+    /**
+     * Default value
+     */
+    defaultValue?: number;
+    /**
+     * Minimum value
+     */
+    min?: number;
+    /**
+     * Maximum value
+     */
+    max?: number;
+    /**
+     * Step increment/decrement
+     */
+    step?: number;
+    /**
+     * Size variant
+     */
+    size?: 'small' | 'large';
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether to show alert state (red border)
+     */
+    alert?: boolean;
+    /**
+     * Number of decimal places
+     */
+    precision?: number;
+    /**
+     * Format the display value
+     */
+    formatter?: (value: number) => string;
+    /**
+     * Parse the input value
+     */
+    parser?: (displayValue: string) => number;
+    /**
+     * Unit text to display after the input
+     */
+    unit?: string;
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Callback when value changes
+     * @param fixedValue - The clamped value within min/max range (can be undefined if empty)
+     * @param rawValue - The original input value before clamping (can be undefined if empty)
+     */
+    onChange?: (fixedValue: number | undefined, rawValue: number | undefined) => void;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Custom style
+     */
+    style?: React$1.CSSProperties;
+}
+/**
+ * NumberInput Component
+ *
+ * A numeric input with increment/decrement buttons
+ *
+ * @example
+ * <NumberInput value={35} onChange={(val) => console.log(val)} />
+ */
+declare const NumberInput: React$1.FC<NumberInputProps>;
+
+interface IconSize {
+    width: string;
+    height: string;
+}
+interface IconProps {
+    /**
+     * Icon name from registry (requires IconProvider)
+     */
+    name?: string;
+    /**
+     * Image URL for icon (e.g., PNG, JPG, or external SVG)
+     */
+    src?: string;
+    /**
+     * Custom icon element (takes precedence over name and src)
+     */
+    children?: React$1.ReactNode;
+    /**
+     * Size of the icon (px or custom width/height)
+     */
+    size?: number | string | IconSize;
+    /**
+     * Color of the icon (only works with SVG icons, not image src)
+     */
+    color?: string;
+    /**
+     * Alt text for image icons
+     */
+    alt?: string;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Custom style
+     */
+    style?: React$1.CSSProperties;
+    /**
+     * Click handler
+     */
+    onClick?: (e: React$1.MouseEvent) => void;
+}
+/**
+ * Icon Component
+ *
+ * Renders icons from multiple sources with priority: children > src > name
+ *
+ * @example
+ * // Using with IconProvider and registry
+ * <Icon name="close" size={16} />
+ *
+ * @example
+ * // Using with image URL
+ * <Icon src="/icons/custom-icon.svg" size={24} />
+ *
+ * @example
+ * // Using with custom icon element
+ * <Icon><CustomSvg /></Icon>
+ *
+ * @example
+ * // Using with imported icon component
+ * import { CloseIcon } from '@officesdk/design/icons';
+ * <Icon><CloseIcon /></Icon>
+ */
+declare const Icon: React$1.FC<IconProps>;
+
+type IconComponent = React$1.ComponentType<React$1.SVGProps<SVGSVGElement>>;
+type IconRegistry = Record<string, IconComponent>;
+interface IconProviderProps {
+    /**
+     * Icon registry mapping icon names to React components
+     * Import from @officesdk/design/icons
+     */
+    icons: IconRegistry;
+    /**
+     * Children components
+     */
+    children: React$1.ReactNode;
+}
+/**
+ * IconProvider Component
+ *
+ * Provides icon registry to child components via Context
+ *
+ * @example
+ * import { IconProvider } from '@officesdk/design';
+ * import { iconRegistry } from '@officesdk/design/icons';
+ *
+ * <IconProvider icons={iconRegistry}>
+ *   <App />
+ * </IconProvider>
+ */
+declare const IconProvider: React$1.FC<IconProviderProps>;
+/**
+ * Hook to access icon registry from context
+ */
+declare const useIconRegistry: () => IconRegistry | null;
+
+type ToastVariant = 'success' | 'info' | 'error' | 'warn' | 'loading' | 'critical';
+interface ToastProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'children' | 'onClick'> {
+    /**
+     * Toast variant type
+     */
+    variant?: ToastVariant;
+    /**
+     * Toast message content (main text)
+     */
+    message: React$1.ReactNode;
+    /**
+     * Optional description text (shows below message in multiline mode)
+     */
+    description?: string;
+    /**
+     * Main action button text (blue color)
+     */
+    mainButtonText?: string;
+    /**
+     * Main action button click handler
+     */
+    onMainButtonClick?: () => void;
+    /**
+     * Secondary action button text (gray color)
+     */
+    secondaryButtonText?: string;
+    /**
+     * Secondary action button click handler
+     */
+    onSecondaryButtonClick?: () => void;
+    /**
+     * Whether to show close button
+     */
+    closable?: boolean;
+    /**
+     * Close button click handler
+     */
+    onClose?: () => void;
+    /**
+     * Auto close duration in milliseconds (0 to disable)
+     */
+    duration?: number;
+    /**
+     * Custom icon (overrides default variant icon)
+     */
+    icon?: React$1.ReactNode;
+    /**
+     * Whether to show icon
+     */
+    showIcon?: boolean;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Custom style
+     */
+    style?: React$1.CSSProperties;
+}
+/**
+ * Toast Component
+ *
+ * A notification message component with different variants
+ *
+ * @example
+ * // Single line toast
+ * <Toast variant="success" message="信息反馈" />
+ *
+ * @example
+ * // Toast with buttons
+ * <Toast
+ *   variant="info"
+ *   message="信息反馈"
+ *   mainButtonText="按钮名称"
+ *   onMainButtonClick={() => console.log('Main clicked')}
+ *   secondaryButtonText="按钮名称"
+ *   onSecondaryButtonClick={() => console.log('Secondary clicked')}
+ *   closable
+ * />
+ *
+ * @example
+ * // Multi-line toast with description
+ * <Toast
+ *   variant="success"
+ *   message="信息反馈"
+ *   description="信息具体说明"
+ *   mainButtonText="按钮名称"
+ *   closable
+ * />
+ */
+declare const Toast: React$1.FC<ToastProps>;
+
+interface ToastContextValue {
+    showToast: (props: Omit<ToastProps, 'onClose'>) => string;
+    hideToast: (id: string) => void;
+    success: (message: React$1.ReactNode, options?: Partial<ToastProps>) => string;
+    info: (message: React$1.ReactNode, options?: Partial<ToastProps>) => string;
+    error: (message: React$1.ReactNode, options?: Partial<ToastProps>) => string;
+    warn: (message: React$1.ReactNode, options?: Partial<ToastProps>) => string;
+    loading: (message: React$1.ReactNode, options?: Partial<ToastProps>) => string;
+}
+interface ToastContainerProps {
+    placement?: 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
+    /**
+     * Maximum number of toasts to show at once
+     */
+    maxCount?: number;
+    /**
+     * Default duration for auto-close (ms)
+     */
+    defaultDuration?: number;
+    /**
+     * Children components
+     */
+    children: React$1.ReactNode;
+}
+/**
+ * ToastContainer Component
+ *
+ * Provides toast context and manages toast display
+ *
+ * @example
+ * <ToastContainer>
+ *   <App />
+ * </ToastContainer>
+ */
+declare const ToastContainer: React$1.FC<ToastContainerProps>;
+/**
+ * Hook to access toast methods
+ *
+ * @example
+ * const toast = useToast();
+ * toast.success('Operation successful!');
+ * toast.error('Something went wrong');
+ */
+declare const useToast: () => ToastContextValue;
+
+type ToastPlacement = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
+interface ToastContainerConfig {
+    placement?: ToastPlacement;
+    maxCount?: number;
+    defaultDuration?: number;
+}
+/**
+ * Global toast object that can be used anywhere
+ * No need to render ToastContainer component manually
+ *
+ * @example
+ * import { toast } from '@officesdk/design';
+ *
+ * // Configure (optional)
+ * toast.configure({
+ *   placement: 'top-right',
+ *   maxCount: 5,
+ *   defaultDuration: 3000,
+ * });
+ *
+ * // Show toasts
+ * toast.success('Operation successful!');
+ * toast.error('Something went wrong');
+ * toast.info('Info message', { duration: 5000 });
+ * toast.warn('Warning message');
+ *
+ * const id = toast.show({ variant: 'info', message: 'Custom toast' });
+ * toast.hide(id);
+ * toast.hideAll();
+ */
+declare const toast: {
+    configure: (config: ToastContainerConfig) => void;
+    show: (props: Omit<ToastProps, "onClose">) => string;
+    hide: (id: string) => void;
+    hideAll: () => void;
+    success: (message: React$1.ReactNode, options?: Partial<ToastProps>) => string;
+    info: (message: React$1.ReactNode, options?: Partial<ToastProps>) => string;
+    error: (message: React$1.ReactNode, options?: Partial<ToastProps>) => string;
+    warn: (message: React$1.ReactNode, options?: Partial<ToastProps>) => string;
+    loading: (message: React$1.ReactNode, options?: Partial<ToastProps>) => string;
+    destroy: () => void;
+};
+
+interface TabItem {
+    /**
+     * Unique key for the tab
+     */
+    key: string;
+    /**
+     * Tab label
+     */
+    label: string | React$1.ReactNode;
+    /**
+     * Whether the tab is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Custom icon
+     */
+    icon?: React$1.ReactNode;
+}
+interface TabsProps {
+    /**
+     * Tab items
+     */
+    items: TabItem[];
+    /**
+     * Active tab key
+     */
+    activeKey?: string;
+    /**
+     * Default active tab key
+     */
+    defaultActiveKey?: string;
+    /**
+     * Tab variant
+     */
+    variant?: 'line' | 'card';
+    /**
+     * Tab size
+     */
+    size?: 'large';
+    /**
+     * Callback when tab changes
+     */
+    onChange?: (key: string) => void;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Custom style
+     */
+    style?: React$1.CSSProperties;
+    /**
+     * Custom className for tab item
+     */
+    tabItemClassName?: string;
+    /**
+     * Custom style for tab item
+     */
+    tabItemStyle?: React$1.CSSProperties;
+}
+/**
+ * Tab Component
+ *
+ * A tab component with line and card variants
+ *
+ * @example
+ * <Tab
+ *   items={[
+ *     { key: '1', label: 'Tab 1' },
+ *     { key: '2', label: 'Tab 2' },
+ *   ]}
+ *   defaultActiveKey="1"
+ * />
+ */
+declare const Tabs: React$1.FC<TabsProps>;
+
+interface TooltipProps extends Omit<Partial<TooltipProps$1>, 'prefixCls'> {
+    /**
+     * Tooltip content
+     */
+    content?: React$1.ReactNode;
+    /**
+     * Tooltip variant
+     */
+    variant?: 'black' | 'white';
+    /**
+     * Tooltip size (only for white variant)
+     */
+    size?: 'small' | 'large';
+    /**
+     * Children element that triggers the tooltip
+     */
+    children: React$1.ReactElement;
+    /**
+     * Function to get the container element for the tooltip
+     */
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+}
+/**
+ * Tooltip Component
+ *
+ * Note: Coverage for this component may appear lower than expected due to
+ * styled-components CSS-in-JS template literals (lines 68-200+) which are
+ * not properly tracked by V8 coverage. The actual component logic is fully tested.
+ *
+ * @example
+ * // Basic black tooltip
+ * <Tooltip content="Tooltip text">
+ *   <button>Hover me</button>
+ * </Tooltip>
+ *
+ * @example
+ * // White tooltip with small size
+ * <Tooltip content="Tooltip text" variant="white" size="small">
+ *   <button>Hover me</button>
+ * </Tooltip>
+ *
+ * @example
+ * // White tooltip with large size
+ * <Tooltip content="Complex content" variant="white" size="large">
+ *   <button>Hover me</button>
+ * </Tooltip>
+ */
+declare const Tooltip: React$1.FC<TooltipProps>;
+
+interface ToolbarButtonProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onDoubleClick'> {
+    /**
+     * Whether the button is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the button is in active state
+     */
+    isActive?: boolean;
+    /**
+     * Icon to display
+     * - If string: image URL
+     * - If ReactNode: custom icon component
+     */
+    icon?: string | React$1.ReactNode;
+    /**
+     * Label text or custom node
+     */
+    label?: string | React$1.ReactNode;
+    /**
+     * Whether to show dropdown arrow
+     */
+    hasDropdown?: boolean;
+    /**
+     * Whether the dropdown section is clickable separately
+     */
+    splitDropdown?: boolean;
+    /**
+     * Click handler for main button
+     */
+    onClick?: (e: React$1.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Double click handler for main button
+     */
+    onDoubleClick?: (e: React$1.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Click handler for dropdown section
+     */
+    onDropdownClick?: (e: React$1.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Custom style
+     */
+    style?: React$1.CSSProperties;
+}
+/**
+ * ToolbarButton Component
+ *
+ * A toolbar button with optional icon, label, and dropdown functionality
+ *
+ * @example
+ * // Icon component
+ * <ToolbarButton icon={<Icon />} />
+ *
+ * @example
+ * // Icon from URL
+ * <ToolbarButton icon="https://example.com/icon.png" />
+ *
+ * @example
+ * // Button with label and dropdown
+ * <ToolbarButton icon={<Icon />} label="Format" hasDropdown />
+ *
+ * @example
+ * // Button with custom label node
+ * <ToolbarButton icon={<Icon />} label={<CustomLabel />} />
+ *
+ * @example
+ * // Button with split dropdown
+ * <ToolbarButton
+ *   icon={<Icon />}
+ *   label="Format"
+ *   hasDropdown
+ *   splitDropdown
+ *   onClick={handleClick}
+ *   onDropdownClick={handleDropdownClick}
+ * />
+ */
+declare const ToolbarButton: React$1.FC<ToolbarButtonProps>;
+
+type DropdownButtonSize = 'large' | 'medium';
+type DropdownButtonVariant = 'framed' | 'frameless';
+interface DropdownButtonProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    /**
+     * Button variant
+     * - framed: with border (40px large)
+     * - frameless: without border (28px medium)
+     */
+    variant?: DropdownButtonVariant;
+    /**
+     * Button size
+     */
+    size?: DropdownButtonSize;
+    /**
+     * Display value/label
+     */
+    value?: string;
+    /**
+     * Placeholder when no value
+     */
+    placeholder?: string;
+    /**
+     * Optional icon (URL string or ReactNode)
+     */
+    icon?: string | React$1.ReactNode;
+    /**
+     * Custom indicator/arrow icon
+     */
+    indicatorIcon?: React$1.ReactNode;
+    /**
+     * Whether the dropdown is open (controls arrow rotation)
+     */
+    open?: boolean;
+    /**
+     * Whether the button is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Error state
+     */
+    error?: boolean;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Custom style
+     */
+    style?: React$1.CSSProperties;
+    /**
+     * Custom text style
+     */
+    textStyle?: React$1.CSSProperties;
+}
+/**
+ * DropdownButton Component
+ *
+ * A button component for triggering dropdown menus
+ *
+ * @example
+ * // Framed dropdown button (with border, 40px)
+ * <DropdownButton variant="framed" value="Option 1" />
+ *
+ * @example
+ * // Frameless dropdown button (no border, 28px)
+ * <DropdownButton variant="frameless" value="Option 1" />
+ *
+ * @example
+ * // With icon
+ * <DropdownButton icon={<CustomIcon />} value="Option 1" />
+ *
+ * @example
+ * // Open state (arrow rotated)
+ * <DropdownButton open value="Option 1" />
+ */
+declare const DropdownButton: React$1.ForwardRefExoticComponent<DropdownButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+interface MenuItem {
+    type?: 'item';
+    key: string;
+    label: string;
+    description?: string;
+    icon?: string | React$1.ReactNode;
+    disabled?: boolean;
+    selected?: boolean;
+    selectable?: boolean;
+    children?: MenuItem[];
+    onClick?: (key: string) => void;
+}
+interface MenuGroup {
+    type: 'group';
+    key: string;
+    label: string;
+    children: MenuItem[];
+}
+interface MenuDivider {
+    type: 'divider';
+    key: string;
+}
+type MenuItemType = MenuItem | MenuGroup | MenuDivider;
+interface MenuProps {
+    /**
+     * Menu items
+     */
+    items: MenuItemType[];
+    /**
+     * Currently selected key(s)
+     */
+    selectedKeys?: string[];
+    /**
+     * Open submenu keys (controlled)
+     */
+    openKeys?: string[];
+    /**
+     * Menu size
+     */
+    size?: 'medium' | 'large';
+    /**
+     * Whether to show search box
+     */
+    searchable?: boolean;
+    /**
+     * Search placeholder
+     */
+    searchPlaceholder?: string;
+    /**
+     * Max height for scrolling
+     */
+    maxHeight?: number;
+    /**
+     * Enable virtual scrolling
+     */
+    virtual?: boolean;
+    /**
+     * Whether to always reserve space for active icon (for description alignment)
+     */
+    reserveActiveIconSpace?: boolean;
+    /**
+     * Select handler
+     */
+    onSelect?: (key: string) => void;
+    /**
+     * Search handler
+     */
+    onSearch?: (value: string) => void;
+    /**
+     * Open keys change handler
+     */
+    onOpenChange?: (keys: string[]) => void;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Custom style
+     */
+    style?: React$1.CSSProperties;
+}
+/**
+ * Menu Component
+ *
+ * A menu component based on rc-menu with virtual scrolling support
+ *
+ * @example
+ * // Basic menu
+ * <Menu
+ *   items={[
+ *     { key: '1', label: 'Option 1' },
+ *     { key: '2', label: 'Option 2' },
+ *   ]}
+ *   onSelect={(key) => console.log(key)}
+ * />
+ *
+ * @example
+ * // Menu with groups and dividers
+ * <Menu
+ *   items={[
+ *     { type: 'group', key: 'g1', label: 'Group A', children: [...] },
+ *     { type: 'divider', key: 'd1' },
+ *     { key: '1', label: 'Option 1' },
+ *   ]}
+ * />
+ *
+ * @example
+ * // Menu with search
+ * <Menu
+ *   searchable
+ *   items={items}
+ *   onSearch={(value) => console.log(value)}
+ * />
+ */
+declare const Menu: React$1.FC<MenuProps>;
+
+interface DropdownProps extends Omit<Partial<DropdownProps$1>, 'prefixCls' | 'placement'> {
+    /**
+     * Dropdown overlay content (usually a Menu component)
+     */
+    overlay?: React$1.ReactElement | (() => React$1.ReactElement);
+    /**
+     * Trigger action (click, hover, contextMenu)
+     */
+    trigger?: ('click' | 'hover' | 'contextMenu')[];
+    /**
+     * Placement of dropdown
+     */
+    placement?: 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight';
+    /**
+     * Whether dropdown is visible (controlled)
+     */
+    visible?: boolean;
+    /**
+     * Default visibility (uncontrolled)
+     */
+    defaultVisible?: boolean;
+    /**
+     * Callback when visibility changes
+     */
+    onVisibleChange?: (visible: boolean) => void;
+    /**
+     * Children element that triggers the dropdown
+     */
+    children: React$1.ReactElement;
+    /**
+     * Dropdown container class name
+     */
+    overlayClassName?: string;
+    /**
+     * Function to get the container element for the dropdown
+     */
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+}
+/**
+ * Dropdown Component
+ *
+ * A dropdown container component based on rc-dropdown
+ *
+ * @example
+ * // Basic dropdown with menu
+ * <Dropdown
+ *   overlay={<Menu items={items} />}
+ *   trigger={['click']}
+ * >
+ *   <DropdownButton value="Select" />
+ * </Dropdown>
+ *
+ * @example
+ * // Controlled dropdown
+ * <Dropdown
+ *   visible={open}
+ *   onVisibleChange={setOpen}
+ *   overlay={<Menu items={items} />}
+ * >
+ *   <Button>Click me</Button>
+ * </Dropdown>
+ *
+ * @example
+ * // Custom trigger
+ * <Dropdown
+ *   overlay={<Menu items={items} />}
+ *   trigger={['hover']}
+ *   placement="bottomLeft"
+ * >
+ *   <span>Hover me</span>
+ * </Dropdown>
+ */
+declare const Dropdown: React$1.FC<DropdownProps>;
+
+declare const DropdownGlobalStyles: styled_components.GlobalStyleComponent<{}, styled_components.DefaultTheme>;
+declare const MenuGlobalStyles: styled_components.GlobalStyleComponent<{}, styled_components.DefaultTheme>;
+
+interface ModalProps extends DialogProps {
+    /**
+     * Whether the modal is visible
+     */
+    visible?: boolean;
+    /**
+     * Modal variant type
+     * - 'message': Message dialog (max 400px, min 360px)
+     * - 'functional': Functional dialog (default 640px, max 800px, min 400px)
+     */
+    variant?: 'message' | 'functional';
+    /**
+     * Mask layer type
+     * - 'light': Light mask (rgba(65,70,75,0.5))
+     * - 'dark': Dark mask (rgba(44,48,51,0.8))
+     */
+    maskType?: 'light' | 'dark';
+    /**
+     * Modal title
+     */
+    title?: React$1.ReactNode;
+    /**
+     * Modal width
+     */
+    width?: string | number;
+    /**
+     * Modal height
+     */
+    height?: string | number;
+    /**
+     * Whether to show mask
+     */
+    mask?: boolean;
+    /**
+     * Whether to close modal when clicking mask
+     */
+    maskClosable?: boolean;
+    /**
+     * Whether to show close button
+     */
+    closable?: boolean;
+    /**
+     * OK button text, set to null to hide
+     */
+    okText?: string | null;
+    /**
+     * Cancel button text, set to null to hide
+     */
+    cancelText?: string | null;
+    /**
+     * Whether OK button is disabled
+     */
+    disabledOkButton?: boolean;
+    /**
+     * Custom footer, set to null to hide footer
+     */
+    footer?: React$1.ReactNode;
+    /**
+     * Callback when OK button is clicked
+     */
+    onOk?: (e: React$1.MouseEvent) => void;
+    /**
+     * Callback when Cancel button is clicked or modal is closed
+     */
+    onCancel?: (e: React$1.MouseEvent | React$1.KeyboardEvent) => void;
+    /**
+     * Modal content
+     */
+    children?: React$1.ReactNode;
+    /**
+     * CSS class prefix
+     */
+    prefixCls?: string;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Custom style
+     */
+    style?: React$1.CSSProperties;
+    /**
+     * z-index of the modal
+     */
+    zIndex?: number;
+    /**
+     * Whether to destroy modal on close
+     */
+    destroyOnClose?: boolean;
+    /**
+     * Whether to focus on modal when opened
+     */
+    focusTriggerAfterClose?: boolean;
+    /**
+     * Return the mount node for Modal
+     */
+    getContainer?: () => HTMLElement;
+}
+/**
+ * Modal Component
+ *
+ * A dialog component for displaying content in a layer above the page.
+ *
+ * @example
+ * // Basic usage
+ * <Modal
+ *   visible={visible}
+ *   title="Modal Title"
+ *   onOk={handleOk}
+ *   onCancel={handleCancel}
+ * >
+ *   Modal content
+ * </Modal>
+ *
+ * @example
+ * // Custom footer
+ * <Modal
+ *   visible={visible}
+ *   title="Custom Footer"
+ *   footer={<Button onClick={handleClose}>Close</Button>}
+ *   onCancel={handleCancel}
+ * >
+ *   Modal content
+ * </Modal>
+ *
+ * @example
+ * // No footer
+ * <Modal
+ *   visible={visible}
+ *   title="No Footer"
+ *   footer={null}
+ *   onCancel={handleCancel}
+ * >
+ *   Modal content
+ * </Modal>
+ */
+declare const Modal: React$1.FC<ModalProps>;
+
+declare const ModalGlobalStyles: any;
+
+interface LoadingProps {
+    /**
+     * Size of the loading spinner
+     * - 'small': 16x16 (for dropdown menus, search refresh)
+     * - 'medium': 24x24 (for list/table refresh)
+     * - 'large': 32x32 (for full page refresh)
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Whether the spinner is visible
+     */
+    spinning?: boolean;
+    /**
+     * Delay in milliseconds before showing the spinner (prevents flash)
+     */
+    delay?: number;
+    /**
+     * Tip text displayed below the spinner
+     */
+    tip?: React$1.ReactNode;
+    /**
+     * Whether to use fullscreen overlay mode
+     */
+    fullscreen?: boolean;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Child content to wrap with loading overlay
+     */
+    children?: React$1.ReactNode;
+    /**
+     * Custom loading indicator (React element or image URL)
+     * When provided as a string, it will be used as the image src
+     * When provided as a React element, it will be rendered directly
+     */
+    indicator?: React$1.ReactNode | string;
+}
+/**
+ * Loading Component
+ *
+ * A loading component that displays an animated indicator.
+ * Supports GIF/CSS defaults via theme configuration or custom indicators via props.
+ *
+ * @example
+ * // Basic usage (uses theme default indicator type)
+ * <Loading />
+ *
+ * @example
+ * // Different sizes
+ * <Loading size="small" />
+ * <Loading size="medium" />
+ * <Loading size="large" />
+ *
+ * @example
+ * // With tip
+ * <Loading tip="Loading..." />
+ *
+ * @example
+ * // Custom indicator (image URL)
+ * <Loading indicator="/path/to/custom-loading.gif" />
+ *
+ * @example
+ * // Custom indicator (React element)
+ * <Loading indicator={<MyCustomSpinner />} />
+ *
+ * @example
+ * // Wrap content
+ * <Loading spinning={isLoading}>
+ *   <div>Content to load</div>
+ * </Loading>
+ *
+ * @example
+ * // Fullscreen loading
+ * <Loading fullscreen spinning={isLoading} />
+ */
+declare const Loading: React$1.FC<LoadingProps>;
+
+type DeepPartial<T extends object> = {
+    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+
+type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+interface ToastConfig {
+    /**
+     * Maximum number of toasts to show at once
+     */
+    maxCount?: number;
+    /**
+     * Default duration for auto-close (ms)
+     */
+    defaultDuration?: number;
+    /**
+     * Toast position on screen
+     */
+    position?: ToastPosition;
+    /**
+     * Offset from edge (px)
+     */
+    offset?: {
+        x?: number;
+        y?: number;
+    };
+}
+interface ZIndexConfig {
+    /**
+     * Z-index for toast notifications
+     */
+    toast?: number;
+    /**
+     * Z-index for modals
+     */
+    modal?: number;
+    /**
+     * Z-index for dropdowns
+     */
+    dropdown?: number;
+    /**
+     * Z-index for tooltips
+     */
+    tooltip?: number;
+}
+interface AnimationConfig {
+    /**
+     * Default animation duration (ms)
+     */
+    duration?: number;
+    /**
+     * Default easing function
+     */
+    easing?: string;
+    /**
+     * Disable all animations
+     */
+    disabled?: boolean;
+}
+interface A11yConfig {
+    /**
+     * Announce messages to screen readers
+     */
+    announceMessages?: boolean;
+    /**
+     * Show focus visible indicators
+     */
+    focusVisible?: boolean;
+    /**
+     * Reduce motion for users who prefer it
+     */
+    reduceMotion?: boolean;
+}
+interface I18nConfig {
+    /**
+     * Toast messages
+     */
+    toast?: {
+        closeLabel?: string;
+    };
+    /**
+     * Button messages
+     */
+    button?: {
+        loadingText?: string;
+    };
+    /**
+     * Common messages
+     */
+    common?: {
+        confirm?: string;
+        cancel?: string;
+        ok?: string;
+    };
+}
+interface UIConfig {
+    /**
+     * Theme configuration (required)
+     */
+    theme: DeepPartial<Theme>;
+    /**
+     * Icon registry (optional)
+     */
+    icons?: IconRegistry;
+    /**
+     * Toast configuration
+     */
+    toast?: ToastConfig;
+    /**
+     * Locale code (e.g., 'zh-CN', 'en-US')
+     */
+    locale?: string;
+    /**
+     * Internationalization configuration
+     */
+    i18n?: I18nConfig;
+    /**
+     * Z-index layer management
+     */
+    zIndex?: ZIndexConfig;
+    /**
+     * Animation configuration
+     */
+    animation?: AnimationConfig;
+    /**
+     * Accessibility configuration
+     */
+    a11y?: A11yConfig;
+    /**
+     * Render function
+     */
+    renderFunction?: (element: React.ReactElement, container: HTMLElement) => void;
+}
+
+interface UIConfigProviderProps {
+    /**
+     * UI configuration
+     */
+    config: UIConfig;
+    /**
+     * Children components
+     */
+    children: React$1.ReactNode;
+}
+/**
+ * UIConfigProvider Component (Optional, for React convenience)
+ *
+ * Unified provider for all UI components and global configurations.
+ * Includes IconProvider, ToastContainer, and other settings.
+ *
+ * Note: Global styles (Tooltip, Menu, Dropdown) are now injected on-demand
+ * when components are first used, so they are no longer included here.
+ *
+ * For non-React environments or when you want to avoid Provider nesting,
+ * use initUIConfig() instead.
+ *
+ * @example
+ * import { UIConfigProvider } from '@officesdk/design';
+ * import { lightTheme } from '@officesdk/design/theme';
+ * import { iconRegistry } from '@officesdk/design/icons';
+ *
+ * <UIConfigProvider config={{
+ *   theme: lightTheme,
+ *   icons: iconRegistry,
+ *   toast: {
+ *     defaultDuration: 3000,
+ *     maxCount: 5,
+ *   },
+ * }}>
+ *   <App />
+ * </UIConfigProvider>
+ */
+declare const UIConfigProvider: React$1.FC<UIConfigProviderProps>;
+/**
+ * Hook to access UI configuration
+ *
+ * Falls back to global config if context is not available.
+ * This allows components to work even without UIConfigProvider when initUIConfig() is used.
+ *
+ * @example
+ * const config = useUIConfig();
+ * console.log(config?.theme);
+ * console.log(config?.locale);
+ */
+declare const useUIConfig: () => UIConfig | null;
+
+/**
+ * Create UI configuration with default values
+ *
+ * @example
+ * import { createUIConfig } from '@officesdk/design';
+ * import { lightTheme } from '@officesdk/design/theme';
+ * import { iconRegistry } from '@officesdk/design/icons';
+ *
+ * const config = createUIConfig({
+ *   theme: lightTheme,
+ *   icons: iconRegistry,
+ *   toast: {
+ *     defaultDuration: 3000,
+ *   },
+ * });
+ */
+declare const createUIConfig: (config: UIConfig) => UIConfig;
+/**
+ * Merge multiple configs (useful for extending base configs)
+ */
+declare const mergeUIConfig: (baseConfig: UIConfig, ...configs: Partial<UIConfig>[]) => UIConfig;
+
+/**
+ * Initialize UI configuration globally (non-React)
+ *
+ * This function allows you to configure the UI library without using React Provider components.
+ * It's useful for:
+ * - Non-React environments
+ * - Avoiding Provider nesting (e.g., in Modal components)
+ * - Setting up configuration before React app starts
+ *
+ * After calling this function, all components will automatically use the global configuration.
+ * Global styles (Tooltip, Menu, Dropdown) will be injected on-demand when components are first used.
+ *
+ * @param config - UI configuration object
+ * @param config.theme - Theme configuration (required)
+ * @param config.icons - Icon registry mapping icon names to React components
+ * @param config.toast - Toast configuration (maxCount, defaultDuration, etc.)
+ * @param config.locale - Locale code (e.g., 'zh-CN', 'en-US')
+ * @param config.i18n - Internationalization configuration
+ * @param config.zIndex - Z-index layer management
+ * @param config.animation - Animation configuration
+ * @param config.a11y - Accessibility configuration
+ *
+ * @example
+ * import { initUIConfig } from '@officesdk/design';
+ * import { lightTheme } from '@officesdk/design/theme';
+ * import { iconRegistry } from '@officesdk/design/icons';
+ *
+ * // Initialize before React app starts
+ * initUIConfig({
+ *   theme: lightTheme,
+ *   icons: iconRegistry,
+ *   toast: {
+ *     maxCount: 5,
+ *     defaultDuration: 3000,
+ *   },
+ * });
+ *
+ * // Now you can use components without UIConfigProvider
+ * function App() {
+ *   return <Button>Click me</Button>;
+ * }
+ *
+ * @example
+ * // Useful for Modal scenarios - no need to nest Provider
+ * function Modal({ children }) {
+ *   return (
+ *     <Portal>
+ *       {children}
+ *     </Portal>
+ *   );
+ * }
+ *
+ * @example
+ * // Can be called multiple times to update config
+ * initUIConfig({ theme: lightTheme });
+ * // Later update icons
+ * initUIConfig({ theme: lightTheme, icons: newIconRegistry });
+ */
+declare const initUIConfig: (config: UIConfig) => void;
+/**
+ * Get global UI configuration
+ */
+declare const getUIConfig: () => UIConfig | null;
+/**
+ * Get global icon registry
+ */
+declare const getGlobalIconRegistry: () => Record<string, React$1.ComponentType<React$1.SVGProps<SVGSVGElement>>> | null;
+/**
+ * Get global toast config
+ */
+declare const getGlobalToastConfig: () => {
+    maxCount?: number;
+    defaultDuration?: number;
+} | null;
+
+declare const styled: ThemedStyledInterface<Theme>;
+
+declare const getGlobalTheme: () => Theme;
+
+export { type A11yConfig, type AnimationConfig, Button, type ButtonProps, Checkbox, type CheckboxProps, Dropdown, DropdownButton, type DropdownButtonProps, DropdownGlobalStyles, type DropdownProps, type I18nConfig, Icon, type IconComponent, type IconProps, IconProvider, type IconProviderProps, type IconRegistry, Input, type InputProps, Loading, type LoadingProps, Menu, type MenuDivider, MenuGlobalStyles, type MenuGroup, type MenuItem, type MenuItemType, type MenuProps, Modal, ModalGlobalStyles, type ModalProps, NumberInput, type NumberInputProps, Radio, type RadioProps, SearchInput, type SearchInputProps, Slider, type SliderProps, SpinButton, type SpinButtonProps, Switch, type SwitchProps, type TabItem, Tabs, type TabsProps, Toast, type ToastConfig, ToastContainer, type ToastContainerConfig, type ToastContainerProps, type ToastPosition, type ToastProps, ToolbarButton, type ToolbarButtonProps, Tooltip, type TooltipProps, type UIConfig, UIConfigProvider, type UIConfigProviderProps, UnderlinedInput, type InputProps as UnderlinedInputProps, type ZIndexConfig, createUIConfig, getGlobalIconRegistry, getGlobalTheme, getGlobalToastConfig, getUIConfig, initUIConfig, mergeUIConfig, styled, toast, useIconRegistry, useToast, useUIConfig };