@scalably/ui 0.5.7 → 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";
@@ -2937,725 +2937,689 @@ 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.
- *
- * This icon uses `currentColor`, so it can be styled with Tailwind classes.
- *
- * @example
- * ```tsx
- * import { CalendarIcon } from '@scalably/ui';
+ * Public props shared by all icon components.
  *
- * <CalendarIcon size={32} className="sui-text-primary" />
- * ```
+ * Consumers should use this type for icon props. It intentionally omits
+ * `children`, which are provided by each specific icon implementation.
  */
-declare const CalendarIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<CalendarIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+type IconProps = Omit<IconBaseProps, "children">;
 
-/**
- * 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 CopyIconProps extends IconProps {
 }
 /**
- * Capture icon component - displays a camera icon with a capture button.
+ * Copy icon component - displays a copy icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { CaptureIcon } from '@scalably/ui';
+ * import { CopyIcon } from '@scalably/ui';
  *
- * <CaptureIcon size={24} className="sui-text-primary" />
+ * <CopyIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const CaptureIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<CaptureIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const CopyIcon: {
+    (props: CopyIconProps): 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 DeleteIconProps extends IconProps {
 }
 /**
- * Check icon component - displays a checkmark in a green gradient circle.
+ * Delete icon component - displays a delete icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { CheckIcon } from '@scalably/ui';
+ * import { DeleteIcon } from '@scalably/ui';
  *
- * <CheckIcon size={24} className="sui-text-primary" />
+ * <DeleteIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const CheckIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<CheckIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const DeleteIcon: {
+    (props: DeleteIconProps): 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 DownloadIconProps extends IconProps {
 }
 /**
- * Close icon component - displays a cross icon.
+ * Download icon component - displays a download icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { CloseIcon } from '@scalably/ui';
+ * import { DownloadIcon } from '@scalably/ui';
  *
- * <CloseIcon size={24} className="sui-text-primary" />
+ * <DownloadIcon 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 DownloadIcon: {
+    (props: DownloadIconProps): 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 EditIconProps extends IconProps {
 }
 /**
- * Dropdown icon component - displays a down arrow icon.
+ * Edit icon component - displays an edit icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { DropdownIcon } from '@scalably/ui';
+ * import { EditIcon } from '@scalably/ui';
  *
- * <DropdownIcon size={24} className="sui-text-primary" />
+ * <EditIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const DropdownIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<DropdownIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const EditIcon: {
+    (props: EditIconProps): 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 FilterIconProps extends IconProps {
 }
 /**
- * DropUp icon component - displays an up arrow icon.
+ * Filter icon component - displays a filter icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { DropUpIcon } from '@scalably/ui';
+ * import { FilterIcon } from '@scalably/ui';
  *
- * <DropUpIcon size={24} className="sui-text-primary" />
+ * <FilterIcon 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 FilterIcon: {
+    (props: FilterIconProps): 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 ResetIconProps extends IconProps {
 }
 /**
- * Error icon component - displays an error icon.
+ * Reset icon component - displays a reset icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { ErrorIcon } from '@scalably/ui';
+ * import { ResetIcon } from '@scalably/ui';
  *
- * <ErrorIcon size={24} className="sui-text-primary" />
+ * <ResetIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const ErrorIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ErrorIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const ResetIcon: {
+    (props: ResetIconProps): 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 SearchIconProps extends IconProps {
 }
 /**
- * Eye icon component - displays an eye 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 { EyeIcon } from '@scalably/ui';
+ * import { SearchIcon } from '@scalably/ui';
  *
- * <EyeIcon size={24} className="sui-text-primary" />
+ * <SearchIcon size={20} className="sui-text-blue-500" />
  * ```
  */
-declare const EyeIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<EyeIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const SearchIcon: {
+    (props: SearchIconProps): 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;
+interface TranslateIconProps extends IconProps {
 }
 /**
- * Eye slash icon component - displays an eye slash icon.
+ * Translate icon component - displays a translate icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { EyeSlashIcon } from '@scalably/ui';
+ * import { TranslateIcon } from '@scalably/ui';
  *
- * <EyeSlashIcon size={24} className="sui-text-primary" />
+ * <TranslateIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const EyeSlashIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<EyeSlashIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const TranslateIcon: {
+    (props: TranslateIconProps): 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;
+/**
+ * Props for the DiscordIcon component
+ */
+interface DiscordIconProps extends IconProps {
 }
 /**
- * File icon component - displays a file icon.
+ * Discord icon component - displays the Discord logo.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { FileIcon } from '@scalably/ui';
+ * import { DiscordIcon } from '@scalably/ui';
  *
- * <FileIcon size={24} className="sui-text-primary" />
+ * <DiscordIcon size={32} className="sui-text-primary" />
  * ```
  */
-declare const FileIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<FileIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const DiscordIcon: {
+    ({ size, ...props }: DiscordIconProps): 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 FacebookIconProps extends IconProps {
 }
 /**
- * FileUpload icon component - displays a file upload icon.
+ * Facebook icon component - displays the Facebook logo.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { FileUploadIcon } from '@scalably/ui';
+ * import { FacebookIcon } from '@scalably/ui';
  *
- * <FileUploadIcon size={24} className="sui-text-primary" />
+ * <FacebookIcon size={32} className="sui-text-primary" />
  * ```
  */
-declare const FileUploadIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<FileUploadIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const FacebookIcon: {
+    ({ size, ...props }: FacebookIconProps): 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 GmailIconProps extends IconProps {
 }
 /**
- * Grid icon component - displays a grid icon.
+ * Gmail icon component - displays the Gmail logo.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { GridIcon } from '@scalably/ui';
+ * import { GmailIcon } from '@scalably/ui';
  *
- * <GridIcon size={24} className="sui-text-primary" />
+ * <GmailIcon size={32} className="sui-text-primary" />
  * ```
  */
-declare const GridIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<GridIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const GmailIcon: {
+    ({ size, ...props }: GmailIconProps): 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 InstagramIconProps extends IconProps {
 }
 /**
- * Image icon component - displays an image icon.
+ * Instagram icon component - displays the Instagram logo.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { ImageIcon } from '@scalably/ui';
+ * import { InstagramIcon } from '@scalably/ui';
  *
- * <ImageIcon size={24} className="sui-text-primary" />
+ * <InstagramIcon size={32} className="sui-text-primary" />
  * ```
  */
-declare const ImageIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ImageIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const InstagramIcon: {
+    ({ size, ...props }: InstagramIconProps): 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 KakaoTalkIconProps extends IconProps {
 }
 /**
- * ImageUpload icon component - displays an image upload icon.
+ * KakaoTalk icon component - displays the KakaoTalk logo.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { ImageUploadIcon } from '@scalably/ui';
+ * import { KakaoTalkIcon } from '@scalably/ui';
  *
- * <ImageUploadIcon size={24} className="sui-text-primary" />
+ * <KakaoTalkIcon size={32} className="sui-text-primary" />
  * ```
  */
-declare const ImageUploadIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ImageUploadIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const KakaoTalkIcon: {
+    ({ size, ...props }: KakaoTalkIconProps): 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 LineIconProps extends IconProps {
 }
 /**
- * Indeterminate icon component - displays an indeterminate icon.
+ * Line icon component - displays the Line logo.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { IndeterminateIcon } from '@scalably/ui';
+ * import { LineIcon } from '@scalably/ui';
  *
- * <IndeterminateIcon size={20} className="sui-text-primary" />
+ * <LineIcon size={32} className="sui-text-primary" />
  * ```
  */
-declare const IndeterminateIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<IndeterminateIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const LineIcon: {
+    ({ size, ...props }: LineIconProps): 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 LinkedInIconProps extends IconProps {
 }
 /**
- * Info icon component - displays an info icon.
+ * LinkedIn icon component - displays the LinkedIn logo.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { InfoIcon } from '@scalably/ui';
+ * import { LinkedInIcon } from '@scalably/ui';
  *
- * <InfoIcon size={24} className="sui-text-primary" />
+ * <LinkedInIcon size={32} className="sui-text-primary" />
  * ```
  */
-declare const InfoIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<InfoIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const LinkedInIcon: {
+    ({ size, ...props }: LinkedInIconProps): 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 MessengerIconProps extends IconProps {
 }
 /**
- * List icon component - displays a list icon.
+ * Messenger icon component - displays the Messenger logo.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { ListIcon } from '@scalably/ui';
+ * import { MessengerIcon } from '@scalably/ui';
  *
- * <ListIcon size={24} className="sui-text-primary" />
+ * <MessengerIcon size={32} className="sui-text-primary" />
  * ```
  */
-declare const ListIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ListIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const MessengerIcon: {
+    ({ size, ...props }: MessengerIconProps): 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 RedditIconProps extends IconProps {
 }
 /**
- * Minus icon component - displays a minus icon.
+ * Reddit icon component - displays the Reddit logo.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { MinusIcon } from '@scalably/ui';
+ * import { RedditIcon } from '@scalably/ui';
  *
- * <MinusIcon size={16} className="sui-text-primary" />
+ * <RedditIcon size={32} className="sui-text-primary" />
  * ```
  */
-declare const MinusIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<MinusIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const RedditIcon: {
+    ({ size, ...props }: RedditIconProps): 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 SignalIconProps extends IconProps {
 }
 /**
- * MultipleSelection icon component - displays a multiple selection icon.
+ * Signal icon component - displays the Signal logo.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { MultipleSelectionIcon } from '@scalably/ui';
+ * import { SignalIcon } from '@scalably/ui';
  *
- * <MultipleSelectionIcon size={24} className="sui-text-primary" />
+ * <SignalIcon size={32} className="sui-text-primary" />
  * ```
  */
-declare const MultipleSelectionIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<MultipleSelectionIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const SignalIcon: {
+    ({ size, ...props }: SignalIconProps): 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 SlackIconProps extends IconProps {
 }
 /**
- * Plus icon component - displays a plus icon.
+ * Slack icon component - displays the Slack logo.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { PlusIcon } from '@scalably/ui';
+ * import { SlackIcon } from '@scalably/ui';
  *
- * <PlusIcon size={16} className="sui-text-primary" />
+ * <SlackIcon size={32} className="sui-text-primary" />
  * ```
  */
-declare const PlusIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<PlusIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const SlackIcon: {
+    ({ size, ...props }: SlackIconProps): 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 TelegramIconProps extends IconProps {
 }
 /**
- * Reset icon component - displays a reset icon.
+ * Telegram icon component - displays the Telegram logo.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { ResetIcon } from '@scalably/ui';
+ * import { TelegramIcon } from '@scalably/ui';
  *
- * <ResetIcon size={24} className="sui-text-primary" />
+ * <TelegramIcon size={32} className="sui-text-primary" />
  * ```
  */
-declare const ResetIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ResetIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const TelegramIcon: {
+    ({ size, ...props }: TelegramIconProps): 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 TiktokIconProps extends IconProps {
 }
 /**
- * RotateLeft icon component - displays a rotate left icon.
+ * Tiktok icon component - displays the Tiktok logo.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { RotateLeftIcon } from '@scalably/ui';
+ * import { TiktokIcon } from '@scalably/ui';
  *
- * <RotateLeftIcon size={24} className="sui-text-primary" />
+ * <TiktokIcon size={32} className="sui-text-primary" />
  * ```
  */
-declare const RotateLeftIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<RotateLeftIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const TiktokIcon: {
+    ({ size, ...props }: TiktokIconProps): 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 TwitchIconProps extends IconProps {
 }
 /**
- * RotateRight icon component - displays a rotate right icon.
+ * Twitch icon component - displays the Twitch logo.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { RotateRightIcon } from '@scalably/ui';
+ * import { TwitchIcon } from '@scalably/ui';
  *
- * <RotateRightIcon size={24} className="sui-text-primary" />
+ * <TwitchIcon size={32} className="sui-text-primary" />
  * ```
  */
-declare const RotateRightIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<RotateRightIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const TwitchIcon: {
+    ({ size, ...props }: TwitchIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-/**
- * Props for the SearchIcon component
- */
-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;
+interface WhatsAppIconProps extends IconProps {
 }
 /**
- * Search icon component - a magnifying glass icon for search functionality.
+ * WhatsApp icon component - displays the WhatsApp logo.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { SearchIcon } from '@scalably/ui';
+ * import { WhatsAppIcon } from '@scalably/ui';
  *
- * <SearchIcon size={20} className="sui-text-blue-500" />
+ * <WhatsAppIcon size={32} className="sui-text-primary" />
  * ```
  */
-declare const SearchIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<SearchIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const WhatsAppIcon: {
+    ({ size, ...props }: WhatsAppIconProps): 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 XIconProps extends IconProps {
 }
 /**
- * Settings icon component - displays a settings icon.
+ * X icon component - displays the X logo.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { SettingsIcon } from '@scalably/ui';
+ * import { XIcon } from '@scalably/ui';
  *
- * <SettingsIcon size={24} className="sui-text-primary" />
+ * <XIcon size={32} className="sui-text-primary" />
  * ```
  */
-declare const SettingsIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<SettingsIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const XIcon: {
+    ({ size, ...props }: XIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-/**
- * Props for the StarIcon component
- */
-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;
+interface YoutubeIconProps extends IconProps {
 }
 /**
- * Star icon component - displays a star shape.
+ * Youtube icon component - displays the Youtube logo.
  *
  * 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 { YoutubeIcon } from '@scalably/ui';
  *
- * <StarIcon size={24} className="sui-text-yellow-500" />
- * <StarIcon size={24} fillPercentage={0.5} className="sui-text-yellow-500" />
+ * <YoutubeIcon size={32} className="sui-text-primary" />
  * ```
  */
-declare const StarIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<StarIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const YoutubeIcon: {
+    ({ size, ...props }: YoutubeIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-/**
- * Props for the SuccessIcon component
- */
-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;
+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 {
 }
 /**
- * Success icon component - displays a checkmark in a green gradient circle.
+ * Bold icon component - displays a bold 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 { BoldIcon } from '@scalably/ui';
  *
- * <SuccessIcon size={24} />
+ * <BoldIcon size={16} className="sui-text-primary" />
  * ```
  */
-declare const SuccessIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<SuccessIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const BoldIcon: {
+    ({ size, ...props }: BoldIconProps): 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 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 {
 }
 /**
- * Tick icon component - displays a tick icon.
+ * Italic icon component - displays an italic icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { TickIcon } from '@scalably/ui';
+ * import { ItalicIcon } from '@scalably/ui';
  *
- * <TickIcon size={16} className="sui-text-primary" />
+ * <ItalicIcon size={16} className="sui-text-primary" />
  * ```
  */
-declare const TickIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<TickIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const ItalicIcon: {
+    ({ size, ...props }: ItalicIconProps): 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 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 {
 }
 /**
- * ToFirst icon component - displays a to first icon.
+ * Underline icon component - displays an underline icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { ToFirstIcon } from '@scalably/ui';
+ * import { UnderlineIcon } from '@scalably/ui';
  *
- * <ToFirstIcon size={24} className="sui-text-primary" />
+ * <UnderlineIcon size={16} className="sui-text-primary" />
  * ```
  */
-declare const ToFirstIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ToFirstIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const UnderlineIcon: {
+    ({ size, ...props }: UnderlineIconProps): 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 FileIconProps extends IconProps {
 }
 /**
- * ToLast icon component - displays a to last icon.
+ * File icon component - displays a file icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { ToLastIcon } from '@scalably/ui';
+ * import { FileIcon } from '@scalably/ui';
  *
- * <ToLastIcon size={24} className="sui-text-primary" />
+ * <FileIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const ToLastIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ToLastIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const FileIcon: {
+    (props: FileIconProps): 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 FileUploadIconProps extends IconProps {
 }
 /**
- * ToNext icon component - displays a to next icon.
+ * FileUpload icon component - displays a file upload icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { ToNextIcon } from '@scalably/ui';
+ * import { FileUploadIcon } from '@scalably/ui';
  *
- * <ToNextIcon size={24} className="sui-text-primary" />
+ * <FileUploadIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const ToNextIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ToNextIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const FileUploadIcon: {
+    (props: FileUploadIconProps): 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 ImageIconProps extends IconProps {
 }
 /**
- * ToPrevious icon component - displays a to previous icon.
+ * Image icon component - displays an image icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { ToPreviousIcon } from '@scalably/ui';
+ * import { ImageIcon } from '@scalably/ui';
  *
- * <ToPreviousIcon size={24} className="sui-text-primary" />
+ * <ImageIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const ToPreviousIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ToPreviousIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const ImageIcon: {
+    (props: ImageIconProps): 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 ImageUploadIconProps extends IconProps {
 }
 /**
- * Translate icon component - displays a translate icon.
+ * ImageUpload icon component - displays an image upload icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { TranslateIcon } from '@scalably/ui';
+ * import { ImageUploadIcon } from '@scalably/ui';
  *
- * <TranslateIcon size={24} className="sui-text-primary" />
+ * <ImageUploadIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const TranslateIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<TranslateIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const ImageUploadIcon: {
+    (props: ImageUploadIconProps): 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 VideoIconProps extends IconProps {
 }
 /**
  * Video icon component - displays a video icon.
@@ -3669,13 +3633,12 @@ interface VideoIconProps extends React.SVGProps<SVGSVGElement> {
  * <VideoIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const VideoIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<VideoIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const VideoIcon: {
+    (props: VideoIconProps): 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 VideoUploadIconProps extends IconProps {
 }
 /**
  * VideoUpload icon component - displays a video upload icon.
@@ -3689,493 +3652,546 @@ interface VideoUploadIconProps extends React.SVGProps<SVGSVGElement> {
  * <VideoUploadIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const VideoUploadIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<VideoUploadIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const VideoUploadIcon: {
+    (props: VideoUploadIconProps): 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 CaptureIconProps extends IconProps {
 }
 /**
- * Warn icon component - displays a warn 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 { WarnIcon } from '@scalably/ui';
+ * import { CaptureIcon } from '@scalably/ui';
  *
- * <WarnIcon size={24} className="sui-text-primary" />
+ * <CaptureIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const WarnIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<WarnIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const CaptureIcon: {
+    (props: CaptureIconProps): 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 CropIconProps extends IconProps {
 }
 /**
- * Discord icon component - displays the Discord logo.
+ * Crop icon component - displays a crop icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { DiscordIcon } from '@scalably/ui';
+ * import { CropIcon } from '@scalably/ui';
  *
- * <DiscordIcon size={32} className="sui-text-primary" />
+ * <CropIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const DiscordIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<DiscordIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const CropIcon: {
+    (props: CropIconProps): 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 RotateLeftIconProps extends IconProps {
 }
 /**
- * Facebook icon component - displays the Facebook logo.
+ * RotateLeft icon component - displays a rotate left icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { FacebookIcon } from '@scalably/ui';
+ * import { RotateLeftIcon } from '@scalably/ui';
  *
- * <FacebookIcon size={32} className="sui-text-primary" />
+ * <RotateLeftIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const FacebookIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<FacebookIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const RotateLeftIcon: {
+    (props: RotateLeftIconProps): 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 RotateRightIconProps extends IconProps {
 }
 /**
- * Gmail icon component - displays the Gmail logo.
+ * RotateRight icon component - displays a rotate right icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { GmailIcon } from '@scalably/ui';
+ * import { RotateRightIcon } from '@scalably/ui';
  *
- * <GmailIcon size={32} className="sui-text-primary" />
+ * <RotateRightIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const GmailIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<GmailIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const RotateRightIcon: {
+    (props: RotateRightIconProps): 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 DropdownIconProps extends IconProps {
 }
 /**
- * Instagram icon component - displays the Instagram logo.
+ * Dropdown icon component - displays a down arrow icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { InstagramIcon } from '@scalably/ui';
+ * import { DropdownIcon } from '@scalably/ui';
  *
- * <InstagramIcon size={32} className="sui-text-primary" />
+ * <DropdownIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const InstagramIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<InstagramIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const DropdownIcon: {
+    (props: DropdownIconProps): 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 DropUpIconProps extends IconProps {
 }
 /**
- * KakaoTalk icon component - displays the KakaoTalk logo.
+ * DropUp icon component - displays an up arrow icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { KakaoTalkIcon } from '@scalably/ui';
+ * import { DropUpIcon } from '@scalably/ui';
  *
- * <KakaoTalkIcon size={32} className="sui-text-primary" />
+ * <DropUpIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const KakaoTalkIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<KakaoTalkIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const DropUpIcon: {
+    (props: DropUpIconProps): 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 ToFirstIconProps extends IconProps {
 }
 /**
- * Line icon component - displays the Line logo.
+ * ToFirst icon component - displays a to first icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { LineIcon } from '@scalably/ui';
+ * import { ToFirstIcon } from '@scalably/ui';
  *
- * <LineIcon size={32} className="sui-text-primary" />
+ * <ToFirstIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const LineIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<LineIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const ToFirstIcon: {
+    (props: ToFirstIconProps): 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 ToLastIconProps extends IconProps {
 }
 /**
- * LinkedIn icon component - displays the LinkedIn logo.
+ * ToLast icon component - displays a to last icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { LinkedInIcon } from '@scalably/ui';
+ * import { ToLastIcon } from '@scalably/ui';
  *
- * <LinkedInIcon size={32} className="sui-text-primary" />
+ * <ToLastIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const LinkedInIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<LinkedInIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const ToLastIcon: {
+    (props: ToLastIconProps): 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 ToNextIconProps extends IconProps {
 }
 /**
- * Messenger icon component - displays the Messenger logo.
+ * ToNext icon component - displays a to next icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { MessengerIcon } from '@scalably/ui';
+ * import { ToNextIcon } from '@scalably/ui';
  *
- * <MessengerIcon size={32} className="sui-text-primary" />
+ * <ToNextIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const MessengerIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<MessengerIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const ToNextIcon: {
+    (props: ToNextIconProps): 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 ToPreviousIconProps extends IconProps {
 }
 /**
- * Reddit icon component - displays the Reddit logo.
+ * ToPrevious icon component - displays a to previous icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { RedditIcon } from '@scalably/ui';
+ * import { ToPreviousIcon } from '@scalably/ui';
  *
- * <RedditIcon size={32} className="sui-text-primary" />
+ * <ToPreviousIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const RedditIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<RedditIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const ToPreviousIcon: {
+    (props: ToPreviousIconProps): 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 CheckIconProps extends IconProps {
 }
 /**
- * Signal icon component - displays the Signal 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 { SignalIcon } from '@scalably/ui';
+ * import { CheckIcon } from '@scalably/ui';
  *
- * <SignalIcon size={32} className="sui-text-primary" />
+ * <CheckIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const SignalIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<SignalIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const CheckIcon: {
+    (props: CheckIconProps): 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 CloseIconProps extends IconProps {
 }
 /**
- * Slack icon component - displays the Slack logo.
+ * Close icon component - displays a cross icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { SlackIcon } from '@scalably/ui';
+ * import { CloseIcon } from '@scalably/ui';
  *
- * <SlackIcon size={32} className="sui-text-primary" />
+ * <CloseIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const SlackIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<SlackIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const CloseIcon: {
+    (props: CloseIconProps): 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 ErrorIconProps extends IconProps {
 }
 /**
- * Telegram icon component - displays the Telegram logo.
+ * Error icon component - displays an error icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { TelegramIcon } from '@scalably/ui';
+ * import { ErrorIcon } from '@scalably/ui';
  *
- * <TelegramIcon size={32} className="sui-text-primary" />
+ * <ErrorIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const TelegramIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<TelegramIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const ErrorIcon: {
+    (props: ErrorIconProps): 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 IndeterminateIconProps extends IconProps {
 }
 /**
- * Tiktok icon component - displays the Tiktok logo.
+ * Indeterminate icon component - displays an indeterminate icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { TiktokIcon } from '@scalably/ui';
+ * import { IndeterminateIcon } from '@scalably/ui';
  *
- * <TiktokIcon size={32} className="sui-text-primary" />
+ * <IndeterminateIcon size={20} className="sui-text-primary" />
  * ```
  */
-declare const TiktokIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<TiktokIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const IndeterminateIcon: {
+    (props: IndeterminateIconProps): 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 InfoIconProps extends IconProps {
 }
 /**
- * Twitch icon component - displays the Twitch logo.
+ * Info icon component - displays an info icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { TwitchIcon } from '@scalably/ui';
+ * import { InfoIcon } from '@scalably/ui';
  *
- * <TwitchIcon size={32} className="sui-text-primary" />
+ * <InfoIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const TwitchIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<TwitchIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const InfoIcon: {
+    (props: InfoIconProps): 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 SuccessIconProps extends IconProps {
 }
 /**
- * WhatsApp icon component - displays the WhatsApp 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 { WhatsAppIcon } from '@scalably/ui';
+ * import { SuccessIcon } from '@scalably/ui';
  *
- * <WhatsAppIcon size={32} className="sui-text-primary" />
+ * <SuccessIcon size={24} />
  * ```
  */
-declare const WhatsAppIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<WhatsAppIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const SuccessIcon: {
+    (props: SuccessIconProps): 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 TickIconProps extends IconProps {
 }
 /**
- * X icon component - displays the X logo.
+ * Tick icon component - displays a tick icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { XIcon } from '@scalably/ui';
+ * import { TickIcon } from '@scalably/ui';
  *
- * <XIcon size={32} className="sui-text-primary" />
+ * <TickIcon size={16} className="sui-text-primary" />
  * ```
  */
-declare const XIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<XIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const TickIcon: {
+    (props: TickIconProps): 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 WarnIconProps extends IconProps {
 }
 /**
- * Youtube icon component - displays the Youtube logo.
+ * Warn icon component - displays a warn icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { YoutubeIcon } from '@scalably/ui';
+ * import { WarnIcon } from '@scalably/ui';
  *
- * <YoutubeIcon size={32} className="sui-text-primary" />
+ * <WarnIcon 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>>>;
+declare const WarnIcon: {
+    (props: WarnIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-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;
+interface CalendarIconProps extends IconProps {
 }
-declare const AlignLeftIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<AlignLeftIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+/**
+ * Calendar icon component - displays a calendar with date indicators.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { CalendarIcon } from '@scalably/ui';
+ *
+ * <CalendarIcon size={32} className="sui-text-primary" />
+ * ```
+ */
+declare const CalendarIcon: {
+    (props: CalendarIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-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;
+interface EyeIconProps extends IconProps {
 }
-declare const AlignRightIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<AlignRightIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+/**
+ * Eye icon component - displays an eye icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { EyeIcon } from '@scalably/ui';
+ *
+ * <EyeIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const EyeIcon: {
+    (props: EyeIconProps): 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 EyeSlashIconProps extends IconProps {
 }
 /**
- * Bold icon component - displays a bold icon.
+ * Eye slash icon component - displays an eye slash icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { BoldIcon } from '@scalably/ui';
+ * import { EyeSlashIcon } from '@scalably/ui';
  *
- * <BoldIcon size={16} className="sui-text-primary" />
+ * <EyeSlashIcon size={24} className="sui-text-primary" />
  * ```
  */
-declare const BoldIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<BoldIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const EyeSlashIcon: {
+    (props: EyeSlashIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-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;
+interface GridIconProps extends IconProps {
 }
-declare const InsertImageIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<InsertImageIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+/**
+ * Grid icon component - displays a grid icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { GridIcon } from '@scalably/ui';
+ *
+ * <GridIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const GridIcon: {
+    (props: GridIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-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;
+interface ListIconProps extends IconProps {
 }
-declare const InsertVideoIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<InsertVideoIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+/**
+ * List icon component - displays a list icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { ListIcon } from '@scalably/ui';
+ *
+ * <ListIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const ListIcon: {
+    (props: ListIconProps): 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 MinusIconProps extends IconProps {
 }
 /**
- * Italic icon component - displays an italic icon.
+ * Minus icon component - displays a minus icon.
  *
  * This icon uses `currentColor`, so it can be styled with Tailwind classes.
  *
  * @example
  * ```tsx
- * import { ItalicIcon } from '@scalably/ui';
+ * import { MinusIcon } from '@scalably/ui';
  *
- * <ItalicIcon size={16} className="sui-text-primary" />
+ * <MinusIcon size={16} className="sui-text-primary" />
  * ```
  */
-declare const ItalicIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ItalicIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+declare const MinusIcon: {
+    (props: MinusIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-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;
+interface MultipleSelectionIconProps extends IconProps {
 }
-declare const LinkIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<LinkIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+/**
+ * MultipleSelection icon component - displays a multiple selection icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { MultipleSelectionIcon } from '@scalably/ui';
+ *
+ * <MultipleSelectionIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const MultipleSelectionIcon: {
+    (props: MultipleSelectionIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-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;
+interface PlusIconProps extends IconProps {
 }
-declare const ListBulletIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ListBulletIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+/**
+ * Plus icon component - displays a plus icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { PlusIcon } from '@scalably/ui';
+ *
+ * <PlusIcon size={16} className="sui-text-primary" />
+ * ```
+ */
+declare const PlusIcon: {
+    (props: PlusIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-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;
+interface SettingsIconProps extends IconProps {
 }
-declare const ListNumberIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ListNumberIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+/**
+ * Settings icon component - displays a settings icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { SettingsIcon } from '@scalably/ui';
+ *
+ * <SettingsIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+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, 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 };
+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 };