index.test.js.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`addon Info should render <Info /> and external markdown 1`] = `
<Component>
  <Story
    PropTable={[Function]}
    components={
      Object {
        "a": [Function],
        "code": [Function],
        "h1": [Function],
        "h2": [Function],
        "h3": [Function],
        "h4": [Function],
        "h5": [Function],
        "h6": [Function],
        "li": [Function],
        "p": [Function],
        "ul": [Function],
      }
    }
    context={Object {}}
    excludedPropTypes={Array []}
    info="<h1>HTML Mock</h1>"
    maxPropArrayLength={3}
    maxPropObjectKeys={3}
    maxPropStringLength={50}
    maxPropsIntoLine={3}
    propTableCompare={[Function]}
    propTables={Array []}
    propTablesExclude={Array []}
    showHeader={true}
    showInline={false}
    showSource={true}
    styles={[Function]}
  >
    <div
      style={
        Object {
          "position": "relative",
          "zIndex": 0,
        }
      }
    >
      <div>
        It's a 
         story:
        <TestComponent
          array={
            Array [
              1,
              2,
              3,
            ]
          }
          bool={true}
          func={[Function]}
          number={7}
          obj={
            Object {
              "a": "a",
              "b": "b",
            }
          }
          string="seven"
        >
          <div>
            <h1>
              x =&gt; x + 1
            </h1>
            <h2>
              [object Object]
            </h2>
            <h3>
              1,2,3
            </h3>
            <h4>
              7
            </h4>
            <h5>
              seven
            </h5>
            <h6>
              true
            </h6>
            <p>
              undefined
            </p>
            <a
              href="#"
            >
              test
            </a>
            <code>
              storiesOf
            </code>
            <ul>
              <li>
                1
              </li>
              <li>
                2
              </li>
            </ul>
          </div>
        </TestComponent>
      </div>
    </div>
    <button
      className="info__show-button"
      onClick={[Function]}
      style={
        Object {
          "background": "#027ac5",
          "border": "none",
          "borderRadius": "0 0 0 5px",
          "color": "#fff",
          "cursor": "pointer",
          "display": "block",
          "fontFamily": "sans-serif",
          "fontSize": "12px",
          "padding": "5px 15px",
          "position": "fixed",
          "right": 0,
          "top": 0,
        }
      }
      type="button"
    >
      Show Info
    </button>
  </Story>
</Component>
`;

exports[`addon Info should render <Info /> and markdown 1`] = `
<Component>
  <Story
    PropTable={[Function]}
    components={
      Object {
        "a": [Function],
        "code": [Function],
        "h1": [Function],
        "h2": [Function],
        "h3": [Function],
        "h4": [Function],
        "h5": [Function],
        "h6": [Function],
        "li": [Function],
        "p": [Function],
        "ul": [Function],
      }
    }
    context={Object {}}
    excludedPropTypes={Array []}
    info="# Test story
## with markdown info
containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
    maxPropArrayLength={3}
    maxPropObjectKeys={3}
    maxPropStringLength={50}
    maxPropsIntoLine={3}
    propTableCompare={[Function]}
    propTables={Array []}
    propTablesExclude={Array []}
    showHeader={true}
    showInline={false}
    showSource={true}
    styles={[Function]}
  >
    <div
      style={
        Object {
          "position": "relative",
          "zIndex": 0,
        }
      }
    >
      <div>
        It's a 
         story:
        <TestComponent
          array={
            Array [
              1,
              2,
              3,
            ]
          }
          bool={true}
          func={[Function]}
          number={7}
          obj={
            Object {
              "a": "a",
              "b": "b",
            }
          }
          string="seven"
        >
          <div>
            <h1>
              x =&gt; x + 1
            </h1>
            <h2>
              [object Object]
            </h2>
            <h3>
              1,2,3
            </h3>
            <h4>
              7
            </h4>
            <h5>
              seven
            </h5>
            <h6>
              true
            </h6>
            <p>
              undefined
            </p>
            <a
              href="#"
            >
              test
            </a>
            <code>
              storiesOf
            </code>
            <ul>
              <li>
                1
              </li>
              <li>
                2
              </li>
            </ul>
          </div>
        </TestComponent>
      </div>
    </div>
    <button
      className="info__show-button"
      onClick={[Function]}
      style={
        Object {
          "background": "#027ac5",
          "border": "none",
          "borderRadius": "0 0 0 5px",
          "color": "#fff",
          "cursor": "pointer",
          "display": "block",
          "fontFamily": "sans-serif",
          "fontSize": "12px",
          "padding": "5px 15px",
          "position": "fixed",
          "right": 0,
          "top": 0,
        }
      }
      type="button"
    >
      Show Info
    </button>
  </Story>
</Component>
`;

exports[`addon Info should render <Info /> for memoized component 1`] = `
<Component>
  <Story
    PropTable={[Function]}
    components={
      Object {
        "a": [Function],
        "code": [Function],
        "h1": [Function],
        "h2": [Function],
        "h3": [Function],
        "h4": [Function],
        "h5": [Function],
        "h6": [Function],
        "li": [Function],
        "p": [Function],
        "ul": [Function],
      }
    }
    context={Object {}}
    excludedPropTypes={Array []}
    info=""
    maxPropArrayLength={3}
    maxPropObjectKeys={3}
    maxPropStringLength={50}
    maxPropsIntoLine={3}
    propTableCompare={[Function]}
    propTables={null}
    propTablesExclude={Array []}
    showHeader={true}
    showInline={false}
    showSource={true}
    styles={[Function]}
  >
    <div
      style={
        Object {
          "position": "relative",
          "zIndex": 0,
        }
      }
    >
      <div>
        It's a 
         story:
        <Memo(TestComponent)
          array={
            Array [
              1,
              2,
              3,
            ]
          }
          bool={true}
          func={[Function]}
          number={7}
          obj={
            Object {
              "a": "a",
              "b": "b",
            }
          }
          string="seven"
        >
          <div>
            <h1>
              x =&gt; x + 1
            </h1>
            <h2>
              [object Object]
            </h2>
            <h3>
              1,2,3
            </h3>
            <h4>
              7
            </h4>
            <h5>
              seven
            </h5>
            <h6>
              true
            </h6>
            <p>
              undefined
            </p>
            <a
              href="#"
            >
              test
            </a>
            <code>
              storiesOf
            </code>
            <ul>
              <li>
                1
              </li>
              <li>
                2
              </li>
            </ul>
          </div>
        </Memo(TestComponent)>
      </div>
    </div>
    <button
      className="info__show-button"
      onClick={[Function]}
      style={
        Object {
          "background": "#027ac5",
          "border": "none",
          "borderRadius": "0 0 0 5px",
          "color": "#fff",
          "cursor": "pointer",
          "display": "block",
          "fontFamily": "sans-serif",
          "fontSize": "12px",
          "padding": "5px 15px",
          "position": "fixed",
          "right": 0,
          "top": 0,
        }
      }
      type="button"
    >
      Show Info
    </button>
  </Story>
</Component>
`;

exports[`addon Info should render component description if story kind matches component 1`] = `
.emotion-10 {
  position: relative;
  overflow: hidden;
  color: #333333;
  border: 1px solid rgba(0,0,0,.1);
  background: #FFFFFF;
}

.emotion-5 {
  position: relative;
}

.emotion-5 code {
  padding-right: 10px;
}

.emotion-5 * .token {
  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
  -webkit-font-smoothing: antialiased;
}

.emotion-5 * .token.comment {
  color: #008000;
  font-style: italic;
}

.emotion-5 * .token.prolog {
  color: #008000;
  font-style: italic;
}

.emotion-5 * .token.doctype {
  color: #008000;
  font-style: italic;
}

.emotion-5 * .token.cdata {
  color: #008000;
  font-style: italic;
}

.emotion-5 * .token.string {
  color: #A31515;
}

.emotion-5 * .token.punctuation {
  color: #393A34;
}

.emotion-5 * .token.operator {
  color: #393A34;
}

.emotion-5 * .token.url {
  color: #36acaa;
}

.emotion-5 * .token.symbol {
  color: #36acaa;
}

.emotion-5 * .token.number {
  color: #36acaa;
}

.emotion-5 * .token.boolean {
  color: #36acaa;
}

.emotion-5 * .token.variable {
  color: #36acaa;
}

.emotion-5 * .token.constant {
  color: #36acaa;
}

.emotion-5 * .token.inserted {
  color: #36acaa;
}

.emotion-5 * .token.atrule {
  color: #0000ff;
}

.emotion-5 * .token.keyword {
  color: #0000ff;
}

.emotion-5 * .token.attr-value {
  color: #0000ff;
}

.emotion-5 * .token.function {
  color: #393A34;
}

.emotion-5 * .token.deleted {
  color: #9a050f;
}

.emotion-5 * .token.important {
  font-weight: bold;
}

.emotion-5 * .token.bold {
  font-weight: bold;
}

.emotion-5 * .token.italic {
  font-style: italic;
}

.emotion-5 * .token.class-name {
  color: #2B91AF;
}

.emotion-5 * .token.tag {
  color: #800000;
}

.emotion-5 * .token.selector {
  color: #800000;
}

.emotion-5 * .token.attr-name {
  color: #ff0000;
}

.emotion-5 * .token.property {
  color: #ff0000;
}

.emotion-5 * .token.regex {
  color: #ff0000;
}

.emotion-5 * .token.entity {
  color: #ff0000;
}

.emotion-5 * .token.directive.tag .tag {
  background: #ffff00;
  color: #393A34;
}

.emotion-5 * .language-json .token.boolean {
  color: #0000ff;
}

.emotion-5 * .language-json .token.number {
  color: #0000ff;
}

.emotion-5 * .language-json .token.property {
  color: #2B91AF;
}

.emotion-5 * .namespace {
  opacity: 0.7;
}

.emotion-2 {
  overflow-y: auto;
  height: 100%;
  overflow-x: auto;
  width: 100%;
  position: relative;
}

.emotion-2 code {
  padding-right: 10px;
}

.emotion-2 * .token {
  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
  -webkit-font-smoothing: antialiased;
}

.emotion-2 * .token.comment {
  color: #008000;
  font-style: italic;
}

.emotion-2 * .token.prolog {
  color: #008000;
  font-style: italic;
}

.emotion-2 * .token.doctype {
  color: #008000;
  font-style: italic;
}

.emotion-2 * .token.cdata {
  color: #008000;
  font-style: italic;
}

.emotion-2 * .token.string {
  color: #A31515;
}

.emotion-2 * .token.punctuation {
  color: #393A34;
}

.emotion-2 * .token.operator {
  color: #393A34;
}

.emotion-2 * .token.url {
  color: #36acaa;
}

.emotion-2 * .token.symbol {
  color: #36acaa;
}

.emotion-2 * .token.number {
  color: #36acaa;
}

.emotion-2 * .token.boolean {
  color: #36acaa;
}

.emotion-2 * .token.variable {
  color: #36acaa;
}

.emotion-2 * .token.constant {
  color: #36acaa;
}

.emotion-2 * .token.inserted {
  color: #36acaa;
}

.emotion-2 * .token.atrule {
  color: #0000ff;
}

.emotion-2 * .token.keyword {
  color: #0000ff;
}

.emotion-2 * .token.attr-value {
  color: #0000ff;
}

.emotion-2 * .token.function {
  color: #393A34;
}

.emotion-2 * .token.deleted {
  color: #9a050f;
}

.emotion-2 * .token.important {
  font-weight: bold;
}

.emotion-2 * .token.bold {
  font-weight: bold;
}

.emotion-2 * .token.italic {
  font-style: italic;
}

.emotion-2 * .token.class-name {
  color: #2B91AF;
}

.emotion-2 * .token.tag {
  color: #800000;
}

.emotion-2 * .token.selector {
  color: #800000;
}

.emotion-2 * .token.attr-name {
  color: #ff0000;
}

.emotion-2 * .token.property {
  color: #ff0000;
}

.emotion-2 * .token.regex {
  color: #ff0000;
}

.emotion-2 * .token.entity {
  color: #ff0000;
}

.emotion-2 * .token.directive.tag .tag {
  background: #ffff00;
  color: #393A34;
}

.emotion-2 * .language-json .token.boolean {
  color: #0000ff;
}

.emotion-2 * .language-json .token.number {
  color: #0000ff;
}

.emotion-2 * .language-json .token.property {
  color: #2B91AF;
}

.emotion-2 * .namespace {
  opacity: 0.7;
}

.emotion-1 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  margin: 0;
  padding: 10px;
}

.emotion-0 {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding-right: 0;
  opacity: 1;
}

.emotion-9 {
  position: absolute;
  bottom: 0;
  right: 0;
  max-width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: #FFFFFF;
  z-index: 1;
}

.emotion-8 {
  border: 0 none;
  padding: 4px 10px;
  cursor: pointer;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #333333;
  background: #FFFFFF;
  font-size: 12px;
  line-height: 16px;
  font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight: 700;
  border-top: 1px solid rgba(0,0,0,.1);
  border-left: 1px solid rgba(0,0,0,.1);
  margin-left: -1px;
  border-radius: 4px 0 0 0;
}

.emotion-8:not(:last-child) {
  border-right: 1px solid rgba(0,0,0,.1);
}

.emotion-8 + * {
  border-left: 1px solid rgba(0,0,0,.1);
  border-radius: 0;
}

.emotion-8:focus {
  box-shadow: #1EA7FD 0 -3px 0 0 inset;
  outline: 0 none;
}

<Info>
  <Story
    PropTable={[Function]}
    components={
      Object {
        "a": [Function],
        "code": [Function],
        "h1": [Function],
        "h2": [Function],
        "h3": [Function],
        "h4": [Function],
        "h5": [Function],
        "h6": [Function],
        "li": [Function],
        "p": [Function],
        "ul": [Function],
      }
    }
    context={
      Object {
        "kind": "TestComponent",
        "name": "Basic test",
      }
    }
    excludedPropTypes={Array []}
    info=""
    maxPropArrayLength={3}
    maxPropObjectKeys={3}
    maxPropStringLength={50}
    maxPropsIntoLine={3}
    propTableCompare={[Function]}
    propTables={null}
    propTablesExclude={Array []}
    showHeader={true}
    showInline={true}
    showSource={true}
    styles={[Function]}
  >
    <div>
      <div
        style={
          Object {
            "backgroundColor": "#fff",
            "borderRadius": "2px",
            "color": "black",
            "fontFamily": "Helvetica Neue, Helvetica, Segoe UI, Arial, freesans, sans-serif",
            "fontSize": "15px",
            "fontWeight": 300,
            "lineHeight": 1.45,
            "padding": "20px 40px 40px",
          }
        }
      >
        <div
          style={
            Object {
              "borderBottom": "1px solid #eee",
              "marginBottom": 10,
              "paddingTop": 10,
            }
          }
        >
          <h1
            style={
              Object {
                "fontSize": "35px",
                "margin": 0,
                "padding": 0,
              }
            }
          >
            TestComponent
          </h1>
          <h2
            style={
              Object {
                "fontSize": "22px",
                "fontWeight": 400,
                "margin": "0 0 10px 0",
                "padding": 0,
              }
            }
          >
            Basic test
          </h2>
        </div>
      </div>
    </div>
    <div
      id="story-root"
      style={Object {}}
    >
      <div>
        It's a 
        Basic test
         story:
        <TestComponent
          array={
            Array [
              1,
              2,
              3,
            ]
          }
          bool={true}
          func={[Function]}
          number={7}
          obj={
            Object {
              "a": "a",
              "b": "b",
            }
          }
          string="seven"
        >
          <div>
            <h1>
              x =&gt; x + 1
            </h1>
            <h2>
              [object Object]
            </h2>
            <h3>
              1,2,3
            </h3>
            <h4>
              7
            </h4>
            <h5>
              seven
            </h5>
            <h6>
              true
            </h6>
            <p>
              undefined
            </p>
            <a
              href="#"
            >
              test
            </a>
            <code>
              storiesOf
            </code>
            <ul>
              <li>
                1
              </li>
              <li>
                2
              </li>
            </ul>
          </div>
        </TestComponent>
      </div>
    </div>
    <div>
      <div
        style={
          Object {
            "backgroundColor": "#fff",
            "borderRadius": "2px",
            "color": "black",
            "fontFamily": "Helvetica Neue, Helvetica, Segoe UI, Arial, freesans, sans-serif",
            "fontSize": "15px",
            "fontWeight": 300,
            "lineHeight": 1.45,
            "padding": "20px 40px 40px",
          }
        }
      >
        <H1
          context={Object {}}
          id="awesome-test-component-description"
          key="0"
        >
          <h1
            id="awesome-test-component-description"
            style={
              Object {
                "borderBottom": "1px solid #eee",
                "fontSize": "40px",
                "fontWeight": 600,
                "margin": 0,
                "padding": 0,
              }
            }
          >
            Awesome test component description
          </h1>
        </H1>
        <H2
          context={Object {}}
          id="awesome-test-component-description-with-markdown-support"
          key="1"
        >
          <h2
            id="awesome-test-component-description-with-markdown-support"
            style={
              Object {
                "fontSize": "30px",
                "fontWeight": 600,
                "margin": 0,
                "padding": 0,
              }
            }
          >
            with markdown support
          </h2>
        </H2>
        <P
          context={Object {}}
          key="4"
        >
          <p>
            <strong
              key="2"
            >
              bold
            </strong>
             
            <em
              key="3"
            >
              cursive
            </em>
          </p>
        </P>
        <Code
          code="a;"
          key="5"
          language="js"
        >
          <ThemeProvider
            theme={
              Object {
                "addonActionsTheme": Object {
                  "ARROW_ANIMATION_DURATION": "0",
                  "ARROW_COLOR": "rgba(0,0,0,0.3)",
                  "ARROW_FONT_SIZE": 8,
                  "ARROW_MARGIN_RIGHT": 4,
                  "BASE_BACKGROUND_COLOR": "transparent",
                  "BASE_COLOR": "#333333",
                  "BASE_FONT_FAMILY": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
                  "BASE_FONT_SIZE": 13,
                  "BASE_LINE_HEIGHT": "18px",
                  "HTML_ATTRIBUTE_NAME_COLOR": "rgb(153, 69, 0)",
                  "HTML_ATTRIBUTE_VALUE_COLOR": "rgb(26, 26, 166)",
                  "HTML_COMMENT_COLOR": "rgb(35, 110, 37)",
                  "HTML_DOCTYPE_COLOR": "rgb(192, 192, 192)",
                  "HTML_TAGNAME_COLOR": "rgb(136, 18, 128)",
                  "HTML_TAGNAME_TEXT_TRANSFORM": "lowercase",
                  "HTML_TAG_COLOR": "rgb(168, 148, 166)",
                  "OBJECT_NAME_COLOR": "rgb(136, 19, 145)",
                  "OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES": 10,
                  "OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES": 5,
                  "OBJECT_VALUE_BOOLEAN_COLOR": "rgb(28, 0, 207)",
                  "OBJECT_VALUE_FUNCTION_PREFIX_COLOR": "rgb(13, 34, 170)",
                  "OBJECT_VALUE_NULL_COLOR": "rgb(128, 128, 128)",
                  "OBJECT_VALUE_NUMBER_COLOR": "rgb(28, 0, 207)",
                  "OBJECT_VALUE_REGEXP_COLOR": "rgb(196, 26, 22)",
                  "OBJECT_VALUE_STRING_COLOR": "rgb(196, 26, 22)",
                  "OBJECT_VALUE_SYMBOL_COLOR": "rgb(196, 26, 22)",
                  "OBJECT_VALUE_UNDEFINED_COLOR": "rgb(128, 128, 128)",
                  "TABLE_BORDER_COLOR": "#aaa",
                  "TABLE_DATA_BACKGROUND_IMAGE": "linear-gradient(to bottom, white, white 50%, rgb(234, 243, 255) 50%, rgb(234, 243, 255))",
                  "TABLE_DATA_BACKGROUND_SIZE": "128px 32px",
                  "TABLE_SORT_ICON_COLOR": "#6e6e6e",
                  "TABLE_TH_BACKGROUND_COLOR": "#eee",
                  "TABLE_TH_HOVER_COLOR": "hsla(0, 0%, 90%, 1)",
                  "TREENODE_FONT_FAMILY": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
                  "TREENODE_FONT_SIZE": 13,
                  "TREENODE_LINE_HEIGHT": "18px",
                  "TREENODE_PADDING_LEFT": 12,
                },
                "animation": Object {
                  "float": Object {
                    "anim": 1,
                    "name": "animation-6tolu8",
                    "styles": "@keyframes animation-6tolu8{
  0% { transform: translateY(1px); }
  25% { transform: translateY(0px); }
  50% { transform: translateY(-3px); }
  100% { transform: translateY(1px); }
}",
                    "toString": [Function],
                  },
                  "glow": Object {
                    "anim": 1,
                    "name": "animation-r0iffl",
                    "styles": "@keyframes animation-r0iffl{
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}",
                    "toString": [Function],
                  },
                  "hoverable": Object {
                    "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9hbmltYXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0NxQiIsImZpbGUiOiIuLi9zcmMvYW5pbWF0aW9uLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuZXhwb3J0IGNvbnN0IGVhc2luZyA9IHtcbiAgcnViYmVyOiAnY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMzUsIDEuMDUpJyxcbn07XG5cbmNvbnN0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2Bcblx0ZnJvbSB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG5cdH1cblx0dG8ge1xuXHRcdHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG5cdH1cbmA7XG5cbmNvbnN0IGdsb3cgPSBrZXlmcmFtZXNgXG4gIDAlLCAxMDAlIHsgb3BhY2l0eTogMTsgfVxuICA1MCUgeyBvcGFjaXR5OiAuNDsgfVxuYDtcblxuY29uc3QgZmxvYXQgPSBrZXlmcmFtZXNgXG4gIDAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDFweCk7IH1cbiAgMjUlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDBweCk7IH1cbiAgNTAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0zcHgpOyB9XG4gIDEwMCUgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMXB4KTsgfVxuYDtcblxuY29uc3QgamlnZ2xlID0ga2V5ZnJhbWVzYFxuICAwJSwgMTAwJSB7IHRyYW5zZm9ybTp0cmFuc2xhdGUzZCgwLDAsMCk7IH1cbiAgMTIuNSUsIDYyLjUlIHsgdHJhbnNmb3JtOnRyYW5zbGF0ZTNkKC00cHgsMCwwKTsgfVxuICAzNy41JSwgODcuNSUgeyAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCg0cHgsMCwwKTsgIH1cbmA7XG5cbmNvbnN0IGlubGluZUdsb3cgPSBjc3NgXG4gIGFuaW1hdGlvbjogJHtnbG93fSAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xuICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcHJvZ3Jlc3M7XG5gO1xuXG4vLyBob3ZlciAmIGFjdGl2ZSBzdGF0ZSBmb3IgbGlua3MgYW5kIGJ1dHRvbnNcbmNvbnN0IGhvdmVyYWJsZSA9IGNzc2BcbiAgdHJhbnNpdGlvbjogYWxsIDE1MG1zIGVhc2Utb3V0O1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgLTJweCwgMCk7XG4gIH1cblxuICAmOmFjdGl2ZSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGFuaW1hdGlvbiA9IHtcbiAgcm90YXRlMzYwLFxuICBnbG93LFxuICBmbG9hdCxcbiAgamlnZ2xlLFxuICBpbmxpbmVHbG93LFxuICBob3ZlcmFibGUsXG59O1xuIl19 */",
                    "name": "1o7rzh8-hoverable",
                    "styles": "transition:all 150ms ease-out;transform:translate3d(0,0,0);&:hover{transform:translate3d(0,-2px,0);}&:active{transform:translate3d(0,0,0);};label:hoverable;",
                    "toString": [Function],
                  },
                  "inlineGlow": Object {
                    "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9hbmltYXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUNzQiIsImZpbGUiOiIuLi9zcmMvYW5pbWF0aW9uLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuZXhwb3J0IGNvbnN0IGVhc2luZyA9IHtcbiAgcnViYmVyOiAnY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMzUsIDEuMDUpJyxcbn07XG5cbmNvbnN0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2Bcblx0ZnJvbSB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG5cdH1cblx0dG8ge1xuXHRcdHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG5cdH1cbmA7XG5cbmNvbnN0IGdsb3cgPSBrZXlmcmFtZXNgXG4gIDAlLCAxMDAlIHsgb3BhY2l0eTogMTsgfVxuICA1MCUgeyBvcGFjaXR5OiAuNDsgfVxuYDtcblxuY29uc3QgZmxvYXQgPSBrZXlmcmFtZXNgXG4gIDAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDFweCk7IH1cbiAgMjUlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDBweCk7IH1cbiAgNTAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0zcHgpOyB9XG4gIDEwMCUgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMXB4KTsgfVxuYDtcblxuY29uc3QgamlnZ2xlID0ga2V5ZnJhbWVzYFxuICAwJSwgMTAwJSB7IHRyYW5zZm9ybTp0cmFuc2xhdGUzZCgwLDAsMCk7IH1cbiAgMTIuNSUsIDYyLjUlIHsgdHJhbnNmb3JtOnRyYW5zbGF0ZTNkKC00cHgsMCwwKTsgfVxuICAzNy41JSwgODcuNSUgeyAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCg0cHgsMCwwKTsgIH1cbmA7XG5cbmNvbnN0IGlubGluZUdsb3cgPSBjc3NgXG4gIGFuaW1hdGlvbjogJHtnbG93fSAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xuICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcHJvZ3Jlc3M7XG5gO1xuXG4vLyBob3ZlciAmIGFjdGl2ZSBzdGF0ZSBmb3IgbGlua3MgYW5kIGJ1dHRvbnNcbmNvbnN0IGhvdmVyYWJsZSA9IGNzc2BcbiAgdHJhbnNpdGlvbjogYWxsIDE1MG1zIGVhc2Utb3V0O1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgLTJweCwgMCk7XG4gIH1cblxuICAmOmFjdGl2ZSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGFuaW1hdGlvbiA9IHtcbiAgcm90YXRlMzYwLFxuICBnbG93LFxuICBmbG9hdCxcbiAgamlnZ2xlLFxuICBpbmxpbmVHbG93LFxuICBob3ZlcmFibGUsXG59O1xuIl19 */",
                    "name": "x4tfcc-inlineGlow",
                    "next": Object {
                      "name": "animation-r0iffl",
                      "next": undefined,
                      "styles": "@keyframes animation-r0iffl{
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}",
                    },
                    "styles": "animation:animation-r0iffl 1.5s ease-in-out infinite;color:transparent;cursor:progress;;label:inlineGlow;",
                    "toString": [Function],
                  },
                  "jiggle": Object {
                    "anim": 1,
                    "name": "animation-ynpq7w",
                    "styles": "@keyframes animation-ynpq7w{
  0%, 100% { transform:translate3d(0,0,0); }
  12.5%, 62.5% { transform:translate3d(-4px,0,0); }
  37.5%, 87.5% {  transform: translate3d(4px,0,0);  }
}",
                    "toString": [Function],
                  },
                  "rotate360": Object {
                    "anim": 1,
                    "name": "animation-u07e3c",
                    "styles": "@keyframes animation-u07e3c{
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}",
                    "toString": [Function],
                  },
                },
                "appBorderColor": "rgba(0,0,0,.1)",
                "appBorderRadius": 4,
                "background": Object {
                  "app": "#F6F9FC",
                  "bar": "#FFFFFF",
                  "content": "#FFFFFF",
                  "critical": "#FF4400",
                  "gridCellSize": 10,
                  "hoverable": "rgba(0,0,0,.05)",
                  "negative": "#FEDED2",
                  "positive": "#E1FFD4",
                  "warning": "#FFF5CF",
                },
                "barBg": "#FFFFFF",
                "barSelectedColor": "#1EA7FD",
                "barTextColor": "#999999",
                "base": "light",
                "brand": Object {
                  "image": undefined,
                  "title": undefined,
                  "url": undefined,
                },
                "code": Object {
                  "language-json .token.boolean": Object {
                    "color": "#0000ff",
                  },
                  "language-json .token.number": Object {
                    "color": "#0000ff",
                  },
                  "language-json .token.property": Object {
                    "color": "#2B91AF",
                  },
                  "namespace": Object {
                    "opacity": 0.7,
                  },
                  "token": Object {
                    "&.atrule": Object {
                      "color": "#0000ff",
                    },
                    "&.attr-name": Object {
                      "color": "#ff0000",
                    },
                    "&.attr-value": Object {
                      "color": "#0000ff",
                    },
                    "&.bold": Object {
                      "fontWeight": "bold",
                    },
                    "&.boolean": Object {
                      "color": "#36acaa",
                    },
                    "&.cdata": Object {
                      "color": "#008000",
                      "fontStyle": "italic",
                    },
                    "&.class-name": Object {
                      "color": "#2B91AF",
                    },
                    "&.comment": Object {
                      "color": "#008000",
                      "fontStyle": "italic",
                    },
                    "&.constant": Object {
                      "color": "#36acaa",
                    },
                    "&.deleted": Object {
                      "color": "#9a050f",
                    },
                    "&.directive.tag .tag": Object {
                      "background": "#ffff00",
                      "color": "#393A34",
                    },
                    "&.doctype": Object {
                      "color": "#008000",
                      "fontStyle": "italic",
                    },
                    "&.entity": Object {
                      "color": "#ff0000",
                    },
                    "&.function": Object {
                      "color": "#393A34",
                    },
                    "&.important": Object {
                      "fontWeight": "bold",
                    },
                    "&.inserted": Object {
                      "color": "#36acaa",
                    },
                    "&.italic": Object {
                      "fontStyle": "italic",
                    },
                    "&.keyword": Object {
                      "color": "#0000ff",
                    },
                    "&.number": Object {
                      "color": "#36acaa",
                    },
                    "&.operator": Object {
                      "color": "#393A34",
                    },
                    "&.prolog": Object {
                      "color": "#008000",
                      "fontStyle": "italic",
                    },
                    "&.property": Object {
                      "color": "#ff0000",
                    },
                    "&.punctuation": Object {
                      "color": "#393A34",
                    },
                    "&.regex": Object {
                      "color": "#ff0000",
                    },
                    "&.selector": Object {
                      "color": "#800000",
                    },
                    "&.string": Object {
                      "color": "#A31515",
                    },
                    "&.symbol": Object {
                      "color": "#36acaa",
                    },
                    "&.tag": Object {
                      "color": "#800000",
                    },
                    "&.url": Object {
                      "color": "#36acaa",
                    },
                    "&.variable": Object {
                      "color": "#36acaa",
                    },
                    "WebkitFontSmoothing": "antialiased",
                    "fontFamily": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
                  },
                },
                "color": Object {
                  "ancillary": "#22a699",
                  "border": "rgba(0,0,0,.1)",
                  "critical": "#FFFFFF",
                  "dark": "#666666",
                  "darker": "#444444",
                  "darkest": "#333333",
                  "defaultText": "#333333",
                  "gold": "#FFAE00",
                  "green": "#66BF3C",
                  "inverseText": "#FFFFFF",
                  "light": "#F3F3F3",
                  "lighter": "#F8F8F8",
                  "lightest": "#FFFFFF",
                  "medium": "#DDDDDD",
                  "mediumdark": "#999999",
                  "mediumlight": "#EEEEEE",
                  "negative": "#FF4400",
                  "orange": "#FC521F",
                  "positive": "#66BF3C",
                  "primary": "#FF4785",
                  "purple": "#6F2CAC",
                  "seafoam": "#37D5D3",
                  "secondary": "#1EA7FD",
                  "tertiary": "#FAFBFC",
                  "ultraviolet": "#2A0481",
                  "warning": "#E69D00",
                },
                "easing": Object {
                  "rubber": "cubic-bezier(0.175, 0.885, 0.335, 1.05)",
                },
                "input": Object {
                  "background": "#FFFFFF",
                  "border": "rgba(0,0,0,.1)",
                  "borderRadius": 4,
                  "color": "#333333",
                },
                "layoutMargin": 10,
                "typography": Object {
                  "fonts": Object {
                    "base": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
                    "mono": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
                  },
                  "size": Object {
                    "code": 90,
                    "l1": 32,
                    "l2": 40,
                    "l3": 48,
                    "m1": 20,
                    "m2": 24,
                    "m3": 28,
                    "s1": 12,
                    "s2": 14,
                    "s3": 16,
                  },
                  "weight": Object {
                    "black": 900,
                    "bold": 700,
                    "regular": 400,
                  },
                },
              }
            }
          >
            <SyntaxHighlighter
              bordered={true}
              copyable={true}
              format={false}
              language="js"
            >
              <Styled(div)
                bordered={true}
                className={null}
                padded={false}
              >
                <div
                  className="emotion-10"
                >
                  <Styled(Component)>
                    <Component
                      className="emotion-5"
                    >
                      <ScrollArea
                        className="emotion-5"
                        horizontal={true}
                        vertical={true}
                      >
                        <ForwardRef(render)
                          styles={[Function]}
                        >
                          <InnerGlobal
                            cache={
                              Object {
                                "insert": [Function],
                                "inserted": Object {
                                  "11xgcgt": true,
                                  "1fhpnuv": true,
                                  "1imo1gr": true,
                                  "1maezg8": true,
                                  "1si67pu": true,
                                  "4zr3vl": true,
                                  "esgpkx": true,
                                },
                                "key": "css",
                                "nonce": undefined,
                                "registered": Object {
                                  "emotion-2": "overflow-y:auto;height:100%;overflow-x:auto;width:100%;position:relative;& code{padding-right:10px;}* .token{font-family:\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace;-webkit-font-smoothing:antialiased;&.comment{color:#008000;font-style:italic;}&.prolog{color:#008000;font-style:italic;}&.doctype{color:#008000;font-style:italic;}&.cdata{color:#008000;font-style:italic;}&.string{color:#A31515;}&.punctuation{color:#393A34;}&.operator{color:#393A34;}&.url{color:#36acaa;}&.symbol{color:#36acaa;}&.number{color:#36acaa;}&.boolean{color:#36acaa;}&.variable{color:#36acaa;}&.constant{color:#36acaa;}&.inserted{color:#36acaa;}&.atrule{color:#0000ff;}&.keyword{color:#0000ff;}&.attr-value{color:#0000ff;}&.function{color:#393A34;}&.deleted{color:#9a050f;}&.important{font-weight:bold;}&.bold{font-weight:bold;}&.italic{font-style:italic;}&.class-name{color:#2B91AF;}&.tag{color:#800000;}&.selector{color:#800000;}&.attr-name{color:#ff0000;}&.property{color:#ff0000;}&.regex{color:#ff0000;}&.entity{color:#ff0000;}&.directive.tag .tag{background:#ffff00;color:#393A34;}}* .language-json .token.boolean{color:#0000ff;}* .language-json .token.number{color:#0000ff;}* .language-json .token.property{color:#2B91AF;}* .namespace{opacity:0.7;}",
                                  "emotion-5": "position:relative;& code{padding-right:10px;}* .token{font-family:\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace;-webkit-font-smoothing:antialiased;&.comment{color:#008000;font-style:italic;}&.prolog{color:#008000;font-style:italic;}&.doctype{color:#008000;font-style:italic;}&.cdata{color:#008000;font-style:italic;}&.string{color:#A31515;}&.punctuation{color:#393A34;}&.operator{color:#393A34;}&.url{color:#36acaa;}&.symbol{color:#36acaa;}&.number{color:#36acaa;}&.boolean{color:#36acaa;}&.variable{color:#36acaa;}&.constant{color:#36acaa;}&.inserted{color:#36acaa;}&.atrule{color:#0000ff;}&.keyword{color:#0000ff;}&.attr-value{color:#0000ff;}&.function{color:#393A34;}&.deleted{color:#9a050f;}&.important{font-weight:bold;}&.bold{font-weight:bold;}&.italic{font-style:italic;}&.class-name{color:#2B91AF;}&.tag{color:#800000;}&.selector{color:#800000;}&.attr-name{color:#ff0000;}&.property{color:#ff0000;}&.regex{color:#ff0000;}&.entity{color:#ff0000;}&.directive.tag .tag{background:#ffff00;color:#393A34;}}* .language-json .token.boolean{color:#0000ff;}* .language-json .token.number{color:#0000ff;}* .language-json .token.property{color:#2B91AF;}* .namespace{opacity:0.7;}",
                                },
                                "sheet": StyleSheet {
                                  "before": null,
                                  "container": <head>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-scrollbar:before{position:absolute;content:"";border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-vertical{top:0;width:11px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-horizontal{left:0;height:11px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-scrollbar:before{position:absolute;content:"";border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-vertical{top:0;width:11px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-horizontal{left:0;height:11px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-10{position:relative;overflow:hidden;color:#333333;border:1px solid rgba(0,0,0,.1);background:#FFFFFF;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5{position:relative;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 code{padding-right:10px;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.comment{color:#008000;font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.prolog{color:#008000;font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.doctype{color:#008000;font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.cdata{color:#008000;font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.string{color:#A31515;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.punctuation{color:#393A34;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.operator{color:#393A34;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.url{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.symbol{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.number{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.boolean{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.variable{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.constant{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.inserted{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.atrule{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.keyword{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.attr-value{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.function{color:#393A34;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.deleted{color:#9a050f;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.important{font-weight:bold;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.bold{font-weight:bold;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.italic{font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.class-name{color:#2B91AF;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.tag{color:#800000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.selector{color:#800000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.attr-name{color:#ff0000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.property{color:#ff0000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.regex{color:#ff0000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.entity{color:#ff0000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .language-json .token.boolean{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .language-json .token.number{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .language-json .token.property{color:#2B91AF;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .namespace{opacity:0.7;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2{overflow-y:auto;height:100%;overflow-x:auto;width:100%;position:relative;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 code{padding-right:10px;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.comment{color:#008000;font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.prolog{color:#008000;font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.doctype{color:#008000;font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.cdata{color:#008000;font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.string{color:#A31515;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.punctuation{color:#393A34;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.operator{color:#393A34;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.url{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.symbol{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.number{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.boolean{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.variable{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.constant{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.inserted{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.atrule{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.keyword{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.attr-value{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.function{color:#393A34;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.deleted{color:#9a050f;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.important{font-weight:bold;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.bold{font-weight:bold;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.italic{font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.class-name{color:#2B91AF;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.tag{color:#800000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.selector{color:#800000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.attr-name{color:#ff0000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.property{color:#ff0000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.regex{color:#ff0000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.entity{color:#ff0000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .language-json .token.boolean{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .language-json .token.number{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .language-json .token.property{color:#2B91AF;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .namespace{opacity:0.7;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;margin:0;padding:10px;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-0{-webkit-flex:1;-ms-flex:1;flex:1;padding-right:0;opacity:1;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-9{position:absolute;bottom:0;right:0;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:#FFFFFF;z-index:1;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-8:not(:last-child){border-right:1px solid rgba(0,0,0,.1);}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-8 + *{border-left:1px solid rgba(0,0,0,.1);border-radius:0;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-8:focus{box-shadow:#1EA7FD 0 -3px 0 0 inset;outline:0 none;}
                                    </style>
                                  </head>,
                                  "ctr": 82,
                                  "isSpeedy": false,
                                  "key": "css",
                                  "nonce": undefined,
                                  "tags": Array [
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-10{position:relative;overflow:hidden;color:#333333;border:1px solid rgba(0,0,0,.1);background:#FFFFFF;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5{position:relative;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 code{padding-right:10px;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.comment{color:#008000;font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.prolog{color:#008000;font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.doctype{color:#008000;font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.cdata{color:#008000;font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.string{color:#A31515;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.punctuation{color:#393A34;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.operator{color:#393A34;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.url{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.symbol{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.number{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.boolean{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.variable{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.constant{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.inserted{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.atrule{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.keyword{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.attr-value{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.function{color:#393A34;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.deleted{color:#9a050f;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.important{font-weight:bold;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.bold{font-weight:bold;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.italic{font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.class-name{color:#2B91AF;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.tag{color:#800000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.selector{color:#800000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.attr-name{color:#ff0000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.property{color:#ff0000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.regex{color:#ff0000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.entity{color:#ff0000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .language-json .token.boolean{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .language-json .token.number{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .language-json .token.property{color:#2B91AF;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .namespace{opacity:0.7;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2{overflow-y:auto;height:100%;overflow-x:auto;width:100%;position:relative;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 code{padding-right:10px;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.comment{color:#008000;font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.prolog{color:#008000;font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.doctype{color:#008000;font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.cdata{color:#008000;font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.string{color:#A31515;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.punctuation{color:#393A34;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.operator{color:#393A34;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.url{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.symbol{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.number{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.boolean{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.variable{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.constant{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.inserted{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.atrule{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.keyword{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.attr-value{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.function{color:#393A34;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.deleted{color:#9a050f;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.important{font-weight:bold;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.bold{font-weight:bold;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.italic{font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.class-name{color:#2B91AF;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.tag{color:#800000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.selector{color:#800000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.attr-name{color:#ff0000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.property{color:#ff0000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.regex{color:#ff0000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.entity{color:#ff0000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .language-json .token.boolean{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .language-json .token.number{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .language-json .token.property{color:#2B91AF;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .namespace{opacity:0.7;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;margin:0;padding:10px;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-0{-webkit-flex:1;-ms-flex:1;flex:1;padding-right:0;opacity:1;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-9{position:absolute;bottom:0;right:0;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:#FFFFFF;z-index:1;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-8:not(:last-child){border-right:1px solid rgba(0,0,0,.1);}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-8 + *{border-left:1px solid rgba(0,0,0,.1);border-radius:0;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-8:focus{box-shadow:#1EA7FD 0 -3px 0 0 inset;outline:0 none;}
                                    </style>,
                                  ],
                                },
                              }
                            }
                            serialized={
                              Object {
                                "map": undefined,
                                "name": "nh5djz",
                                "next": undefined,
                                "styles": "[data-simplebar]{position:relative;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start;}.simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}.simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}.simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}.simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}.simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}.simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;flex-grow:inherit;flex-shrink:0;flex-basis:0;}.simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}.simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}[data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}.simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}.simplebar-scrollbar:before{position:absolute;content:\\"\\";border-radius:7px;left:0;right:0;opacity:0;transition:opacity 0.2s linear;background:#333333;}.simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;transition:opacity 0s linear;}.simplebar-track.simplebar-vertical{top:0;width:11px;}.simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}.simplebar-track.simplebar-horizontal{left:0;height:11px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}[data-simplebar-direction=\\"rtl\\"] .simplebar-track.simplebar-vertical{right:auto;left:0;}",
                                "toString": [Function],
                              }
                            }
                          />
                        </ForwardRef(render)>
                        <Styled(Component)
                          className="emotion-5"
                          horizontal={true}
                          vertical={true}
                        >
                          <Component
                            className="emotion-2"
                            horizontal={true}
                            vertical={true}
                          >
                            <l
                              className="emotion-2"
                              scrollableNodeProps={
                                Object {
                                  "tabIndex": 0,
                                }
                              }
                            >
                              <div
                                className="emotion-2"
                                data-simplebar={true}
                              >
                                <div
                                  className="simplebar-wrapper"
                                >
                                  <div
                                    className="simplebar-height-auto-observer-wrapper"
                                  >
                                    <div
                                      className="simplebar-height-auto-observer"
                                    />
                                  </div>
                                  <div
                                    className="simplebar-mask"
                                  >
                                    <div
                                      className="simplebar-offset"
                                    >
                                      <div
                                        className="simplebar-content-wrapper"
                                        tabIndex={0}
                                      >
                                        <div
                                          className="simplebar-content"
                                        >
                                          <SyntaxHighlighter
                                            CodeTag={
                                              Object {
                                                "$$typeof": Symbol(react.forward_ref),
                                                "__emotion_base": "code",
                                                "__emotion_forwardProp": undefined,
                                                "__emotion_real": [Circular],
                                                "__emotion_styles": Array [
                                                  Object {
                                                    "flex": 1,
                                                    "opacity": 1,
                                                    "paddingRight": 0,
                                                  },
                                                ],
                                                "defaultProps": undefined,
                                                "displayName": "Styled(code)",
                                                "render": [Function],
                                                "withComponent": [Function],
                                              }
                                            }
                                            PreTag={
                                              Object {
                                                "$$typeof": Symbol(react.forward_ref),
                                                "__emotion_base": "pre",
                                                "__emotion_forwardProp": undefined,
                                                "__emotion_real": [Circular],
                                                "__emotion_styles": Array [
                                                  [Function],
                                                ],
                                                "defaultProps": undefined,
                                                "displayName": "Styled(pre)",
                                                "render": [Function],
                                                "withComponent": [Function],
                                              }
                                            }
                                            language="js"
                                            lineNumberContainerStyle={Object {}}
                                            padded={true}
                                            useInlineStyles={false}
                                          >
                                            <Styled(pre)
                                              className="hljs"
                                              padded={true}
                                            >
                                              <pre
                                                className="hljs emotion-1"
                                              >
                                                <Styled(code)>
                                                  <code
                                                    className="emotion-0"
                                                  >
                                                    a
                                                    <span
                                                      className="token punctuation"
                                                      key="code-segement1"
                                                    >
                                                      ;
                                                    </span>
                                                  </code>
                                                </Styled(code)>
                                              </pre>
                                            </Styled(pre)>
                                          </SyntaxHighlighter>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div
                                    className="simplebar-placeholder"
                                  />
                                </div>
                                <div
                                  className="simplebar-track simplebar-horizontal"
                                >
                                  <div
                                    className="simplebar-scrollbar"
                                  />
                                </div>
                                <div
                                  className="simplebar-track simplebar-vertical"
                                >
                                  <div
                                    className="simplebar-scrollbar"
                                  />
                                </div>
                              </div>
                            </l>
                          </Component>
                        </Styled(Component)>
                      </ScrollArea>
                    </Component>
                  </Styled(Component)>
                  <ActionBar
                    actionItems={
                      Array [
                        Object {
                          "onClick": [Function],
                          "title": "Copy",
                        },
                      ]
                    }
                  >
                    <Styled(div)>
                      <div
                        className="emotion-9"
                      >
                        <ActionButton
                          key="0"
                          onClick={[Function]}
                        >
                          <button
                            className="emotion-8"
                            onClick={[Function]}
                          >
                            Copy
                          </button>
                        </ActionButton>
                      </div>
                    </Styled(div)>
                  </ActionBar>
                </div>
              </Styled(div)>
            </SyntaxHighlighter>
          </ThemeProvider>
        </Code>
        <h1
          style={
            Object {
              "borderBottom": "1px solid #EEE",
              "fontSize": "25px",
              "margin": "20px 0 0 0",
              "padding": "0 0 5px 0",
            }
          }
        >
          Story Source
        </h1>
        <Code
          code="<div>
  It's a Basic test story:
  <TestComponent
    array={[
      1,
      2,
      3
    ]}
    bool
    func={function noRefCheck() {}}
    number={7}
    obj={{
      a: 'a',
      b: 'b'
    }}
    string=\\"seven\\"
  />
</div>"
          format={false}
          language="jsx"
        >
          <ThemeProvider
            theme={
              Object {
                "addonActionsTheme": Object {
                  "ARROW_ANIMATION_DURATION": "0",
                  "ARROW_COLOR": "rgba(0,0,0,0.3)",
                  "ARROW_FONT_SIZE": 8,
                  "ARROW_MARGIN_RIGHT": 4,
                  "BASE_BACKGROUND_COLOR": "transparent",
                  "BASE_COLOR": "#333333",
                  "BASE_FONT_FAMILY": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
                  "BASE_FONT_SIZE": 13,
                  "BASE_LINE_HEIGHT": "18px",
                  "HTML_ATTRIBUTE_NAME_COLOR": "rgb(153, 69, 0)",
                  "HTML_ATTRIBUTE_VALUE_COLOR": "rgb(26, 26, 166)",
                  "HTML_COMMENT_COLOR": "rgb(35, 110, 37)",
                  "HTML_DOCTYPE_COLOR": "rgb(192, 192, 192)",
                  "HTML_TAGNAME_COLOR": "rgb(136, 18, 128)",
                  "HTML_TAGNAME_TEXT_TRANSFORM": "lowercase",
                  "HTML_TAG_COLOR": "rgb(168, 148, 166)",
                  "OBJECT_NAME_COLOR": "rgb(136, 19, 145)",
                  "OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES": 10,
                  "OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES": 5,
                  "OBJECT_VALUE_BOOLEAN_COLOR": "rgb(28, 0, 207)",
                  "OBJECT_VALUE_FUNCTION_PREFIX_COLOR": "rgb(13, 34, 170)",
                  "OBJECT_VALUE_NULL_COLOR": "rgb(128, 128, 128)",
                  "OBJECT_VALUE_NUMBER_COLOR": "rgb(28, 0, 207)",
                  "OBJECT_VALUE_REGEXP_COLOR": "rgb(196, 26, 22)",
                  "OBJECT_VALUE_STRING_COLOR": "rgb(196, 26, 22)",
                  "OBJECT_VALUE_SYMBOL_COLOR": "rgb(196, 26, 22)",
                  "OBJECT_VALUE_UNDEFINED_COLOR": "rgb(128, 128, 128)",
                  "TABLE_BORDER_COLOR": "#aaa",
                  "TABLE_DATA_BACKGROUND_IMAGE": "linear-gradient(to bottom, white, white 50%, rgb(234, 243, 255) 50%, rgb(234, 243, 255))",
                  "TABLE_DATA_BACKGROUND_SIZE": "128px 32px",
                  "TABLE_SORT_ICON_COLOR": "#6e6e6e",
                  "TABLE_TH_BACKGROUND_COLOR": "#eee",
                  "TABLE_TH_HOVER_COLOR": "hsla(0, 0%, 90%, 1)",
                  "TREENODE_FONT_FAMILY": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
                  "TREENODE_FONT_SIZE": 13,
                  "TREENODE_LINE_HEIGHT": "18px",
                  "TREENODE_PADDING_LEFT": 12,
                },
                "animation": Object {
                  "float": Object {
                    "anim": 1,
                    "name": "animation-6tolu8",
                    "styles": "@keyframes animation-6tolu8{
  0% { transform: translateY(1px); }
  25% { transform: translateY(0px); }
  50% { transform: translateY(-3px); }
  100% { transform: translateY(1px); }
}",
                    "toString": [Function],
                  },
                  "glow": Object {
                    "anim": 1,
                    "name": "animation-r0iffl",
                    "styles": "@keyframes animation-r0iffl{
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}",
                    "toString": [Function],
                  },
                  "hoverable": Object {
                    "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9hbmltYXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0NxQiIsImZpbGUiOiIuLi9zcmMvYW5pbWF0aW9uLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuZXhwb3J0IGNvbnN0IGVhc2luZyA9IHtcbiAgcnViYmVyOiAnY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMzUsIDEuMDUpJyxcbn07XG5cbmNvbnN0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2Bcblx0ZnJvbSB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG5cdH1cblx0dG8ge1xuXHRcdHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG5cdH1cbmA7XG5cbmNvbnN0IGdsb3cgPSBrZXlmcmFtZXNgXG4gIDAlLCAxMDAlIHsgb3BhY2l0eTogMTsgfVxuICA1MCUgeyBvcGFjaXR5OiAuNDsgfVxuYDtcblxuY29uc3QgZmxvYXQgPSBrZXlmcmFtZXNgXG4gIDAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDFweCk7IH1cbiAgMjUlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDBweCk7IH1cbiAgNTAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0zcHgpOyB9XG4gIDEwMCUgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMXB4KTsgfVxuYDtcblxuY29uc3QgamlnZ2xlID0ga2V5ZnJhbWVzYFxuICAwJSwgMTAwJSB7IHRyYW5zZm9ybTp0cmFuc2xhdGUzZCgwLDAsMCk7IH1cbiAgMTIuNSUsIDYyLjUlIHsgdHJhbnNmb3JtOnRyYW5zbGF0ZTNkKC00cHgsMCwwKTsgfVxuICAzNy41JSwgODcuNSUgeyAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCg0cHgsMCwwKTsgIH1cbmA7XG5cbmNvbnN0IGlubGluZUdsb3cgPSBjc3NgXG4gIGFuaW1hdGlvbjogJHtnbG93fSAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xuICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcHJvZ3Jlc3M7XG5gO1xuXG4vLyBob3ZlciAmIGFjdGl2ZSBzdGF0ZSBmb3IgbGlua3MgYW5kIGJ1dHRvbnNcbmNvbnN0IGhvdmVyYWJsZSA9IGNzc2BcbiAgdHJhbnNpdGlvbjogYWxsIDE1MG1zIGVhc2Utb3V0O1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgLTJweCwgMCk7XG4gIH1cblxuICAmOmFjdGl2ZSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGFuaW1hdGlvbiA9IHtcbiAgcm90YXRlMzYwLFxuICBnbG93LFxuICBmbG9hdCxcbiAgamlnZ2xlLFxuICBpbmxpbmVHbG93LFxuICBob3ZlcmFibGUsXG59O1xuIl19 */",
                    "name": "1o7rzh8-hoverable",
                    "styles": "transition:all 150ms ease-out;transform:translate3d(0,0,0);&:hover{transform:translate3d(0,-2px,0);}&:active{transform:translate3d(0,0,0);};label:hoverable;",
                    "toString": [Function],
                  },
                  "inlineGlow": Object {
                    "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9hbmltYXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUNzQiIsImZpbGUiOiIuLi9zcmMvYW5pbWF0aW9uLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuZXhwb3J0IGNvbnN0IGVhc2luZyA9IHtcbiAgcnViYmVyOiAnY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMzUsIDEuMDUpJyxcbn07XG5cbmNvbnN0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2Bcblx0ZnJvbSB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG5cdH1cblx0dG8ge1xuXHRcdHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG5cdH1cbmA7XG5cbmNvbnN0IGdsb3cgPSBrZXlmcmFtZXNgXG4gIDAlLCAxMDAlIHsgb3BhY2l0eTogMTsgfVxuICA1MCUgeyBvcGFjaXR5OiAuNDsgfVxuYDtcblxuY29uc3QgZmxvYXQgPSBrZXlmcmFtZXNgXG4gIDAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDFweCk7IH1cbiAgMjUlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDBweCk7IH1cbiAgNTAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0zcHgpOyB9XG4gIDEwMCUgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMXB4KTsgfVxuYDtcblxuY29uc3QgamlnZ2xlID0ga2V5ZnJhbWVzYFxuICAwJSwgMTAwJSB7IHRyYW5zZm9ybTp0cmFuc2xhdGUzZCgwLDAsMCk7IH1cbiAgMTIuNSUsIDYyLjUlIHsgdHJhbnNmb3JtOnRyYW5zbGF0ZTNkKC00cHgsMCwwKTsgfVxuICAzNy41JSwgODcuNSUgeyAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCg0cHgsMCwwKTsgIH1cbmA7XG5cbmNvbnN0IGlubGluZUdsb3cgPSBjc3NgXG4gIGFuaW1hdGlvbjogJHtnbG93fSAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xuICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcHJvZ3Jlc3M7XG5gO1xuXG4vLyBob3ZlciAmIGFjdGl2ZSBzdGF0ZSBmb3IgbGlua3MgYW5kIGJ1dHRvbnNcbmNvbnN0IGhvdmVyYWJsZSA9IGNzc2BcbiAgdHJhbnNpdGlvbjogYWxsIDE1MG1zIGVhc2Utb3V0O1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgLTJweCwgMCk7XG4gIH1cblxuICAmOmFjdGl2ZSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGFuaW1hdGlvbiA9IHtcbiAgcm90YXRlMzYwLFxuICBnbG93LFxuICBmbG9hdCxcbiAgamlnZ2xlLFxuICBpbmxpbmVHbG93LFxuICBob3ZlcmFibGUsXG59O1xuIl19 */",
                    "name": "x4tfcc-inlineGlow",
                    "next": Object {
                      "name": "animation-r0iffl",
                      "next": undefined,
                      "styles": "@keyframes animation-r0iffl{
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}",
                    },
                    "styles": "animation:animation-r0iffl 1.5s ease-in-out infinite;color:transparent;cursor:progress;;label:inlineGlow;",
                    "toString": [Function],
                  },
                  "jiggle": Object {
                    "anim": 1,
                    "name": "animation-ynpq7w",
                    "styles": "@keyframes animation-ynpq7w{
  0%, 100% { transform:translate3d(0,0,0); }
  12.5%, 62.5% { transform:translate3d(-4px,0,0); }
  37.5%, 87.5% {  transform: translate3d(4px,0,0);  }
}",
                    "toString": [Function],
                  },
                  "rotate360": Object {
                    "anim": 1,
                    "name": "animation-u07e3c",
                    "styles": "@keyframes animation-u07e3c{
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}",
                    "toString": [Function],
                  },
                },
                "appBorderColor": "rgba(0,0,0,.1)",
                "appBorderRadius": 4,
                "background": Object {
                  "app": "#F6F9FC",
                  "bar": "#FFFFFF",
                  "content": "#FFFFFF",
                  "critical": "#FF4400",
                  "gridCellSize": 10,
                  "hoverable": "rgba(0,0,0,.05)",
                  "negative": "#FEDED2",
                  "positive": "#E1FFD4",
                  "warning": "#FFF5CF",
                },
                "barBg": "#FFFFFF",
                "barSelectedColor": "#1EA7FD",
                "barTextColor": "#999999",
                "base": "light",
                "brand": Object {
                  "image": undefined,
                  "title": undefined,
                  "url": undefined,
                },
                "code": Object {
                  "language-json .token.boolean": Object {
                    "color": "#0000ff",
                  },
                  "language-json .token.number": Object {
                    "color": "#0000ff",
                  },
                  "language-json .token.property": Object {
                    "color": "#2B91AF",
                  },
                  "namespace": Object {
                    "opacity": 0.7,
                  },
                  "token": Object {
                    "&.atrule": Object {
                      "color": "#0000ff",
                    },
                    "&.attr-name": Object {
                      "color": "#ff0000",
                    },
                    "&.attr-value": Object {
                      "color": "#0000ff",
                    },
                    "&.bold": Object {
                      "fontWeight": "bold",
                    },
                    "&.boolean": Object {
                      "color": "#36acaa",
                    },
                    "&.cdata": Object {
                      "color": "#008000",
                      "fontStyle": "italic",
                    },
                    "&.class-name": Object {
                      "color": "#2B91AF",
                    },
                    "&.comment": Object {
                      "color": "#008000",
                      "fontStyle": "italic",
                    },
                    "&.constant": Object {
                      "color": "#36acaa",
                    },
                    "&.deleted": Object {
                      "color": "#9a050f",
                    },
                    "&.directive.tag .tag": Object {
                      "background": "#ffff00",
                      "color": "#393A34",
                    },
                    "&.doctype": Object {
                      "color": "#008000",
                      "fontStyle": "italic",
                    },
                    "&.entity": Object {
                      "color": "#ff0000",
                    },
                    "&.function": Object {
                      "color": "#393A34",
                    },
                    "&.important": Object {
                      "fontWeight": "bold",
                    },
                    "&.inserted": Object {
                      "color": "#36acaa",
                    },
                    "&.italic": Object {
                      "fontStyle": "italic",
                    },
                    "&.keyword": Object {
                      "color": "#0000ff",
                    },
                    "&.number": Object {
                      "color": "#36acaa",
                    },
                    "&.operator": Object {
                      "color": "#393A34",
                    },
                    "&.prolog": Object {
                      "color": "#008000",
                      "fontStyle": "italic",
                    },
                    "&.property": Object {
                      "color": "#ff0000",
                    },
                    "&.punctuation": Object {
                      "color": "#393A34",
                    },
                    "&.regex": Object {
                      "color": "#ff0000",
                    },
                    "&.selector": Object {
                      "color": "#800000",
                    },
                    "&.string": Object {
                      "color": "#A31515",
                    },
                    "&.symbol": Object {
                      "color": "#36acaa",
                    },
                    "&.tag": Object {
                      "color": "#800000",
                    },
                    "&.url": Object {
                      "color": "#36acaa",
                    },
                    "&.variable": Object {
                      "color": "#36acaa",
                    },
                    "WebkitFontSmoothing": "antialiased",
                    "fontFamily": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
                  },
                },
                "color": Object {
                  "ancillary": "#22a699",
                  "border": "rgba(0,0,0,.1)",
                  "critical": "#FFFFFF",
                  "dark": "#666666",
                  "darker": "#444444",
                  "darkest": "#333333",
                  "defaultText": "#333333",
                  "gold": "#FFAE00",
                  "green": "#66BF3C",
                  "inverseText": "#FFFFFF",
                  "light": "#F3F3F3",
                  "lighter": "#F8F8F8",
                  "lightest": "#FFFFFF",
                  "medium": "#DDDDDD",
                  "mediumdark": "#999999",
                  "mediumlight": "#EEEEEE",
                  "negative": "#FF4400",
                  "orange": "#FC521F",
                  "positive": "#66BF3C",
                  "primary": "#FF4785",
                  "purple": "#6F2CAC",
                  "seafoam": "#37D5D3",
                  "secondary": "#1EA7FD",
                  "tertiary": "#FAFBFC",
                  "ultraviolet": "#2A0481",
                  "warning": "#E69D00",
                },
                "easing": Object {
                  "rubber": "cubic-bezier(0.175, 0.885, 0.335, 1.05)",
                },
                "input": Object {
                  "background": "#FFFFFF",
                  "border": "rgba(0,0,0,.1)",
                  "borderRadius": 4,
                  "color": "#333333",
                },
                "layoutMargin": 10,
                "typography": Object {
                  "fonts": Object {
                    "base": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
                    "mono": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
                  },
                  "size": Object {
                    "code": 90,
                    "l1": 32,
                    "l2": 40,
                    "l3": 48,
                    "m1": 20,
                    "m2": 24,
                    "m3": 28,
                    "s1": 12,
                    "s2": 14,
                    "s3": 16,
                  },
                  "weight": Object {
                    "black": 900,
                    "bold": 700,
                    "regular": 400,
                  },
                },
              }
            }
          >
            <SyntaxHighlighter
              bordered={true}
              copyable={true}
              format={false}
              language="jsx"
            >
              <Styled(div)
                bordered={true}
                className={null}
                padded={false}
              >
                <div
                  className="emotion-10"
                >
                  <Styled(Component)>
                    <Component
                      className="emotion-5"
                    >
                      <ScrollArea
                        className="emotion-5"
                        horizontal={true}
                        vertical={true}
                      >
                        <ForwardRef(render)
                          styles={[Function]}
                        >
                          <InnerGlobal
                            cache={
                              Object {
                                "insert": [Function],
                                "inserted": Object {
                                  "11xgcgt": true,
                                  "1fhpnuv": true,
                                  "1imo1gr": true,
                                  "1maezg8": true,
                                  "1si67pu": true,
                                  "4zr3vl": true,
                                  "esgpkx": true,
                                },
                                "key": "css",
                                "nonce": undefined,
                                "registered": Object {
                                  "emotion-2": "overflow-y:auto;height:100%;overflow-x:auto;width:100%;position:relative;& code{padding-right:10px;}* .token{font-family:\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace;-webkit-font-smoothing:antialiased;&.comment{color:#008000;font-style:italic;}&.prolog{color:#008000;font-style:italic;}&.doctype{color:#008000;font-style:italic;}&.cdata{color:#008000;font-style:italic;}&.string{color:#A31515;}&.punctuation{color:#393A34;}&.operator{color:#393A34;}&.url{color:#36acaa;}&.symbol{color:#36acaa;}&.number{color:#36acaa;}&.boolean{color:#36acaa;}&.variable{color:#36acaa;}&.constant{color:#36acaa;}&.inserted{color:#36acaa;}&.atrule{color:#0000ff;}&.keyword{color:#0000ff;}&.attr-value{color:#0000ff;}&.function{color:#393A34;}&.deleted{color:#9a050f;}&.important{font-weight:bold;}&.bold{font-weight:bold;}&.italic{font-style:italic;}&.class-name{color:#2B91AF;}&.tag{color:#800000;}&.selector{color:#800000;}&.attr-name{color:#ff0000;}&.property{color:#ff0000;}&.regex{color:#ff0000;}&.entity{color:#ff0000;}&.directive.tag .tag{background:#ffff00;color:#393A34;}}* .language-json .token.boolean{color:#0000ff;}* .language-json .token.number{color:#0000ff;}* .language-json .token.property{color:#2B91AF;}* .namespace{opacity:0.7;}",
                                  "emotion-5": "position:relative;& code{padding-right:10px;}* .token{font-family:\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace;-webkit-font-smoothing:antialiased;&.comment{color:#008000;font-style:italic;}&.prolog{color:#008000;font-style:italic;}&.doctype{color:#008000;font-style:italic;}&.cdata{color:#008000;font-style:italic;}&.string{color:#A31515;}&.punctuation{color:#393A34;}&.operator{color:#393A34;}&.url{color:#36acaa;}&.symbol{color:#36acaa;}&.number{color:#36acaa;}&.boolean{color:#36acaa;}&.variable{color:#36acaa;}&.constant{color:#36acaa;}&.inserted{color:#36acaa;}&.atrule{color:#0000ff;}&.keyword{color:#0000ff;}&.attr-value{color:#0000ff;}&.function{color:#393A34;}&.deleted{color:#9a050f;}&.important{font-weight:bold;}&.bold{font-weight:bold;}&.italic{font-style:italic;}&.class-name{color:#2B91AF;}&.tag{color:#800000;}&.selector{color:#800000;}&.attr-name{color:#ff0000;}&.property{color:#ff0000;}&.regex{color:#ff0000;}&.entity{color:#ff0000;}&.directive.tag .tag{background:#ffff00;color:#393A34;}}* .language-json .token.boolean{color:#0000ff;}* .language-json .token.number{color:#0000ff;}* .language-json .token.property{color:#2B91AF;}* .namespace{opacity:0.7;}",
                                },
                                "sheet": StyleSheet {
                                  "before": null,
                                  "container": <head>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-scrollbar:before{position:absolute;content:"";border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-vertical{top:0;width:11px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-horizontal{left:0;height:11px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-scrollbar:before{position:absolute;content:"";border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-vertical{top:0;width:11px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-horizontal{left:0;height:11px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-10{position:relative;overflow:hidden;color:#333333;border:1px solid rgba(0,0,0,.1);background:#FFFFFF;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5{position:relative;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 code{padding-right:10px;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.comment{color:#008000;font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.prolog{color:#008000;font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.doctype{color:#008000;font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.cdata{color:#008000;font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.string{color:#A31515;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.punctuation{color:#393A34;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.operator{color:#393A34;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.url{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.symbol{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.number{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.boolean{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.variable{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.constant{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.inserted{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.atrule{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.keyword{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.attr-value{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.function{color:#393A34;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.deleted{color:#9a050f;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.important{font-weight:bold;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.bold{font-weight:bold;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.italic{font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.class-name{color:#2B91AF;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.tag{color:#800000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.selector{color:#800000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.attr-name{color:#ff0000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.property{color:#ff0000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.regex{color:#ff0000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.entity{color:#ff0000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .language-json .token.boolean{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .language-json .token.number{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .language-json .token.property{color:#2B91AF;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .namespace{opacity:0.7;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2{overflow-y:auto;height:100%;overflow-x:auto;width:100%;position:relative;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 code{padding-right:10px;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.comment{color:#008000;font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.prolog{color:#008000;font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.doctype{color:#008000;font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.cdata{color:#008000;font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.string{color:#A31515;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.punctuation{color:#393A34;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.operator{color:#393A34;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.url{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.symbol{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.number{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.boolean{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.variable{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.constant{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.inserted{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.atrule{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.keyword{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.attr-value{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.function{color:#393A34;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.deleted{color:#9a050f;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.important{font-weight:bold;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.bold{font-weight:bold;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.italic{font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.class-name{color:#2B91AF;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.tag{color:#800000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.selector{color:#800000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.attr-name{color:#ff0000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.property{color:#ff0000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.regex{color:#ff0000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.entity{color:#ff0000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .language-json .token.boolean{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .language-json .token.number{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .language-json .token.property{color:#2B91AF;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .namespace{opacity:0.7;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;margin:0;padding:10px;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-0{-webkit-flex:1;-ms-flex:1;flex:1;padding-right:0;opacity:1;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-9{position:absolute;bottom:0;right:0;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:#FFFFFF;z-index:1;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-8:not(:last-child){border-right:1px solid rgba(0,0,0,.1);}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-8 + *{border-left:1px solid rgba(0,0,0,.1);border-radius:0;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-8:focus{box-shadow:#1EA7FD 0 -3px 0 0 inset;outline:0 none;}
                                    </style>
                                  </head>,
                                  "ctr": 82,
                                  "isSpeedy": false,
                                  "key": "css",
                                  "nonce": undefined,
                                  "tags": Array [
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-10{position:relative;overflow:hidden;color:#333333;border:1px solid rgba(0,0,0,.1);background:#FFFFFF;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5{position:relative;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 code{padding-right:10px;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.comment{color:#008000;font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.prolog{color:#008000;font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.doctype{color:#008000;font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.cdata{color:#008000;font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.string{color:#A31515;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.punctuation{color:#393A34;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.operator{color:#393A34;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.url{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.symbol{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.number{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.boolean{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.variable{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.constant{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.inserted{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.atrule{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.keyword{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.attr-value{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.function{color:#393A34;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.deleted{color:#9a050f;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.important{font-weight:bold;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.bold{font-weight:bold;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.italic{font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.class-name{color:#2B91AF;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.tag{color:#800000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.selector{color:#800000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.attr-name{color:#ff0000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.property{color:#ff0000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.regex{color:#ff0000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.entity{color:#ff0000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .language-json .token.boolean{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .language-json .token.number{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .language-json .token.property{color:#2B91AF;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .namespace{opacity:0.7;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2{overflow-y:auto;height:100%;overflow-x:auto;width:100%;position:relative;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 code{padding-right:10px;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.comment{color:#008000;font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.prolog{color:#008000;font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.doctype{color:#008000;font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.cdata{color:#008000;font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.string{color:#A31515;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.punctuation{color:#393A34;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.operator{color:#393A34;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.url{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.symbol{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.number{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.boolean{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.variable{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.constant{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.inserted{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.atrule{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.keyword{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.attr-value{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.function{color:#393A34;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.deleted{color:#9a050f;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.important{font-weight:bold;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.bold{font-weight:bold;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.italic{font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.class-name{color:#2B91AF;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.tag{color:#800000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.selector{color:#800000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.attr-name{color:#ff0000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.property{color:#ff0000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.regex{color:#ff0000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.entity{color:#ff0000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .language-json .token.boolean{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .language-json .token.number{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .language-json .token.property{color:#2B91AF;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .namespace{opacity:0.7;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;margin:0;padding:10px;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-0{-webkit-flex:1;-ms-flex:1;flex:1;padding-right:0;opacity:1;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-9{position:absolute;bottom:0;right:0;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:#FFFFFF;z-index:1;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-8:not(:last-child){border-right:1px solid rgba(0,0,0,.1);}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-8 + *{border-left:1px solid rgba(0,0,0,.1);border-radius:0;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-8:focus{box-shadow:#1EA7FD 0 -3px 0 0 inset;outline:0 none;}
                                    </style>,
                                  ],
                                },
                              }
                            }
                            serialized={
                              Object {
                                "map": undefined,
                                "name": "nh5djz",
                                "next": undefined,
                                "styles": "[data-simplebar]{position:relative;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start;}.simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}.simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}.simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}.simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}.simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}.simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;flex-grow:inherit;flex-shrink:0;flex-basis:0;}.simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}.simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}[data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}.simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}.simplebar-scrollbar:before{position:absolute;content:\\"\\";border-radius:7px;left:0;right:0;opacity:0;transition:opacity 0.2s linear;background:#333333;}.simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;transition:opacity 0s linear;}.simplebar-track.simplebar-vertical{top:0;width:11px;}.simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}.simplebar-track.simplebar-horizontal{left:0;height:11px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}[data-simplebar-direction=\\"rtl\\"] .simplebar-track.simplebar-vertical{right:auto;left:0;}",
                                "toString": [Function],
                              }
                            }
                          />
                        </ForwardRef(render)>
                        <Styled(Component)
                          className="emotion-5"
                          horizontal={true}
                          vertical={true}
                        >
                          <Component
                            className="emotion-2"
                            horizontal={true}
                            vertical={true}
                          >
                            <l
                              className="emotion-2"
                              scrollableNodeProps={
                                Object {
                                  "tabIndex": 0,
                                }
                              }
                            >
                              <div
                                className="emotion-2"
                                data-simplebar={true}
                              >
                                <div
                                  className="simplebar-wrapper"
                                >
                                  <div
                                    className="simplebar-height-auto-observer-wrapper"
                                  >
                                    <div
                                      className="simplebar-height-auto-observer"
                                    />
                                  </div>
                                  <div
                                    className="simplebar-mask"
                                  >
                                    <div
                                      className="simplebar-offset"
                                    >
                                      <div
                                        className="simplebar-content-wrapper"
                                        tabIndex={0}
                                      >
                                        <div
                                          className="simplebar-content"
                                        >
                                          <SyntaxHighlighter
                                            CodeTag={
                                              Object {
                                                "$$typeof": Symbol(react.forward_ref),
                                                "__emotion_base": "code",
                                                "__emotion_forwardProp": undefined,
                                                "__emotion_real": [Circular],
                                                "__emotion_styles": Array [
                                                  Object {
                                                    "flex": 1,
                                                    "opacity": 1,
                                                    "paddingRight": 0,
                                                  },
                                                ],
                                                "defaultProps": undefined,
                                                "displayName": "Styled(code)",
                                                "render": [Function],
                                                "withComponent": [Function],
                                              }
                                            }
                                            PreTag={
                                              Object {
                                                "$$typeof": Symbol(react.forward_ref),
                                                "__emotion_base": "pre",
                                                "__emotion_forwardProp": undefined,
                                                "__emotion_real": [Circular],
                                                "__emotion_styles": Array [
                                                  [Function],
                                                ],
                                                "defaultProps": undefined,
                                                "displayName": "Styled(pre)",
                                                "render": [Function],
                                                "withComponent": [Function],
                                              }
                                            }
                                            language="jsx"
                                            lineNumberContainerStyle={Object {}}
                                            padded={true}
                                            useInlineStyles={false}
                                          >
                                            <Styled(pre)
                                              className="hljs"
                                              padded={true}
                                            >
                                              <pre
                                                className="hljs emotion-1"
                                              >
                                                <Styled(code)>
                                                  <code
                                                    className="emotion-0"
                                                  >
                                                    <span
                                                      className="token tag"
                                                      key="code-segement0"
                                                    >
                                                      <span
                                                        className="token tag"
                                                        key="code-segment-1-0"
                                                      >
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-0"
                                                        >
                                                          &lt;
                                                        </span>
                                                        div
                                                      </span>
                                                      <span
                                                        className="token punctuation"
                                                        key="code-segment-1-1"
                                                      >
                                                        &gt;
                                                      </span>
                                                    </span>
                                                    <span
                                                      className="token plain-text"
                                                      key="code-segement1"
                                                    >
                                                      
  It's a Basic test story:
  
                                                    </span>
                                                    <span
                                                      className="token tag"
                                                      key="code-segement2"
                                                    >
                                                      <span
                                                        className="token tag"
                                                        key="code-segment-1-0"
                                                      >
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-0"
                                                        >
                                                          &lt;
                                                        </span>
                                                        <span
                                                          className="token class-name"
                                                          key="code-segment-1-1"
                                                        >
                                                          TestComponent
                                                        </span>
                                                      </span>
                                                      
    
                                                      <span
                                                        className="token attr-name"
                                                        key="code-segment-1-2"
                                                      >
                                                        array
                                                      </span>
                                                      <span
                                                        className="token script language-javascript"
                                                        key="code-segment-1-3"
                                                      >
                                                        <span
                                                          className="token script-punctuation punctuation"
                                                          key="code-segment-1-0"
                                                        >
                                                          =
                                                        </span>
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-1"
                                                        >
                                                          {
                                                        </span>
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-2"
                                                        >
                                                          [
                                                        </span>
                                                        
      
                                                        <span
                                                          className="token number"
                                                          key="code-segment-1-4"
                                                        >
                                                          1
                                                        </span>
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-5"
                                                        >
                                                          ,
                                                        </span>
                                                        
      
                                                        <span
                                                          className="token number"
                                                          key="code-segment-1-7"
                                                        >
                                                          2
                                                        </span>
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-8"
                                                        >
                                                          ,
                                                        </span>
                                                        
      
                                                        <span
                                                          className="token number"
                                                          key="code-segment-1-10"
                                                        >
                                                          3
                                                        </span>
                                                        
    
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-12"
                                                        >
                                                          ]
                                                        </span>
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-13"
                                                        >
                                                          }
                                                        </span>
                                                      </span>
                                                      
    
                                                      <span
                                                        className="token attr-name"
                                                        key="code-segment-1-5"
                                                      >
                                                        bool
                                                      </span>
                                                      
    
                                                      <span
                                                        className="token attr-name"
                                                        key="code-segment-1-7"
                                                      >
                                                        func
                                                      </span>
                                                      <span
                                                        className="token script language-javascript"
                                                        key="code-segment-1-8"
                                                      >
                                                        <span
                                                          className="token script-punctuation punctuation"
                                                          key="code-segment-1-0"
                                                        >
                                                          =
                                                        </span>
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-1"
                                                        >
                                                          {
                                                        </span>
                                                        <span
                                                          className="token keyword"
                                                          key="code-segment-1-2"
                                                        >
                                                          function
                                                        </span>
                                                         
                                                        <span
                                                          className="token function"
                                                          key="code-segment-1-4"
                                                        >
                                                          noRefCheck
                                                        </span>
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-5"
                                                        >
                                                          (
                                                        </span>
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-6"
                                                        >
                                                          )
                                                        </span>
                                                         
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-8"
                                                        >
                                                          {
                                                        </span>
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-9"
                                                        >
                                                          }
                                                        </span>
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-10"
                                                        >
                                                          }
                                                        </span>
                                                      </span>
                                                      
    
                                                      <span
                                                        className="token attr-name"
                                                        key="code-segment-1-10"
                                                      >
                                                        number
                                                      </span>
                                                      <span
                                                        className="token script language-javascript"
                                                        key="code-segment-1-11"
                                                      >
                                                        <span
                                                          className="token script-punctuation punctuation"
                                                          key="code-segment-1-0"
                                                        >
                                                          =
                                                        </span>
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-1"
                                                        >
                                                          {
                                                        </span>
                                                        <span
                                                          className="token number"
                                                          key="code-segment-1-2"
                                                        >
                                                          7
                                                        </span>
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-3"
                                                        >
                                                          }
                                                        </span>
                                                      </span>
                                                      
    
                                                      <span
                                                        className="token attr-name"
                                                        key="code-segment-1-13"
                                                      >
                                                        obj
                                                      </span>
                                                      <span
                                                        className="token script language-javascript"
                                                        key="code-segment-1-14"
                                                      >
                                                        <span
                                                          className="token script-punctuation punctuation"
                                                          key="code-segment-1-0"
                                                        >
                                                          =
                                                        </span>
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-1"
                                                        >
                                                          {
                                                        </span>
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-2"
                                                        >
                                                          {
                                                        </span>
                                                        
      a
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-4"
                                                        >
                                                          :
                                                        </span>
                                                         
                                                        <span
                                                          className="token string"
                                                          key="code-segment-1-6"
                                                        >
                                                          'a'
                                                        </span>
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-7"
                                                        >
                                                          ,
                                                        </span>
                                                        
      b
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-9"
                                                        >
                                                          :
                                                        </span>
                                                         
                                                        <span
                                                          className="token string"
                                                          key="code-segment-1-11"
                                                        >
                                                          'b'
                                                        </span>
                                                        
    
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-13"
                                                        >
                                                          }
                                                        </span>
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-14"
                                                        >
                                                          }
                                                        </span>
                                                      </span>
                                                      
    
                                                      <span
                                                        className="token attr-name"
                                                        key="code-segment-1-16"
                                                      >
                                                        string
                                                      </span>
                                                      <span
                                                        className="token attr-value"
                                                        key="code-segment-1-17"
                                                      >
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-0"
                                                        >
                                                          =
                                                        </span>
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-1"
                                                        >
                                                          "
                                                        </span>
                                                        seven
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-3"
                                                        >
                                                          "
                                                        </span>
                                                      </span>
                                                      
  
                                                      <span
                                                        className="token punctuation"
                                                        key="code-segment-1-19"
                                                      >
                                                        /&gt;
                                                      </span>
                                                    </span>
                                                    <span
                                                      className="token plain-text"
                                                      key="code-segement3"
                                                    >
                                                      

                                                    </span>
                                                    <span
                                                      className="token tag"
                                                      key="code-segement4"
                                                    >
                                                      <span
                                                        className="token tag"
                                                        key="code-segment-1-0"
                                                      >
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-0"
                                                        >
                                                          &lt;/
                                                        </span>
                                                        div
                                                      </span>
                                                      <span
                                                        className="token punctuation"
                                                        key="code-segment-1-1"
                                                      >
                                                        &gt;
                                                      </span>
                                                    </span>
                                                  </code>
                                                </Styled(code)>
                                              </pre>
                                            </Styled(pre)>
                                          </SyntaxHighlighter>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div
                                    className="simplebar-placeholder"
                                  />
                                </div>
                                <div
                                  className="simplebar-track simplebar-horizontal"
                                >
                                  <div
                                    className="simplebar-scrollbar"
                                  />
                                </div>
                                <div
                                  className="simplebar-track simplebar-vertical"
                                >
                                  <div
                                    className="simplebar-scrollbar"
                                  />
                                </div>
                              </div>
                            </l>
                          </Component>
                        </Styled(Component)>
                      </ScrollArea>
                    </Component>
                  </Styled(Component)>
                  <ActionBar
                    actionItems={
                      Array [
                        Object {
                          "onClick": [Function],
                          "title": "Copy",
                        },
                      ]
                    }
                  >
                    <Styled(div)>
                      <div
                        className="emotion-9"
                      >
                        <ActionButton
                          key="0"
                          onClick={[Function]}
                        >
                          <button
                            className="emotion-8"
                            onClick={[Function]}
                          >
                            Copy
                          </button>
                        </ActionButton>
                      </div>
                    </Styled(div)>
                  </ActionBar>
                </div>
              </Styled(div)>
            </SyntaxHighlighter>
          </ThemeProvider>
        </Code>
      </div>
    </div>
  </Story>
</Info>
`;

exports[`addon Info should render component description if story name matches component 1`] = `
.emotion-10 {
  position: relative;
  overflow: hidden;
  color: #333333;
  border: 1px solid rgba(0,0,0,.1);
  background: #FFFFFF;
}

.emotion-5 {
  position: relative;
}

.emotion-5 code {
  padding-right: 10px;
}

.emotion-5 * .token {
  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
  -webkit-font-smoothing: antialiased;
}

.emotion-5 * .token.comment {
  color: #008000;
  font-style: italic;
}

.emotion-5 * .token.prolog {
  color: #008000;
  font-style: italic;
}

.emotion-5 * .token.doctype {
  color: #008000;
  font-style: italic;
}

.emotion-5 * .token.cdata {
  color: #008000;
  font-style: italic;
}

.emotion-5 * .token.string {
  color: #A31515;
}

.emotion-5 * .token.punctuation {
  color: #393A34;
}

.emotion-5 * .token.operator {
  color: #393A34;
}

.emotion-5 * .token.url {
  color: #36acaa;
}

.emotion-5 * .token.symbol {
  color: #36acaa;
}

.emotion-5 * .token.number {
  color: #36acaa;
}

.emotion-5 * .token.boolean {
  color: #36acaa;
}

.emotion-5 * .token.variable {
  color: #36acaa;
}

.emotion-5 * .token.constant {
  color: #36acaa;
}

.emotion-5 * .token.inserted {
  color: #36acaa;
}

.emotion-5 * .token.atrule {
  color: #0000ff;
}

.emotion-5 * .token.keyword {
  color: #0000ff;
}

.emotion-5 * .token.attr-value {
  color: #0000ff;
}

.emotion-5 * .token.function {
  color: #393A34;
}

.emotion-5 * .token.deleted {
  color: #9a050f;
}

.emotion-5 * .token.important {
  font-weight: bold;
}

.emotion-5 * .token.bold {
  font-weight: bold;
}

.emotion-5 * .token.italic {
  font-style: italic;
}

.emotion-5 * .token.class-name {
  color: #2B91AF;
}

.emotion-5 * .token.tag {
  color: #800000;
}

.emotion-5 * .token.selector {
  color: #800000;
}

.emotion-5 * .token.attr-name {
  color: #ff0000;
}

.emotion-5 * .token.property {
  color: #ff0000;
}

.emotion-5 * .token.regex {
  color: #ff0000;
}

.emotion-5 * .token.entity {
  color: #ff0000;
}

.emotion-5 * .token.directive.tag .tag {
  background: #ffff00;
  color: #393A34;
}

.emotion-5 * .language-json .token.boolean {
  color: #0000ff;
}

.emotion-5 * .language-json .token.number {
  color: #0000ff;
}

.emotion-5 * .language-json .token.property {
  color: #2B91AF;
}

.emotion-5 * .namespace {
  opacity: 0.7;
}

.emotion-2 {
  overflow-y: auto;
  height: 100%;
  overflow-x: auto;
  width: 100%;
  position: relative;
}

.emotion-2 code {
  padding-right: 10px;
}

.emotion-2 * .token {
  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
  -webkit-font-smoothing: antialiased;
}

.emotion-2 * .token.comment {
  color: #008000;
  font-style: italic;
}

.emotion-2 * .token.prolog {
  color: #008000;
  font-style: italic;
}

.emotion-2 * .token.doctype {
  color: #008000;
  font-style: italic;
}

.emotion-2 * .token.cdata {
  color: #008000;
  font-style: italic;
}

.emotion-2 * .token.string {
  color: #A31515;
}

.emotion-2 * .token.punctuation {
  color: #393A34;
}

.emotion-2 * .token.operator {
  color: #393A34;
}

.emotion-2 * .token.url {
  color: #36acaa;
}

.emotion-2 * .token.symbol {
  color: #36acaa;
}

.emotion-2 * .token.number {
  color: #36acaa;
}

.emotion-2 * .token.boolean {
  color: #36acaa;
}

.emotion-2 * .token.variable {
  color: #36acaa;
}

.emotion-2 * .token.constant {
  color: #36acaa;
}

.emotion-2 * .token.inserted {
  color: #36acaa;
}

.emotion-2 * .token.atrule {
  color: #0000ff;
}

.emotion-2 * .token.keyword {
  color: #0000ff;
}

.emotion-2 * .token.attr-value {
  color: #0000ff;
}

.emotion-2 * .token.function {
  color: #393A34;
}

.emotion-2 * .token.deleted {
  color: #9a050f;
}

.emotion-2 * .token.important {
  font-weight: bold;
}

.emotion-2 * .token.bold {
  font-weight: bold;
}

.emotion-2 * .token.italic {
  font-style: italic;
}

.emotion-2 * .token.class-name {
  color: #2B91AF;
}

.emotion-2 * .token.tag {
  color: #800000;
}

.emotion-2 * .token.selector {
  color: #800000;
}

.emotion-2 * .token.attr-name {
  color: #ff0000;
}

.emotion-2 * .token.property {
  color: #ff0000;
}

.emotion-2 * .token.regex {
  color: #ff0000;
}

.emotion-2 * .token.entity {
  color: #ff0000;
}

.emotion-2 * .token.directive.tag .tag {
  background: #ffff00;
  color: #393A34;
}

.emotion-2 * .language-json .token.boolean {
  color: #0000ff;
}

.emotion-2 * .language-json .token.number {
  color: #0000ff;
}

.emotion-2 * .language-json .token.property {
  color: #2B91AF;
}

.emotion-2 * .namespace {
  opacity: 0.7;
}

.emotion-1 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  margin: 0;
  padding: 10px;
}

.emotion-0 {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding-right: 0;
  opacity: 1;
}

.emotion-9 {
  position: absolute;
  bottom: 0;
  right: 0;
  max-width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: #FFFFFF;
  z-index: 1;
}

.emotion-8 {
  border: 0 none;
  padding: 4px 10px;
  cursor: pointer;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #333333;
  background: #FFFFFF;
  font-size: 12px;
  line-height: 16px;
  font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight: 700;
  border-top: 1px solid rgba(0,0,0,.1);
  border-left: 1px solid rgba(0,0,0,.1);
  margin-left: -1px;
  border-radius: 4px 0 0 0;
}

.emotion-8:not(:last-child) {
  border-right: 1px solid rgba(0,0,0,.1);
}

.emotion-8 + * {
  border-left: 1px solid rgba(0,0,0,.1);
  border-radius: 0;
}

.emotion-8:focus {
  box-shadow: #1EA7FD 0 -3px 0 0 inset;
  outline: 0 none;
}

<Info>
  <Story
    PropTable={[Function]}
    components={
      Object {
        "a": [Function],
        "code": [Function],
        "h1": [Function],
        "h2": [Function],
        "h3": [Function],
        "h4": [Function],
        "h5": [Function],
        "h6": [Function],
        "li": [Function],
        "p": [Function],
        "ul": [Function],
      }
    }
    context={
      Object {
        "kind": "Test Components",
        "name": "TestComponent",
      }
    }
    excludedPropTypes={Array []}
    info=""
    maxPropArrayLength={3}
    maxPropObjectKeys={3}
    maxPropStringLength={50}
    maxPropsIntoLine={3}
    propTableCompare={[Function]}
    propTables={null}
    propTablesExclude={Array []}
    showHeader={true}
    showInline={true}
    showSource={true}
    styles={[Function]}
  >
    <div>
      <div
        style={
          Object {
            "backgroundColor": "#fff",
            "borderRadius": "2px",
            "color": "black",
            "fontFamily": "Helvetica Neue, Helvetica, Segoe UI, Arial, freesans, sans-serif",
            "fontSize": "15px",
            "fontWeight": 300,
            "lineHeight": 1.45,
            "padding": "20px 40px 40px",
          }
        }
      >
        <div
          style={
            Object {
              "borderBottom": "1px solid #eee",
              "marginBottom": 10,
              "paddingTop": 10,
            }
          }
        >
          <h1
            style={
              Object {
                "fontSize": "35px",
                "margin": 0,
                "padding": 0,
              }
            }
          >
            Test Components
          </h1>
          <h2
            style={
              Object {
                "fontSize": "22px",
                "fontWeight": 400,
                "margin": "0 0 10px 0",
                "padding": 0,
              }
            }
          >
            TestComponent
          </h2>
        </div>
      </div>
    </div>
    <div
      id="story-root"
      style={Object {}}
    >
      <div>
        It's a 
        TestComponent
         story:
        <TestComponent
          array={
            Array [
              1,
              2,
              3,
            ]
          }
          bool={true}
          func={[Function]}
          number={7}
          obj={
            Object {
              "a": "a",
              "b": "b",
            }
          }
          string="seven"
        >
          <div>
            <h1>
              x =&gt; x + 1
            </h1>
            <h2>
              [object Object]
            </h2>
            <h3>
              1,2,3
            </h3>
            <h4>
              7
            </h4>
            <h5>
              seven
            </h5>
            <h6>
              true
            </h6>
            <p>
              undefined
            </p>
            <a
              href="#"
            >
              test
            </a>
            <code>
              storiesOf
            </code>
            <ul>
              <li>
                1
              </li>
              <li>
                2
              </li>
            </ul>
          </div>
        </TestComponent>
      </div>
    </div>
    <div>
      <div
        style={
          Object {
            "backgroundColor": "#fff",
            "borderRadius": "2px",
            "color": "black",
            "fontFamily": "Helvetica Neue, Helvetica, Segoe UI, Arial, freesans, sans-serif",
            "fontSize": "15px",
            "fontWeight": 300,
            "lineHeight": 1.45,
            "padding": "20px 40px 40px",
          }
        }
      >
        <H1
          context={Object {}}
          id="awesome-test-component-description"
          key="0"
        >
          <h1
            id="awesome-test-component-description"
            style={
              Object {
                "borderBottom": "1px solid #eee",
                "fontSize": "40px",
                "fontWeight": 600,
                "margin": 0,
                "padding": 0,
              }
            }
          >
            Awesome test component description
          </h1>
        </H1>
        <H2
          context={Object {}}
          id="awesome-test-component-description-with-markdown-support"
          key="1"
        >
          <h2
            id="awesome-test-component-description-with-markdown-support"
            style={
              Object {
                "fontSize": "30px",
                "fontWeight": 600,
                "margin": 0,
                "padding": 0,
              }
            }
          >
            with markdown support
          </h2>
        </H2>
        <P
          context={Object {}}
          key="4"
        >
          <p>
            <strong
              key="2"
            >
              bold
            </strong>
             
            <em
              key="3"
            >
              cursive
            </em>
          </p>
        </P>
        <Code
          code="a;"
          key="5"
          language="js"
        >
          <ThemeProvider
            theme={
              Object {
                "addonActionsTheme": Object {
                  "ARROW_ANIMATION_DURATION": "0",
                  "ARROW_COLOR": "rgba(0,0,0,0.3)",
                  "ARROW_FONT_SIZE": 8,
                  "ARROW_MARGIN_RIGHT": 4,
                  "BASE_BACKGROUND_COLOR": "transparent",
                  "BASE_COLOR": "#333333",
                  "BASE_FONT_FAMILY": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
                  "BASE_FONT_SIZE": 13,
                  "BASE_LINE_HEIGHT": "18px",
                  "HTML_ATTRIBUTE_NAME_COLOR": "rgb(153, 69, 0)",
                  "HTML_ATTRIBUTE_VALUE_COLOR": "rgb(26, 26, 166)",
                  "HTML_COMMENT_COLOR": "rgb(35, 110, 37)",
                  "HTML_DOCTYPE_COLOR": "rgb(192, 192, 192)",
                  "HTML_TAGNAME_COLOR": "rgb(136, 18, 128)",
                  "HTML_TAGNAME_TEXT_TRANSFORM": "lowercase",
                  "HTML_TAG_COLOR": "rgb(168, 148, 166)",
                  "OBJECT_NAME_COLOR": "rgb(136, 19, 145)",
                  "OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES": 10,
                  "OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES": 5,
                  "OBJECT_VALUE_BOOLEAN_COLOR": "rgb(28, 0, 207)",
                  "OBJECT_VALUE_FUNCTION_PREFIX_COLOR": "rgb(13, 34, 170)",
                  "OBJECT_VALUE_NULL_COLOR": "rgb(128, 128, 128)",
                  "OBJECT_VALUE_NUMBER_COLOR": "rgb(28, 0, 207)",
                  "OBJECT_VALUE_REGEXP_COLOR": "rgb(196, 26, 22)",
                  "OBJECT_VALUE_STRING_COLOR": "rgb(196, 26, 22)",
                  "OBJECT_VALUE_SYMBOL_COLOR": "rgb(196, 26, 22)",
                  "OBJECT_VALUE_UNDEFINED_COLOR": "rgb(128, 128, 128)",
                  "TABLE_BORDER_COLOR": "#aaa",
                  "TABLE_DATA_BACKGROUND_IMAGE": "linear-gradient(to bottom, white, white 50%, rgb(234, 243, 255) 50%, rgb(234, 243, 255))",
                  "TABLE_DATA_BACKGROUND_SIZE": "128px 32px",
                  "TABLE_SORT_ICON_COLOR": "#6e6e6e",
                  "TABLE_TH_BACKGROUND_COLOR": "#eee",
                  "TABLE_TH_HOVER_COLOR": "hsla(0, 0%, 90%, 1)",
                  "TREENODE_FONT_FAMILY": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
                  "TREENODE_FONT_SIZE": 13,
                  "TREENODE_LINE_HEIGHT": "18px",
                  "TREENODE_PADDING_LEFT": 12,
                },
                "animation": Object {
                  "float": Object {
                    "anim": 1,
                    "name": "animation-6tolu8",
                    "styles": "@keyframes animation-6tolu8{
  0% { transform: translateY(1px); }
  25% { transform: translateY(0px); }
  50% { transform: translateY(-3px); }
  100% { transform: translateY(1px); }
}",
                    "toString": [Function],
                  },
                  "glow": Object {
                    "anim": 1,
                    "name": "animation-r0iffl",
                    "styles": "@keyframes animation-r0iffl{
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}",
                    "toString": [Function],
                  },
                  "hoverable": Object {
                    "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9hbmltYXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0NxQiIsImZpbGUiOiIuLi9zcmMvYW5pbWF0aW9uLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuZXhwb3J0IGNvbnN0IGVhc2luZyA9IHtcbiAgcnViYmVyOiAnY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMzUsIDEuMDUpJyxcbn07XG5cbmNvbnN0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2Bcblx0ZnJvbSB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG5cdH1cblx0dG8ge1xuXHRcdHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG5cdH1cbmA7XG5cbmNvbnN0IGdsb3cgPSBrZXlmcmFtZXNgXG4gIDAlLCAxMDAlIHsgb3BhY2l0eTogMTsgfVxuICA1MCUgeyBvcGFjaXR5OiAuNDsgfVxuYDtcblxuY29uc3QgZmxvYXQgPSBrZXlmcmFtZXNgXG4gIDAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDFweCk7IH1cbiAgMjUlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDBweCk7IH1cbiAgNTAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0zcHgpOyB9XG4gIDEwMCUgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMXB4KTsgfVxuYDtcblxuY29uc3QgamlnZ2xlID0ga2V5ZnJhbWVzYFxuICAwJSwgMTAwJSB7IHRyYW5zZm9ybTp0cmFuc2xhdGUzZCgwLDAsMCk7IH1cbiAgMTIuNSUsIDYyLjUlIHsgdHJhbnNmb3JtOnRyYW5zbGF0ZTNkKC00cHgsMCwwKTsgfVxuICAzNy41JSwgODcuNSUgeyAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCg0cHgsMCwwKTsgIH1cbmA7XG5cbmNvbnN0IGlubGluZUdsb3cgPSBjc3NgXG4gIGFuaW1hdGlvbjogJHtnbG93fSAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xuICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcHJvZ3Jlc3M7XG5gO1xuXG4vLyBob3ZlciAmIGFjdGl2ZSBzdGF0ZSBmb3IgbGlua3MgYW5kIGJ1dHRvbnNcbmNvbnN0IGhvdmVyYWJsZSA9IGNzc2BcbiAgdHJhbnNpdGlvbjogYWxsIDE1MG1zIGVhc2Utb3V0O1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgLTJweCwgMCk7XG4gIH1cblxuICAmOmFjdGl2ZSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGFuaW1hdGlvbiA9IHtcbiAgcm90YXRlMzYwLFxuICBnbG93LFxuICBmbG9hdCxcbiAgamlnZ2xlLFxuICBpbmxpbmVHbG93LFxuICBob3ZlcmFibGUsXG59O1xuIl19 */",
                    "name": "1o7rzh8-hoverable",
                    "styles": "transition:all 150ms ease-out;transform:translate3d(0,0,0);&:hover{transform:translate3d(0,-2px,0);}&:active{transform:translate3d(0,0,0);};label:hoverable;",
                    "toString": [Function],
                  },
                  "inlineGlow": Object {
                    "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9hbmltYXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUNzQiIsImZpbGUiOiIuLi9zcmMvYW5pbWF0aW9uLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuZXhwb3J0IGNvbnN0IGVhc2luZyA9IHtcbiAgcnViYmVyOiAnY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMzUsIDEuMDUpJyxcbn07XG5cbmNvbnN0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2Bcblx0ZnJvbSB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG5cdH1cblx0dG8ge1xuXHRcdHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG5cdH1cbmA7XG5cbmNvbnN0IGdsb3cgPSBrZXlmcmFtZXNgXG4gIDAlLCAxMDAlIHsgb3BhY2l0eTogMTsgfVxuICA1MCUgeyBvcGFjaXR5OiAuNDsgfVxuYDtcblxuY29uc3QgZmxvYXQgPSBrZXlmcmFtZXNgXG4gIDAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDFweCk7IH1cbiAgMjUlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDBweCk7IH1cbiAgNTAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0zcHgpOyB9XG4gIDEwMCUgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMXB4KTsgfVxuYDtcblxuY29uc3QgamlnZ2xlID0ga2V5ZnJhbWVzYFxuICAwJSwgMTAwJSB7IHRyYW5zZm9ybTp0cmFuc2xhdGUzZCgwLDAsMCk7IH1cbiAgMTIuNSUsIDYyLjUlIHsgdHJhbnNmb3JtOnRyYW5zbGF0ZTNkKC00cHgsMCwwKTsgfVxuICAzNy41JSwgODcuNSUgeyAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCg0cHgsMCwwKTsgIH1cbmA7XG5cbmNvbnN0IGlubGluZUdsb3cgPSBjc3NgXG4gIGFuaW1hdGlvbjogJHtnbG93fSAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xuICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcHJvZ3Jlc3M7XG5gO1xuXG4vLyBob3ZlciAmIGFjdGl2ZSBzdGF0ZSBmb3IgbGlua3MgYW5kIGJ1dHRvbnNcbmNvbnN0IGhvdmVyYWJsZSA9IGNzc2BcbiAgdHJhbnNpdGlvbjogYWxsIDE1MG1zIGVhc2Utb3V0O1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgLTJweCwgMCk7XG4gIH1cblxuICAmOmFjdGl2ZSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGFuaW1hdGlvbiA9IHtcbiAgcm90YXRlMzYwLFxuICBnbG93LFxuICBmbG9hdCxcbiAgamlnZ2xlLFxuICBpbmxpbmVHbG93LFxuICBob3ZlcmFibGUsXG59O1xuIl19 */",
                    "name": "x4tfcc-inlineGlow",
                    "next": Object {
                      "name": "animation-r0iffl",
                      "next": undefined,
                      "styles": "@keyframes animation-r0iffl{
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}",
                    },
                    "styles": "animation:animation-r0iffl 1.5s ease-in-out infinite;color:transparent;cursor:progress;;label:inlineGlow;",
                    "toString": [Function],
                  },
                  "jiggle": Object {
                    "anim": 1,
                    "name": "animation-ynpq7w",
                    "styles": "@keyframes animation-ynpq7w{
  0%, 100% { transform:translate3d(0,0,0); }
  12.5%, 62.5% { transform:translate3d(-4px,0,0); }
  37.5%, 87.5% {  transform: translate3d(4px,0,0);  }
}",
                    "toString": [Function],
                  },
                  "rotate360": Object {
                    "anim": 1,
                    "name": "animation-u07e3c",
                    "styles": "@keyframes animation-u07e3c{
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}",
                    "toString": [Function],
                  },
                },
                "appBorderColor": "rgba(0,0,0,.1)",
                "appBorderRadius": 4,
                "background": Object {
                  "app": "#F6F9FC",
                  "bar": "#FFFFFF",
                  "content": "#FFFFFF",
                  "critical": "#FF4400",
                  "gridCellSize": 10,
                  "hoverable": "rgba(0,0,0,.05)",
                  "negative": "#FEDED2",
                  "positive": "#E1FFD4",
                  "warning": "#FFF5CF",
                },
                "barBg": "#FFFFFF",
                "barSelectedColor": "#1EA7FD",
                "barTextColor": "#999999",
                "base": "light",
                "brand": Object {
                  "image": undefined,
                  "title": undefined,
                  "url": undefined,
                },
                "code": Object {
                  "language-json .token.boolean": Object {
                    "color": "#0000ff",
                  },
                  "language-json .token.number": Object {
                    "color": "#0000ff",
                  },
                  "language-json .token.property": Object {
                    "color": "#2B91AF",
                  },
                  "namespace": Object {
                    "opacity": 0.7,
                  },
                  "token": Object {
                    "&.atrule": Object {
                      "color": "#0000ff",
                    },
                    "&.attr-name": Object {
                      "color": "#ff0000",
                    },
                    "&.attr-value": Object {
                      "color": "#0000ff",
                    },
                    "&.bold": Object {
                      "fontWeight": "bold",
                    },
                    "&.boolean": Object {
                      "color": "#36acaa",
                    },
                    "&.cdata": Object {
                      "color": "#008000",
                      "fontStyle": "italic",
                    },
                    "&.class-name": Object {
                      "color": "#2B91AF",
                    },
                    "&.comment": Object {
                      "color": "#008000",
                      "fontStyle": "italic",
                    },
                    "&.constant": Object {
                      "color": "#36acaa",
                    },
                    "&.deleted": Object {
                      "color": "#9a050f",
                    },
                    "&.directive.tag .tag": Object {
                      "background": "#ffff00",
                      "color": "#393A34",
                    },
                    "&.doctype": Object {
                      "color": "#008000",
                      "fontStyle": "italic",
                    },
                    "&.entity": Object {
                      "color": "#ff0000",
                    },
                    "&.function": Object {
                      "color": "#393A34",
                    },
                    "&.important": Object {
                      "fontWeight": "bold",
                    },
                    "&.inserted": Object {
                      "color": "#36acaa",
                    },
                    "&.italic": Object {
                      "fontStyle": "italic",
                    },
                    "&.keyword": Object {
                      "color": "#0000ff",
                    },
                    "&.number": Object {
                      "color": "#36acaa",
                    },
                    "&.operator": Object {
                      "color": "#393A34",
                    },
                    "&.prolog": Object {
                      "color": "#008000",
                      "fontStyle": "italic",
                    },
                    "&.property": Object {
                      "color": "#ff0000",
                    },
                    "&.punctuation": Object {
                      "color": "#393A34",
                    },
                    "&.regex": Object {
                      "color": "#ff0000",
                    },
                    "&.selector": Object {
                      "color": "#800000",
                    },
                    "&.string": Object {
                      "color": "#A31515",
                    },
                    "&.symbol": Object {
                      "color": "#36acaa",
                    },
                    "&.tag": Object {
                      "color": "#800000",
                    },
                    "&.url": Object {
                      "color": "#36acaa",
                    },
                    "&.variable": Object {
                      "color": "#36acaa",
                    },
                    "WebkitFontSmoothing": "antialiased",
                    "fontFamily": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
                  },
                },
                "color": Object {
                  "ancillary": "#22a699",
                  "border": "rgba(0,0,0,.1)",
                  "critical": "#FFFFFF",
                  "dark": "#666666",
                  "darker": "#444444",
                  "darkest": "#333333",
                  "defaultText": "#333333",
                  "gold": "#FFAE00",
                  "green": "#66BF3C",
                  "inverseText": "#FFFFFF",
                  "light": "#F3F3F3",
                  "lighter": "#F8F8F8",
                  "lightest": "#FFFFFF",
                  "medium": "#DDDDDD",
                  "mediumdark": "#999999",
                  "mediumlight": "#EEEEEE",
                  "negative": "#FF4400",
                  "orange": "#FC521F",
                  "positive": "#66BF3C",
                  "primary": "#FF4785",
                  "purple": "#6F2CAC",
                  "seafoam": "#37D5D3",
                  "secondary": "#1EA7FD",
                  "tertiary": "#FAFBFC",
                  "ultraviolet": "#2A0481",
                  "warning": "#E69D00",
                },
                "easing": Object {
                  "rubber": "cubic-bezier(0.175, 0.885, 0.335, 1.05)",
                },
                "input": Object {
                  "background": "#FFFFFF",
                  "border": "rgba(0,0,0,.1)",
                  "borderRadius": 4,
                  "color": "#333333",
                },
                "layoutMargin": 10,
                "typography": Object {
                  "fonts": Object {
                    "base": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
                    "mono": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
                  },
                  "size": Object {
                    "code": 90,
                    "l1": 32,
                    "l2": 40,
                    "l3": 48,
                    "m1": 20,
                    "m2": 24,
                    "m3": 28,
                    "s1": 12,
                    "s2": 14,
                    "s3": 16,
                  },
                  "weight": Object {
                    "black": 900,
                    "bold": 700,
                    "regular": 400,
                  },
                },
              }
            }
          >
            <SyntaxHighlighter
              bordered={true}
              copyable={true}
              format={false}
              language="js"
            >
              <Styled(div)
                bordered={true}
                className={null}
                padded={false}
              >
                <div
                  className="emotion-10"
                >
                  <Styled(Component)>
                    <Component
                      className="emotion-5"
                    >
                      <ScrollArea
                        className="emotion-5"
                        horizontal={true}
                        vertical={true}
                      >
                        <ForwardRef(render)
                          styles={[Function]}
                        >
                          <InnerGlobal
                            cache={
                              Object {
                                "insert": [Function],
                                "inserted": Object {
                                  "11xgcgt": true,
                                  "1fhpnuv": true,
                                  "1imo1gr": true,
                                  "1maezg8": true,
                                  "1si67pu": true,
                                  "4zr3vl": true,
                                  "esgpkx": true,
                                },
                                "key": "css",
                                "nonce": undefined,
                                "registered": Object {
                                  "emotion-2": "overflow-y:auto;height:100%;overflow-x:auto;width:100%;position:relative;& code{padding-right:10px;}* .token{font-family:\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace;-webkit-font-smoothing:antialiased;&.comment{color:#008000;font-style:italic;}&.prolog{color:#008000;font-style:italic;}&.doctype{color:#008000;font-style:italic;}&.cdata{color:#008000;font-style:italic;}&.string{color:#A31515;}&.punctuation{color:#393A34;}&.operator{color:#393A34;}&.url{color:#36acaa;}&.symbol{color:#36acaa;}&.number{color:#36acaa;}&.boolean{color:#36acaa;}&.variable{color:#36acaa;}&.constant{color:#36acaa;}&.inserted{color:#36acaa;}&.atrule{color:#0000ff;}&.keyword{color:#0000ff;}&.attr-value{color:#0000ff;}&.function{color:#393A34;}&.deleted{color:#9a050f;}&.important{font-weight:bold;}&.bold{font-weight:bold;}&.italic{font-style:italic;}&.class-name{color:#2B91AF;}&.tag{color:#800000;}&.selector{color:#800000;}&.attr-name{color:#ff0000;}&.property{color:#ff0000;}&.regex{color:#ff0000;}&.entity{color:#ff0000;}&.directive.tag .tag{background:#ffff00;color:#393A34;}}* .language-json .token.boolean{color:#0000ff;}* .language-json .token.number{color:#0000ff;}* .language-json .token.property{color:#2B91AF;}* .namespace{opacity:0.7;}",
                                  "emotion-5": "position:relative;& code{padding-right:10px;}* .token{font-family:\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace;-webkit-font-smoothing:antialiased;&.comment{color:#008000;font-style:italic;}&.prolog{color:#008000;font-style:italic;}&.doctype{color:#008000;font-style:italic;}&.cdata{color:#008000;font-style:italic;}&.string{color:#A31515;}&.punctuation{color:#393A34;}&.operator{color:#393A34;}&.url{color:#36acaa;}&.symbol{color:#36acaa;}&.number{color:#36acaa;}&.boolean{color:#36acaa;}&.variable{color:#36acaa;}&.constant{color:#36acaa;}&.inserted{color:#36acaa;}&.atrule{color:#0000ff;}&.keyword{color:#0000ff;}&.attr-value{color:#0000ff;}&.function{color:#393A34;}&.deleted{color:#9a050f;}&.important{font-weight:bold;}&.bold{font-weight:bold;}&.italic{font-style:italic;}&.class-name{color:#2B91AF;}&.tag{color:#800000;}&.selector{color:#800000;}&.attr-name{color:#ff0000;}&.property{color:#ff0000;}&.regex{color:#ff0000;}&.entity{color:#ff0000;}&.directive.tag .tag{background:#ffff00;color:#393A34;}}* .language-json .token.boolean{color:#0000ff;}* .language-json .token.number{color:#0000ff;}* .language-json .token.property{color:#2B91AF;}* .namespace{opacity:0.7;}",
                                },
                                "sheet": StyleSheet {
                                  "before": null,
                                  "container": <head>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-scrollbar:before{position:absolute;content:"";border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-vertical{top:0;width:11px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-horizontal{left:0;height:11px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-scrollbar:before{position:absolute;content:"";border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-vertical{top:0;width:11px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-horizontal{left:0;height:11px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-scrollbar:before{position:absolute;content:"";border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-vertical{top:0;width:11px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-horizontal{left:0;height:11px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-scrollbar:before{position:absolute;content:"";border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-vertical{top:0;width:11px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-horizontal{left:0;height:11px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-10{position:relative;overflow:hidden;color:#333333;border:1px solid rgba(0,0,0,.1);background:#FFFFFF;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5{position:relative;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 code{padding-right:10px;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.comment{color:#008000;font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.prolog{color:#008000;font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.doctype{color:#008000;font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.cdata{color:#008000;font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.string{color:#A31515;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.punctuation{color:#393A34;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.operator{color:#393A34;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.url{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.symbol{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.number{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.boolean{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.variable{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.constant{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.inserted{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.atrule{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.keyword{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.attr-value{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.function{color:#393A34;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.deleted{color:#9a050f;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.important{font-weight:bold;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.bold{font-weight:bold;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.italic{font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.class-name{color:#2B91AF;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.tag{color:#800000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.selector{color:#800000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.attr-name{color:#ff0000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.property{color:#ff0000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.regex{color:#ff0000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.entity{color:#ff0000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .language-json .token.boolean{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .language-json .token.number{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .language-json .token.property{color:#2B91AF;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .namespace{opacity:0.7;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2{overflow-y:auto;height:100%;overflow-x:auto;width:100%;position:relative;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 code{padding-right:10px;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.comment{color:#008000;font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.prolog{color:#008000;font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.doctype{color:#008000;font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.cdata{color:#008000;font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.string{color:#A31515;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.punctuation{color:#393A34;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.operator{color:#393A34;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.url{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.symbol{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.number{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.boolean{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.variable{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.constant{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.inserted{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.atrule{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.keyword{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.attr-value{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.function{color:#393A34;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.deleted{color:#9a050f;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.important{font-weight:bold;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.bold{font-weight:bold;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.italic{font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.class-name{color:#2B91AF;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.tag{color:#800000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.selector{color:#800000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.attr-name{color:#ff0000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.property{color:#ff0000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.regex{color:#ff0000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.entity{color:#ff0000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .language-json .token.boolean{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .language-json .token.number{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .language-json .token.property{color:#2B91AF;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .namespace{opacity:0.7;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;margin:0;padding:10px;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-0{-webkit-flex:1;-ms-flex:1;flex:1;padding-right:0;opacity:1;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-9{position:absolute;bottom:0;right:0;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:#FFFFFF;z-index:1;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-8:not(:last-child){border-right:1px solid rgba(0,0,0,.1);}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-8 + *{border-left:1px solid rgba(0,0,0,.1);border-radius:0;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-8:focus{box-shadow:#1EA7FD 0 -3px 0 0 inset;outline:0 none;}
                                    </style>
                                  </head>,
                                  "ctr": 82,
                                  "isSpeedy": false,
                                  "key": "css",
                                  "nonce": undefined,
                                  "tags": Array [
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-10{position:relative;overflow:hidden;color:#333333;border:1px solid rgba(0,0,0,.1);background:#FFFFFF;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5{position:relative;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 code{padding-right:10px;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.comment{color:#008000;font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.prolog{color:#008000;font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.doctype{color:#008000;font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.cdata{color:#008000;font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.string{color:#A31515;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.punctuation{color:#393A34;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.operator{color:#393A34;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.url{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.symbol{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.number{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.boolean{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.variable{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.constant{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.inserted{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.atrule{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.keyword{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.attr-value{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.function{color:#393A34;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.deleted{color:#9a050f;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.important{font-weight:bold;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.bold{font-weight:bold;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.italic{font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.class-name{color:#2B91AF;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.tag{color:#800000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.selector{color:#800000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.attr-name{color:#ff0000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.property{color:#ff0000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.regex{color:#ff0000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.entity{color:#ff0000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .language-json .token.boolean{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .language-json .token.number{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .language-json .token.property{color:#2B91AF;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .namespace{opacity:0.7;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2{overflow-y:auto;height:100%;overflow-x:auto;width:100%;position:relative;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 code{padding-right:10px;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.comment{color:#008000;font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.prolog{color:#008000;font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.doctype{color:#008000;font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.cdata{color:#008000;font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.string{color:#A31515;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.punctuation{color:#393A34;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.operator{color:#393A34;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.url{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.symbol{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.number{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.boolean{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.variable{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.constant{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.inserted{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.atrule{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.keyword{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.attr-value{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.function{color:#393A34;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.deleted{color:#9a050f;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.important{font-weight:bold;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.bold{font-weight:bold;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.italic{font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.class-name{color:#2B91AF;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.tag{color:#800000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.selector{color:#800000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.attr-name{color:#ff0000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.property{color:#ff0000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.regex{color:#ff0000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.entity{color:#ff0000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .language-json .token.boolean{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .language-json .token.number{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .language-json .token.property{color:#2B91AF;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .namespace{opacity:0.7;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;margin:0;padding:10px;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-0{-webkit-flex:1;-ms-flex:1;flex:1;padding-right:0;opacity:1;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-9{position:absolute;bottom:0;right:0;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:#FFFFFF;z-index:1;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-8:not(:last-child){border-right:1px solid rgba(0,0,0,.1);}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-8 + *{border-left:1px solid rgba(0,0,0,.1);border-radius:0;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-8:focus{box-shadow:#1EA7FD 0 -3px 0 0 inset;outline:0 none;}
                                    </style>,
                                  ],
                                },
                              }
                            }
                            serialized={
                              Object {
                                "map": undefined,
                                "name": "nh5djz",
                                "next": undefined,
                                "styles": "[data-simplebar]{position:relative;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start;}.simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}.simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}.simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}.simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}.simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}.simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;flex-grow:inherit;flex-shrink:0;flex-basis:0;}.simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}.simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}[data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}.simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}.simplebar-scrollbar:before{position:absolute;content:\\"\\";border-radius:7px;left:0;right:0;opacity:0;transition:opacity 0.2s linear;background:#333333;}.simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;transition:opacity 0s linear;}.simplebar-track.simplebar-vertical{top:0;width:11px;}.simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}.simplebar-track.simplebar-horizontal{left:0;height:11px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}[data-simplebar-direction=\\"rtl\\"] .simplebar-track.simplebar-vertical{right:auto;left:0;}",
                                "toString": [Function],
                              }
                            }
                          />
                        </ForwardRef(render)>
                        <Styled(Component)
                          className="emotion-5"
                          horizontal={true}
                          vertical={true}
                        >
                          <Component
                            className="emotion-2"
                            horizontal={true}
                            vertical={true}
                          >
                            <l
                              className="emotion-2"
                              scrollableNodeProps={
                                Object {
                                  "tabIndex": 0,
                                }
                              }
                            >
                              <div
                                className="emotion-2"
                                data-simplebar={true}
                              >
                                <div
                                  className="simplebar-wrapper"
                                >
                                  <div
                                    className="simplebar-height-auto-observer-wrapper"
                                  >
                                    <div
                                      className="simplebar-height-auto-observer"
                                    />
                                  </div>
                                  <div
                                    className="simplebar-mask"
                                  >
                                    <div
                                      className="simplebar-offset"
                                    >
                                      <div
                                        className="simplebar-content-wrapper"
                                        tabIndex={0}
                                      >
                                        <div
                                          className="simplebar-content"
                                        >
                                          <SyntaxHighlighter
                                            CodeTag={
                                              Object {
                                                "$$typeof": Symbol(react.forward_ref),
                                                "__emotion_base": "code",
                                                "__emotion_forwardProp": undefined,
                                                "__emotion_real": [Circular],
                                                "__emotion_styles": Array [
                                                  Object {
                                                    "flex": 1,
                                                    "opacity": 1,
                                                    "paddingRight": 0,
                                                  },
                                                ],
                                                "defaultProps": undefined,
                                                "displayName": "Styled(code)",
                                                "render": [Function],
                                                "withComponent": [Function],
                                              }
                                            }
                                            PreTag={
                                              Object {
                                                "$$typeof": Symbol(react.forward_ref),
                                                "__emotion_base": "pre",
                                                "__emotion_forwardProp": undefined,
                                                "__emotion_real": [Circular],
                                                "__emotion_styles": Array [
                                                  [Function],
                                                ],
                                                "defaultProps": undefined,
                                                "displayName": "Styled(pre)",
                                                "render": [Function],
                                                "withComponent": [Function],
                                              }
                                            }
                                            language="js"
                                            lineNumberContainerStyle={Object {}}
                                            padded={true}
                                            useInlineStyles={false}
                                          >
                                            <Styled(pre)
                                              className="hljs"
                                              padded={true}
                                            >
                                              <pre
                                                className="hljs emotion-1"
                                              >
                                                <Styled(code)>
                                                  <code
                                                    className="emotion-0"
                                                  >
                                                    a
                                                    <span
                                                      className="token punctuation"
                                                      key="code-segement1"
                                                    >
                                                      ;
                                                    </span>
                                                  </code>
                                                </Styled(code)>
                                              </pre>
                                            </Styled(pre)>
                                          </SyntaxHighlighter>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div
                                    className="simplebar-placeholder"
                                  />
                                </div>
                                <div
                                  className="simplebar-track simplebar-horizontal"
                                >
                                  <div
                                    className="simplebar-scrollbar"
                                  />
                                </div>
                                <div
                                  className="simplebar-track simplebar-vertical"
                                >
                                  <div
                                    className="simplebar-scrollbar"
                                  />
                                </div>
                              </div>
                            </l>
                          </Component>
                        </Styled(Component)>
                      </ScrollArea>
                    </Component>
                  </Styled(Component)>
                  <ActionBar
                    actionItems={
                      Array [
                        Object {
                          "onClick": [Function],
                          "title": "Copy",
                        },
                      ]
                    }
                  >
                    <Styled(div)>
                      <div
                        className="emotion-9"
                      >
                        <ActionButton
                          key="0"
                          onClick={[Function]}
                        >
                          <button
                            className="emotion-8"
                            onClick={[Function]}
                          >
                            Copy
                          </button>
                        </ActionButton>
                      </div>
                    </Styled(div)>
                  </ActionBar>
                </div>
              </Styled(div)>
            </SyntaxHighlighter>
          </ThemeProvider>
        </Code>
        <h1
          style={
            Object {
              "borderBottom": "1px solid #EEE",
              "fontSize": "25px",
              "margin": "20px 0 0 0",
              "padding": "0 0 5px 0",
            }
          }
        >
          Story Source
        </h1>
        <Code
          code="<div>
  It's a TestComponent story:
  <TestComponent
    array={[
      1,
      2,
      3
    ]}
    bool
    func={function noRefCheck() {}}
    number={7}
    obj={{
      a: 'a',
      b: 'b'
    }}
    string=\\"seven\\"
  />
</div>"
          format={false}
          language="jsx"
        >
          <ThemeProvider
            theme={
              Object {
                "addonActionsTheme": Object {
                  "ARROW_ANIMATION_DURATION": "0",
                  "ARROW_COLOR": "rgba(0,0,0,0.3)",
                  "ARROW_FONT_SIZE": 8,
                  "ARROW_MARGIN_RIGHT": 4,
                  "BASE_BACKGROUND_COLOR": "transparent",
                  "BASE_COLOR": "#333333",
                  "BASE_FONT_FAMILY": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
                  "BASE_FONT_SIZE": 13,
                  "BASE_LINE_HEIGHT": "18px",
                  "HTML_ATTRIBUTE_NAME_COLOR": "rgb(153, 69, 0)",
                  "HTML_ATTRIBUTE_VALUE_COLOR": "rgb(26, 26, 166)",
                  "HTML_COMMENT_COLOR": "rgb(35, 110, 37)",
                  "HTML_DOCTYPE_COLOR": "rgb(192, 192, 192)",
                  "HTML_TAGNAME_COLOR": "rgb(136, 18, 128)",
                  "HTML_TAGNAME_TEXT_TRANSFORM": "lowercase",
                  "HTML_TAG_COLOR": "rgb(168, 148, 166)",
                  "OBJECT_NAME_COLOR": "rgb(136, 19, 145)",
                  "OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES": 10,
                  "OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES": 5,
                  "OBJECT_VALUE_BOOLEAN_COLOR": "rgb(28, 0, 207)",
                  "OBJECT_VALUE_FUNCTION_PREFIX_COLOR": "rgb(13, 34, 170)",
                  "OBJECT_VALUE_NULL_COLOR": "rgb(128, 128, 128)",
                  "OBJECT_VALUE_NUMBER_COLOR": "rgb(28, 0, 207)",
                  "OBJECT_VALUE_REGEXP_COLOR": "rgb(196, 26, 22)",
                  "OBJECT_VALUE_STRING_COLOR": "rgb(196, 26, 22)",
                  "OBJECT_VALUE_SYMBOL_COLOR": "rgb(196, 26, 22)",
                  "OBJECT_VALUE_UNDEFINED_COLOR": "rgb(128, 128, 128)",
                  "TABLE_BORDER_COLOR": "#aaa",
                  "TABLE_DATA_BACKGROUND_IMAGE": "linear-gradient(to bottom, white, white 50%, rgb(234, 243, 255) 50%, rgb(234, 243, 255))",
                  "TABLE_DATA_BACKGROUND_SIZE": "128px 32px",
                  "TABLE_SORT_ICON_COLOR": "#6e6e6e",
                  "TABLE_TH_BACKGROUND_COLOR": "#eee",
                  "TABLE_TH_HOVER_COLOR": "hsla(0, 0%, 90%, 1)",
                  "TREENODE_FONT_FAMILY": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
                  "TREENODE_FONT_SIZE": 13,
                  "TREENODE_LINE_HEIGHT": "18px",
                  "TREENODE_PADDING_LEFT": 12,
                },
                "animation": Object {
                  "float": Object {
                    "anim": 1,
                    "name": "animation-6tolu8",
                    "styles": "@keyframes animation-6tolu8{
  0% { transform: translateY(1px); }
  25% { transform: translateY(0px); }
  50% { transform: translateY(-3px); }
  100% { transform: translateY(1px); }
}",
                    "toString": [Function],
                  },
                  "glow": Object {
                    "anim": 1,
                    "name": "animation-r0iffl",
                    "styles": "@keyframes animation-r0iffl{
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}",
                    "toString": [Function],
                  },
                  "hoverable": Object {
                    "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9hbmltYXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0NxQiIsImZpbGUiOiIuLi9zcmMvYW5pbWF0aW9uLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuZXhwb3J0IGNvbnN0IGVhc2luZyA9IHtcbiAgcnViYmVyOiAnY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMzUsIDEuMDUpJyxcbn07XG5cbmNvbnN0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2Bcblx0ZnJvbSB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG5cdH1cblx0dG8ge1xuXHRcdHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG5cdH1cbmA7XG5cbmNvbnN0IGdsb3cgPSBrZXlmcmFtZXNgXG4gIDAlLCAxMDAlIHsgb3BhY2l0eTogMTsgfVxuICA1MCUgeyBvcGFjaXR5OiAuNDsgfVxuYDtcblxuY29uc3QgZmxvYXQgPSBrZXlmcmFtZXNgXG4gIDAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDFweCk7IH1cbiAgMjUlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDBweCk7IH1cbiAgNTAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0zcHgpOyB9XG4gIDEwMCUgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMXB4KTsgfVxuYDtcblxuY29uc3QgamlnZ2xlID0ga2V5ZnJhbWVzYFxuICAwJSwgMTAwJSB7IHRyYW5zZm9ybTp0cmFuc2xhdGUzZCgwLDAsMCk7IH1cbiAgMTIuNSUsIDYyLjUlIHsgdHJhbnNmb3JtOnRyYW5zbGF0ZTNkKC00cHgsMCwwKTsgfVxuICAzNy41JSwgODcuNSUgeyAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCg0cHgsMCwwKTsgIH1cbmA7XG5cbmNvbnN0IGlubGluZUdsb3cgPSBjc3NgXG4gIGFuaW1hdGlvbjogJHtnbG93fSAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xuICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcHJvZ3Jlc3M7XG5gO1xuXG4vLyBob3ZlciAmIGFjdGl2ZSBzdGF0ZSBmb3IgbGlua3MgYW5kIGJ1dHRvbnNcbmNvbnN0IGhvdmVyYWJsZSA9IGNzc2BcbiAgdHJhbnNpdGlvbjogYWxsIDE1MG1zIGVhc2Utb3V0O1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgLTJweCwgMCk7XG4gIH1cblxuICAmOmFjdGl2ZSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGFuaW1hdGlvbiA9IHtcbiAgcm90YXRlMzYwLFxuICBnbG93LFxuICBmbG9hdCxcbiAgamlnZ2xlLFxuICBpbmxpbmVHbG93LFxuICBob3ZlcmFibGUsXG59O1xuIl19 */",
                    "name": "1o7rzh8-hoverable",
                    "styles": "transition:all 150ms ease-out;transform:translate3d(0,0,0);&:hover{transform:translate3d(0,-2px,0);}&:active{transform:translate3d(0,0,0);};label:hoverable;",
                    "toString": [Function],
                  },
                  "inlineGlow": Object {
                    "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9hbmltYXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUNzQiIsImZpbGUiOiIuLi9zcmMvYW5pbWF0aW9uLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuZXhwb3J0IGNvbnN0IGVhc2luZyA9IHtcbiAgcnViYmVyOiAnY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMzUsIDEuMDUpJyxcbn07XG5cbmNvbnN0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2Bcblx0ZnJvbSB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG5cdH1cblx0dG8ge1xuXHRcdHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG5cdH1cbmA7XG5cbmNvbnN0IGdsb3cgPSBrZXlmcmFtZXNgXG4gIDAlLCAxMDAlIHsgb3BhY2l0eTogMTsgfVxuICA1MCUgeyBvcGFjaXR5OiAuNDsgfVxuYDtcblxuY29uc3QgZmxvYXQgPSBrZXlmcmFtZXNgXG4gIDAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDFweCk7IH1cbiAgMjUlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDBweCk7IH1cbiAgNTAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0zcHgpOyB9XG4gIDEwMCUgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMXB4KTsgfVxuYDtcblxuY29uc3QgamlnZ2xlID0ga2V5ZnJhbWVzYFxuICAwJSwgMTAwJSB7IHRyYW5zZm9ybTp0cmFuc2xhdGUzZCgwLDAsMCk7IH1cbiAgMTIuNSUsIDYyLjUlIHsgdHJhbnNmb3JtOnRyYW5zbGF0ZTNkKC00cHgsMCwwKTsgfVxuICAzNy41JSwgODcuNSUgeyAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCg0cHgsMCwwKTsgIH1cbmA7XG5cbmNvbnN0IGlubGluZUdsb3cgPSBjc3NgXG4gIGFuaW1hdGlvbjogJHtnbG93fSAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xuICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcHJvZ3Jlc3M7XG5gO1xuXG4vLyBob3ZlciAmIGFjdGl2ZSBzdGF0ZSBmb3IgbGlua3MgYW5kIGJ1dHRvbnNcbmNvbnN0IGhvdmVyYWJsZSA9IGNzc2BcbiAgdHJhbnNpdGlvbjogYWxsIDE1MG1zIGVhc2Utb3V0O1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgLTJweCwgMCk7XG4gIH1cblxuICAmOmFjdGl2ZSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGFuaW1hdGlvbiA9IHtcbiAgcm90YXRlMzYwLFxuICBnbG93LFxuICBmbG9hdCxcbiAgamlnZ2xlLFxuICBpbmxpbmVHbG93LFxuICBob3ZlcmFibGUsXG59O1xuIl19 */",
                    "name": "x4tfcc-inlineGlow",
                    "next": Object {
                      "name": "animation-r0iffl",
                      "next": undefined,
                      "styles": "@keyframes animation-r0iffl{
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}",
                    },
                    "styles": "animation:animation-r0iffl 1.5s ease-in-out infinite;color:transparent;cursor:progress;;label:inlineGlow;",
                    "toString": [Function],
                  },
                  "jiggle": Object {
                    "anim": 1,
                    "name": "animation-ynpq7w",
                    "styles": "@keyframes animation-ynpq7w{
  0%, 100% { transform:translate3d(0,0,0); }
  12.5%, 62.5% { transform:translate3d(-4px,0,0); }
  37.5%, 87.5% {  transform: translate3d(4px,0,0);  }
}",
                    "toString": [Function],
                  },
                  "rotate360": Object {
                    "anim": 1,
                    "name": "animation-u07e3c",
                    "styles": "@keyframes animation-u07e3c{
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}",
                    "toString": [Function],
                  },
                },
                "appBorderColor": "rgba(0,0,0,.1)",
                "appBorderRadius": 4,
                "background": Object {
                  "app": "#F6F9FC",
                  "bar": "#FFFFFF",
                  "content": "#FFFFFF",
                  "critical": "#FF4400",
                  "gridCellSize": 10,
                  "hoverable": "rgba(0,0,0,.05)",
                  "negative": "#FEDED2",
                  "positive": "#E1FFD4",
                  "warning": "#FFF5CF",
                },
                "barBg": "#FFFFFF",
                "barSelectedColor": "#1EA7FD",
                "barTextColor": "#999999",
                "base": "light",
                "brand": Object {
                  "image": undefined,
                  "title": undefined,
                  "url": undefined,
                },
                "code": Object {
                  "language-json .token.boolean": Object {
                    "color": "#0000ff",
                  },
                  "language-json .token.number": Object {
                    "color": "#0000ff",
                  },
                  "language-json .token.property": Object {
                    "color": "#2B91AF",
                  },
                  "namespace": Object {
                    "opacity": 0.7,
                  },
                  "token": Object {
                    "&.atrule": Object {
                      "color": "#0000ff",
                    },
                    "&.attr-name": Object {
                      "color": "#ff0000",
                    },
                    "&.attr-value": Object {
                      "color": "#0000ff",
                    },
                    "&.bold": Object {
                      "fontWeight": "bold",
                    },
                    "&.boolean": Object {
                      "color": "#36acaa",
                    },
                    "&.cdata": Object {
                      "color": "#008000",
                      "fontStyle": "italic",
                    },
                    "&.class-name": Object {
                      "color": "#2B91AF",
                    },
                    "&.comment": Object {
                      "color": "#008000",
                      "fontStyle": "italic",
                    },
                    "&.constant": Object {
                      "color": "#36acaa",
                    },
                    "&.deleted": Object {
                      "color": "#9a050f",
                    },
                    "&.directive.tag .tag": Object {
                      "background": "#ffff00",
                      "color": "#393A34",
                    },
                    "&.doctype": Object {
                      "color": "#008000",
                      "fontStyle": "italic",
                    },
                    "&.entity": Object {
                      "color": "#ff0000",
                    },
                    "&.function": Object {
                      "color": "#393A34",
                    },
                    "&.important": Object {
                      "fontWeight": "bold",
                    },
                    "&.inserted": Object {
                      "color": "#36acaa",
                    },
                    "&.italic": Object {
                      "fontStyle": "italic",
                    },
                    "&.keyword": Object {
                      "color": "#0000ff",
                    },
                    "&.number": Object {
                      "color": "#36acaa",
                    },
                    "&.operator": Object {
                      "color": "#393A34",
                    },
                    "&.prolog": Object {
                      "color": "#008000",
                      "fontStyle": "italic",
                    },
                    "&.property": Object {
                      "color": "#ff0000",
                    },
                    "&.punctuation": Object {
                      "color": "#393A34",
                    },
                    "&.regex": Object {
                      "color": "#ff0000",
                    },
                    "&.selector": Object {
                      "color": "#800000",
                    },
                    "&.string": Object {
                      "color": "#A31515",
                    },
                    "&.symbol": Object {
                      "color": "#36acaa",
                    },
                    "&.tag": Object {
                      "color": "#800000",
                    },
                    "&.url": Object {
                      "color": "#36acaa",
                    },
                    "&.variable": Object {
                      "color": "#36acaa",
                    },
                    "WebkitFontSmoothing": "antialiased",
                    "fontFamily": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
                  },
                },
                "color": Object {
                  "ancillary": "#22a699",
                  "border": "rgba(0,0,0,.1)",
                  "critical": "#FFFFFF",
                  "dark": "#666666",
                  "darker": "#444444",
                  "darkest": "#333333",
                  "defaultText": "#333333",
                  "gold": "#FFAE00",
                  "green": "#66BF3C",
                  "inverseText": "#FFFFFF",
                  "light": "#F3F3F3",
                  "lighter": "#F8F8F8",
                  "lightest": "#FFFFFF",
                  "medium": "#DDDDDD",
                  "mediumdark": "#999999",
                  "mediumlight": "#EEEEEE",
                  "negative": "#FF4400",
                  "orange": "#FC521F",
                  "positive": "#66BF3C",
                  "primary": "#FF4785",
                  "purple": "#6F2CAC",
                  "seafoam": "#37D5D3",
                  "secondary": "#1EA7FD",
                  "tertiary": "#FAFBFC",
                  "ultraviolet": "#2A0481",
                  "warning": "#E69D00",
                },
                "easing": Object {
                  "rubber": "cubic-bezier(0.175, 0.885, 0.335, 1.05)",
                },
                "input": Object {
                  "background": "#FFFFFF",
                  "border": "rgba(0,0,0,.1)",
                  "borderRadius": 4,
                  "color": "#333333",
                },
                "layoutMargin": 10,
                "typography": Object {
                  "fonts": Object {
                    "base": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
                    "mono": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
                  },
                  "size": Object {
                    "code": 90,
                    "l1": 32,
                    "l2": 40,
                    "l3": 48,
                    "m1": 20,
                    "m2": 24,
                    "m3": 28,
                    "s1": 12,
                    "s2": 14,
                    "s3": 16,
                  },
                  "weight": Object {
                    "black": 900,
                    "bold": 700,
                    "regular": 400,
                  },
                },
              }
            }
          >
            <SyntaxHighlighter
              bordered={true}
              copyable={true}
              format={false}
              language="jsx"
            >
              <Styled(div)
                bordered={true}
                className={null}
                padded={false}
              >
                <div
                  className="emotion-10"
                >
                  <Styled(Component)>
                    <Component
                      className="emotion-5"
                    >
                      <ScrollArea
                        className="emotion-5"
                        horizontal={true}
                        vertical={true}
                      >
                        <ForwardRef(render)
                          styles={[Function]}
                        >
                          <InnerGlobal
                            cache={
                              Object {
                                "insert": [Function],
                                "inserted": Object {
                                  "11xgcgt": true,
                                  "1fhpnuv": true,
                                  "1imo1gr": true,
                                  "1maezg8": true,
                                  "1si67pu": true,
                                  "4zr3vl": true,
                                  "esgpkx": true,
                                },
                                "key": "css",
                                "nonce": undefined,
                                "registered": Object {
                                  "emotion-2": "overflow-y:auto;height:100%;overflow-x:auto;width:100%;position:relative;& code{padding-right:10px;}* .token{font-family:\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace;-webkit-font-smoothing:antialiased;&.comment{color:#008000;font-style:italic;}&.prolog{color:#008000;font-style:italic;}&.doctype{color:#008000;font-style:italic;}&.cdata{color:#008000;font-style:italic;}&.string{color:#A31515;}&.punctuation{color:#393A34;}&.operator{color:#393A34;}&.url{color:#36acaa;}&.symbol{color:#36acaa;}&.number{color:#36acaa;}&.boolean{color:#36acaa;}&.variable{color:#36acaa;}&.constant{color:#36acaa;}&.inserted{color:#36acaa;}&.atrule{color:#0000ff;}&.keyword{color:#0000ff;}&.attr-value{color:#0000ff;}&.function{color:#393A34;}&.deleted{color:#9a050f;}&.important{font-weight:bold;}&.bold{font-weight:bold;}&.italic{font-style:italic;}&.class-name{color:#2B91AF;}&.tag{color:#800000;}&.selector{color:#800000;}&.attr-name{color:#ff0000;}&.property{color:#ff0000;}&.regex{color:#ff0000;}&.entity{color:#ff0000;}&.directive.tag .tag{background:#ffff00;color:#393A34;}}* .language-json .token.boolean{color:#0000ff;}* .language-json .token.number{color:#0000ff;}* .language-json .token.property{color:#2B91AF;}* .namespace{opacity:0.7;}",
                                  "emotion-5": "position:relative;& code{padding-right:10px;}* .token{font-family:\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace;-webkit-font-smoothing:antialiased;&.comment{color:#008000;font-style:italic;}&.prolog{color:#008000;font-style:italic;}&.doctype{color:#008000;font-style:italic;}&.cdata{color:#008000;font-style:italic;}&.string{color:#A31515;}&.punctuation{color:#393A34;}&.operator{color:#393A34;}&.url{color:#36acaa;}&.symbol{color:#36acaa;}&.number{color:#36acaa;}&.boolean{color:#36acaa;}&.variable{color:#36acaa;}&.constant{color:#36acaa;}&.inserted{color:#36acaa;}&.atrule{color:#0000ff;}&.keyword{color:#0000ff;}&.attr-value{color:#0000ff;}&.function{color:#393A34;}&.deleted{color:#9a050f;}&.important{font-weight:bold;}&.bold{font-weight:bold;}&.italic{font-style:italic;}&.class-name{color:#2B91AF;}&.tag{color:#800000;}&.selector{color:#800000;}&.attr-name{color:#ff0000;}&.property{color:#ff0000;}&.regex{color:#ff0000;}&.entity{color:#ff0000;}&.directive.tag .tag{background:#ffff00;color:#393A34;}}* .language-json .token.boolean{color:#0000ff;}* .language-json .token.number{color:#0000ff;}* .language-json .token.property{color:#2B91AF;}* .namespace{opacity:0.7;}",
                                },
                                "sheet": StyleSheet {
                                  "before": null,
                                  "container": <head>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-scrollbar:before{position:absolute;content:"";border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-vertical{top:0;width:11px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-horizontal{left:0;height:11px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-scrollbar:before{position:absolute;content:"";border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-vertical{top:0;width:11px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-horizontal{left:0;height:11px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-scrollbar:before{position:absolute;content:"";border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-vertical{top:0;width:11px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-horizontal{left:0;height:11px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-scrollbar:before{position:absolute;content:"";border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-vertical{top:0;width:11px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-horizontal{left:0;height:11px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
                                    </style>
                                    <style
                                      data-emotion="css-global"
                                    >
                                      
                                      [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-10{position:relative;overflow:hidden;color:#333333;border:1px solid rgba(0,0,0,.1);background:#FFFFFF;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5{position:relative;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 code{padding-right:10px;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.comment{color:#008000;font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.prolog{color:#008000;font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.doctype{color:#008000;font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.cdata{color:#008000;font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.string{color:#A31515;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.punctuation{color:#393A34;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.operator{color:#393A34;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.url{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.symbol{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.number{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.boolean{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.variable{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.constant{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.inserted{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.atrule{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.keyword{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.attr-value{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.function{color:#393A34;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.deleted{color:#9a050f;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.important{font-weight:bold;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.bold{font-weight:bold;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.italic{font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.class-name{color:#2B91AF;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.tag{color:#800000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.selector{color:#800000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.attr-name{color:#ff0000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.property{color:#ff0000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.regex{color:#ff0000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.entity{color:#ff0000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .language-json .token.boolean{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .language-json .token.number{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .language-json .token.property{color:#2B91AF;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .namespace{opacity:0.7;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2{overflow-y:auto;height:100%;overflow-x:auto;width:100%;position:relative;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 code{padding-right:10px;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.comment{color:#008000;font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.prolog{color:#008000;font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.doctype{color:#008000;font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.cdata{color:#008000;font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.string{color:#A31515;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.punctuation{color:#393A34;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.operator{color:#393A34;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.url{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.symbol{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.number{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.boolean{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.variable{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.constant{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.inserted{color:#36acaa;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.atrule{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.keyword{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.attr-value{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.function{color:#393A34;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.deleted{color:#9a050f;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.important{font-weight:bold;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.bold{font-weight:bold;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.italic{font-style:italic;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.class-name{color:#2B91AF;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.tag{color:#800000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.selector{color:#800000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.attr-name{color:#ff0000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.property{color:#ff0000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.regex{color:#ff0000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.entity{color:#ff0000;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .language-json .token.boolean{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .language-json .token.number{color:#0000ff;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .language-json .token.property{color:#2B91AF;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .namespace{opacity:0.7;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;margin:0;padding:10px;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-0{-webkit-flex:1;-ms-flex:1;flex:1;padding-right:0;opacity:1;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-9{position:absolute;bottom:0;right:0;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:#FFFFFF;z-index:1;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-8:not(:last-child){border-right:1px solid rgba(0,0,0,.1);}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-8 + *{border-left:1px solid rgba(0,0,0,.1);border-radius:0;}
                                    </style>
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-8:focus{box-shadow:#1EA7FD 0 -3px 0 0 inset;outline:0 none;}
                                    </style>
                                  </head>,
                                  "ctr": 82,
                                  "isSpeedy": false,
                                  "key": "css",
                                  "nonce": undefined,
                                  "tags": Array [
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-10{position:relative;overflow:hidden;color:#333333;border:1px solid rgba(0,0,0,.1);background:#FFFFFF;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5{position:relative;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 code{padding-right:10px;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.comment{color:#008000;font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.prolog{color:#008000;font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.doctype{color:#008000;font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.cdata{color:#008000;font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.string{color:#A31515;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.punctuation{color:#393A34;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.operator{color:#393A34;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.url{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.symbol{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.number{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.boolean{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.variable{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.constant{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.inserted{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.atrule{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.keyword{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.attr-value{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.function{color:#393A34;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.deleted{color:#9a050f;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.important{font-weight:bold;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.bold{font-weight:bold;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.italic{font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.class-name{color:#2B91AF;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.tag{color:#800000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.selector{color:#800000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.attr-name{color:#ff0000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.property{color:#ff0000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.regex{color:#ff0000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.entity{color:#ff0000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .language-json .token.boolean{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .language-json .token.number{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .language-json .token.property{color:#2B91AF;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-5 * .namespace{opacity:0.7;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2{overflow-y:auto;height:100%;overflow-x:auto;width:100%;position:relative;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 code{padding-right:10px;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.comment{color:#008000;font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.prolog{color:#008000;font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.doctype{color:#008000;font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.cdata{color:#008000;font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.string{color:#A31515;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.punctuation{color:#393A34;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.operator{color:#393A34;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.url{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.symbol{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.number{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.boolean{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.variable{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.constant{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.inserted{color:#36acaa;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.atrule{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.keyword{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.attr-value{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.function{color:#393A34;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.deleted{color:#9a050f;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.important{font-weight:bold;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.bold{font-weight:bold;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.italic{font-style:italic;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.class-name{color:#2B91AF;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.tag{color:#800000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.selector{color:#800000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.attr-name{color:#ff0000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.property{color:#ff0000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.regex{color:#ff0000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.entity{color:#ff0000;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .language-json .token.boolean{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .language-json .token.number{color:#0000ff;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .language-json .token.property{color:#2B91AF;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-2 * .namespace{opacity:0.7;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;margin:0;padding:10px;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-0{-webkit-flex:1;-ms-flex:1;flex:1;padding-right:0;opacity:1;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-9{position:absolute;bottom:0;right:0;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:#FFFFFF;z-index:1;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-8:not(:last-child){border-right:1px solid rgba(0,0,0,.1);}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-8 + *{border-left:1px solid rgba(0,0,0,.1);border-radius:0;}
                                    </style>,
                                    <style
                                      data-emotion="css"
                                    >
                                      
                                      .emotion-8:focus{box-shadow:#1EA7FD 0 -3px 0 0 inset;outline:0 none;}
                                    </style>,
                                  ],
                                },
                              }
                            }
                            serialized={
                              Object {
                                "map": undefined,
                                "name": "nh5djz",
                                "next": undefined,
                                "styles": "[data-simplebar]{position:relative;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start;}.simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}.simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}.simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}.simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}.simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}.simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;flex-grow:inherit;flex-shrink:0;flex-basis:0;}.simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}.simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}[data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}.simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}.simplebar-scrollbar:before{position:absolute;content:\\"\\";border-radius:7px;left:0;right:0;opacity:0;transition:opacity 0.2s linear;background:#333333;}.simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;transition:opacity 0s linear;}.simplebar-track.simplebar-vertical{top:0;width:11px;}.simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}.simplebar-track.simplebar-horizontal{left:0;height:11px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}[data-simplebar-direction=\\"rtl\\"] .simplebar-track.simplebar-vertical{right:auto;left:0;}",
                                "toString": [Function],
                              }
                            }
                          />
                        </ForwardRef(render)>
                        <Styled(Component)
                          className="emotion-5"
                          horizontal={true}
                          vertical={true}
                        >
                          <Component
                            className="emotion-2"
                            horizontal={true}
                            vertical={true}
                          >
                            <l
                              className="emotion-2"
                              scrollableNodeProps={
                                Object {
                                  "tabIndex": 0,
                                }
                              }
                            >
                              <div
                                className="emotion-2"
                                data-simplebar={true}
                              >
                                <div
                                  className="simplebar-wrapper"
                                >
                                  <div
                                    className="simplebar-height-auto-observer-wrapper"
                                  >
                                    <div
                                      className="simplebar-height-auto-observer"
                                    />
                                  </div>
                                  <div
                                    className="simplebar-mask"
                                  >
                                    <div
                                      className="simplebar-offset"
                                    >
                                      <div
                                        className="simplebar-content-wrapper"
                                        tabIndex={0}
                                      >
                                        <div
                                          className="simplebar-content"
                                        >
                                          <SyntaxHighlighter
                                            CodeTag={
                                              Object {
                                                "$$typeof": Symbol(react.forward_ref),
                                                "__emotion_base": "code",
                                                "__emotion_forwardProp": undefined,
                                                "__emotion_real": [Circular],
                                                "__emotion_styles": Array [
                                                  Object {
                                                    "flex": 1,
                                                    "opacity": 1,
                                                    "paddingRight": 0,
                                                  },
                                                ],
                                                "defaultProps": undefined,
                                                "displayName": "Styled(code)",
                                                "render": [Function],
                                                "withComponent": [Function],
                                              }
                                            }
                                            PreTag={
                                              Object {
                                                "$$typeof": Symbol(react.forward_ref),
                                                "__emotion_base": "pre",
                                                "__emotion_forwardProp": undefined,
                                                "__emotion_real": [Circular],
                                                "__emotion_styles": Array [
                                                  [Function],
                                                ],
                                                "defaultProps": undefined,
                                                "displayName": "Styled(pre)",
                                                "render": [Function],
                                                "withComponent": [Function],
                                              }
                                            }
                                            language="jsx"
                                            lineNumberContainerStyle={Object {}}
                                            padded={true}
                                            useInlineStyles={false}
                                          >
                                            <Styled(pre)
                                              className="hljs"
                                              padded={true}
                                            >
                                              <pre
                                                className="hljs emotion-1"
                                              >
                                                <Styled(code)>
                                                  <code
                                                    className="emotion-0"
                                                  >
                                                    <span
                                                      className="token tag"
                                                      key="code-segement0"
                                                    >
                                                      <span
                                                        className="token tag"
                                                        key="code-segment-1-0"
                                                      >
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-0"
                                                        >
                                                          &lt;
                                                        </span>
                                                        div
                                                      </span>
                                                      <span
                                                        className="token punctuation"
                                                        key="code-segment-1-1"
                                                      >
                                                        &gt;
                                                      </span>
                                                    </span>
                                                    <span
                                                      className="token plain-text"
                                                      key="code-segement1"
                                                    >
                                                      
  It's a TestComponent story:
  
                                                    </span>
                                                    <span
                                                      className="token tag"
                                                      key="code-segement2"
                                                    >
                                                      <span
                                                        className="token tag"
                                                        key="code-segment-1-0"
                                                      >
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-0"
                                                        >
                                                          &lt;
                                                        </span>
                                                        <span
                                                          className="token class-name"
                                                          key="code-segment-1-1"
                                                        >
                                                          TestComponent
                                                        </span>
                                                      </span>
                                                      
    
                                                      <span
                                                        className="token attr-name"
                                                        key="code-segment-1-2"
                                                      >
                                                        array
                                                      </span>
                                                      <span
                                                        className="token script language-javascript"
                                                        key="code-segment-1-3"
                                                      >
                                                        <span
                                                          className="token script-punctuation punctuation"
                                                          key="code-segment-1-0"
                                                        >
                                                          =
                                                        </span>
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-1"
                                                        >
                                                          {
                                                        </span>
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-2"
                                                        >
                                                          [
                                                        </span>
                                                        
      
                                                        <span
                                                          className="token number"
                                                          key="code-segment-1-4"
                                                        >
                                                          1
                                                        </span>
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-5"
                                                        >
                                                          ,
                                                        </span>
                                                        
      
                                                        <span
                                                          className="token number"
                                                          key="code-segment-1-7"
                                                        >
                                                          2
                                                        </span>
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-8"
                                                        >
                                                          ,
                                                        </span>
                                                        
      
                                                        <span
                                                          className="token number"
                                                          key="code-segment-1-10"
                                                        >
                                                          3
                                                        </span>
                                                        
    
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-12"
                                                        >
                                                          ]
                                                        </span>
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-13"
                                                        >
                                                          }
                                                        </span>
                                                      </span>
                                                      
    
                                                      <span
                                                        className="token attr-name"
                                                        key="code-segment-1-5"
                                                      >
                                                        bool
                                                      </span>
                                                      
    
                                                      <span
                                                        className="token attr-name"
                                                        key="code-segment-1-7"
                                                      >
                                                        func
                                                      </span>
                                                      <span
                                                        className="token script language-javascript"
                                                        key="code-segment-1-8"
                                                      >
                                                        <span
                                                          className="token script-punctuation punctuation"
                                                          key="code-segment-1-0"
                                                        >
                                                          =
                                                        </span>
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-1"
                                                        >
                                                          {
                                                        </span>
                                                        <span
                                                          className="token keyword"
                                                          key="code-segment-1-2"
                                                        >
                                                          function
                                                        </span>
                                                         
                                                        <span
                                                          className="token function"
                                                          key="code-segment-1-4"
                                                        >
                                                          noRefCheck
                                                        </span>
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-5"
                                                        >
                                                          (
                                                        </span>
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-6"
                                                        >
                                                          )
                                                        </span>
                                                         
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-8"
                                                        >
                                                          {
                                                        </span>
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-9"
                                                        >
                                                          }
                                                        </span>
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-10"
                                                        >
                                                          }
                                                        </span>
                                                      </span>
                                                      
    
                                                      <span
                                                        className="token attr-name"
                                                        key="code-segment-1-10"
                                                      >
                                                        number
                                                      </span>
                                                      <span
                                                        className="token script language-javascript"
                                                        key="code-segment-1-11"
                                                      >
                                                        <span
                                                          className="token script-punctuation punctuation"
                                                          key="code-segment-1-0"
                                                        >
                                                          =
                                                        </span>
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-1"
                                                        >
                                                          {
                                                        </span>
                                                        <span
                                                          className="token number"
                                                          key="code-segment-1-2"
                                                        >
                                                          7
                                                        </span>
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-3"
                                                        >
                                                          }
                                                        </span>
                                                      </span>
                                                      
    
                                                      <span
                                                        className="token attr-name"
                                                        key="code-segment-1-13"
                                                      >
                                                        obj
                                                      </span>
                                                      <span
                                                        className="token script language-javascript"
                                                        key="code-segment-1-14"
                                                      >
                                                        <span
                                                          className="token script-punctuation punctuation"
                                                          key="code-segment-1-0"
                                                        >
                                                          =
                                                        </span>
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-1"
                                                        >
                                                          {
                                                        </span>
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-2"
                                                        >
                                                          {
                                                        </span>
                                                        
      a
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-4"
                                                        >
                                                          :
                                                        </span>
                                                         
                                                        <span
                                                          className="token string"
                                                          key="code-segment-1-6"
                                                        >
                                                          'a'
                                                        </span>
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-7"
                                                        >
                                                          ,
                                                        </span>
                                                        
      b
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-9"
                                                        >
                                                          :
                                                        </span>
                                                         
                                                        <span
                                                          className="token string"
                                                          key="code-segment-1-11"
                                                        >
                                                          'b'
                                                        </span>
                                                        
    
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-13"
                                                        >
                                                          }
                                                        </span>
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-14"
                                                        >
                                                          }
                                                        </span>
                                                      </span>
                                                      
    
                                                      <span
                                                        className="token attr-name"
                                                        key="code-segment-1-16"
                                                      >
                                                        string
                                                      </span>
                                                      <span
                                                        className="token attr-value"
                                                        key="code-segment-1-17"
                                                      >
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-0"
                                                        >
                                                          =
                                                        </span>
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-1"
                                                        >
                                                          "
                                                        </span>
                                                        seven
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-3"
                                                        >
                                                          "
                                                        </span>
                                                      </span>
                                                      
  
                                                      <span
                                                        className="token punctuation"
                                                        key="code-segment-1-19"
                                                      >
                                                        /&gt;
                                                      </span>
                                                    </span>
                                                    <span
                                                      className="token plain-text"
                                                      key="code-segement3"
                                                    >
                                                      

                                                    </span>
                                                    <span
                                                      className="token tag"
                                                      key="code-segement4"
                                                    >
                                                      <span
                                                        className="token tag"
                                                        key="code-segment-1-0"
                                                      >
                                                        <span
                                                          className="token punctuation"
                                                          key="code-segment-1-0"
                                                        >
                                                          &lt;/
                                                        </span>
                                                        div
                                                      </span>
                                                      <span
                                                        className="token punctuation"
                                                        key="code-segment-1-1"
                                                      >
                                                        &gt;
                                                      </span>
                                                    </span>
                                                  </code>
                                                </Styled(code)>
                                              </pre>
                                            </Styled(pre)>
                                          </SyntaxHighlighter>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div
                                    className="simplebar-placeholder"
                                  />
                                </div>
                                <div
                                  className="simplebar-track simplebar-horizontal"
                                >
                                  <div
                                    className="simplebar-scrollbar"
                                  />
                                </div>
                                <div
                                  className="simplebar-track simplebar-vertical"
                                >
                                  <div
                                    className="simplebar-scrollbar"
                                  />
                                </div>
                              </div>
                            </l>
                          </Component>
                        </Styled(Component)>
                      </ScrollArea>
                    </Component>
                  </Styled(Component)>
                  <ActionBar
                    actionItems={
                      Array [
                        Object {
                          "onClick": [Function],
                          "title": "Copy",
                        },
                      ]
                    }
                  >
                    <Styled(div)>
                      <div
                        className="emotion-9"
                      >
                        <ActionButton
                          key="0"
                          onClick={[Function]}
                        >
                          <button
                            className="emotion-8"
                            onClick={[Function]}
                          >
                            Copy
                          </button>
                        </ActionButton>
                      </div>
                    </Styled(div)>
                  </ActionBar>
                </div>
              </Styled(div)>
            </SyntaxHighlighter>
          </ThemeProvider>
        </Code>
      </div>
    </div>
  </Story>
</Info>
`;