Add doc on optimizing Picasso for bundle size

.storybook/stories/tutorials/optimizing-for-bundle-size/story/index.tsx

@@ -0,0 +1,42 @@
+import PicassoBook from '~/.storybook/components/PicassoBook'
+
+const page = PicassoBook.section('Tutorials').createPage(
+  'How to optimize for bundle size',
+  'Learn how to optimize Picasso usage for bundle size'
+)
+
+page.createChapter().addTextSection(`
+Picasso is a large library and it's not always necessary to import the whole thing.
+This tutorial will walk you through how to use Picasso in a way that optimizes for bundle size.
+`)
+
+page.createChapter('Avoiding compound components').addTextSection(`
+Picasso's components are built with composition in mind.
+This means that some of the components are compound components.
+Compound components are components that are grouped together and share a common context.
+Importing a compound component will import all of its children.
+
+For example, using the compound \`<Form.Input/>\` will import \`<Form/>\` and consequently all of it's children (\`<Form.Select/>\`, \`<Form.Checkbox/>\`, etc.), even if you don't use them.
+This is a even a greater problem for components that have many children, like \`<Form/>\`.
+For this reason, importing compound components should be avoided, instead import the children directly.
+
+Each child component of a compound component is exported as a named export, and for \`<Form/>\` an special \`<FormNonCompound/>\` component is also exported.
+This component is a wrapper around the Form component that doesn't import any of the children.
+Example of importing a single child component:
+
+\`\`\`js
+import { FormNonCompound as Form, Input } from '@toptal/picasso-forms'
+
+const Example = () => (
+  <Form>
+    <Input />
+  </Form>
+)
+\`\`\`
+
+For automating this process, you can provide a special codemod that should replace all \`Form\` compound components with their non-compound counterparts.
+To run the codemod, run the following command in your project:
+\`\`\`sh
+npx @toptal/picasso-codemod@latest v52.2.0/non-compound-forms
+\`\`\`
+`)

yarn.lock

@@ -15429,14 +15429,14 @@ json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1:
   resolved "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz"
   integrity sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==
 
-json5@1, json5@^1.0.1, json5@^2.1.1:
+json5@1, json5@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
   integrity sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==
   dependencies:
     minimist "^1.2.0"
 
-[email protected], json5@^2.1.0, json5@^2.1.2, json5@^2.2.0, json5@^2.2.2, json5@^2.2.3, json5@^2.x:
+[email protected], json5@^2.1.0, json5@^2.1.1, json5@^2.1.2, json5@^2.2.0, json5@^2.2.2, json5@^2.2.3, json5@^2.x:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==