@mrshmllw/smores-react 1.2.10 → 1.2.15

package/dist/NumberInput/__tests__/__snapshots__/NumberInput.js.snap

@@ -1,1348 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders - currency 1`] = `
-.c1 {
-  font-size: 8px;
-  line-height: 100%;
-  font-weight: 700;
-  text-transform: uppercase;
-  -webkit-letter-spacing: 0.75px;
-  -moz-letter-spacing: 0.75px;
-  -ms-letter-spacing: 0.75px;
-  letter-spacing: 0.75px;
-  margin: 0;
-  padding: 0;
-  color: #D2D2D2;
-  text-align: left;
-  cursor: inherit;
-  -webkit-letter-spacing: 0.15px;
-  -moz-letter-spacing: 0.15px;
-  -ms-letter-spacing: 0.15px;
-  letter-spacing: 0.15px;
-}
-
-.c3 {
-  font-size: 14px;
-  line-height: 23px;
-  font-weight: 400;
-  margin: 0;
-  padding: 0;
-  color: #112035;
-  text-align: left;
-  cursor: inherit;
-  -webkit-letter-spacing: 0.15px;
-  -moz-letter-spacing: 0.15px;
-  -ms-letter-spacing: 0.15px;
-  letter-spacing: 0.15px;
-}
-
-.c8 {
-  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;
-  width: 100%;
-  max-width: 24px;
-  height: 24px;
-  -webkit-transform: rotate(180deg);
-  -ms-transform: rotate(180deg);
-  transform: rotate(180deg);
-  margin-top: 0;
-  margin-right: 0;
-  margin-bottom: 0;
-  margin-left: 0;
-}
-
-.c9 {
-  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;
-  width: 100%;
-  max-width: 24px;
-  height: 24px;
-  -webkit-transform: rotate(0deg);
-  -ms-transform: rotate(0deg);
-  transform: rotate(0deg);
-  margin-top: 0;
-  margin-right: 0;
-  margin-bottom: 0;
-  margin-left: 0;
-}
-
-.c0 {
-  font-family: 'Gordita',san-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 52px;
-}
-
-.c2 {
-  border-bottom: 1px solid;
-  border-color: #D2D2D2;
-  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;
-  height: 32px;
-  cursor: pointer;
-  opacity: 1;
-}
-
-.c2:hover {
-  border-color: #9E9E9E;
-}
-
-.c2:focus {
-  border-color: #545E7E;
-}
-
-.c5 {
-  font-family: 'Gordita',san-serif;
-  border: none;
-  font-size: 16px;
-  width: 100%;
-  outline: none;
-  cursor: pointer;
-  -moz-appearance: textfield;
-}
-
-.c5::-webkit-input-placeholder {
-  color: #D2D2D2;
-}
-
-.c5::-moz-placeholder {
-  color: #D2D2D2;
-}
-
-.c5:-ms-input-placeholder {
-  color: #D2D2D2;
-}
-
-.c5::placeholder {
-  color: #D2D2D2;
-}
-
-.c5::-webkit-outer-spin-button,
-.c5::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.c4 {
-  font-family: 'Gordita',san-serif;
-  font-size: 16px;
-  line-height: 19px;
-}
-
-.c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-  top: -3px;
-}
-
-.c7 {
-  width: 24px;
-  height: 24px;
-  background-color: transparent;
-  border: 0;
-  padding: 0;
-  cursor: pointer;
-}
-
-@media (min-width:768px) {
-  .c1 {
-    font-size: 10px;
-  }
-}
-
-@media (min-width:768px) {
-  .c3 {
-    font-size: 16px;
-    line-height: 26px;
-  }
-}
-
-<div
-  class="c0"
->
-  <label
-    class="c1"
-    color="grey4"
-    cursor="inherit"
-    title=""
-  >
-    Currency
-     
-  </label>
-  <div
-    class="c2"
-  >
-    <span
-      class="c3 c4"
-      color="blue7"
-      cursor="inherit"
-      title=""
-    >
-      $
-    </span>
-    <input
-      class="c5"
-      id="currencyInput"
-      name="currencyInput"
-      placeholder="100.00"
-      type="number"
-      value="50"
-    />
-    <div
-      class="c6"
-    >
-      <button
-        class="c7"
-      >
-        <span
-          class="c8"
-          color="grey4"
-          rotate="180"
-          size="24"
-        >
-          <svg
-            fill="none"
-            height="100%"
-            viewBox="0 0 24 24"
-            width="100%"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M19.66 8.248a1 1 0 00-1.412.095L12 15.482l-6.248-7.14a1 1 0 10-1.504 1.317l7 8a.995.995 0 001.504 0l7-8a1 1 0 00-.093-1.411z"
-              fill="#D2D2D2"
-            />
-          </svg>
-        </span>
-      </button>
-      <button
-        class="c7"
-      >
-        <span
-          class="c9"
-          color="grey4"
-          rotate="0"
-          size="24"
-        >
-          <svg
-            fill="none"
-            height="100%"
-            viewBox="0 0 24 24"
-            width="100%"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M19.66 8.248a1 1 0 00-1.412.095L12 15.482l-6.248-7.14a1 1 0 10-1.504 1.317l7 8a.995.995 0 001.504 0l7-8a1 1 0 00-.093-1.411z"
-              fill="#D2D2D2"
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders - disabled 1`] = `
-.c1 {
-  font-size: 8px;
-  line-height: 100%;
-  font-weight: 700;
-  text-transform: uppercase;
-  -webkit-letter-spacing: 0.75px;
-  -moz-letter-spacing: 0.75px;
-  -ms-letter-spacing: 0.75px;
-  letter-spacing: 0.75px;
-  margin: 0;
-  padding: 0;
-  color: #D2D2D2;
-  text-align: left;
-  cursor: inherit;
-  -webkit-letter-spacing: 0.15px;
-  -moz-letter-spacing: 0.15px;
-  -ms-letter-spacing: 0.15px;
-  letter-spacing: 0.15px;
-}
-
-.c0 {
-  font-family: 'Gordita',san-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 52px;
-}
-
-.c2 {
-  border-bottom: 1px solid;
-  border-color: #D2D2D2;
-  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;
-  height: 32px;
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.c2:hover {
-  border-color: #9E9E9E;
-}
-
-.c2:focus {
-  border-color: #545E7E;
-}
-
-.c3 {
-  font-family: 'Gordita',san-serif;
-  border: none;
-  font-size: 16px;
-  width: 100%;
-  outline: none;
-  cursor: not-allowed;
-  -moz-appearance: textfield;
-}
-
-.c3::-webkit-input-placeholder {
-  color: #D2D2D2;
-}
-
-.c3::-moz-placeholder {
-  color: #D2D2D2;
-}
-
-.c3:-ms-input-placeholder {
-  color: #D2D2D2;
-}
-
-.c3::placeholder {
-  color: #D2D2D2;
-}
-
-.c3::-webkit-outer-spin-button,
-.c3::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-@media (min-width:768px) {
-  .c1 {
-    font-size: 10px;
-  }
-}
-
-<div
-  class="c0"
->
-  <label
-    class="c1"
-    color="grey4"
-    cursor="inherit"
-    title=""
-  >
-    Currency
-     
-  </label>
-  <div
-    class="c2"
-    disabled=""
-  >
-    <input
-      class="c3"
-      disabled=""
-      id="currencyInput"
-      name="currencyInput"
-      placeholder="100.00"
-      type="number"
-      value=""
-    />
-  </div>
-</div>
-`;
-
-exports[`renders - error 1`] = `
-.c1 {
-  font-size: 8px;
-  line-height: 100%;
-  font-weight: 700;
-  text-transform: uppercase;
-  -webkit-letter-spacing: 0.75px;
-  -moz-letter-spacing: 0.75px;
-  -ms-letter-spacing: 0.75px;
-  letter-spacing: 0.75px;
-  margin: 0;
-  padding: 0;
-  color: #D2D2D2;
-  text-align: left;
-  cursor: inherit;
-  -webkit-letter-spacing: 0.15px;
-  -moz-letter-spacing: 0.15px;
-  -ms-letter-spacing: 0.15px;
-  letter-spacing: 0.15px;
-}
-
-.c3 {
-  font-size: 14px;
-  line-height: 23px;
-  font-weight: 400;
-  margin: 0;
-  padding: 0;
-  color: #112035;
-  text-align: left;
-  cursor: inherit;
-  -webkit-letter-spacing: 0.15px;
-  -moz-letter-spacing: 0.15px;
-  -ms-letter-spacing: 0.15px;
-  letter-spacing: 0.15px;
-}
-
-.c8 {
-  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;
-  width: 100%;
-  max-width: 24px;
-  height: 24px;
-  -webkit-transform: rotate(180deg);
-  -ms-transform: rotate(180deg);
-  transform: rotate(180deg);
-  margin-top: 0;
-  margin-right: 0;
-  margin-bottom: 0;
-  margin-left: 0;
-}
-
-.c9 {
-  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;
-  width: 100%;
-  max-width: 24px;
-  height: 24px;
-  -webkit-transform: rotate(0deg);
-  -ms-transform: rotate(0deg);
-  transform: rotate(0deg);
-  margin-top: 0;
-  margin-right: 0;
-  margin-bottom: 0;
-  margin-left: 0;
-}
-
-.c0 {
-  font-family: 'Gordita',san-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 64px;
-}
-
-.c2 {
-  border-bottom: 1px solid;
-  border-color: #B52525;
-  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;
-  height: 32px;
-  cursor: pointer;
-  opacity: 1;
-}
-
-.c2:hover {
-  border-color: #B52525;
-}
-
-.c2:focus {
-  border-color: #B52525;
-}
-
-.c5 {
-  font-family: 'Gordita',san-serif;
-  border: none;
-  color: #B52525;
-  font-size: 16px;
-  width: 100%;
-  outline: none;
-  cursor: pointer;
-  -moz-appearance: textfield;
-}
-
-.c5::-webkit-input-placeholder {
-  color: #D2D2D2;
-}
-
-.c5::-moz-placeholder {
-  color: #D2D2D2;
-}
-
-.c5:-ms-input-placeholder {
-  color: #D2D2D2;
-}
-
-.c5::placeholder {
-  color: #D2D2D2;
-}
-
-.c5::-webkit-outer-spin-button,
-.c5::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.c10 {
-  margin-top: 7px;
-  color: #B52525;
-  font-size: 12px;
-}
-
-.c4 {
-  font-family: 'Gordita',san-serif;
-  font-size: 16px;
-  line-height: 19px;
-}
-
-.c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-  top: -3px;
-}
-
-.c7 {
-  width: 24px;
-  height: 24px;
-  background-color: transparent;
-  border: 0;
-  padding: 0;
-  cursor: pointer;
-}
-
-@media (min-width:768px) {
-  .c1 {
-    font-size: 10px;
-  }
-}
-
-@media (min-width:768px) {
-  .c3 {
-    font-size: 16px;
-    line-height: 26px;
-  }
-}
-
-<div
-  class="c0"
->
-  <label
-    class="c1"
-    color="grey4"
-    cursor="inherit"
-    title=""
-  >
-    Currency
-     
-  </label>
-  <div
-    class="c2"
-  >
-    <span
-      class="c3 c4"
-      color="blue7"
-      cursor="inherit"
-      title=""
-    >
-      $
-    </span>
-    <input
-      class="c5"
-      id="currencyInput"
-      name="currencyInput"
-      placeholder="100.00"
-      type="number"
-      value="200"
-    />
-    <div
-      class="c6"
-    >
-      <button
-        class="c7"
-      >
-        <span
-          class="c8"
-          color="grey4"
-          rotate="180"
-          size="24"
-        >
-          <svg
-            fill="none"
-            height="100%"
-            viewBox="0 0 24 24"
-            width="100%"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M19.66 8.248a1 1 0 00-1.412.095L12 15.482l-6.248-7.14a1 1 0 10-1.504 1.317l7 8a.995.995 0 001.504 0l7-8a1 1 0 00-.093-1.411z"
-              fill="#D2D2D2"
-            />
-          </svg>
-        </span>
-      </button>
-      <button
-        class="c7"
-      >
-        <span
-          class="c9"
-          color="grey4"
-          rotate="0"
-          size="24"
-        >
-          <svg
-            fill="none"
-            height="100%"
-            viewBox="0 0 24 24"
-            width="100%"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M19.66 8.248a1 1 0 00-1.412.095L12 15.482l-6.248-7.14a1 1 0 10-1.504 1.317l7 8a.995.995 0 001.504 0l7-8a1 1 0 00-.093-1.411z"
-              fill="#D2D2D2"
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
-  </div>
-  <span
-    class="c10"
-  >
-    Oh gosh, this is an error isn't it!
-  </span>
-</div>
-`;
-
-exports[`renders - number 1`] = `
-.c1 {
-  font-size: 8px;
-  line-height: 100%;
-  font-weight: 700;
-  text-transform: uppercase;
-  -webkit-letter-spacing: 0.75px;
-  -moz-letter-spacing: 0.75px;
-  -ms-letter-spacing: 0.75px;
-  letter-spacing: 0.75px;
-  margin: 0;
-  padding: 0;
-  color: #D2D2D2;
-  text-align: left;
-  cursor: inherit;
-  -webkit-letter-spacing: 0.15px;
-  -moz-letter-spacing: 0.15px;
-  -ms-letter-spacing: 0.15px;
-  letter-spacing: 0.15px;
-}
-
-.c0 {
-  font-family: 'Gordita',san-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 52px;
-}
-
-.c3 {
-  border-bottom: 1px solid;
-  border-color: #D2D2D2;
-  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;
-  height: 32px;
-  cursor: pointer;
-  opacity: 1;
-}
-
-.c3:hover {
-  border-color: #9E9E9E;
-}
-
-.c3:focus {
-  border-color: #545E7E;
-}
-
-.c4 {
-  font-family: 'Gordita',san-serif;
-  border: none;
-  font-size: 16px;
-  width: 100%;
-  outline: none;
-  cursor: pointer;
-  -moz-appearance: textfield;
-}
-
-.c4::-webkit-input-placeholder {
-  color: #D2D2D2;
-}
-
-.c4::-moz-placeholder {
-  color: #D2D2D2;
-}
-
-.c4:-ms-input-placeholder {
-  color: #D2D2D2;
-}
-
-.c4::placeholder {
-  color: #D2D2D2;
-}
-
-.c4::-webkit-outer-spin-button,
-.c4::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.c2 {
-  font-size: 14px;
-  color: #55D6AA;
-}
-
-@media (min-width:768px) {
-  .c1 {
-    font-size: 10px;
-  }
-}
-
-<div
-  class="c0"
->
-  <label
-    class="c1"
-    color="grey4"
-    cursor="inherit"
-    title=""
-  >
-    Number
-     
-    <span
-      class="c2"
-    >
-      *
-    </span>
-  </label>
-  <div
-    class="c3"
-  >
-    <input
-      class="c4"
-      id="numberInput"
-      name="numberInput"
-      placeholder="0.00"
-      required=""
-      type="number"
-      value=""
-    />
-  </div>
-</div>
-`;
-
-exports[`renders - tel 1`] = `
-.c1 {
-  font-size: 8px;
-  line-height: 100%;
-  font-weight: 700;
-  text-transform: uppercase;
-  -webkit-letter-spacing: 0.75px;
-  -moz-letter-spacing: 0.75px;
-  -ms-letter-spacing: 0.75px;
-  letter-spacing: 0.75px;
-  margin: 0;
-  padding: 0;
-  color: #D2D2D2;
-  text-align: left;
-  cursor: inherit;
-  -webkit-letter-spacing: 0.15px;
-  -moz-letter-spacing: 0.15px;
-  -ms-letter-spacing: 0.15px;
-  letter-spacing: 0.15px;
-}
-
-.c3 {
-  font-size: 14px;
-  line-height: 23px;
-  font-weight: 400;
-  margin: 0;
-  padding: 0;
-  color: #112035;
-  text-align: left;
-  cursor: inherit;
-  -webkit-letter-spacing: 0.15px;
-  -moz-letter-spacing: 0.15px;
-  -ms-letter-spacing: 0.15px;
-  letter-spacing: 0.15px;
-}
-
-.c0 {
-  font-family: 'Gordita',san-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 52px;
-}
-
-.c2 {
-  border-bottom: 1px solid;
-  border-color: #D2D2D2;
-  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;
-  height: 32px;
-  cursor: pointer;
-  opacity: 1;
-}
-
-.c2:hover {
-  border-color: #9E9E9E;
-}
-
-.c2:focus {
-  border-color: #545E7E;
-}
-
-.c5 {
-  font-family: 'Gordita',san-serif;
-  border: none;
-  font-size: 16px;
-  width: 100%;
-  outline: none;
-  cursor: pointer;
-  -moz-appearance: textfield;
-}
-
-.c5::-webkit-input-placeholder {
-  color: #D2D2D2;
-}
-
-.c5::-moz-placeholder {
-  color: #D2D2D2;
-}
-
-.c5:-ms-input-placeholder {
-  color: #D2D2D2;
-}
-
-.c5::placeholder {
-  color: #D2D2D2;
-}
-
-.c5::-webkit-outer-spin-button,
-.c5::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.c4 {
-  font-family: 'Gordita',san-serif;
-  font-size: 16px;
-  line-height: 19px;
-}
-
-@media (min-width:768px) {
-  .c1 {
-    font-size: 10px;
-  }
-}
-
-@media (min-width:768px) {
-  .c3 {
-    font-size: 16px;
-    line-height: 26px;
-  }
-}
-
-<div
-  class="c0"
->
-  <label
-    class="c1"
-    color="grey4"
-    cursor="inherit"
-    title=""
-  >
-    Telephone number
-     
-  </label>
-  <div
-    class="c2"
-  >
-    <span
-      class="c3 c4"
-      color="blue7"
-      cursor="inherit"
-      title=""
-    >
-      +44
-    </span>
-    <input
-      class="c5"
-      id="tel"
-      name="telephoneNumber"
-      placeholder="07446875876"
-      type="tel"
-      value=""
-    />
-  </div>
-</div>
-`;
-
-exports[`renders - with suffix 1`] = `
-.c4 {
-  padding-right: 8px;
-}
-
-.c1 {
-  font-size: 8px;
-  line-height: 100%;
-  font-weight: 700;
-  text-transform: uppercase;
-  -webkit-letter-spacing: 0.75px;
-  -moz-letter-spacing: 0.75px;
-  -ms-letter-spacing: 0.75px;
-  letter-spacing: 0.75px;
-  margin: 0;
-  padding: 0;
-  color: #D2D2D2;
-  text-align: left;
-  cursor: inherit;
-  -webkit-letter-spacing: 0.15px;
-  -moz-letter-spacing: 0.15px;
-  -ms-letter-spacing: 0.15px;
-  letter-spacing: 0.15px;
-}
-
-.c5 {
-  font-size: 14px;
-  line-height: 23px;
-  font-weight: 400;
-  margin: 0;
-  padding: 0;
-  color: #112035;
-  text-align: left;
-  cursor: inherit;
-  -webkit-letter-spacing: 0.15px;
-  -moz-letter-spacing: 0.15px;
-  -ms-letter-spacing: 0.15px;
-  letter-spacing: 0.15px;
-}
-
-.c0 {
-  font-family: 'Gordita',san-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 52px;
-}
-
-.c2 {
-  border-bottom: 1px solid;
-  border-color: #D2D2D2;
-  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;
-  height: 32px;
-  cursor: pointer;
-  opacity: 1;
-}
-
-.c2:hover {
-  border-color: #9E9E9E;
-}
-
-.c2:focus {
-  border-color: #545E7E;
-}
-
-.c3 {
-  font-family: 'Gordita',san-serif;
-  border: none;
-  font-size: 16px;
-  width: 100%;
-  outline: none;
-  cursor: pointer;
-  -moz-appearance: textfield;
-}
-
-.c3::-webkit-input-placeholder {
-  color: #D2D2D2;
-}
-
-.c3::-moz-placeholder {
-  color: #D2D2D2;
-}
-
-.c3:-ms-input-placeholder {
-  color: #D2D2D2;
-}
-
-.c3::placeholder {
-  color: #D2D2D2;
-}
-
-.c3::-webkit-outer-spin-button,
-.c3::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.c6 {
-  font-family: 'Gordita',san-serif;
-  font-size: 16px;
-  line-height: 19px;
-}
-
-@media (min-width:768px) {
-  .c1 {
-    font-size: 10px;
-  }
-}
-
-@media (min-width:768px) {
-  .c5 {
-    font-size: 16px;
-    line-height: 26px;
-  }
-}
-
-<div
-  class="c0"
->
-  <label
-    class="c1"
-    color="grey4"
-    cursor="inherit"
-    title=""
-  >
-    Currency
-     
-  </label>
-  <div
-    class="c2"
-  >
-    <input
-      class="c3"
-      id="currencyInput"
-      name="currencyInput"
-      placeholder="100.00"
-      type="number"
-      value=""
-    />
-    <div
-      class="c4"
-    >
-      <span
-        class="c5 c6"
-        color="blue7"
-        cursor="inherit"
-        title=""
-      >
-        miles
-      </span>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders - with trailing icon 1`] = `
-.c1 {
-  font-size: 8px;
-  line-height: 100%;
-  font-weight: 700;
-  text-transform: uppercase;
-  -webkit-letter-spacing: 0.75px;
-  -moz-letter-spacing: 0.75px;
-  -ms-letter-spacing: 0.75px;
-  letter-spacing: 0.75px;
-  margin: 0;
-  padding: 0;
-  color: #D2D2D2;
-  text-align: left;
-  cursor: inherit;
-  -webkit-letter-spacing: 0.15px;
-  -moz-letter-spacing: 0.15px;
-  -ms-letter-spacing: 0.15px;
-  letter-spacing: 0.15px;
-}
-
-.c3 {
-  font-size: 14px;
-  line-height: 23px;
-  font-weight: 400;
-  margin: 0;
-  padding: 0;
-  color: #112035;
-  text-align: left;
-  cursor: inherit;
-  -webkit-letter-spacing: 0.15px;
-  -moz-letter-spacing: 0.15px;
-  -ms-letter-spacing: 0.15px;
-  letter-spacing: 0.15px;
-}
-
-.c6 {
-  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;
-  width: 100%;
-  max-width: 24px;
-  height: 24px;
-  -webkit-transform: rotate(0deg);
-  -ms-transform: rotate(0deg);
-  transform: rotate(0deg);
-  margin-top: 0;
-  margin-right: 0;
-  margin-bottom: 0;
-  margin-left: 0;
-}
-
-.c0 {
-  font-family: 'Gordita',san-serif;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 52px;
-}
-
-.c2 {
-  border-bottom: 1px solid;
-  border-color: #D2D2D2;
-  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;
-  height: 32px;
-  cursor: pointer;
-  opacity: 1;
-}
-
-.c2:hover {
-  border-color: #9E9E9E;
-}
-
-.c2:focus {
-  border-color: #545E7E;
-}
-
-.c5 {
-  font-family: 'Gordita',san-serif;
-  border: none;
-  font-size: 16px;
-  width: 100%;
-  outline: none;
-  cursor: pointer;
-  -moz-appearance: textfield;
-}
-
-.c5::-webkit-input-placeholder {
-  color: #D2D2D2;
-}
-
-.c5::-moz-placeholder {
-  color: #D2D2D2;
-}
-
-.c5:-ms-input-placeholder {
-  color: #D2D2D2;
-}
-
-.c5::placeholder {
-  color: #D2D2D2;
-}
-
-.c5::-webkit-outer-spin-button,
-.c5::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.c4 {
-  font-family: 'Gordita',san-serif;
-  font-size: 16px;
-  line-height: 19px;
-}
-
-@media (min-width:768px) {
-  .c1 {
-    font-size: 10px;
-  }
-}
-
-@media (min-width:768px) {
-  .c3 {
-    font-size: 16px;
-    line-height: 26px;
-  }
-}
-
-<div
-  class="c0"
->
-  <label
-    class="c1"
-    color="grey4"
-    cursor="inherit"
-    title=""
-  >
-    Currency
-     
-  </label>
-  <div
-    class="c2"
-  >
-    <span
-      class="c3 c4"
-      color="blue7"
-      cursor="inherit"
-      title=""
-    >
-      $
-    </span>
-    <input
-      class="c5"
-      id="currencyInput"
-      name="currencyInput"
-      placeholder="100.00"
-      type="number"
-      value=""
-    />
-    <span
-      class="c6"
-      color="grey4"
-      rotate="0"
-      size="24"
-    >
-      <svg
-        fill="none"
-        height="100%"
-        viewBox="0 0 24 24"
-        width="100%"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10a1 1 0 100-2c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8c0 1.103-.897 2-2 2s-2-.897-2-2c0-2.206-1.794-4-4-4s-4 1.794-4 4 1.794 4 4 4c1.2 0 2.266-.542 3-1.382.734.84 1.8 1.382 3 1.382 2.206 0 4-1.794 4-4 0-5.514-4.486-10-10-10zm0 12c-1.103 0-2-.897-2-2s.897-2 2-2 2 .897 2 2-.897 2-2 2z"
-          fill="#D2D2D2"
-        />
-      </svg>
-    </span>
-  </div>
-</div>
-`;