@lax-wp/design-system 0.3.114 → 0.4.0

package/dist/components/data-display/text/Text.d.ts

@@ -0,0 +1,41 @@
+import type { FC, ReactNode } from "react";
+type TSVG = FC<React.SVGProps<SVGSVGElement>>;
+/**
+ * Props for the Text component
+ */
+export interface TextProps {
+    /** Text content to display (will be passed through i18n translation) */
+    text: string;
+    /** Whether to render without a wrapper tag */
+    emptyTag?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Click handler for the text element */
+    onClick?: () => void;
+    /** Icon component to display on the left */
+    LeftIcon?: TSVG | null;
+    /** Role attribute for accessibility */
+    role?: "row" | "button";
+    /** Text to prepend before main text */
+    LText?: string;
+    /** Text to append after main text */
+    RText?: string;
+    /** Icon component to display on the right */
+    RightIcon?: TSVG | null;
+    /** HTML tag to render */
+    tagName?: "p" | "span" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "li" | "button";
+    /** Additional children to render */
+    children?: ReactNode;
+}
+/**
+ * Text component displays translated text with optional icons and customizable tag
+ *
+ * @example
+ * ```tsx
+ * <Text text="Hello World" />
+ * <Text text="Click me" tagName="button" onClick={handleClick} />
+ * <Text text="Title" tagName="h1" LeftIcon={StarIcon} />
+ * ```
+ */
+declare const Text: FC<TextProps>;
+export default Text;

package/dist/components/data-display/text-with-strike/TextWithStrike.d.ts

@@ -0,0 +1,19 @@
+import type { FC } from "react";
+/**
+ * Props for the TextWithStrike component
+ */
+export interface TextWithStrikeProps {
+    /** Text content that may contain <um></um> tags for highlighting */
+    text: string;
+}
+/**
+ * TextWithStrike component parses text with <um></um> tags and displays
+ * the content between those tags with a highlighted background.
+ *
+ * @example
+ * ```tsx
+ * <TextWithStrike text="This is <um>highlighted</um> text" />
+ * ```
+ */
+declare const TextWithStrike: FC<TextWithStrikeProps>;
+export default TextWithStrike;

package/dist/components/data-display/typography/Typography.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+export interface TypographyProps {
+    children: React.ReactNode;
+    variant?: "regular" | "medium" | "semibold" | "bold" | "extrablack";
+    size?: "extra-small" | "small" | "display-small" | "medium" | "display-medium" | "large" | "extra-large";
+    className?: string;
+    onClick?(event: React.MouseEvent<HTMLDivElement>): void;
+    highlight?: boolean;
+    appearance?: "title" | "body" | "subtitle" | "custom";
+    style?: React.CSSProperties;
+}
+export declare const Typography: {
+    ({ children, variant, size, onClick, className, highlight, appearance, style, }: TypographyProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/data-display/unsaved-changes-modal/UnsavedChangesModal.d.ts

@@ -0,0 +1,30 @@
+import type { FC } from 'react';
+export interface UnsavedChangesModalProps {
+    visible: boolean;
+    onClose: () => void;
+    onSaveAndExit: () => void;
+    onDiscardChanges: () => void;
+    onCancel: () => void;
+    isLoading?: boolean;
+    title?: string;
+    content?: string;
+    cancelText?: string;
+    discardText?: string;
+    saveText?: string;
+}
+/**
+ * UnsavedChangesModal component for prompting users about unsaved changes
+ *
+ * @example
+ * ```tsx
+ * <UnsavedChangesModal
+ *   visible={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   onSaveAndExit={handleSave}
+ *   onDiscardChanges={handleDiscard}
+ *   onCancel={handleCancel}
+ *   isLoading={isSaving}
+ * />
+ * ```
+ */
+export declare const UnsavedChangesModal: FC<UnsavedChangesModalProps>;

package/dist/components/drag-and-drop/drag-overlay/DragOverlay.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+export type DragOverlayProps = {
+    children: ReactNode;
+    /** ID of the container to portal the overlay into. Defaults to 'full-screen-container' then document.body */
+    containerId?: string;
+};
+/**
+ * DragOverlay component for rendering dragged item preview
+ *
+ * @example
+ * ```tsx
+ * <DraggableContainer onDragEnd={handleDragEnd}>
+ *   <SortableContext items={items}>
+ *     {items.map((item) => <SortableItem key={item.id} {...item} />)}
+ *   </SortableContext>
+ *   <DragOverlay>
+ *     {activeItem ? <ItemPreview {...activeItem} /> : null}
+ *   </DragOverlay>
+ * </DraggableContainer>
+ * ```
+ */
+export declare const DragOverlay: {
+    ({ children, containerId }: DragOverlayProps): import("react").ReactPortal;
+    displayName: string;
+};

package/dist/components/drag-and-drop/drag-overlay/index.d.ts

@@ -0,0 +1,2 @@
+export { DragOverlay } from './DragOverlay';
+export type { DragOverlayProps } from './DragOverlay';

package/dist/components/drag-and-drop/draggable-container/DraggableContainer.d.ts

@@ -0,0 +1,29 @@
+import { DragEndEvent, DragOverEvent, DragStartEvent } from '@dnd-kit/core';
+import { ReactNode } from 'react';
+export type DraggableContainerProps = {
+    onDragEnd: (event: DragEndEvent) => void;
+    onDragStart?: (event: DragStartEvent) => void;
+    onDragOver?: (event: DragOverEvent) => void;
+    children: ReactNode;
+};
+/**
+ * DraggableContainer component wraps dnd-kit DndContext with sensible defaults
+ *
+ * @example
+ * ```tsx
+ * <DraggableContainer
+ *   onDragEnd={(event) => handleDragEnd(event)}
+ *   onDragStart={(event) => handleDragStart(event)}
+ * >
+ *   <SortableContext items={items}>
+ *     {items.map((item) => (
+ *       <SortableItem key={item.id} id={item.id} />
+ *     ))}
+ *   </SortableContext>
+ * </DraggableContainer>
+ * ```
+ */
+export declare const DraggableContainer: {
+    ({ onDragEnd, onDragStart, onDragOver, children }: DraggableContainerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/drag-and-drop/draggable-container/index.d.ts

@@ -0,0 +1,2 @@
+export { DraggableContainer } from './DraggableContainer';
+export type { DraggableContainerProps } from './DraggableContainer';

package/dist/components/feedback/confirmation-modal/ConfirmationModal.d.ts

@@ -0,0 +1,38 @@
+import { type FC } from 'react';
+export interface IConfirmationModalProps {
+    /** Whether the modal is visible */
+    visible: boolean;
+    /** Callback when modal is closed */
+    onClose: (value: any) => void;
+    /** Content/message of the confirmation popup */
+    content: React.ReactNode;
+    /** Title of the confirmation popup */
+    title: React.ReactNode;
+    /** Callback when confirmed */
+    onConfirm: () => void;
+    /** Whether the action is in loading state */
+    isLoading?: boolean;
+    /** Variant of the modal ('destructive' for delete actions) */
+    variant?: 'destructive' | 'default';
+    /** Text for the cancel button (default: 'Cancel') */
+    cancelText?: string;
+    /** Text for the confirm button (default: 'Confirm' or 'Delete' based on variant) */
+    confirmText?: string;
+}
+/**
+ * ConfirmationModal component for displaying confirmation dialogs
+ *
+ * @example
+ * ```tsx
+ * <ConfirmationModal
+ *   visible={isOpen}
+ *   title="Delete Item"
+ *   content="Are you sure you want to delete this item?"
+ *   onConfirm={() => handleDelete()}
+ *   onClose={() => setIsOpen(false)}
+ *   variant="destructive"
+ * />
+ * ```
+ */
+export declare const ConfirmationModal: FC<IConfirmationModalProps>;
+export default ConfirmationModal;

package/dist/components/feedback/toast/Toast.d.ts

@@ -0,0 +1,29 @@
+import React, { type ReactNode } from 'react';
+import 'react-toastify/dist/ReactToastify.css';
+import './styles.css';
+export type ToastType = 'success' | 'error' | 'warning' | 'info' | 'in-progress';
+export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export interface ToastContainerProps {
+    position?: ToastPosition;
+    autoClose?: number | false;
+    hideProgressBar?: boolean;
+    newestOnTop?: boolean;
+    closeOnClick?: boolean;
+    pauseOnFocusLoss?: boolean;
+    draggable?: boolean;
+    pauseOnHover?: boolean;
+    rtl?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Toast: React.FC<ToastContainerProps>;
+export declare const toast: {
+    success: (message: ReactNode, options?: any) => import("react-toastify").Id;
+    error: (message: ReactNode, options?: any) => import("react-toastify").Id;
+    warning: (message: ReactNode, options?: any) => import("react-toastify").Id;
+    info: (message: ReactNode, options?: any) => import("react-toastify").Id;
+    inProgress: (message: ReactNode, options?: any) => import("react-toastify").Id;
+    dismiss: (toastId?: string | number) => void;
+    isActive: (toastId: string | number) => boolean;
+};
+export default Toast;

package/dist/components/floating-bar/FloatingBar.d.ts

@@ -0,0 +1,91 @@
+import { type FC, type ReactNode } from "react";
+/**
+ * Configuration for action buttons in the floating bar
+ */
+export type ButtonConfig = {
+    /** Button label text */
+    label?: string;
+    /** Icon element to display */
+    icon: ReactNode;
+    /** Click handler for the action */
+    onClick?: () => void;
+    /** Icon for dropdown mode */
+    dropdownIcon?: ReactNode;
+    /** Whether the action is visible */
+    visible?: boolean;
+    /** Whether the action is disabled */
+    disabled?: boolean;
+    /** Tooltip text */
+    tooltip?: string;
+    /** Whether to hide the label text */
+    hideLabel?: boolean;
+    /** Action type */
+    type?: "button" | "dropdown";
+    /** Dropdown trigger mode */
+    dropdownTrigger?: "click" | "hover";
+    /** Dropdown menu items */
+    dropdownItems?: Array<{
+        label: ReactNode;
+        key: string;
+        disabled?: boolean;
+    }>;
+};
+/**
+ * Props for the FloatingBar component
+ */
+export type TFloatingBar = {
+    /** Whether the floating bar is visible */
+    show?: boolean;
+    /** Close handler */
+    onClose: () => void;
+    /** Whether this is used in flow dashboard layout */
+    isFlowDashboard?: boolean;
+    /** Array of action configurations */
+    actionItems: ButtonConfig[];
+    /** Number of selected items */
+    selectedItemsCount?: number;
+    /** Delete action configuration */
+    deleteConfig?: {
+        label?: string;
+        disabled?: boolean;
+        onClick?: () => void;
+    };
+    /** Whether to show action background */
+    showActionBg?: boolean;
+};
+/**
+ * FloatingBar component provides a floating action bar for bulk operations.
+ * Drop-in replacement matching the lax-web-portal implementation.
+ *
+ * @example
+ * ```tsx
+ * <FloatingBar
+ *   show={selectedItems.length > 0}
+ *   onClose={() => setSelectedItems([])}
+ *   selectedItemsCount={selectedItems.length}
+ *   actionItems={[
+ *     {
+ *       label: "Edit",
+ *       icon: <EditIcon size={16} />,
+ *       onClick: handleEdit,
+ *     },
+ *     {
+ *       label: "Archive",
+ *       icon: <ArchiveIcon size={16} />,
+ *       onClick: handleArchive,
+ *     },
+ *   ]}
+ *   deleteConfig={{
+ *     label: "Delete",
+ *     onClick: handleDelete,
+ *   }}
+ * />
+ * ```
+ */
+export declare const FloatingBar: FC<TFloatingBar>;
+export type { ButtonConfig as FloatingBarActionConfig };
+export type FloatingBarDeleteConfig = TFloatingBar["deleteConfig"];
+export type FloatingBarProps = TFloatingBar;
+export type FloatingBarSize = "small" | "medium" | "large";
+export type FloatingBarPosition = "top" | "bottom";
+export type FloatingBarTheme = "primary" | "dark" | "light";

package/dist/components/forms/base-input-field/BaseInputField.d.ts

@@ -0,0 +1,128 @@
+import React from "react";
+import type { LabelType } from "../../data-display/label/Label";
+/**
+ * Risk details interface
+ */
+export interface RiskDetails {
+    color?: string;
+    description?: string;
+    hexBgColor?: string;
+    hexBorderColor?: string;
+    [key: string]: any;
+}
+/**
+ * Risk details card component props
+ */
+export interface RiskDetailsCardProps {
+    riskDetails: RiskDetails;
+    maxWidth?: string;
+    showAllRisksSuggestions?: boolean;
+}
+/**
+ * Props for the BaseInputField component
+ */
+export type TBaseInputFieldProps = any & {
+    /** Current value of the input */
+    value: string;
+    /** Callback function called when the input value changes */
+    onChange(data: any): void;
+    /** Callback function for key down events */
+    onKeyDown?: void;
+    /** Error message to display */
+    errorMessage: string;
+    /** Default value for the input */
+    defaultValue?: string;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Maximum value for number inputs */
+    max?: number;
+    /** Minimum value for number inputs */
+    min?: number;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the required indicator shows as conditional */
+    isRequiredConditional?: boolean;
+    /** Background color class */
+    bg?: string;
+    /** Tags to display with the label */
+    tags?: (string | LabelType)[];
+    /** Text color class */
+    color?: string;
+    /** Unique identifier for the input */
+    id: string;
+    /** Label text for the input */
+    label?: string;
+    /** Input type (text, email, password, number, etc.) */
+    type?: string;
+    /** Value to revert back to */
+    revertBackValue?: any;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether this is a password field with visibility toggle */
+    isPasswordField?: boolean;
+    /** Callback to set password visibility */
+    setIsPasswordVisible?: any;
+    /** Tooltip text */
+    tooltip?: string;
+    /** Whether to preserve original case in the label */
+    originalCase?: boolean;
+    /** Icon or element to display at the end of the input */
+    suffixIcon?: React.ReactNode;
+    /** Text size class */
+    textSize?: string;
+    /** Whether the value was AI extracted */
+    isAiExtracted?: boolean;
+    /** Whether this is a GTN field */
+    isGTN?: boolean;
+    /** GTN name for document integration */
+    gtnName?: any;
+    /** Success message to display */
+    successMessage?: string;
+    /** Additional CSS classes for the input element */
+    inputClassName?: string;
+    /** Inline styles for the input element */
+    inputStyle?: React.CSSProperties;
+    /** Additional CSS classes for the label */
+    labelClassName?: string;
+    /** Whether this is a live field */
+    isLiveField?: boolean;
+    /** Callback function for blur events */
+    onBlur?: () => void;
+    /** Whether the input is clearable */
+    isClearable?: boolean;
+    /** Additional CSS classes for the wrapper */
+    className?: string;
+    /** Ref for the input element */
+    inputRef?: React.RefObject<HTMLInputElement>;
+    /** Risk details data */
+    riskDetails?: RiskDetails;
+    /** Whether risk analysis is open */
+    isRiskAnalysisOpen?: boolean;
+    /** Custom risk details card component */
+    RiskDetailsCard?: React.ComponentType<RiskDetailsCardProps>;
+    /** Handler for adding GTN to document */
+    onAddGTNToDocument?: (keyValuePair: {
+        key: string;
+        value: string;
+    }) => void;
+};
+/**
+ * A feature-rich input field component with label, validation, GTN integration,
+ * risk analysis support, and comprehensive styling options.
+ *
+ * @example
+ * ```tsx
+ * <BaseInputField
+ *   id="email"
+ *   label="Email Address"
+ *   type="email"
+ *   value={email}
+ *   onChange={setEmail}
+ *   placeholder="Enter your email"
+ *   required
+ *   errorMessage={emailError}
+ * />
+ * ```
+ */
+export declare const BaseInputField: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default BaseInputField;

package/dist/components/forms/checkbox/Checkbox.d.ts

@@ -0,0 +1,55 @@
+import type { CheckboxChangeEvent, CheckboxProps, CheckboxRef } from "antd";
+/**
+ * Props for the Checkbox component
+ */
+export interface CheckboxComponentProps {
+    /** Unique identifier for the checkbox */
+    id: string;
+    /** Label text to display next to the checkbox */
+    label?: string;
+    /** Whether the checkbox is checked */
+    checked?: boolean;
+    /** Whether the checkbox is checked (alias for checked) */
+    isChecked?: boolean;
+    /** Callback function called when checkbox state changes */
+    onChange: (checked: boolean, event: CheckboxChangeEvent) => void;
+    /** Whether the checkbox is disabled */
+    disabled?: boolean;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Message to display below the checkbox */
+    message?: string;
+    /** Type of message to display */
+    messageType?: "success" | "error" | "info" | "default";
+    /** Additional CSS classes for the wrapper container */
+    wrapperClassName?: string;
+    /** Additional CSS classes for the checkbox input */
+    checkboxClassName?: string;
+    /** Additional CSS classes for the label */
+    labelClassName?: string;
+    /** Size variant for the checkbox */
+    size?: "small" | "medium" | "large";
+    /** Visual variant for the checkbox */
+    variant?: "default" | "outline" | "solid";
+    /** Whether to show the label on the left side */
+    labelPosition?: "left" | "right";
+    /** Additional props to pass to the Ant Design Checkbox */
+    checkboxProps?: Omit<CheckboxProps, "checked" | "onChange" | "id" | "disabled">;
+}
+/**
+ * A highly customizable checkbox component with label, validation, and styling support.
+ * Features dark mode support, accessibility enhancements, and comprehensive prop support.
+ *
+ * @example
+ * ```tsx
+ * <Checkbox
+ *   id="terms"
+ *   label="I agree to the terms and conditions"
+ *   checked={agreedToTerms}
+ *   onChange={(checked) => setAgreedToTerms(checked)}
+ *   required
+ * />
+ * ```
+ */
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxComponentProps & import("react").RefAttributes<CheckboxRef>>;
+export type TCheckboxComponentProps = CheckboxComponentProps;

package/dist/components/forms/checkbox/CheckboxComponent.d.ts

@@ -0,0 +1,9 @@
+import { type CheckboxChangeEvent, type CheckboxProps } from "antd";
+type TCheckboxComponentProps = {
+    label?: string;
+    isChecked: boolean;
+    onChange: (e: CheckboxChangeEvent) => void;
+    id: string;
+} & CheckboxProps;
+export declare const CheckboxComponent: ({ label, isChecked, onChange, id, ...props }: TCheckboxComponentProps) => import("react/jsx-runtime").JSX.Element;
+export type { TCheckboxComponentProps };

package/dist/components/forms/color-picker/ColorPicker.d.ts

@@ -0,0 +1,60 @@
+import type { ChangeEvent } from "react";
+/**
+ * Props for the ColorPicker component
+ */
+export interface ColorPickerProps {
+    /** Unique identifier for the color picker */
+    id: string;
+    /** Label text to display above the color picker */
+    label?: string;
+    /** Current color value (hex format) */
+    value?: string;
+    /** Default color value (hex format) */
+    defaultValue?: string;
+    /** Callback function called when color value changes */
+    onChange: (color: string, event: ChangeEvent<HTMLInputElement>) => void;
+    /** Callback function called when color value changes (legacy) */
+    onColorChange?: (color: string) => void;
+    /** Whether the color picker is disabled */
+    disabled?: boolean;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Message to display below the color picker */
+    message?: string;
+    /** Type of message to display */
+    messageType?: "success" | "error" | "info" | "default";
+    /** Additional CSS classes for the wrapper container */
+    wrapperClassName?: string;
+    /** Additional CSS classes for the color input */
+    inputClassName?: string;
+    /** Additional CSS classes for the label */
+    labelClassName?: string;
+    /** Size variant for the color picker */
+    size?: "small" | "medium" | "large";
+    /** Whether to show the color value as text */
+    showValue?: boolean;
+    /** Format for displaying the color value */
+    valueFormat?: "hex" | "rgb" | "hsl";
+    /** Additional props to pass to the input element */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    /** Help text to display below the label */
+    helpText?: string;
+}
+/**
+ * A highly customizable color picker component with label, validation, and styling support.
+ * Features dark mode support, accessibility enhancements, and comprehensive prop support.
+ *
+ * @example
+ * ```tsx
+ * <ColorPicker
+ *   id="theme-color"
+ *   label="Theme Color"
+ *   value={themeColor}
+ *   onChange={(color) => setThemeColor(color)}
+ *   showValue
+ *   required
+ * />
+ * ```
+ */
+export declare const ColorPicker: import("react").ForwardRefExoticComponent<ColorPickerProps & import("react").RefAttributes<HTMLInputElement>>;
+export type ColorPickerComponentProps = ColorPickerProps;

package/dist/components/forms/creatable-select/CreatableSelect.d.ts

@@ -0,0 +1,86 @@
+import CreatableSelect from "react-select/creatable";
+import type { LabelType } from "../../data-display/label/Label";
+import type { ComponentProps } from "react";
+/**
+ * Option type for the CreatableSelect component
+ */
+export interface SelectOption {
+    /** The value of the option */
+    value: string | number;
+    /** The label displayed for the option */
+    label: string;
+    /** Whether the option is disabled */
+    isDisabled?: boolean;
+    /** Additional data for the option */
+    data?: Record<string, unknown>;
+}
+/**
+ * Props for the CreatableSelectField component
+ * Matches the lax-web-portal implementation for drop-in replacement
+ */
+export type TProps = {
+    /** Unique identifier for the select */
+    id: string;
+    /** Label text to display above the select */
+    label: string;
+    /** Placeholder text for the select */
+    placeholder?: string;
+    /** Current value for single select */
+    value?: any;
+    /** Callback function called when selection changes */
+    onChange(data: any): void;
+    /** Error message to display below the select */
+    errorMessage?: string;
+    /** Array of available options */
+    selectOptions: any[];
+    /** Whether the select is in loading state */
+    loading?: boolean;
+    /** Whether multiple selections are allowed */
+    multiSelect?: boolean;
+    /** Current values for multi select */
+    selectedValues?: any[];
+    /** Custom filter function for options */
+    filterOption?: any;
+    /** Whether to preserve original case in the label */
+    originalCase?: boolean;
+    /** Whether the select is disabled */
+    disabled?: boolean;
+    /** Whether the select is clearable */
+    isClearable?: boolean;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Tags/labels to display next to the label */
+    tags?: (string | LabelType)[];
+    /** Tooltip text for the help icon */
+    tooltip?: string;
+    /** Additional CSS classes for the wrapper */
+    className?: string;
+    /** Whether the component is in dark mode */
+    isDarkMode?: boolean;
+};
+export type CreatableSelectProps = TProps & ComponentProps<typeof CreatableSelect>;
+/**
+ * A creatable select component with label, validation, and styling support.
+ * Features dark mode support, accessibility enhancements, and comprehensive prop support.
+ * Built on top of react-select/creatable for advanced functionality.
+ *
+ * This component is designed as a drop-in replacement for the lax-web-portal
+ * CreatableSelectField component.
+ *
+ * @example
+ * ```tsx
+ * <CreatableSelectField
+ *   id="tags"
+ *   label="Tags"
+ *   selectOptions={tagOptions}
+ *   value={selectedTag}
+ *   onChange={(newValue) => setSelectedTag(newValue)}
+ *   placeholder="Select or create tags..."
+ *   multiSelect
+ * />
+ * ```
+ */
+export declare const CreatableSelectField: {
+    ({ id, label, errorMessage, selectOptions, loading, isClearable, multiSelect, selectedValues, disabled, required, value, className, tooltip, tags, originalCase, onChange, filterOption, placeholder, isDarkMode, ...props }: TProps & ComponentProps<typeof CreatableSelect>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};