@juspay/blend-design-system 0.0.21-beta → 0.0.22-beta

package/dist/assets/main.css

@@ -1 +1 @@
-[data-vaul-drawer][data-vaul-drawer-direction=bottom]:after{display:none}
+[data-vaul-drawer][data-vaul-drawer-direction=bottom]:after{display:none}.react-flow{direction:ltr}.react-flow__container{position:absolute;width:100%;height:100%;top:0;left:0}.react-flow__pane{z-index:1;cursor:-webkit-grab;cursor:grab}.react-flow__pane.selection{cursor:pointer}.react-flow__pane.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__viewport{transform-origin:0 0;z-index:2;pointer-events:none}.react-flow__renderer{z-index:4}.react-flow__selection{z-index:6}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none}.react-flow .react-flow__edges{pointer-events:none;overflow:visible}.react-flow__edge-path,.react-flow__connection-path{stroke:#b1b1b7;stroke-width:1;fill:none}.react-flow__edge{pointer-events:visibleStroke;cursor:pointer}.react-flow__edge.animated path{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;-webkit-animation:none;animation:none}.react-flow__edge.inactive{pointer-events:none}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge:focus .react-flow__edge-path,.react-flow__edge:focus-visible .react-flow__edge-path{stroke:#555}.react-flow__edge-textwrapper{pointer-events:all}.react-flow__edge-textbg{fill:#fff}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__connection{pointer-events:none}.react-flow__connection .animated{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__connectionline{z-index:1001}.react-flow__nodes{pointer-events:none;transform-origin:0 0}.react-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:-webkit-grab;cursor:grab}.react-flow__node.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none}.react-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:-webkit-grab;cursor:grab}.react-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px;width:6px;height:6px;background:#1a192b;border:1px solid white;border-radius:100%}.react-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair}.react-flow__handle-bottom{top:auto;left:50%;bottom:-4px;transform:translate(-50%)}.react-flow__handle-top{left:50%;top:-4px;transform:translate(-50%)}.react-flow__handle-left{top:50%;left:-4px;transform:translateY(-50%)}.react-flow__handle-right{right:-4px;top:50%;transform:translateY(-50%)}.react-flow__edgeupdater{cursor:move;pointer-events:all}.react-flow__panel{position:absolute;z-index:5;margin:15px}.react-flow__panel.top{top:0}.react-flow__panel.bottom{bottom:0}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.center{left:50%;transform:translate(-50%)}.react-flow__attribution{font-size:10px;background:#ffffff80;padding:2px 3px;margin:0}.react-flow__attribution a{text-decoration:none;color:#999}@-webkit-keyframes dashdraw{0%{stroke-dashoffset:10}}@keyframes dashdraw{0%{stroke-dashoffset:10}}.react-flow__edgelabel-renderer{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__edge.updating .react-flow__edge-path{stroke:#777}.react-flow__edge-text{font-size:10px}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none}.react-flow__node-default,.react-flow__node-input,.react-flow__node-output,.react-flow__node-group{padding:10px;border-radius:3px;width:150px;font-size:12px;color:#222;text-align:center;border-width:1px;border-style:solid;border-color:#1a192b;background-color:#fff}.react-flow__node-default.selectable:hover,.react-flow__node-input.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover{box-shadow:0 1px 4px 1px #00000014}.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible{box-shadow:0 0 0 .5px #1a192b}.react-flow__node-group{background-color:#f0f0f040}.react-flow__nodesselection-rect,.react-flow__selection{background:#0059dc14;border:1px dotted rgba(0,89,220,.8)}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none}.react-flow__controls{box-shadow:0 0 2px 1px #00000014}.react-flow__controls-button{border:none;background:#fefefe;border-bottom:1px solid #eee;box-sizing:content-box;display:flex;justify-content:center;align-items:center;width:16px;height:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:5px}.react-flow__controls-button:hover{background:#f4f4f4}.react-flow__controls-button svg{width:100%;max-width:12px;max-height:12px}.react-flow__controls-button:disabled{pointer-events:none}.react-flow__controls-button:disabled svg{fill-opacity:.4}.react-flow__minimap{background-color:#fff}.react-flow__minimap svg{display:block}.react-flow__resize-control{position:absolute}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize}.react-flow__resize-control.top,.react-flow__resize-control.bottom{cursor:ns-resize}.react-flow__resize-control.top.left,.react-flow__resize-control.bottom.right{cursor:nwse-resize}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize}.react-flow__resize-control.handle{width:4px;height:4px;border:1px solid #fff;border-radius:1px;background-color:#3367d9;transform:translate(-50%,-50%)}.react-flow__resize-control.handle.left{left:0;top:50%}.react-flow__resize-control.handle.right{left:100%;top:50%}.react-flow__resize-control.handle.top{left:50%;top:0}.react-flow__resize-control.handle.bottom{left:50%;top:100%}.react-flow__resize-control.handle.top.left,.react-flow__resize-control.handle.bottom.left{left:0}.react-flow__resize-control.handle.top.right,.react-flow__resize-control.handle.bottom.right{left:100%}.react-flow__resize-control.line{border-color:#3367d9;border-width:0;border-style:solid}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{width:1px;transform:translate(-50%);top:0;height:100%}.react-flow__resize-control.line.left{left:0;border-left-width:1px}.react-flow__resize-control.line.right{left:100%;border-right-width:1px}.react-flow__resize-control.line.top,.react-flow__resize-control.line.bottom{height:1px;transform:translateY(-50%);left:0;width:100%}.react-flow__resize-control.line.top{top:0;border-top-width:1px}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}.blend-workflow-canvas .react-flow__node{cursor:pointer;padding:0;border:none;background:transparent;border-radius:0;box-shadow:none}.blend-workflow-canvas .react-flow__node:hover,.blend-workflow-canvas .react-flow__node.selected,.blend-workflow-canvas .react-flow__node.selectable:hover{padding:0;border:none;background:transparent;box-shadow:none}.blend-workflow-canvas .react-flow__edge{cursor:pointer}.blend-workflow-canvas .react-flow__attribution{display:none}

package/dist/components/Accordion/types.d.ts

@@ -16,7 +16,6 @@ export type AccordionItemProps = {
     subtextSlot?: ReactNode;
     children: ReactNode;
     isDisabled?: boolean;
-    className?: string;
     chevronPosition?: AccordionChevronPosition;
 };
 export type AccordionProps = {

package/dist/components/Card/CardComponents.d.ts

@@ -6,18 +6,21 @@ type CardComponentProps = {
         variant?: CardVariant.DEFAULT;
     }>;
     cardToken: CardTokenType;
+    maxHeight?: string;
 };
 type AlignedCardComponentProps = {
     props: Extract<CardProps, {
         variant: CardVariant.ALIGNED;
     }>;
     cardToken: CardTokenType;
+    maxHeight?: string;
 };
 type CustomCardComponentProps = {
     props: Extract<CardProps, {
         variant: CardVariant.CUSTOM;
     }>;
     cardToken: CardTokenType;
+    maxHeight?: string;
 };
 export declare const DefaultCard: React.FC<CardComponentProps>;
 export declare const AlignedCard: React.FC<AlignedCardComponentProps>;

package/dist/components/Card/types.d.ts

@@ -43,4 +43,15 @@ export type CustomCardProps = {
 export type CardProps = {
     className?: string;
     maxWidth?: string;
+    /**
+     * Height of the card. Accepts any valid CSS height value.
+     * Examples: "200px", "100%", "50vh", "auto"
+     * Note: For percentage heights to work, parent container must have a defined height.
+     */
+    maxHeight?: string;
+    /**
+     * Minimum height of the card. Accepts any valid CSS height value.
+     * Useful when you want the card to grow with content but maintain a minimum height.
+     */
+    minHeight?: string;
 } & (DefaultCardProps | AlignedCardProps | CustomCardProps);

package/dist/components/DataTable/DataTablePagination.d.ts

@@ -4,8 +4,9 @@ type DataTablePaginationProps = {
     totalRows: number;
     pageSizeOptions: number[];
     isLoading?: boolean;
+    hasData?: boolean;
     onPageChange: (page: number) => void;
     onPageSizeChange: (pageSize: number) => void;
 };
-export declare function DataTablePagination({ currentPage, pageSize, totalRows, pageSizeOptions, isLoading, onPageChange, onPageSizeChange, }: DataTablePaginationProps): import("react/jsx-runtime").JSX.Element;
+export declare function DataTablePagination({ currentPage, pageSize, totalRows, pageSizeOptions, isLoading, hasData, onPageChange, onPageSizeChange, }: DataTablePaginationProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DataTable/TableBody/types.d.ts

@@ -4,6 +4,7 @@ export type TableBodyProps<T extends Record<string, unknown>> = {
     currentData: T[];
     visibleColumns: ColumnDefinition<T>[];
     idField: string;
+    tableTitle?: string;
     selectedRows: Record<string, boolean>;
     editingRows: Record<string, boolean>;
     editValues: Record<string, T>;

package/dist/components/DataTable/TableCell/index.d.ts

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { TableCellProps } from './types';
-declare const TableCell: import('react').ForwardRefExoticComponent<TableCellProps<Record<string, unknown>> & import('react').RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React.ForwardRefExoticComponent<TableCellProps<Record<string, unknown>> & React.RefAttributes<HTMLTableCellElement>>;
 export default TableCell;

package/dist/components/DataTable/TableCell/types.d.ts

@@ -3,6 +3,8 @@ export type TableCellProps<T extends Record<string, unknown>> = {
     column: ColumnDefinition<T>;
     row: T;
     rowIndex: number;
+    colIndex?: number;
+    tableTitle?: string;
     isEditing: boolean;
     currentValue: unknown;
     width: React.CSSProperties;

package/dist/components/DataTable/TableFooter/types.d.ts

@@ -5,6 +5,7 @@ export type TableFooterProps = {
     pageSize: number;
     totalRows: number;
     isLoading?: boolean;
+    hasData?: boolean;
     onPageChange: (page: number) => void;
     onPageSizeChange: (size: number) => void;
 };

package/dist/components/DateRangePicker/CalendarGrid.d.ts

@@ -11,6 +11,7 @@ type CalendarGridProps = {
     customDisableDates?: (date: Date) => boolean;
     customRangeConfig?: CustomRangeConfig;
     showDateTimePicker?: boolean;
+    resetScrollPosition?: number;
 };
 declare const CalendarGrid: import('react').ForwardRefExoticComponent<CalendarGridProps & import('react').RefAttributes<HTMLDivElement>>;
 export default CalendarGrid;

package/dist/components/DateRangePicker/dateRangePicker.tokens.d.ts

@@ -192,7 +192,13 @@ export type CalendarTokenType = {
                 };
                 todayIndicator: {
                     width: CSSObject['width'];
+                    height: CSSObject['height'];
                     backgroundColor: CSSObject['backgroundColor'];
+                    borderRadius: CSSObject['borderRadius'];
+                    position: CSSObject['position'];
+                    bottom: CSSObject['bottom'];
+                    left: CSSObject['left'];
+                    transform: CSSObject['transform'];
                 };
             };
         };

package/dist/components/KeyValuePair/types.d.ts

@@ -7,6 +7,7 @@ export declare enum KeyValuePairSize {
     MEDIUM = "md",
     LARGE = "lg"
 }
+export type TextOverflowMode = 'truncate' | 'wrap' | 'wrap-clamp';
 export type KeyValuePairPropTypes = {
     keyString: string;
     size?: KeyValuePairSize;
@@ -16,4 +17,26 @@ export type KeyValuePairPropTypes = {
     valueRightSlot?: React.ReactNode;
     keyValuePairState?: KeyValuePairStateType;
     maxWidth?: string;
+    /**
+     * Controls how text overflow is handled for both key and value
+     * - 'truncate': Single line with ellipsis (default, all browsers)
+     * - 'wrap': Allow natural text wrapping (all browsers)
+     * - 'wrap-clamp': Wrap with line limit and ellipsis (Chrome/Edge/Safari/Firefox 68+, graceful fallback for older browsers)
+     *
+     * Note: 'wrap-clamp' uses -webkit-line-clamp which is widely supported but non-standard.
+     * In unsupported browsers, text will wrap naturally without the line limit.
+     *
+     * @default 'truncate'
+     */
+    textOverflow?: TextOverflowMode;
+    /**
+     * Maximum number of lines to display when textOverflow is 'wrap-clamp'
+     * @default 2
+     */
+    maxLines?: number;
+    /**
+     * Show tooltip on hover when text is truncated
+     * @default true
+     */
+    showTooltipOnTruncate?: boolean;
 };

package/dist/components/KeyValuePair/utils.d.ts

@@ -0,0 +1,23 @@
+import { CSSObject } from 'styled-components';
+import { TextOverflowMode, KeyValuePairStateType } from './types';
+import { KeyValuePairTokensType } from './KeyValuePair.tokens';
+/**
+ * Get text styles based on overflow mode
+ */
+export declare const getTextStyles: (textOverflow: TextOverflowMode, maxLines: number) => CSSObject;
+/**
+ * Get PrimitiveText styles based on overflow mode
+ */
+export declare const getPrimitiveTextStyles: (textOverflow: TextOverflowMode) => CSSObject;
+/**
+ * Get container styles based on text overflow mode and max width
+ */
+export declare const getContainerStyles: (textOverflow: TextOverflowMode, maxWidth: string) => CSSObject;
+/**
+ * Get flex direction and gap based on layout state
+ */
+export declare const getLayoutStyles: (keyValuePairState: KeyValuePairStateType, keyValuePairTokens: KeyValuePairTokensType) => CSSObject;
+/**
+ * Get slot container styles
+ */
+export declare const getSlotStyles: () => CSSObject;

package/dist/components/Stepper/HorizonatlLine.d.ts

@@ -0,0 +1,6 @@
+declare const HorizonatlLine: ({ color, height, width, }: {
+    color?: string;
+    width?: string;
+    height?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default HorizonatlLine;

package/dist/components/Stepper/HorizontalStepper.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { StepperProps } from './types';
+declare const HorizontalStepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>>;
+export default HorizontalStepper;

package/dist/components/Stepper/Stepper.d.ts

@@ -0,0 +1,3 @@
+import { StepperProps } from './types';
+declare const Stepper: import('react').ForwardRefExoticComponent<StepperProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Stepper;

package/dist/components/Stepper/StepperLine.d.ts

@@ -0,0 +1,6 @@
+import { StepperType } from './types';
+declare const StepperLine: ({ stepperType, color, }: {
+    stepperType?: StepperType;
+    color?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default StepperLine;

package/dist/components/Stepper/VerticalLine.d.ts

@@ -0,0 +1,5 @@
+declare const VerticalLine: import('react').ForwardRefExoticComponent<{
+    color?: string;
+    height?: string;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export default VerticalLine;

package/dist/components/Stepper/VerticalStepper.d.ts

@@ -0,0 +1,3 @@
+import { StepperProps } from './types';
+declare const VerticalStepper: import('react').ForwardRefExoticComponent<StepperProps & import('react').RefAttributes<HTMLDivElement>>;
+export default VerticalStepper;

package/dist/components/Stepper/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Stepper } from './Stepper';
+export * from './types';

package/dist/components/Stepper/stepper.tokens.d.ts

@@ -0,0 +1,67 @@
+import { CSSObject } from 'styled-components';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { StepState } from './types';
+export type StepperState = 'default' | 'hover' | 'focus' | 'disabled';
+export type StepperTokensType = {
+    container: {
+        default: {
+            gap: CSSObject['gap'];
+        };
+    };
+    step: {
+        circle: {
+            [key in StepState]: {
+                [key in StepperState]: {
+                    backgroundColor: CSSObject['backgroundColor'];
+                    borderColor: CSSObject['borderColor'];
+                    borderWidth: CSSObject['borderWidth'];
+                    borderRadius: CSSObject['borderRadius'];
+                    size: CSSObject['width'];
+                    transition: CSSObject['transition'];
+                    outline: CSSObject['outline'];
+                    outlineOffset: CSSObject['outlineOffset'];
+                };
+            };
+        };
+        icon: {
+            [key in StepState]: {
+                [key in StepperState]: {
+                    color: CSSObject['color'];
+                };
+            };
+        };
+    };
+    connector: {
+        line: {
+            active: {
+                default: {
+                    color: CSSObject['color'];
+                    height: CSSObject['height'];
+                };
+            };
+            inactive: {
+                default: {
+                    color: CSSObject['color'];
+                    height: CSSObject['height'];
+                };
+            };
+        };
+    };
+    title: {
+        text: {
+            [key in StepState]: {
+                [key in StepperState]: {
+                    color: CSSObject['color'];
+                    fontSize: CSSObject['fontSize'];
+                    fontWeight: CSSObject['fontWeight'];
+                    gap: CSSObject['gap'];
+                };
+            };
+        };
+    };
+};
+export type ResponsiveStepperTokens = {
+    [key in keyof BreakpointType]: StepperTokensType;
+};
+export declare const getStepperTokens: (foundationToken: FoundationTokenType) => ResponsiveStepperTokens;

package/dist/components/Stepper/types.d.ts

@@ -0,0 +1,48 @@
+import { ReactNode } from 'react';
+export declare enum StepState {
+    COMPLETED = "completed",
+    CURRENT = "current",
+    PENDING = "pending",
+    DISABLED = "disabled",
+    SKIPPED = "skipped"
+}
+export declare enum StepperType {
+    HORIZONTAL = "horizontal",
+    VERTICAL = "vertical"
+}
+export type StepperProps = {
+    steps: Step[];
+    onStepClick?: (stepIndex: number) => void;
+    onSubstepClick?: (stepId: number, substepIndex: number) => void;
+    clickable?: boolean;
+    stepperType?: StepperType;
+};
+export type SubStep = {
+    id: number;
+    title: string;
+    status?: StepState;
+    disabled?: boolean;
+};
+export type Step = {
+    id: number;
+    title: string;
+    status?: StepState;
+    disabled?: boolean;
+    description?: string;
+    icon?: ReactNode;
+    substeps?: SubStep[];
+    isExpandable?: boolean;
+    isExpanded?: boolean;
+};
+export type StepProps = {
+    step: Step;
+    stepIndex: number;
+    isCompleted: boolean;
+    isCurrent: boolean;
+    isLast: boolean;
+    isFirst: boolean;
+    onClick?: (stepIndex: number) => void;
+    onSubstepClick?: (stepIndex: number, substepIndex: number) => void;
+    clickable?: boolean;
+    currentSubsteps?: Record<string, number>;
+};

package/dist/components/Upload/Upload.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { UploadProps } from './types';
+declare const Upload: React.FC<UploadProps>;
+export default Upload;

package/dist/components/Upload/components/DefaultState.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { UploadTokenType } from '../upload.tokens';
+type DefaultStateProps = {
+    children?: React.ReactNode;
+    description?: string;
+    disabled: boolean;
+    uploadTokens: UploadTokenType;
+};
+declare const DefaultState: React.FC<DefaultStateProps>;
+export default DefaultState;

package/dist/components/Upload/components/ErrorState.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { UploadedFileWithStatus } from '../types';
+import { UploadTokenType } from '../upload.tokens';
+type ErrorStateProps = {
+    errorFiles: UploadedFileWithStatus[];
+    multiple: boolean;
+    children?: React.ReactNode;
+    errorText?: string;
+    onFileRemove?: (fileId: string) => void;
+    uploadTokens: UploadTokenType;
+    maxFiles?: number;
+};
+declare const ErrorState: React.FC<ErrorStateProps>;
+export default ErrorState;

package/dist/components/Upload/components/FileListDisplay.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { UploadedFileWithStatus } from '../types';
+import { UploadTokenType } from '../upload.tokens';
+type FileListDisplayProps = {
+    files: UploadedFileWithStatus[];
+    onFileRemove?: (fileId: string) => void;
+    uploadTokens: UploadTokenType;
+    maxFiles?: number;
+};
+declare const FileListDisplay: React.FC<FileListDisplayProps>;
+export default FileListDisplay;

package/dist/components/Upload/components/MixedState.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { UploadedFileWithStatus } from '../types';
+import { UploadTokenType } from '../upload.tokens';
+type MixedStateProps = {
+    successfulFiles: UploadedFileWithStatus[];
+    errorFiles: UploadedFileWithStatus[];
+    children?: React.ReactNode;
+    onFileRemove?: (fileId: string) => void;
+    uploadTokens: UploadTokenType;
+    maxFiles?: number;
+};
+declare const MixedState: React.FC<MixedStateProps>;
+export default MixedState;

package/dist/components/Upload/components/SuccessState.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { UploadedFileWithStatus } from '../types';
+import { UploadTokenType } from '../upload.tokens';
+type SuccessStateProps = {
+    successfulFiles: UploadedFileWithStatus[];
+    multiple: boolean;
+    children?: React.ReactNode;
+    onReplaceFile?: () => void;
+    onFileRemove?: (fileId: string) => void;
+    uploadTokens: UploadTokenType;
+    maxFiles?: number;
+};
+declare const SuccessState: React.FC<SuccessStateProps>;
+export default SuccessState;

package/dist/components/Upload/components/UploadingState.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { UploadTokenType } from '../upload.tokens';
+type UploadingStateProps = {
+    uploadingFile: {
+        file: File;
+        progress: number;
+    };
+    children?: React.ReactNode;
+    description?: string;
+    uploadTokens: UploadTokenType;
+};
+declare const UploadingState: React.FC<UploadingStateProps>;
+export default UploadingState;

package/dist/components/Upload/components/index.d.ts

@@ -0,0 +1,6 @@
+export { default as FileListDisplay } from './FileListDisplay';
+export { default as UploadingState } from './UploadingState';
+export { default as SuccessState } from './SuccessState';
+export { default as MixedState } from './MixedState';
+export { default as ErrorState } from './ErrorState';
+export { default as DefaultState } from './DefaultState';

package/dist/components/Upload/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Upload } from './Upload';
+export * from './types';

package/dist/components/Upload/types.d.ts

@@ -0,0 +1,56 @@
+import { default as React } from 'react';
+export declare enum UploadState {
+    IDLE = "idle",
+    UPLOADING = "uploading",
+    SUCCESS = "success",
+    ERROR = "error"
+}
+export type FileRejection = {
+    file: File;
+    errors: Array<{
+        code: string;
+        message: string;
+    }>;
+};
+export type UploadFile = {
+    file: File;
+    progress: number;
+    status: UploadState;
+    id: string;
+    error?: string;
+};
+export type UploadedFileWithStatus = {
+    file: File;
+    id: string;
+    status: 'success' | 'error';
+    error?: string;
+};
+export type UploadProps = {
+    multiple?: boolean;
+    accept?: string[];
+    maxSize?: number;
+    maxFiles?: number;
+    disabled?: boolean;
+    required?: boolean;
+    label?: string;
+    subLabel?: string;
+    helpIconHintText?: string;
+    children?: React.ReactNode;
+    description?: string;
+    className?: string;
+    errorText?: string;
+    state?: UploadState;
+    uploadingFiles?: UploadFile[];
+    uploadedFiles?: UploadedFileWithStatus[];
+    failedFiles?: UploadedFileWithStatus[];
+    enforceFileTypeConsistency?: boolean;
+    onDrop?: (acceptedFiles: File[], fileRejections: FileRejection[]) => void;
+    onDropAccepted?: (files: File[]) => void;
+    onDropRejected?: (fileRejections: FileRejection[]) => void;
+    onFileRemove?: (fileId: string) => void;
+    onReplaceFile?: () => void;
+    isDragActive?: boolean;
+    isDragAccept?: boolean;
+    isDragReject?: boolean;
+    validator?: (file: File) => FileRejection['errors'][0] | null;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onDrop' | 'onDragOver' | 'onDragLeave'>;

package/dist/components/Upload/upload.tokens.d.ts

@@ -0,0 +1,101 @@
+import { CSSObject } from 'styled-components';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+export type UploadState = 'idle' | 'uploading' | 'success' | 'error' | 'dragActive';
+/**
+ * Upload Tokens following the pattern: [target].CSSProp.[state]
+ *
+ * Structure:
+ * - target: wrapper | label | container | slot | text | progressContainer | fileList
+ * - CSSProp: padding | border | backgroundColor | fontSize | fontWeight | color | gap | margin
+ * - state: idle | uploading | success | error | dragActive (upload states)
+ *
+ * Hierarchy:
+ * - Wrapper: Outermost container with base padding
+ * - Label: Label section with text styling and spacing
+ * - Container: Upload box with state-dependent styling (border, background)
+ * - Slot: Content area with icon/content spacing
+ * - Text: Text styling for titles, descriptions, filenames, errors
+ * - ProgressContainer: Progress bar section with spacing
+ * - FileList: File list display with spacing and layout
+ */
+export type UploadTokenType = {
+    header: {
+        label: {
+            text: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: CSSObject['color'];
+            };
+            marginBottom: CSSObject['marginBottom'];
+            gap: CSSObject['gap'];
+        };
+        required: {
+            text: {
+                color: CSSObject['color'];
+            };
+            gap: CSSObject['gap'];
+        };
+        subLabel: {
+            text: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: CSSObject['color'];
+            };
+            gap: CSSObject['gap'];
+        };
+        helpIcon: {
+            width: CSSObject['width'];
+            color: CSSObject['color'];
+        };
+    };
+    container: {
+        border: {
+            idle: CSSObject['border'];
+            uploading: CSSObject['border'];
+            success: CSSObject['border'];
+            error: CSSObject['border'];
+            dragActive: CSSObject['border'];
+        };
+        backgroundColor: {
+            idle: CSSObject['backgroundColor'];
+            uploading: CSSObject['backgroundColor'];
+            success: CSSObject['backgroundColor'];
+            error: CSSObject['backgroundColor'];
+            dragActive: CSSObject['backgroundColor'];
+        };
+        borderRadius: CSSObject['borderRadius'];
+        padding: CSSObject['padding'];
+        content: {
+            slot: {
+                width: CSSObject['width'];
+                gap: CSSObject['gap'];
+            };
+            text: {
+                title: {
+                    color: CSSObject['color'];
+                    fontSize: CSSObject['fontSize'];
+                    fontWeight: CSSObject['fontWeight'];
+                };
+                subtitle: {
+                    color: CSSObject['color'];
+                    fontSize: CSSObject['fontSize'];
+                    fontWeight: CSSObject['fontWeight'];
+                };
+                gap: CSSObject['gap'];
+            };
+            actionable: {
+                gap: CSSObject['gap'];
+                errorText: {
+                    color: CSSObject['color'];
+                    fontSize: CSSObject['fontSize'];
+                    fontWeight: CSSObject['fontWeight'];
+                };
+            };
+        };
+    };
+};
+export type ResponsiveUploadTokens = {
+    [key in keyof BreakpointType]: UploadTokenType;
+};
+export declare const getUploadTokens: (foundationToken: FoundationTokenType) => ResponsiveUploadTokens;