From e6d22ce88e3e3743c5ce22c897082f937b3aa0c0 Mon Sep 17 00:00:00 2001
From: Jonathan Zempel <jzempel@gmail.com>
Date: Tue, 8 Feb 2022 11:32:28 -0500
Subject: [PATCH 1/7] Update storybook config

---
 .storybook/main.js                 | 18 ++++++++----
 .storybook/manager.js              |  1 +
 .storybook/preview.js              | 23 ++--------------
 .storybook/tsconfig.storybook.json |  1 -
 package.json                       |  2 --
 yarn.lock                          | 44 +-----------------------------
 6 files changed, 16 insertions(+), 73 deletions(-)

diff --git a/.storybook/main.js b/.storybook/main.js
index c888dad48..72ddf00de 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -5,14 +5,20 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
+const options = {
+  backgrounds: false,
+  docs: process.env.BROWSER ? process.env.BROWSER.toUpperCase() !== 'IE11' : true,
+  measure: false,
+  outline: false,
+  viewport: false
+};
+
 module.exports = {
-  stories: ['../packages/**/*.stories.@(tsx|mdx)'],
-  addons: [
-    { name: '@storybook/addon-essentials', options: { viewport: false } },
-    '@storybook/addon-a11y',
-    '@storybook/addon-storysource',
-    '@storybook/addon-postcss'
+  stories: [
+    '../packages/*/demo/**/*.stories.@(js|jsx|ts|tsx|mdx)',
+    '../packages/*/*.stories.@(tsx|mdx)'
   ],
+  addons: [{ name: '@storybook/addon-essentials', options }, '@storybook/addon-a11y'],
   core: {
     builder: 'webpack5'
   },
diff --git a/.storybook/manager.js b/.storybook/manager.js
index 8832b5c8e..7440f0348 100644
--- a/.storybook/manager.js
+++ b/.storybook/manager.js
@@ -10,6 +10,7 @@ import { create } from '@storybook/theming';
 import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 addons.setConfig({
+  panelPosition: 'right',
   theme: create({
     brandTitle: 'Zendesk Garden React Containers',
     brandUrl: 'https://github.com/zendeskgarden/react-containers',
diff --git a/.storybook/preview.js b/.storybook/preview.js
index ace0ac8c6..df32806e3 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -9,26 +9,6 @@ import React from 'react';
 import { create } from '@storybook/theming/create';
 import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
-/**
- * Center "Docs" previews
- * See: https://github.com/storybookjs/storybook/issues/7227#issuecomment-680332161
- */
-export const decorators = [
-  Story => (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        overflow: 'auto'
-      }}
-    >
-      <div style={{ margin: 'auto', maxHeight: '100%' }}>
-        <Story />
-      </div>
-    </div>
-  )
-];
-
 export const parameters = {
   backgrounds: {
     default: DEFAULT_THEME.colors.base,
@@ -38,5 +18,6 @@ export const parameters = {
     theme: create({
       base: DEFAULT_THEME.colors.base
     })
-  }
+  },
+  layout: 'centered'
 };
diff --git a/.storybook/tsconfig.storybook.json b/.storybook/tsconfig.storybook.json
index 266f8c9ff..9a88e5e4c 100644
--- a/.storybook/tsconfig.storybook.json
+++ b/.storybook/tsconfig.storybook.json
@@ -1,4 +1,3 @@
-
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
diff --git a/package.json b/package.json
index 7e40aab76..4639cb6b2 100644
--- a/package.json
+++ b/package.json
@@ -39,8 +39,6 @@
     "@rollup/plugin-replace": "3.0.1",
     "@storybook/addon-a11y": "6.4.13",
     "@storybook/addon-essentials": "6.4.13",
-    "@storybook/addon-postcss": "2.0.0",
-    "@storybook/addon-storysource": "6.4.13",
     "@storybook/builder-webpack5": "6.4.13",
     "@storybook/manager-webpack5": "6.4.13",
     "@storybook/react": "6.4.13",
diff --git a/yarn.lock b/yarn.lock
index 059880c5a..afc7a5dbe 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4335,37 +4335,6 @@
     regenerator-runtime "^0.13.7"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-postcss@2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-postcss/-/addon-postcss-2.0.0.tgz#ec61cb9bb2662f408072b35c466c7df801c28498"
-  integrity sha512-Nt82A7e9zJH4+A+VzLKKswUfru+T6FJTakj4dccP0i8DSn7a0CkzRPrLuZBq8tg4voV6gD74bcDf3gViCVBGtA==
-  dependencies:
-    "@storybook/node-logger" "^6.1.14"
-    css-loader "^3.6.0"
-    postcss "^7.0.35"
-    postcss-loader "^4.2.0"
-    style-loader "^1.3.0"
-
-"@storybook/addon-storysource@6.4.13":
-  version "6.4.13"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-storysource/-/addon-storysource-6.4.13.tgz#248b3d1d70b79cd64bf600feaeb1712186e9bec9"
-  integrity sha512-fpKUCqk3I0Gk/1DduasqS19zvAfTnGn7dfmOtkqzPUEAjbeKcnQDhRBOYr7qykdSjk76HD2+6jrsvcWwaeWFHA==
-  dependencies:
-    "@storybook/addons" "6.4.13"
-    "@storybook/api" "6.4.13"
-    "@storybook/client-logger" "6.4.13"
-    "@storybook/components" "6.4.13"
-    "@storybook/router" "6.4.13"
-    "@storybook/source-loader" "6.4.13"
-    "@storybook/theming" "6.4.13"
-    core-js "^3.8.2"
-    estraverse "^5.2.0"
-    loader-utils "^2.0.0"
-    prettier "<=2.3.0"
-    prop-types "^15.7.2"
-    react-syntax-highlighter "^13.5.3"
-    regenerator-runtime "^0.13.7"
-
 "@storybook/addon-toolbars@6.4.13":
   version "6.4.13"
   resolved "https://registry.yarnpkg.com/@storybook/addon-toolbars/-/addon-toolbars-6.4.13.tgz#c28fb72897709f689cda3675d3c0a4c26a6fe20d"
@@ -4934,17 +4903,6 @@
     npmlog "^5.0.1"
     pretty-hrtime "^1.0.3"
 
-"@storybook/node-logger@^6.1.14":
-  version "6.3.12"
-  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-6.3.12.tgz#a67cfbe266d2692f317914ef583721627498df19"
-  integrity sha512-iktOem/Ls2+dsZY9PhPeC6T1QhX/y7OInP88neLsqEPEbB2UXca3Ydv7OZBhBVbvN25W45b05MRzbtNUxYLNRw==
-  dependencies:
-    "@types/npmlog" "^4.1.2"
-    chalk "^4.1.0"
-    core-js "^3.8.2"
-    npmlog "^4.1.2"
-    pretty-hrtime "^1.0.3"
-
 "@storybook/postinstall@6.4.13":
   version "6.4.13"
   resolved "https://registry.yarnpkg.com/@storybook/postinstall/-/postinstall-6.4.13.tgz#508f73e0a2f07ba994554d43daad0f6b49945ffa"
@@ -17234,7 +17192,7 @@ postcss-values-parser@^2.0.1:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
-postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.35, postcss@^7.0.36, postcss@^7.0.5, postcss@^7.0.6:
+postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.36, postcss@^7.0.5, postcss@^7.0.6:
   version "7.0.36"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.36.tgz#056f8cffa939662a8f5905950c07d5285644dfcb"
   integrity sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==

From 49452713a56ecd7cd680492572d3c50ca82aa4ce Mon Sep 17 00:00:00 2001
From: Jonathan Zempel <jzempel@gmail.com>
Date: Tue, 8 Feb 2022 15:41:19 -0500
Subject: [PATCH 2/7] Update storybook config

---
 .gitignore                         |  1 -
 .storybook/babel.config.js         | 38 +++++++++++++++++++++++
 .storybook/main.js                 | 17 +++++++++++
 .storybook/preview.js              |  6 +++-
 .storybook/tsconfig.storybook.json |  6 ----
 .storybook/webpack.config.js       | 49 ------------------------------
 package.json                       |  3 +-
 yarn.lock                          | 47 +++++++++++++++++++++++++++-
 8 files changed, 108 insertions(+), 59 deletions(-)
 create mode 100644 .storybook/babel.config.js
 delete mode 100644 .storybook/tsconfig.storybook.json
 delete mode 100644 .storybook/webpack.config.js

diff --git a/.gitignore b/.gitignore
index 487e22d3d..e3dca63e8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,5 @@
 # General ignores
 .env
-demo
 node_modules
 utils/storybook/coverage
 *.log
diff --git a/.storybook/babel.config.js b/.storybook/babel.config.js
new file mode 100644
index 000000000..8ad5610f3
--- /dev/null
+++ b/.storybook/babel.config.js
@@ -0,0 +1,38 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+const path = require('path');
+const { readdirSync } = require('fs');
+const { getStorybookBabelConfig } = require('@storybook/core-common');
+
+const config = getStorybookBabelConfig();
+
+const PACKAGE_NAMES = readdirSync(path.resolve(__dirname, '../packages')).filter(
+  name => name !== '.template'
+);
+
+module.exports = {
+  sourceType: 'unambiguous',
+  presets: [...config.presets],
+  plugins: [
+    ...config.plugins,
+    'babel-plugin-styled-components',
+    [
+      'module-resolver',
+      {
+        root: ['../'],
+        alias: PACKAGE_NAMES.reduce((previousValue, packageName) => {
+          previousValue[
+            `@zendeskgarden/container-${packageName}`
+          ] = `./packages/${packageName}/src`;
+
+          return previousValue;
+        }, {})
+      }
+    ]
+  ]
+};
diff --git a/.storybook/main.js b/.storybook/main.js
index 72ddf00de..33a9d8526 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -5,6 +5,10 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
+const path = require('path');
+const { readdirSync } = require('fs');
+const { DefinePlugin } = require('webpack');
+
 const options = {
   backgrounds: false,
   docs: process.env.BROWSER ? process.env.BROWSER.toUpperCase() !== 'IE11' : true,
@@ -13,6 +17,10 @@ const options = {
   viewport: false
 };
 
+const PACKAGE_NAMES = readdirSync(path.resolve(__dirname, '../packages')).filter(
+  name => name !== '.template'
+);
+
 module.exports = {
   stories: [
     '../packages/*/demo/**/*.stories.@(js|jsx|ts|tsx|mdx)',
@@ -27,6 +35,15 @@ module.exports = {
     // to support IE11, we need to ensure the manager UI bundle is ES5 compatible
     config.target = ['web', 'es5'];
 
+    return config;
+  },
+  webpackFinal: config => {
+    config.plugins.push(
+      new DefinePlugin({
+        PACKAGE_VERSION: JSON.stringify('storybook')
+      })
+    );
+
     return config;
   }
 };
diff --git a/.storybook/preview.js b/.storybook/preview.js
index df32806e3..b00de8b0c 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -5,15 +5,19 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React from 'react';
 import { create } from '@storybook/theming/create';
 import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
   backgrounds: {
     default: DEFAULT_THEME.colors.base,
     grid: { disable: true }
   },
+  controls: {
+    hideNoControlsWarning: true,
+    sort: 'alpha'
+  },
   docs: {
     theme: create({
       base: DEFAULT_THEME.colors.base
diff --git a/.storybook/tsconfig.storybook.json b/.storybook/tsconfig.storybook.json
deleted file mode 100644
index 9a88e5e4c..000000000
--- a/.storybook/tsconfig.storybook.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "noEmit": false
-  }
-}
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
deleted file mode 100644
index c49a290a2..000000000
--- a/.storybook/webpack.config.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-
-const webpack = require('webpack');
-const path = require('path');
-const babelOptions = require(path.resolve(__dirname, '../babel.config.js'));
-
-module.exports = ({ config }) => {
-  config.resolve.extensions.push('.ts', '.tsx');
-
-  config.module.rules.push({
-    test: /stories.tsx$/u,
-    loader: require.resolve('@storybook/source-loader'),
-    enforce: 'pre'
-  });
-
-  config.module.rules.push({
-    test: /\.tsx?$/u,
-    exclude: /node_modules/u,
-    use: [
-      {
-        loader: 'babel-loader',
-        options: { ...babelOptions, envName: 'production' }
-      },
-      {
-        loader: 'ts-loader',
-        options: {
-          configFile: path.resolve(__dirname, 'tsconfig.storybook.json')
-        }
-      }
-    ]
-  });
-
-  config.plugins.push(
-    new webpack.DefinePlugin({
-      PACKAGE_VERSION: JSON.stringify('storybook')
-    })
-  );
-
-  // TODO: remove after June 15, 2022 for IE 11 EOL
-  // to support IE11, we need to ensure the preview iframe bundle is ES5 compatible
-  config.target = ['web', 'es5'];
-
-  return config;
-};
diff --git a/package.json b/package.json
index 4639cb6b2..829ab22a1 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "lint:md": "markdownlint README.md packages/*/src/**/*.md packages/*/src/*.md packages/*/README.md",
     "new": "utils/scripts/new.js",
     "prepare": "yarn build",
-    "start": "start-storybook -p 6006",
+    "start": "start-storybook --no-version-updates -p 6006",
     "start:demo": "yarn build:demo && live-server demo",
     "tag": "lerna version --conventional-commits --force-git-tag",
     "test": "yarn test:all --watch",
@@ -63,6 +63,7 @@
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "27.4.6",
     "babel-loader": "8.2.3",
+    "babel-plugin-module-resolver": "4.1.0",
     "babel-plugin-styled-components": "2.0.2",
     "commander": "8.3.0",
     "core-js": "3.20.3",
diff --git a/yarn.lock b/yarn.lock
index afc7a5dbe..99a277ec1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7244,6 +7244,17 @@ babel-plugin-macros@^3.0.1:
     cosmiconfig "^7.0.0"
     resolve "^1.19.0"
 
+babel-plugin-module-resolver@4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-module-resolver/-/babel-plugin-module-resolver-4.1.0.tgz#22a4f32f7441727ec1fbf4967b863e1e3e9f33e2"
+  integrity sha512-MlX10UDheRr3lb3P0WcaIdtCSRlxdQsB1sBqL7W0raF070bGl1HQQq5K3T2vf2XAYie+ww+5AKC/WrkjRO2knA==
+  dependencies:
+    find-babel-config "^1.2.0"
+    glob "^7.1.6"
+    pkg-up "^3.1.0"
+    reselect "^4.0.0"
+    resolve "^1.13.1"
+
 babel-plugin-named-asset-import@^0.3.1:
   version "0.3.4"
   resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.4.tgz#4a8fc30e9a3e2b1f5ed36883386ab2d84e1089bd"
@@ -10957,6 +10968,14 @@ finalhandler@1.1.2, finalhandler@~1.1.2:
     statuses "~1.5.0"
     unpipe "~1.0.0"
 
+find-babel-config@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/find-babel-config/-/find-babel-config-1.2.0.tgz#a9b7b317eb5b9860cda9d54740a8c8337a2283a2"
+  integrity sha512-jB2CHJeqy6a820ssiqwrKMeyC6nNdmrcgkKWJWmpoxpE8RKciYJXCcXRq1h2AzCo5I5BJeN2tkGEO3hLTuePRA==
+  dependencies:
+    json5 "^0.5.1"
+    path-exists "^3.0.0"
+
 find-cache-dir@^2.0.0, find-cache-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-2.1.0.tgz#8d0f94cd13fe43c6c7c261a0d86115ca918c05f7"
@@ -12816,7 +12835,7 @@ is-core-module@^2.2.0:
   dependencies:
     has "^1.0.3"
 
-is-core-module@^2.8.0:
+is-core-module@^2.8.0, is-core-module@^2.8.1:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.1.tgz#f59fdfca701d5879d0a6b100a40aa1560ce27211"
   integrity sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==
@@ -14042,6 +14061,11 @@ json5@2.x, json5@^2.1.2, json5@^2.1.3:
   dependencies:
     minimist "^1.2.5"
 
+json5@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
+  integrity sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=
+
 json5@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
@@ -17062,6 +17086,13 @@ pkg-dir@^4.1.0, pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
+pkg-up@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-3.1.0.tgz#100ec235cc150e4fd42519412596a28512a0def5"
+  integrity sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==
+  dependencies:
+    find-up "^3.0.0"
+
 pluralize@8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-8.0.0.tgz#1a6fa16a38d12a1901e0320fa017051c539ce3b1"
@@ -18324,6 +18355,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
+reselect@^4.0.0:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.5.tgz#852c361247198da6756d07d9296c2b51eddb79f6"
+  integrity sha512-uVdlz8J7OO+ASpBYoz1Zypgx0KasCY20H+N8JD13oUMtPvSHQuscrHop4KbXrbsBcdB9Ds7lVK7eRkBIfO43vQ==
+
 resolve-cwd@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
@@ -18368,6 +18404,15 @@ resolve@^1.1.6:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
+resolve@^1.13.1:
+  version "1.22.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
+  integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
+  dependencies:
+    is-core-module "^2.8.1"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 resolve@^2.0.0-next.1, resolve@^2.0.0-next.3:
   version "2.0.0-next.3"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.3.tgz#d41016293d4a8586a39ca5d9b5f15cbea1f55e46"

From ee135278ff4d947b4441d7ce28d73ff5ebc297f9 Mon Sep 17 00:00:00 2001
From: Jonathan Zempel <jzempel@gmail.com>
Date: Thu, 10 Feb 2022 10:15:21 -0500
Subject: [PATCH 3/7] Update storybook config

---
 .gitignore                    |   3 +
 .storybook/index.css          |   3 +
 .storybook/main.js            |  18 ++-
 .storybook/preview-head.html  |   1 -
 .storybook/preview.js         |  21 ++-
 .storybook/tailwind.config.js |  15 ++
 package.json                  |   5 +
 yarn.lock                     | 289 ++++++++++++++++++++++++++++++++--
 8 files changed, 338 insertions(+), 17 deletions(-)
 create mode 100644 .storybook/index.css
 delete mode 100644 .storybook/preview-head.html
 create mode 100644 .storybook/tailwind.config.js

diff --git a/.gitignore b/.gitignore
index e3dca63e8..d249e1c34 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,3 +7,6 @@ utils/storybook/coverage
 # Package specific
 packages/**/dist
 package-lock.json
+
+# Demo specific
+demo/**/*
diff --git a/.storybook/index.css b/.storybook/index.css
new file mode 100644
index 000000000..b5c61c956
--- /dev/null
+++ b/.storybook/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/.storybook/main.js b/.storybook/main.js
index 33a9d8526..f00000f0c 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -8,6 +8,8 @@
 const path = require('path');
 const { readdirSync } = require('fs');
 const { DefinePlugin } = require('webpack');
+const tailwindcss = require('tailwindcss');
+const autoprefixer = require('autoprefixer');
 
 const options = {
   backgrounds: false,
@@ -26,7 +28,21 @@ module.exports = {
     '../packages/*/demo/**/*.stories.@(js|jsx|ts|tsx|mdx)',
     '../packages/*/*.stories.@(tsx|mdx)'
   ],
-  addons: [{ name: '@storybook/addon-essentials', options }, '@storybook/addon-a11y'],
+  addons: [
+    { name: '@storybook/addon-essentials', options },
+    {
+      name: '@storybook/addon-postcss',
+      options: {
+        postcssLoaderOptions: {
+          implementation: require('postcss'),
+          postcssOptions: {
+            plugins: [tailwindcss(path.resolve(__dirname, 'tailwind.config.js')), autoprefixer()]
+          }
+        }
+      }
+    },
+    '@storybook/addon-a11y'
+  ],
   core: {
     builder: 'webpack5'
   },
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
deleted file mode 100644
index d1f38ccef..000000000
--- a/.storybook/preview-head.html
+++ /dev/null
@@ -1 +0,0 @@
-<link href="https://unpkg.com/@zendeskgarden/css-bedrock/dist/index.css" rel="stylesheet" />
diff --git a/.storybook/preview.js b/.storybook/preview.js
index b00de8b0c..3a5f031fb 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -5,8 +5,12 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
+import React from 'react';
+import { createGlobalStyle } from 'styled-components';
 import { create } from '@storybook/theming/create';
-import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+
+import './index.css';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
@@ -25,3 +29,18 @@ export const parameters = {
   },
   layout: 'centered'
 };
+
+const GlobalStyle = createGlobalStyle`
+  :focus {
+    outline-color: ${p => getColor('primaryHue', 600, p.theme)};
+  }
+`;
+
+export const decorators = [
+  Story => (
+    <>
+      <GlobalStyle />
+      <Story />
+    </>
+  )
+];
diff --git a/.storybook/tailwind.config.js b/.storybook/tailwind.config.js
new file mode 100644
index 000000000..4cbb5dd69
--- /dev/null
+++ b/.storybook/tailwind.config.js
@@ -0,0 +1,15 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+const path = require('path');
+const gardenTailwindCss = require('@zendeskgarden/tailwindcss');
+
+module.exports = {
+  content: [`${path.resolve(__dirname, '../packages')}/*/demo/**/*.{mdx,tsx}`],
+  plugins: [gardenTailwindCss],
+  safelist: process.env.NODE_ENV === 'development' ? [{ pattern: /.*/ }] : []
+};
diff --git a/package.json b/package.json
index 829ab22a1..5b0f51e85 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "@rollup/plugin-replace": "3.0.1",
     "@storybook/addon-a11y": "6.4.13",
     "@storybook/addon-essentials": "6.4.13",
+    "@storybook/addon-postcss": "2.0.0",
     "@storybook/builder-webpack5": "6.4.13",
     "@storybook/manager-webpack5": "6.4.13",
     "@storybook/react": "6.4.13",
@@ -59,7 +60,9 @@
     "@zendeskgarden/eslint-config": "27.0.0",
     "@zendeskgarden/react-theming": "8.47.2",
     "@zendeskgarden/scripts": "1.4.0",
+    "@zendeskgarden/tailwindcss": "3.0.1",
     "acorn-jsx": "5.3.2",
+    "autoprefixer": "10.4.2",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "27.4.6",
     "babel-loader": "8.2.3",
@@ -86,6 +89,7 @@
     "markdownlint-cli": "0.30.0",
     "ora": "5.4.1",
     "popper.js": "1.16.1",
+    "postcss": "8.4.6",
     "prettier": "2.5.1",
     "prettier-package-json": "2.6.0",
     "react": "17.0.2",
@@ -100,6 +104,7 @@
     "rollup-plugin-size-snapshot": "0.12.0",
     "rollup-plugin-typescript2": "0.31.1",
     "styled-components": "5.3.3",
+    "tailwindcss": "3.0.19",
     "ts-jest": "27.1.3",
     "ts-loader": "8.3.0",
     "typescript": "4.5.4",
diff --git a/yarn.lock b/yarn.lock
index 99a277ec1..f3d91c75f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1932,6 +1932,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.16.7":
+  version "7.17.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.2.tgz#66f68591605e59da47523c631416b18508779941"
+  integrity sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.12.7", "@babel/template@^7.16.0", "@babel/template@^7.3.3":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.0.tgz#d16a35ebf4cd74e202083356fab21dd89363ddd6"
@@ -4335,6 +4342,17 @@
     regenerator-runtime "^0.13.7"
     ts-dedent "^2.0.0"
 
+"@storybook/addon-postcss@2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-postcss/-/addon-postcss-2.0.0.tgz#ec61cb9bb2662f408072b35c466c7df801c28498"
+  integrity sha512-Nt82A7e9zJH4+A+VzLKKswUfru+T6FJTakj4dccP0i8DSn7a0CkzRPrLuZBq8tg4voV6gD74bcDf3gViCVBGtA==
+  dependencies:
+    "@storybook/node-logger" "^6.1.14"
+    css-loader "^3.6.0"
+    postcss "^7.0.35"
+    postcss-loader "^4.2.0"
+    style-loader "^1.3.0"
+
 "@storybook/addon-toolbars@6.4.13":
   version "6.4.13"
   resolved "https://registry.yarnpkg.com/@storybook/addon-toolbars/-/addon-toolbars-6.4.13.tgz#c28fb72897709f689cda3675d3c0a4c26a6fe20d"
@@ -4903,6 +4921,17 @@
     npmlog "^5.0.1"
     pretty-hrtime "^1.0.3"
 
+"@storybook/node-logger@^6.1.14":
+  version "6.4.18"
+  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-6.4.18.tgz#8759761ba7526b2fa03a1a08fe82d6d892d7a072"
+  integrity sha512-wY1qt4XOXtJJdQ+DrO3RijtiwVFqWuWetvCY4RV4lge5yk0FP5Q+MTpmjazYodAvGPUIP0LK9bvEDLwXa0JUfw==
+  dependencies:
+    "@types/npmlog" "^4.1.2"
+    chalk "^4.1.0"
+    core-js "^3.8.2"
+    npmlog "^5.0.1"
+    pretty-hrtime "^1.0.3"
+
 "@storybook/postinstall@6.4.13":
   version "6.4.13"
   resolved "https://registry.yarnpkg.com/@storybook/postinstall/-/postinstall-6.4.13.tgz#508f73e0a2f07ba994554d43daad0f6b49945ffa"
@@ -6129,6 +6158,19 @@
     "@babel/runtime" "^7.8.4"
     "@reach/auto-id" "^0.16.0"
 
+"@zendeskgarden/css-bedrock@^9.0.0":
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/@zendeskgarden/css-bedrock/-/css-bedrock-9.0.0.tgz#7bc9e54b0d847e18f4e33e08a5a9961cdad360f6"
+  integrity sha512-dHwlDJ5v4ijX3yCr4Z97UGaRYFrD3AeWv+HmFcr4QQRlOE4prkIvahXxR6eD4QhxwEs91FtWpJxvCsZAJGHuRA==
+  dependencies:
+    "@zendeskgarden/css-variables" "^6.4.5"
+    modern-normalize "^1.0.0"
+
+"@zendeskgarden/css-variables@^6.4.5":
+  version "6.4.5"
+  resolved "https://registry.yarnpkg.com/@zendeskgarden/css-variables/-/css-variables-6.4.5.tgz#b51a50046f42a11b8d1bfec46e100b02fd6fc1d9"
+  integrity sha512-vX7vDJVQoyYFUshYXXX5QE2fL9M6K2bnxTeB2IVyEIaGRYEi20xjoY6cuO1uAQ7RaIRGCSyZFKgWW+/IrlQMKg==
+
 "@zendeskgarden/eslint-config@27.0.0":
   version "27.0.0"
   resolved "https://registry.yarnpkg.com/@zendeskgarden/eslint-config/-/eslint-config-27.0.0.tgz#bc635774f0f105c7b51ac905c1c740629c83cac8"
@@ -6144,6 +6186,16 @@
     polished "^4.0.0"
     prop-types "^15.5.7"
 
+"@zendeskgarden/react-theming@^8.35.0":
+  version "8.48.1"
+  resolved "https://registry.yarnpkg.com/@zendeskgarden/react-theming/-/react-theming-8.48.1.tgz#8f78a223227f214c39bd9f3904cdf0d7267b7c3b"
+  integrity sha512-SJsDgQiva8TFNGtbtzZ5TctTDFNmELa8ju/WjGCkivE9uV0i3ejbL4Zmh2VLrQeoSCRTkISR3V6logAOynYWjA==
+  dependencies:
+    "@zendeskgarden/container-focusvisible" "^0.4.6"
+    "@zendeskgarden/container-utilities" "^0.7.0"
+    polished "^4.0.0"
+    prop-types "^15.5.7"
+
 "@zendeskgarden/scripts@1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@zendeskgarden/scripts/-/scripts-1.4.0.tgz#b0b2f1e3a8c23ffa44e05132fcb8a5047ceef092"
@@ -6174,6 +6226,19 @@
     react-docgen-typescript "2.1.1"
     typescript "4.4.4"
 
+"@zendeskgarden/tailwindcss@3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@zendeskgarden/tailwindcss/-/tailwindcss-3.0.1.tgz#594fa83b8c4b40b0c4b92c3a554aa69b5c0c7c1b"
+  integrity sha512-tZrd4Eor+AZBNbOhHKyYx3xw/bU5cx8+YChIuNctkyUt28bmRBlvbMwOPQaI6Dc3MbHheeuMd1eiPIfqJaYRLQ==
+  dependencies:
+    "@zendeskgarden/css-bedrock" "^9.0.0"
+    "@zendeskgarden/react-theming" "^8.35.0"
+    polished "^4.1.1"
+    postcss "^8.2.8"
+    react "^17.0.2"
+    react-dom "^17.0.2"
+    styled-components "^5.2.1"
+
 JSONStream@^1.0.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.5.tgz#3208c1f08d3a4d99261ab64f92302bc15e111ca0"
@@ -6225,6 +6290,15 @@ acorn-jsx@5.3.2, acorn-jsx@^5.3.1:
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
+acorn-node@^1.6.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/acorn-node/-/acorn-node-1.8.2.tgz#114c95d64539e53dede23de8b9d96df7c7ae2af8"
+  integrity sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==
+  dependencies:
+    acorn "^7.0.0"
+    acorn-walk "^7.0.0"
+    xtend "^4.0.2"
+
 acorn-private-class-elements@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/acorn-private-class-elements/-/acorn-private-class-elements-1.0.0.tgz#c5805bf8a46cd065dc9b3513bfebb504c88cd706"
@@ -6237,7 +6311,7 @@ acorn-static-class-features@^1.0.0:
   dependencies:
     acorn-private-class-elements "^1.0.0"
 
-acorn-walk@^7.1.1, acorn-walk@^7.2.0:
+acorn-walk@^7.0.0, acorn-walk@^7.1.1, acorn-walk@^7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
   integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
@@ -6252,7 +6326,7 @@ acorn@^6.4.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.1.tgz#531e58ba3f51b9dacb9a6646ca4debf5b14ca474"
   integrity sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==
 
-acorn@^7.1.1, acorn@^7.2.0, acorn@^7.4.1:
+acorn@^7.0.0, acorn@^7.1.1, acorn@^7.2.0, acorn@^7.4.1:
   version "7.4.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
@@ -6808,6 +6882,11 @@ arg@^4.1.0:
   resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.3.tgz#269fc7ad5b8e42cb63c896d5666017261c144089"
   integrity sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==
 
+arg@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.1.tgz#eb0c9a8f77786cad2af8ff2b862899842d7b6adb"
+  integrity sha512-e0hDa9H2Z9AwFkk2qDlwhoMYE4eToKarchkQHovNdLTCYMHZHeRjI71crOh+dio4K6u1IcwubQqo79Ga4CyAQA==
+
 argparse@^1.0.10, argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@@ -7084,6 +7163,18 @@ autolinker@~0.28.0:
   dependencies:
     gulp-header "^1.7.1"
 
+autoprefixer@10.4.2:
+  version "10.4.2"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.2.tgz#25e1df09a31a9fba5c40b578936b90d35c9d4d3b"
+  integrity sha512-9fOPpHKuDW1w/0EKfRmVnxTDt8166MAnLI3mgZ1JCnhNtYWxcJ6Ud5CO/AVOZi/AvFa8DY9RTy3h3+tFBlrrdQ==
+  dependencies:
+    browserslist "^4.19.1"
+    caniuse-lite "^1.0.30001297"
+    fraction.js "^4.1.2"
+    normalize-range "^0.1.2"
+    picocolors "^1.0.0"
+    postcss-value-parser "^4.2.0"
+
 autoprefixer@^9.8.6:
   version "9.8.6"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.6.tgz#3b73594ca1bf9266320c5acf1588d74dea74210f"
@@ -7935,7 +8026,7 @@ camel-case@^3.0.0:
     no-case "^2.2.0"
     upper-case "^1.1.1"
 
-camelcase-css@2.0.1:
+camelcase-css@2.0.1, camelcase-css@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
@@ -7992,6 +8083,11 @@ caniuse-lite@^1.0.30001286:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001300.tgz#11ab6c57d3eb6f964cba950401fd00a146786468"
   integrity sha512-cVjiJHWGcNlJi8TZVKNMnvMid3Z3TTdDHmLDzlOdIiZq138Exvo0G+G0wTdVYolxKb4AYwC+38pxodiInVtJSA==
 
+caniuse-lite@^1.0.30001297:
+  version "1.0.30001310"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001310.tgz#da02cd07432c9eece6992689d1b84ca18139eea8"
+  integrity sha512-cb9xTV8k9HTIUA3GnPUJCk0meUnrHL5gy5QePfDjxHyNBcnzPzrHFv5GqfP7ue5b1ZyzZL0RJboD6hQlPXjhjg==
+
 capture-exit@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
@@ -8128,6 +8224,21 @@ chokidar@^3.0.2, chokidar@^3.4.0, chokidar@^3.4.1, chokidar@^3.4.2:
   optionalDependencies:
     fsevents "~2.3.2"
 
+chokidar@^3.5.3:
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
+  integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 chownr@^1.1.1, chownr@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
@@ -8459,7 +8570,7 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
-color-name@^1.0.0, color-name@~1.1.4:
+color-name@^1.0.0, color-name@^1.1.4, color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
@@ -8940,7 +9051,7 @@ cosmiconfig@^6.0.0:
     path-type "^4.0.0"
     yaml "^1.7.2"
 
-cosmiconfig@^7.0.0:
+cosmiconfig@^7.0.0, cosmiconfig@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.1.tgz#714d756522cace867867ccb4474c5d01bbae5d6d"
   integrity sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==
@@ -9508,6 +9619,11 @@ define-property@^2.0.2:
     is-descriptor "^1.0.2"
     isobject "^3.0.1"
 
+defined@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
+  integrity sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=
+
 del@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/del/-/del-5.1.0.tgz#d9487c94e367410e6eff2925ee58c0c84a75b3a7"
@@ -9686,6 +9802,15 @@ detective-typescript@^7.0.0:
     node-source-walk "^4.2.0"
     typescript "^3.9.7"
 
+detective@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/detective/-/detective-5.2.0.tgz#feb2a77e85b904ecdea459ad897cc90a99bd2a7b"
+  integrity sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==
+  dependencies:
+    acorn-node "^1.6.1"
+    defined "^1.0.0"
+    minimist "^1.1.1"
+
 dezalgo@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/dezalgo/-/dezalgo-1.0.3.tgz#7f742de066fc748bc8db820569dddce49bf0d456"
@@ -9694,6 +9819,11 @@ dezalgo@^1.0.0:
     asap "^2.0.0"
     wrappy "1"
 
+didyoumean@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
+  integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
+
 diff-sequences@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5"
@@ -9742,6 +9872,11 @@ dir-glob@^3.0.1:
   dependencies:
     path-type "^4.0.0"
 
+dlv@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
+  integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
+
 doctrine@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
@@ -10747,6 +10882,17 @@ fast-glob@^3.0.3, fast-glob@^3.1.1:
     micromatch "^4.0.2"
     picomatch "^2.2.1"
 
+fast-glob@^3.2.11:
+  version "3.2.11"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
+  integrity sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
 fast-json-parse@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/fast-json-parse/-/fast-json-parse-1.0.3.tgz#43e5c61ee4efa9265633046b770fb682a7577c4d"
@@ -11165,6 +11311,11 @@ forwarded@~0.1.2:
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
   integrity sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=
 
+fraction.js@^4.1.2:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.1.3.tgz#be65b0f20762ef27e1e793860bc2dfb716e99e65"
+  integrity sha512-pUHWWt6vHzZZiQJcM6S/0PXfS+g6FM4BF5rj9wZyreivhQPdsh5PpE25VtSNxq80wHS5RfY51Ii+8Z0Zl/pmzg==
+
 fragment-cache@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
@@ -11591,14 +11742,14 @@ glob-parent@^3.1.0:
     is-glob "^3.1.0"
     path-dirname "^1.0.0"
 
-glob-parent@^5.1.0, glob-parent@^5.1.1, glob-parent@~5.1.2:
+glob-parent@^5.1.0, glob-parent@^5.1.1, glob-parent@^5.1.2, glob-parent@~5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
   integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
   dependencies:
     is-glob "^4.0.1"
 
-glob-parent@^6.0.1:
+glob-parent@^6.0.1, glob-parent@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
   integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
@@ -14359,7 +14510,7 @@ libnpmpublish@^4.0.0:
     semver "^7.1.3"
     ssri "^8.0.0"
 
-lilconfig@2.0.4:
+lilconfig@2.0.4, lilconfig@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.4.tgz#f4507d043d7058b380b6a8f5cb7bcd4b34cee082"
   integrity sha512-bfTIN7lEsiooCocSISTWXkiWJkRqtL9wYtYy+8EK3Y41qh3mpwPU0ycTOgjdY9ErwXCc8QyrQp82bdL0Xkm9yA==
@@ -15465,6 +15616,11 @@ mock-require@^3.0.3:
     get-caller-file "^1.0.2"
     normalize-path "^2.1.1"
 
+modern-normalize@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-1.1.0.tgz#da8e80140d9221426bd4f725c6e11283d34f90b7"
+  integrity sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==
+
 modify-values@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
@@ -15582,7 +15738,7 @@ nan@^2.12.1:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
   integrity sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==
 
-nanoid@^3.1.23:
+nanoid@^3.1.23, nanoid@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.2.0.tgz#62667522da6673971cca916a6d3eff3f415ff80c"
   integrity sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==
@@ -16211,6 +16367,11 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
+object-hash@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.2.0.tgz#5ad518581eefc443bd763472b8ff2e9c2c0d54a5"
+  integrity sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==
+
 object-inspect@^1.11.0, object-inspect@^1.9.0:
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.11.0.tgz#9dceb146cedd4148a0d9e51ab88d34cf509922b1"
@@ -17006,6 +17167,11 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
+picocolors@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f"
+  integrity sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==
+
 picocolors@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
@@ -17112,6 +17278,13 @@ polished@^4.0.0, polished@^4.0.5:
   dependencies:
     "@babel/runtime" "^7.13.17"
 
+polished@^4.1.1:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/polished/-/polished-4.1.4.tgz#640293ba834109614961a700fdacbb6599fb12d0"
+  integrity sha512-Nq5Mbza+Auo7N3sQb1QMFaQiDO+4UexWuSGR7Cjb4Sw11SZIJcrrFtiZ+L0jT9MBsUsxDboHVASbCLbE1rnECg==
+  dependencies:
+    "@babel/runtime" "^7.16.7"
+
 popper.js@1.16.1:
   version "1.16.1"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
@@ -17129,6 +17302,21 @@ postcss-flexbugs-fixes@^4.2.1:
   dependencies:
     postcss "^7.0.26"
 
+postcss-js@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.0.tgz#31db79889531b80dc7bc9b0ad283e418dce0ac00"
+  integrity sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==
+  dependencies:
+    camelcase-css "^2.0.1"
+
+postcss-load-config@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-3.1.1.tgz#2f53a17f2f543d9e63864460af42efdac0d41f87"
+  integrity sha512-c/9XYboIbSEUZpiD1UQD0IKiUe8n9WHYV7YFe7X7J+ZwCsEKkUJSFWjS9hBU1RR9THR7jMXst8sxiqP0jjo2mg==
+  dependencies:
+    lilconfig "^2.0.4"
+    yaml "^1.10.2"
+
 postcss-loader@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-4.2.0.tgz#f6993ea3e0f46600fb3ee49bbd010448123a7db4"
@@ -17201,6 +17389,13 @@ postcss-modules-values@^4.0.0:
   dependencies:
     icss-utils "^5.0.0"
 
+postcss-nested@5.0.6:
+  version "5.0.6"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-5.0.6.tgz#466343f7fc8d3d46af3e7dba3fcd47d052a945bc"
+  integrity sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==
+  dependencies:
+    postcss-selector-parser "^6.0.6"
+
 postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
   version "6.0.6"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz#2c5bba8174ac2f6981ab631a42ab0ee54af332ea"
@@ -17209,11 +17404,24 @@ postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2, postcss-selector
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
+postcss-selector-parser@^6.0.6, postcss-selector-parser@^6.0.9:
+  version "6.0.9"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.9.tgz#ee71c3b9ff63d9cd130838876c13a2ec1a992b2f"
+  integrity sha512-UO3SgnZOVTwu4kyLR22UQ1xZh086RyNZppb7lLAKBFK8a32ttG5i87Y/P3+2bRSjZNyJ1B7hfFNo273tKe9YxQ==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
 postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
 
+postcss-value-parser@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
+  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
+
 postcss-values-parser@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz#da8b472d901da1e205b47bdc98637b9e9e550e5f"
@@ -17223,6 +17431,15 @@ postcss-values-parser@^2.0.1:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
+postcss@8.4.6, postcss@^8.2.8:
+  version "8.4.6"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.6.tgz#c5ff3c3c457a23864f32cb45ac9b741498a09ae1"
+  integrity sha512-OovjwIzs9Te46vlEx7+uXB0PLijpwjXGKXjVGGPIGubGpq7uh5Xgf6D6FiJ/SzJMBosHDp6a2hiXOS97iBXcaA==
+  dependencies:
+    nanoid "^3.2.0"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.36, postcss@^7.0.5, postcss@^7.0.6:
   version "7.0.36"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.36.tgz#056f8cffa939662a8f5905950c07d5285644dfcb"
@@ -17232,6 +17449,14 @@ postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
+postcss@^7.0.35:
+  version "7.0.39"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309"
+  integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==
+  dependencies:
+    picocolors "^0.2.1"
+    source-map "^0.6.1"
+
 postcss@^8.1.7, postcss@^8.2.15:
   version "8.3.6"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.6.tgz#2730dd76a97969f37f53b9a6096197be311cc4ea"
@@ -17663,6 +17888,11 @@ quick-lru@^4.0.1:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f"
   integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
 
+quick-lru@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
+  integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
+
 ramda@^0.21.0:
   version "0.21.0"
   resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.21.0.tgz#a001abedb3ff61077d4ff1d577d44de77e8d0a35"
@@ -17760,7 +17990,7 @@ react-docgen@^5.0.0:
     node-dir "^0.1.10"
     strip-indent "^3.0.0"
 
-react-dom@17.0.2:
+react-dom@17.0.2, react-dom@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
   integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
@@ -17888,7 +18118,7 @@ react-textarea-autosize@^8.3.0:
     use-composed-ref "^1.0.0"
     use-latest "^1.0.0"
 
-react@17.0.2:
+react@17.0.2, react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
   integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
@@ -18404,7 +18634,7 @@ resolve@^1.1.6:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
-resolve@^1.13.1:
+resolve@^1.13.1, resolve@^1.22.0:
   version "1.22.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
   integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
@@ -19168,6 +19398,11 @@ source-map-js@^0.6.2:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
   integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==
 
+source-map-js@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
+  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
+
 source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.2.tgz#72e2cc34095543e43b2c62b2c4c10d4a9054f259"
@@ -19736,7 +19971,7 @@ style-to-object@0.3.0, style-to-object@^0.3.0:
   dependencies:
     inline-style-parser "0.1.1"
 
-styled-components@5.3.3:
+styled-components@5.3.3, styled-components@^5.2.1:
   version "5.3.3"
   resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.3.tgz#312a3d9a549f4708f0fb0edc829eb34bde032743"
   integrity sha512-++4iHwBM7ZN+x6DtPPWkCI4vdtwumQ+inA/DdAsqYd4SVgUKJie5vXyzotA00ttcFdQkCng7zc6grwlfIfw+lw==
@@ -19844,6 +20079,32 @@ synchronous-promise@^2.0.15:
   resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.15.tgz#07ca1822b9de0001f5ff73595f3d08c4f720eb8e"
   integrity sha512-k8uzYIkIVwmT+TcglpdN50pS2y1BDcUnBPK9iJeGu0Pl1lOI8pD6wtzgw91Pjpe+RxtTncw32tLxs/R0yNL2Mg==
 
+tailwindcss@3.0.19:
+  version "3.0.19"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.0.19.tgz#cd789953e6762af2e80c5a3e5d6da3a975ee8215"
+  integrity sha512-rjsdfz/qZya5xQ0OVynEMETgWq1CacmftgMYeXXh6bRM5vxsNwRSbMJsCCIjq/w67om9VP/AFMolOwiE+5VKig==
+  dependencies:
+    arg "^5.0.1"
+    chalk "^4.1.2"
+    chokidar "^3.5.3"
+    color-name "^1.1.4"
+    cosmiconfig "^7.0.1"
+    detective "^5.2.0"
+    didyoumean "^1.2.2"
+    dlv "^1.1.3"
+    fast-glob "^3.2.11"
+    glob-parent "^6.0.2"
+    is-glob "^4.0.3"
+    normalize-path "^3.0.0"
+    object-hash "^2.2.0"
+    postcss-js "^4.0.0"
+    postcss-load-config "^3.1.0"
+    postcss-nested "5.0.6"
+    postcss-selector-parser "^6.0.9"
+    postcss-value-parser "^4.2.0"
+    quick-lru "^5.1.1"
+    resolve "^1.22.0"
+
 tapable@^1.0.0, tapable@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
@@ -21554,7 +21815,7 @@ xmlchars@^2.2.0:
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
-xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.0, xtend@~4.0.1:
+xtend@^4.0.0, xtend@^4.0.1, xtend@^4.0.2, xtend@~4.0.0, xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==

From 80248f856d46de3333890d13879abf1d43025b5a Mon Sep 17 00:00:00 2001
From: Jonathan Zempel <jzempel@gmail.com>
Date: Thu, 10 Feb 2022 10:21:21 -0500
Subject: [PATCH 4/7] Update TS config to allow storybook
 `@zendeskgarden/container-*` imports

---
 packages/.template/tsconfig.build.json     |  4 +++-
 packages/accordion/tsconfig.build.json     |  3 ++-
 packages/breadcrumb/tsconfig.build.json    |  4 +++-
 packages/buttongroup/tsconfig.build.json   |  4 +++-
 packages/field/tsconfig.build.json         |  4 +++-
 packages/focusjail/tsconfig.build.json     |  4 +++-
 packages/grid/tsconfig.build.json          |  4 +++-
 packages/keyboardfocus/tsconfig.build.json |  4 +++-
 packages/modal/tsconfig.build.json         |  4 +++-
 packages/pagination/tsconfig.build.json    |  4 +++-
 packages/schedule/tsconfig.build.json      |  4 +++-
 packages/scrollregion/tsconfig.build.json  |  4 +++-
 packages/selection/tsconfig.build.json     |  4 +++-
 packages/splitter/tsconfig.build.json      |  4 +++-
 packages/tabs/tsconfig.build.json          |  4 +++-
 packages/tooltip/tsconfig.build.json       |  4 +++-
 packages/treeview/tsconfig.build.json      |  4 +++-
 packages/utilities/tsconfig.build.json     |  4 +++-
 tsconfig.json                              | 22 ++++++++++++++++++++--
 19 files changed, 73 insertions(+), 20 deletions(-)

diff --git a/packages/.template/tsconfig.build.json b/packages/.template/tsconfig.build.json
index 61f3cd4f8..34bb752ed 100644
--- a/packages/.template/tsconfig.build.json
+++ b/packages/.template/tsconfig.build.json
@@ -5,7 +5,9 @@
     "declarationDir": "dist/typings",
     "declaration": true,
     "sourceMap": false,
-    "noEmit": false
+    "noEmit": false,
+    "paths": {}
+
   },
   "include": ["src/**/*"],
   "exclude": ["**/*.spec.tsx", "**/*.spec.ts"]
diff --git a/packages/accordion/tsconfig.build.json b/packages/accordion/tsconfig.build.json
index 048001557..74d998ff1 100644
--- a/packages/accordion/tsconfig.build.json
+++ b/packages/accordion/tsconfig.build.json
@@ -5,7 +5,8 @@
     "declarationDir": "dist/typings",
     "declaration": true,
     "sourceMap": false,
-    "noEmit": false
+    "noEmit": false,
+    "paths": {}
   },
   "include": ["src/**/*"],
   "exclude": ["**/*.spec.tsx", "**/*.spec.ts"]
diff --git a/packages/breadcrumb/tsconfig.build.json b/packages/breadcrumb/tsconfig.build.json
index 048001557..25eba32a5 100644
--- a/packages/breadcrumb/tsconfig.build.json
+++ b/packages/breadcrumb/tsconfig.build.json
@@ -5,7 +5,9 @@
     "declarationDir": "dist/typings",
     "declaration": true,
     "sourceMap": false,
-    "noEmit": false
+    "noEmit": false,
+    "paths": {}
+
   },
   "include": ["src/**/*"],
   "exclude": ["**/*.spec.tsx", "**/*.spec.ts"]
diff --git a/packages/buttongroup/tsconfig.build.json b/packages/buttongroup/tsconfig.build.json
index 048001557..25eba32a5 100644
--- a/packages/buttongroup/tsconfig.build.json
+++ b/packages/buttongroup/tsconfig.build.json
@@ -5,7 +5,9 @@
     "declarationDir": "dist/typings",
     "declaration": true,
     "sourceMap": false,
-    "noEmit": false
+    "noEmit": false,
+    "paths": {}
+
   },
   "include": ["src/**/*"],
   "exclude": ["**/*.spec.tsx", "**/*.spec.ts"]
diff --git a/packages/field/tsconfig.build.json b/packages/field/tsconfig.build.json
index 048001557..25eba32a5 100644
--- a/packages/field/tsconfig.build.json
+++ b/packages/field/tsconfig.build.json
@@ -5,7 +5,9 @@
     "declarationDir": "dist/typings",
     "declaration": true,
     "sourceMap": false,
-    "noEmit": false
+    "noEmit": false,
+    "paths": {}
+
   },
   "include": ["src/**/*"],
   "exclude": ["**/*.spec.tsx", "**/*.spec.ts"]
diff --git a/packages/focusjail/tsconfig.build.json b/packages/focusjail/tsconfig.build.json
index 048001557..25eba32a5 100644
--- a/packages/focusjail/tsconfig.build.json
+++ b/packages/focusjail/tsconfig.build.json
@@ -5,7 +5,9 @@
     "declarationDir": "dist/typings",
     "declaration": true,
     "sourceMap": false,
-    "noEmit": false
+    "noEmit": false,
+    "paths": {}
+
   },
   "include": ["src/**/*"],
   "exclude": ["**/*.spec.tsx", "**/*.spec.ts"]
diff --git a/packages/grid/tsconfig.build.json b/packages/grid/tsconfig.build.json
index 61f3cd4f8..34bb752ed 100644
--- a/packages/grid/tsconfig.build.json
+++ b/packages/grid/tsconfig.build.json
@@ -5,7 +5,9 @@
     "declarationDir": "dist/typings",
     "declaration": true,
     "sourceMap": false,
-    "noEmit": false
+    "noEmit": false,
+    "paths": {}
+
   },
   "include": ["src/**/*"],
   "exclude": ["**/*.spec.tsx", "**/*.spec.ts"]
diff --git a/packages/keyboardfocus/tsconfig.build.json b/packages/keyboardfocus/tsconfig.build.json
index 048001557..25eba32a5 100644
--- a/packages/keyboardfocus/tsconfig.build.json
+++ b/packages/keyboardfocus/tsconfig.build.json
@@ -5,7 +5,9 @@
     "declarationDir": "dist/typings",
     "declaration": true,
     "sourceMap": false,
-    "noEmit": false
+    "noEmit": false,
+    "paths": {}
+
   },
   "include": ["src/**/*"],
   "exclude": ["**/*.spec.tsx", "**/*.spec.ts"]
diff --git a/packages/modal/tsconfig.build.json b/packages/modal/tsconfig.build.json
index 048001557..25eba32a5 100644
--- a/packages/modal/tsconfig.build.json
+++ b/packages/modal/tsconfig.build.json
@@ -5,7 +5,9 @@
     "declarationDir": "dist/typings",
     "declaration": true,
     "sourceMap": false,
-    "noEmit": false
+    "noEmit": false,
+    "paths": {}
+
   },
   "include": ["src/**/*"],
   "exclude": ["**/*.spec.tsx", "**/*.spec.ts"]
diff --git a/packages/pagination/tsconfig.build.json b/packages/pagination/tsconfig.build.json
index 048001557..25eba32a5 100644
--- a/packages/pagination/tsconfig.build.json
+++ b/packages/pagination/tsconfig.build.json
@@ -5,7 +5,9 @@
     "declarationDir": "dist/typings",
     "declaration": true,
     "sourceMap": false,
-    "noEmit": false
+    "noEmit": false,
+    "paths": {}
+
   },
   "include": ["src/**/*"],
   "exclude": ["**/*.spec.tsx", "**/*.spec.ts"]
diff --git a/packages/schedule/tsconfig.build.json b/packages/schedule/tsconfig.build.json
index 048001557..25eba32a5 100644
--- a/packages/schedule/tsconfig.build.json
+++ b/packages/schedule/tsconfig.build.json
@@ -5,7 +5,9 @@
     "declarationDir": "dist/typings",
     "declaration": true,
     "sourceMap": false,
-    "noEmit": false
+    "noEmit": false,
+    "paths": {}
+
   },
   "include": ["src/**/*"],
   "exclude": ["**/*.spec.tsx", "**/*.spec.ts"]
diff --git a/packages/scrollregion/tsconfig.build.json b/packages/scrollregion/tsconfig.build.json
index 048001557..25eba32a5 100644
--- a/packages/scrollregion/tsconfig.build.json
+++ b/packages/scrollregion/tsconfig.build.json
@@ -5,7 +5,9 @@
     "declarationDir": "dist/typings",
     "declaration": true,
     "sourceMap": false,
-    "noEmit": false
+    "noEmit": false,
+    "paths": {}
+
   },
   "include": ["src/**/*"],
   "exclude": ["**/*.spec.tsx", "**/*.spec.ts"]
diff --git a/packages/selection/tsconfig.build.json b/packages/selection/tsconfig.build.json
index 048001557..25eba32a5 100644
--- a/packages/selection/tsconfig.build.json
+++ b/packages/selection/tsconfig.build.json
@@ -5,7 +5,9 @@
     "declarationDir": "dist/typings",
     "declaration": true,
     "sourceMap": false,
-    "noEmit": false
+    "noEmit": false,
+    "paths": {}
+
   },
   "include": ["src/**/*"],
   "exclude": ["**/*.spec.tsx", "**/*.spec.ts"]
diff --git a/packages/splitter/tsconfig.build.json b/packages/splitter/tsconfig.build.json
index 61f3cd4f8..34bb752ed 100644
--- a/packages/splitter/tsconfig.build.json
+++ b/packages/splitter/tsconfig.build.json
@@ -5,7 +5,9 @@
     "declarationDir": "dist/typings",
     "declaration": true,
     "sourceMap": false,
-    "noEmit": false
+    "noEmit": false,
+    "paths": {}
+
   },
   "include": ["src/**/*"],
   "exclude": ["**/*.spec.tsx", "**/*.spec.ts"]
diff --git a/packages/tabs/tsconfig.build.json b/packages/tabs/tsconfig.build.json
index 048001557..25eba32a5 100644
--- a/packages/tabs/tsconfig.build.json
+++ b/packages/tabs/tsconfig.build.json
@@ -5,7 +5,9 @@
     "declarationDir": "dist/typings",
     "declaration": true,
     "sourceMap": false,
-    "noEmit": false
+    "noEmit": false,
+    "paths": {}
+
   },
   "include": ["src/**/*"],
   "exclude": ["**/*.spec.tsx", "**/*.spec.ts"]
diff --git a/packages/tooltip/tsconfig.build.json b/packages/tooltip/tsconfig.build.json
index 048001557..25eba32a5 100644
--- a/packages/tooltip/tsconfig.build.json
+++ b/packages/tooltip/tsconfig.build.json
@@ -5,7 +5,9 @@
     "declarationDir": "dist/typings",
     "declaration": true,
     "sourceMap": false,
-    "noEmit": false
+    "noEmit": false,
+    "paths": {}
+
   },
   "include": ["src/**/*"],
   "exclude": ["**/*.spec.tsx", "**/*.spec.ts"]
diff --git a/packages/treeview/tsconfig.build.json b/packages/treeview/tsconfig.build.json
index 61f3cd4f8..34bb752ed 100644
--- a/packages/treeview/tsconfig.build.json
+++ b/packages/treeview/tsconfig.build.json
@@ -5,7 +5,9 @@
     "declarationDir": "dist/typings",
     "declaration": true,
     "sourceMap": false,
-    "noEmit": false
+    "noEmit": false,
+    "paths": {}
+
   },
   "include": ["src/**/*"],
   "exclude": ["**/*.spec.tsx", "**/*.spec.ts"]
diff --git a/packages/utilities/tsconfig.build.json b/packages/utilities/tsconfig.build.json
index 048001557..25eba32a5 100644
--- a/packages/utilities/tsconfig.build.json
+++ b/packages/utilities/tsconfig.build.json
@@ -5,7 +5,9 @@
     "declarationDir": "dist/typings",
     "declaration": true,
     "sourceMap": false,
-    "noEmit": false
+    "noEmit": false,
+    "paths": {}
+
   },
   "include": ["src/**/*"],
   "exclude": ["**/*.spec.tsx", "**/*.spec.ts"]
diff --git a/tsconfig.json b/tsconfig.json
index d2cb476e5..33af06553 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,7 +9,25 @@
     "moduleResolution": "node",
     "baseUrl": "./",
     "paths": {
-      "garden-test-utils": ["utils/test/utilities.ts"]
+      "garden-test-utils": ["utils/test/utilities.ts"],
+      "@zendeskgarden/container-accordion": ["./packages/accordion/src/index.ts"],
+      "@zendeskgarden/container-breadcrumb": ["./packages/breadcrumb/src/index.ts"],
+      "@zendeskgarden/container-buttongroup": ["./packages/buttongroup/src/index.ts"],
+      "@zendeskgarden/container-field": ["./packages/field/src/index.ts"],
+      "@zendeskgarden/container-focusjail": ["./packages/focusjail/src/index.ts"],
+      "@zendeskgarden/container-focusvisible": ["./packages/focusvisible/src/index.ts"],
+      "@zendeskgarden/container-grid": ["./packages/grid/src/index.ts"],
+      "@zendeskgarden/container-keyboardfocus": ["./packages/keyboardfocus/src/index.ts"],
+      "@zendeskgarden/container-modal": ["./packages/modal/src/index.ts"],
+      "@zendeskgarden/container-pagination": ["./packages/pagination/src/index.ts"],
+      "@zendeskgarden/container-schedule": ["./packages/schedule/src/index.ts"],
+      "@zendeskgarden/container-scrollregion": ["./packages/scrollregion/src/index.ts"],
+      "@zendeskgarden/container-selection": ["./packages/selection/src/index.ts"],
+      "@zendeskgarden/container-splitter": ["./packages/splitter/src/index.ts"],
+      "@zendeskgarden/container-tabs": ["./packages/tabs/src/index.ts"],
+      "@zendeskgarden/container-tooltip": ["./packages/tooltip/src/index.ts"],
+      "@zendeskgarden/container-treeview": ["./packages/treeview/src/index.ts"],
+      "@zendeskgarden/container-utilities": ["./packages/utilities/src/index.ts"]
     },
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
@@ -17,6 +35,6 @@
     "noEmit": true
   },
   "files": ["utils/build/declarations.d.ts", "utils/test/jest.d.ts"],
-  "include": ["packages/*/src/**/*", "packages/*/stories.tsx"],
+  "include": ["packages/*/src/**/*", "packages/*/demo/**/*"],
   "exclude": ["node_modules", "**/node_modules", "**/dist"]
 }

From 8fac262d92e8bd921552156987c88ebc107b6044 Mon Sep 17 00:00:00 2001
From: Jonathan Zempel <jzempel@gmail.com>
Date: Thu, 10 Feb 2022 11:08:47 -0500
Subject: [PATCH 5/7] Fix linting

---
 .storybook/main.js            | 8 ++------
 .storybook/tailwind.config.js | 2 +-
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/.storybook/main.js b/.storybook/main.js
index f00000f0c..c2b909eac 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -6,8 +6,8 @@
  */
 
 const path = require('path');
-const { readdirSync } = require('fs');
 const { DefinePlugin } = require('webpack');
+const postcss = require('postcss');
 const tailwindcss = require('tailwindcss');
 const autoprefixer = require('autoprefixer');
 
@@ -19,10 +19,6 @@ const options = {
   viewport: false
 };
 
-const PACKAGE_NAMES = readdirSync(path.resolve(__dirname, '../packages')).filter(
-  name => name !== '.template'
-);
-
 module.exports = {
   stories: [
     '../packages/*/demo/**/*.stories.@(js|jsx|ts|tsx|mdx)',
@@ -34,7 +30,7 @@ module.exports = {
       name: '@storybook/addon-postcss',
       options: {
         postcssLoaderOptions: {
-          implementation: require('postcss'),
+          implementation: postcss,
           postcssOptions: {
             plugins: [tailwindcss(path.resolve(__dirname, 'tailwind.config.js')), autoprefixer()]
           }
diff --git a/.storybook/tailwind.config.js b/.storybook/tailwind.config.js
index 4cbb5dd69..cc5e5070d 100644
--- a/.storybook/tailwind.config.js
+++ b/.storybook/tailwind.config.js
@@ -11,5 +11,5 @@ const gardenTailwindCss = require('@zendeskgarden/tailwindcss');
 module.exports = {
   content: [`${path.resolve(__dirname, '../packages')}/*/demo/**/*.{mdx,tsx}`],
   plugins: [gardenTailwindCss],
-  safelist: process.env.NODE_ENV === 'development' ? [{ pattern: /.*/ }] : []
+  safelist: process.env.NODE_ENV === 'development' ? [{ pattern: /.*/u }] : []
 };

From 77ccd51a0c5a1918034b08deefdc288cc115959a Mon Sep 17 00:00:00 2001
From: Jonathan Zempel <jzempel@gmail.com>
Date: Thu, 10 Feb 2022 11:12:12 -0500
Subject: [PATCH 6/7] Update precommit hook

---
 .husky/pre-commit                      |  3 +--
 packages/accordion/.size-snapshot.json | 16 ++++++++--------
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/.husky/pre-commit b/.husky/pre-commit
index 48a748dcb..0905da98d 100755
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,5 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn lint-staged
-yarn lerna run build --since main
+yarn lint-staged && yarn build --since HEAD --exclude-dependents && git add packages/**/.size-snapshot.json
diff --git a/packages/accordion/.size-snapshot.json b/packages/accordion/.size-snapshot.json
index 47736206d..e8ab318aa 100644
--- a/packages/accordion/.size-snapshot.json
+++ b/packages/accordion/.size-snapshot.json
@@ -19,21 +19,21 @@
     }
   },
   "index.cjs.js": {
-    "bundled": 7276,
-    "minified": 3738,
-    "gzipped": 1460
+    "bundled": 7340,
+    "minified": 3795,
+    "gzipped": 1466
   },
   "index.esm.js": {
-    "bundled": 6666,
-    "minified": 3227,
-    "gzipped": 1345,
+    "bundled": 6710,
+    "minified": 3267,
+    "gzipped": 1350,
     "treeshaked": {
       "rollup": {
-        "code": 146,
+        "code": 154,
         "import_statements": 101
       },
       "webpack": {
-        "code": 3932
+        "code": 3966
       }
     }
   }

From d96adcb39f1618ace0bd18344f9500a80e4aa882 Mon Sep 17 00:00:00 2001
From: Jonathan Zempel <jzempel@gmail.com>
Date: Thu, 10 Feb 2022 11:16:00 -0500
Subject: [PATCH 7/7] Restore size snapshot

---
 packages/accordion/.size-snapshot.json | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/accordion/.size-snapshot.json b/packages/accordion/.size-snapshot.json
index e8ab318aa..47736206d 100644
--- a/packages/accordion/.size-snapshot.json
+++ b/packages/accordion/.size-snapshot.json
@@ -19,21 +19,21 @@
     }
   },
   "index.cjs.js": {
-    "bundled": 7340,
-    "minified": 3795,
-    "gzipped": 1466
+    "bundled": 7276,
+    "minified": 3738,
+    "gzipped": 1460
   },
   "index.esm.js": {
-    "bundled": 6710,
-    "minified": 3267,
-    "gzipped": 1350,
+    "bundled": 6666,
+    "minified": 3227,
+    "gzipped": 1345,
     "treeshaked": {
       "rollup": {
-        "code": 154,
+        "code": 146,
         "import_statements": 101
       },
       "webpack": {
-        "code": 3966
+        "code": 3932
       }
     }
   }