@tipp/ui 1.2.4 → 1.2.6

package/src/atoms/dialog.tsx

@@ -1,7 +1,8 @@
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { Cross1Icon } from '@radix-ui/react-icons';
-import { Flex, IconButton } from '@radix-ui/themes';
+import { Flex } from '@radix-ui/themes';
 import { useEffect, useRef } from 'react';
+import { Button } from './button';
 
 type ContentProps = RadixDialog.DialogContentProps & {
   width?: string;
@@ -48,9 +49,9 @@ function Content(props: ContentProps): React.ReactElement {
         >
           <Flex direction="column" style={{ position: 'relative' }}>
             <RadixDialog.Close asChild className="DialogClose">
-              <IconButton variant="ghost">
-                <Cross1Icon />
-              </IconButton>
+              <Button color="gray" variant="transparent">
+                <Cross1Icon height="16px" width="16px" />
+              </Button>
             </RadixDialog.Close>
             {children}
           </Flex>

package/src/atoms/heading.tsx

@@ -7,21 +7,21 @@ import { useMemo } from 'react';
 export { Heading as RadixHeading } from '@radix-ui/themes';
 
 export type HeadingProps = RadixHeadingProps & {
-  variant?: 'subtitle1' | 'heading1' | 'heading2' | 'heading3';
+  variant?: 'subtitle1' | 'heading1' | 'heading2' | 'heading3' | 'heading4';
 };
 
 export function Heading(props: HeadingProps): React.ReactElement {
   const { size, children, variant, ...rest } = props;
   const radixSize = useMemo<RadixHeadingProps['size']>(() => {
     switch (variant) {
-      case 'subtitle1':
-        return '4';
       case 'heading1':
         return '7';
       case 'heading2':
         return '6';
       case 'heading3':
         return '5';
+      case 'heading4':
+        return '4';
       default:
         return size;
     }