@clickhouse/click-ui 0.0.236 → 0.0.237-sc-deprecation.1

package/dist/components/Link/linkStyles.d.ts

@@ -0,0 +1,134 @@
+/**
+ * Link styles for styled-components compatibility
+ *
+ * This file provides backward compatibility for consumers using styled-components
+ * to wrap the Link component.
+ *
+ * @example Function-based approach (current)
+ * ```typescript
+ * import styled from 'styled-components';
+ * import { Link, linkStyles, StyledLinkProps } from '@clickhouse/click-ui';
+ *
+ * const CuiStyledLink = styled(Link)<StyledLinkProps>`
+ *   ${props => linkStyles(props)}
+ * `;
+ *
+ * <CuiStyledLink $size="md" $weight="semibold">My Link</CuiStyledLink>
+ * ```
+ *
+ * @example CSS classes approach (recommended for new code)
+ * ```typescript
+ * import { Link, linkClasses } from '@clickhouse/click-ui';
+ *
+ * <Link className={linkClasses({ size: 'md', weight: 'semibold' })}>My Link</Link>
+ * ```
+ */
+export type TextSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type TextWeight = "normal" | "medium" | "semibold" | "bold";
+/**
+ * Props for styled-components wrapper
+ * @deprecated Use LinkStyleProps with linkClasses instead
+ */
+export interface StyledLinkProps {
+    $size?: TextSize;
+    $weight?: TextWeight;
+}
+/**
+ * Props for CSS classes approach
+ */
+export interface LinkStyleProps {
+    size?: TextSize;
+    weight?: TextWeight;
+    className?: string;
+}
+/**
+ * Function-based link styles for styled-components
+ *
+ * Returns a CSS string with the appropriate CSS variables based on size and weight.
+ *
+ * @param props - Style props with $size and $weight
+ * @returns CSS string with Click UI link styles
+ *
+ * @deprecated This function-based approach is maintained for backward compatibility.
+ * For new code, use `linkClasses()` instead which doesn't require styled-components.
+ *
+ * @example
+ * ```typescript
+ * const StyledLink = styled(Link)<StyledLinkProps>`
+ *   ${props => linkStyles(props)}
+ * `;
+ * ```
+ */
+export declare const linkStyles: (props?: StyledLinkProps) => string;
+/**
+ * CSS class names helper for Link component styling
+ *
+ * Use these classes to apply Click UI link styles to custom components without
+ * requiring styled-components.
+ *
+ * @param options - Size, weight, and additional className
+ * @returns Combined class name string
+ *
+ * @example With React Router
+ * ```typescript
+ * import { Link as RouterLink } from 'react-router-dom';
+ * import { linkClasses } from '@clickhouse/click-ui';
+ *
+ * <RouterLink
+ *   to="/dashboard"
+ *   className={linkClasses({ size: 'md', weight: 'semibold' })}
+ * >
+ *   Go to Dashboard
+ * </RouterLink>
+ * ```
+ *
+ * @example With Next.js Link
+ * ```typescript
+ * import Link from 'next/link';
+ * import { linkClasses } from '@clickhouse/click-ui';
+ *
+ * <Link href="/about" className={linkClasses({ size: 'lg', weight: 'bold' })}>
+ *   About
+ * </Link>
+ * ```
+ */
+export declare const linkClasses: ({ size, weight, className }?: LinkStyleProps) => string;
+/**
+ * CSS class name constants for granular control
+ *
+ * Use these constants when you need more control over which classes to apply.
+ *
+ * @example
+ * ```typescript
+ * import { LINK_CLASSES } from '@clickhouse/click-ui';
+ * import clsx from 'clsx';
+ *
+ * <a
+ *   href="/home"
+ *   className={clsx(
+ *     LINK_CLASSES.base,
+ *     LINK_CLASSES.size.lg,
+ *     LINK_CLASSES.weight.bold,
+ *     'my-custom-class'
+ *   )}
+ * >
+ *   Home
+ * </a>
+ * ```
+ */
+export declare const LINK_CLASSES: {
+    readonly base: "cui-link";
+    readonly size: {
+        readonly xs: "cui-link-xs";
+        readonly sm: "cui-link-sm";
+        readonly md: "cui-link-md";
+        readonly lg: "cui-link-lg";
+        readonly xl: "cui-link-xl";
+    };
+    readonly weight: {
+        readonly normal: "";
+        readonly medium: "cui-link-weight-medium";
+        readonly semibold: "cui-link-weight-semibold";
+        readonly bold: "cui-link-weight-bold";
+    };
+};

package/dist/components/Logos/Logo.d.ts

@@ -8,7 +8,7 @@ export interface LogoProps extends SVGAttributes<SVGElement> {
     size?: IconSize;
 }
 declare const Logo: {
-    ({ name, theme, size, ...props }: LogoProps): import("react/jsx-runtime").JSX.Element | null;
+    ({ name, theme: themeOverride, size, className, ...props }: LogoProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };
 export { Logo };

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

@@ -18,7 +18,7 @@ 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;
         displayName: string;

package/dist/components/Panel/Panel.d.ts

@@ -21,5 +21,5 @@ export interface PanelProps extends HTMLAttributes<HTMLDivElement> {
     radii?: PanelRadii;
     width?: string;
 }
-export declare const Panel: ({ alignItems, children, color, cursor, fillHeight, fillWidth, gap, hasBorder, hasShadow, height, orientation, padding, radii, width, ...props }: PanelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Panel: ({ alignItems, children, color, cursor, fillHeight, fillWidth, gap, hasBorder, hasShadow, height, orientation, padding, radii, width, className: propsClassName, ...props }: PanelProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -26,5 +26,5 @@ interface NonDismissableProgressBar {
     onCancel?: never;
 }
 export type ProgressBarProps = (DefaultProgressBar & (DismissableProgressBar | NonDismissableProgressBar)) | SmallProgressBar;
-export declare const ProgressBar: ({ progress, type, dismissable, onCancel, successMessage, ...props }: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ProgressBar: ({ progress, type, dismissable, onCancel, successMessage, style, ...props }: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -18,5 +18,5 @@ export declare const RadioGroup: {
 interface RadioGroupInputProps extends RadixRadioGroup.RadioGroupItemProps {
     label?: ReactNode;
 }
-export type RadioGroupItemProps = RadioGroupInputProps & HTMLAttributes<HTMLDivElement>;
+export type RadioGroupItemProps = RadioGroupInputProps & Omit<HTMLAttributes<HTMLDivElement>, "dir">;
 export {};

package/dist/components/Select/common/SelectStyled.d.ts

@@ -1,34 +1,32 @@
-export declare const SelectPopoverRoot: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('@radix-ui/react-popover').PopoverProps, never>> & string & Omit<import('react').FC<import('@radix-ui/react-popover').PopoverProps>, keyof import('react').Component<any, {}, any>>;
-export declare const SelectValue: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledSelectTrigger: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<import('@radix-ui/react-popover').PopoverTriggerProps & 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;
-}, {
+import { Root } from '@radix-ui/react-popover';
+
+export declare const SelectPopoverRoot: React.FC<React.ComponentPropsWithoutRef<typeof Root>>;
+export declare const SelectValue: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const StyledSelectTrigger: import('react').ForwardRefExoticComponent<Omit<import('@radix-ui/react-popover').PopoverTriggerProps & import('react').RefAttributes<HTMLButtonElement>, "ref"> & {
     $error: boolean;
-}>> & string & Omit<import('react').ForwardRefExoticComponent<import('@radix-ui/react-popover').PopoverTriggerProps & import('react').RefAttributes<HTMLButtonElement>>, keyof import('react').Component<any, {}, any>>;
-export declare const SelectPopoverContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<import('@radix-ui/react-popover').PopoverContentProps & 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;
-}, {
+} & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const SelectPopoverContent: import('react').ForwardRefExoticComponent<Omit<import('@radix-ui/react-popover').PopoverContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
     $useFullWidthItems: boolean;
     $itemCharacterLimit?: string;
-}>> & string & Omit<import('react').ForwardRefExoticComponent<import('@radix-ui/react-popover').PopoverContentProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
-export declare const SearchBarContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+} & import('react').RefAttributes<HTMLDivElement>>;
+export declare const SearchBarContainer: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
     $showSearch: boolean;
-}>> & string;
-export declare const SearchBar: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
+} & import('react').RefAttributes<HTMLDivElement>>;
+export declare const SearchBar: import('react').ForwardRefExoticComponent<import('react').InputHTMLAttributes<HTMLInputElement> & {
     $showSearch: boolean;
-}>> & string;
-export declare const SearchClose: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+} & import('react').RefAttributes<HTMLInputElement>>;
+export declare const SearchClose: import('react').ForwardRefExoticComponent<import('react').ButtonHTMLAttributes<HTMLButtonElement> & {
     $showClose: boolean;
-}>> & string;
-export declare const SelectList: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const SelectListContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+} & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const SelectList: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const SelectListContent: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
     $maxHeight?: string;
-}>> & string;
-export declare const HiddenSelectElement: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, never>> & string;
-export declare const SelectGroupContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const SelectGroupName: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const SelectGroupContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const SelectNoDataContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+} & import('react').RefAttributes<HTMLDivElement>>;
+export declare const HiddenSelectElement: import('react').ForwardRefExoticComponent<import('react').SelectHTMLAttributes<HTMLSelectElement> & import('react').RefAttributes<HTMLSelectElement>>;
+export declare const SelectGroupContainer: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const SelectGroupName: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const SelectGroupContent: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const SelectNoDataContainer: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
     $clickable: boolean;
-}>> & string;
-export declare const SelectItemDescriptionText: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export declare const SelectItemDescriptionText: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Separator/Separator.d.ts

@@ -1,6 +1,7 @@
-import * as RadixSeparator from "@radix-ui/react-separator";
-interface Props extends RadixSeparator.SeparatorProps {
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
     size: "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+    orientation?: "horizontal" | "vertical";
+    decorative?: boolean;
 }
-declare const Separator: ({ orientation, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Separator: ({ orientation, size, className, decorative, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export default Separator;

package/dist/components/SidebarNavigationItem/SidebarNavigationItem.d.ts

@@ -1,7 +1,8 @@
-import { HTMLAttributes, ReactNode } from 'react';
+import { ElementType, ReactNode } from 'react';
 import { HorizontalDirection, IconName } from '..';
+import { PolymorphicComponent, PolymorphicComponentProps } from '../../utils/polymorphic';
 
-export interface SidebarNavigationItemProps extends HTMLAttributes<HTMLDivElement> {
+export interface SidebarNavigationItemProps<T extends ElementType = "div"> extends PolymorphicComponentProps<T> {
     label: ReactNode;
     selected?: boolean;
     disabled?: boolean;
@@ -9,11 +10,6 @@ export interface SidebarNavigationItemProps extends HTMLAttributes<HTMLDivElemen
     icon?: IconName;
     iconDir?: HorizontalDirection;
     type?: "main" | "sqlSidebar";
+    collapsible?: boolean;
 }
-declare const SidebarNavigationItem: import('react').ForwardRefExoticComponent<SidebarNavigationItemProps & import('react').RefAttributes<HTMLDivElement>>;
-export declare const SidebarItemWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $collapsible?: boolean;
-    $level: number;
-    $type: "main" | "sqlSidebar";
-}>> & string;
-export { SidebarNavigationItem };
+export declare const SidebarNavigationItem: PolymorphicComponent<SidebarNavigationItemProps>;

package/dist/components/SidebarNavigationTitle/SidebarNavigationTitle.d.ts

@@ -1,15 +1,13 @@
-import { HTMLAttributes, ReactNode } from 'react';
+import { ElementType, ReactNode } from 'react';
 import { HorizontalDirection, IconName } from '..';
+import { PolymorphicComponent, PolymorphicComponentProps } from '../../utils/polymorphic';
 
-export interface SidebarNavigationTitleProps extends HTMLAttributes<HTMLButtonElement> {
+export interface SidebarNavigationTitleProps<T extends ElementType = "button"> extends PolymorphicComponentProps<T> {
     label: ReactNode;
     selected?: boolean;
     icon?: IconName;
     iconDir?: HorizontalDirection;
     type?: "main" | "sqlSidebar";
+    collapsible?: boolean;
 }
-export declare const SidebarNavigationTitle: ({ label, icon, iconDir, selected, type, ...props }: SidebarNavigationTitleProps) => import("react/jsx-runtime").JSX.Element;
-export declare const SidebarTitleWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
-    $collapsible?: boolean;
-    $type: "main" | "sqlSidebar";
-}>> & string;
+export declare const SidebarNavigationTitle: PolymorphicComponent<SidebarNavigationTitleProps, "button">;

package/dist/components/Spacer/Spacer.d.ts

@@ -1,5 +1,6 @@
 export type SizeType = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
 export interface SpacerProps {
     size?: SizeType;
+    className?: string;
 }
-export declare const Spacer: ({ size }: SpacerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Spacer: ({ size, className }: SpacerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SplitButton/SplitButton.d.ts

@@ -31,5 +31,5 @@ export interface SplitButtonProps extends DropdownMenuProps, Omit<HTMLAttributes
     icon?: IconName;
     iconDir?: HorizontalDirection;
 }
-export declare const SplitButton: ({ type, disabled, menu, dir, open, defaultOpen, onOpenChange, modal, side, fillWidth, children, icon, iconDir, ...props }: SplitButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SplitButton: ({ type, disabled, menu, dir, open, defaultOpen, onOpenChange, modal, side, fillWidth, children, icon, iconDir, className, ...props }: SplitButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,29 +1,31 @@
+import { default as React } from 'react';
 import * as RadixTabs from "@radix-ui/react-tabs";
 export interface TabsProps extends RadixTabs.TabsProps {
     ariaLabel?: string;
 }
-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>>;
-};
-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>>;
+interface TriggerProps extends RadixTabs.TabsTriggerProps {
+    className?: string;
+}
+declare const Trigger: React.ForwardRefExoticComponent<TriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const Content: React.ForwardRefExoticComponent<RadixTabs.TabsContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const TriggersList: React.ForwardRefExoticComponent<RadixTabs.TabsListProps & React.RefAttributes<HTMLDivElement>>;
+interface TabsCompoundComponent extends React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>> {
+    TriggersList: typeof TriggersList;
+    Trigger: typeof Trigger;
+    Content: typeof Content;
+}
+declare const Tabs: TabsCompoundComponent;
+interface FullWidthTabsProps extends TabsProps {
+}
+interface FullWidthTriggerProps extends RadixTabs.TabsTriggerProps {
+    width?: string;
+    className?: string;
+}
+declare const FullWidthTrigger: React.ForwardRefExoticComponent<FullWidthTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+interface FullWidthTabsCompoundComponent extends React.ForwardRefExoticComponent<FullWidthTabsProps & React.RefAttributes<HTMLDivElement>> {
+    TriggersList: typeof TriggersList;
+    Trigger: typeof FullWidthTrigger;
+    Content: typeof Content;
+}
+declare const FullWidthTabs: FullWidthTabsCompoundComponent;
 export { Tabs, FullWidthTabs };

package/dist/components/ThemeToggle/ThemeToggle.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+
+export declare const ThemeToggle: React.FC;
+export default ThemeToggle;

package/dist/components/Typography/Text/Text.d.ts

@@ -1,18 +1,17 @@
-import { ComponentProps, ElementType, ReactNode } from 'react';
+import { ElementType, ReactNode } from 'react';
 import { TextSize, TextWeight } from '../../commonTypes';
+import { PolymorphicComponent, PolymorphicComponentProps } from '../../../utils/polymorphic';
 
 export type TextAlignment = "left" | "center" | "right";
 export type TextColor = "default" | "muted" | "danger" | "disabled";
-export interface TextProps<T extends ElementType = "p"> {
+export interface TextProps<T extends ElementType = "p"> extends PolymorphicComponentProps<T> {
     children: ReactNode;
     align?: TextAlignment;
     color?: TextColor;
     size?: TextSize;
     weight?: TextWeight;
     className?: string;
-    component?: T;
     fillWidth?: boolean;
 }
-type TextPolymorphicComponent = <T extends ElementType = "p">(props: Omit<ComponentProps<T>, keyof T> & TextProps<T>) => ReactNode;
-declare const Text: TextPolymorphicComponent;
+declare const Text: PolymorphicComponent<TextProps, "p">;
 export { Text };

package/dist/components/VerticalStepper/VerticalStepper.d.ts

@@ -5,9 +5,9 @@ export interface VerticalStepperProps extends HTMLAttributes<HTMLDivElement> {
     type?: StepperType;
 }
 declare const VerticalStepper: {
-    ({ children, type, ...props }: VerticalStepperProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, type, className, ...props }: VerticalStepperProps): import("react/jsx-runtime").JSX.Element;
     Step: {
-        ({ status, children, label, collapsed, disabled, ...props }: VerticalStepProps): import("react/jsx-runtime").JSX.Element;
+        ({ status, children, label, collapsed, disabled, className, ...props }: VerticalStepProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
 };

package/dist/components/commonElement.d.ts

@@ -1,19 +1,23 @@
+import { default as React, HTMLAttributes, ButtonHTMLAttributes, ComponentPropsWithoutRef, ElementType } from 'react';
 import { IconSize } from './Icon/types';
 
-export declare const FormRoot: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $orientation?: "horizontal" | "vertical";
-    $dir?: "start" | "end";
-    $addLabelPadding?: boolean;
-}>> & string;
-export declare const Error: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const EmptyButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
-export declare const CrossButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>, "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;
-export declare const GridCenter: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const BaseButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
-export declare const SvgImageElement: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').SVGProps<SVGSVGElement>, {
-    $size?: IconSize;
-}>> & string;
-export declare const FormElementContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const EllipsisContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+interface FormRootProps extends HTMLAttributes<HTMLDivElement> {
+    orientation?: "horizontal" | "vertical";
+    dir?: "start" | "end";
+    addLabelPadding?: boolean;
+}
+export declare const FormRoot: React.FC<FormRootProps>;
+export declare const Error: React.FC<HTMLAttributes<HTMLDivElement>>;
+export declare const EmptyButton: React.FC<ButtonHTMLAttributes<HTMLButtonElement>>;
+export declare const CrossButton: React.FC<ButtonHTMLAttributes<HTMLButtonElement>>;
+export declare const GridCenter: React.FC<HTMLAttributes<HTMLDivElement>>;
+export declare const BaseButton: React.FC<ButtonHTMLAttributes<HTMLButtonElement>>;
+interface SvgImageElementProps<C extends ElementType = "div"> {
+    as?: C;
+    size?: IconSize;
+    className?: string;
+}
+export declare const SvgImageElement: <C extends ElementType = "svg">({ as, size, className, ...props }: SvgImageElementProps<C> & Omit<ComponentPropsWithoutRef<C>, keyof SvgImageElementProps<C>>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormElementContainer: React.FC<HTMLAttributes<HTMLDivElement>>;
+export declare const EllipsisContainer: React.FC<HTMLAttributes<HTMLSpanElement>>;
+export {};

package/dist/components/commonTypes.d.ts

@@ -1,2 +1,2 @@
-export type TextSize = "xs" | "sm" | "md" | "lg";
+export type TextSize = "xs" | "sm" | "md" | "lg" | "xl";
 export type TextWeight = "normal" | "medium" | "semibold" | "bold" | "mono";

package/dist/components/icons/DataLakes.d.ts

@@ -0,0 +1,4 @@
+import { SVGAttributes } from 'react';
+
+declare const DataLakes: (props: SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default DataLakes;

package/dist/components/icons/HorizontalLoading.d.ts

@@ -1,2 +1,4 @@
-declare const HorizontalLoading: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').SVGAttributes<SVGElement>, never>> & string & Omit<(props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
+import { SVGAttributes } from 'react';
+
+declare const HorizontalLoading: (props: SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
 export default HorizontalLoading;

package/dist/components/icons/Loading.d.ts

@@ -1,4 +1,4 @@
 import { SVGAttributes } from 'react';
 
-declare const LoadingFlipped: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<SVGAttributes<SVGElement>, never>> & string & Omit<(props: SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
+declare const LoadingFlipped: (props: SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
 export default LoadingFlipped;

package/dist/components/icons/LoadingAnimated.d.ts

@@ -1,2 +1,4 @@
-declare const LoadingAnimated: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').SVGAttributes<SVGElement>, never>, never>> & string;
+import { SVGAttributes } from 'react';
+
+declare const LoadingAnimated: (props: SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
 export default LoadingAnimated;

package/dist/components/index.d.ts

@@ -5,7 +5,7 @@ export { Label } from './Label/Label';
 export { GenericLabel } from './GenericLabel/GenericLabel';
 export { Dropdown } from './Dropdown/Dropdown';
 export { Accordion } from './Accordion/Accordion';
-export { Alert, DangerAlert, InfoAlert, WarningAlert, SuccessAlert } from './Alert/Alert';
+export { Alert, DangerAlert, InfoAlert, WarningAlert, SuccessAlert, } from './Alert/Alert';
 export { AutoComplete } from './AutoComplete/AutoComplete';
 export { Avatar } from './Avatar/Avatar';
 export { Badge } from './Badge/Badge';
@@ -18,6 +18,7 @@ export { CardPromotion } from './CardPromotion/CardPromotion';
 export { CardSecondary } from './CardSecondary/CardSecondary';
 export { Checkbox } from './Checkbox/Checkbox';
 export { CodeBlock } from './CodeBlock/CodeBlock';
+export { Collapsible } from './Collapsible/Collapsible';
 export { ConfirmationDialog } from './ConfirmationDialog/ConfirmationDialog';
 export { ContextMenu } from './ContextMenu/ContextMenu';
 export { Container } from './Container/Container';
@@ -37,7 +38,8 @@ export { default as Flags } from './icons/Flags';
 export { Grid } from './Grid/Grid';
 export { HoverCard } from './HoverCard/HoverCard';
 export { Link } from './Link/Link';
-export { linkStyles } from './Link/common';
+export { linkStyles, linkClasses, LINK_CLASSES, } from './Link/linkStyles';
+export type { StyledLinkProps, LinkStyleProps, } from './Link/linkStyles';
 export { Logo } from './Logos/Logo';
 export { NumberField } from './Input/NumberField';
 export { PasswordField } from './Input/PasswordField';
@@ -66,10 +68,11 @@ export { TextAreaField } from './Input/TextArea';
 export { TextField } from './Input/TextField';
 export { Title } from './Typography/Title/Title';
 export { Tooltip } from './Tooltip/Tooltip';
-export { default as ClickUIProvider } from './ClickUIProvider/ClickUIProvider';
+export { ClickUIProvider, ServerClickUIProvider } from '../theme/ClickUIProvider';
 export { useToast } from './Toast/useToast';
 export { createToast } from './Toast/toastEmitter';
 export { UserIcon as ProfileIcon } from './icons/UserIcon';
 export { default as VerticalStepper } from './VerticalStepper/VerticalStepper';
 export { MultiAccordion } from './MultiAccordion/MultiAccordion';
 export { ToastProvider, Toast } from './Toast/Toast';
+export { default as IconWrapper } from './IconWrapper/IconWrapper';