chore!: reduce bundle size

babel.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  plugins: ['@babel/plugin-transform-react-pure-annotations'],
   presets: [
     [
       '@babel/preset-env',

components/Accordion/Accordion.tsx

@@ -32,7 +32,7 @@ const StyledAccordionItem = styled(AccordionPrimitive.Item, {
     mt: 0,
   },
   boxShadow: '0 1px 0 0 $colors$divider',
-})
+});
 
 export const StyledAccordionHeader = styled(AccordionPrimitive.Header, {
   all: 'unset',
@@ -69,7 +69,7 @@ export const StyledAccordionTrigger = styled(AccordionPrimitive.Trigger, {
       cursor: 'pointer',
       '&::before': {
         backgroundColor: '$accordionHoverShadow',
-      }
+      },
     },
   },
   transition: 'opacity 200ms ease-out',
@@ -79,16 +79,16 @@ export const StyledAccordionTrigger = styled(AccordionPrimitive.Trigger, {
         py: '$2',
       },
       medium: {
-        py: '$3'
+        py: '$3',
       },
       large: {
         py: '$5',
-      }
-    }
+      },
+    },
   },
   defaultVariants: {
     size: 'small',
-  }
+  },
 });
 
 const StyledAccordionChevron = styled(ChevronRightIcon, {
@@ -108,7 +108,7 @@ const StyledAccordionContent = styled(AccordionPrimitive.Content, {
     animation: `${open} 200ms ease-out`,
   },
   '&[data-state="closed"]': {
-    animation: `${close} 200ms ease-out`
+    animation: `${close} 200ms ease-out`,
   },
 });
 
@@ -119,41 +119,47 @@ const StyledAccordionContentWrapper = styled('div', {
         py: '$2',
       },
       medium: {
-        py: '$3'
+        py: '$3',
       },
       large: {
         py: '$5',
-      }
-    }
+      },
+    },
   },
   defaultVariants: {
     size: 'small',
-  }
+  },
 });
 
 // EXPORTS
 export const AccordionRoot = StyledAccordionRoot;
 export const AccordionItem = StyledAccordionItem;
-export type AccordionTriggerProps = React.ComponentProps<typeof StyledAccordionTrigger> & VariantProps<typeof StyledAccordionTrigger> & {
-  children: React.ReactNode
-}
+export type AccordionTriggerProps = React.ComponentProps<typeof StyledAccordionTrigger> &
+  VariantProps<typeof StyledAccordionTrigger> & {
+    children: React.ReactNode;
+  };
 export const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof StyledAccordionTrigger>, AccordionTriggerProps>(({ children, ...props }, forwardedRef) => (
-    <StyledAccordionHeader>
-      <StyledAccordionTrigger ref={forwardedRef} {...props}>
-        <StyledAccordionChevron aria-hidden />
-        {children}
-      </StyledAccordionTrigger>
-    </StyledAccordionHeader>
-  ));
+  React.ElementRef<typeof StyledAccordionTrigger>,
+  AccordionTriggerProps
+>(({ children, ...props }, forwardedRef) => (
+  <StyledAccordionHeader>
+    <StyledAccordionTrigger ref={forwardedRef} {...props}>
+      <StyledAccordionChevron aria-hidden />
+      {children}
+    </StyledAccordionTrigger>
+  </StyledAccordionHeader>
+));
 
-export type AccordionContentProps = VariantProps<typeof StyledAccordionContent> & Pick<VariantProps<typeof StyledAccordionContentWrapper>, 'size'> & {
-  children: React.ReactNode
-  css?: CSS
-}
-export const AccordionContent = React.forwardRef<React.ElementRef<typeof StyledAccordionContent>, AccordionContentProps>(({ children, size, ...props }, forwardedRef) => (
+export type AccordionContentProps = VariantProps<typeof StyledAccordionContent> &
+  Pick<VariantProps<typeof StyledAccordionContentWrapper>, 'size'> & {
+    children: React.ReactNode;
+    css?: CSS;
+  };
+export const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof StyledAccordionContent>,
+  AccordionContentProps
+>(({ children, size, ...props }, forwardedRef) => (
   <StyledAccordionContent {...props} ref={forwardedRef}>
     <StyledAccordionContentWrapper size={size}>{children}</StyledAccordionContentWrapper>
   </StyledAccordionContent>
-));;
-
+));

components/Button/Button.themes.ts

@@ -44,7 +44,6 @@ export namespace Theme {
     buttonPrimaryText: '$deepBlue2',
     buttonPrimaryFocusBorder: primaryColor.helpers.pickScale(12, { alpha: true }),
     buttonPrimaryGhostHoverText: tinycolor(primaryColor.value).lighten(10).toHslString(),
-    buttonPrimaryGhostText: '$primary',
 
     buttonSecondaryBg: 'transparent',
     buttonSecondaryText: tinycolor('white').setAlpha(0.74).toHslString(),

components/FaencyProvider.tsx

@@ -1,93 +1,4 @@
 import React from 'react';
 import { IdProvider } from '@radix-ui/react-id';
-import { globalCss } from '../stitches.config';
 
-import RubikLightWoff2 from '../assets/fonts/rubik/Rubik-Light.woff2';
-import RubikWoff2 from '../assets/fonts/rubik/Rubik-Regular.woff2';
-import RubikMediumWoff2 from '../assets/fonts/rubik/Rubik-Medium.woff2';
-import RubikSemiBoldWoff2 from '../assets/fonts/rubik/Rubik-SemiBold.woff2';
-import RubikBoldWoff2 from '../assets/fonts/rubik/Rubik-Bold.woff2';
-
-import RubikLightItalicWoff2 from '../assets/fonts/rubik/Rubik-LightItalic.woff2';
-import RubikItalicWoff2 from '../assets/fonts/rubik/Rubik-Italic.woff2';
-import RubikMediumItalicWoff2 from '../assets/fonts/rubik/Rubik-MediumItalic.woff2';
-import RubikSemiBoldItalicWoff2 from '../assets/fonts/rubik/Rubik-SemiBoldItalic.woff2';
-import RubikBoldItalicWoff2 from '../assets/fonts/rubik/Rubik-BoldItalic.woff2';
-
-const globalStyles = globalCss({
-  '@font-face': [
-    {
-      fontFamily: 'Rubik',
-      fontWeight: 300,
-      fontDisplay: 'swap',
-      src: `local('Rubik-Light'), url(${RubikLightWoff2} format('woff2'))`,
-    },
-    {
-      fontFamily: 'Rubik',
-      fontStyle: 'normal',
-      fontWeight: 400,
-      fontDisplay: 'swap',
-      src: `local('Rubik-Regular'), url(${RubikWoff2}) format('woff2')`,
-    },
-    {
-      fontFamily: 'Rubik',
-      fontWeight: 500,
-      fontDisplay: 'swap',
-      src: `local('Rubik-Medium'), url(${RubikMediumWoff2}) format('woff2')`,
-    },
-    {
-      fontFamily: 'Rubik',
-      fontWeight: 600,
-      fontDisplay: 'swap',
-      src: `local('Rubik-SemiBold'), url(${RubikSemiBoldWoff2}) format('woff2')`,
-    },
-    {
-      fontFamily: 'Rubik',
-      fontWeight: 700,
-      fontDisplay: 'swap',
-      src: `local('Rubik-Bold'), url(${RubikBoldWoff2}) format('woff2')`,
-    },
-    //italic
-    {
-      fontFamily: 'Rubik',
-      fontStyle: 'italic',
-      fontWeight: 300,
-      fontDisplay: 'swap',
-      src: `local('Rubik-Light'), url(${RubikLightItalicWoff2} format('woff2'))`,
-    },
-    {
-      fontFamily: 'Rubik',
-      fontStyle: 'italic',
-      fontWeight: 400,
-      fontDisplay: 'swap',
-      src: `local('Rubik-Regular'), url(${RubikItalicWoff2}) format('woff2')`,
-    },
-    {
-      fontFamily: 'Rubik',
-      fontStyle: 'italic',
-      fontWeight: 500,
-      fontDisplay: 'swap',
-      src: `local('Rubik-Medium'), url(${RubikMediumItalicWoff2}) format('woff2')`,
-    },
-    {
-      fontFamily: 'Rubik',
-      fontStyle: 'italic',
-      fontWeight: 600,
-      fontDisplay: 'swap',
-      src: `local('Rubik-SemiBold'), url(${RubikSemiBoldItalicWoff2}) format('woff2')`,
-    },
-    {
-      fontFamily: 'Rubik',
-      fontStyle: 'italic',
-      fontWeight: 700,
-      fontDisplay: 'swap',
-      src: `local('Rubik-Bold'), url(${RubikBoldItalicWoff2}) format('woff2')`,
-    },
-  ],
-});
-
-export const FaencyProvider: React.FC = ({ children }) => {
-  globalStyles();
-
-  return <IdProvider>{children}</IdProvider>;
-};
+export const FaencyProvider: React.FC = ({ children }) => <IdProvider>{children}</IdProvider>;

components/Skeleton/Skeleton.stories.tsx

@@ -27,31 +27,32 @@ export const Square: ComponentStory<typeof SkeletonForStory> = () => (
     <Skeleton variant="square" css={{ size: '$6' }} />
     <Skeleton variant="square" css={{ size: '$9' }} />
   </Flex>
-);
+)
+
 
 export const Circle: ComponentStory<typeof SkeletonForStory> = () => (
   <Flex align="center" direction="row" gap="3">
     <Skeleton variant="circle" css={{ size: '$3' }} />
     <Skeleton variant="circle" css={{ size: '$6' }} />
     <Skeleton variant="circle" css={{ size: '$9' }} />
   </Flex>
-);
+)
 
 export const Badge: ComponentStory<typeof SkeletonForStory> = () => (
   <Flex align="center" direction="row" gap="3">
     <Skeleton variant="badge" css={{ height: '$5', width: '$6' }} />
     <Skeleton variant="badge" css={{ height: '$5', width: '$8' }} />
     <Skeleton variant="badge" css={{ height: '$5', width: '$10' }} />
   </Flex>
-);
+)
 
 export const Button: ComponentStory<typeof SkeletonForStory> = () => (
   <Flex align="center" direction="row" gap="3">
     <Skeleton variant="button" css={{ height: '$5', width: '$6' }} />
     <Skeleton variant="button" css={{ height: '$5', width: '$8' }} />
     <Skeleton variant="button" css={{ height: '$5', width: '$10' }} />
   </Flex>
-);
+)
 
 export const Text: ComponentStory<typeof SkeletonForStory> = () => (
   <Flex align="center" direction="row" gap="3">
@@ -79,7 +80,7 @@ export const Typographies: ComponentStory<typeof SkeletonForStory> = () => (
   </Flex>
 );
 
-const AVATAR_SIZES = ['1', '2', '3', '4', '5', '6'] as const;
+const AVATAR_SIZES = ['1', '2', '3', '4', '5', '6'] as const
 
 export const Avatars: ComponentStory<typeof SkeletonForStory> = () => (
   <Flex gap="3" align="center">
@@ -108,7 +109,7 @@ export const ButtonInferred: ComponentStory<typeof SkeletonForStory> = () => (
       <FaencyButton css={{ width: 120 }} size="large" />
     </Skeleton>
   </Flex>
-);
+)
 
 export const BadgeInferred: ComponentStory<typeof SkeletonForStory> = () => (
   <Flex gap="3" direction="column">
@@ -119,7 +120,7 @@ export const BadgeInferred: ComponentStory<typeof SkeletonForStory> = () => (
       <FaencyBadge css={{ width: 140 }} size="large" />
     </Skeleton>
   </Flex>
-);
+)
 
 export const BubbleInferred: ComponentStory<typeof SkeletonForStory> = () => (
   <Flex gap="3" direction="column">

components/Skeleton/Skeleton.tsx

@@ -46,9 +46,11 @@ export const Skeleton = styled('div', {
       },
       badge: {
         borderRadius: '$pill',
+        display: 'inline-flex',
       },
       button: {
         borderRadius: '$3',
+        display: 'inline-flex',
       },
       text: {
         '&:empty:before': {