npm - @scalably/ui - Versions diffs - 0.4.4 → 0.5.1 - Mend

@scalably/ui 0.4.4 → 0.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/index.d.cts CHANGED Viewed

@@ -1,5 +1,6 @@
 import * as react from 'react';
 import react__default, { ReactNode, HTMLAttributes, ForwardRefExoticComponent, SVGProps, RefAttributes, MemoExoticComponent } from 'react';
+import { Point, Area } from 'react-easy-crop';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as date_fns from 'date-fns';
 export { addMonths, endOfMonth, isSameDay, startOfMonth } from 'date-fns';
@@ -703,6 +704,9 @@ declare const Divider: react.ForwardRefExoticComponent<react.HTMLAttributes<HTML
     colorClassName?: string;
 } & react.RefAttributes<HTMLDivElement>>;
+/**
+ * File upload component types and interfaces.
+ */
 type FileUploadVariant = "default" | "dragOver" | "error" | "disabled";
 type FileUploadSize = "sm" | "md" | "lg";
 type FileUploadIconType = "file" | "image" | "video";
@@ -736,6 +740,24 @@ interface FileUploadProps {
     onUploadSuccess?: (files: File[]) => void;
     onUploadError?: (error: FileUploadError) => void;
     onFileRemove?: (fileId: string) => void;
+    /**
+     * Accepted file types. Can be:
+     * - MIME types (e.g., 'image/jpeg', 'image/png') - **Recommended**
+     * - MIME type wildcards (e.g., 'image/*', 'video/*')
+     * - File extensions (e.g., '.jpg', '.png') - Will be converted to MIME types internally
+     *
+     * @example
+     * ```tsx
+     * // MIME types (recommended)
+     * acceptedFileTypes={['image/jpeg', 'image/png', 'image/gif']}
+     *
+     * // With wildcards
+     * acceptedFileTypes={['image/*', 'video/*']}
+     *
+     * // Extensions (supported but will be normalized to MIME types)
+     * acceptedFileTypes={['.jpg', '.png', '.gif']}
+     * ```
+     */
     acceptedFileTypes?: string[];
     maxFileSize?: number;
     maxFiles?: number;
@@ -746,7 +768,78 @@ interface FileUploadProps {
     /** Optional helper text displayed under the dropzone when no error */
     helperText?: string;
     variant?: FileUploadVariant;
+    /**
+     * Size variant (optional). If not provided, the component uses full width
+     * with a default min-height of 160px. For custom sizing, use `className` instead.
+     *
+     * **Best Practice:** Omit `size` and control dimensions via `className` for
+     * maximum flexibility. The component automatically adjusts icon sizes, text,
+     * and spacing based on detected dimensions.
+     */
     size?: FileUploadSize;
+    /**
+     * Custom CSS classes for styling the upload zone.
+     *
+     * **Default Behavior:**
+     * - Full width (`sui-w-full`)
+     * - Default min-height: 160px (best practice)
+     * - Default padding: 24px (1.5rem)
+     * - Icon size: 24px (auto-scales based on dimensions)
+     *
+     * **Custom Sizing:**
+     * Control dimensions using Tailwind classes. The component automatically adjusts
+     * icon sizes, text sizes, and spacing to fit your layout:
+     * - `sui-min-h-[124px]` - Set minimum height
+     * - `sui-max-w-[200px]` - Set maximum width
+     * - `sui-w-full` - Full width (default)
+     *
+     * **Responsive Sizing:**
+     * When custom dimensions are detected from `className`, the component automatically:
+     * - Scales icon size based on container dimensions:
+     *   - ≤100px: 16px icon
+     *   - ≤150px: 20px icon
+     *   - ≤200px: 24px icon
+     *   - >200px: 28px icon
+     * - Adjusts text sizes for compact layouts
+     * - Optimizes spacing for smaller containers
+     *
+     * **Best Practice Examples:**
+     *
+     * @example
+     * ```tsx
+     * // Full width, default height (160px) - recommended
+     * <FileUpload onFilesChange={setFiles} />
+     *
+     * // Full width, custom height
+     * <FileUpload
+     *   className="sui-min-h-[200px]"
+     *   onFilesChange={setFiles}
+     * />
+     *
+     * // Compact custom size (200x124) - icon and text auto-scale
+     * <FileUpload
+     *   className="sui-min-h-[124px] sui-max-w-[200px]"
+     *   onFilesChange={setFiles}
+     * />
+     *
+     * // Square crop (1:1) with matching zone size
+     * <FileUpload
+     *   enableImageCrop
+     *   imageCropAspect={1}
+     *   className="sui-min-h-[300px] sui-max-w-[300px]"
+     * />
+     *
+     * // Widescreen crop (16:9) with matching zone size
+     * <FileUpload
+     *   enableImageCrop
+     *   imageCropAspect={16 / 9}
+     *   className="sui-min-h-[200px] sui-max-w-[356px]"
+     * />
+     * ```
+     *
+     * After cropping, the preview will render at exactly the zone dimensions,
+     * ensuring the cropped image fills the zone perfectly.
+     */
     className?: string;
     iconType?: FileUploadIconType;
     uploadIcon?: React.ReactNode;
@@ -775,18 +868,178 @@ interface FileUploadProps {
      * Provides the Blob (image/jpeg) and a data URL for immediate preview.
      */
     onThumbnailCapture?: (thumbnail: Blob, dataUrl: string, file: FileUploadFile) => void;
+    /** Enable image crop UI via modal when an image file is selected. */
+    enableImageCrop?: boolean;
+    /**
+     * Aspect ratio constraint for image crop (width/height), undefined = free crop.
+     * Common values: 1 (square), 16/9 (widescreen), 4/3 (standard).
+     *
+     * **Tip:** To match the upload zone size to the crop aspect ratio, use `className`
+     * with matching dimensions. For example, with `imageCropAspect={1}` (square),
+     * use `className="sui-min-h-[300px] sui-max-w-[300px]"` to create a 300×300px zone.
+     * The preview will then render at exactly that size after cropping.
+     *
+     * @example
+     * ```tsx
+     * // Square crop with matching zone
+     * <FileUpload
+     *   enableImageCrop
+     *   imageCropAspect={1}
+     *   className="sui-min-h-[300px] sui-max-w-[300px]"
+     * />
+     * ```
+     */
+    imageCropAspect?: number;
+    /**
+     * Called when an image is cropped.
+     * Provides the cropped Blob (image/jpeg) and a data URL for immediate preview.
+     *
+     * **Note:** When using custom zone sizing with `className`, update the file's
+     * `preview` property with the `dataUrl` to ensure the preview renders at the
+     * correct size within the zone.
+     *
+     * @example
+     * ```tsx
+     * <FileUpload
+     *   enableImageCrop
+     *   imageCropAspect={1}
+     *   className="sui-min-h-[300px] sui-max-w-[300px]"
+     *   onImageCrop={(blob, dataUrl, file) => {
+     *     // Update the file preview to show the cropped image
+     *     setFiles(prev =>
+     *       prev.map(f =>
+     *         f.id === file.id ? { ...f, preview: dataUrl } : f
+     *       )
+     *     );
+     *   }}
+     * />
+     * ```
+     */
+    onImageCrop?: (croppedBlob: Blob, dataUrl: string, file: FileUploadFile) => void;
+}
+declare const FileUpload: react.ForwardRefExoticComponent<FileUploadProps & react.RefAttributes<HTMLDivElement>>;
+interface ImageCropProps {
+    /** Image source (data URL or object URL) */
+    imageSrc: string;
+    /** Aspect ratio (width/height), undefined = free */
+    aspect?: number;
+    /** Current crop position */
+    crop: Point;
+    /** Current zoom level */
+    zoom: number;
+    /** Current rotation in degrees */
+    rotation: number;
+    /** Called when crop position changes (on drag) */
+    onCropChange: (crop: Point) => void;
+    /** Called when zoom changes */
+    onZoomChange: (zoom: number) => void;
+    /** Called when rotation changes */
+    onRotationChange: (rotation: number) => void;
+    /** Called when crop completes - stores coordinates only (fires on drag) */
+    onCropComplete: (croppedArea: Area, croppedAreaPixels: Area) => void;
+    /** Crop shape */
+    cropShape?: "rect" | "round";
+    /** Show grid overlay */
+    showGrid?: boolean;
+    /** Minimum zoom level */
+    minZoom?: number;
+    /** Maximum zoom level */
+    maxZoom?: number;
+    /** Accessibility label */
+    "aria-label"?: string;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * Image crop component wrapping react-easy-crop with controls for zoom, rotation, and crop area.
+ * This component only manages the UI and stores crop coordinates. Blob generation happens
+ * separately when the user confirms the crop.
+ */
+declare const ImageCrop: react.ForwardRefExoticComponent<ImageCropProps & react.RefAttributes<HTMLDivElement>>;
+interface ImageCropModalProps {
+    /** Controls visibility of the modal */
+    isOpen: boolean;
+    /** Called when the modal should close */
+    onClose: () => void;
+    /** Image source (File object URL or data URL) */
+    imageSrc: string;
+    /** Aspect ratio constraint (width/height), undefined = free */
+    aspect?: number;
+    /** Called when crop is confirmed with final result */
+    onConfirm: (croppedBlob: Blob, dataUrl: string) => void;
+    /** Crop shape */
+    cropShape?: "rect" | "round";
+    /** Show grid overlay */
+    showGrid?: boolean;
+    /** Customizable content */
+    title?: string;
+    cancelButtonText?: string;
+    saveButtonText?: string;
 }
 /**
- * File upload component with drag-and-drop, validation, previews, and accessibility support.
- * Supports multiple files, file type validation, size limits, and comprehensive error handling.
+ * Modal component for cropping images with zoom, rotation, and aspect ratio controls.
+ * Manages all crop state and generates the final Blob only when the user clicks "Save".
  */
+declare const ImageCropModal: {
+    ({ isOpen, onClose, imageSrc, aspect, onConfirm, cropShape, showGrid, title, cancelButtonText, saveButtonText, }: ImageCropModalProps): react_jsx_runtime.JSX.Element | null;
+    displayName: string;
+};
 /**
- * Note on uploading state:
- * - The component does not perform uploads; the parent owns upload lifecycle.
- * - To show progress or uploading state, manage `files` as a controlled prop and
- *   update each item's `status` ("uploading" | "success" | "error") and `progress`.
+ * Options for cropping an image
  */
-declare const FileUpload: react.ForwardRefExoticComponent<FileUploadProps & react.RefAttributes<HTMLDivElement>>;
+interface GetCroppedImgOptions {
+    /** Image source (data URL, object URL, or remote URL) */
+    imageSrc: string;
+    /** Crop area in pixels from react-easy-crop's onCropComplete */
+    pixelCrop: Area;
+    /** Rotation in degrees (default: 0) */
+    rotation?: number;
+    /** Flip configuration */
+    flip?: {
+        horizontal: boolean;
+        vertical: boolean;
+    };
+    /** Output image format (default: 'image/jpeg') */
+    outputFormat?: "image/jpeg" | "image/png";
+    /** Output quality for JPEG (0-1, default: 0.9) */
+    outputQuality?: number;
+}
+/**
+ * Result of image cropping operation
+ */
+interface CroppedImageResult {
+    /** Cropped image as Blob */
+    blob: Blob;
+    /** Cropped image as data URL for immediate preview */
+    dataUrl: string;
+}
+/**
+ * Crops an image based on the provided crop area and applies rotation/flip transformations.
+ * Returns both a Blob (for upload) and a data URL (for immediate preview).
+ *
+ * @param options - Cropping options including image source, crop area, rotation, and output format
+ * @returns Promise resolving to cropped image result or null if operation fails
+ *
+ * @example
+ * ```tsx
+ * const result = await getCroppedImg({
+ *   imageSrc: imageUrl,
+ *   pixelCrop: { x: 100, y: 100, width: 300, height: 300 },
+ *   rotation: 90,
+ *   outputFormat: 'image/jpeg',
+ *   outputQuality: 0.9
+ * });
+ * if (result) {
+ *   // Use result.blob for upload
+ *   // Use result.dataUrl for preview
+ * }
+ * ```
+ */
+declare function getCroppedImg(options: GetCroppedImgOptions): Promise<CroppedImageResult | null>;
 type FormBaseProps = Omit<React.FormHTMLAttributes<HTMLFormElement>, "onSubmit">;
 interface FormProps extends FormBaseProps {
@@ -1086,6 +1339,7 @@ interface SelectProps extends SelectBaseProps {
     onSearch?: (searchTerm: string) => void;
     clearable?: boolean;
     maxHeight?: number;
+    dropdownClassName?: string;
     renderValue?: (props: {
         selectedValue: string | string[];
         selectedOption: SelectOption | null;
@@ -1912,16 +2166,6 @@ interface LoadingScreenProps extends Omit<react__default.HTMLAttributes<HTMLDivE
      * Optional loading message displayed below the logo.
      */
     message?: string;
-    /**
-     * Backdrop blur amount. Set to 0 to disable blur.
-     * @default 8
-     */
-    backdropBlur?: number;
-    /**
-     * Backdrop opacity (0-1).
-     * @default 0.8
-     */
-    backdropOpacity?: number;
     /**
      * Logo size in pixels. Responsive: smaller on mobile, larger on desktop.
      * @default { mobile: 64, desktop: 80 }
@@ -1940,7 +2184,7 @@ interface LoadingScreenProps extends Omit<react__default.HTMLAttributes<HTMLDivE
  * Full-screen loading overlay component with animated Scalably logo.
  *
  * Features:
- * - Full-screen overlay with customizable backdrop
+ * - Full-screen transparent overlay
  * - Animated logo with pulse and rotate combination
  * - Optional loading message
  * - Full accessibility support
@@ -1955,8 +2199,8 @@ interface LoadingScreenProps extends Omit<react__default.HTMLAttributes<HTMLDivE
  * // With message
  * <LoadingScreen message="Loading your data..." />
  *
- * // Custom backdrop
- * <LoadingScreen backdropBlur={12} backdropOpacity={0.9} />
+ * // With backdrop blur via className
+ * <LoadingScreen className="backdrop-blur-md" />
  *
  * // Custom size
  * <LoadingScreen size={{ mobile: 48, desktop: 96 }} />
@@ -1964,6 +2208,53 @@ interface LoadingScreenProps extends Omit<react__default.HTMLAttributes<HTMLDivE
  */
 declare const LoadingScreen: react__default.ForwardRefExoticComponent<LoadingScreenProps & react__default.RefAttributes<HTMLDivElement>>;
+interface LoadingSpinnerProps extends Omit<react__default.HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * Size of the spinner in pixels.
+     * @default 24
+     */
+    size?: number;
+    /**
+     * Accessible label for screen readers.
+     * @default "Loading"
+     */
+    "aria-label"?: string;
+}
+/**
+ * Inline loading spinner component with animated Scalably logo.
+ *
+ * Features:
+ * - Compact spinner for inline use (buttons, cards, tables, etc.)
+ * - Animated logo with pulse and rotate combination
+ * - Full accessibility support
+ * - Respects reduced motion preferences
+ * - Customizable size
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <LoadingSpinner />
+ *
+ * // Custom size
+ * <LoadingSpinner size={32} />
+ *
+ * // In a button
+ * <Button disabled>
+ *   <LoadingSpinner size={16} className="sui-mr-2" />
+ *   Loading...
+ * </Button>
+ *
+ * // In a card
+ * <Card>
+ *   <div className="sui-flex sui-items-center sui-gap-2">
+ *     <LoadingSpinner size={20} />
+ *     <span>Processing...</span>
+ *   </div>
+ * </Card>
+ * ```
+ */
+declare const LoadingSpinner: react__default.ForwardRefExoticComponent<LoadingSpinnerProps & react__default.RefAttributes<HTMLDivElement>>;
 interface WelcomeAssetProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
     /**
      * Optional square dimension override; falls back to intrinsic size.
@@ -2116,6 +2407,15 @@ interface RichTextEditorProps {
         max: number;
         current: number;
     }) => void;
+    /**
+     * Controls when Tiptap renders the editor content.
+     *
+     * - Set to `false` when using SSR (e.g., Next.js) to prevent hydration mismatches.
+     * - Set to `true` or leave undefined for client-side only rendering.
+     *
+     * @default undefined (Tiptap auto-detects, but you should explicitly set `false` for SSR)
+     */
+    immediatelyRender?: boolean;
 }
 /**
  * RichTextEditor - Controlled rich text editor built on top of Tiptap.
@@ -2138,7 +2438,12 @@ interface RichTextEditorProps {
  *
  *   return (
  *     <div>
- *       <RichTextEditor value={content} onChange={setContent} />
+ *       {/* For SSR (Next.js, etc.), set immediatelyRender={false} *\/}
+ *       <RichTextEditor
+ *         value={content}
+ *         onChange={setContent}
+ *         immediatelyRender={false}
+ *       />
  *       <RichTextViewer content={content} />
  *     </div>
  *   );
@@ -2148,7 +2453,7 @@ interface RichTextEditorProps {
  * @see RichTextViewer - Read-only viewer component for displaying rich text content
  */
 declare const RichTextEditor: {
-    ({ value, onChange, label, error, helperText, placeholder, minHeight, simple, disabled, "data-testid": dataTestId, containerClassName, onImageUpload, imageSourceMode, maxCharacters, onMaxLengthExceed, }: RichTextEditorProps): react_jsx_runtime.JSX.Element;
+    ({ value, onChange, label, error, helperText, placeholder, minHeight, simple, disabled, "data-testid": dataTestId, containerClassName, onImageUpload, imageSourceMode, maxCharacters, onMaxLengthExceed, immediatelyRender, }: RichTextEditorProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
@@ -2327,6 +2632,102 @@ declare const zodErrorsToSummary: (errors: Record<string, FieldErrorLike>) => {
     message: string;
 }[];
+type BasicFileValidationErrorType = "fileType" | "fileSize";
+interface BasicFileValidationError {
+    type: BasicFileValidationErrorType;
+    message: string;
+}
+/**
+ * Converts a file extension (e.g., '.jpg') to its corresponding MIME type (e.g., 'image/jpeg').
+ * Returns null if the extension is not recognized.
+ *
+ * @param extension - File extension with or without leading dot (e.g., '.jpg' or 'jpg')
+ * @returns The corresponding MIME type or null if not found
+ *
+ * @example
+ * ```ts
+ * extensionToMimeType('.jpg') // 'image/jpeg'
+ * extensionToMimeType('png')  // 'image/png'
+ * extensionToMimeType('.xyz') // null
+ * ```
+ */
+declare function extensionToMimeType(extension: string): string | null;
+/**
+ * Converts a MIME type to a user-friendly display name (extension format).
+ * Returns the extension name in uppercase (e.g., 'image/jpeg' → 'JPEG').
+ * For wildcards, returns a category name (e.g., 'image/*' → 'All images').
+ *
+ * @param mimeType - MIME type (e.g., 'image/jpeg') or wildcard (e.g., 'image/*')
+ * @returns User-friendly display name
+ *
+ * @example
+ * ```ts
+ * mimeTypeToDisplayName('image/jpeg') // 'JPEG'
+ * mimeTypeToDisplayName('image/*')     // 'All images'
+ * mimeTypeToDisplayName('video/mp4')   // 'MP4'
+ * ```
+ */
+declare function mimeTypeToDisplayName(mimeType: string): string;
+/**
+ * Converts an array of MIME types to a user-friendly display string.
+ * Shows extensions in uppercase (e.g., 'JPEG, PNG, GIF') or category names for wildcards.
+ *
+ * @param mimeTypes - Array of MIME types
+ * @returns User-friendly comma-separated string
+ *
+ * @example
+ * ```ts
+ * formatAcceptedFileTypes(['image/jpeg', 'image/png', 'image/gif'])
+ * // 'JPEG, PNG, GIF'
+ *
+ * formatAcceptedFileTypes(['image/*', 'video/*'])
+ * // 'All images, All videos'
+ * ```
+ */
+declare function formatAcceptedFileTypes(mimeTypes: string[]): string;
+/**
+ * Normalizes an array of accepted file types to MIME types only.
+ * Converts file extensions (e.g., '.jpg') to MIME types (e.g., 'image/jpeg').
+ * MIME types and wildcards (e.g., 'image/*') are passed through unchanged.
+ *
+ * @param acceptedFileTypes - Array of file types (extensions or MIME types)
+ * @returns Array of normalized MIME types
+ *
+ * @example
+ * ```ts
+ * normalizeAcceptedFileTypes(['.jpg', 'image/png', 'image/*'])
+ * // ['image/jpeg', 'image/png', 'image/*']
+ * ```
+ */
+declare function normalizeAcceptedFileTypes(acceptedFileTypes: string[]): string[];
+/**
+ * Validate a File against accepted MIME types and max size.
+ * Returns null when valid, or a BasicFileValidationError when invalid.
+ *
+ * **Note:** This function only accepts MIME types (e.g., 'image/jpeg', 'image/png').
+ * Use `normalizeAcceptedFileTypes()` to convert extensions to MIME types before calling this function.
+ *
+ * @param file - The file to validate
+ * @param acceptedMimeTypes - Array of accepted MIME types. Supports:
+ *   - Exact MIME types (e.g., 'image/png', 'image/jpeg')
+ *   - MIME type wildcards (e.g., 'image/*', 'video/*')
+ * @param maxFileSize - Maximum file size in bytes
+ *
+ * @example
+ * ```ts
+ * // MIME types
+ * validateFileTypeAndSize(file, ['image/png', 'image/jpeg'], 5 * 1024 * 1024);
+ *
+ * // With wildcards
+ * validateFileTypeAndSize(file, ['image/*', 'video/*'], 5 * 1024 * 1024);
+ *
+ * // Converting extensions to MIME types first
+ * const mimeTypes = normalizeAcceptedFileTypes(['.jpg', '.png']);
+ * validateFileTypeAndSize(file, mimeTypes, 5 * 1024 * 1024);
+ * ```
+ */
+declare function validateFileTypeAndSize(file: File, acceptedMimeTypes: string[], maxFileSize: number): BasicFileValidationError | null;
 /**
  * Props for the CalendarIcon component
  */
@@ -2335,8 +2736,6 @@ interface CalendarIconProps extends React.SVGProps<SVGSVGElement> {
     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;
 }
 /**
  * Calendar icon component - displays a calendar with date indicators.
@@ -2383,8 +2782,6 @@ interface CheckIconProps extends React.SVGProps<SVGSVGElement> {
     size?: number;
     /** Additional CSS classes to apply to the icon */
     className?: string;
-    /** Stroke width of the icon in pixels. Defaults to 2.2. */
-    strokeWidth?: number;
 }
 /**
  * Check icon component - displays a checkmark in a green gradient circle.
@@ -2408,8 +2805,6 @@ interface CloseIconProps extends React.SVGProps<SVGSVGElement> {
     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;
 }
 /**
  * Close icon component - displays a cross icon.
@@ -2431,13 +2826,23 @@ interface CopyIconProps extends React.SVGProps<SVGSVGElement> {
 }
 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>>>;
 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;
-    /** Stroke width of the icon in pixels. Defaults to 2. */
-    strokeWidth?: number;
 }
 /**
  * Dropdown icon component - displays a down arrow icon.
@@ -2458,8 +2863,6 @@ interface DropUpIconProps extends React.SVGProps<SVGSVGElement> {
     size?: number;
     /** Additional CSS classes to apply to the icon */
     className?: string;
-    /** Stroke width of the icon in pixels. Defaults to 2. */
-    strokeWidth?: number;
 }
 /**
  * DropUp icon component - displays an up arrow icon.
@@ -2475,13 +2878,17 @@ interface DropUpIconProps extends React.SVGProps<SVGSVGElement> {
  */
 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>>>;
 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;
-    /** Stroke width of the icon in pixels. Defaults to 1.5. */
-    strokeWidth?: number;
 }
 /**
  * Error icon component - displays an error icon.
@@ -2497,6 +2904,46 @@ interface ErrorIconProps extends React.SVGProps<SVGSVGElement> {
  */
 declare const ErrorIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ErrorIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+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;
+}
+/**
+ * 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: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<EyeIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+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;
+}
+/**
+ * Eye slash icon component - displays an eye slash icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { EyeSlashIcon } from '@scalably/ui';
+ *
+ * <EyeSlashIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const EyeSlashIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<EyeSlashIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
 interface FileIconProps extends React.SVGProps<SVGSVGElement> {
     /** Size of the icon in pixels. Defaults to 24. */
     size?: number;
@@ -2520,8 +2967,6 @@ declare const FileIcon: react.MemoExoticComponent<react.ForwardRefExoticComponen
 interface FileUploadIconProps 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. */
-    strokeWidth?: number;
     /** Additional CSS classes to apply to the icon */
     className?: string;
 }
@@ -2544,8 +2989,6 @@ interface GridIconProps extends React.SVGProps<SVGSVGElement> {
     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;
 }
 /**
  * Grid icon component - displays a grid icon.
@@ -2584,8 +3027,6 @@ declare const ImageIcon: react.MemoExoticComponent<react.ForwardRefExoticCompone
 interface ImageUploadIconProps 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. */
-    strokeWidth?: number;
     /** Additional CSS classes to apply to the icon */
     className?: string;
 }
@@ -2608,8 +3049,6 @@ interface IndeterminateIconProps extends React.SVGProps<SVGSVGElement> {
     size?: number;
     /** Additional CSS classes to apply to the icon */
     className?: string;
-    /** Stroke width of the icon in pixels. Defaults to 2. */
-    strokeWidth?: number;
 }
 /**
  * Indeterminate icon component - displays an indeterminate icon.
@@ -2630,8 +3069,6 @@ interface InfoIconProps extends React.SVGProps<SVGSVGElement> {
     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;
 }
 /**
  * Info icon component - displays an info icon.
@@ -2652,8 +3089,6 @@ interface ListIconProps extends React.SVGProps<SVGSVGElement> {
     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;
 }
 /**
  * List icon component - displays a list icon.
@@ -2674,8 +3109,6 @@ interface MinusIconProps extends React.SVGProps<SVGSVGElement> {
     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;
 }
 /**
  * Minus icon component - displays a minus icon.
@@ -2719,8 +3152,6 @@ interface PlusIconProps extends React.SVGProps<SVGSVGElement> {
     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;
 }
 /**
  * Plus icon component - displays a plus icon.
@@ -2736,6 +3167,67 @@ interface PlusIconProps extends React.SVGProps<SVGSVGElement> {
  */
 declare const PlusIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<PlusIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+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;
+}
+/**
+ * Reset icon component - displays a reset icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { ResetIcon } from '@scalably/ui';
+ *
+ * <ResetIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const ResetIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ResetIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+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;
+}
+/**
+ * RotateLeft icon component - displays a rotate left icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { RotateLeftIcon } from '@scalably/ui';
+ *
+ * <RotateLeftIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const RotateLeftIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<RotateLeftIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+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;
+}
+/**
+ * RotateRight icon component - displays a rotate right icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { RotateRightIcon } from '@scalably/ui';
+ *
+ * <RotateRightIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const RotateRightIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<RotateRightIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
 /**
  * Props for the SearchIcon component
  */
@@ -2744,8 +3236,6 @@ interface SearchIconProps extends React.SVGProps<SVGSVGElement> {
     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;
 }
 /**
  * Search icon component - a magnifying glass icon for search functionality.
@@ -2766,8 +3256,6 @@ interface SettingsIconProps extends React.SVGProps<SVGSVGElement> {
     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;
 }
 /**
  * Settings icon component - displays a settings icon.
@@ -2791,8 +3279,6 @@ interface SuccessIconProps extends React.SVGProps<SVGSVGElement> {
     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;
 }
 /**
  * Success icon component - displays a checkmark in a green gradient circle.
@@ -2814,8 +3300,6 @@ interface TickIconProps extends React.SVGProps<SVGSVGElement> {
     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;
 }
 /**
  * Tick icon component - displays a tick icon.
@@ -2836,8 +3320,6 @@ interface ToFirstIconProps extends React.SVGProps<SVGSVGElement> {
     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;
 }
 /**
  * ToFirst icon component - displays a to first icon.
@@ -2858,8 +3340,6 @@ interface ToLastIconProps extends React.SVGProps<SVGSVGElement> {
     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;
 }
 /**
  * ToLast icon component - displays a to last icon.
@@ -2880,8 +3360,6 @@ interface ToNextIconProps extends React.SVGProps<SVGSVGElement> {
     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;
 }
 /**
  * ToNext icon component - displays a to next icon.
@@ -2902,8 +3380,6 @@ interface ToPreviousIconProps extends React.SVGProps<SVGSVGElement> {
     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;
 }
 /**
  * ToPrevious icon component - displays a to previous icon.
@@ -2919,6 +3395,26 @@ interface ToPreviousIconProps extends React.SVGProps<SVGSVGElement> {
  */
 declare const ToPreviousIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ToPreviousIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+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;
+}
+/**
+ * Translate icon component - displays a translate icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { TranslateIcon } from '@scalably/ui';
+ *
+ * <TranslateIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const TranslateIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<TranslateIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
 interface VideoIconProps extends React.SVGProps<SVGSVGElement> {
     /** Size of the icon in pixels. Defaults to 24. */
     size?: number;
@@ -2942,8 +3438,6 @@ declare const VideoIcon: react.MemoExoticComponent<react.ForwardRefExoticCompone
 interface VideoUploadIconProps 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. */
-    strokeWidth?: number;
     /** Additional CSS classes to apply to the icon */
     className?: string;
 }
@@ -2966,8 +3460,6 @@ interface WarnIconProps extends React.SVGProps<SVGSVGElement> {
     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;
 }
 /**
  * Warn icon component - displays a warn icon.
@@ -3331,8 +3823,6 @@ interface AlignCenterIconProps extends React.SVGProps<SVGSVGElement> {
     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>>>;
@@ -3341,8 +3831,6 @@ interface AlignLeftIconProps extends React.SVGProps<SVGSVGElement> {
     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>>>;
@@ -3351,8 +3839,6 @@ interface AlignRightIconProps extends React.SVGProps<SVGSVGElement> {
     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>>>;
@@ -3361,8 +3847,6 @@ interface BoldIconProps extends React.SVGProps<SVGSVGElement> {
     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.
@@ -3399,8 +3883,6 @@ interface ItalicIconProps extends React.SVGProps<SVGSVGElement> {
     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.
@@ -3445,8 +3927,6 @@ interface UnderlineIconProps extends React.SVGProps<SVGSVGElement> {
     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.
@@ -3462,4 +3942,4 @@ interface UnderlineIconProps extends React.SVGProps<SVGSVGElement> {
  */
 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, 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, 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 };
+export { AlignCenterIcon, type AlignCenterIconProps, AlignLeftIcon, type AlignLeftIconProps, AlignRightIcon, type AlignRightIconProps, AppLogo, AuthPrompt, type AuthPromptProps, AvatarPlaceholder, type AvatarPlaceholderCategory, type AvatarPlaceholderProps, type AvatarPlaceholderVariant, BackToTop, type BackToTopProps, type BasicFileValidationError, BoldIcon, type BoldIconProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, type CalendarIconProps, CampaignLogo, CaptureIcon, type CaptureIconProps, CelebrationModal, type CelebrationModalProps, CheckBox, CheckBoxGroup, type CheckBoxGroupOption, type CheckBoxGroupProps, type CheckBoxProps, CheckIcon, type CheckIconProps, CloseIcon, type CloseIconProps, CopyIcon, type CopyIconProps, Countdown, type CountdownProps, type CountdownSize, type CountdownTimeValues, type CountdownUnit, CropIcon, type CropIconProps, type CroppedImageResult, DateInput, type DateInputMode, type DateInputProps, DatePicker, type DatePickerMode, type DatePickerProps, type DefaultAssetCategory, type DefaultAssetComponent, type DefaultAssetProps, type DefaultAssetVariant, type DefaultAssets, DeleteIcon, type DeleteIconProps, DiscordIcon, type DiscordIconProps, Divider, type DividerProps, type DividerVariant, DropUpIcon, type DropUpIconProps, DropdownIcon, type DropdownIconProps, EditIcon, type EditIconProps, ErrorIcon, type ErrorIconProps, EyeIcon, type EyeIconProps, EyeSlashIcon, type EyeSlashIconProps, FacebookIcon, type FacebookIconProps, type FieldErrorLike, FileIcon, type FileIconProps, FileUpload, type FileUploadError, type FileUploadFile, FileUploadIcon, type FileUploadIconProps, type FileUploadIconType, type FileUploadProps, type FileUploadSize, type FileUploadVariant, Form, type FormErrorItem, FormErrorSummary, type FormErrorSummaryProps, FormField, type FormFieldProps, type FormProps, type GetCroppedImgOptions, GmailIcon, type GmailIconProps, GridIcon, type GridIconProps, GroupAvatar, IconBigLogo, IconLogo, ImageCrop, ImageCropModal, type ImageCropModalProps, type ImageCropProps, ImageIcon, type ImageIconProps, ImagePlaceholder, type ImageSourceMode, ImageUploadIcon, type ImageUploadIconProps, IndeterminateIcon, type IndeterminateIconProps, InfoIcon, type InfoIconProps, Input, type InputProps, type InputVariant, InsertImageIcon, type InsertImageIconProps, InsertVideoIcon, type InsertVideoIconProps, InstagramIcon, type InstagramIconProps, ItalicIcon, type ItalicIconProps, KakaoTalkIcon, type KakaoTalkIconProps, LineIcon, type LineIconProps, LinkIcon, type LinkIconProps, LinkedInIcon, type LinkedInIconProps, ListBulletIcon, type ListBulletIconProps, ListIcon, type ListIconProps, ListNumberIcon, type ListNumberIconProps, LoadingScreen, type LoadingScreenProps, LoadingSpinner, type LoadingSpinnerProps, Logo, type LogoAssetComponent, type LogoAssetProps, type LogoAssets, type LogoFormat, type LogoProps, type LogoVariant, MessengerIcon, type MessengerIconProps, MinusIcon, type MinusIconProps, MultipleSelectionButton, type MultipleSelectionButtonProps, MultipleSelectionIcon, type MultipleSelectionIconProps, Pagination, type PaginationProps, PlusIcon, type PlusIconProps, ProfileAvatar, QuantityInput, type QuantityInputProps, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, type RangeValue, 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, StatusBadge, type StatusBadgeProps, type StatusBadgeSize, type StatusBadgeStatus, type StatusBadgeVariant, SuccessIcon, type SuccessIconProps, Switch, type SwitchProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TelegramIcon, type TelegramIconProps, TickIcon, type TickIconProps, TiktokIcon, type TiktokIconProps, TimePicker, type TimePickerProps, ToFirstIcon, type ToFirstIconProps, ToLastIcon, type ToLastIconProps, ToNextIcon, type ToNextIconProps, ToPreviousIcon, type ToPreviousIconProps, Toast, type ToastAction, ToastContainer, type ToastContainerProps, type ToastPosition, type ToastProps, type ToastStatus, Tooltip, type TooltipAlign, type TooltipProps, type TooltipSide, TranslateIcon, type TranslateIconProps, TwitchIcon, type TwitchIconProps, UnderlineIcon, type UnderlineIconProps, VideoIcon, type VideoIconProps, VideoUploadIcon, type VideoUploadIconProps, type ViewMode, ViewToggle, type ViewToggleProps, WarnIcon, type WarnIconProps, WelcomeBackground, type WelcomeBackgroundProps, WhatsAppIcon, type WhatsAppIconProps, XIcon, type XIconProps, YoutubeIcon, type YoutubeIconProps, clampDate, cn, daysGrid, debounce, defaultAssets, extensionToMimeType, fieldErrorToProps, formatAcceptedFileTypes, formatDateLocalized, getCroppedImg, logoAssets, mimeTypeToDisplayName, monthsForLocale, normalizeAcceptedFileTypes, scopeClass, throttle, toDateKey, validateFileTypeAndSize, weekdaysForLocale, welcomeAssets, zodErrorsToSummary };