@7shifts/sous-chef 3.16.0 → 3.18.0

package/dist/forms/TextAreaField/TextAreaField.d.ts

@@ -21,6 +21,7 @@ declare type Props = {
     /** A JSX containing the toolbar elements. You can use `Inline` to place the buttons properly on the toolbar space. */
     toolbar?: React.ReactNode;
     testId?: string;
+    maxLength?: number;
 };
 declare const TextAreaField: React.FC<Props>;
 export default TextAreaField;

package/dist/index.css

@@ -1941,8 +1941,67 @@ h5._3CIA3 {
   border-top-right-radius: 50%;
   border-bottom-right-radius: 50%;
 }
-._3CaV0 {
-  max-width: 500px;
+._2sg0c {
+  position: relative;
+}
+._2LdrP {
+  padding-left: 24px;
+}
+._2sg0c input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  z-index: var(--z-index-base);
+  width: 16px;
+  height: 16px;
+  right: 0;
+}
+._2mA8e {
+  display: block;
+  top: 0;
+  left: 0;
+  height: 14px;
+  width: 14px;
+  background-color: transparent;
+  border-radius: 4px;
+  border: 1px solid var(--color-grey-200);
+  box-shadow: inset 0 1px 4px -2px var(--color-grey-200);
+}
+._2mA8e::after {
+  position: absolute;
+  content: "";
+  opacity: 0;
+}
+input:checked ~ ._2mA8e {
+  background-color: #4d89f5;
+  border-radius: 4px;
+  transform: rotate(0deg) scale(1);
+  opacity: 1;
+  border: 1px solid #8cb5f4;
+}
+input:checked ~ ._2mA8e::after {
+  opacity: 1;
+  transform: rotate(45deg) scale(1);
+  left: 4px;
+  top: 1px;
+  width: 4px;
+  height: 8px;
+  border: solid var(--color-white);
+  border-width: 0 2px 2px 0;
+  background-color: transparent;
+  border-radius: 0;
+}
+input:focus-visible + ._2mA8e {
+  outline: var(--color-eggplant-400) solid 1px;
+}
+input:disabled + ._2mA8e {
+  background-color: var(--color-grey-100);
+  border: 1px solid var(--color-grey-200);
+}
+input:disabled + ._2mA8e::after {
+  box-shadow: none;
+  border: solid #9f9f9f !important;
+  border-width: 0 2px 2px 0 !important;
 }
 ._29ZIp {
   position: relative;
@@ -2018,6 +2077,275 @@ h5._3CIA3 {
 ._17aOG {
   max-width: 1000px;
 }
+._3hZEG {
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
+  border: 1px solid var(--color-grey-200);
+  border-radius: 8px;
+  background-color: var(--color-white);
+  max-width: 446px;
+  min-width: 390px;
+  overflow: hidden;
+  outline: none;
+  transform: translateX(450px);
+  opacity: 0;
+  transition: transform 0.2s cubic-bezier(0.17, 0.67, 0.16, 0.99), opacity 0.2s linear;
+}
+._JvGIZ {
+  opacity: 1;
+  transform: translateX(0);
+}
+._2D_ak {
+  opacity: 0;
+}
+._1lmCk {
+  position: fixed;
+  bottom: 78px;
+  right: 10px;
+}
+._A6js8 {
+  max-width: 100%;
+  max-height: 100%;
+}
+._24heZ {
+  padding: 32px;
+}
+._5M3XV {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+._qYNve {
+  width: 100%;
+  height: 100%;
+}
+._qYNve > div, ._qYNve > div > div {
+  height: 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;
+}
+._1cDCR {
+  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;
+}
+._2X-yg {
+  width: 272px;
+}
+._3O5Kh {
+  width: 336px;
+}
+._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;
+}
+._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;
+}
+._2xgv4:not(:first-child):not(:last-child):not(._1vG3O):hover::after {
+  right: -1px;
+}
+._2xgv4:not(:first-child):not(:last-child):not(._1vG3O):hover::before {
+  left: -1px;
+}
+._2xgv4:last-child {
+  border-radius: 0 4px 4px 0;
+  border-width: 1px 1px 1px 0px;
+}
+._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;
+  top: -1px;
+  left: -1px;
+}
+._1uKNF {
+  height: 38px;
+  width: 1px;
+  background-color: var(--color-grey-200);
+}
+._3CaV0 {
+  max-width: 500px;
+}
 ._7-5gD {
   margin-bottom: 12px;
   color: var(--color-grey-500);
@@ -2086,68 +2414,6 @@ h5._3CIA3 {
 ._rQqnL {
   margin-top: 5px;
 }
-._2sg0c {
-  position: relative;
-}
-._2LdrP {
-  padding-left: 24px;
-}
-._2sg0c input {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-  z-index: var(--z-index-base);
-  width: 16px;
-  height: 16px;
-  right: 0;
-}
-._2mA8e {
-  display: block;
-  top: 0;
-  left: 0;
-  height: 14px;
-  width: 14px;
-  background-color: transparent;
-  border-radius: 4px;
-  border: 1px solid var(--color-grey-200);
-  box-shadow: inset 0 1px 4px -2px var(--color-grey-200);
-}
-._2mA8e::after {
-  position: absolute;
-  content: "";
-  opacity: 0;
-}
-input:checked ~ ._2mA8e {
-  background-color: #4d89f5;
-  border-radius: 4px;
-  transform: rotate(0deg) scale(1);
-  opacity: 1;
-  border: 1px solid #8cb5f4;
-}
-input:checked ~ ._2mA8e::after {
-  opacity: 1;
-  transform: rotate(45deg) scale(1);
-  left: 4px;
-  top: 1px;
-  width: 4px;
-  height: 8px;
-  border: solid var(--color-white);
-  border-width: 0 2px 2px 0;
-  background-color: transparent;
-  border-radius: 0;
-}
-input:focus-visible + ._2mA8e {
-  outline: var(--color-eggplant-400) solid 1px;
-}
-input:disabled + ._2mA8e {
-  background-color: var(--color-grey-100);
-  border: 1px solid var(--color-grey-200);
-}
-input:disabled + ._2mA8e::after {
-  box-shadow: none;
-  border: solid #9f9f9f !important;
-  border-width: 0 2px 2px 0 !important;
-}
 ._g6T-p {
   position: relative;
 }
@@ -2424,32 +2690,14 @@ input:disabled + ._1tMq-::after {
   right: 7px;
   top: 7px;
 }
-._U0krC {
-  color: var(--color-grey-200);
-  font-family: "Proxima Nova", sans-serif;
-}
-
-._2XIl4 {
-  color: var(--color-grey-400);
-  font-family: "Proxima Nova", sans-serif;
-}
-._1cDCR {
-  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;
+._U0krC {
+  color: var(--color-grey-200);
+  font-family: "Proxima Nova", sans-serif;
 }
 
-._2F1jP {
-  padding: 8px 4px 8px 4px;
+._2XIl4 {
+  color: var(--color-grey-400);
+  font-family: "Proxima Nova", sans-serif;
 }
 ._uC4zU {
   font-family: "Proxima Nova", sans-serif;
@@ -3925,254 +4173,6 @@ input:disabled + ._1tMq-::after {
 ._zXsKE {
   background-image: url(./flags/zw.svg);
 }
-._3hZEG {
-  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
-  border: 1px solid var(--color-grey-200);
-  border-radius: 8px;
-  background-color: var(--color-white);
-  max-width: 446px;
-  min-width: 390px;
-  overflow: hidden;
-  outline: none;
-  transform: translateX(450px);
-  opacity: 0;
-  transition: transform 0.2s cubic-bezier(0.17, 0.67, 0.16, 0.99), opacity 0.2s linear;
-}
-._JvGIZ {
-  opacity: 1;
-  transform: translateX(0);
-}
-._2D_ak {
-  opacity: 0;
-}
-._1lmCk {
-  position: fixed;
-  bottom: 78px;
-  right: 10px;
-}
-._A6js8 {
-  max-width: 100%;
-  max-height: 100%;
-}
-._24heZ {
-  padding: 32px;
-}
-._5M3XV {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-}
-._qYNve {
-  width: 100%;
-  height: 100%;
-}
-._qYNve > div, ._qYNve > div > div {
-  height: 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;
-}
-._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;
-}
-._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;
-}
-._2xgv4:not(:first-child):not(:last-child):not(._1vG3O):hover::after {
-  right: -1px;
-}
-._2xgv4:not(:first-child):not(:last-child):not(._1vG3O):hover::before {
-  left: -1px;
-}
-._2xgv4:last-child {
-  border-radius: 0 4px 4px 0;
-  border-width: 1px 1px 1px 0px;
-}
-._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;
-  top: -1px;
-  left: -1px;
-}
-._1uKNF {
-  height: 38px;
-  width: 1px;
-  background-color: var(--color-grey-200);
-}
 ._vgLin {
   padding: 16px 12px 16px 12px;
   background: var(--color-grey-100);