dash-ui-kit 1.0.8 → 1.0.92

package/dist/react/index.d.ts

@@ -25,5 +25,5 @@ export { Dialog, type DialogProps } from './components/dialog';
 export { Tabs, type TabsProps, type TabItem } from './components/tabs';
 export type { TimeDeltaFormat } from './utils/datetime';
 export { ThemeProvider, useTheme, type Theme, type ThemeContextValue, type ThemeProviderProps } from './contexts/ThemeContext';
-export { ArrowIcon, CopyIcon, SuccessIcon, ErrorIcon, QueuedIcon, PooledIcon, BroadcastedIcon, CalendarIcon, EyeOpenIcon, EyeClosedIcon, CheckIcon, KeyIcon, ProtectedMessageIcon, SmartphoneIcon, CrossIcon, WalletIcon, PlusIcon, FilterIcon, EditIcon, DeleteIcon, ChevronIcon, BurgerMenuIcon, KebabMenuIcon, CircleProcessIcon, CreditsIcon, WebIcon, ChainSmallIcon, SettingsIcon, ShieldSmallIcon, QuestionMessageIcon, CheckmarkIcon, FingerprintIcon, FaceIcon, SignIcon, SignLockIcon, LockIcon, PendingIcon, SearchIcon } from './components/icons';
+export { ArrowIcon, CopyIcon, SuccessIcon, ErrorIcon, QueuedIcon, PooledIcon, BroadcastedIcon, CalendarIcon, EyeOpenIcon, EyeClosedIcon, CheckIcon, KeyIcon, ProtectedMessageIcon, SmartphoneIcon, CrossIcon, WalletIcon, PlusIcon, FilterIcon, EditIcon, DeleteIcon, ChevronIcon, BurgerMenuIcon, KebabMenuIcon, CircleProcessIcon, CreditsIcon, WebIcon, ChainSmallIcon, SettingsIcon, ShieldSmallIcon, QuestionMessageIcon, CheckmarkIcon, FingerprintIcon, FaceIcon, SignIcon, SignLockIcon, LockIcon, PendingIcon, SearchIcon, AirplaneIcon, ExternalLinkIcon, InfoCircleIcon } from './components/icons';
 export type { IconProps } from './components/icons';

package/dist/react/index.esm.js

@@ -1991,6 +1991,83 @@ const SearchIcon = ({
     fill: 'currentColor'
   })
 });
+const AirplaneIcon = ({
+  color = '#0C1C33',
+  size = 16,
+  className = '',
+  onClick
+}) => jsx("svg", {
+  width: size,
+  height: size,
+  viewBox: '0 0 16 16',
+  fill: 'none',
+  xmlns: 'http://www.w3.org/2000/svg',
+  className: className,
+  onClick: onClick,
+  color: color,
+  children: jsx("path", {
+    d: 'M7.68459 8.00182H3.34214M3.21905 8.57088L2.50162 10.7134C2.10869 11.8867 1.91222 12.4734 2.05322 12.8347C2.17565 13.1485 2.43862 13.3863 2.76311 13.4769C3.13678 13.5811 3.70115 13.3272 4.82989 12.8195L12.0662 9.56409C13.1679 9.06841 13.7188 8.82064 13.889 8.47637C14.037 8.17727 14.037 7.82629 13.889 7.5272C13.7188 7.18299 13.1679 6.93515 12.0662 6.4395L4.81741 3.17853C3.69206 2.67227 3.1294 2.41914 2.75611 2.52298C2.43192 2.61316 2.16898 2.8504 2.04612 3.16358C1.90464 3.5242 2.09901 4.10962 2.48775 5.28048L3.22045 7.48736C3.28721 7.68845 3.3206 7.78903 3.33377 7.89182C3.34547 7.98311 3.34534 8.07548 3.33342 8.16671C3.31997 8.2695 3.28634 8.36994 3.21905 8.57088Z',
+    stroke: 'currentColor',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round'
+  })
+});
+const ExternalLinkIcon = ({
+  color = '#0C1C33',
+  size = 16,
+  className = '',
+  onClick
+}) => jsx("svg", {
+  width: size,
+  height: size,
+  viewBox: '0 0 16 16',
+  fill: 'none',
+  xmlns: 'http://www.w3.org/2000/svg',
+  className: className,
+  onClick: onClick,
+  color: color,
+  children: jsx("path", {
+    d: 'M10.2499 9.125V5.75M10.2499 5.75H6.87491M10.2499 5.75L5.75001 10.2499M4.40001 14H11.6C12.4401 14 12.8601 14 13.181 13.8365C13.4632 13.6927 13.6927 13.4632 13.8366 13.181C14 12.8602 14 12.4401 14 11.6V4.4C14 3.55992 14 3.13988 13.8366 2.81902C13.6927 2.53677 13.4632 2.3073 13.181 2.16349C12.8601 2 12.4401 2 11.6 2H4.40001C3.55993 2 3.13989 2 2.81902 2.16349C2.53678 2.3073 2.30731 2.53677 2.16349 2.81902C2 3.13988 2 3.55992 2 4.4V11.6C2 12.4401 2 12.8602 2.16349 13.181C2.30731 13.4632 2.53678 13.6927 2.81902 13.8365C3.13989 14 3.55993 14 4.40001 14Z',
+    stroke: 'currentColor',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round'
+  })
+});
+const InfoCircleIcon = ({
+  color = '#4C7EFF',
+  size = 19,
+  className = '',
+  onClick
+}) => jsxs("svg", {
+  width: size,
+  height: size,
+  viewBox: '0 0 19 19',
+  fill: 'none',
+  xmlns: 'http://www.w3.org/2000/svg',
+  className: className,
+  onClick: onClick,
+  color: color,
+  children: [jsxs("g", {
+    clipPath: 'url(#clip0_1166_258)',
+    children: [jsx("path", {
+      d: 'M9.5 5.5H9.51ZM9.5 8.5V13.5ZM18.5 9.5C18.5 14.4706 14.4706 18.5 9.5 18.5C4.52944 18.5 0.5 14.4706 0.5 9.5C0.5 4.52944 4.52944 0.5 9.5 0.5C14.4706 0.5 18.5 4.52944 18.5 9.5Z',
+      fill: 'currentColor',
+      fillOpacity: '0.05'
+    }), jsx("path", {
+      d: 'M18 9.5C18 4.80558 14.1945 1 9.5 1C4.80558 1 1 4.80558 1 9.5C1 14.1945 4.80558 18 9.5 18C14.1945 18 18 14.1945 18 9.5ZM9 13.5V8.5C9 8.22386 9.22386 8 9.5 8C9.77614 8 10 8.22386 10 8.5V13.5C10 13.7761 9.77614 14 9.5 14C9.22386 14 9 13.7761 9 13.5ZM9.50977 5C9.78591 5 10.0098 5.22386 10.0098 5.5C10.0098 5.77614 9.78591 6 9.50977 6H9.5C9.22386 6 9 5.77614 9 5.5C9 5.22386 9.22386 5 9.5 5H9.50977ZM19 9.5C19 14.7467 14.7467 19 9.5 19C4.2533 19 0 14.7467 0 9.5C0 4.2533 4.2533 0 9.5 0C14.7467 0 19 4.2533 19 9.5Z',
+      fill: 'currentColor'
+    })]
+  }), jsx("defs", {
+    children: jsx("clipPath", {
+      id: 'clip0_1166_258',
+      children: jsx("rect", {
+        width: '19',
+        height: '19',
+        fill: 'white'
+      })
+    })
+  })]
+});
 
 const accordionRootStyles = cva(`
     w-full
@@ -2996,7 +3073,7 @@ const textStyles = cva('', {
     },
     weight: {
       normal: 'font-normal',
-      500: 'font-medium',
+      medium: 'font-medium',
       bold: 'font-bold'
     },
     italic: {
@@ -6242,7 +6319,7 @@ var VISUALLY_HIDDEN_STYLES = Object.freeze({
   wordWrap: "normal"
 });
 var NAME = "VisuallyHidden";
-var VisuallyHidden = React.forwardRef(
+var VisuallyHidden$1 = React.forwardRef(
   (props, forwardedRef) => {
     return /* @__PURE__ */ jsx(
       Primitive.span,
@@ -6254,7 +6331,7 @@ var VisuallyHidden = React.forwardRef(
     );
   }
 );
-VisuallyHidden.displayName = NAME;
+VisuallyHidden$1.displayName = NAME;
 
 var getDefaultParent = function (originalTarget) {
     if (typeof document === 'undefined') {
@@ -8265,7 +8342,7 @@ const selectTrigger = cva('w-full transition-all font-inter appearance-none curs
     disabled: false
   }
 });
-const selectContent = cva('overflow-hidden z-50 rounded-md shadow-lg min-w-[var(--radix-select-trigger-width)] w-full', {
+const selectContent = cva('overflow-hidden z-50 rounded-md shadow-lg min-w-[var(--radix-select-trigger-width)] w-full max-h-[var(--radix-select-content-available-height)]', {
   variants: {
     theme: {
       light: 'bg-white border border-gray-200',
@@ -8273,6 +8350,7 @@ const selectContent = cva('overflow-hidden z-50 rounded-md shadow-lg min-w-[var(
     }
   }
 });
+const selectViewport = cva('overflow-y-auto max-h-[inherit]');
 const selectItem = cva('relative flex cursor-pointer select-none items-center outline-none focus:bg-gray-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50', {
   variants: {
     theme: {
@@ -8361,6 +8439,7 @@ const Select = _a => {
   const contentClasses = selectContent({
     theme
   });
+  const viewportClasses = selectViewport({});
   const itemClasses = selectItem({
     theme,
     size
@@ -8393,6 +8472,7 @@ const Select = _a => {
         position: 'popper',
         sideOffset: 5,
         children: jsx(Viewport, {
+          className: viewportClasses,
           children: options.map(option => jsx(Item$1, {
             value: option.value,
             className: itemClasses,
@@ -8912,7 +8992,7 @@ const overlayMenuTrigger = cva('w-full transition-all font-inter appearance-none
     filled: false
   }
 });
-const overlayContent = cva('absolute z-50 min-w-full overflow-hidden shadow-lg', {
+const overlayContent = cva('absolute z-50 overflow-hidden', {
   variants: {
     theme: {
       light: 'bg-white border border-[rgba(12,28,51,0.05)]',
@@ -8920,22 +9000,55 @@ const overlayContent = cva('absolute z-50 min-w-full overflow-hidden shadow-lg',
     },
     size: {
       sm: 'rounded-[0.625rem]',
-      md: 'rounded-[0.875rem]',
-      xl: 'rounded-[1rem]'
+      md: 'rounded-[0.75rem]',
+      xl: 'rounded-[0.9375rem]'
+    },
+    variant: {
+      dropdown: 'min-w-full',
+      'context-menu': 'w-[200px]'
+    },
+    hasShadow: {
+      true: 'shadow-[0px_0px_75px_0px_rgba(0,0,0,0.15)]',
+      false: 'shadow-lg'
+    }
+  },
+  defaultVariants: {
+    variant: 'dropdown',
+    hasShadow: false
+  }
+});
+const overlayHeader = cva('flex items-center justify-between border-b gap-2', {
+  variants: {
+    theme: {
+      light: 'border-[rgba(12,28,51,0.05)]',
+      dark: 'border-[rgba(255,255,255,0.15)]'
+    },
+    size: {
+      sm: 'px-[0.875rem] py-[0.375rem]',
+      md: 'px-[1rem] py-[0.5rem]',
+      xl: 'px-[1.125rem] py-[0.5rem]'
     }
+  },
+  defaultVariants: {
+    theme: 'light',
+    size: 'xl'
   }
 });
-const overlayItem = cva('relative flex cursor-pointer select-none items-center outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 rounded-none', {
+const overlayItem = cva('relative flex cursor-pointer select-none items-center outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 rounded-none font-medium text-[0.75rem] leading-[1.416em]', {
   variants: {
     theme: {
       light: 'text-[#0C1C33] hover:bg-gray-50',
       dark: 'text-white hover:bg-[rgba(255,255,255,0.1)]'
     },
     size: {
-      sm: 'dash-block-sm',
-      md: 'dash-block-md',
-      xl: 'dash-block-xl'
+      sm: 'px-[0.875rem] py-[0.625rem]',
+      md: 'px-[1rem] py-[0.6875rem]',
+      xl: 'px-[1.125rem] py-[0.75rem]'
     }
+  },
+  defaultVariants: {
+    theme: 'light',
+    size: 'xl'
   }
 });
 // Arrow icon
@@ -8958,10 +9071,17 @@ const ChevronDownIcon = ({
 /**
  * Overlay menu component that opens above the trigger with overlay positioning.
  * Supports custom content items with onClick handlers.
+ *
+ * @param variant - 'dropdown' (default) or 'context-menu'
+ * @param headerContent - Custom header content (for context-menu variant)
+ * @param showCloseButton - Show close button in header
+ * @param position - Position object for context-menu variant
+ * @param width - Custom width (default: 200px for context-menu)
  */
 const OverlayMenu = _a => {
   var {
       className = '',
+      contentClassName = '',
       colorScheme,
       size,
       error = false,
@@ -8976,9 +9096,15 @@ const OverlayMenu = _a => {
       maxHeight = '200px',
       triggerContent,
       placeholder = 'Menu',
-      showItemBorders = true
+      showItemBorders = true,
+      variant = 'dropdown',
+      headerContent,
+      showCloseButton = false,
+      position,
+      width,
+      onClose
     } = _a,
-    props = __rest(_a, ["className", "colorScheme", "size", "error", "success", "border", "filled", "disabled", "items", "showArrow", "name", "overlayLabel", "maxHeight", "triggerContent", "placeholder", "showItemBorders"]);
+    props = __rest(_a, ["className", "contentClassName", "colorScheme", "size", "error", "success", "border", "filled", "disabled", "items", "showArrow", "name", "overlayLabel", "maxHeight", "triggerContent", "placeholder", "showItemBorders", "variant", "headerContent", "showCloseButton", "position", "width", "onClose"]);
   const {
     theme
   } = useTheme();
@@ -8987,6 +9113,22 @@ const OverlayMenu = _a => {
   // Determine color scheme based on state
   let finalColorScheme = colorScheme;
   if (error) finalColorScheme = 'error';else if (success) finalColorScheme = 'success';
+  const isContextMenu = variant === 'context-menu';
+  // Handle Escape key
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleEscape = e => {
+      if (e.key === 'Escape') {
+        handleClose();
+      }
+    };
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [isOpen]);
+  const handleClose = () => {
+    setIsOpen(false);
+    onClose === null || onClose === void 0 ? void 0 : onClose();
+  };
   const triggerClasses = overlayMenuTrigger({
     theme,
     colorScheme: finalColorScheme,
@@ -8996,6 +9138,12 @@ const OverlayMenu = _a => {
     disabled
   }) + ' ' + className;
   const contentClasses = overlayContent({
+    theme,
+    size,
+    variant,
+    hasShadow: isContextMenu
+  });
+  const headerClasses = overlayHeader({
     theme,
     size
   });
@@ -9007,11 +9155,28 @@ const OverlayMenu = _a => {
     if (!item.disabled && item.onClick) {
       item.onClick();
     }
-    setIsOpen(false);
+    handleClose();
+  };
+  // For context-menu variant, show menu immediately if position is provided
+  useEffect(() => {
+    if (isContextMenu && position) {
+      setIsOpen(true);
+    }
+  }, [isContextMenu, position]);
+  // Calculate position styles for context-menu
+  const getPositionStyles = () => {
+    if (!isContextMenu || !position) return {};
+    const styles = {};
+    if (position.top !== undefined) styles.top = position.top;
+    if (position.left !== undefined) styles.left = position.left;
+    if (position.right !== undefined) styles.right = position.right;
+    if (position.bottom !== undefined) styles.bottom = position.bottom;
+    if (width) styles.width = typeof width === 'number' ? `${width}px` : width;
+    return styles;
   };
   return jsxs("div", {
-    className: 'relative',
-    children: [jsxs("button", Object.assign({
+    className: isContextMenu ? '' : 'relative',
+    children: [!isContextMenu && jsxs("button", Object.assign({
       ref: triggerRef,
       type: 'button',
       className: triggerClasses,
@@ -9030,35 +9195,33 @@ const OverlayMenu = _a => {
       })]
     })), isOpen && jsxs(Fragment, {
       children: [jsx("div", {
-        className: 'fixed inset-0 z-40',
-        onClick: () => setIsOpen(false)
+        className: `${isContextMenu ? 'fixed' : 'fixed'} inset-0 z-40`,
+        onClick: handleClose
       }), jsxs("div", {
-        className: `${contentClasses} top-0 left-0 right-0 overflow-y-auto`,
-        style: {
+        className: `${contentClasses} ${isContextMenu ? 'fixed' : ''} ${!isContextMenu ? 'top-0 left-0 right-0' : ''} overflow-y-auto ${contentClassName}`,
+        style: Object.assign({
           maxHeight
-        },
-        children: [overlayLabel && jsxs("div", {
-          className: `${itemClasses} font-medium border-b rounded-b-none cursor-pointer ${theme === 'dark' ? 'border-[rgba(255,255,255,0.15)]' : 'border-[rgba(12,28,51,0.05)]'}`,
-          onClick: () => setIsOpen(false),
+        }, getPositionStyles()),
+        children: [(headerContent || overlayLabel) && jsxs("div", {
+          className: `${headerClasses} ${!showCloseButton && !isContextMenu ? 'cursor-pointer' : ''}`,
+          onClick: !showCloseButton && !isContextMenu ? handleClose : undefined,
           children: [jsx("div", {
             className: 'w-full flex-1',
-            children: overlayLabel
-          }), jsx("div", {
-            className: 'flex items-center pl-1',
+            children: headerContent || overlayLabel
+          }), (showCloseButton || isContextMenu && headerContent) && jsx("button", {
+            className: 'flex items-center cursor-pointer hover:opacity-70 transition-opacity',
+            onClick: handleClose,
+            "aria-label": 'Close menu',
             children: jsx(CrossIcon, {
               size: 16,
-              color: theme === 'dark' ? '#FFFFFF' : '#0C1C33',
-              className: 'cursor-pointer'
+              color: theme === 'dark' ? '#FFFFFF' : '#0C1C33'
             })
           })]
         }), jsx("div", {
           children: items.map((item, index) => jsx("div", {
-            className: `${itemClasses} ${item.disabled ? 'opacity-50 cursor-not-allowed' : ''} ${index < items.length - 1 ? `border-b ${theme === 'dark' ? 'border-[rgba(255,255,255,0.15)]' : 'border-[rgba(12,28,51,0.05)]'}` : ''}`,
+            className: `${itemClasses} ${item.disabled ? 'opacity-50 cursor-not-allowed' : ''} ${showItemBorders && index < items.length - 1 ? `border-b ${theme === 'dark' ? 'border-[rgba(255,255,255,0.15)]' : 'border-[rgba(12,28,51,0.05)]'}` : ''}`,
             onClick: () => handleItemClick(item),
-            children: jsx("div", {
-              className: 'w-full flex-1',
-              children: item.content
-            })
+            children: item.content
           }, item.id))
         })]
       })]
@@ -9350,7 +9513,7 @@ const List$1 = ({
         className: 'flex flex-col gap-1',
         children: [jsx(Text, {
           size: size,
-          weight: 500,
+          weight: "medium",
           children: item.text
         }), item.description && jsx(Text, {
           size: 'xs',
@@ -9384,27 +9547,41 @@ const bigNumberStyles = cva('inline-flex whitespace-nowrap gap-1', {
 const BigNumber = ({
   children,
   variant = 'space',
-  className = ''
+  className = '',
+  decimalPointSpacing = -2
 }) => {
   const {
     theme
   } = useTheme();
+  const decimalPointStyle = {
+    marginLeft: `${decimalPointSpacing}px`,
+    marginRight: `${decimalPointSpacing}px`
+  };
   if (children === undefined || children === null) return null;
   const str = children.toString();
   if (variant === 'space') {
-    // group digits every 3, right to left
-    const groups = str.split('').reverse().reduce((acc, char, idx) => {
+    // Split into integer and decimal parts
+    const [intPart, fracPart] = str.split('.');
+    // group digits every 3, right to left (only for integer part)
+    const groups = intPart.split('').reverse().reduce((acc, char, idx) => {
       if (idx % 3 === 0) acc.unshift('');
       acc[0] = char + acc[0];
       return acc;
     }, []);
-    return jsx("span", {
+    return jsxs("span", {
       className: `${bigNumberStyles({
         theme
       })} ${className}`,
-      children: groups.map((grp, i) => jsx("span", {
+      children: [groups.map((grp, i) => jsx("span", {
         children: grp
-      }, i))
+      }, i)), fracPart != null && jsxs(Fragment, {
+        children: [jsx("span", {
+          style: decimalPointStyle,
+          children: "."
+        }), jsx("span", {
+          children: fracPart
+        })]
+      })]
     });
   } else {
     // comma variant
@@ -9426,6 +9603,7 @@ const BigNumber = ({
         })]
       }, i)), fracPart != null && jsxs(Fragment, {
         children: [jsx("span", {
+          style: decimalPointStyle,
           children: "."
         }), jsx("span", {
           children: fracPart
@@ -11726,6 +11904,24 @@ var Content$1 = DialogContent;
 var Title = DialogTitle;
 var Close = DialogClose;
 
+// Visually hidden component for accessibility
+const VisuallyHidden = ({
+  children
+}) => jsx("span", {
+  style: {
+    position: 'absolute',
+    border: 0,
+    width: 1,
+    height: 1,
+    padding: 0,
+    margin: -1,
+    overflow: 'hidden',
+    clip: 'rect(0, 0, 0, 0)',
+    whiteSpace: 'nowrap',
+    wordWrap: 'normal'
+  },
+  children: children
+});
 const overlayStyles = cva(`
     fixed
     inset-0
@@ -11746,11 +11942,9 @@ const overlayStyles = cva(`
 const contentStyles = cva(`
     fixed
     left-[50%]
-    top-[50%]
     z-50
     w-full
     translate-x-[-50%]
-    translate-y-[-50%]
     flex
     flex-col
     gap-4
@@ -11763,10 +11957,6 @@ const contentStyles = cva(`
     data-[state=open]:fade-in-0
     data-[state=closed]:zoom-out-95
     data-[state=open]:zoom-in-95
-    data-[state=closed]:slide-out-to-left-1/2
-    data-[state=closed]:slide-out-to-top-[48%]
-    data-[state=open]:slide-in-from-left-1/2
-    data-[state=open]:slide-in-from-top-[48%]
     sm:rounded-lg
     font-dash-main
   `, {
@@ -11779,10 +11969,27 @@ const contentStyles = cva(`
       sm: 'dash-block-sm',
       md: 'dash-block-md',
       xl: 'dash-block-xl'
+    },
+    position: {
+      center: `
+          top-[50%]
+          translate-y-[-50%]
+          data-[state=closed]:slide-out-to-left-1/2
+          data-[state=closed]:slide-out-to-top-[48%]
+          data-[state=open]:slide-in-from-left-1/2
+          data-[state=open]:slide-in-from-top-[48%]
+        `,
+      bottom: `
+          data-[state=closed]:slide-out-to-left-1/2
+          data-[state=closed]:slide-out-to-bottom-full
+          data-[state=open]:slide-in-from-left-1/2
+          data-[state=open]:slide-in-from-bottom-full
+        `
     }
   },
   defaultVariants: {
-    size: 'md'
+    size: 'md',
+    position: 'center'
   }
 });
 const headerStyles = cva(`
@@ -11831,6 +12038,10 @@ const DashDialog = ({
   title,
   showCloseButton = true,
   size = 'md',
+  position = 'center',
+  bottomOffset = 24,
+  maxWidth,
+  horizontalMargin,
   children,
   className = '',
   trigger
@@ -11838,6 +12049,40 @@ const DashDialog = ({
   const {
     theme
   } = useTheme();
+  // Calculate position and sizing styles
+  const customStyles = {};
+  if (position === 'bottom') {
+    customStyles.bottom = `${bottomOffset}px`;
+  }
+  if (maxWidth) {
+    // Check if it's a Tailwind size (sm, md, lg, xl, 2xl, etc.) or a CSS value
+    const tailwindSizes = {
+      'xs': '320px',
+      'sm': '384px',
+      'md': '448px',
+      'lg': '512px',
+      'xl': '576px',
+      '2xl': '672px',
+      '3xl': '768px',
+      '4xl': '896px',
+      '5xl': '1024px',
+      '6xl': '1152px',
+      '7xl': '1280px'
+    };
+    customStyles.maxWidth = tailwindSizes[maxWidth] || maxWidth;
+  }
+  if (horizontalMargin !== undefined) {
+    // Set max width to viewport width minus margins on both sides
+    const marginConstraint = `calc(100vw - ${horizontalMargin * 2}px)`;
+    if (customStyles.maxWidth) {
+      // If maxWidth is already set, use the smaller of the two
+      customStyles.maxWidth = `min(${customStyles.maxWidth}, ${marginConstraint})`;
+    } else {
+      customStyles.maxWidth = marginConstraint;
+    }
+    // Keep the dialog centered but constrained by the calculated maxWidth
+    // The existing left-[50%] translate-x-[-50%] will handle centering
+  }
   const DialogContent = jsxs(Portal, {
     children: [jsx(Overlay, {
       className: overlayStyles({
@@ -11847,11 +12092,15 @@ const DashDialog = ({
       "aria-describedby": undefined,
       className: `${contentStyles({
         theme,
-        size
+        size,
+        position
       })} ${className}`,
-      children: [(title || showCloseButton) && jsxs("div", {
+      style: customStyles,
+      children: [title ?
+      // Render visible title in header if provided
+      jsxs("div", {
         className: headerStyles(),
-        children: [title && jsx(Title, {
+        children: [jsx(Title, {
           className: titleStyles({
             theme
           }),
@@ -11870,6 +12119,30 @@ const DashDialog = ({
             children: "Close"
           })]
         })]
+      }) :
+      // No title provided - render visually hidden title for accessibility
+      jsxs(Fragment, {
+        children: [jsx(Title, {
+          children: jsx(VisuallyHidden, {
+            children: "Dialog"
+          })
+        }), showCloseButton && jsx("div", {
+          className: headerStyles(),
+          children: jsxs(Close, {
+            className: closeButtonStyles({
+              theme
+            }),
+            children: [jsx("div", {
+              className: 'w-8 h-8 flex items-center justify-center',
+              children: jsx(CrossIcon, {
+                size: 16
+              })
+            }), jsx("span", {
+              className: 'sr-only',
+              children: "Close"
+            })]
+          })
+        })]
       }), children]
     })]
   });
@@ -12420,5 +12693,5 @@ const Tabs = ({
   });
 };
 
-export { Accordion, ArrowIcon, Avatar, Badge, BigNumber, BroadcastedIcon, BurgerMenuIcon, Button, CalendarIcon, ChainSmallIcon, CheckIcon, CheckmarkIcon, ChevronIcon, CircleProcessIcon, CopyButton, CopyIcon, CreditsIcon, CrossIcon, DashLogo, DateBlock, DeleteIcon, DashDialog as Dialog, EditIcon, ErrorIcon, EyeClosedIcon, EyeOpenIcon, FaceIcon, FilterIcon, FingerprintIcon, Heading, Identifier, Input, KebabMenuIcon, KeyIcon, List$1 as List, LockIcon, NotActive, OverlayMenu, OverlaySelect, PendingIcon, PlusIcon, PooledIcon, ProgressStepBar, ProtectedMessageIcon, QuestionMessageIcon, QueuedIcon, SearchIcon, Select, SettingsIcon, ShieldSmallIcon, SignIcon, SignLockIcon, SmartphoneIcon, SuccessIcon, Switch, Tabs, Text, Textarea, ThemeProvider, TimeDelta, TransactionStatusIcon, ValueCard, WalletIcon, WebIcon, useTheme };
+export { Accordion, AirplaneIcon, ArrowIcon, Avatar, Badge, BigNumber, BroadcastedIcon, BurgerMenuIcon, Button, CalendarIcon, ChainSmallIcon, CheckIcon, CheckmarkIcon, ChevronIcon, CircleProcessIcon, CopyButton, CopyIcon, CreditsIcon, CrossIcon, DashLogo, DateBlock, DeleteIcon, DashDialog as Dialog, EditIcon, ErrorIcon, ExternalLinkIcon, EyeClosedIcon, EyeOpenIcon, FaceIcon, FilterIcon, FingerprintIcon, Heading, Identifier, InfoCircleIcon, Input, KebabMenuIcon, KeyIcon, List$1 as List, LockIcon, NotActive, OverlayMenu, OverlaySelect, PendingIcon, PlusIcon, PooledIcon, ProgressStepBar, ProtectedMessageIcon, QuestionMessageIcon, QueuedIcon, SearchIcon, Select, SettingsIcon, ShieldSmallIcon, SignIcon, SignLockIcon, SmartphoneIcon, SuccessIcon, Switch, Tabs, Text, Textarea, ThemeProvider, TimeDelta, TransactionStatusIcon, ValueCard, WalletIcon, WebIcon, useTheme };
 //# sourceMappingURL=index.esm.js.map