feat(tabs): Implement a couple of features and fix bugs of tabs

.eslintignore

@@ -6,4 +6,6 @@ esm/*
 public/*
 scripts/*
 tests/*
+loaders/*
+pages/code/*
 *.config.js

.eslintrc.js

@@ -10,10 +10,12 @@ module.exports = {
   },
   parserOptions: {
     project: './tsconfig.json',
+    projectFolderIgnoreList: ['/node_modules/'],
     ecmaFeatures: {
       jsx: true,
     },
   },
+
   rules: {
     indent: 0,
     '@typescript-eslint/indent': 0,

.vscode/launch.json

@@ -4,6 +4,20 @@
   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
   "configurations": [
+    {
+      "name": "Launch via NPM",
+      "request": "launch",
+      "runtimeArgs": [
+        "run-script",
+        "docs-collect"
+      ],
+      "runtimeExecutable": "npm",
+      "skipFiles": [
+        "<node_internals>/**"
+      ],
+      "type": "pwa-node"
+    },
+
     {
       "type": "node",
       "name": "vscode-jest-tests",

components/index.ts

@@ -8,7 +8,6 @@ export { default as useMessages } from './use-messages'
 export { default as useToasts } from './use-toasts'
 export { default as useInput } from './input/use-input'
 export { default as useModal } from './modal/use-modal'
-export { default as useTabs } from './tabs/use-tabs'
 export { default as useBodyScroll } from './use-body-scroll'
 export { default as useClickAway } from './use-click-away'
 export { default as useClipboard } from './use-clipboard'

components/link/__tests__/__snapshots__/index.test.tsx.snap

@@ -186,7 +186,7 @@ exports[`Link should render correctly 1`] = `
           .link :global(.right) {
             margin-right: 0;
           }
-        </style></a><a href=\\"https://react.zeit-ui.co\\" class=\\"link \\"><span class=\\"icon left\\"><svg viewBox=\\"0 0 24 24\\" width=\\"24\\" height=\\"24\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" style=\\"color: currentColor;\\"><path d=\\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6\\"></path><path d=\\"M15 3h6v6\\"></path><path d=\\"M10 14L21 3\\"></path></svg><style>
+        </style></a><a href=\\"https://react.zeit-ui.co\\" class=\\"link \\"><span class=\\"icon left\\"><svg fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"1.5\\" shape-rendering=\\"geometricPrecision\\" viewBox=\\"0 0 24 24\\" height=\\"24\\" width=\\"24\\" style=\\"color: currentColor;\\"><path d=\\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3\\"></path></svg><style>
         .icon {
           margin: 0 5px;
           display: inline-flex;
@@ -231,7 +231,7 @@ exports[`Link should render correctly 1`] = `
           .link :global(.right) {
             margin-right: 0;
           }
-        </style></a><a href=\\"https://react.zeit-ui.co\\" class=\\"link \\">link<span class=\\"icon right\\"><svg viewBox=\\"0 0 24 24\\" width=\\"24\\" height=\\"24\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" style=\\"color: currentColor;\\"><path d=\\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6\\"></path><path d=\\"M15 3h6v6\\"></path><path d=\\"M10 14L21 3\\"></path></svg><style>
+        </style></a><a href=\\"https://react.zeit-ui.co\\" class=\\"link \\">link<span class=\\"icon right\\"><svg fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"1.5\\" shape-rendering=\\"geometricPrecision\\" viewBox=\\"0 0 24 24\\" height=\\"24\\" width=\\"24\\" style=\\"color: currentColor;\\"><path d=\\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3\\"></path></svg><style>
         .icon {
           margin: 0 5px;
           display: inline-flex;
@@ -276,15 +276,15 @@ exports[`Link should render correctly 1`] = `
           .link :global(.right) {
             margin-right: 0;
           }
-        </style></a><a href=\\"https://react.zeit-ui.co\\" class=\\"link \\"><span class=\\"icon left\\"><svg viewBox=\\"0 0 24 24\\" width=\\"24\\" height=\\"24\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" style=\\"color: currentColor;\\"><path d=\\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6\\"></path><path d=\\"M15 3h6v6\\"></path><path d=\\"M10 14L21 3\\"></path></svg><style>
+        </style></a><a href=\\"https://react.zeit-ui.co\\" class=\\"link \\"><span class=\\"icon left\\"><svg fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"1.5\\" shape-rendering=\\"geometricPrecision\\" viewBox=\\"0 0 24 24\\" height=\\"24\\" width=\\"24\\" style=\\"color: currentColor;\\"><path d=\\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3\\"></path></svg><style>
         .icon {
           margin: 0 5px;
           display: inline-flex;
           align-self: center;
           color: currentColor;
           width: 1rem;
         }
-      </style></span>link<span class=\\"icon right\\"><svg viewBox=\\"0 0 24 24\\" width=\\"24\\" height=\\"24\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" style=\\"color: currentColor;\\"><path d=\\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6\\"></path><path d=\\"M15 3h6v6\\"></path><path d=\\"M10 14L21 3\\"></path></svg><style>
+      </style></span>link<span class=\\"icon right\\"><svg fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"1.5\\" shape-rendering=\\"geometricPrecision\\" viewBox=\\"0 0 24 24\\" height=\\"24\\" width=\\"24\\" style=\\"color: currentColor;\\"><path d=\\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3\\"></path></svg><style>
         .icon {
           margin: 0 5px;
           display: inline-flex;

components/select/__tests__/__snapshots__/index.test.tsx.snap

@@ -461,7 +461,7 @@ exports[`Select should render correctly when variant=text 1`] = `
           line-height: calc(2.25 * 16px);
           min-width: 0;
         }
-      </style></span><svg viewBox=\\"0 0 24 24\\" width=\\"18\\" height=\\"18\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" style=\\"color: currentColor;\\"><path d=\\"M20 6L9 17l-5-5\\"></path></svg></div><style>
+      </style></span><svg fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"1.5\\" shape-rendering=\\"geometricPrecision\\" viewBox=\\"0 0 24 24\\" height=\\"18\\" width=\\"18\\" style=\\"color: currentColor;\\"><path d=\\"M20 6L9 17l-5-5\\"></path></svg></div><style>
         .option {
           display: flex;
           max-width: 100%;