upd: model width

src/components/dialog/index.tsx

@@ -1,7 +1,8 @@
-import { type ReactNode } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
 import { Dialog as RDialog } from 'radix-ui';
 import { X } from '@phosphor-icons/react';
 import { IconButton } from '../icon-button';
+import { cx } from '../utils';
 
 export const Dialog = ({
   trigger,
@@ -13,6 +14,9 @@ export const Dialog = ({
   defaultOpen,
   onOpenChange,
   modal,
+  className,
+  contentClassName,
+  style,
 }: {
   trigger?: ReactNode;
   title: string;
@@ -23,12 +27,15 @@ export const Dialog = ({
   defaultOpen?: boolean;
   onOpenChange?: (o: boolean) => void;
   modal?: boolean;
+  className?: string;
+  contentClassName?: string;
+  style?: CSSProperties;
 }) => (
   <RDialog.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange} modal={modal}>
     {trigger && <RDialog.Trigger asChild>{trigger}</RDialog.Trigger>}
     <RDialog.Portal>
       <RDialog.Overlay className="mta-overlay" />
-      <RDialog.Content className="mta-dialog">
+      <RDialog.Content className={cx('mta-dialog', className, contentClassName)} style={style}>
         <RDialog.Title className="mta-dialog__title">{title}</RDialog.Title>
         {description && (
           <RDialog.Description className="mta-dialog__desc">