@scalably/ui 0.5.6 → 0.6.0

package/dist/index.d.cts

@@ -1465,7 +1465,7 @@ interface SelectProps extends SelectBaseProps {
  * />
  * ```
  */
-declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement | HTMLSelectElement>>;
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement | HTMLButtonElement>>;
 
 type SkeletonVariant = "text" | "circle" | "rectangle";
 type SkeletonSize = "sm" | "md" | "lg";
@@ -2673,6 +2673,33 @@ declare const RichTextViewer: {
     displayName: string;
 };
 
+interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Label text displayed above the progress bar
+     */
+    label?: string;
+    /**
+     * Current numeric value of the progress
+     */
+    currentValue: number;
+    /**
+     * Maximum possible value
+     */
+    maxValue: number;
+    /**
+     * Whether to display the numeric value next to the bar
+     * @default false
+     */
+    showValue?: boolean;
+    /**
+     * Custom color for the progress bar fill.
+     * Accepts any valid CSS color string.
+     * @default "var(--sui-color-primary)"
+     */
+    color?: string;
+}
+declare const ProgressBar: react.ForwardRefExoticComponent<ProgressBarProps & react.RefAttributes<HTMLDivElement>>;
+
 interface ScalablyUIProviderProps {
     children: React.ReactNode;
     /**
@@ -2718,6 +2745,24 @@ interface ScalablyUIProviderProps {
  */
 declare const ScalablyUIProvider: React.FC<ScalablyUIProviderProps>;
 
+interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * The text to display inside the tag.
+     */
+    value: string;
+    /**
+     * Text color of the tag.
+     * @default "#2772F0"
+     */
+    textColor?: string;
+    /**
+     * Background color of the tag.
+     * @default "#DAECFF"
+     */
+    backgroundColor?: string;
+}
+declare const Tag: react.ForwardRefExoticComponent<TagProps & react.RefAttributes<HTMLSpanElement>>;
+
 /**
  * Type for class values accepted by clsx
  */
@@ -2892,1245 +2937,1261 @@ declare function normalizeAcceptedFileTypes(acceptedFileTypes: string[]): string
  */
 declare function validateFileTypeAndSize(file: File, acceptedMimeTypes: string[], maxFileSize: number): BasicFileValidationError | null;
 
-/**
- * Props for the CalendarIcon component
- */
-interface CalendarIconProps extends React.SVGProps<SVGSVGElement> {
+type SvgProps = React.ComponentPropsWithoutRef<"svg">;
+interface IconBaseProps extends SvgProps {
     /** Size of the icon in pixels. Defaults to 24. */
     size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+    /** ViewBox for the SVG. Defaults to "0 0 24 24". */
+    viewBox?: string;
 }
 /**
- * Calendar icon component - displays a calendar with date indicators.
+ * Public props shared by all icon components.
+ *
+ * Consumers should use this type for icon props. It intentionally omits
+ * `children`, which are provided by each specific icon implementation.
+ */
+type IconProps = Omit<IconBaseProps, "children">;
+
+interface CopyIconProps extends IconProps {
+}
+/**
+ * Copy icon component - displays a copy icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { CalendarIcon } from '@scalably/ui';
+ * import { CopyIcon } from '@scalably/ui';
  *
- * <CalendarIcon size={32} className="sui-text-primary" />
+ * <CopyIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const CalendarIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<CalendarIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const CopyIcon: {
+    (props: CopyIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-/**
- * Props for the CaptureIcon component
- */
-interface CaptureIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 24. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface DeleteIconProps extends IconProps {
 }
 /**
- * Capture icon component - displays a camera icon with a capture button.
+ * Delete icon component - displays a delete icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { CaptureIcon } from '@scalably/ui';
+ * import { DeleteIcon } from '@scalably/ui';
  *
- * <CaptureIcon size={24} className="sui-text-primary" />
+ * <DeleteIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const CaptureIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<CaptureIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const DeleteIcon: {
+    (props: DeleteIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-/**
- * Props for the CheckIcon component
- */
-interface CheckIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 20. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface DownloadIconProps extends IconProps {
 }
 /**
- * Check icon component - displays a checkmark in a green gradient circle.
+ * Download icon component - displays a download icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { CheckIcon } from '@scalably/ui';
+ * import { DownloadIcon } from '@scalably/ui';
  *
- * <CheckIcon size={24} className="sui-text-primary" />
+ * <DownloadIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const CheckIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<CheckIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const DownloadIcon: {
+    (props: DownloadIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-/**
- * Props for the CloseIcon component
- */
-interface CloseIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 24. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface EditIconProps extends IconProps {
 }
 /**
- * Close icon component - displays a cross icon.
+ * Edit icon component - displays an edit icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { CloseIcon } from '@scalably/ui';
+ * import { EditIcon } from '@scalably/ui';
  *
- * <CloseIcon size={24} className="sui-text-primary" />
+ * <EditIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const CloseIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<CloseIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
-
-interface CopyIconProps extends React.SVGProps<SVGSVGElement> {
-    size?: number;
-    className?: string;
-}
-declare const CopyIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<CopyIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
-
-interface CropIconProps extends React.SVGProps<SVGSVGElement> {
-    size?: number;
-    className?: string;
-}
-declare const CropIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<CropIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
-
-interface DeleteIconProps extends React.SVGProps<SVGSVGElement> {
-    size?: number;
-    className?: string;
-}
-declare const DeleteIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<DeleteIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const EditIcon: {
+    (props: EditIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface DropdownIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 24. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface FilterIconProps extends IconProps {
 }
 /**
- * Dropdown icon component - displays a down arrow icon.
+ * Filter icon component - displays a filter icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { DropdownIcon } from '@scalably/ui';
+ * import { FilterIcon } from '@scalably/ui';
  *
- * <DropdownIcon size={24} className="sui-text-primary" />
+ * <FilterIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const DropdownIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<DropdownIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const FilterIcon: {
+    (props: FilterIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface DropUpIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 24. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface ResetIconProps extends IconProps {
 }
 /**
- * DropUp icon component - displays an up arrow icon.
+ * Reset icon component - displays a reset icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { DropUpIcon } from '@scalably/ui';
+ * import { ResetIcon } from '@scalably/ui';
  *
- * <DropUpIcon size={24} className="sui-text-primary" />
+ * <ResetIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const DropUpIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<DropUpIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
-
-interface EditIconProps extends React.SVGProps<SVGSVGElement> {
-    size?: number;
-    className?: string;
-}
-declare const EditIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<EditIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const ResetIcon: {
+    (props: ResetIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface ErrorIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 24. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface SearchIconProps extends IconProps {
 }
 /**
- * Error icon component - displays an error icon.
+ * Search icon component - a magnifying glass icon for search functionality.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { ErrorIcon } from '@scalably/ui';
+ * import { SearchIcon } from '@scalably/ui';
  *
- * <ErrorIcon size={24} className="sui-text-primary" />
+ * <SearchIcon size={20} className="sui-text-blue-500" />
  * ```
  */
-declare const ErrorIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ErrorIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const SearchIcon: {
+    (props: SearchIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface EyeIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 24. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface TranslateIconProps extends IconProps {
 }
 /**
- * Eye icon component - displays an eye icon.
+ * Translate icon component - displays a translate icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { EyeIcon } from '@scalably/ui';
+ * import { TranslateIcon } from '@scalably/ui';
  *
- * <EyeIcon size={24} className="sui-text-primary" />
+ * <TranslateIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const EyeIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<EyeIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const TranslateIcon: {
+    (props: TranslateIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface EyeSlashIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 24. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+/**
+ * Props for the DiscordIcon component
+ */
+interface DiscordIconProps extends IconProps {
 }
 /**
- * Eye slash icon component - displays an eye slash icon.
+ * Discord icon component - displays the Discord logo.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { EyeSlashIcon } from '@scalably/ui';
+ * import { DiscordIcon } from '@scalably/ui';
  *
- * <EyeSlashIcon size={24} className="sui-text-primary" />
+ * <DiscordIcon size={32} className="sui-text-primary" />
  * ```
  */
-declare const EyeSlashIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<EyeSlashIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const DiscordIcon: {
+    ({ size, ...props }: DiscordIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface FileIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 24. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface FacebookIconProps extends IconProps {
 }
 /**
- * File icon component - displays a file icon.
+ * Facebook icon component - displays the Facebook logo.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { FileIcon } from '@scalably/ui';
+ * import { FacebookIcon } from '@scalably/ui';
  *
- * <FileIcon size={24} className="sui-text-primary" />
+ * <FacebookIcon size={32} className="sui-text-primary" />
  * ```
  */
-declare const FileIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<FileIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const FacebookIcon: {
+    ({ size, ...props }: FacebookIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface FileUploadIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 24. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface GmailIconProps extends IconProps {
 }
 /**
- * FileUpload icon component - displays a file upload icon.
+ * Gmail icon component - displays the Gmail logo.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { FileUploadIcon } from '@scalably/ui';
+ * import { GmailIcon } from '@scalably/ui';
  *
- * <FileUploadIcon size={24} className="sui-text-primary" />
+ * <GmailIcon size={32} className="sui-text-primary" />
  * ```
  */
-declare const FileUploadIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<FileUploadIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const GmailIcon: {
+    ({ size, ...props }: GmailIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface GridIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 24. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface InstagramIconProps extends IconProps {
 }
 /**
- * Grid icon component - displays a grid icon.
+ * Instagram icon component - displays the Instagram logo.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { GridIcon } from '@scalably/ui';
+ * import { InstagramIcon } from '@scalably/ui';
  *
- * <GridIcon size={24} className="sui-text-primary" />
+ * <InstagramIcon size={32} className="sui-text-primary" />
  * ```
  */
-declare const GridIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<GridIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const InstagramIcon: {
+    ({ size, ...props }: InstagramIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface ImageIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 24. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface KakaoTalkIconProps extends IconProps {
 }
 /**
- * Image icon component - displays an image icon.
+ * KakaoTalk icon component - displays the KakaoTalk logo.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { ImageIcon } from '@scalably/ui';
+ * import { KakaoTalkIcon } from '@scalably/ui';
  *
- * <ImageIcon size={24} className="sui-text-primary" />
+ * <KakaoTalkIcon size={32} className="sui-text-primary" />
  * ```
  */
-declare const ImageIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ImageIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const KakaoTalkIcon: {
+    ({ size, ...props }: KakaoTalkIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface ImageUploadIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 24. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface LineIconProps extends IconProps {
 }
 /**
- * ImageUpload icon component - displays an image upload icon.
+ * Line icon component - displays the Line logo.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { ImageUploadIcon } from '@scalably/ui';
+ * import { LineIcon } from '@scalably/ui';
  *
- * <ImageUploadIcon size={24} className="sui-text-primary" />
+ * <LineIcon size={32} className="sui-text-primary" />
  * ```
  */
-declare const ImageUploadIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ImageUploadIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const LineIcon: {
+    ({ size, ...props }: LineIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface IndeterminateIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 20. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface LinkedInIconProps extends IconProps {
 }
 /**
- * Indeterminate icon component - displays an indeterminate icon.
+ * LinkedIn icon component - displays the LinkedIn logo.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { IndeterminateIcon } from '@scalably/ui';
+ * import { LinkedInIcon } from '@scalably/ui';
  *
- * <IndeterminateIcon size={20} className="sui-text-primary" />
+ * <LinkedInIcon size={32} className="sui-text-primary" />
  * ```
  */
-declare const IndeterminateIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<IndeterminateIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const LinkedInIcon: {
+    ({ size, ...props }: LinkedInIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface InfoIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 24. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface MessengerIconProps extends IconProps {
 }
 /**
- * Info icon component - displays an info icon.
+ * Messenger icon component - displays the Messenger logo.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { InfoIcon } from '@scalably/ui';
+ * import { MessengerIcon } from '@scalably/ui';
  *
- * <InfoIcon size={24} className="sui-text-primary" />
+ * <MessengerIcon size={32} className="sui-text-primary" />
  * ```
  */
-declare const InfoIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<InfoIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const MessengerIcon: {
+    ({ size, ...props }: MessengerIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface ListIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 24. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface RedditIconProps extends IconProps {
 }
 /**
- * List icon component - displays a list icon.
+ * Reddit icon component - displays the Reddit logo.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { ListIcon } from '@scalably/ui';
+ * import { RedditIcon } from '@scalably/ui';
  *
- * <ListIcon size={24} className="sui-text-primary" />
+ * <RedditIcon size={32} className="sui-text-primary" />
  * ```
  */
-declare const ListIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ListIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const RedditIcon: {
+    ({ size, ...props }: RedditIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface MinusIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 16. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface SignalIconProps extends IconProps {
 }
 /**
- * Minus icon component - displays a minus icon.
+ * Signal icon component - displays the Signal logo.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { MinusIcon } from '@scalably/ui';
+ * import { SignalIcon } from '@scalably/ui';
  *
- * <MinusIcon size={16} className="sui-text-primary" />
+ * <SignalIcon size={32} className="sui-text-primary" />
  * ```
  */
-declare const MinusIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<MinusIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const SignalIcon: {
+    ({ size, ...props }: SignalIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface MultipleSelectionIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 24. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface SlackIconProps extends IconProps {
 }
 /**
- * MultipleSelection icon component - displays a multiple selection icon.
+ * Slack icon component - displays the Slack logo.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { MultipleSelectionIcon } from '@scalably/ui';
+ * import { SlackIcon } from '@scalably/ui';
  *
- * <MultipleSelectionIcon size={24} className="sui-text-primary" />
+ * <SlackIcon size={32} className="sui-text-primary" />
  * ```
  */
-declare const MultipleSelectionIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<MultipleSelectionIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const SlackIcon: {
+    ({ size, ...props }: SlackIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-/**
- * Props for the PlusIcon component
- */
-interface PlusIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 16. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface TelegramIconProps extends IconProps {
 }
 /**
- * Plus icon component - displays a plus icon.
+ * Telegram icon component - displays the Telegram logo.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { PlusIcon } from '@scalably/ui';
+ * import { TelegramIcon } from '@scalably/ui';
  *
- * <PlusIcon size={16} className="sui-text-primary" />
+ * <TelegramIcon size={32} className="sui-text-primary" />
  * ```
  */
-declare const PlusIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<PlusIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const TelegramIcon: {
+    ({ size, ...props }: TelegramIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface ResetIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 24. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface TiktokIconProps extends IconProps {
 }
 /**
- * Reset icon component - displays a reset icon.
+ * Tiktok icon component - displays the Tiktok logo.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { ResetIcon } from '@scalably/ui';
+ * import { TiktokIcon } from '@scalably/ui';
  *
- * <ResetIcon size={24} className="sui-text-primary" />
+ * <TiktokIcon size={32} className="sui-text-primary" />
  * ```
  */
-declare const ResetIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ResetIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const TiktokIcon: {
+    ({ size, ...props }: TiktokIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface RotateLeftIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 24. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface TwitchIconProps extends IconProps {
 }
 /**
- * RotateLeft icon component - displays a rotate left icon.
+ * Twitch icon component - displays the Twitch logo.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { RotateLeftIcon } from '@scalably/ui';
+ * import { TwitchIcon } from '@scalably/ui';
  *
- * <RotateLeftIcon size={24} className="sui-text-primary" />
+ * <TwitchIcon size={32} className="sui-text-primary" />
  * ```
  */
-declare const RotateLeftIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<RotateLeftIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const TwitchIcon: {
+    ({ size, ...props }: TwitchIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface RotateRightIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 24. */
-    size?: number;
-    /** Stroke width of the icon in pixels. Defaults to 1.5. */
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface WhatsAppIconProps extends IconProps {
 }
 /**
- * RotateRight icon component - displays a rotate right icon.
+ * WhatsApp icon component - displays the WhatsApp logo.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { RotateRightIcon } from '@scalably/ui';
+ * import { WhatsAppIcon } from '@scalably/ui';
  *
- * <RotateRightIcon size={24} className="sui-text-primary" />
+ * <WhatsAppIcon size={32} className="sui-text-primary" />
  * ```
  */
-declare const RotateRightIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<RotateRightIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const WhatsAppIcon: {
+    ({ size, ...props }: WhatsAppIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
+interface XIconProps extends IconProps {
+}
 /**
- * Props for the SearchIcon component
+ * X icon component - displays the X logo.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { XIcon } from '@scalably/ui';
+ *
+ * <XIcon size={32} className="sui-text-primary" />
+ * ```
  */
-interface SearchIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 24. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+declare const XIcon: {
+    ({ size, ...props }: XIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface YoutubeIconProps extends IconProps {
 }
 /**
- * Search icon component - a magnifying glass icon for search functionality.
+ * Youtube icon component - displays the Youtube logo.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { SearchIcon } from '@scalably/ui';
+ * import { YoutubeIcon } from '@scalably/ui';
  *
- * <SearchIcon size={20} className="sui-text-blue-500" />
+ * <YoutubeIcon size={32} className="sui-text-primary" />
  * ```
  */
-declare const SearchIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<SearchIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const YoutubeIcon: {
+    ({ size, ...props }: YoutubeIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface SettingsIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 24. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface AlignCenterIconProps extends IconProps {
+}
+declare const AlignCenterIcon: {
+    ({ size, ...props }: AlignCenterIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface AlignLeftIconProps extends IconProps {
+}
+declare const AlignLeftIcon: {
+    ({ size, ...props }: AlignLeftIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface AlignRightIconProps extends IconProps {
+}
+declare const AlignRightIcon: {
+    ({ size, ...props }: AlignRightIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface BoldIconProps extends IconProps {
 }
 /**
- * Settings icon component - displays a settings icon.
+ * Bold icon component - displays a bold icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { SettingsIcon } from '@scalably/ui';
+ * import { BoldIcon } from '@scalably/ui';
  *
- * <SettingsIcon size={24} className="sui-text-primary" />
+ * <BoldIcon size={16} className="sui-text-primary" />
  * ```
  */
-declare const SettingsIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<SettingsIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const BoldIcon: {
+    ({ size, ...props }: BoldIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface InsertImageIconProps extends IconProps {
+}
+declare const InsertImageIcon: {
+    ({ size, ...props }: InsertImageIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
+interface InsertVideoIconProps extends IconProps {
+}
+declare const InsertVideoIcon: {
+    ({ size, ...props }: InsertVideoIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface ItalicIconProps extends IconProps {
+}
 /**
- * Props for the StarIcon component
+ * Italic icon component - displays an italic icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { ItalicIcon } from '@scalably/ui';
+ *
+ * <ItalicIcon size={16} className="sui-text-primary" />
+ * ```
  */
-interface StarIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 24. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
-    /** Fill percentage (0-1) for partial star rendering. Defaults to 1 (full star). */
-    fillPercentage?: number;
+declare const ItalicIcon: {
+    ({ size, ...props }: ItalicIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface LinkIconProps extends IconProps {
+}
+declare const LinkIcon: {
+    ({ size, ...props }: LinkIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface ListBulletIconProps extends IconProps {
+}
+declare const ListBulletIcon: {
+    ({ size, ...props }: ListBulletIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface ListNumberIconProps extends IconProps {
+}
+declare const ListNumberIcon: {
+    ({ size, ...props }: ListNumberIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface UnderlineIconProps extends IconProps {
 }
 /**
- * Star icon component - displays a star shape.
+ * Underline icon component - displays an underline icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
- * Supports partial fill for half-star ratings.
  *
  * @example
  * ```tsx
- * import { StarIcon } from '@scalably/ui';
+ * import { UnderlineIcon } from '@scalably/ui';
  *
- * <StarIcon size={24} className="sui-text-yellow-500" />
- * <StarIcon size={24} fillPercentage={0.5} className="sui-text-yellow-500" />
+ * <UnderlineIcon size={16} className="sui-text-primary" />
  * ```
  */
-declare const StarIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<StarIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const UnderlineIcon: {
+    ({ size, ...props }: UnderlineIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
+interface FileIconProps extends IconProps {
+}
 /**
- * Props for the SuccessIcon component
+ * File icon component - displays a file icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { FileIcon } from '@scalably/ui';
+ *
+ * <FileIcon size={24} className="sui-text-primary" />
+ * ```
  */
-interface SuccessIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 24. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+declare const FileIcon: {
+    (props: FileIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface FileUploadIconProps extends IconProps {
 }
 /**
- * Success icon component - displays a checkmark in a green gradient circle.
+ * FileUpload icon component - displays a file upload icon.
  *
- * **Note:** This icon has fixed brand colors (green gradient with white checkmark)
- * and cannot be customized. Use for success/confirmation states.
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { SuccessIcon } from '@scalably/ui';
+ * import { FileUploadIcon } from '@scalably/ui';
  *
- * <SuccessIcon size={24} />
+ * <FileUploadIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const SuccessIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<SuccessIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const FileUploadIcon: {
+    (props: FileUploadIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface TickIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 16. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface ImageIconProps extends IconProps {
 }
 /**
- * Tick icon component - displays a tick icon.
+ * Image icon component - displays an image icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { TickIcon } from '@scalably/ui';
+ * import { ImageIcon } from '@scalably/ui';
  *
- * <TickIcon size={16} className="sui-text-primary" />
+ * <ImageIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const TickIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<TickIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const ImageIcon: {
+    (props: ImageIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface ToFirstIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 24. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface ImageUploadIconProps extends IconProps {
 }
 /**
- * ToFirst icon component - displays a to first icon.
+ * ImageUpload icon component - displays an image upload icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { ToFirstIcon } from '@scalably/ui';
+ * import { ImageUploadIcon } from '@scalably/ui';
  *
- * <ToFirstIcon size={24} className="sui-text-primary" />
+ * <ImageUploadIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const ToFirstIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ToFirstIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const ImageUploadIcon: {
+    (props: ImageUploadIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface ToLastIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 24. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface VideoIconProps extends IconProps {
 }
 /**
- * ToLast icon component - displays a to last icon.
+ * Video icon component - displays a video icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { ToLastIcon } from '@scalably/ui';
+ * import { VideoIcon } from '@scalably/ui';
  *
- * <ToLastIcon size={24} className="sui-text-primary" />
+ * <VideoIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const ToLastIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ToLastIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const VideoIcon: {
+    (props: VideoIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface ToNextIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 24. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface VideoUploadIconProps extends IconProps {
 }
 /**
- * ToNext icon component - displays a to next icon.
+ * VideoUpload icon component - displays a video upload icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { ToNextIcon } from '@scalably/ui';
+ * import { VideoUploadIcon } from '@scalably/ui';
  *
- * <ToNextIcon size={24} className="sui-text-primary" />
+ * <VideoUploadIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const ToNextIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ToNextIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const VideoUploadIcon: {
+    (props: VideoUploadIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface ToPreviousIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 24. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface CaptureIconProps extends IconProps {
 }
 /**
- * ToPrevious icon component - displays a to previous icon.
+ * Capture icon component - displays a camera icon with a capture button.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { ToPreviousIcon } from '@scalably/ui';
+ * import { CaptureIcon } from '@scalably/ui';
  *
- * <ToPreviousIcon size={24} className="sui-text-primary" />
+ * <CaptureIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const ToPreviousIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ToPreviousIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const CaptureIcon: {
+    (props: CaptureIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface TranslateIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 24. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface CropIconProps extends IconProps {
 }
 /**
- * Translate icon component - displays a translate icon.
+ * Crop icon component - displays a crop icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { TranslateIcon } from '@scalably/ui';
+ * import { CropIcon } from '@scalably/ui';
  *
- * <TranslateIcon size={24} className="sui-text-primary" />
+ * <CropIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const TranslateIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<TranslateIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const CropIcon: {
+    (props: CropIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface VideoIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 24. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface RotateLeftIconProps extends IconProps {
 }
 /**
- * Video icon component - displays a video icon.
+ * RotateLeft icon component - displays a rotate left icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { VideoIcon } from '@scalably/ui';
+ * import { RotateLeftIcon } from '@scalably/ui';
  *
- * <VideoIcon size={24} className="sui-text-primary" />
+ * <RotateLeftIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const VideoIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<VideoIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const RotateLeftIcon: {
+    (props: RotateLeftIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface VideoUploadIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 24. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface RotateRightIconProps extends IconProps {
 }
 /**
- * VideoUpload icon component - displays a video upload icon.
+ * RotateRight icon component - displays a rotate right icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { VideoUploadIcon } from '@scalably/ui';
+ * import { RotateRightIcon } from '@scalably/ui';
  *
- * <VideoUploadIcon size={24} className="sui-text-primary" />
+ * <RotateRightIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const RotateRightIcon: {
+    (props: RotateRightIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface DropdownIconProps extends IconProps {
+}
+/**
+ * Dropdown icon component - displays a down arrow icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { DropdownIcon } from '@scalably/ui';
+ *
+ * <DropdownIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const DropdownIcon: {
+    (props: DropdownIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface DropUpIconProps extends IconProps {
+}
+/**
+ * DropUp icon component - displays an up arrow icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { DropUpIcon } from '@scalably/ui';
+ *
+ * <DropUpIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const DropUpIcon: {
+    (props: DropUpIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface ToFirstIconProps extends IconProps {
+}
+/**
+ * ToFirst icon component - displays a to first icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { ToFirstIcon } from '@scalably/ui';
+ *
+ * <ToFirstIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const VideoUploadIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<VideoUploadIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const ToFirstIcon: {
+    (props: ToFirstIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface WarnIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 24. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface ToLastIconProps extends IconProps {
 }
 /**
- * Warn icon component - displays a warn icon.
+ * ToLast icon component - displays a to last icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { WarnIcon } from '@scalably/ui';
+ * import { ToLastIcon } from '@scalably/ui';
  *
- * <WarnIcon size={24} className="sui-text-primary" />
+ * <ToLastIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const WarnIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<WarnIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const ToLastIcon: {
+    (props: ToLastIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-/**
- * Props for the DiscordIcon component
- */
-interface DiscordIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 32. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface ToNextIconProps extends IconProps {
 }
 /**
- * Discord icon component - displays the Discord logo.
+ * ToNext icon component - displays a to next icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { DiscordIcon } from '@scalably/ui';
+ * import { ToNextIcon } from '@scalably/ui';
  *
- * <DiscordIcon size={32} className="sui-text-primary" />
+ * <ToNextIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const DiscordIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<DiscordIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const ToNextIcon: {
+    (props: ToNextIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface FacebookIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 32. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface ToPreviousIconProps extends IconProps {
 }
 /**
- * Facebook icon component - displays the Facebook logo.
+ * ToPrevious icon component - displays a to previous icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { FacebookIcon } from '@scalably/ui';
+ * import { ToPreviousIcon } from '@scalably/ui';
  *
- * <FacebookIcon size={32} className="sui-text-primary" />
+ * <ToPreviousIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const FacebookIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<FacebookIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const ToPreviousIcon: {
+    (props: ToPreviousIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface GmailIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 32. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface CheckIconProps extends IconProps {
 }
 /**
- * Gmail icon component - displays the Gmail logo.
+ * Check icon component - displays a checkmark in a green gradient circle.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { GmailIcon } from '@scalably/ui';
+ * import { CheckIcon } from '@scalably/ui';
  *
- * <GmailIcon size={32} className="sui-text-primary" />
+ * <CheckIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const GmailIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<GmailIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const CheckIcon: {
+    (props: CheckIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface InstagramIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 32. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface CloseIconProps extends IconProps {
 }
 /**
- * Instagram icon component - displays the Instagram logo.
+ * Close icon component - displays a cross icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { InstagramIcon } from '@scalably/ui';
+ * import { CloseIcon } from '@scalably/ui';
  *
- * <InstagramIcon size={32} className="sui-text-primary" />
+ * <CloseIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const InstagramIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<InstagramIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const CloseIcon: {
+    (props: CloseIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface KakaoTalkIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 32. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface ErrorIconProps extends IconProps {
 }
 /**
- * KakaoTalk icon component - displays the KakaoTalk logo.
+ * Error icon component - displays an error icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { KakaoTalkIcon } from '@scalably/ui';
+ * import { ErrorIcon } from '@scalably/ui';
  *
- * <KakaoTalkIcon size={32} className="sui-text-primary" />
+ * <ErrorIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const KakaoTalkIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<KakaoTalkIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const ErrorIcon: {
+    (props: ErrorIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface LineIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 32. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface IndeterminateIconProps extends IconProps {
 }
 /**
- * Line icon component - displays the Line logo.
+ * Indeterminate icon component - displays an indeterminate icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { LineIcon } from '@scalably/ui';
+ * import { IndeterminateIcon } from '@scalably/ui';
  *
- * <LineIcon size={32} className="sui-text-primary" />
+ * <IndeterminateIcon size={20} className="sui-text-primary" />
  * ```
  */
-declare const LineIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<LineIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const IndeterminateIcon: {
+    (props: IndeterminateIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface LinkedInIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 32. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface InfoIconProps extends IconProps {
 }
 /**
- * LinkedIn icon component - displays the LinkedIn logo.
+ * Info icon component - displays an info icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { LinkedInIcon } from '@scalably/ui';
+ * import { InfoIcon } from '@scalably/ui';
  *
- * <LinkedInIcon size={32} className="sui-text-primary" />
+ * <InfoIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const LinkedInIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<LinkedInIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const InfoIcon: {
+    (props: InfoIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface MessengerIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 32. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface SuccessIconProps extends IconProps {
 }
 /**
- * Messenger icon component - displays the Messenger logo.
+ * Success icon component - displays a checkmark in a green gradient circle.
  *
- * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ * **Note:** This icon has fixed brand colors (green gradient with white checkmark)
+ * and cannot be customized. Use for success/confirmation states.
  *
  * @example
  * ```tsx
- * import { MessengerIcon } from '@scalably/ui';
+ * import { SuccessIcon } from '@scalably/ui';
  *
- * <MessengerIcon size={32} className="sui-text-primary" />
+ * <SuccessIcon size={24} />
  * ```
  */
-declare const MessengerIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<MessengerIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const SuccessIcon: {
+    (props: SuccessIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface RedditIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 32. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface TickIconProps extends IconProps {
 }
 /**
- * Reddit icon component - displays the Reddit logo.
+ * Tick icon component - displays a tick icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { RedditIcon } from '@scalably/ui';
+ * import { TickIcon } from '@scalably/ui';
  *
- * <RedditIcon size={32} className="sui-text-primary" />
+ * <TickIcon size={16} className="sui-text-primary" />
  * ```
  */
-declare const RedditIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<RedditIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const TickIcon: {
+    (props: TickIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface SignalIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 32. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface WarnIconProps extends IconProps {
 }
 /**
- * Signal icon component - displays the Signal logo.
+ * Warn icon component - displays a warn icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { SignalIcon } from '@scalably/ui';
+ * import { WarnIcon } from '@scalably/ui';
  *
- * <SignalIcon size={32} className="sui-text-primary" />
+ * <WarnIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const SignalIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<SignalIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const WarnIcon: {
+    (props: WarnIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface SlackIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 32. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface CalendarIconProps extends IconProps {
 }
 /**
- * Slack icon component - displays the Slack logo.
+ * Calendar icon component - displays a calendar with date indicators.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { SlackIcon } from '@scalably/ui';
+ * import { CalendarIcon } from '@scalably/ui';
  *
- * <SlackIcon size={32} className="sui-text-primary" />
+ * <CalendarIcon size={32} className="sui-text-primary" />
  * ```
  */
-declare const SlackIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<SlackIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const CalendarIcon: {
+    (props: CalendarIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface TelegramIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 32. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface EyeIconProps extends IconProps {
 }
 /**
- * Telegram icon component - displays the Telegram logo.
+ * Eye icon component - displays an eye icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { TelegramIcon } from '@scalably/ui';
+ * import { EyeIcon } from '@scalably/ui';
  *
- * <TelegramIcon size={32} className="sui-text-primary" />
+ * <EyeIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const TelegramIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<TelegramIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const EyeIcon: {
+    (props: EyeIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface TiktokIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 32. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface EyeSlashIconProps extends IconProps {
 }
 /**
- * Tiktok icon component - displays the Tiktok logo.
+ * Eye slash icon component - displays an eye slash icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { TiktokIcon } from '@scalably/ui';
+ * import { EyeSlashIcon } from '@scalably/ui';
  *
- * <TiktokIcon size={32} className="sui-text-primary" />
+ * <EyeSlashIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const TiktokIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<TiktokIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const EyeSlashIcon: {
+    (props: EyeSlashIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface TwitchIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 32. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface GridIconProps extends IconProps {
 }
 /**
- * Twitch icon component - displays the Twitch logo.
+ * Grid icon component - displays a grid icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { TwitchIcon } from '@scalably/ui';
+ * import { GridIcon } from '@scalably/ui';
  *
- * <TwitchIcon size={32} className="sui-text-primary" />
+ * <GridIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const TwitchIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<TwitchIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const GridIcon: {
+    (props: GridIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface WhatsAppIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 32. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface ListIconProps extends IconProps {
 }
 /**
- * WhatsApp icon component - displays the WhatsApp logo.
+ * List icon component - displays a list icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { WhatsAppIcon } from '@scalably/ui';
+ * import { ListIcon } from '@scalably/ui';
  *
- * <WhatsAppIcon size={32} className="sui-text-primary" />
+ * <ListIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const WhatsAppIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<WhatsAppIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const ListIcon: {
+    (props: ListIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface XIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 32. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface MinusIconProps extends IconProps {
 }
 /**
- * X icon component - displays the X logo.
+ * Minus icon component - displays a minus icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { XIcon } from '@scalably/ui';
+ * import { MinusIcon } from '@scalably/ui';
  *
- * <XIcon size={32} className="sui-text-primary" />
+ * <MinusIcon size={16} className="sui-text-primary" />
  * ```
  */
-declare const XIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<XIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const MinusIcon: {
+    (props: MinusIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface YoutubeIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 32. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface MultipleSelectionIconProps extends IconProps {
 }
 /**
- * Youtube icon component - displays the Youtube logo.
+ * MultipleSelection icon component - displays a multiple selection icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { YoutubeIcon } from '@scalably/ui';
+ * import { MultipleSelectionIcon } from '@scalably/ui';
  *
- * <YoutubeIcon size={32} className="sui-text-primary" />
+ * <MultipleSelectionIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const YoutubeIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<YoutubeIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
-
-interface AlignCenterIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 16. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
-}
-declare const AlignCenterIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<AlignCenterIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
-
-interface AlignLeftIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 16. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
-}
-declare const AlignLeftIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<AlignLeftIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
-
-interface AlignRightIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 16. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
-}
-declare const AlignRightIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<AlignRightIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const MultipleSelectionIcon: {
+    (props: MultipleSelectionIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface BoldIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 16. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface PlusIconProps extends IconProps {
 }
 /**
- * Bold icon component - displays a bold icon.
+ * Plus icon component - displays a plus icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { BoldIcon } from '@scalably/ui';
+ * import { PlusIcon } from '@scalably/ui';
  *
- * <BoldIcon size={16} className="sui-text-primary" />
+ * <PlusIcon size={16} className="sui-text-primary" />
  * ```
  */
-declare const BoldIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<BoldIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
-
-interface InsertImageIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 16. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
-}
-declare const InsertImageIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<InsertImageIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
-
-interface InsertVideoIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 16. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
-}
-declare const InsertVideoIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<InsertVideoIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const PlusIcon: {
+    (props: PlusIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface ItalicIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 16. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+interface SettingsIconProps extends IconProps {
 }
 /**
- * Italic icon component - displays an italic icon.
+ * Settings icon component - displays a settings icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { ItalicIcon } from '@scalably/ui';
+ * import { SettingsIcon } from '@scalably/ui';
  *
- * <ItalicIcon size={16} className="sui-text-primary" />
+ * <SettingsIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const ItalicIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ItalicIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
-
-interface LinkIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 16. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
-}
-declare const LinkIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<LinkIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
-
-interface ListBulletIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 16. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
-}
-declare const ListBulletIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ListBulletIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
-
-interface ListNumberIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 16. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
-}
-declare const ListNumberIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ListNumberIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const SettingsIcon: {
+    (props: SettingsIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface UnderlineIconProps extends React.SVGProps<SVGSVGElement> {
-    /** Size of the icon in pixels. Defaults to 16. */
-    size?: number;
-    /** Additional CSS classes to apply to the icon */
-    className?: string;
+/**
+ * Props for the StarIcon component
+ */
+interface StarIconProps extends IconProps {
+    /** Fill percentage (0-1) for partial star rendering. Defaults to 1 (full star). */
+    fillPercentage?: number;
 }
 /**
- * Underline icon component - displays an underline icon.
+ * Star icon component - displays a star shape.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ * Supports partial fill for half-star ratings.
  *
  * @example
  * ```tsx
- * import { UnderlineIcon } from '@scalably/ui';
+ * import { StarIcon } from '@scalably/ui';
  *
- * <UnderlineIcon size={16} className="sui-text-primary" />
+ * <StarIcon size={24} className="sui-text-yellow-500" />
+ * <StarIcon size={24} fillPercentage={0.5} className="sui-text-yellow-500" />
  * ```
  */
-declare const UnderlineIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<UnderlineIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const StarIcon: react.MemoExoticComponent<({ fillPercentage, ...props }: StarIconProps) => react_jsx_runtime.JSX.Element>;
 
-export { AlignCenterIcon, type AlignCenterIconProps, AlignLeftIcon, type AlignLeftIconProps, AlignRightIcon, type AlignRightIconProps, AppLogo, AuthPrompt, type AuthPromptProps, AvatarPlaceholder, type AvatarPlaceholderCategory, type AvatarPlaceholderProps, type AvatarPlaceholderVariant, BackToTop, type BackToTopProps, type BasicFileValidationError, BoldIcon, type BoldIconProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, type CalendarIconProps, CampaignLogo, CaptureIcon, type CaptureIconProps, CelebrationModal, type CelebrationModalProps, CheckBox, CheckBoxGroup, type CheckBoxGroupOption, type CheckBoxGroupProps, type CheckBoxProps, CheckIcon, type CheckIconProps, CloseIcon, type CloseIconProps, CopyIcon, type CopyIconProps, Countdown, type CountdownProps, type CountdownSize, type CountdownTimeValues, type CountdownUnit, CropIcon, type CropIconProps, type CroppedImageResult, DateInput, type DateInputMode, type DateInputProps, DatePicker, type DatePickerMode, type DatePickerProps, type DefaultAssetCategory, type DefaultAssetComponent, type DefaultAssetProps, type DefaultAssetVariant, type DefaultAssets, DeleteIcon, type DeleteIconProps, DiscordIcon, type DiscordIconProps, Divider, type DividerProps, type DividerVariant, DropUpIcon, type DropUpIconProps, DropdownIcon, type DropdownIconProps, EditIcon, type EditIconProps, ErrorIcon, type ErrorIconProps, EyeIcon, type EyeIconProps, EyeSlashIcon, type EyeSlashIconProps, FacebookIcon, type FacebookIconProps, type FieldErrorLike, FileIcon, type FileIconProps, FileUpload, type FileUploadError, type FileUploadFile, FileUploadIcon, type FileUploadIconProps, type FileUploadIconType, type FileUploadProps, type FileUploadSize, type FileUploadVariant, Form, type FormErrorItem, FormErrorSummary, type FormErrorSummaryProps, FormField, type FormFieldProps, type FormProps, type GetCroppedImgOptions, GmailIcon, type GmailIconProps, GridIcon, type GridIconProps, GroupAvatar, IconBigLogo, IconLogo, ImageCrop, ImageCropModal, type ImageCropModalProps, type ImageCropProps, ImageIcon, type ImageIconProps, ImagePlaceholder, type ImageSourceMode, ImageUploadIcon, type ImageUploadIconProps, IndeterminateIcon, type IndeterminateIconProps, InfoIcon, type InfoIconProps, Input, type InputProps, type InputVariant, InsertImageIcon, type InsertImageIconProps, InsertVideoIcon, type InsertVideoIconProps, InstagramIcon, type InstagramIconProps, ItalicIcon, type ItalicIconProps, KakaoTalkIcon, type KakaoTalkIconProps, LineIcon, type LineIconProps, LinkIcon, type LinkIconProps, LinkedInIcon, type LinkedInIconProps, ListBulletIcon, type ListBulletIconProps, ListIcon, type ListIconProps, ListNumberIcon, type ListNumberIconProps, LoadingScreen, type LoadingScreenProps, LoadingSpinner, type LoadingSpinnerProps, Logo, type LogoAssetComponent, type LogoAssetProps, type LogoAssets, type LogoFormat, type LogoProps, type LogoVariant, MessengerIcon, type MessengerIconProps, MinusIcon, type MinusIconProps, MultipleSelectionButton, type MultipleSelectionButtonProps, MultipleSelectionIcon, type MultipleSelectionIconProps, Pagination, type PaginationProps, PlusIcon, type PlusIconProps, ProfileAvatar, QuantityInput, type QuantityInputProps, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, type RangeValue, Rating, type RatingProps, RedditIcon, type RedditIconProps, ResetIcon, type ResetIconProps, RichTextEditor, type RichTextEditorProps, RichTextViewer, type RichTextViewerProps, RotateLeftIcon, type RotateLeftIconProps, RotateRightIcon, type RotateRightIconProps, ScalablyUIProvider, type ScalablyUIProviderProps, SearchIcon, type SearchIconProps, SearchInput, type SearchInputProps, type SearchInputVariant, Select, type SelectOption, type SelectProps, type SelectVariant, SettingsIcon, type SettingsIconProps, SignalIcon, type SignalIconProps, Skeleton, type SkeletonProps, type SkeletonSize, SkeletonText, type SkeletonTextProps, type SkeletonVariant, SlackIcon, type SlackIconProps, StarIcon, type StarIconProps, StatusBadge, type StatusBadgeProps, type StatusBadgeSize, type StatusBadgeStatus, type StatusBadgeVariant, SuccessIcon, type SuccessIconProps, Switch, type SwitchProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TelegramIcon, type TelegramIconProps, TickIcon, type TickIconProps, TiktokIcon, type TiktokIconProps, TimePicker, type TimePickerProps, ToFirstIcon, type ToFirstIconProps, ToLastIcon, type ToLastIconProps, ToNextIcon, type ToNextIconProps, ToPreviousIcon, type ToPreviousIconProps, Toast, type ToastAction, ToastContainer, type ToastContainerProps, type ToastPosition, type ToastProps, type ToastStatus, Tooltip, type TooltipAlign, type TooltipProps, type TooltipSide, TranslateIcon, type TranslateIconProps, TwitchIcon, type TwitchIconProps, UnderlineIcon, type UnderlineIconProps, VideoIcon, type VideoIconProps, VideoUploadIcon, type VideoUploadIconProps, type ViewMode, ViewToggle, type ViewToggleProps, WarnIcon, type WarnIconProps, WelcomeBackground, type WelcomeBackgroundProps, WhatsAppIcon, type WhatsAppIconProps, XIcon, type XIconProps, YoutubeIcon, type YoutubeIconProps, clampDate, cn, daysGrid, debounce, defaultAssets, extensionToMimeType, fieldErrorToProps, formatAcceptedFileTypes, formatDateLocalized, getCroppedImg, logoAssets, mimeTypeToDisplayName, monthsForLocale, normalizeAcceptedFileTypes, scopeClass, throttle, toDateKey, validateFileTypeAndSize, weekdaysForLocale, welcomeAssets, zodErrorsToSummary };
+export { AlignCenterIcon, type AlignCenterIconProps, AlignLeftIcon, type AlignLeftIconProps, AlignRightIcon, type AlignRightIconProps, AppLogo, AuthPrompt, type AuthPromptProps, AvatarPlaceholder, type AvatarPlaceholderCategory, type AvatarPlaceholderProps, type AvatarPlaceholderVariant, BackToTop, type BackToTopProps, type BasicFileValidationError, BoldIcon, type BoldIconProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, type CalendarIconProps, CampaignLogo, CaptureIcon, type CaptureIconProps, CelebrationModal, type CelebrationModalProps, CheckBox, CheckBoxGroup, type CheckBoxGroupOption, type CheckBoxGroupProps, type CheckBoxProps, CheckIcon, type CheckIconProps, CloseIcon, type CloseIconProps, CopyIcon, type CopyIconProps, Countdown, type CountdownProps, type CountdownSize, type CountdownTimeValues, type CountdownUnit, CropIcon, type CropIconProps, type CroppedImageResult, DateInput, type DateInputMode, type DateInputProps, DatePicker, type DatePickerMode, type DatePickerProps, type DefaultAssetCategory, type DefaultAssetComponent, type DefaultAssetProps, type DefaultAssetVariant, type DefaultAssets, DeleteIcon, type DeleteIconProps, DiscordIcon, type DiscordIconProps, Divider, type DividerProps, type DividerVariant, DownloadIcon, type DownloadIconProps, DropUpIcon, type DropUpIconProps, DropdownIcon, type DropdownIconProps, EditIcon, type EditIconProps, ErrorIcon, type ErrorIconProps, EyeIcon, type EyeIconProps, EyeSlashIcon, type EyeSlashIconProps, FacebookIcon, type FacebookIconProps, type FieldErrorLike, FileIcon, type FileIconProps, FileUpload, type FileUploadError, type FileUploadFile, FileUploadIcon, type FileUploadIconProps, type FileUploadIconType, type FileUploadProps, type FileUploadSize, type FileUploadVariant, FilterIcon, type FilterIconProps, Form, type FormErrorItem, FormErrorSummary, type FormErrorSummaryProps, FormField, type FormFieldProps, type FormProps, type GetCroppedImgOptions, GmailIcon, type GmailIconProps, GridIcon, type GridIconProps, GroupAvatar, IconBigLogo, IconLogo, type IconProps, ImageCrop, ImageCropModal, type ImageCropModalProps, type ImageCropProps, ImageIcon, type ImageIconProps, ImagePlaceholder, type ImageSourceMode, ImageUploadIcon, type ImageUploadIconProps, IndeterminateIcon, type IndeterminateIconProps, InfoIcon, type InfoIconProps, Input, type InputProps, type InputVariant, InsertImageIcon, type InsertImageIconProps, InsertVideoIcon, type InsertVideoIconProps, InstagramIcon, type InstagramIconProps, ItalicIcon, type ItalicIconProps, KakaoTalkIcon, type KakaoTalkIconProps, LineIcon, type LineIconProps, LinkIcon, type LinkIconProps, LinkedInIcon, type LinkedInIconProps, ListBulletIcon, type ListBulletIconProps, ListIcon, type ListIconProps, ListNumberIcon, type ListNumberIconProps, LoadingScreen, type LoadingScreenProps, LoadingSpinner, type LoadingSpinnerProps, Logo, type LogoAssetComponent, type LogoAssetProps, type LogoAssets, type LogoFormat, type LogoProps, type LogoVariant, MessengerIcon, type MessengerIconProps, MinusIcon, type MinusIconProps, MultipleSelectionButton, type MultipleSelectionButtonProps, MultipleSelectionIcon, type MultipleSelectionIconProps, Pagination, type PaginationProps, PlusIcon, type PlusIconProps, ProfileAvatar, ProgressBar, QuantityInput, type QuantityInputProps, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, type RangeValue, Rating, type RatingProps, RedditIcon, type RedditIconProps, ResetIcon, type ResetIconProps, RichTextEditor, type RichTextEditorProps, RichTextViewer, type RichTextViewerProps, RotateLeftIcon, type RotateLeftIconProps, RotateRightIcon, type RotateRightIconProps, ScalablyUIProvider, type ScalablyUIProviderProps, SearchIcon, type SearchIconProps, SearchInput, type SearchInputProps, type SearchInputVariant, Select, type SelectOption, type SelectProps, type SelectVariant, SettingsIcon, type SettingsIconProps, SignalIcon, type SignalIconProps, Skeleton, type SkeletonProps, type SkeletonSize, SkeletonText, type SkeletonTextProps, type SkeletonVariant, SlackIcon, type SlackIconProps, StarIcon, type StarIconProps, StatusBadge, type StatusBadgeProps, type StatusBadgeSize, type StatusBadgeStatus, type StatusBadgeVariant, SuccessIcon, type SuccessIconProps, Switch, type SwitchProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Tag, TelegramIcon, type TelegramIconProps, TickIcon, type TickIconProps, TiktokIcon, type TiktokIconProps, TimePicker, type TimePickerProps, ToFirstIcon, type ToFirstIconProps, ToLastIcon, type ToLastIconProps, ToNextIcon, type ToNextIconProps, ToPreviousIcon, type ToPreviousIconProps, Toast, type ToastAction, ToastContainer, type ToastContainerProps, type ToastPosition, type ToastProps, type ToastStatus, Tooltip, type TooltipAlign, type TooltipProps, type TooltipSide, TranslateIcon, type TranslateIconProps, TwitchIcon, type TwitchIconProps, UnderlineIcon, type UnderlineIconProps, VideoIcon, type VideoIconProps, VideoUploadIcon, type VideoUploadIconProps, type ViewMode, ViewToggle, type ViewToggleProps, WarnIcon, type WarnIconProps, WelcomeBackground, type WelcomeBackgroundProps, WhatsAppIcon, type WhatsAppIconProps, XIcon, type XIconProps, YoutubeIcon, type YoutubeIconProps, clampDate, cn, daysGrid, debounce, defaultAssets, extensionToMimeType, fieldErrorToProps, formatAcceptedFileTypes, formatDateLocalized, getCroppedImg, logoAssets, mimeTypeToDisplayName, monthsForLocale, normalizeAcceptedFileTypes, scopeClass, throttle, toDateKey, validateFileTypeAndSize, weekdaysForLocale, welcomeAssets, zodErrorsToSummary };