@charcoal-ui/react-sandbox 3.10.1-beta.1 → 3.11.0

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

@@ -1,1894 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storybook Tests Sandbox/Pager CollapsedWithDots 1`] = `
-.c5 {
-  fill: currentColor;
-}
-
-.c2 {
-  fill: none;
-  stroke-linejoin: round;
-  stroke-linecap: round;
-  stroke: currentColor;
-}
-
-.c0 {
-  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;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c1 {
-  font-size: 1rem;
-  line-height: calc(1em + 8px);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  border: none;
-  outline: none;
-  touch-action: manipulation;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s;
-  transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s;
-  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;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  box-sizing: content-box;
-  min-width: 24px;
-  min-height: 24px;
-  padding: 8px;
-  cursor: pointer;
-  font-weight: bold;
-  -webkit-transform: translateZ(0);
-  border-radius: 48px;
-  background: transparent;
-  color: #858585;
-}
-
-.c1[hidden] {
-  visibility: hidden;
-  display: block;
-}
-
-.c1:hover {
-  background: rgba(0,0,0,0.04);
-  color: #474747;
-}
-
-.c1[aria-current] {
-  background-color: rgba(0,0,0,0.88);
-  color: #ffffff;
-}
-
-.c1[aria-current]:hover {
-  background-color: rgba(0,0,0,0.88);
-  color: #ffffff;
-}
-
-.c1:hover {
-  background: transparent;
-}
-
-.c3 {
-  font-size: 1rem;
-  line-height: calc(1em + 8px);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  border: none;
-  outline: none;
-  touch-action: manipulation;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s;
-  transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s;
-  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;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  box-sizing: content-box;
-  min-width: 24px;
-  min-height: 24px;
-  padding: 8px;
-  cursor: pointer;
-  font-weight: bold;
-  -webkit-transform: translateZ(0);
-  border-radius: 48px;
-  background: transparent;
-  color: #858585;
-}
-
-.c3[hidden] {
-  visibility: hidden;
-  display: block;
-}
-
-.c3:hover {
-  background: rgba(0,0,0,0.04);
-  color: #474747;
-}
-
-.c3[aria-current] {
-  background-color: rgba(0,0,0,0.88);
-  color: #ffffff;
-}
-
-.c3[aria-current]:hover {
-  background-color: rgba(0,0,0,0.88);
-  color: #ffffff;
-}
-
-.c4.c4 {
-  color: #858585;
-  background: none;
-}
-
-<div
-  data-dark={false}
->
-  <nav
-    className="c0"
-  >
-    <a
-      href="/4"
-      onClick={[Function]}
-    >
-      <button
-        aria-disabled={false}
-        className="c1"
-        hidden={false}
-      >
-        <svg
-          height={16}
-          viewBox="0 0 10 8"
-          width={16}
-        >
-          <polyline
-            className="c2"
-            points="1,2 5,6 9,2"
-            strokeWidth="2"
-            transform="rotate(90 5 4)"
-          />
-        </svg>
-      </button>
-    </a>
-    <a
-      href="/1"
-      onClick={[Function]}
-    >
-      <button
-        className="c3"
-        type="button"
-      >
-        <span>
-          1
-        </span>
-      </button>
-    </a>
-    <button
-      className="c3 c4"
-      disabled={true}
-      type="button"
-    >
-      <svg
-        className="c5"
-        height={20}
-        viewBox="0 0 20 6"
-        width={20}
-      >
-        <path
-          d="M5,14.5 C3.61928813,14.5 2.5,13.3807119 2.5,12 C2.5,10.6192881 3.61928813,9.5 5,9.5
-          C6.38071187,9.5 7.5,10.6192881 7.5,12 C7.5,13.3807119 6.38071187,14.5 5,14.5 Z M12,14.5
-          C10.6192881,14.5 9.5,13.3807119 9.5,12 C9.5,10.6192881 10.6192881,9.5 12,9.5
-          C13.3807119,9.5 14.5,10.6192881 14.5,12 C14.5,13.3807119 13.3807119,14.5 12,14.5 Z M19,14.5
-          C17.6192881,14.5 16.5,13.3807119 16.5,12 C16.5,10.6192881 17.6192881,9.5 19,9.5
-          C20.3807119,9.5 21.5,10.6192881 21.5,12 C21.5,13.3807119 20.3807119,14.5 19,14.5 Z"
-          fillRule="evenodd"
-          transform="translate(-2 -9)"
-        />
-      </svg>
-    </button>
-    <a
-      href="/4"
-      onClick={[Function]}
-    >
-      <button
-        className="c3"
-        type="button"
-      >
-        <span>
-          4
-        </span>
-      </button>
-    </a>
-    <button
-      aria-current={true}
-      className="c3"
-      type="button"
-    >
-      <span>
-        5
-      </span>
-    </button>
-    <a
-      href="/6"
-      onClick={[Function]}
-    >
-      <button
-        className="c3"
-        type="button"
-      >
-        <span>
-          6
-        </span>
-      </button>
-    </a>
-    <a
-      href="/7"
-      onClick={[Function]}
-    >
-      <button
-        className="c3"
-        type="button"
-      >
-        <span>
-          7
-        </span>
-      </button>
-    </a>
-    <a
-      href="/8"
-      onClick={[Function]}
-    >
-      <button
-        className="c3"
-        type="button"
-      >
-        <span>
-          8
-        </span>
-      </button>
-    </a>
-    <a
-      href="/6"
-      onClick={[Function]}
-    >
-      <button
-        aria-disabled={false}
-        className="c1"
-        hidden={false}
-      >
-        <svg
-          height={16}
-          viewBox="0 0 10 8"
-          width={16}
-        >
-          <polyline
-            className="c2"
-            points="1,2 5,6 9,2"
-            strokeWidth="2"
-            transform="rotate(-90 5 4)"
-          />
-        </svg>
-      </button>
-    </a>
-  </nav>
-</div>
-`;
-
-exports[`Storybook Tests Sandbox/Pager Default 1`] = `
-.c2 {
-  fill: none;
-  stroke-linejoin: round;
-  stroke-linecap: round;
-  stroke: currentColor;
-}
-
-.c0 {
-  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;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c1 {
-  font-size: 1rem;
-  line-height: calc(1em + 8px);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  border: none;
-  outline: none;
-  touch-action: manipulation;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s;
-  transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s;
-  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;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  box-sizing: content-box;
-  min-width: 24px;
-  min-height: 24px;
-  padding: 8px;
-  cursor: pointer;
-  font-weight: bold;
-  -webkit-transform: translateZ(0);
-  border-radius: 48px;
-  background: transparent;
-  color: #858585;
-}
-
-.c1[hidden] {
-  visibility: hidden;
-  display: block;
-}
-
-.c1:hover {
-  background: rgba(0,0,0,0.04);
-  color: #474747;
-}
-
-.c1[aria-current] {
-  background-color: rgba(0,0,0,0.88);
-  color: #ffffff;
-}
-
-.c1[aria-current]:hover {
-  background-color: rgba(0,0,0,0.88);
-  color: #ffffff;
-}
-
-.c1:hover {
-  background: transparent;
-}
-
-.c3 {
-  font-size: 1rem;
-  line-height: calc(1em + 8px);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  border: none;
-  outline: none;
-  touch-action: manipulation;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s;
-  transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s;
-  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;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  box-sizing: content-box;
-  min-width: 24px;
-  min-height: 24px;
-  padding: 8px;
-  cursor: pointer;
-  font-weight: bold;
-  -webkit-transform: translateZ(0);
-  border-radius: 48px;
-  background: transparent;
-  color: #858585;
-}
-
-.c3[hidden] {
-  visibility: hidden;
-  display: block;
-}
-
-.c3:hover {
-  background: rgba(0,0,0,0.04);
-  color: #474747;
-}
-
-.c3[aria-current] {
-  background-color: rgba(0,0,0,0.88);
-  color: #ffffff;
-}
-
-.c3[aria-current]:hover {
-  background-color: rgba(0,0,0,0.88);
-  color: #ffffff;
-}
-
-<div
-  data-dark={false}
->
-  <nav
-    className="c0"
-  >
-    <button
-      className="c1"
-      disabled={true}
-      hidden={true}
-      onClick={[Function]}
-      type="button"
-    >
-      <svg
-        height={16}
-        viewBox="0 0 10 8"
-        width={16}
-      >
-        <polyline
-          className="c2"
-          points="1,2 5,6 9,2"
-          strokeWidth="2"
-          transform="rotate(90 5 4)"
-        />
-      </svg>
-    </button>
-    <button
-      aria-current={true}
-      className="c3"
-      type="button"
-    >
-      <span>
-        1
-      </span>
-    </button>
-    <button
-      className="c3"
-      onClick={[Function]}
-      type="button"
-    >
-      <span>
-        2
-      </span>
-    </button>
-    <button
-      className="c3"
-      onClick={[Function]}
-      type="button"
-    >
-      <span>
-        3
-      </span>
-    </button>
-    <button
-      className="c3"
-      onClick={[Function]}
-      type="button"
-    >
-      <span>
-        4
-      </span>
-    </button>
-    <button
-      className="c3"
-      onClick={[Function]}
-      type="button"
-    >
-      <span>
-        5
-      </span>
-    </button>
-    <button
-      className="c3"
-      onClick={[Function]}
-      type="button"
-    >
-      <span>
-        6
-      </span>
-    </button>
-    <button
-      className="c3"
-      onClick={[Function]}
-      type="button"
-    >
-      <span>
-        7
-      </span>
-    </button>
-    <button
-      className="c1"
-      disabled={false}
-      hidden={false}
-      onClick={[Function]}
-      type="button"
-    >
-      <svg
-        height={16}
-        viewBox="0 0 10 8"
-        width={16}
-      >
-        <polyline
-          className="c2"
-          points="1,2 5,6 9,2"
-          strokeWidth="2"
-          transform="rotate(-90 5 4)"
-        />
-      </svg>
-    </button>
-  </nav>
-</div>
-`;
-
-exports[`Storybook Tests Sandbox/Pager LastPage 1`] = `
-.c5 {
-  fill: currentColor;
-}
-
-.c2 {
-  fill: none;
-  stroke-linejoin: round;
-  stroke-linecap: round;
-  stroke: currentColor;
-}
-
-.c0 {
-  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;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c1 {
-  font-size: 1rem;
-  line-height: calc(1em + 8px);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  border: none;
-  outline: none;
-  touch-action: manipulation;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s;
-  transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s;
-  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;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  box-sizing: content-box;
-  min-width: 24px;
-  min-height: 24px;
-  padding: 8px;
-  cursor: pointer;
-  font-weight: bold;
-  -webkit-transform: translateZ(0);
-  border-radius: 48px;
-  background: transparent;
-  color: #858585;
-}
-
-.c1[hidden] {
-  visibility: hidden;
-  display: block;
-}
-
-.c1:hover {
-  background: rgba(0,0,0,0.04);
-  color: #474747;
-}
-
-.c1[aria-current] {
-  background-color: rgba(0,0,0,0.88);
-  color: #ffffff;
-}
-
-.c1[aria-current]:hover {
-  background-color: rgba(0,0,0,0.88);
-  color: #ffffff;
-}
-
-.c1:hover {
-  background: transparent;
-}
-
-.c3 {
-  font-size: 1rem;
-  line-height: calc(1em + 8px);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  border: none;
-  outline: none;
-  touch-action: manipulation;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s;
-  transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s;
-  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;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  box-sizing: content-box;
-  min-width: 24px;
-  min-height: 24px;
-  padding: 8px;
-  cursor: pointer;
-  font-weight: bold;
-  -webkit-transform: translateZ(0);
-  border-radius: 48px;
-  background: transparent;
-  color: #858585;
-}
-
-.c3[hidden] {
-  visibility: hidden;
-  display: block;
-}
-
-.c3:hover {
-  background: rgba(0,0,0,0.04);
-  color: #474747;
-}
-
-.c3[aria-current] {
-  background-color: rgba(0,0,0,0.88);
-  color: #ffffff;
-}
-
-.c3[aria-current]:hover {
-  background-color: rgba(0,0,0,0.88);
-  color: #ffffff;
-}
-
-.c4.c4 {
-  color: #858585;
-  background: none;
-}
-
-<div
-  data-dark={false}
->
-  <nav
-    className="c0"
-  >
-    <a
-      href="/102"
-      onClick={[Function]}
-    >
-      <button
-        aria-disabled={false}
-        className="c1"
-        hidden={false}
-      >
-        <svg
-          height={16}
-          viewBox="0 0 10 8"
-          width={16}
-        >
-          <polyline
-            className="c2"
-            points="1,2 5,6 9,2"
-            strokeWidth="2"
-            transform="rotate(90 5 4)"
-          />
-        </svg>
-      </button>
-    </a>
-    <a
-      href="/1"
-      onClick={[Function]}
-    >
-      <button
-        className="c3"
-        type="button"
-      >
-        <span>
-          1
-        </span>
-      </button>
-    </a>
-    <button
-      className="c3 c4"
-      disabled={true}
-      type="button"
-    >
-      <svg
-        className="c5"
-        height={20}
-        viewBox="0 0 20 6"
-        width={20}
-      >
-        <path
-          d="M5,14.5 C3.61928813,14.5 2.5,13.3807119 2.5,12 C2.5,10.6192881 3.61928813,9.5 5,9.5
-          C6.38071187,9.5 7.5,10.6192881 7.5,12 C7.5,13.3807119 6.38071187,14.5 5,14.5 Z M12,14.5
-          C10.6192881,14.5 9.5,13.3807119 9.5,12 C9.5,10.6192881 10.6192881,9.5 12,9.5
-          C13.3807119,9.5 14.5,10.6192881 14.5,12 C14.5,13.3807119 13.3807119,14.5 12,14.5 Z M19,14.5
-          C17.6192881,14.5 16.5,13.3807119 16.5,12 C16.5,10.6192881 17.6192881,9.5 19,9.5
-          C20.3807119,9.5 21.5,10.6192881 21.5,12 C21.5,13.3807119 20.3807119,14.5 19,14.5 Z"
-          fillRule="evenodd"
-          transform="translate(-2 -9)"
-        />
-      </svg>
-    </button>
-    <a
-      href="/99"
-      onClick={[Function]}
-    >
-      <button
-        className="c3"
-        type="button"
-      >
-        <span>
-          99
-        </span>
-      </button>
-    </a>
-    <a
-      href="/100"
-      onClick={[Function]}
-    >
-      <button
-        className="c3"
-        type="button"
-      >
-        <span>
-          100
-        </span>
-      </button>
-    </a>
-    <a
-      href="/101"
-      onClick={[Function]}
-    >
-      <button
-        className="c3"
-        type="button"
-      >
-        <span>
-          101
-        </span>
-      </button>
-    </a>
-    <a
-      href="/102"
-      onClick={[Function]}
-    >
-      <button
-        className="c3"
-        type="button"
-      >
-        <span>
-          102
-        </span>
-      </button>
-    </a>
-    <button
-      aria-current={true}
-      className="c3"
-      type="button"
-    >
-      <span>
-        103
-      </span>
-    </button>
-    <a
-      href="/103"
-      onClick={[Function]}
-    >
-      <button
-        aria-disabled={true}
-        className="c1"
-        hidden={true}
-      >
-        <svg
-          height={16}
-          viewBox="0 0 10 8"
-          width={16}
-        >
-          <polyline
-            className="c2"
-            points="1,2 5,6 9,2"
-            strokeWidth="2"
-            transform="rotate(-90 5 4)"
-          />
-        </svg>
-      </button>
-    </a>
-  </nav>
-</div>
-`;
-
-exports[`Storybook Tests Sandbox/Pager Link 1`] = `
-.c2 {
-  fill: none;
-  stroke-linejoin: round;
-  stroke-linecap: round;
-  stroke: currentColor;
-}
-
-.c0 {
-  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;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c1 {
-  font-size: 1rem;
-  line-height: calc(1em + 8px);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  border: none;
-  outline: none;
-  touch-action: manipulation;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s;
-  transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s;
-  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;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  box-sizing: content-box;
-  min-width: 24px;
-  min-height: 24px;
-  padding: 8px;
-  cursor: pointer;
-  font-weight: bold;
-  -webkit-transform: translateZ(0);
-  border-radius: 48px;
-  background: transparent;
-  color: #858585;
-}
-
-.c1[hidden] {
-  visibility: hidden;
-  display: block;
-}
-
-.c1:hover {
-  background: rgba(0,0,0,0.04);
-  color: #474747;
-}
-
-.c1[aria-current] {
-  background-color: rgba(0,0,0,0.88);
-  color: #ffffff;
-}
-
-.c1[aria-current]:hover {
-  background-color: rgba(0,0,0,0.88);
-  color: #ffffff;
-}
-
-.c1:hover {
-  background: transparent;
-}
-
-.c3 {
-  font-size: 1rem;
-  line-height: calc(1em + 8px);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  border: none;
-  outline: none;
-  touch-action: manipulation;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s;
-  transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s;
-  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;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  box-sizing: content-box;
-  min-width: 24px;
-  min-height: 24px;
-  padding: 8px;
-  cursor: pointer;
-  font-weight: bold;
-  -webkit-transform: translateZ(0);
-  border-radius: 48px;
-  background: transparent;
-  color: #858585;
-}
-
-.c3[hidden] {
-  visibility: hidden;
-  display: block;
-}
-
-.c3:hover {
-  background: rgba(0,0,0,0.04);
-  color: #474747;
-}
-
-.c3[aria-current] {
-  background-color: rgba(0,0,0,0.88);
-  color: #ffffff;
-}
-
-.c3[aria-current]:hover {
-  background-color: rgba(0,0,0,0.88);
-  color: #ffffff;
-}
-
-<div
-  data-dark={false}
->
-  <nav
-    className="c0"
-  >
-    <a
-      href="/1"
-      onClick={[Function]}
-    >
-      <button
-        aria-disabled={true}
-        className="c1"
-        hidden={true}
-      >
-        <svg
-          height={16}
-          viewBox="0 0 10 8"
-          width={16}
-        >
-          <polyline
-            className="c2"
-            points="1,2 5,6 9,2"
-            strokeWidth="2"
-            transform="rotate(90 5 4)"
-          />
-        </svg>
-      </button>
-    </a>
-    <button
-      aria-current={true}
-      className="c3"
-      type="button"
-    >
-      <span>
-        1
-      </span>
-    </button>
-    <a
-      href="/2"
-      onClick={[Function]}
-    >
-      <button
-        className="c3"
-        type="button"
-      >
-        <span>
-          2
-        </span>
-      </button>
-    </a>
-    <a
-      href="/3"
-      onClick={[Function]}
-    >
-      <button
-        className="c3"
-        type="button"
-      >
-        <span>
-          3
-        </span>
-      </button>
-    </a>
-    <a
-      href="/4"
-      onClick={[Function]}
-    >
-      <button
-        className="c3"
-        type="button"
-      >
-        <span>
-          4
-        </span>
-      </button>
-    </a>
-    <a
-      href="/5"
-      onClick={[Function]}
-    >
-      <button
-        className="c3"
-        type="button"
-      >
-        <span>
-          5
-        </span>
-      </button>
-    </a>
-    <a
-      href="/6"
-      onClick={[Function]}
-    >
-      <button
-        className="c3"
-        type="button"
-      >
-        <span>
-          6
-        </span>
-      </button>
-    </a>
-    <a
-      href="/7"
-      onClick={[Function]}
-    >
-      <button
-        className="c3"
-        type="button"
-      >
-        <span>
-          7
-        </span>
-      </button>
-    </a>
-    <a
-      href="/2"
-      onClick={[Function]}
-    >
-      <button
-        aria-disabled={false}
-        className="c1"
-        hidden={false}
-      >
-        <svg
-          height={16}
-          viewBox="0 0 10 8"
-          width={16}
-        >
-          <polyline
-            className="c2"
-            points="1,2 5,6 9,2"
-            strokeWidth="2"
-            transform="rotate(-90 5 4)"
-          />
-        </svg>
-      </button>
-    </a>
-  </nav>
-</div>
-`;
-
-exports[`Storybook Tests Sandbox/Pager LittlePageRangeDisplayed 1`] = `
-.c2 {
-  fill: none;
-  stroke-linejoin: round;
-  stroke-linecap: round;
-  stroke: currentColor;
-}
-
-.c0 {
-  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;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c1 {
-  font-size: 1rem;
-  line-height: calc(1em + 8px);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  border: none;
-  outline: none;
-  touch-action: manipulation;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s;
-  transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s;
-  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;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  box-sizing: content-box;
-  min-width: 24px;
-  min-height: 24px;
-  padding: 8px;
-  cursor: pointer;
-  font-weight: bold;
-  -webkit-transform: translateZ(0);
-  border-radius: 48px;
-  background: transparent;
-  color: #858585;
-}
-
-.c1[hidden] {
-  visibility: hidden;
-  display: block;
-}
-
-.c1:hover {
-  background: rgba(0,0,0,0.04);
-  color: #474747;
-}
-
-.c1[aria-current] {
-  background-color: rgba(0,0,0,0.88);
-  color: #ffffff;
-}
-
-.c1[aria-current]:hover {
-  background-color: rgba(0,0,0,0.88);
-  color: #ffffff;
-}
-
-.c1:hover {
-  background: transparent;
-}
-
-.c3 {
-  font-size: 1rem;
-  line-height: calc(1em + 8px);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  border: none;
-  outline: none;
-  touch-action: manipulation;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s;
-  transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s;
-  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;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  box-sizing: content-box;
-  min-width: 24px;
-  min-height: 24px;
-  padding: 8px;
-  cursor: pointer;
-  font-weight: bold;
-  -webkit-transform: translateZ(0);
-  border-radius: 48px;
-  background: transparent;
-  color: #858585;
-}
-
-.c3[hidden] {
-  visibility: hidden;
-  display: block;
-}
-
-.c3:hover {
-  background: rgba(0,0,0,0.04);
-  color: #474747;
-}
-
-.c3[aria-current] {
-  background-color: rgba(0,0,0,0.88);
-  color: #ffffff;
-}
-
-.c3[aria-current]:hover {
-  background-color: rgba(0,0,0,0.88);
-  color: #ffffff;
-}
-
-<div
-  data-dark={false}
->
-  <nav
-    className="c0"
-  >
-    <a
-      href="/1"
-      onClick={[Function]}
-    >
-      <button
-        aria-disabled={true}
-        className="c1"
-        hidden={true}
-      >
-        <svg
-          height={16}
-          viewBox="0 0 10 8"
-          width={16}
-        >
-          <polyline
-            className="c2"
-            points="1,2 5,6 9,2"
-            strokeWidth="2"
-            transform="rotate(90 5 4)"
-          />
-        </svg>
-      </button>
-    </a>
-    <button
-      aria-current={true}
-      className="c3"
-      type="button"
-    >
-      <span>
-        1
-      </span>
-    </button>
-    <a
-      href="/2"
-      onClick={[Function]}
-    >
-      <button
-        className="c3"
-        type="button"
-      >
-        <span>
-          2
-        </span>
-      </button>
-    </a>
-    <a
-      href="/3"
-      onClick={[Function]}
-    >
-      <button
-        className="c3"
-        type="button"
-      >
-        <span>
-          3
-        </span>
-      </button>
-    </a>
-    <a
-      href="/4"
-      onClick={[Function]}
-    >
-      <button
-        className="c3"
-        type="button"
-      >
-        <span>
-          4
-        </span>
-      </button>
-    </a>
-    <a
-      href="/2"
-      onClick={[Function]}
-    >
-      <button
-        aria-disabled={false}
-        className="c1"
-        hidden={false}
-      >
-        <svg
-          height={16}
-          viewBox="0 0 10 8"
-          width={16}
-        >
-          <polyline
-            className="c2"
-            points="1,2 5,6 9,2"
-            strokeWidth="2"
-            transform="rotate(-90 5 4)"
-          />
-        </svg>
-      </button>
-    </a>
-  </nav>
-</div>
-`;
-
-exports[`Storybook Tests Sandbox/Pager NotCollapsed 1`] = `
-.c2 {
-  fill: none;
-  stroke-linejoin: round;
-  stroke-linecap: round;
-  stroke: currentColor;
-}
-
-.c0 {
-  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;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c1 {
-  font-size: 1rem;
-  line-height: calc(1em + 8px);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  border: none;
-  outline: none;
-  touch-action: manipulation;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s;
-  transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s;
-  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;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  box-sizing: content-box;
-  min-width: 24px;
-  min-height: 24px;
-  padding: 8px;
-  cursor: pointer;
-  font-weight: bold;
-  -webkit-transform: translateZ(0);
-  border-radius: 48px;
-  background: transparent;
-  color: #858585;
-}
-
-.c1[hidden] {
-  visibility: hidden;
-  display: block;
-}
-
-.c1:hover {
-  background: rgba(0,0,0,0.04);
-  color: #474747;
-}
-
-.c1[aria-current] {
-  background-color: rgba(0,0,0,0.88);
-  color: #ffffff;
-}
-
-.c1[aria-current]:hover {
-  background-color: rgba(0,0,0,0.88);
-  color: #ffffff;
-}
-
-.c1:hover {
-  background: transparent;
-}
-
-.c3 {
-  font-size: 1rem;
-  line-height: calc(1em + 8px);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  border: none;
-  outline: none;
-  touch-action: manipulation;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s;
-  transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s;
-  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;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  box-sizing: content-box;
-  min-width: 24px;
-  min-height: 24px;
-  padding: 8px;
-  cursor: pointer;
-  font-weight: bold;
-  -webkit-transform: translateZ(0);
-  border-radius: 48px;
-  background: transparent;
-  color: #858585;
-}
-
-.c3[hidden] {
-  visibility: hidden;
-  display: block;
-}
-
-.c3:hover {
-  background: rgba(0,0,0,0.04);
-  color: #474747;
-}
-
-.c3[aria-current] {
-  background-color: rgba(0,0,0,0.88);
-  color: #ffffff;
-}
-
-.c3[aria-current]:hover {
-  background-color: rgba(0,0,0,0.88);
-  color: #ffffff;
-}
-
-<div
-  data-dark={false}
->
-  <nav
-    className="c0"
-  >
-    <a
-      href="/3"
-      onClick={[Function]}
-    >
-      <button
-        aria-disabled={false}
-        className="c1"
-        hidden={false}
-      >
-        <svg
-          height={16}
-          viewBox="0 0 10 8"
-          width={16}
-        >
-          <polyline
-            className="c2"
-            points="1,2 5,6 9,2"
-            strokeWidth="2"
-            transform="rotate(90 5 4)"
-          />
-        </svg>
-      </button>
-    </a>
-    <a
-      href="/1"
-      onClick={[Function]}
-    >
-      <button
-        className="c3"
-        type="button"
-      >
-        <span>
-          1
-        </span>
-      </button>
-    </a>
-    <a
-      href="/2"
-      onClick={[Function]}
-    >
-      <button
-        className="c3"
-        type="button"
-      >
-        <span>
-          2
-        </span>
-      </button>
-    </a>
-    <a
-      href="/3"
-      onClick={[Function]}
-    >
-      <button
-        className="c3"
-        type="button"
-      >
-        <span>
-          3
-        </span>
-      </button>
-    </a>
-    <button
-      aria-current={true}
-      className="c3"
-      type="button"
-    >
-      <span>
-        4
-      </span>
-    </button>
-    <a
-      href="/5"
-      onClick={[Function]}
-    >
-      <button
-        className="c3"
-        type="button"
-      >
-        <span>
-          5
-        </span>
-      </button>
-    </a>
-    <a
-      href="/6"
-      onClick={[Function]}
-    >
-      <button
-        className="c3"
-        type="button"
-      >
-        <span>
-          6
-        </span>
-      </button>
-    </a>
-    <a
-      href="/7"
-      onClick={[Function]}
-    >
-      <button
-        className="c3"
-        type="button"
-      >
-        <span>
-          7
-        </span>
-      </button>
-    </a>
-    <a
-      href="/5"
-      onClick={[Function]}
-    >
-      <button
-        aria-disabled={false}
-        className="c1"
-        hidden={false}
-      >
-        <svg
-          height={16}
-          viewBox="0 0 10 8"
-          width={16}
-        >
-          <polyline
-            className="c2"
-            points="1,2 5,6 9,2"
-            strokeWidth="2"
-            transform="rotate(-90 5 4)"
-          />
-        </svg>
-      </button>
-    </a>
-  </nav>
-</div>
-`;
-
-exports[`Storybook Tests Sandbox/Pager One 1`] = `
-.c2 {
-  fill: none;
-  stroke-linejoin: round;
-  stroke-linecap: round;
-  stroke: currentColor;
-}
-
-.c0 {
-  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;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c1 {
-  font-size: 1rem;
-  line-height: calc(1em + 8px);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  border: none;
-  outline: none;
-  touch-action: manipulation;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s;
-  transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s;
-  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;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  box-sizing: content-box;
-  min-width: 24px;
-  min-height: 24px;
-  padding: 8px;
-  cursor: pointer;
-  font-weight: bold;
-  -webkit-transform: translateZ(0);
-  border-radius: 48px;
-  background: transparent;
-  color: #858585;
-}
-
-.c1[hidden] {
-  visibility: hidden;
-  display: block;
-}
-
-.c1:hover {
-  background: rgba(0,0,0,0.04);
-  color: #474747;
-}
-
-.c1[aria-current] {
-  background-color: rgba(0,0,0,0.88);
-  color: #ffffff;
-}
-
-.c1[aria-current]:hover {
-  background-color: rgba(0,0,0,0.88);
-  color: #ffffff;
-}
-
-.c1:hover {
-  background: transparent;
-}
-
-.c3 {
-  font-size: 1rem;
-  line-height: calc(1em + 8px);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  border: none;
-  outline: none;
-  touch-action: manipulation;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s;
-  transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s;
-  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;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  box-sizing: content-box;
-  min-width: 24px;
-  min-height: 24px;
-  padding: 8px;
-  cursor: pointer;
-  font-weight: bold;
-  -webkit-transform: translateZ(0);
-  border-radius: 48px;
-  background: transparent;
-  color: #858585;
-}
-
-.c3[hidden] {
-  visibility: hidden;
-  display: block;
-}
-
-.c3:hover {
-  background: rgba(0,0,0,0.04);
-  color: #474747;
-}
-
-.c3[aria-current] {
-  background-color: rgba(0,0,0,0.88);
-  color: #ffffff;
-}
-
-.c3[aria-current]:hover {
-  background-color: rgba(0,0,0,0.88);
-  color: #ffffff;
-}
-
-<div
-  data-dark={false}
->
-  <nav
-    className="c0"
-  >
-    <a
-      href="/1"
-      onClick={[Function]}
-    >
-      <button
-        aria-disabled={true}
-        className="c1"
-        hidden={true}
-      >
-        <svg
-          height={16}
-          viewBox="0 0 10 8"
-          width={16}
-        >
-          <polyline
-            className="c2"
-            points="1,2 5,6 9,2"
-            strokeWidth="2"
-            transform="rotate(90 5 4)"
-          />
-        </svg>
-      </button>
-    </a>
-    <button
-      aria-current={true}
-      className="c3"
-      type="button"
-    >
-      <span>
-        1
-      </span>
-    </button>
-    <a
-      href="/1"
-      onClick={[Function]}
-    >
-      <button
-        aria-disabled={true}
-        className="c1"
-        hidden={true}
-      >
-        <svg
-          height={16}
-          viewBox="0 0 10 8"
-          width={16}
-        >
-          <polyline
-            className="c2"
-            points="1,2 5,6 9,2"
-            strokeWidth="2"
-            transform="rotate(-90 5 4)"
-          />
-        </svg>
-      </button>
-    </a>
-  </nav>
-</div>
-`;