@7shifts/sous-chef 2.17.2 → 2.19.0

package/dist/index.css

@@ -88,41 +88,6 @@
   --color-grey-600: #323232;
   --color-grey-600-rgb: 50, 50, 50;
 }
-._v0AEt {
-  font-family: "Proxima Nova", sans-serif;
-  position: absolute;
-  list-style: none;
-  min-width: 160px;
-  margin: 2px 0 0 0;
-  padding: 5px 0;
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-  background: var(--color-white);
-  margin-top: 8px;
-  z-index: 9999;
-  opacity: 0;
-  transform-origin: top right;
-  transform: scale(0);
-  visibility: hidden;
-}
-
-._lxd1B {
-  opacity: 1;
-  transform: scale(1);
-  visibility: visible;
-}
-
-._IRJ4j {
-  padding: 12px 20px;
-  font-size: 14px;
-  line-height: 20px;
-  display: flex;
-  cursor: pointer;
-  white-space: nowrap;
-  color: var(--color-grey-500);
-}
-._IRJ4j:hover {
-  background: var(--color-grey-100);
-}
 ._1DgA2 {
   display: flex;
 }
@@ -161,6 +126,136 @@
 ._QuNgn {
   display: inline-flex;
 }
+._1QDLF {
+  color: var(--color-grey-500);
+  font-family: "Proxima Nova", sans-serif;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+._2wiMV {
+  line-height: normal;
+  padding: 0;
+  width: auto;
+  float: none;
+  color: var(--color-grey-500);
+  font-family: "Proxima Nova", sans-serif;
+  font-weight: 600;
+  font-size: 14px;
+  min-height: 16px;
+}
+
+._fu5zH {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/**
+This component is built with acessibility in mind.
+The `<input type="checkbox" />` is not removed from screen or changed its `apparence`. It would mess up with the `outline`.
+Instead we are keeping it on the screen with a `opacity: 0`. When it is active we turn the `outline` on the upper class to keep the native bahaviour.
+
+Just for future references:
+`.toggle [type='checkbox']` = input checkbox
+`.toggle__switch::before`   = toggle bottom layer
+`.toggle__switch::after`    = toggle knub
+*/
+._1ui8X {
+  display: inline-flex;
+  align-items: center;
+  line-height: normal;
+  padding: 0;
+  width: auto;
+}
+
+._1YRJT {
+  line-height: normal;
+  padding: 0;
+  width: auto;
+  float: none;
+  color: var(--color-grey-500);
+  font-family: "Proxima Nova", sans-serif;
+  font-weight: 600;
+  font-size: 14px;
+  min-height: 16px;
+  margin-left: 8px;
+}
+
+._1jEiW {
+  color: var(--color-grey-500);
+  font-family: "Proxima Nova", sans-serif;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  margin-left: 48px;
+  display: block;
+}
+
+._1ui8X [type=checkbox] {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+._3tNyE {
+  position: relative;
+  cursor: pointer;
+}
+
+/* default states */
+._3tNyE::before {
+  content: "";
+  display: block;
+  background: var(--color-grey-200);
+  transition: all ease-in-out 150ms;
+  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.03);
+  border-radius: 26px;
+  height: 20px;
+  width: 40px;
+}
+
+._3tNyE::after {
+  content: "";
+  display: block;
+  position: absolute;
+  left: 2px;
+  right: 21px;
+  top: 2px;
+  background: var(--color-white);
+  border: 1px solid var(--color-grey-200);
+  border-radius: 24px;
+  height: 14px;
+  width: 14px;
+  transition: all ease-in-out 150ms;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.03);
+}
+
+/* special states */
+._1ui8X [type=checkbox]:focus-visible + ._3tNyE {
+  outline: var(--color-eggplant-400) solid 1px;
+}
+
+._1ui8X [type=checkbox]:disabled + ._3tNyE {
+  opacity: 0.4;
+  cursor: default;
+}
+
+._1ui8X [type=checkbox]:disabled + ._3tNyE::after {
+  box-shadow: none;
+}
+
+/* checked states */
+._1ui8X [type=checkbox]:checked + ._3tNyE::before {
+  background: var(--color-mint-400);
+}
+
+._1ui8X [type=checkbox]:checked + ._3tNyE::after {
+  border-color: var(--color-mint-400);
+  left: 21px;
+  right: 2px;
+}
 ._2wtfD {
   -webkit-animation: _2Jprn 1.4s linear infinite;
           animation: _2Jprn 1.4s linear infinite;
@@ -317,7 +412,9 @@
   display: inline-flex;
   justify-content: center;
   width: auto;
-  height: auto;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
   vertical-align: middle;
   background-image: none;
   white-space: nowrap;
@@ -502,6 +599,27 @@
   color: var(--color-grey-300);
 }
 
+._17InS {
+  background: transparent;
+  border-color: var(--color-white);
+  color: var(--color-white);
+}
+._17InS:hover {
+  background: rgba(var(--color-white-rgb), 0.05);
+  border-color: var(--color-white);
+  color: var(--color-white);
+}
+._17InS:disabled {
+  background: transparent;
+  border-color: var(--color-grey-200);
+  color: var(--color-grey-300);
+}
+._17InS[aria-disabled=true] {
+  background: transparent;
+  border-color: var(--color-grey-200);
+  color: var(--color-grey-300);
+}
+
 ._1LCBO {
   background: transparent;
   border-color: transparent;
@@ -627,6 +745,80 @@
   border-color: transparent;
   color: var(--color-grey-300);
 }
+._1IynL button:disabled {
+  border-color: var(--color-grey-200);
+}
+._1IynL button:last-child {
+  border-radius: 0 4px 4px 0;
+  margin-left: -1px;
+}
+._1IynL button:first-child {
+  border-radius: 4px 0 0 4px;
+}
+._1IynL button:not(:first-child):not(:last-child) {
+  border-radius: 0;
+  margin-left: -1px;
+}
+._3K6vV {
+  color: var(--color-blueberry-400);
+  text-decoration: none;
+}
+._3K6vV:hover {
+  text-decoration: underline;
+}
+._1xjKv {
+  color: var(--color-grey-500);
+}
+._c4pW8._c4pW8 {
+  font-family: "Proxima Nova", sans-serif;
+  background: var(--color-grey-500);
+  color: var(--color-white);
+  border-radius: 4px;
+  min-height: auto;
+  font-size: 14px;
+}
+._c4pW8._1ncFe {
+  background-color: var(--color-radish-400);
+}
+
+._3EHwm {
+  padding-left: 20px;
+}
+._v0AEt {
+  font-family: "Proxima Nova", sans-serif;
+  position: absolute;
+  list-style: none;
+  min-width: 160px;
+  margin: 2px 0 0 0;
+  padding: 5px 0;
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  background: var(--color-white);
+  margin-top: 8px;
+  z-index: 9999;
+  opacity: 0;
+  transform-origin: top right;
+  transform: scale(0);
+  visibility: hidden;
+}
+
+._lxd1B {
+  opacity: 1;
+  transform: scale(1);
+  visibility: visible;
+}
+
+._IRJ4j {
+  padding: 12px 20px;
+  font-size: 14px;
+  line-height: 20px;
+  display: flex;
+  cursor: pointer;
+  white-space: nowrap;
+  color: var(--color-grey-500);
+}
+._IRJ4j:hover {
+  background: var(--color-grey-100);
+}
 ._1UG1r {
   display: flex;
   padding: 16px;
@@ -730,25 +922,11 @@ This file probaly will be split when we split the components
   margin-top: 20px;
   font-family: "Proxima Nova", sans-serif;
 }
-._1IynL button:disabled {
-  border-color: var(--color-grey-200);
+._2GGMG {
+  display: flex;
 }
-._1IynL button:last-child {
-  border-radius: 0 4px 4px 0;
-  margin-left: -1px;
-}
-._1IynL button:first-child {
-  border-radius: 4px 0 0 4px;
-}
-._1IynL button:not(:first-child):not(:last-child) {
-  border-radius: 0;
-  margin-left: -1px;
-}
-._2GGMG {
-  display: flex;
-}
-._2GGMG:not(:last-child):not(._1ZCir) {
-  border-bottom: 1px solid var(--color-grey-200);
+._2GGMG:not(:last-child):not(._1ZCir) {
+  border-bottom: 1px solid var(--color-grey-200);
 }
 
 ._2GGMG:focus:not(:focus-visible) {
@@ -810,136 +988,6 @@ This file probaly will be split when we split the components
   flex-flow: row nowrap;
   justify-content: flex-end;
 }
-._1QDLF {
-  color: var(--color-grey-500);
-  font-family: "Proxima Nova", sans-serif;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 16px;
-}
-
-._2wiMV {
-  line-height: normal;
-  padding: 0;
-  width: auto;
-  float: none;
-  color: var(--color-grey-500);
-  font-family: "Proxima Nova", sans-serif;
-  font-weight: 600;
-  font-size: 14px;
-  min-height: 16px;
-}
-
-._fu5zH {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-/**
-This component is built with acessibility in mind.
-The `<input type="checkbox" />` is not removed from screen or changed its `apparence`. It would mess up with the `outline`.
-Instead we are keeping it on the screen with a `opacity: 0`. When it is active we turn the `outline` on the upper class to keep the native bahaviour.
-
-Just for future references:
-`.toggle [type='checkbox']` = input checkbox
-`.toggle__switch::before`   = toggle bottom layer
-`.toggle__switch::after`    = toggle knub
-*/
-._1ui8X {
-  display: inline-flex;
-  align-items: center;
-  line-height: normal;
-  padding: 0;
-  width: auto;
-}
-
-._1YRJT {
-  line-height: normal;
-  padding: 0;
-  width: auto;
-  float: none;
-  color: var(--color-grey-500);
-  font-family: "Proxima Nova", sans-serif;
-  font-weight: 600;
-  font-size: 14px;
-  min-height: 16px;
-  margin-left: 8px;
-}
-
-._1jEiW {
-  color: var(--color-grey-500);
-  font-family: "Proxima Nova", sans-serif;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 16px;
-  margin-left: 48px;
-  display: block;
-}
-
-._1ui8X [type=checkbox] {
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-}
-
-._3tNyE {
-  position: relative;
-  cursor: pointer;
-}
-
-/* default states */
-._3tNyE::before {
-  content: "";
-  display: block;
-  background: var(--color-grey-200);
-  transition: all ease-in-out 150ms;
-  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.03);
-  border-radius: 26px;
-  height: 20px;
-  width: 40px;
-}
-
-._3tNyE::after {
-  content: "";
-  display: block;
-  position: absolute;
-  left: 2px;
-  right: 21px;
-  top: 2px;
-  background: var(--color-white);
-  border: 1px solid var(--color-grey-200);
-  border-radius: 24px;
-  height: 14px;
-  width: 14px;
-  transition: all ease-in-out 150ms;
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.03);
-}
-
-/* special states */
-._1ui8X [type=checkbox]:focus-visible + ._3tNyE {
-  outline: var(--color-eggplant-400) solid 1px;
-}
-
-._1ui8X [type=checkbox]:disabled + ._3tNyE {
-  opacity: 0.4;
-  cursor: default;
-}
-
-._1ui8X [type=checkbox]:disabled + ._3tNyE::after {
-  box-shadow: none;
-}
-
-/* checked states */
-._1ui8X [type=checkbox]:checked + ._3tNyE::before {
-  background: var(--color-mint-400);
-}
-
-._1ui8X [type=checkbox]:checked + ._3tNyE::after {
-  border-color: var(--color-mint-400);
-  left: 21px;
-  right: 2px;
-}
 ._2ZgmC {
   display: flex;
   font-size: 12px;
@@ -1596,137 +1644,443 @@ Just for future references:
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-._1DWBq {
-  color: var(--color-grey-500);
-  font-family: "Proxima Nova", sans-serif;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 16px;
+._1DWBq {
+  color: var(--color-grey-500);
+  font-family: "Proxima Nova", sans-serif;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+}
+._nZ2MD {
+  color: var(--color-radish-400);
+  font-family: "Proxima Nova", sans-serif;
+  font-weight: 400;
+  font-size: 12px;
+}
+._ybKOk {
+  position: relative;
+  display: flex;
+  flex: 1;
+}
+
+._2COk3 input {
+  padding-left: 21px;
+}
+
+._1xXXN input {
+  padding-right: 21px;
+}
+
+._eX5OL {
+  position: absolute;
+  line-height: 22px;
+  padding: 8px;
+  color: var(--color-grey-500);
+  min-width: 8px;
+  pointer-events: none;
+  font-size: 14px;
+  font-family: "Proxima Nova", sans-serif;
+  box-sizing: content-box;
+  display: flex;
+  align-items: center;
+  height: 22px;
+  top: 0;
+  bottom: 0;
+  margin-top: auto;
+  margin-bottom: auto;
+  text-align: left;
+}
+._eX5OL svg {
+  color: var(--color-grey-400);
+}
+
+.__YH01 {
+  position: absolute;
+  line-height: 22px;
+  padding: 8px;
+  color: var(--color-grey-500);
+  min-width: 8px;
+  pointer-events: none;
+  font-size: 14px;
+  font-family: "Proxima Nova", sans-serif;
+  box-sizing: content-box;
+  display: flex;
+  align-items: center;
+  height: 22px;
+  top: 0;
+  bottom: 0;
+  margin-top: auto;
+  margin-bottom: auto;
+  right: 0;
+  text-align: right;
+}
+.__YH01 svg {
+  color: var(--color-grey-400);
+}
+._qYNve {
+  width: 100%;
+}
+._qYNve input {
+  border: 1px solid transparent;
+  display: flex;
+  justify-content: flex-end;
+  background: transparent;
+  padding: 16px;
+  width: 100%;
+  font-size: 14px;
+  font-family: "Proxima Nova", sans-serif;
+  border-radius: 0;
+}
+._qYNve input:focus {
+  border-color: var(--color-eggplant-400);
+  box-shadow: 0 0 8px var(--color-eggplant-300);
+  outline: none;
+}
+._qYNve input:hover {
+  background: var(--color-grey-100);
+}
+._3w6bw {
+  text-align: right;
+}
+._2y-_5 {
+  /* Firefox */
+}
+._2y-_5 input::-webkit-outer-spin-button,
+._2y-_5 input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+._2y-_5 input[type=number] {
+  -moz-appearance: textfield;
+}
+
+._1Mx8j._1Mx8j,
+._1Mx8j._1Mx8j:hover {
+  border-color: var(--color-radish-400);
+  background: var(--color-radish-100);
+}
+
+._2BlhN._2BlhN {
+  border-top-left-radius: 8px;
+}
+
+._1qDoN._1qDoN {
+  border-top-right-radius: 8px;
+}
+
+._2NUlb._2NUlb {
+  border-bottom-left-radius: 8px;
+}
+
+._3Mm-v._3Mm-v {
+  border-bottom-right-radius: 8px;
+}
+._2X-yg {
+  width: 272px;
+}
+._3O5Kh {
+  width: 336px;
+}
+:root {
+  --color-white: #fff;
+  --color-white-rgb: 255, 255, 255;
+  --color-black: #000;
+  --color-black-rgb: 0, 0, 0;
+  --color-tangerine-100: #fef1ed;
+  --color-tangerine-100-rgb: 254, 241, 237;
+  --color-tangerine-200: #fdd5c8;
+  --color-tangerine-200-rgb: 253, 213, 200;
+  --color-tangerine-300: #fcab91;
+  --color-tangerine-300-rgb: 252, 171, 145;
+  --color-tangerine-400: #fb7448;
+  --color-tangerine-400-rgb: 251, 116, 72;
+  --color-tangerine-500: #e16840;
+  --color-tangerine-500-rgb: 225, 104, 64;
+  --color-tangerine-600: #96452b;
+  --color-tangerine-600-rgb: 150, 69, 43;
+  --color-eggplant-100: #f0f3fb;
+  --color-eggplant-100-rgb: 240, 243, 251;
+  --color-eggplant-200: #d3dbf4;
+  --color-eggplant-200-rgb: 211, 219, 244;
+  --color-eggplant-300: #a7b7ea;
+  --color-eggplant-300-rgb: 67, 183, 234;
+  --color-eggplant-400: #6d87dd;
+  --color-eggplant-400-rgb: 109, 135, 221;
+  --color-eggplant-500: #6179c6;
+  --color-eggplant-500-rgb: 97, 121, 198;
+  --color-eggplant-600: #415184;
+  --color-eggplant-600-rgb: 65, 81, 132;
+  --color-mint-100: #ecfaf8;
+  --color-mint-100-rgb: 236, 250, 248;
+  --color-mint-200: #c6f1eb;
+  --color-mint-200-rgb: 198, 241, 235;
+  --color-mint-300: #8de4d7;
+  --color-mint-300-rgb: 141, 228, 215;
+  --color-mint-400: #3abda9;
+  --color-mint-400-rgb: 58, 189, 169;
+  --color-mint-500: #35ac9a;
+  --color-mint-500-rgb: 53, 172, 154;
+  --color-mint-600: #277e71;
+  --color-mint-600-rgb: 39, 126, 113;
+  --color-radish-100: #fcf0f0;
+  --color-radish-100-rgb: 252, 240, 240;
+  --color-radish-200: #f7d1d1;
+  --color-radish-200-rgb: 247, 209, 209;
+  --color-radish-300: #f0a3a3;
+  --color-radish-300-rgb: 240, 163, 163;
+  --color-radish-400: #e76767;
+  --color-radish-400-rgb: 231, 103, 103;
+  --color-radish-500: #cf5c5c;
+  --color-radish-500-rgb: 207, 92, 92;
+  --color-radish-600: #8a3d3d;
+  --color-radish-600-rgb: 138, 61, 61;
+  --color-blueberry-100: #f6fdff;
+  --color-blueberry-100-rgb: 246, 253, 255;
+  --color-blueberry-200: #ceecf5;
+  --color-blueberry-200-rgb: 206, 236, 245;
+  --color-blueberry-300: #9cd9eb;
+  --color-blueberry-300-rgb: 156, 217, 235;
+  --color-blueberry-400: #5bc0de;
+  --color-blueberry-400-rgb: 91, 192, 222;
+  --color-blueberry-500: #51acc7;
+  --color-blueberry-500-rgb: 81, 172, 199;
+  --color-blueberry-600: #367385;
+  --color-blueberry-600-rgb: 54, 115, 133;
+  --color-banana-100: #fff9ed;
+  --color-banana-100-rgb: 255, 249, 237;
+  --color-banana-200: #ffeec9;
+  --color-banana-200-rgb: 255, 238, 201;
+  --color-banana-300: #ffdd92;
+  --color-banana-300-rgb: 255, 221, 146;
+  --color-banana-400: #ffc74a;
+  --color-banana-400-rgb: 255, 199, 74;
+  --color-banana-500: #e5b242;
+  --color-banana-500-rgb: 229, 178, 66;
+  --color-banana-600: #99772c;
+  --color-banana-600-rgb: 153, 119, 44;
+  --color-grey-100: #f3f3f3;
+  --color-grey-100-rgb: 243, 243, 243;
+  --color-grey-200: #d5d5d5;
+  --color-grey-200-rgb: 213, 213, 213;
+  --color-grey-300: #949494;
+  --color-grey-300-rgb: 148, 148, 148;
+  --color-grey-400: #767676;
+  --color-grey-400-rgb: 118, 118, 118;
+  --color-grey-500: #464646;
+  --color-grey-500-rgb: 70, 70, 70;
+  --color-grey-600: #323232;
+  --color-grey-600-rgb: 50, 50, 50;
+}
+
+._23gnr {
+  width: 200px;
+  border-radius: 0px;
+  font-family: "Proxima Nova", sans-serif;
+  font-size: 14px;
+  color: var(--color-grey-500);
+  padding-left: 13px;
+  height: 38px;
+  background-color: var(--color-white);
+  border: 1px solid var(--color-grey-200);
+}
+._23gnr:not(._Zv1Se) {
+  cursor: pointer;
+}
+._23gnr:not(._Zv1Se):hover {
+  background-color: var(--color-grey-100);
+}
+._23gnr:not(._Zv1Se):focus {
+  box-shadow: 0 0 8px var(--color-eggplant-300);
+  outline: none;
+}
+._18V8V {
+  width: 264px;
+}
+._2v9v_ {
+  height: 18px;
+  width: 18px;
+}
+._s8MoI {
+  height: 38px;
+  background-color: var(--color-white);
+  border: 1px solid var(--color-grey-200);
+  cursor: pointer;
+}
+._s8MoI:hover {
+  background-color: var(--color-grey-100);
+}
+._s8MoI:focus {
+  box-shadow: 0 0 8px var(--color-eggplant-300);
+  outline: none;
+}
+._34Yoi, ._BeWpb {
+  width: 36px;
+}
+._34Yoi {
+  border-radius: 4px 0px 0px 4px;
+  border-right: 0;
+}
+._BeWpb {
+  border-radius: 0px 4px 4px 0px;
+  border-left: 0;
+}
+._J5ph7 {
+  display: flex;
+}
+._2xgv4 {
+  font-family: "Proxima Nova", sans-serif;
+  font-weight: 600;
+  font-size: 14px;
+  position: relative;
+  background-color: var(--color-grey-100);
+  color: var(--color-grey-500);
+  border-style: solid;
+  border-color: var(--color-grey-200);
+  line-height: 20px;
+  padding: 8px 12px;
+  min-width: 38px;
+  height: 38px;
+  cursor: pointer;
+  display: inline-flex;
+}
+._2xgv4:not(._1vG3O):hover {
+  background-color: var(--color-grey-200);
+  border-color: var(--color-grey-300);
+}
+._1vG3O {
+  background-color: var(--color-tangerine-400);
+  border-color: var(--color-tangerine-400);
+  color: var(--color-white);
+}
+._2xgv4:focus {
+  box-shadow: 0 0 8px var(--color-eggplant-300);
+  outline: none;
+  text-decoration: none;
+}
+._2xgv4:first-child {
+  border-radius: 4px 0 0 4px;
+  border-width: 1px 0px 1px 1px;
+}
+._2xgv4:first-child:not(._1vG3O):hover::after {
+  content: "";
+  height: 36px;
+  width: 1px;
+  background-color: var(--color-grey-200);
+  border-width: 1px 0px;
+  border-color: var(--color-grey-300);
+  border-style: solid;
+  position: absolute;
+  top: -1px;
+  right: -1px;
+}
+._2xgv4:not(:first-child):not(:last-child) {
+  border-radius: 0;
+  border-width: 1px 0px 1px 0px;
 }
-._nZ2MD {
-  color: var(--color-radish-400);
-  font-family: "Proxima Nova", sans-serif;
-  font-weight: 400;
-  font-size: 12px;
+._2xgv4:not(:first-child):not(:last-child):not(._1vG3O):hover::after, ._2xgv4:not(:first-child):not(:last-child):not(._1vG3O):hover::before {
+  content: "";
+  height: 36px;
+  width: 1px;
+  background-color: var(--color-grey-200);
+  border-width: 1px 0px;
+  border-color: var(--color-grey-300);
+  border-style: solid;
+  position: absolute;
+  top: -1px;
 }
-._ybKOk {
-  position: relative;
-  display: flex;
-  flex: 1;
+._2xgv4:not(:first-child):not(:last-child):not(._1vG3O):hover::after {
+  right: -1px;
 }
-
-._2COk3 input {
-  padding-left: 21px;
+._2xgv4:not(:first-child):not(:last-child):not(._1vG3O):hover::before {
+  left: -1px;
 }
-
-._1xXXN input {
-  padding-right: 21px;
+._2xgv4:last-child {
+  border-radius: 0 4px 4px 0;
+  border-width: 1px 1px 1px 0px;
 }
-
-._eX5OL {
+._2xgv4:last-child:not(._1vG3O):hover::before {
+  content: "";
+  height: 36px;
+  width: 1px;
+  background-color: var(--color-grey-200);
+  border-width: 1px 0px;
+  border-color: var(--color-grey-300);
+  border-style: solid;
   position: absolute;
-  line-height: 22px;
-  padding: 8px;
-  color: var(--color-grey-500);
-  min-width: 8px;
-  pointer-events: none;
-  font-size: 14px;
-  font-family: "Proxima Nova", sans-serif;
-  box-sizing: content-box;
-  display: flex;
-  align-items: center;
-  height: 22px;
-  top: 0;
-  bottom: 0;
-  margin-top: auto;
-  margin-bottom: auto;
-  text-align: left;
+  top: -1px;
+  left: -1px;
 }
-._eX5OL svg {
-  color: var(--color-grey-400);
+._1uKNF {
+  height: 38px;
+  width: 1px;
+  background-color: var(--color-grey-200);
 }
-
-.__YH01 {
-  position: absolute;
-  line-height: 22px;
-  padding: 8px;
-  color: var(--color-grey-500);
-  min-width: 8px;
-  pointer-events: none;
-  font-size: 14px;
-  font-family: "Proxima Nova", sans-serif;
-  box-sizing: content-box;
-  display: flex;
-  align-items: center;
-  height: 22px;
-  top: 0;
-  bottom: 0;
-  margin-top: auto;
-  margin-bottom: auto;
-  right: 0;
-  text-align: right;
+._3CaV0 {
+  max-width: 500px;
 }
-.__YH01 svg {
-  color: var(--color-grey-400);
+._29ZIp {
+  position: relative;
 }
-._qYNve {
+._3Q8NT {
+  box-sizing: border-box;
+  background: white;
+  border: 1px solid var(--color-grey-200);
+  border-radius: 8px;
   width: 100%;
+  height: 100%;
+  padding: 24px 20px;
+  color: var(--color-grey-500);
 }
-._qYNve input {
-  border: 1px solid transparent;
-  display: flex;
-  justify-content: flex-end;
-  background: transparent;
-  padding: 16px;
-  width: 100%;
-  font-size: 14px;
-  font-family: "Proxima Nova", sans-serif;
-  border-radius: 0;
+._2Fah6 {
+  cursor: pointer;
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15), 0 3px 3px rgba(0, 0, 0, 0.05);
+  transition: all ease-in-out 150ms;
+  font: inherit;
+  text-align: inherit;
 }
-._qYNve input:focus {
-  border-color: var(--color-eggplant-400);
+._2Fah6:not(._SGno0):hover {
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.2);
+  background-color: var(--color-grey-100);
+}
+._2Fah6:focus {
   box-shadow: 0 0 8px var(--color-eggplant-300);
   outline: none;
 }
-._qYNve input:hover {
-  background: var(--color-grey-100);
-}
-._3w6bw {
-  text-align: right;
-}
-._2y-_5 {
-  /* Firefox */
-}
-._2y-_5 input::-webkit-outer-spin-button,
-._2y-_5 input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
+._1zqRN {
+  border-color: var(--color-eggplant-400);
+  box-shadow: 0 0 8px var(--color-eggplant-300);
 }
-._2y-_5 input[type=number] {
-  -moz-appearance: textfield;
+._3Hwms {
+  min-height: 56px;
 }
-
-._1Mx8j._1Mx8j {
-  border-color: var(--color-radish-400);
+._TmEUS {
+  position: absolute;
+  z-index: 1;
+  right: 8px;
+  top: 8px;
 }
-
-._2BlhN._2BlhN {
-  border-top-left-radius: 8px;
+._7-5gD {
+  margin-bottom: 12px;
+  color: var(--color-grey-500);
+  font-family: "Proxima Nova", sans-serif;
 }
-
-._1qDoN._1qDoN {
-  border-top-right-radius: 8px;
+._a83vM {
+  line-height: 24px;
+  font-size: 20px;
+  font-weight: 600;
+  margin: 0;
 }
-
-._2NUlb._2NUlb {
-  border-bottom-left-radius: 8px;
+._1lKv8 {
+  line-height: 16px;
+  font-size: 14px;
+  font-weight: 400;
+  margin: 0;
 }
-
-._3Mm-v._3Mm-v {
-  border-bottom-right-radius: 8px;
+._lZyFQ {
+  margin-bottom: 0;
 }
-._3CaV0 {
-  max-width: 500px;
+._3vVBF {
+  margin-top: 12px;
 }
 ._2i-Ll > div {
   min-width: 0;
@@ -2163,6 +2517,20 @@ input:disabled + ._1tMq-::after {
   flex: 1;
   display: "flex";
 }
+._2-zhH {
+  box-sizing: border-box;
+  width: 100%;
+}
+
+._3sdnK {
+  border: solid var(--color-grey-200);
+  border-width: 1px 0 0 0;
+  margin: 0;
+}
+
+._2F1jP {
+  padding: 8px 4px 8px 4px;
+}
 ._uC4zU {
   font-family: "Proxima Nova", sans-serif;
   font-weight: 16px;
@@ -2624,6 +2992,62 @@ input:disabled + ._1tMq-::after {
   line-height: 12px;
   color: var(--color-grey-500);
 }
+._1KO1J {
+  color: var(--color-white);
+  font-size: 14px;
+  padding: 16px;
+  text-align: center;
+}
+._2mTN3 {
+  background-color: var(--color-blueberry-400);
+}
+._1YuCF {
+  background-color: var(--color-radish-400);
+}
+._tlNFk {
+  background-color: var(--color-eggplant-400);
+}
+._1XR7V {
+  position: relative;
+  width: 48px;
+  height: 48px;
+}
+._1BygP {
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  transform: translate(-50%, -50%);
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--color-grey-500);
+}
+._1Ak-z {
+  stroke: var(--color-grey-100);
+  fill: var(--color-white);
+}
+._22YIp {
+  stroke: var(--color-mint-400);
+  fill: transparent;
+}
+._3nyZN {
+  background-color: var(--color-grey-100);
+  height: 12px;
+  width: 100%;
+  border-radius: 8px;
+}
+._11TEp {
+  background-color: var(--color-tangerine-400);
+  height: 100%;
+  border-radius: 8px;
+}
+._3XFTU {
+  display: flex;
+  justify-content: space-around;
+  color: var(--color-grey-500);
+  font-family: "Proxima Nova", sans-serif;
+}
 ._2f81N {
   display: inline-flex;
   background-color: var(--color-tangerine-400);
@@ -2673,6 +3097,9 @@ input:disabled + ._1tMq-::after {
 }
 ._2wJGB img {
   height: inherit;
+  width: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 ._3QTSo {
   width: 20px;
@@ -2785,45 +3212,4 @@ input:disabled + ._1tMq-::after {
 ._2G3ML {
   background-color: var(--color-blueberry-200);
   color: var(--color-blueberry-600);
-}
-._29ZIp {
-  position: relative;
-}
-._3Q8NT {
-  box-sizing: border-box;
-  background: white;
-  border: 1px solid var(--color-grey-200);
-  border-radius: 8px;
-  width: 100%;
-  height: 100%;
-  padding: 24px 20px;
-  color: var(--color-grey-500);
-}
-._2Fah6 {
-  cursor: pointer;
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15), 0 3px 3px rgba(0, 0, 0, 0.05);
-  transition: all ease-in-out 150ms;
-  font: inherit;
-  text-align: inherit;
-}
-._2Fah6:not(._SGno0):hover {
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.2);
-  background-color: var(--color-grey-100);
-}
-._2Fah6:focus {
-  box-shadow: 0 0 8px var(--color-eggplant-300);
-  outline: none;
-}
-._1zqRN {
-  border-color: var(--color-eggplant-400);
-  box-shadow: 0 0 8px var(--color-eggplant-300);
-}
-._3Hwms {
-  min-height: 56px;
-}
-._TmEUS {
-  position: absolute;
-  z-index: 1;
-  right: 8px;
-  top: 8px;
 }