fix: tree shaking + remove fonts

babel.config.js

@@ -1,19 +1,3 @@
 module.exports = {
-  presets: [
-    [
-      '@babel/preset-env',
-      {
-        targets: {
-          node: 'current',
-        },
-      },
-    ],
-    [
-      '@babel/preset-react',
-      {
-        runtime: 'automatic',
-      },
-    ],
-    '@babel/preset-typescript',
-  ],
+  plugins: ['@babel/plugin-transform-react-pure-annotations'],
 };

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>
+    <StyledAccordionContentWrapper size={size}>MUST NOT BE INCLUDED</StyledAccordionContentWrapper>
   </StyledAccordionContent>
-));;
-
+));

components/AriaTable/AriaTable.stories.tsx

@@ -15,11 +15,8 @@ import {
 import { Badge } from '../Badge';
 import { Button } from '../Button';
 import { Flex } from '../Flex';
-import { Box } from '../Box';
 import { UnstyledLink } from '../Link';
 import { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';
-import { Image } from '../Image';
-import { Text } from '../Text';
 
 const BaseTable = (props: TableProps): JSX.Element => <Table {...props} />;
 const TableForStory = modifyVariantsForStory<TableVariants, TableProps>(BaseTable);
@@ -527,32 +524,3 @@ export const Columns: ComponentStory<any> = ({ transform, ...args }) => (
     </TableForStory>
   </Flex>
 );
-
-const FlexIssue = () => (
-  <Flex align="center" justify="center">
-    <Image src="https://picsum.photos/38/38" />
-  </Flex>
-);
-
-export const VerticalAlignment: ComponentStory<any> = (args) => (
-  <TableForStory>
-    <Thead>
-      <Tr>
-        <Th>Flex issue column</Th>
-        <Th>Column</Th>
-      </Tr>
-    </Thead>
-    <Tbody>
-      <Tr>
-        <Td>
-          <FlexIssue />
-        </Td>
-        <Td>
-          <Flex align="center" justify="center">
-            <Text>Cell</Text>
-          </Flex>
-        </Td>
-      </Tr>
-    </Tbody>
-  </TableForStory>
-);

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/Button/Button.tsx

@@ -14,7 +14,8 @@ export const BUTTON_BASE_STYLES = {
   },
 };
 
-export const StyledButton = styled('button', BUTTON_BASE_STYLES, {
+export const StyledButton = styled('button', {
+  ...BUTTON_BASE_STYLES,
   // Reset
   all: 'unset',
   alignItems: 'center',

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>;