@juspay/blend-design-system 0.0.23 → 0.0.24

package/dist/assets/main.css

@@ -1 +1 @@
-[data-vaul-drawer][data-vaul-drawer-direction=bottom]:after{display:none}.drawer-content>.drawer-body:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}[data-vaul-drawer-direction=top] .drawer-content>.drawer-body:last-child{border-top-left-radius:inherit;border-top-right-radius:inherit}[data-vaul-drawer-direction=left] .drawer-content>.drawer-body:last-child{border-bottom-left-radius:inherit}[data-vaul-drawer-direction=right] .drawer-content>.drawer-body:last-child{border-bottom-right-radius:inherit}.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}
+[data-vaul-drawer][data-vaul-drawer-direction=bottom]:after{display:none}.drawer-content>.drawer-body:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}[data-vaul-drawer-direction=top] .drawer-content>.drawer-body:last-child{border-top-left-radius:inherit;border-top-right-radius:inherit}[data-vaul-drawer-direction=left] .drawer-content>.drawer-body:last-child{border-bottom-left-radius:inherit}[data-vaul-drawer-direction=right] .drawer-content>.drawer-body:last-child{border-bottom-right-radius:inherit}.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}@keyframes dashdraw{0%{stroke-dashoffset:10}to{stroke-dashoffset:0}}.blend-workflow-canvas .react-flow__handle{transition:all .2s ease}.blend-workflow-canvas .react-flow__handle:hover{transform:scale(1.3);box-shadow:0 0 8px #0000004d}.blend-workflow-canvas .react-flow__handle-connecting{transform:scale(1.4);box-shadow:0 0 12px #3b82f680}.blend-workflow-canvas .react-flow__handle-valid{background:#22c55e!important;box-shadow:0 0 12px #22c55e80}

package/dist/components/Avatar/StyledAvatar.d.ts

@@ -1,8 +1 @@
-import { StyledAvatarContainerProps, StyledAvatarIndicatorProps } from './types';
-export declare const StyledAvatarContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledAvatarContainerProps>> & string;
 export declare const StyledAvatarImage: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>> & string;
-export declare const StyledAvatarFallback: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledAvatarIndicator: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledAvatarIndicatorProps>> & string;
-export declare const StyledAvatarWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledAvatarLeadingSlot: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledAvatarTrailingSlot: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/Avatar/avatar.tokens.d.ts

@@ -11,7 +11,7 @@ export type AvatarVariant = 'withImage' | 'withoutImage';
  *
  * Structure:
  * - gap: Spacing between avatar and slots
- * - container: Main avatar container properties
+ * - avatar: Main avatar container properties
  * - text: Fallback text styling
  * - indicator: Online status indicator
  * - slot: Leading and trailing slot styling
@@ -55,9 +55,11 @@ export type AvatarTokensType = {
             [key in AvatarState]: CSSObject['backgroundColor'];
         };
         border: {
-            [key in AvatarState]: {
-                color: CSSObject['borderColor'];
-                width: CSSObject['borderWidth'];
+            [key in AvatarSize]: {
+                [key in AvatarState]: {
+                    color: CSSObject['borderColor'];
+                    width: CSSObject['borderWidth'];
+                };
             };
         };
         size: {

package/dist/components/Avatar/avatarUtils.d.ts

@@ -5,3 +5,10 @@ export declare const hexToRgb: (hex: string) => {
     g: number;
     b: number;
 } | null;
+/**
+ * Get a consistent color for an avatar based on the full name/text
+ * Uses hash of the entire text to ensure unique colors for different names
+ * @param text - The text to generate color from (e.g., name or alt text)
+ * @returns A hex color code
+ */
+export declare const getColorFromText: (text: string) => string;

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

@@ -1,7 +1,7 @@
 import { HTMLAttributes } from 'react';
 export declare enum AvatarSize {
-    XS = "xs",
     SM = "sm",
+    REGULAR = "regular",
     MD = "md",
     LG = "lg",
     XL = "xl"

package/dist/components/Button/Button.d.ts

@@ -9,8 +9,11 @@ declare const Button: import('react').ForwardRefExoticComponent<{
     disabled?: boolean;
     onClick?: () => void;
     loading?: boolean;
+    showSkeleton?: boolean;
+    skeletonVariant?: import('../Skeleton').SkeletonVariant;
     buttonGroupPosition?: "center" | "left" | "right";
     fullWidth?: boolean;
+    width?: string | number;
     justifyContent?: import('styled-components').CSSObject["justifyContent"];
     state?: ButtonState;
 } & Omit<import('react').ButtonHTMLAttributes<HTMLButtonElement>, "style" | "className"> & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/Button/ButtonBase.d.ts

@@ -0,0 +1,11 @@
+import { ButtonProps } from './types';
+import { ButtonTokensType } from './button.tokens';
+export type ButtonBaseProps = Omit<ButtonProps, 'showSkeleton' | 'skeletonVariant'> & {
+    isSkeleton?: boolean;
+    tokens?: ButtonTokensType;
+};
+declare const ButtonBase: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "showSkeleton" | "skeletonVariant"> & {
+    isSkeleton?: boolean;
+    tokens?: ButtonTokensType;
+} & import('react').RefAttributes<HTMLButtonElement>>;
+export default ButtonBase;

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

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 import { CSSObject } from 'styled-components';
+import { SkeletonVariant } from '../Skeleton/skeleton.tokens';
 export declare enum ButtonType {
     PRIMARY = "primary",
     SECONDARY = "secondary",
@@ -32,8 +33,11 @@ export type ButtonProps = {
     disabled?: boolean;
     onClick?: () => void;
     loading?: boolean;
+    showSkeleton?: boolean;
+    skeletonVariant?: SkeletonVariant;
     buttonGroupPosition?: 'center' | 'left' | 'right';
     fullWidth?: boolean;
+    width?: string | number;
     justifyContent?: CSSObject['justifyContent'];
     state?: ButtonState;
 } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'style' | 'className'>;

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

@@ -73,7 +73,6 @@ export declare const getBodySlot2MarginBottom: (hasActionButton: boolean, _isInl
 /**
  * Gets custom card styles (simple wrapper with padding)
  */
-export declare const getCustomCardStyles: (cardToken: CardTokenType) => React.CSSProperties;
 /**
  * Determines if action button is inline type
  * Center-aligned cards use regular buttons, non-center-aligned use inline buttons

package/dist/components/ChatInput/ChatInput.d.ts

@@ -1,5 +1,26 @@
 import { default as React } from 'react';
-import { ChatInputProps, AttachedFile } from './types';
+import { AttachedFile, TopQuery } from './types';
 export declare const getDocIcon: (fileType: AttachedFile["type"]) => React.ReactNode;
-declare const ChatInput: React.ForwardRefExoticComponent<ChatInputProps & React.RefAttributes<HTMLTextAreaElement>>;
+declare const ChatInput: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "onChange"> & {
+    value?: string;
+    slot1?: React.ReactNode;
+    onChange?: (value: string) => void;
+    onSend?: (message: string, files: AttachedFile[]) => void;
+    onAttachFiles?: (files: File[]) => void;
+    onVoiceRecord?: () => void;
+    onFileRemove?: (fileId: string) => void;
+    onFileClick?: (file: AttachedFile) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    maxLength?: number;
+    autoResize?: boolean;
+    attachedFiles?: AttachedFile[];
+    topQueries?: TopQuery[];
+    onTopQuerySelect?: (query: TopQuery) => void;
+    topQueriesMaxHeight?: number;
+    attachButtonIcon?: React.ReactNode;
+    voiceButtonIcon?: React.ReactNode;
+    sendButtonIcon?: React.ReactNode;
+    overflowMenuProps?: Partial<import('../Menu').MenuProps>;
+} & React.RefAttributes<HTMLTextAreaElement>>;
 export default ChatInput;

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, TextareaHTMLAttributes } from 'react';
 import { MenuProps } from '../Menu/types';
 export type AttachedFile = {
     id: string;
@@ -12,8 +12,9 @@ export type TopQuery = {
     id: string;
     text: string;
 };
-export type ChatInputProps = {
+export type ChatInputProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange' | 'value'> & {
     value?: string;
+    slot1?: ReactNode;
     onChange?: (value: string) => void;
     onSend?: (message: string, files: AttachedFile[]) => void;
     onAttachFiles?: (files: File[]) => void;
@@ -32,8 +33,6 @@ export type ChatInputProps = {
     voiceButtonIcon?: ReactNode;
     sendButtonIcon?: ReactNode;
     overflowMenuProps?: Partial<MenuProps>;
-    'aria-label'?: string;
-    'aria-describedby'?: string;
 };
 export type ChatInputTokens = {
     container: {

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

@@ -12,10 +12,6 @@ export declare const createOverflowMenuItems: (hiddenFiles: AttachedFile[], onFi
  * Handle textarea auto-resize functionality
  */
 export declare const handleAutoResize: (element: HTMLTextAreaElement | null, autoResize: boolean) => void;
-/**
- * Check if Enter key should trigger send
- */
-export declare const shouldSendOnEnter: (key: string, shiftKey: boolean, metaKey: boolean, ctrlKey: boolean) => boolean;
 /**
  * Validate message length against maxLength
  */

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

@@ -13,6 +13,7 @@ export interface DiffLine {
     content: string;
     type: DiffLineType;
 }
+export type SupportedLanguage = 'javascript' | 'typescript' | 'jsx' | 'tsx' | 'json' | 'css' | 'html' | 'markdown' | 'yaml' | 'python' | 'rust' | 'haskell';
 export type CodeBlockProps = {
     code: string;
     variant?: CodeBlockVariant;
@@ -22,4 +23,7 @@ export type CodeBlockProps = {
     headerLeftSlot?: ReactNode;
     headerRightSlot?: ReactNode;
     diffLines?: DiffLine[];
+    showCopyButton?: boolean;
+    autoFormat?: boolean;
+    language?: SupportedLanguage;
 };

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

@@ -1,5 +1,5 @@
 import { CodeBlockTokenType } from './codeBlock.token';
-import { DiffLineType, DiffLine } from './types';
+import { DiffLineType, DiffLine, SupportedLanguage } from './types';
 /**
  * Token interface for syntax highlighting
  */
@@ -7,11 +7,16 @@ export interface SyntaxToken {
     type: string;
     value: string;
 }
+/**
+ * Formats code using Prettier (with fallback for unsupported languages)
+ * This is a simplified formatter that handles basic indentation and spacing
+ */
+export declare const formatCode: (code: string, language?: SupportedLanguage) => string;
 /**
  * Tokenizes a line of code for syntax highlighting
  * Supports multiple languages: JavaScript/TypeScript, Python, Rust, Haskell
  */
-export declare const tokenizeLine: (line: string) => SyntaxToken[];
+export declare const tokenizeLine: (line: string, language?: string) => SyntaxToken[];
 /**
  * Gets the color for a token type based on syntax highlighting rules
  */

package/dist/components/CodeEditor/CodeEditor.d.ts

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

package/dist/components/CodeEditor/CodeEditorHeader.d.ts

@@ -0,0 +1,13 @@
+import { CodeBlockTokenType } from '../CodeBlock/codeBlock.token';
+import { ReactNode } from 'react';
+type CodeEditorHeaderProps = {
+    header: string;
+    headerLeftSlot?: ReactNode;
+    headerRightSlot?: ReactNode;
+    showCopyButton: boolean;
+    isCopied: boolean;
+    onCopy: () => void;
+    tokens: CodeBlockTokenType;
+};
+export declare const CodeEditorHeader: ({ header, headerLeftSlot, headerRightSlot, showCopyButton, isCopied, onCopy, tokens, }: CodeEditorHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/CodeEditor/MonacoEditorWrapper.d.ts

@@ -0,0 +1,18 @@
+import { CodeBlockTokenType } from '../CodeBlock/codeBlock.token';
+type MonacoEditorWrapperProps = {
+    value: string;
+    language: string;
+    onChange?: (value: string) => void;
+    readOnly: boolean;
+    disabled: boolean;
+    placeholder?: string;
+    showLineNumbers: boolean;
+    minHeight: string | number;
+    maxHeight?: string | number;
+    height?: string | number;
+    tokens: CodeBlockTokenType;
+    onFocus?: () => void;
+    onBlur?: () => void;
+};
+export declare const MonacoEditorWrapper: ({ value, language, onChange, readOnly, disabled, placeholder, showLineNumbers, minHeight, maxHeight, height, tokens, onFocus, onBlur, }: MonacoEditorWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import { SupportedLanguage } from '../CodeBlock/types';
+export declare enum CodeEditorVariant {
+    DEFAULT = "default",
+    NO_GUTTER = "no-gutter"
+}
+export type CodeEditorProps = {
+    value: string;
+    onChange?: (value: string) => void;
+    variant?: CodeEditorVariant;
+    showLineNumbers?: boolean;
+    showHeader?: boolean;
+    header?: string;
+    headerLeftSlot?: ReactNode;
+    headerRightSlot?: ReactNode;
+    showCopyButton?: boolean;
+    language?: SupportedLanguage;
+    placeholder?: string;
+    readOnly?: boolean;
+    disabled?: boolean;
+    minHeight?: string | number;
+    maxHeight?: string | number;
+    height?: string | number;
+    className?: string;
+    onBlur?: () => void;
+    onFocus?: () => void;
+};

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

@@ -0,0 +1,9 @@
+import { CodeEditorVariant } from './types';
+/**
+ * Determines if line numbers should be shown
+ */
+export declare const shouldShowLineNumbers: (showLineNumbers: boolean | undefined, variant: CodeEditorVariant) => boolean;
+/**
+ * Calculates container styles with min/max height
+ */
+export declare const getContainerStyles: (minHeight?: string | number, maxHeight?: string | number) => React.CSSProperties;

package/dist/components/Inputs/MultiValueInput/MultiValueInput.d.ts

@@ -1,3 +1,3 @@
 import { MultiValueInputProps } from './types';
-declare const MultiValueInput: ({ label, sublabel, disabled, required, error, errorMessage, hintText, tags, onTagAdd, onTagRemove, size, ...rest }: MultiValueInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const MultiValueInput: ({ value, label, sublabel, disabled, required, error, errorMessage, hintText, tags, onTagAdd, onTagRemove, onChange, size, ...rest }: MultiValueInputProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiValueInput;

package/dist/components/Inputs/MultiValueInput/types.d.ts

@@ -12,6 +12,7 @@ export declare enum MultiValueInputState {
     DISABLED = "disabled"
 }
 export type MultiValueInputProps = {
+    value?: string;
     label?: string;
     sublabel?: string;
     helpIconHintText?: string;
@@ -22,5 +23,6 @@ export type MultiValueInputProps = {
     tags?: string[];
     onTagAdd?: (tag: string) => void;
     onTagRemove?: (tag: string) => void;
+    onChange?: (value: string) => void;
     size?: TextInputSize;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className'>;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className' | 'onChange' | 'value'>;

package/dist/components/Skeleton/SkeletonCompound.d.ts

@@ -6,7 +6,6 @@ import { SkeletonProps } from './types';
  * <Skeleton loading={true}>
  *   <Skeleton.Avatar size="md" />
  *   <Skeleton.Text lines={2} />
- *   <Skeleton.Button />
  * </Skeleton>
  *
  * Or traditional:
@@ -26,20 +25,6 @@ declare const SkeletonCompound: import('react').ForwardRefExoticComponent<import
         size?: import('./types').SkeletonSize;
         shape?: "circle" | "square";
     } & import('react').RefAttributes<HTMLDivElement>>;
-    /**
-     * Button skeleton with perfect token mirroring and dynamic sizing
-     */
-    Button: import('react').ForwardRefExoticComponent<import('./types').BaseSkeletonProps & Omit<import('../Primitives/Block/Block').BlockProps, "children"> & {
-        buttonType?: import('../Button').ButtonType;
-        size?: import('../Button').ButtonSize;
-        subType?: import('../Button').ButtonSubType;
-        width?: string | number;
-        fullWidth?: boolean;
-        buttonGroupPosition?: "center" | "left" | "right";
-        text?: string;
-        hasLeadingIcon?: boolean;
-        hasTrailingIcon?: boolean;
-    } & import('react').RefAttributes<HTMLDivElement>>;
     /**
      * Card skeleton with default layout or custom children
      */

package/dist/components/Skeleton/hooks/useSkeletonBase.d.ts

@@ -15,7 +15,3 @@ export declare const useSkeletonBase: (loading: boolean, children?: ReactNode) =
     tokens: SkeletonTokensType;
     prefersReducedMotion: boolean;
 };
-/**
- * Common skeleton component props validation and defaults
- */
-export declare const useSkeletonDefaults: <T extends Record<string, unknown>>(props: T, defaults: Partial<T>) => T;

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

@@ -1,10 +1,10 @@
 export { default as Skeleton } from './SkeletonCompound';
 export { default as SkeletonBase } from './Skeleton';
 export { default as SkeletonAvatar } from './SkeletonAvatar';
-export { default as SkeletonButton } from './SkeletonButton';
 export { default as SkeletonCard } from './SkeletonCard';
 export { useSkeletonBase } from './hooks/useSkeletonBase';
-export type { SkeletonProps, SkeletonAvatarProps, SkeletonButtonProps, SkeletonCardProps, SkeletonSize, BaseSkeletonProps, SkeletonVariant, SkeletonShape, } from './types';
+export { getSkeletonState, mergeSkeletonProps, getSkeletonDefaults, } from './utils';
+export type { SkeletonProps, SkeletonAvatarProps, SkeletonCardProps, SkeletonSize, BaseSkeletonProps, SkeletonVariant, SkeletonShape, } from './types';
 export type { SkeletonTokensType, ResponsiveSkeletonTokens, } from './skeleton.tokens';
 export { getSkeletonTokens } from './skeleton.tokens';
 export { default } from './SkeletonCompound';

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

@@ -1,7 +1,6 @@
 import { ReactNode } from 'react';
 import { BlockProps } from '../Primitives/Block/Block';
 import { SkeletonVariant, SkeletonShape } from './skeleton.tokens';
-import { ButtonType, ButtonSize, ButtonSubType } from '../Button/types';
 export type SkeletonSize = 'sm' | 'md' | 'lg';
 export type BaseSkeletonProps = {
     variant?: SkeletonVariant;
@@ -19,17 +18,6 @@ export type SkeletonAvatarProps = BaseSkeletonProps & Omit<BlockProps, 'children
     size?: SkeletonSize;
     shape?: 'circle' | 'square';
 };
-export type SkeletonButtonProps = BaseSkeletonProps & Omit<BlockProps, 'children'> & {
-    buttonType?: ButtonType;
-    size?: ButtonSize;
-    subType?: ButtonSubType;
-    width?: string | number;
-    fullWidth?: boolean;
-    buttonGroupPosition?: 'center' | 'left' | 'right';
-    text?: string;
-    hasLeadingIcon?: boolean;
-    hasTrailingIcon?: boolean;
-};
 export type SkeletonCardProps = BaseSkeletonProps & Omit<BlockProps, 'children'> & {
     children?: ReactNode;
     padding?: string | number;

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

@@ -0,0 +1,18 @@
+/**
+ * Simple utility function for skeleton state logic
+ * Not a hook since it doesn't call any React hooks internally
+ */
+export declare function getSkeletonState(showSkeleton: boolean): {
+    shouldShowSkeleton: boolean;
+    shouldShowContent: boolean;
+};
+/**
+ * Helper function for merging component props with skeleton props
+ * Not a hook since it's just a pure utility function
+ */
+export declare function mergeSkeletonProps<TComponentProps, TSkeletonProps>(componentProps: TComponentProps, skeletonProps?: Partial<TSkeletonProps>): TComponentProps & Partial<TSkeletonProps>;
+/**
+ * Common skeleton component props validation and defaults
+ * Renamed from useSkeletonDefaults since it's not a hook
+ */
+export declare function getSkeletonDefaults<T extends Record<string, unknown>>(props: T, defaults: Partial<T>): T;

package/dist/components/Snackbar/Snackbar.d.ts

@@ -1,6 +1,9 @@
 import { default as React } from 'react';
-import { Toaster as Snackbar } from 'sonner';
-import { AddToastOptions, CustomToastProps } from './types';
+import { AddToastOptions, CustomToastProps, SnackbarPosition } from './types';
 export declare const StyledToast: React.FC<CustomToastProps>;
-export declare const addSnackbar: ({ header, description, variant, onClose, actionButton, duration, }: AddToastOptions) => string | number;
+export declare const addSnackbar: ({ header, description, variant, onClose, actionButton, duration, position, }: AddToastOptions) => string | number;
+type SnackbarProps = {
+    position?: SnackbarPosition;
+};
+declare const Snackbar: React.FC<SnackbarProps>;
 export default Snackbar;

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

@@ -4,6 +4,14 @@ export declare enum SnackbarVariant {
     WARNING = "warning",
     ERROR = "error"
 }
+export declare enum SnackbarPosition {
+    TOP_LEFT = "top-left",
+    TOP_RIGHT = "top-right",
+    BOTTOM_LEFT = "bottom-left",
+    BOTTOM_RIGHT = "bottom-right",
+    TOP_CENTER = "top-center",
+    BOTTOM_CENTER = "bottom-center"
+}
 export type AddToastOptions = {
     header: string;
     description?: string;
@@ -15,6 +23,7 @@ export type AddToastOptions = {
         autoDismiss?: boolean;
     };
     duration?: number;
+    position?: SnackbarPosition;
 };
 export type CustomToastProps = {
     header: string;

package/dist/components/Tags/Tag.d.ts

@@ -0,0 +1,15 @@
+import { TagColor, TagShape, TagSize, TagVariant } from './types';
+declare const Tag: import('react').ForwardRefExoticComponent<Omit<import('../Primitives/Block/Block').BlockProps, "children"> & {
+    text: string;
+    variant?: TagVariant;
+    color?: TagColor;
+    size?: TagSize;
+    shape?: TagShape;
+    leftSlot?: import('react').ReactNode;
+    rightSlot?: import('react').ReactNode;
+    splitTagPosition?: "left" | "right";
+} & {
+    showSkeleton?: boolean;
+    skeletonVariant?: import('../Skeleton').SkeletonVariant;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export default Tag;

package/dist/components/Tags/TagBase.d.ts

@@ -0,0 +1,20 @@
+import { TagTokensType } from './tag.tokens';
+import { TagProps, TagColor, TagShape, TagSize, TagVariant } from './types';
+export type TagBaseProps = TagProps & {
+    isSkeleton?: boolean;
+    tokens?: TagTokensType;
+};
+declare const TagBase: import('react').ForwardRefExoticComponent<Omit<import('../Primitives/Block/Block').BlockProps, "children"> & {
+    text: string;
+    variant?: TagVariant;
+    color?: TagColor;
+    size?: TagSize;
+    shape?: TagShape;
+    leftSlot?: import('react').ReactNode;
+    rightSlot?: import('react').ReactNode;
+    splitTagPosition?: "left" | "right";
+} & {
+    isSkeleton?: boolean;
+    tokens?: TagTokensType;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export default TagBase;

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

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

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

@@ -1,4 +1,6 @@
 import { ReactNode } from 'react';
+import { SkeletonVariant } from '../Skeleton/skeleton.tokens';
+import { BlockProps } from '../Primitives/Block/Block';
 export declare enum TagVariant {
     NO_FILL = "noFill",
     ATTENTIVE = "attentive",
@@ -22,7 +24,7 @@ export declare enum TagShape {
     ROUNDED = "rounded",
     SQUARICAL = "squarical"
 }
-export type TagProps = {
+export type TagProps = Omit<BlockProps, 'children'> & {
     text: string;
     variant?: TagVariant;
     color?: TagColor;
@@ -30,6 +32,9 @@ export type TagProps = {
     shape?: TagShape;
     leftSlot?: ReactNode;
     rightSlot?: ReactNode;
-    onClick?: () => void;
     splitTagPosition?: 'left' | 'right';
 };
+export type TagWithSkeletonProps = TagProps & {
+    showSkeleton?: boolean;
+    skeletonVariant?: SkeletonVariant;
+};

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

@@ -9,3 +9,4 @@ export * from './types';
 export * from './workflow.tokens';
 export * from './constants';
 export * from './utils';
+export { BaseEdge, EdgeLabelRenderer, getBezierPath, getStraightPath, getSmoothStepPath, Handle, Position, } from 'reactflow';

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

@@ -1,6 +1,6 @@
-import { Node, Edge, NodeProps, EdgeProps, Connection } from 'reactflow';
+import { Node, Edge, NodeProps, EdgeProps, Connection, NodeTypes, EdgeTypes } from 'reactflow';
 import { ReactNode } from 'react';
-export type { Node, Edge, NodeProps, EdgeProps, Connection };
+export type { Node, Edge, NodeProps, EdgeProps, Connection, NodeTypes, EdgeTypes, };
 export declare enum NodeType {
     DEFAULT = "default",
     INPUT = "input",
@@ -38,12 +38,15 @@ export type WorkflowCanvasProps = {
     onEdgeClick?: (event: React.MouseEvent, edge: BlendEdge) => void;
     onNodeDoubleClick?: (event: React.MouseEvent, node: BlendNode) => void;
     onPaneClick?: (event: React.MouseEvent) => void;
+    nodeTypes?: NodeTypes;
+    edgeTypes?: EdgeTypes;
     height?: string | number;
     width?: string | number;
     fitView?: boolean;
     showControls?: boolean;
     controlsPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
     showMinimap?: boolean;
+    minimapPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
     showBackground?: boolean;
     panOnScroll?: boolean;
     zoomOnScroll?: boolean;

package/dist/main.d.ts

@@ -37,6 +37,7 @@ export * from './components/Upload';
 export * from './components/WorkflowCanvas';
 export * from './components/ChatInput';
 export * from './components/CodeBlock';
+export * from './components/CodeEditor';
 export * from './components/ButtonGroup';
 export * from './components/Button';
 export * from './context';