Merge pull request #100 from chromaui/full-width-fix

fix max-width for full width container

README.md

@@ -9,15 +9,14 @@ https://tetra.chromatic.com
 ## Install
 
 ```console
-yarn add @chromaui/tetra
+yarn add @chromatic-com/tetra
 ```
 
 ## To Do
 
 - [ ] Replace fonts in Text by the new text helpers
 - [ ] Move icons to a new library and import it as primitive inside the Icon component
 
-
 ## Developing
 
 Watch and rebuild code with `tsup` and runs Storybook to preview your UI during development.

src/Container/Container.tsx

@@ -45,7 +45,7 @@ const FullWidthInner = styled.div`
 const FullWidthOuter = styled(BlockWithOptionsForContainer)`
   margin-left: auto;
   margin-right: auto;
-  max-width: 1800px;
+  max-width: 1440px;
 `;
 
 export const FullWidthContainer = ({

src/_docs/typography.mdx

@@ -13,7 +13,7 @@ The easiest way to display text is by using the `Text` component. It's a wrapper
 
 <Source
   dark
-  code={`import { Text } from '@chromaui/tetra';
+  code={`import { Text } from '@chromatic-com/tetra';
 
 // By default the Text component doesn't require any props
 
@@ -39,7 +39,7 @@ You can use our responsive object format to change the size of the text dependin
 
 <Source
   dark
-  code={`import { Text } from '@chromaui/tetra';
+  code={`import { Text } from '@chromatic-com/tetra';
 
 // Here, we are setting the size of the text to 16px on mobile,
 // 20px on tablet and 32px on desktop. Base is to tell what size
@@ -62,7 +62,7 @@ If you want more flexibility, you can use our style helpers to create your own t
 
 <Source
   dark
-  code={`import { typography } from '@chromaui/tetra';
+  code={`import { typography } from '@chromatic-com/tetra';
 
 const Heading = styled.h1\`
 \ \ \${typography.heading32}