@scalably/ui 0.4.0 → 0.4.2

package/README.md

@@ -184,10 +184,14 @@ This library exposes a set of composable, production-ready primitives. The full
 - **Form primitives**: `Form`, `FormField`, `FormErrorSummary`, `Input`, `SearchInput`, `QuantityInput`, `CheckBox`, `CheckBoxGroup`, `Radio`, `RadioGroup`, `Select`, `Switch`, `FileUpload`, `DateInput`, `DatePicker`, `TimePicker`
 - **Feedback & status**: `StatusBadge`, `Toast`, `ToastContainer`, `Skeleton`, `SkeletonText`, `Countdown`
 - **Layout & navigation**: `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`, `Pagination`, `BackToTop`, `ViewToggle`, `Divider`
-- **Content & rich text**: `RichTextEditor`, `RichTextViewer`, `Tooltip`, `AuthPrompt`, `LoadingScreen`
-- **Media & brand**: `AvatarPlaceholder`, `Logo`, `logoAssets`, `defaultAssets`
+- **Content & rich text**: `RichTextEditor`, `RichTextViewer`, `Tooltip`, `AuthPrompt`, `LoadingScreen`, `WelcomeBackground`
+- **Media & brand**: `AvatarPlaceholder`, `Logo`, `logoAssets`, `defaultAssets`, `welcomeAssets` (all inline React SVGs—no static paths required)
 - **Icons**: All icons from `@/icons` and `@/icons/company` are re-exported, e.g. `SearchIcon`, `CalendarIcon`, `SuccessIcon`, `ErrorIcon`, `DiscordIcon`, `FacebookIcon`, `XIcon`, `YoutubeIcon`, and more.
 
+## 🖼️ Assets
+
+All library assets are inline React SVG components (welcome background, logos, avatar placeholders). You can use them directly via the exported asset maps (`welcomeAssets`, `logoAssets`, `defaultAssets`) or override props (size, className, aria-label). If you prefer external URLs (e.g., CDN), pass your own `backgroundImage`, `ellipsesData`, or `linesSrc` to `WelcomeBackground`.
+
 ## 🎨 Styling
 
 ### Style Isolation

package/dist/index.d.cts

@@ -1,7 +1,5 @@
 import * as react from 'react';
-import react__default, { ReactNode, HTMLAttributes, ImgHTMLAttributes } from 'react';
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import { VariantProps } from 'class-variance-authority';
+import react__default, { ReactNode, HTMLAttributes, ForwardRefExoticComponent, SVGProps, RefAttributes, MemoExoticComponent } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as date_fns from 'date-fns';
 export { addMonths, endOfMonth, isSameDay, startOfMonth } from 'date-fns';
@@ -146,34 +144,10 @@ interface AuthPromptProps {
  */
 declare const AuthPrompt: React.FC<AuthPromptProps>;
 
-/**
- * Accessible status badge with semantic color variants.
- *
- * Aligns with design system color semantics:
- * - `success`: Active/Complete/Done/Confirmed/Verified
- * - `warning`: In progress/Waiting for confirmation
- * - `error`: Needs attention/Important/Alert/Danger
- * - `inactive`: Closed/Passed/Not active/Too late
- * - `info`: Informational status
- *
- * @example
- * ```tsx
- * <StatusBadge status="success">Active</StatusBadge>
- * <StatusBadge status="warning" variant="outline">Pending</StatusBadge>
- * <StatusBadge status="inactive">Closed</StatusBadge>
- * <StatusBadge status="error" icon={<AlertIcon />}>Urgent</StatusBadge>
- * ```
- */
-declare const statusBadgeVariants: (props?: ({
-    size?: "md" | "lg" | "sm" | null | undefined;
-    status?: "error" | "success" | "warning" | "info" | "inactive" | null | undefined;
-    variant?: "outline" | "solid" | "soft" | null | undefined;
-    fullWidth?: boolean | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type StatusBadgeStatus = NonNullable<VariantProps<typeof statusBadgeVariants>["status"]>;
-type StatusBadgeVariant = NonNullable<VariantProps<typeof statusBadgeVariants>["variant"]>;
-type StatusBadgeSize = NonNullable<VariantProps<typeof statusBadgeVariants>["size"]>;
-interface StatusBadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children">, VariantProps<typeof statusBadgeVariants> {
+type StatusBadgeStatus = "success" | "warning" | "error" | "info" | "inactive";
+type StatusBadgeVariant = "solid" | "soft" | "outline";
+type StatusBadgeSize = "sm" | "md" | "lg";
+interface StatusBadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
     /**
      * Badge size using design system typography.
      * - `sm`: 12px medium (label-12-medium) - default
@@ -181,7 +155,10 @@ interface StatusBadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "
      * - `lg`: 16px medium (body-16-medium)
      * @default "sm"
      */
-    size?: "sm" | "md" | "lg";
+    size?: StatusBadgeSize;
+    status?: StatusBadgeStatus;
+    variant?: StatusBadgeVariant;
+    fullWidth?: boolean;
     /**
      * Optional leading icon.
      */
@@ -198,16 +175,13 @@ interface StatusBadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "
 }
 declare const StatusBadge: react.ForwardRefExoticComponent<StatusBadgeProps & react.RefAttributes<HTMLSpanElement>>;
 
-declare const buttonVariants: (props?: ({
-    variant?: "link" | "text" | "default" | "destructive" | "outline" | "secondary" | null | undefined;
-    size?: "icon" | "md" | "lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
-type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+type ButtonVariant = "default" | "destructive" | "outline" | "secondary" | "text" | "link";
+type ButtonSize = "md" | "lg" | "icon";
 type ButtonBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size">;
-interface ButtonProps extends ButtonBaseProps, VariantProps<typeof buttonVariants> {
+interface ButtonProps extends ButtonBaseProps {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
     loading?: boolean;
-    disabled?: boolean;
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;
 }
@@ -447,11 +421,7 @@ interface CheckBoxGroupProps<T extends string = string> extends BaseFieldSetProp
  */
 declare const CheckBoxGroup: react.ForwardRefExoticComponent<CheckBoxGroupProps<string> & react.RefAttributes<HTMLFieldSetElement>>;
 
-declare const inputVariants: (props?: ({
-    variant?: "error" | "default" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type InputVariants = VariantProps<typeof inputVariants>;
-type InputVariant = InputVariants["variant"];
+type InputVariant = "default" | "error";
 type InputBaseProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "required">;
 interface InputProps extends InputBaseProps {
     variant?: InputVariant;
@@ -550,10 +520,7 @@ interface QuantityInputProps extends QuantityInputBaseProps {
  */
 declare const QuantityInput: react.ForwardRefExoticComponent<QuantityInputProps & react.RefAttributes<HTMLInputElement>>;
 
-declare const searchInputVariants: (props?: ({
-    variant?: "full" | "compact" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type SearchInputVariant = VariantProps<typeof searchInputVariants>["variant"];
+type SearchInputVariant = "compact" | "full";
 type SearchInputBaseProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type">;
 interface SearchInputProps extends SearchInputBaseProps {
     variant?: SearchInputVariant;
@@ -715,35 +682,29 @@ type DateInputProps = SingleProps | RangeProps;
  */
 declare const DateInput: react.ForwardRefExoticComponent<DateInputProps & react.RefAttributes<HTMLInputElement>>;
 
-declare const dividerVariants: (props?: ({
-    orientation?: "horizontal" | "vertical" | null | undefined;
-    inset?: "end" | "none" | "both" | "start" | null | undefined;
-    thickness?: "px" | "sm" | null | undefined;
-    stretch?: "none" | "full" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type DividerVariant = VariantProps<typeof dividerVariants>;
-type DividerProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof dividerVariants> & {
+type DividerOrientation = "horizontal" | "vertical";
+type DividerInset = "none" | "start" | "end" | "both";
+type DividerThickness = "px" | "sm";
+type DividerStretch = "none" | "full";
+type DividerVariant = {
+    orientation?: DividerOrientation;
+    inset?: DividerInset;
+    thickness?: DividerThickness;
+    stretch?: DividerStretch;
+};
+type DividerProps = React.HTMLAttributes<HTMLDivElement> & DividerVariant & {
     colorClassName?: string;
 };
 /**
  * - Themed horizontal or vertical separator with orientation, inset, thickness,
  * and stretch variants. Uses role="separator" for a11y.
  */
-declare const Divider: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    orientation?: "horizontal" | "vertical" | null | undefined;
-    inset?: "end" | "none" | "both" | "start" | null | undefined;
-    thickness?: "px" | "sm" | null | undefined;
-    stretch?: "none" | "full" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string> & {
+declare const Divider: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDivElement> & DividerVariant & {
     colorClassName?: string;
 } & react.RefAttributes<HTMLDivElement>>;
 
-declare const fileUploadVariants: (props?: ({
-    variant?: "error" | "default" | "disabled" | "dragOver" | null | undefined;
-    size?: "md" | "lg" | "sm" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type FileUploadVariant = VariantProps<typeof fileUploadVariants>["variant"];
-type FileUploadSize = VariantProps<typeof fileUploadVariants>["size"];
+type FileUploadVariant = "default" | "dragOver" | "error" | "disabled";
+type FileUploadSize = "sm" | "md" | "lg";
 type FileUploadIconType = "file" | "image" | "video";
 interface FileUploadError {
     type: "fileType" | "fileSize" | "fileCount" | "network" | "unknown";
@@ -1099,10 +1060,7 @@ interface SwitchProps extends BaseInputProps {
  */
 declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLInputElement>>;
 
-declare const selectVariants: (props?: ({
-    variant?: "error" | "default" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type SelectVariant = VariantProps<typeof selectVariants>["variant"];
+type SelectVariant = "default" | "error";
 interface SelectOption {
     value: string;
     label: string;
@@ -1201,13 +1159,11 @@ interface SelectProps extends SelectBaseProps {
  */
 declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement | HTMLSelectElement>>;
 
-declare const skeletonVariants: (props?: ({
-    variant?: "text" | "circle" | "rectangle" | null | undefined;
-    size?: "md" | "lg" | "sm" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type SkeletonVariant = NonNullable<VariantProps<typeof skeletonVariants>["variant"]>;
-type SkeletonSize = NonNullable<VariantProps<typeof skeletonVariants>["size"]>;
-interface SkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "width" | "height">, VariantProps<typeof skeletonVariants> {
+type SkeletonVariant = "text" | "circle" | "rectangle";
+type SkeletonSize = "sm" | "md" | "lg";
+interface SkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "width" | "height"> {
+    variant?: SkeletonVariant;
+    size?: SkeletonSize;
     /**
      * Width of the skeleton.
      * If a number is provided, it will be automatically converted to pixels.
@@ -1787,28 +1743,57 @@ interface ViewToggleProps {
  */
 declare const ViewToggle: React.FC<ViewToggleProps>;
 
+interface DefaultAssetProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
+    /**
+     * Optional square dimension override. Falls back to the intrinsic
+     * width/height of the asset when not provided.
+     */
+    size?: number;
+}
+type DefaultAssetComponent = ForwardRefExoticComponent<DefaultAssetProps & RefAttributes<SVGSVGElement>> | MemoExoticComponent<ForwardRefExoticComponent<DefaultAssetProps & RefAttributes<SVGSVGElement>>>;
+
 /**
- * Centralized catalog of fallback imagery for avatars and generic image slots.
- * Consumers can reference these to keep placeholder usage consistent.
+ * Group avatar placeholder rendered as an inline SVG so consumers
+ * don't need to manage static asset paths.
+ */
+declare const GroupAvatar: react.MemoExoticComponent<react.ForwardRefExoticComponent<DefaultAssetProps & react.RefAttributes<SVGSVGElement>>>;
+
+/**
+ * Image placeholder illustration as an inline SVG.
+ */
+declare const ImagePlaceholder: react.MemoExoticComponent<react.ForwardRefExoticComponent<DefaultAssetProps & react.RefAttributes<SVGSVGElement>>>;
+
+/**
+ * Profile avatar placeholder rendered as an inline SVG.
  */
-declare const defaultAssets: {
-    readonly avatars: {
-        readonly group: string;
-        readonly profile: string;
+declare const ProfileAvatar: react.MemoExoticComponent<react.ForwardRefExoticComponent<DefaultAssetProps & react.RefAttributes<SVGSVGElement>>>;
+
+type DefaultAssetCatalog = {
+    avatars: {
+        group: DefaultAssetComponent;
+        profile: DefaultAssetComponent;
     };
-    readonly placeholders: {
-        readonly image: string;
+    placeholders: {
+        image: DefaultAssetComponent;
     };
 };
+/**
+ * Centralized catalog of fallback imagery for avatars and generic image slots.
+ * Provided as inline SVG React components to avoid bundling pitfalls for consumers.
+ */
+declare const defaultAssets: DefaultAssetCatalog;
+type DefaultAssets = DefaultAssetCatalog;
+type DefaultAssetCategory = keyof DefaultAssetCatalog;
+type DefaultAssetVariant<C extends DefaultAssetCategory = DefaultAssetCategory> = keyof DefaultAssetCatalog[C];
 
 type AvatarPlaceholderCategory = keyof typeof defaultAssets;
 type AvatarPlaceholderVariantMap = {
     [K in AvatarPlaceholderCategory]: keyof (typeof defaultAssets)[K];
 };
 type AvatarPlaceholderVariant<C extends AvatarPlaceholderCategory = AvatarPlaceholderCategory> = AvatarPlaceholderVariantMap[C];
-interface BaseAvatarPlaceholderProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "alt"> {
+interface BaseAvatarPlaceholderProps extends Omit<DefaultAssetProps, "children"> {
     /**
-     * Accessible text describing the placeholder image.
+     * Accessible text describing the placeholder illustration.
      * Falls back to a generated description derived from category and variant.
      */
     alt?: string;
@@ -1824,44 +1809,69 @@ interface AvatarPlaceholderProps<C extends AvatarPlaceholderCategory = AvatarPla
     variant: AvatarPlaceholderVariant<C>;
 }
 /**
- * Thin wrapper around the shared default asset catalog that renders placeholder imagery
- * (e.g. generic avatars) as a standard `<img>` element with sensible defaults.
+ * Thin wrapper around the shared default asset catalog that renders placeholder
+ * imagery (e.g. generic avatars) as inline SVG React components with sensible defaults.
  */
-declare const AvatarPlaceholder: react.ForwardRefExoticComponent<AvatarPlaceholderProps<"avatars" | "placeholders"> & react.RefAttributes<HTMLImageElement>>;
+declare const AvatarPlaceholder: react.ForwardRefExoticComponent<AvatarPlaceholderProps<keyof {
+    avatars: {
+        group: DefaultAssetComponent;
+        profile: DefaultAssetComponent;
+    };
+    placeholders: {
+        image: DefaultAssetComponent;
+    };
+}> & react.RefAttributes<SVGSVGElement>>;
+
+interface LogoAssetProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
+    /**
+     * Optional square dimension override; falls back to intrinsic size.
+     */
+    size?: number;
+    /**
+     * Optional alt text (mirrored to aria-label by consumers).
+     */
+    alt?: string;
+}
+type LogoAssetComponent = ForwardRefExoticComponent<LogoAssetProps & RefAttributes<SVGSVGElement>> | MemoExoticComponent<ForwardRefExoticComponent<LogoAssetProps & RefAttributes<SVGSVGElement>>>;
 
-declare const logoAssets: {
-    readonly app: {
-        readonly png: string;
-        readonly svg: string;
+declare const AppLogo: react.MemoExoticComponent<react.ForwardRefExoticComponent<LogoAssetProps & react.RefAttributes<SVGSVGElement>>>;
+
+declare const CampaignLogo: react.MemoExoticComponent<react.ForwardRefExoticComponent<LogoAssetProps & react.RefAttributes<SVGSVGElement>>>;
+
+declare const IconBigLogo: react.MemoExoticComponent<react.ForwardRefExoticComponent<LogoAssetProps & react.RefAttributes<SVGSVGElement>>>;
+
+declare const IconLogo: react.MemoExoticComponent<react.ForwardRefExoticComponent<LogoAssetProps & react.RefAttributes<SVGSVGElement>>>;
+
+type LogoAssetCatalog = {
+    app: {
+        svg: LogoAssetComponent;
     };
-    readonly campaign: {
-        readonly png: string;
-        readonly svg: string;
+    campaign: {
+        svg: LogoAssetComponent;
     };
-    readonly membership: {
-        readonly png: string;
-        readonly svg: string;
+    membership: {
+        svg: LogoAssetComponent;
     };
-    readonly icon: {
-        readonly png: string;
-        readonly svg: string;
+    icon: {
+        svg: LogoAssetComponent;
     };
-    readonly "icon-big": {
-        readonly png: string;
+    "icon-big": {
+        svg: LogoAssetComponent;
     };
 };
+declare const logoAssets: LogoAssetCatalog;
+type LogoAssets = LogoAssetCatalog;
 
 type LogoVariant = keyof typeof logoAssets;
-type LogoFormat = {
-    [K in LogoVariant]: keyof (typeof logoAssets)[K];
-}[LogoVariant];
-interface LogoProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "alt"> {
+type LogoFormat = "svg";
+interface LogoProps extends Omit<LogoAssetProps, "children"> {
     /**
      * Which logo variant to render (derived from logo assets).
      */
     variant: LogoVariant;
     /**
-     * File format to render. Defaults to SVG when available, otherwise PNG.
+     * Logical format to render. Both formats map to inline SVG components.
+     * Defaults to SVG when available.
      */
     format?: LogoFormat;
     /**
@@ -1872,7 +1882,7 @@ interface LogoProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "a
 /**
  * Branded logo renderer that stays tightly coupled to available assets.
  */
-declare const Logo: react.ForwardRefExoticComponent<LogoProps & react.RefAttributes<HTMLImageElement>>;
+declare const Logo: react.ForwardRefExoticComponent<LogoProps & react.RefAttributes<SVGSVGElement>>;
 
 interface LoadingScreenProps extends Omit<react__default.HTMLAttributes<HTMLDivElement>, "children"> {
     /**
@@ -1931,6 +1941,24 @@ interface LoadingScreenProps extends Omit<react__default.HTMLAttributes<HTMLDivE
  */
 declare const LoadingScreen: react__default.ForwardRefExoticComponent<LoadingScreenProps & react__default.RefAttributes<HTMLDivElement>>;
 
+interface WelcomeAssetProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
+    /**
+     * Optional square dimension override; falls back to intrinsic size.
+     */
+    size?: number;
+}
+type WelcomeAssetComponent = ForwardRefExoticComponent<WelcomeAssetProps & RefAttributes<SVGSVGElement>> | MemoExoticComponent<ForwardRefExoticComponent<WelcomeAssetProps & RefAttributes<SVGSVGElement>>>;
+
+type WelcomeAssetCatalog = {
+    ellipses: readonly [WelcomeAssetComponent, WelcomeAssetComponent];
+    multipleLine: WelcomeAssetComponent;
+    background: WelcomeAssetComponent;
+};
+declare const welcomeAssets: WelcomeAssetCatalog;
+
+type EllipseSource = string | WelcomeAssetComponent;
+type LineSource = string | WelcomeAssetComponent;
+type BackgroundSource = string | WelcomeAssetComponent;
 interface WelcomeBackgroundProps extends Omit<react__default.HTMLAttributes<HTMLDivElement>, "children"> {
     /**
      * Optional children rendered on top of the animated background.
@@ -1952,23 +1980,33 @@ interface WelcomeBackgroundProps extends Omit<react__default.HTMLAttributes<HTML
      */
     disableAnimation?: boolean;
     /**
-     * Override background image URL.
+     * Background image URL or inline React SVG component.
+     * Defaults to bundled inline SVG background.
      */
-    backgroundImage?: string;
+    backgroundImage?: BackgroundSource;
     /**
-     * Override ellipse sources (defaults to bundled welcome assets).
+     * Ellipse sources (URLs or inline React SVG components). Defaults to bundled inline SVGs.
      */
-    ellipsesData?: readonly string[];
+    ellipsesData?: readonly EllipseSource[];
     /**
-     * Override lines overlay source (defaults to bundled welcome assets).
+     * Lines overlay source (URL or inline React SVG component). Defaults to bundled inline SVG.
      */
-    linesSrc?: string;
+    linesSrc?: LineSource;
 }
 /**
  * Animated background for welcome/landing experiences.
  * - Uses deterministic seeded randomness for stable ellipse paths.
  * - Honors reduced-motion preferences and optional animation disabling.
  * - Mobile-first; hides heavy layers on very small screens via consumer control.
+ *
+ * @remarks
+ * **Asset handling**
+ * - Recommended: host your own assets (e.g., place files in `/public/static/welcome`)
+ *   and pass them via `backgroundImage`, `ellipsesData`, and `linesSrc`.
+ * - Bundled option: import `welcomeAssets` and copy the hashed files from
+ *   `node_modules/@scalably/ui/dist/` into a served location (e.g., via a
+ *   postinstall script) before using those paths.
+ * Bundler setups differ; self-hosted URLs are the most reliable.
  */
 declare const WelcomeBackground: {
     ({ className, style, children, showEllipses, showLines, disableAnimation, backgroundImage, ellipsesData, linesSrc, ...props }: WelcomeBackgroundProps): react_jsx_runtime.JSX.Element;
@@ -2188,12 +2226,6 @@ interface ScalablyUIProviderProps {
  */
 declare const ScalablyUIProvider: React.FC<ScalablyUIProviderProps>;
 
-declare const welcomeAssets: {
-    readonly ellipses: readonly [string, string];
-    readonly multipleLine: string;
-    readonly background: string;
-};
-
 /**
  * Type for class values accepted by clsx
  */
@@ -2370,6 +2402,12 @@ interface CloseIconProps extends React.SVGProps<SVGSVGElement> {
  */
 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 DropdownIconProps extends React.SVGProps<SVGSVGElement> {
     /** Size of the icon in pixels. Defaults to 24. */
     size?: number;
@@ -3265,4 +3303,140 @@ interface YoutubeIconProps extends React.SVGProps<SVGSVGElement> {
  */
 declare const YoutubeIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<YoutubeIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
 
-export { AuthPrompt, type AuthPromptProps, AvatarPlaceholder, type AvatarPlaceholderCategory, type AvatarPlaceholderProps, type AvatarPlaceholderVariant, BackToTop, type BackToTopProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, type CalendarIconProps, CaptureIcon, type CaptureIconProps, CheckBox, CheckBoxGroup, type CheckBoxGroupOption, type CheckBoxGroupProps, type CheckBoxProps, CheckIcon, type CheckIconProps, CloseIcon, type CloseIconProps, Countdown, type CountdownProps, type CountdownSize, type CountdownTimeValues, type CountdownUnit, DateInput, type DateInputMode, type DateInputProps, DatePicker, type DatePickerMode, type DatePickerProps, DiscordIcon, type DiscordIconProps, Divider, type DividerProps, type DividerVariant, DropUpIcon, type DropUpIconProps, DropdownIcon, type DropdownIconProps, ErrorIcon, type ErrorIconProps, 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, GmailIcon, type GmailIconProps, GridIcon, type GridIconProps, ImageIcon, type ImageIconProps, type ImageSourceMode, ImageUploadIcon, type ImageUploadIconProps, IndeterminateIcon, type IndeterminateIconProps, InfoIcon, type InfoIconProps, Input, type InputProps, type InputVariant, InstagramIcon, type InstagramIconProps, KakaoTalkIcon, type KakaoTalkIconProps, LineIcon, type LineIconProps, LinkedInIcon, type LinkedInIconProps, ListIcon, type ListIconProps, LoadingScreen, type LoadingScreenProps, Logo, type LogoFormat, type LogoProps, type LogoVariant, MessengerIcon, type MessengerIconProps, MinusIcon, type MinusIconProps, MultipleSelectionButton, type MultipleSelectionButtonProps, MultipleSelectionIcon, type MultipleSelectionIconProps, Pagination, type PaginationProps, PlusIcon, type PlusIconProps, QuantityInput, type QuantityInputProps, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, type RangeValue, RedditIcon, type RedditIconProps, RichTextEditor, type RichTextEditorProps, RichTextViewer, type RichTextViewerProps, 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, 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, TwitchIcon, type TwitchIconProps, 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, fieldErrorToProps, formatDateLocalized, logoAssets, monthsForLocale, scopeClass, throttle, toDateKey, weekdaysForLocale, welcomeAssets, zodErrorsToSummary };
+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;
+    /** Stroke width of the icon in pixels. Defaults to 1.5. */
+    strokeWidth?: number;
+}
+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;
+    /** Stroke width of the icon in pixels. Defaults to 1.5. */
+    strokeWidth?: number;
+}
+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;
+    /** Stroke width of the icon in pixels. Defaults to 1.5. */
+    strokeWidth?: number;
+}
+declare const AlignRightIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<AlignRightIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+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;
+    /** Stroke width of the icon in pixels. Defaults to 1.5. */
+    strokeWidth?: number;
+}
+/**
+ * Bold icon component - displays a bold icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { BoldIcon } from '@scalably/ui';
+ *
+ * <BoldIcon 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>>>;
+
+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;
+    /** Stroke width of the icon in pixels. Defaults to 1.5. */
+    strokeWidth?: number;
+}
+/**
+ * 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" />
+ * ```
+ */
+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>>>;
+
+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;
+    /** Stroke width of the icon in pixels. Defaults to 1.5. */
+    strokeWidth?: number;
+}
+/**
+ * Underline icon component - displays an underline icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { UnderlineIcon } from '@scalably/ui';
+ *
+ * <UnderlineIcon size={16} className="sui-text-primary" />
+ * ```
+ */
+declare const UnderlineIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<UnderlineIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+export { AlignCenterIcon, type AlignCenterIconProps, AlignLeftIcon, type AlignLeftIconProps, AlignRightIcon, type AlignRightIconProps, AppLogo, AuthPrompt, type AuthPromptProps, AvatarPlaceholder, type AvatarPlaceholderCategory, type AvatarPlaceholderProps, type AvatarPlaceholderVariant, BackToTop, type BackToTopProps, BoldIcon, type BoldIconProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, type CalendarIconProps, CampaignLogo, CaptureIcon, type CaptureIconProps, 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, DateInput, type DateInputMode, type DateInputProps, DatePicker, type DatePickerMode, type DatePickerProps, type DefaultAssetCategory, type DefaultAssetComponent, type DefaultAssetProps, type DefaultAssetVariant, type DefaultAssets, DiscordIcon, type DiscordIconProps, Divider, type DividerProps, type DividerVariant, DropUpIcon, type DropUpIconProps, DropdownIcon, type DropdownIconProps, ErrorIcon, type ErrorIconProps, 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, GmailIcon, type GmailIconProps, GridIcon, type GridIconProps, GroupAvatar, IconBigLogo, IconLogo, 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, 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, RedditIcon, type RedditIconProps, RichTextEditor, type RichTextEditorProps, RichTextViewer, type RichTextViewerProps, 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, 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, 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, fieldErrorToProps, formatDateLocalized, logoAssets, monthsForLocale, scopeClass, throttle, toDateKey, weekdaysForLocale, welcomeAssets, zodErrorsToSummary };