docs: add component grid

docs/.gitignore

@@ -4,5 +4,6 @@
 /src/node_modules/@sapper/
 yarn-error.log
 /cypress/screenshots/
+/cypress/fixtures/
 /__sapper__/
 static/style.css

docs/cypress/integration/Button.js

@@ -3,14 +3,9 @@ describe("Button", () => {
     cy.examples("Button");
   });
 
-  it("renders correctly", () => {
-    cy.get("button").then(($) => {
-      expect($.length).to.eql(4);
-    });
-  });
-
-  it.only("clicks", () => {
-    cy.get('[data-test="button-primary"]')
+  it("clicks", () => {
+    cy.get(".bx--btn--primary")
+      .first()
       .as("btn")
       .contains("Primary button");
 

docs/package.json

@@ -16,6 +16,7 @@
     "autoprefixer": "^9.8.5",
     "carbon-components": "^10.16.0",
     "carbon-components-svelte": "../",
+    "clipboard-copy": "^3.1.0",
     "cypress": "^4.10.0",
     "node-sass": "^4.14.1",
     "npm-run-all": "^4.1.5",

docs/src/components/CopyableCodeSnippet.svelte

@@ -0,0 +1,13 @@
+<script>
+  export let code = "";
+
+  import copy from "clipboard-copy";
+  import { CodeSnippet } from "carbon-components-svelte";
+</script>
+
+<CodeSnippet
+  {...$$restProps}
+  {code}
+  on:click={() => {
+    copy(code);
+  }} />

docs/src/components/GlobalHeader.svelte

@@ -19,7 +19,7 @@
   rel="prefetch"
   aria-current={segment === undefined ? 'page' : undefined}>
   <SkipToContent />
-  <HeaderNav>
+  <!-- <HeaderNav>
     <HeaderNavItem
       rel="prefetch"
       href="about"
@@ -30,5 +30,5 @@
       href="components"
       text="Components"
       aria-current={segment === 'components' ? 'page' : undefined} />
-  </HeaderNav>
+  </HeaderNav> -->
 </Header>

docs/src/components/Portfolio.svelte

@@ -0,0 +1,228 @@
+<script>
+  import * as Carbon from "carbon-components-svelte";
+  import Add16 from "carbon-icons-svelte/lib/Add16";
+
+  let skeleton = false;
+  let accordionItemOpen = false;
+</script>
+
+<style>
+  :global(.tile-card) {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 12rem;
+  }
+
+  .title {
+    font-size: 0.75rem;
+  }
+
+  .tile-card__preview {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem 0;
+  }
+
+  .tile-card__actions {
+    display: none;
+  }
+
+  :global(.component-grid) {
+    margin-top: 1.5rem;
+  }
+
+  :global(.component-grid .scope:first-of-type) {
+    border-top: 1px solid var(--cds-ui-03);
+  }
+
+  :global(.scope) {
+    border-left: 1px solid var(--cds-ui-03);
+  }
+
+  :global(.scope > .bx--col) {
+    border-bottom: 1px solid var(--cds-ui-03);
+    border-right: 1px solid var(--cds-ui-03);
+  }
+</style>
+
+<Carbon.Row>
+  <Carbon.Column>
+    <Carbon.ToggleSmall bind:toggled={skeleton} labelText="Skeleton state" />
+  </Carbon.Column>
+</Carbon.Row>
+
+<div class="component-grid">
+
+  <Carbon.Row class="scope">
+    <Carbon.Column noGutter>
+      <Carbon.Tile class="tile-card">
+        <div class="title">Accordion</div>
+        <div class="tile-card__preview">
+          <Carbon.Accordion count={3} {skeleton} open={accordionItemOpen}>
+            <Carbon.AccordionItem title="Title 1" bind:open={accordionItemOpen}>
+              Content 1
+            </Carbon.AccordionItem>
+            <Carbon.AccordionItem title="Title 2">
+              Content 2
+            </Carbon.AccordionItem>
+            <Carbon.AccordionItem title="Title 3">
+              Content 3
+            </Carbon.AccordionItem>
+          </Carbon.Accordion>
+        </div>
+        <div class="tile-card__actions">Actions</div>
+      </Carbon.Tile>
+    </Carbon.Column>
+    <Carbon.Column noGutter>
+      <Carbon.Tile class="tile-card">
+        <div class="title">Breadcrumb</div>
+        <div class="tile-card__preview">
+          <Carbon.Breadcrumb {skeleton}>
+            <Carbon.BreadcrumbItem href="/">Breadcrumb 1</Carbon.BreadcrumbItem>
+            <Carbon.BreadcrumbItem href="/">Breadcrumb 2</Carbon.BreadcrumbItem>
+            <Carbon.BreadcrumbItem href="/">Breadcrumb 3</Carbon.BreadcrumbItem>
+          </Carbon.Breadcrumb>
+        </div>
+        <div class="tile-card__actions">Actions</div>
+      </Carbon.Tile>
+    </Carbon.Column>
+  </Carbon.Row>
+
+  <Carbon.Row class="scope">
+    <Carbon.Column noGutter>
+      <Carbon.Tile class="tile-card">
+        <div class="title">Primary button</div>
+        <div class="tile-card__preview">
+          <Carbon.Button {skeleton}>Primary</Carbon.Button>
+        </div>
+        <div class="tile-card__actions">Actions</div>
+      </Carbon.Tile>
+    </Carbon.Column>
+    <Carbon.Column noGutter>
+      <Carbon.Tile class="tile-card">
+        <div class="title">Secondary button</div>
+        <div class="tile-card__preview">
+          <Carbon.Button kind="secondary" {skeleton}>Secondary</Carbon.Button>
+        </div>
+        <div class="tile-card__actions">Actions</div>
+      </Carbon.Tile>
+    </Carbon.Column>
+    <Carbon.Column noGutter>
+      <Carbon.Tile class="tile-card">
+        <div class="title">Tertiary button</div>
+        <div class="tile-card__preview">
+          <Carbon.Button kind="tertiary" {skeleton}>Tertiary</Carbon.Button>
+        </div>
+        <div class="tile-card__actions">Actions</div>
+      </Carbon.Tile>
+    </Carbon.Column>
+    <Carbon.Column noGutter>
+      <Carbon.Tile class="tile-card">
+        <div class="title">Ghost button</div>
+        <div class="tile-card__preview">
+          <Carbon.Button kind="ghost" {skeleton}>Ghost</Carbon.Button>
+        </div>
+        <div class="tile-card__actions">Actions</div>
+      </Carbon.Tile>
+    </Carbon.Column>
+    <Carbon.Column noGutter>
+      <Carbon.Tile class="tile-card">
+        <div class="title">Danger button</div>
+        <div class="tile-card__preview">
+          <Carbon.Button kind="danger" {skeleton}>Danger</Carbon.Button>
+        </div>
+        <div class="tile-card__actions">Actions</div>
+      </Carbon.Tile>
+    </Carbon.Column>
+  </Carbon.Row>
+
+  <Carbon.Row class="scope">
+    <Carbon.Column noGutter>
+      <Carbon.Tile class="tile-card">
+        <div class="title">Primary button with icon</div>
+        <div class="tile-card__preview">
+          <Carbon.Button icon={Add16} {skeleton}>With icon</Carbon.Button>
+        </div>
+        <div class="tile-card__actions">Actions</div>
+      </Carbon.Tile>
+    </Carbon.Column>
+    <Carbon.Column noGutter>
+      <Carbon.Tile class="tile-card">
+        <div class="title">Icon-only buttons</div>
+        <div class="tile-card__preview">
+          <Carbon.Button
+            icon={Add16}
+            hasIconOnly
+            iconDescription="Primary"
+            tooltipPosition="bottom"
+            tooltipAlignment="center"
+            {skeleton} />
+          <Carbon.Button
+            icon={Add16}
+            hasIconOnly
+            kind="secondary"
+            iconDescription="Secondary"
+            tooltipPosition="bottom"
+            tooltipAlignment="center"
+            {skeleton} />
+          <Carbon.Button
+            icon={Add16}
+            hasIconOnly
+            kind="tertiary"
+            iconDescription="Tertiary"
+            tooltipPosition="bottom"
+            tooltipAlignment="center"
+            {skeleton} />
+          <Carbon.Button
+            icon={Add16}
+            hasIconOnly
+            kind="ghost"
+            iconDescription="Ghost"
+            tooltipPosition="bottom"
+            tooltipAlignment="center"
+            {skeleton} />
+          <Carbon.Button
+            icon={Add16}
+            hasIconOnly
+            kind="danger"
+            iconDescription="Danger"
+            tooltipPosition="bottom"
+            tooltipAlignment="center"
+            {skeleton} />
+        </div>
+        <div class="tile-card__actions">Actions</div>
+      </Carbon.Tile>
+    </Carbon.Column>
+  </Carbon.Row>
+
+  <Carbon.Row class="scope">
+    <Carbon.Column noGutter>
+      <Carbon.Tile class="tile-card">
+        <div class="title">Checkbox</div>
+        <div class="tile-card__preview">
+          <fieldset class="bx--fieldset">
+            <legend class="bx--label">Checkbox heading</legend>
+            <Carbon.Checkbox {skeleton} labelText="Checkbox label" />
+            <Carbon.Checkbox {skeleton} labelText="Checkbox label" />
+            <Carbon.Checkbox {skeleton} labelText="Checkbox label" />
+          </fieldset>
+        </div>
+        <div class="tile-card__actions">Actions</div>
+      </Carbon.Tile>
+    </Carbon.Column>
+    <Carbon.Column noGutter>
+      <Carbon.Tile class="tile-card">
+        <div class="title">Code Snippet</div>
+        <div class="tile-card__preview">
+          <Carbon.CodeSnippet type="single" light {skeleton}>
+            {`body { margin: 0; padding: 0; }`}
+          </Carbon.CodeSnippet>
+        </div>
+        <div class="tile-card__actions">Actions</div>
+      </Carbon.Tile>
+    </Carbon.Column>
+  </Carbon.Row>
+</div>

docs/src/routes/_layout.svelte

@@ -8,16 +8,25 @@
     Breadcrumb,
     BreadcrumbItem,
     Content,
+    SideNav,
+    SideNavItems,
+    SideNavMenu,
+    SideNavMenuItem,
+    SideNavLink,
   } from "carbon-components-svelte";
   import GlobalHeader from "../components/GlobalHeader.svelte";
-  import { setContext } from "svelte";
+  import Theme from "../components/Theme.svelte";
+  import { afterUpdate, setContext } from "svelte";
   import { writable } from "svelte/store";
 
   const tail = writable(undefined);
 
+  let prevSegment = undefined;
+
   const urlIds = {
     about: "About",
     components: "Components",
+    "getting-started": "Getting Started",
   };
 
   setContext("navigation", {
@@ -26,45 +35,73 @@
       tail.set(value);
     },
   });
+
+  afterUpdate(() => {
+    if (prevSegment !== segment) {
+      if (prevSegment !== undefined) {
+        tail.set(undefined);
+      }
+
+      prevSegment = segment;
+    }
+  });
 </script>
 
 <style>
-  :global(#sapper) {
-    min-height: 100vh;
+  :global(.bx--row h1) {
+    margin-bottom: 2.5rem;
   }
 
-  :global(.bx--content) {
-    padding: 0;
+  :global(.bx--row p) {
+    margin-bottom: 1.5rem;
   }
 </style>
 
 {#if segment !== 'examples'}
   <GlobalHeader {segment} />
+  <SideNav isOpen={true}>
+    <SideNavItems>
+      <SideNavLink
+        text="Getting Started"
+        href="getting-started"
+        isSelected={segment === 'getting-started'} />
+      <SideNavMenu
+        text="Components"
+        expanded={segment === 'components'}
+        isSelected={segment === 'components' && !$tail}>
+        <SideNavMenuItem
+          text="Index"
+          href="components"
+          isSelected={segment === 'components' && $tail && $tail.slug === 'index'} />
+        <SideNavMenuItem
+          text="Button"
+          href="components/button"
+          isSelected={segment === 'components' && $tail && $tail.slug === 'button'} />
+      </SideNavMenu>
+    </SideNavItems>
+  </SideNav>
   <Content>
     <Grid>
       <Row>
-        <Column>
-          <Breadcrumb style="margin-top: 1rem">
+        <Column
+          style="display: flex; align-items: center; justify-content:
+          space-between;">
+          <Breadcrumb>
             <BreadcrumbItem href="." isCurrentPage={!$tail && !segment}>
               Home
             </BreadcrumbItem>
-            {#if segment}
+            {#if segment && $tail}
               <BreadcrumbItem href={segment} isCurrentPage={!$tail}>
                 {urlIds[segment]}
               </BreadcrumbItem>
             {/if}
-            {#if segment && $tail}
-              <BreadcrumbItem
-                href="{segment}/{$tail.slug}"
-                isCurrentPage
-                hideTrailingSlash>
-                {$tail.title}
-              </BreadcrumbItem>
-            {/if}
           </Breadcrumb>
-          <slot />
+          <div>
+            <Theme />
+          </div>
         </Column>
       </Row>
+      <slot />
     </Grid>
   </Content>
 {:else}

docs/src/routes/about.svelte

@@ -1,6 +0,0 @@
-<h1>About</h1>
-
-<p>
-  <code>carbon-components-svelte</code>
-  is the Svelte implementation of the Carbon Design System
-</p>

docs/src/routes/components/[slug].json.js

@@ -2,8 +2,8 @@ import components from "./_components.js";
 
 const componentsMap = new Map();
 
-components.forEach((post) => {
-  componentsMap.set(post.slug, JSON.stringify(post));
+components.forEach(($) => {
+  componentsMap.set($.slug, JSON.stringify($));
 });
 
 export function get(req, res, next) {

docs/src/routes/components/[slug].svelte

@@ -15,10 +15,35 @@
   export let data = {};
 
   import { onMount, getContext } from "svelte";
+  import {
+    Grid,
+    Row,
+    Column,
+    CodeSnippet,
+    FormGroup,
+    RadioButtonGroup,
+    RadioButton,
+  } from "carbon-components-svelte";
+  import copy from "clipboard-copy";
 
   const ctx = getContext("navigation");
 
   let component = undefined;
+  let defaultProps = {};
+
+  $: props = data.props || {};
+  $: {
+    if (data.props) {
+      Object.keys(data.props).forEach((prop) => {
+        if (!(prop in defaultProps)) {
+          defaultProps = {
+            ...defaultProps,
+            [prop]: data.props[prop].default,
+          };
+        }
+      });
+    }
+  }
 
   onMount(async () => {
     ctx.setTail(data);
@@ -37,20 +62,24 @@
 
 <style>
   .preview {
-    margin-left: -1rem;
-    margin-right: -1rem;
+    width: 100%;
+    min-height: 8rem;
+    margin-bottom: 2.5rem;
     padding: 1rem;
     white-space: nowrap;
     overflow-x: auto;
+    background-color: var(--cds-ui-01);
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  :global(.preview h4) {
+    margin-bottom: 0.75rem;
+    font-size: 1rem;
+    color: var(--cds-text-02);
   }
 
   :global(.preview > div) {
-    margin-bottom: 1rem;
-  }
-
-  h1 {
-    margin-top: 0.5rem;
-    margin-bottom: 1rem;
+    margin-bottom: 2.5rem;
   }
 </style>
 
@@ -58,9 +87,44 @@
   <title>{data.title}</title>
 </svelte:head>
 
-<h1>{data.title}</h1>
-<div class="preview">
-  {#if component}
-    <svelte:component this={component.default} />
-  {/if}
-</div>
+<Row>
+  <Column>
+    <h1>{data.title}</h1>
+  </Column>
+</Row>
+
+<Row noGutter>
+  <div class="preview">
+    {#if component}
+      <svelte:component this={component.default} {...defaultProps} />
+    {/if}
+  </div>
+</Row>
+
+<Row>
+  <Column md={3} lg={4}>
+    {#each Object.keys(props) as key}
+      {#if Array.isArray(props[key].values)}
+        <FormGroup legendText={key}>
+          <RadioButtonGroup
+            selected={props[key].default}
+            on:change={({ detail }) => {
+              defaultProps = { ...defaultProps, [key]: detail };
+            }}>
+            {#each props[key].values as value}
+              <RadioButton {value} id={value} labelText={value} />
+            {/each}
+          </RadioButtonGroup>
+        </FormGroup>
+      {/if}
+    {/each}
+  </Column>
+  <Column md={5}>
+    <CodeSnippet
+      type="multi"
+      code={data.source}
+      on:click={() => {
+        copy(data.source);
+      }} />
+  </Column>
+</Row>

docs/src/routes/components/_components.js

@@ -1,6 +1,19 @@
+import fs from "fs";
+import path from "path";
+
 const components = [
   {
     title: "Button",
+    source: fs.readFileSync(
+      path.resolve(process.cwd(), "./src/routes/examples/Button.svelte"),
+      "utf8"
+    ),
+    props: {
+      size: {
+        values: ["default", "field", "small"],
+        default: "default",
+      },
+    },
   },
 ].map((post) => ({
   ...post,

docs/src/routes/components/index.svelte

@@ -10,7 +10,13 @@
   export let data = [];
 
   import { getContext, onMount } from "svelte";
-  import { UnorderedList, ListItem, Link } from "carbon-components-svelte";
+  import {
+    Row,
+    Column,
+    UnorderedList,
+    ListItem,
+    Link,
+  } from "carbon-components-svelte";
 
   const ctx = getContext("navigation");
 
@@ -31,22 +37,19 @@
   });
 </script>
 
-<style>
-  h1 {
-    margin-top: 0.5rem;
-    margin-bottom: 1rem;
-  }
-</style>
-
 <svelte:head>
   <title>Components</title>
 </svelte:head>
 
-<h1>Components</h1>
-<UnorderedList>
-  {#each data as data, i (data.title)}
-    <ListItem>
-      <Link rel="prefetch" href="components/{data.slug}">{data.title}</Link>
-    </ListItem>
-  {/each}
-</UnorderedList>
+<Row>
+  <Column>
+    <h1>Components</h1>
+    <UnorderedList>
+      {#each data as data, i (data.title)}
+        <ListItem>
+          <Link rel="prefetch" href="components/{data.slug}">{data.title}</Link>
+        </ListItem>
+      {/each}
+    </UnorderedList>
+  </Column>
+</Row>

docs/src/routes/examples/Button.svelte

@@ -4,8 +4,9 @@
 </script>
 
 <div>
+  <h4>Buttons</h4>
   <Button
-    data-test="button-primary"
+    {...$$props}
     kind="primary"
     on:click={() => console.log('click')}
     on:mouseover={() => console.log('mouseover')}
@@ -13,29 +14,73 @@
     on:mouseleave={() => console.log('mouseleave')}>
     Primary button
   </Button>
-  <Button kind="secondary">Secondary button</Button>
-  <Button kind="tertiary">Tertiary button</Button>
-  <Button kind="ghost">Ghost button</Button>
-  <Button kind="danger">Danger button</Button>
+
+  <Button {...$$props} kind="secondary">Secondary button</Button>
+
+  <Button {...$$props} kind="tertiary">Tertiary button</Button>
+
+  <Button {...$$props} kind="ghost">Ghost button</Button>
+
+  <Button {...$$props} kind="danger">Danger button</Button>
 </div>
+
 <div>
-  <Button kind="primary" size="field">Primary button</Button>
-  <Button kind="secondary" size="field">Secondary button</Button>
-  <Button kind="tertiary" size="field">Tertiary button</Button>
-  <Button kind="ghost" size="field">Ghost button</Button>
-  <Button kind="danger" size="field">Danger button</Button>
+  <h4>Buttons with Icons</h4>
+  <Button {...$$props} kind="primary" icon={Add16}>Primary</Button>
+
+  <Button {...$$props} kind="secondary" icon={Add16}>Secondary</Button>
+
+  <Button {...$$props} kind="tertiary" icon={Add16}>Tertiary</Button>
+
+  <Button {...$$props} kind="ghost" icon={Add16}>Ghost</Button>
+
+  <Button {...$$props} kind="danger" icon={Add16}>Danger</Button>
 </div>
+
 <div>
-  <Button kind="primary" size="small">Primary button</Button>
-  <Button kind="secondary" size="small">Secondary button</Button>
-  <Button kind="tertiary" size="small">Tertiary button</Button>
-  <Button kind="ghost" size="small">Ghost button</Button>
-  <Button kind="danger" size="small">Danger button</Button>
-</div>
-<div>
-  <Button kind="primary" size="small" icon={Add16}>Primary button</Button>
-  <Button kind="secondary" size="small" icon={Add16}>Secondary button</Button>
-  <Button kind="tertiary" size="small" icon={Add16}>Tertiary button</Button>
-  <Button kind="ghost" size="small" icon={Add16}>Ghost button</Button>
-  <Button kind="danger" size="small" icon={Add16}>Danger button</Button>
+  <h4>Icon-only Buttons</h4>
+  <Button
+    {...$$props}
+    kind="primary"
+    hasIconOnly
+    icon={Add16}
+    iconDescription="Primary"
+    tooltipPosition="bottom"
+    tooltipAlignment="center" />
+
+  <Button
+    {...$$props}
+    kind="secondary"
+    hasIconOnly
+    icon={Add16}
+    iconDescription="Secondary"
+    tooltipPosition="bottom"
+    tooltipAlignment="center" />
+
+  <Button
+    {...$$props}
+    kind="tertiary"
+    hasIconOnly
+    icon={Add16}
+    iconDescription="Tertiary"
+    tooltipPosition="bottom"
+    tooltipAlignment="center" />
+
+  <Button
+    {...$$props}
+    kind="ghost"
+    hasIconOnly
+    icon={Add16}
+    iconDescription="Ghost"
+    tooltipPosition="bottom"
+    tooltipAlignment="center" />
+
+  <Button
+    {...$$props}
+    kind="danger"
+    hasIconOnly
+    icon={Add16}
+    iconDescription="Danger"
+    tooltipPosition="bottom"
+    tooltipAlignment="center" />
 </div>

docs/src/routes/getting-started/index.svelte

@@ -0,0 +1,53 @@
+<script>
+  import { Tabs, Tab, TabContent, Row, Column } from "carbon-components-svelte";
+  import CopyableCodeSnippet from "../../components/CopyableCodeSnippet.svelte";
+</script>
+
+<style>
+  .content {
+    margin-left: -1rem;
+    margin-top: -1rem;
+  }
+</style>
+
+<svelte:head>
+  <title>Getting Started</title>
+</svelte:head>
+<Row>
+  <Column>
+    <h1>Getting Started</h1>
+    <p>
+      <CopyableCodeSnippet type="inline" code="carbon-components-svelte" />
+      can be installed as a development dependency.
+    </p>
+    <p>
+      <Tabs type="container">
+        <Tab label="Yarn" />
+        <Tab label="NPM" />
+        <div slot="content" class="content">
+          <TabContent>
+            <CopyableCodeSnippet
+              code={`yarn add -D carbon-components-svelte`} />
+          </TabContent>
+          <TabContent>
+            <CopyableCodeSnippet code={`npm -i -D carbon-components-svelte`} />
+          </TabContent>
+        </div>
+      </Tabs>
+    </p>
+  </Column>
+</Row>
+<!-- 
+<div style="margin-left: -1rem; margin-right: -1rem;">
+  <Tabs type="container">
+    <Tab label="Rapid Prototyping" />
+    <Tab label="Single-Page Application (SPA)" />
+    <Tab label="Server-side Rendered (SSR)" />
+    <div slot="content" class="content">
+      <TabContent>1</TabContent>
+      <TabContent>2</TabContent>
+      <TabContent>3</TabContent>
+    </div>
+  </Tabs>
+</div>
+ -->

docs/src/routes/index.svelte

@@ -1,7 +1,13 @@
 <script>
-  import Theme from "../components/Theme.svelte";
+  import Portfolio from "../components/Portfolio.svelte";
 </script>
 
-<h1>Welcome</h1>
+<style>
+  h1 {
+    margin-bottom: 1rem;
+  }
+</style>
 
-<Theme />
+<h1>Component Grid</h1>
+
+<Portfolio />

docs/yarn.lock

@@ -876,6 +876,11 @@ cli-truncate@^0.2.1:
     slice-ansi "0.0.4"
     string-width "^1.0.1"
 
+clipboard-copy@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/clipboard-copy/-/clipboard-copy-3.1.0.tgz#4c59030a43d4988990564a664baeafba99f78ca4"
+  integrity sha512-Xsu1NddBXB89IUauda5BIq3Zq73UWkjkaQlPQbLNvNsd5WBMnTWPNKYR6HGaySOxGYZ+BKxP2E9X4ElnI3yiPA==
+
 cliui@^5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"