@charcoal-ui/react-sandbox 3.10.1 → 3.12.0

package/src/components/Layout/__snapshots__/index.story.storyshot

@@ -1,1297 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storybook Tests Sandbox/Layout Basic 1`] = `
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-}
-
-.c3 {
-  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: #858585;
-  border-radius: 24px;
-  font-weight: bold;
-  font-size: 14px;
-  line-height: 22px;
-  padding: 0 16px;
-  height: 40px;
-  -webkit-transition: 0.2s color;
-  transition: 0.2s color;
-}
-
-.c3:hover {
-  -webkit-transition: 0.2s color;
-  transition: 0.2s color;
-  color: #474747;
-}
-
-.c3[aria-current] {
-  color: #474747;
-  background-color: rgba(0,0,0,0.04);
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  background-color: #f5f5f5;
-}
-
-.c1 {
-  min-width: 208px;
-  padding: 40px 0 40px 24px;
-  box-sizing: border-box;
-}
-
-.c4 {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  min-width: 0;
-  max-width: 1224px;
-  padding: 40px 72px;
-  margin: 0 auto;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c5 {
-  font-weight: bold;
-  margin-bottom: 12px;
-  font-size: 20px;
-  line-height: 28px;
-  color: #474747;
-}
-
-.c6 {
-  display: grid;
-  gap: 24px;
-  grid-template-columns: 1fr;
-  grid-auto-columns: 1fr;
-  grid-auto-rows: auto;
-}
-
-.c7 {
-  grid-column-start: auto;
-  grid-column-end: span 3;
-  border-radius: 24px;
-  color: #474747;
-  background-color: #ffffff;
-  min-width: 0;
-}
-
-.c11 {
-  grid-column-start: auto;
-  grid-column-end: span 2;
-  border-radius: 24px;
-  color: #474747;
-  background-color: #ffffff;
-  min-width: 0;
-}
-
-.c12 {
-  grid-column-start: auto;
-  grid-column-end: span 1;
-  border-radius: 24px;
-  color: #474747;
-  background-color: #ffffff;
-  min-width: 0;
-}
-
-.c8 {
-  padding: 0 24px;
-  height: 48px;
-  display: grid;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: bold;
-  background-color: rgba(0,0,0,0.02);
-  color: #474747;
-  border-radius: 24px 24px 0 0;
-}
-
-.c9 {
-  padding: 24px 24px;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.c10 {
-  height: 184px;
-  color: #adadad;
-  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;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  font-size: 14px;
-  font-weight: bold;
-}
-
-@media (max-width:743px) {
-  .c0 {
-    background-color: #ffffff;
-  }
-}
-
-@media 1160 {
-  .c1 {
-    display: none;
-  }
-}
-
-@media (max-width:743px) {
-  .c4 {
-    padding: 0;
-  }
-}
-
-@media (max-width:743px) {
-  .c5 {
-    margin-bottom: 0;
-    padding: 12px;
-    font-size: 16px;
-    line-height: 24px;
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    background-color: rgba(0,0,0,0.02);
-  }
-}
-
-@media (max-width:743px) {
-  .c6 {
-    gap: 0;
-    background-color: #ffffff;
-    padding-bottom: 60px;
-  }
-}
-
-@media 1368 {
-  .c7 {
-    grid-column-end: span 2;
-  }
-}
-
-@media (max-width:743px) {
-  .c7 {
-    grid-column-end: span 1;
-    border-radius: 0;
-    padding-bottom: 40px;
-  }
-}
-
-@media 1368 {
-
-}
-
-@media (max-width:743px) {
-  .c11 {
-    grid-column-end: span 1;
-    border-radius: 0;
-    padding-bottom: 40px;
-  }
-}
-
-@media 1368 {
-
-}
-
-@media (max-width:743px) {
-  .c12 {
-    border-radius: 0;
-    padding-bottom: 40px;
-  }
-}
-
-@media (max-width:743px) {
-  .c8 {
-    margin-top: 4px;
-    padding: 0 16px;
-    background: none;
-    overflow-x: auto;
-    border-radius: unset;
-  }
-}
-
-@media (max-width:743px) {
-  .c9 {
-    padding: 16px 16px 0;
-  }
-}
-
-<div
-  data-dark={false}
->
-  <div
-    className="c0"
-  >
-    <div
-      className="c1"
-    >
-      <div
-        className="c2"
-      >
-        <a
-          href="#hello"
-        >
-          <div
-            aria-current={true}
-            className="c3"
-          >
-            Hello
-          </div>
-        </a>
-        <a
-          href="#world"
-        >
-          <div
-            className="c3"
-          >
-            World
-          </div>
-        </a>
-        <a
-          href="#dummy"
-        >
-          <div
-            className="c3"
-          >
-            Dummy
-          </div>
-        </a>
-        <a
-          href="#menu"
-        >
-          <div
-            className="c3"
-          >
-            Menu
-          </div>
-        </a>
-      </div>
-    </div>
-    <div
-      className="c4"
-    >
-      <div
-        className="c5"
-      >
-        Header
-      </div>
-      <div
-        className="c6"
-      >
-        <div
-          className="c7"
-          span={3}
-        >
-          <div
-            className="c8"
-          >
-            Dummy
-          </div>
-          <div
-            className="c9"
-          >
-            <div
-              className="c10"
-            >
-              Span 3
-            </div>
-          </div>
-        </div>
-        <div
-          className="c11"
-          span={2}
-        >
-          <div
-            className="c8"
-          >
-            Dummy
-          </div>
-          <div
-            className="c9"
-          >
-            <div
-              className="c10"
-            >
-              Span 2
-            </div>
-          </div>
-        </div>
-        <div
-          className="c12"
-          span={1}
-        >
-          <div
-            className="c8"
-          >
-            Dummy
-          </div>
-          <div
-            className="c9"
-          >
-            <div
-              className="c10"
-            >
-              Span 1
-            </div>
-          </div>
-        </div>
-        <div
-          className="c12"
-          span={1}
-        >
-          <div
-            className="c8"
-          >
-            Dummy
-          </div>
-          <div
-            className="c9"
-          >
-            <div
-              className="c10"
-            >
-              Span 1
-            </div>
-          </div>
-        </div>
-        <div
-          className="c12"
-          span={1}
-        >
-          <div
-            className="c8"
-          >
-            Dummy
-          </div>
-          <div
-            className="c9"
-          >
-            <div
-              className="c10"
-            >
-              Span 1
-            </div>
-          </div>
-        </div>
-        <div
-          className="c12"
-          span={1}
-        >
-          <div
-            className="c8"
-          >
-            Dummy
-          </div>
-          <div
-            className="c9"
-          >
-            <div
-              className="c10"
-            >
-              Span 1
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storybook Tests Sandbox/Layout Center 1`] = `
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  background-color: #f5f5f5;
-}
-
-.c1 {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  min-width: 0;
-  max-width: 600px;
-  padding: 40px 72px;
-  margin: 0 auto;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c2 {
-  font-weight: bold;
-  margin-bottom: 12px;
-  font-size: 20px;
-  line-height: 28px;
-  color: #474747;
-}
-
-.c3 {
-  display: grid;
-  gap: 24px;
-  grid-template-columns: 1fr;
-  grid-auto-columns: 1fr;
-  grid-auto-rows: auto;
-}
-
-.c4 {
-  grid-column-start: auto;
-  grid-column-end: span 3;
-  border-radius: 24px;
-  color: #474747;
-  background-color: #ffffff;
-  min-width: 0;
-}
-
-.c5 {
-  padding: 0 40px;
-  height: 64px;
-  display: grid;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: bold;
-  background-color: rgba(0,0,0,0.02);
-  color: #474747;
-  border-radius: 24px 24px 0 0;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.c6 {
-  padding: 40px 40px;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.c7 {
-  height: 184px;
-  color: #adadad;
-  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;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  font-size: 14px;
-  font-weight: bold;
-}
-
-@media (max-width:743px) {
-  .c0 {
-    background-color: #ffffff;
-  }
-}
-
-@media (max-width:743px) {
-  .c1 {
-    padding: 0;
-  }
-}
-
-@media (max-width:743px) {
-  .c2 {
-    margin-bottom: 0;
-    padding: 12px;
-    font-size: 16px;
-    line-height: 24px;
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    background-color: rgba(0,0,0,0.02);
-  }
-}
-
-@media (max-width:743px) {
-  .c3 {
-    gap: 0;
-    background-color: #ffffff;
-    padding-bottom: 60px;
-  }
-}
-
-@media 1160 {
-  .c4 {
-    grid-column-end: span 2;
-  }
-}
-
-@media (max-width:743px) {
-  .c4 {
-    grid-column-end: span 1;
-    border-radius: 0;
-    padding-bottom: 40px;
-  }
-}
-
-@media (max-width:743px) {
-  .c5 {
-    margin-top: 4px;
-    padding: 0 16px;
-    background: none;
-    overflow-x: auto;
-    border-radius: unset;
-    height: 48px;
-    margin-top: 0;
-  }
-}
-
-@media (max-width:743px) {
-  .c6 {
-    padding: 16px 16px 0;
-  }
-}
-
-<div
-  data-dark={false}
->
-  <div
-    className="c0"
-  >
-    <div
-      className="c1"
-    >
-      <div
-        className="c2"
-      >
-        Header
-      </div>
-      <div
-        className="c3"
-      >
-        <div
-          className="c4"
-          span={3}
-        >
-          <div
-            className="c5"
-          >
-            Center
-          </div>
-          <div
-            className="c6"
-          >
-            <div
-              className="c7"
-            >
-              Hello, Flexible Grid Layout!
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storybook Tests Sandbox/Layout NoMenu 1`] = `
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  background-color: #f5f5f5;
-}
-
-.c1 {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  min-width: 0;
-  max-width: 1224px;
-  padding: 40px 72px;
-  margin: 0 auto;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c2 {
-  font-weight: bold;
-  margin-bottom: 12px;
-  font-size: 20px;
-  line-height: 28px;
-  color: #474747;
-}
-
-.c3 {
-  display: grid;
-  gap: 24px;
-  grid-template-columns: 1fr;
-  grid-auto-columns: 1fr;
-  grid-auto-rows: auto;
-}
-
-.c4 {
-  grid-column-start: auto;
-  grid-column-end: span 3;
-  border-radius: 24px;
-  color: #474747;
-  background-color: #ffffff;
-  min-width: 0;
-}
-
-.c8 {
-  grid-column-start: auto;
-  grid-column-end: span 2;
-  border-radius: 24px;
-  color: #474747;
-  background-color: #ffffff;
-  min-width: 0;
-}
-
-.c9 {
-  grid-column-start: auto;
-  grid-column-end: span 1;
-  border-radius: 24px;
-  color: #474747;
-  background-color: #ffffff;
-  min-width: 0;
-}
-
-.c5 {
-  padding: 0 24px;
-  height: 48px;
-  display: grid;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: bold;
-  background-color: rgba(0,0,0,0.02);
-  color: #474747;
-  border-radius: 24px 24px 0 0;
-}
-
-.c6 {
-  padding: 24px 24px;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.c7 {
-  height: 184px;
-  color: #adadad;
-  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;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  font-size: 14px;
-  font-weight: bold;
-}
-
-@media (max-width:743px) {
-  .c0 {
-    background-color: #ffffff;
-  }
-}
-
-@media (max-width:743px) {
-  .c1 {
-    padding: 0;
-  }
-}
-
-@media (max-width:743px) {
-  .c2 {
-    margin-bottom: 0;
-    padding: 12px;
-    font-size: 16px;
-    line-height: 24px;
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    background-color: rgba(0,0,0,0.02);
-  }
-}
-
-@media (max-width:743px) {
-  .c3 {
-    gap: 0;
-    background-color: #ffffff;
-    padding-bottom: 60px;
-  }
-}
-
-@media 1160 {
-  .c4 {
-    grid-column-end: span 2;
-  }
-}
-
-@media (max-width:743px) {
-  .c4 {
-    grid-column-end: span 1;
-    border-radius: 0;
-    padding-bottom: 40px;
-  }
-}
-
-@media 1160 {
-
-}
-
-@media (max-width:743px) {
-  .c8 {
-    grid-column-end: span 1;
-    border-radius: 0;
-    padding-bottom: 40px;
-  }
-}
-
-@media 1160 {
-
-}
-
-@media (max-width:743px) {
-  .c9 {
-    border-radius: 0;
-    padding-bottom: 40px;
-  }
-}
-
-@media (max-width:743px) {
-  .c5 {
-    margin-top: 4px;
-    padding: 0 16px;
-    background: none;
-    overflow-x: auto;
-    border-radius: unset;
-  }
-}
-
-@media (max-width:743px) {
-  .c6 {
-    padding: 16px 16px 0;
-  }
-}
-
-<div
-  data-dark={false}
->
-  <div
-    className="c0"
-  >
-    <div
-      className="c1"
-    >
-      <div
-        className="c2"
-      >
-        Header
-      </div>
-      <div
-        className="c3"
-      >
-        <div
-          className="c4"
-          span={3}
-        >
-          <div
-            className="c5"
-          >
-            Dummy
-          </div>
-          <div
-            className="c6"
-          >
-            <div
-              className="c7"
-            >
-              Span 3
-            </div>
-          </div>
-        </div>
-        <div
-          className="c8"
-          span={2}
-        >
-          <div
-            className="c5"
-          >
-            Dummy
-          </div>
-          <div
-            className="c6"
-          >
-            <div
-              className="c7"
-            >
-              Span 2
-            </div>
-          </div>
-        </div>
-        <div
-          className="c9"
-          span={1}
-        >
-          <div
-            className="c5"
-          >
-            Dummy
-          </div>
-          <div
-            className="c6"
-          >
-            <div
-              className="c7"
-            >
-              Span 1
-            </div>
-          </div>
-        </div>
-        <div
-          className="c9"
-          span={1}
-        >
-          <div
-            className="c5"
-          >
-            Dummy
-          </div>
-          <div
-            className="c6"
-          >
-            <div
-              className="c7"
-            >
-              Span 1
-            </div>
-          </div>
-        </div>
-        <div
-          className="c9"
-          span={1}
-        >
-          <div
-            className="c5"
-          >
-            Dummy
-          </div>
-          <div
-            className="c6"
-          >
-            <div
-              className="c7"
-            >
-              Span 1
-            </div>
-          </div>
-        </div>
-        <div
-          className="c9"
-          span={1}
-        >
-          <div
-            className="c5"
-          >
-            Dummy
-          </div>
-          <div
-            className="c6"
-          >
-            <div
-              className="c7"
-            >
-              Span 1
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storybook Tests Sandbox/Layout Wide 1`] = `
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-}
-
-.c3 {
-  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: #858585;
-  border-radius: 24px;
-  font-weight: bold;
-  font-size: 14px;
-  line-height: 22px;
-  padding: 0 16px;
-  height: 40px;
-  -webkit-transition: 0.2s color;
-  transition: 0.2s color;
-}
-
-.c3:hover {
-  -webkit-transition: 0.2s color;
-  transition: 0.2s color;
-  color: #474747;
-}
-
-.c3[aria-current] {
-  color: #474747;
-  background-color: rgba(0,0,0,0.04);
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  background-color: #f5f5f5;
-}
-
-.c1 {
-  min-width: 208px;
-  padding: 40px 0 40px 24px;
-  box-sizing: border-box;
-}
-
-.c4 {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  min-width: 0;
-  max-width: 1224px;
-  padding: 40px 72px;
-  margin: 0 auto;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c5 {
-  font-weight: bold;
-  margin-bottom: 12px;
-  font-size: 20px;
-  line-height: 28px;
-  color: #474747;
-}
-
-.c6 {
-  display: grid;
-  gap: 24px;
-  grid-template-columns: 1fr;
-  grid-auto-columns: 1fr;
-  grid-auto-rows: auto;
-}
-
-.c7 {
-  grid-column-start: auto;
-  grid-column-end: span 3;
-  border-radius: 24px;
-  color: #474747;
-  background-color: #ffffff;
-  min-width: 0;
-}
-
-.c8 {
-  padding: 0 40px;
-  height: 64px;
-  display: grid;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: bold;
-  background-color: rgba(0,0,0,0.02);
-  color: #474747;
-  border-radius: 24px 24px 0 0;
-}
-
-.c9 {
-  padding: 40px 40px;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.c10 {
-  height: 184px;
-  color: #adadad;
-  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;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  font-size: 14px;
-  font-weight: bold;
-}
-
-@media (max-width:743px) {
-  .c0 {
-    background-color: #ffffff;
-  }
-}
-
-@media 1160 {
-  .c1 {
-    display: none;
-  }
-}
-
-@media (max-width:743px) {
-  .c4 {
-    padding: 0;
-  }
-}
-
-@media (max-width:743px) {
-  .c5 {
-    margin-bottom: 0;
-    padding: 12px;
-    font-size: 16px;
-    line-height: 24px;
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    background-color: rgba(0,0,0,0.02);
-  }
-}
-
-@media (max-width:743px) {
-  .c6 {
-    gap: 0;
-    background-color: #ffffff;
-    padding-bottom: 60px;
-  }
-}
-
-@media 1368 {
-  .c7 {
-    grid-column-end: span 2;
-  }
-}
-
-@media (max-width:743px) {
-  .c7 {
-    grid-column-end: span 1;
-    border-radius: 0;
-    padding-bottom: 40px;
-  }
-}
-
-@media (max-width:743px) {
-  .c8 {
-    margin-top: 4px;
-    padding: 0 16px;
-    background: none;
-    overflow-x: auto;
-    border-radius: unset;
-    height: 48px;
-    margin-top: 0;
-  }
-}
-
-@media (max-width:743px) {
-  .c9 {
-    padding: 16px 16px 0;
-  }
-}
-
-<div
-  data-dark={false}
->
-  <div
-    className="c0"
-  >
-    <div
-      className="c1"
-    >
-      <div
-        className="c2"
-      >
-        <a
-          href="#hello"
-        >
-          <div
-            aria-current={true}
-            className="c3"
-          >
-            Hello
-          </div>
-        </a>
-        <a
-          href="#world"
-        >
-          <div
-            className="c3"
-          >
-            World
-          </div>
-        </a>
-        <a
-          href="#dummy"
-        >
-          <div
-            className="c3"
-          >
-            Dummy
-          </div>
-        </a>
-        <a
-          href="#menu"
-        >
-          <div
-            className="c3"
-          >
-            Menu
-          </div>
-        </a>
-      </div>
-    </div>
-    <div
-      className="c4"
-    >
-      <div
-        className="c5"
-      >
-        Header
-      </div>
-      <div
-        className="c6"
-      >
-        <div
-          className="c7"
-          span={3}
-        >
-          <div
-            className="c8"
-          >
-            Wide
-          </div>
-          <div
-            className="c9"
-          >
-            <div
-              className="c10"
-            >
-              Hello, Flexible Grid Layout!
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;