@taikai/rocket-kit 2.0.0-beta.8 → 2.0.0-beta.9

package/dist/rocket-kit.esm.js

@@ -2142,10 +2142,144 @@ const Toggle = ({
 };
 
 const {
-  normal: normal$7,
-  light: light$c,
+  red: red$9,
+  grey: grey$f,
   lightGrey: lightGrey$b,
-  red: red$9
+  darkGrey: darkGrey$2,
+  green: green$8,
+  darkGreen: darkGreen$4,
+  light: light$c,
+  normal: normal$7
+} = colors;
+const Wrapper$6 = _styled.div`
+  input {
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
+  }
+
+  label {
+    margin-bottom: 0 !important;
+    border-width: ${props => props.minimal ? `0 0 ${rem('1px')} 0` : rem('1px')};
+    border-style: solid;
+    border-color: ${props => props.error ? red$9 : grey$f};
+    border-radius: ${props => props.minimal ? 0 : rem('6px')};
+    background-color: ${props => props.disabled ? lightGrey$b : 'transparent'};
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: ${/*#__PURE__*/rem('50px')};
+    -webkit-appearance: none;
+    outline: none;
+    cursor: ${props => props.disabled ? 'default' : 'pointer'};
+    pointer-events: ${props => props.disabled ? 'none' : ''};
+    overflow: hidden;
+
+    span {
+      display: flex;
+      align-items: center;
+
+      &.file-name {
+        flex: 1;
+        display: block;
+        padding: ${props => props.minimal ? 0 : `0 ${rem('10px')}`};
+        color: ${props => props.disabled ? grey$f : normal$7};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      &.button {
+        border-left: ${props => props.minimal ? 0 : `${rem('1px')} solid ${grey$f}`};
+        background-color: ${props => props.minimal ? 'transparent' : props.disabled ? lightGrey$b : green$8};
+        height: 100%;
+        padding: ${props => props.minimal ? `0 ${rem('5px')} 0 ${rem('20px')}` : `0 ${rem('20px')}`};
+        color: ${props => props.disabled ? grey$f : props.minimal ? darkGrey$2 : light$c};
+        transition-duration: 0.3s;
+
+        svg {
+          margin-right: ${/*#__PURE__*/rem('8px')};
+          width: auto;
+          height: ${/*#__PURE__*/rem('24px')};
+          fill: ${props => props.disabled ? grey$f : props.minimal ? darkGrey$2 : light$c};
+          transition-duration: 0.3s;
+        }
+
+        &:hover {
+          background-color: ${props => props.minimal ? 'transparent' : darkGreen$4};
+          color: ${props => props.minimal ? darkGreen$4 : light$c};
+
+          svg {
+            fill: ${props => props.disabled ? grey$f : props.minimal ? darkGreen$4 : light$c};
+          }
+        }
+      }
+    }
+  }
+`;
+
+const FilePicker = props => {
+  const {
+    minimal = false,
+    name,
+    accept,
+    multiple = false,
+    placeholder = 'Select file',
+    pluralText = 'files selected',
+    error,
+    dataTestId,
+    onChange = () => {},
+    value = '',
+    buttonText = 'Browse',
+    disabled = false
+  } = props;
+  const [fileName, setFileName] = useState(value ? value : placeholder);
+
+  const getUploadedFileName = e => {
+    let files = e.target.files,
+        value = e.target.value,
+        fileName;
+    if (files && files.length > 1) fileName = `${files.length} ${pluralText}`;else fileName = value.split('\\').pop();
+    if (fileName) setFileName(fileName);
+  };
+
+  return /*#__PURE__*/React.createElement(Wrapper$6, {
+    disabled: disabled,
+    minimal: minimal,
+    error: !!error
+  }, /*#__PURE__*/React.createElement("input", {
+    id: name,
+    type: "file",
+    accept: accept,
+    multiple: multiple,
+    "data-multiple-caption": fileName,
+    onChange: evt => {
+      getUploadedFileName(evt);
+      onChange(evt);
+    },
+    "data-testid": dataTestId
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: name
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "file-name"
+  }, fileName), /*#__PURE__*/React.createElement("span", {
+    className: "button"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: "upload"
+  }), buttonText)), error && /*#__PURE__*/React.createElement(ErrorField, {
+    error: error
+  }));
+};
+
+const {
+  normal: normal$8,
+  light: light$d,
+  lightGrey: lightGrey$c,
+  red: red$a
 } = colors;
 const ActionsMenuStyle$1 = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__ActionsMenuStyle",
@@ -2154,11 +2288,11 @@ const ActionsMenuStyle$1 = /*#__PURE__*/_styled.div.withConfig({
 const List = /*#__PURE__*/_styled.ul.withConfig({
   displayName: "styles__List",
   componentId: "sc-1peafop-1"
-})(["position:absolute;border:", " solid ", ";border-radius:", ";background-color:", ";margin-top:", ";min-width:", ";max-width:", ";padding:0;-moz-box-shadow:0 0 ", " 0 ", ";-webkit-box-shadow:0 0 ", " 0 ", ";box-shadow:0 0 ", " 0 ", ";z-index:1;", " li{list-style:none;min-height:", ";display:flex;transition-duration:0.3s;&:hover{background-color:", ";cursor:pointer;}&:first-child{border-radius:", " ", " 0 0;}&:last-child{border-radius:0 0 ", " ", ";}&.danger{border-top:", " solid ", ";a{color:", ";}}&.disabled{a{color:", ";pointer-events:none;}&:hover{background-color:transparent;}}a{width:100%;display:flex;align-items:center;padding:0 ", ";color:", ";text-decoration:none;white-space:nowrap;span{display:table-cell;overflow:hidden;text-overflow:ellipsis;}}}"], /*#__PURE__*/rem('1px'), lightGrey$b, /*#__PURE__*/rem('4px'), light$c, /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('200px'), /*#__PURE__*/rem('250px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/lighten(0.7, normal$7), /*#__PURE__*/rem('15px'), /*#__PURE__*/lighten(0.7, normal$7), /*#__PURE__*/rem('15px'), /*#__PURE__*/lighten(0.7, normal$7), props => props.rowIndex != undefined && css`
+})(["position:absolute;border:", " solid ", ";border-radius:", ";background-color:", ";margin-top:", ";min-width:", ";max-width:", ";padding:0;-moz-box-shadow:0 0 ", " 0 ", ";-webkit-box-shadow:0 0 ", " 0 ", ";box-shadow:0 0 ", " 0 ", ";z-index:1;", " li{list-style:none;min-height:", ";display:flex;transition-duration:0.3s;&:hover{background-color:", ";cursor:pointer;}&:first-child{border-radius:", " ", " 0 0;}&:last-child{border-radius:0 0 ", " ", ";}&.danger{border-top:", " solid ", ";a{color:", ";}}&.disabled{a{color:", ";pointer-events:none;}&:hover{background-color:transparent;}}a{width:100%;display:flex;align-items:center;padding:0 ", ";color:", ";text-decoration:none;white-space:nowrap;span{display:table-cell;overflow:hidden;text-overflow:ellipsis;}}}"], /*#__PURE__*/rem('1px'), lightGrey$c, /*#__PURE__*/rem('4px'), light$d, /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('200px'), /*#__PURE__*/rem('250px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/lighten(0.7, normal$8), /*#__PURE__*/rem('15px'), /*#__PURE__*/lighten(0.7, normal$8), /*#__PURE__*/rem('15px'), /*#__PURE__*/lighten(0.7, normal$8), props => props.rowIndex != undefined && css`
       --margin: ${`calc(${rem('45px')} + ${rem('50px')} * ${props.rowIndex} + ${rem('42px')})`};
       top: var(--margin);
       right: ${rem('5px')};
-    `, /*#__PURE__*/rem('45px'), lightGrey$b, /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('1px'), lightGrey$b, red$9, lightGrey$b, /*#__PURE__*/rem('20px'), normal$7);
+    `, /*#__PURE__*/rem('45px'), lightGrey$c, /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('1px'), lightGrey$c, red$a, lightGrey$c, /*#__PURE__*/rem('20px'), normal$8);
 
 const ActionMenuList = props => {
   const {
@@ -2231,13 +2365,13 @@ const ActionsMenu = props => {
 };
 
 const {
-  light: light$d,
-  grey: grey$f
+  light: light$e,
+  grey: grey$g
 } = colors;
 const CardValueStyle = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__CardValueStyle",
   componentId: "sc-1ki7jdk-0"
-})(["border:", " solid ", ";border-radius:", ";background-color:", ";display:flex;flex-direction:column;padding:", ";overflow-x:auto;@media ", "{padding:", ";}> span{display:block;margin-top:", ";font-size:2rem;font-weight:var(--bold,700);line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}"], /*#__PURE__*/rem('1px'), grey$f, /*#__PURE__*/rem('6px'), light$d, /*#__PURE__*/rem('15px'), device.l, /*#__PURE__*/rem('30px'), /*#__PURE__*/rem('5px'));
+})(["border:", " solid ", ";border-radius:", ";background-color:", ";display:flex;flex-direction:column;padding:", ";overflow-x:auto;@media ", "{padding:", ";}> span{display:block;margin-top:", ";font-size:2rem;font-weight:var(--bold,700);line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}"], /*#__PURE__*/rem('1px'), grey$g, /*#__PURE__*/rem('6px'), light$e, /*#__PURE__*/rem('15px'), device.l, /*#__PURE__*/rem('30px'), /*#__PURE__*/rem('5px'));
 const CardValueButtonWrapper = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__CardValueButtonWrapper",
   componentId: "sc-1ki7jdk-1"
@@ -2268,8 +2402,8 @@ const CardValue = props => {
 };
 
 const {
-  grey: grey$g,
-  light: light$e
+  grey: grey$h,
+  light: light$f
 } = colors;
 const {
   bold: bold$5
@@ -2281,15 +2415,15 @@ const EmptyTableWrapper = /*#__PURE__*/_styled.div.withConfig({
 const EmptyTableHead = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__EmptyTableHead",
   componentId: "sc-1dgsb9l-1"
-})(["border-width:", ";border-style:solid;border-color:", ";border-radius:", " ", " 0 0;height:", ";display:flex;align-items:center;font-size:0.85rem;font-weight:", ";color:", ";text-transform:uppercase;> div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:none;flex:1;padding:0 ", ";font-size:0.85rem;font-weight:", ";color:", ";text-transform:uppercase;&:first-child,&:nth-child(2){display:initial;}@media ", "{&:nth-child(3){display:initial;}}@media ", "{&:nth-child(4){display:initial;}}@media ", "{display:initial;}}"], props => props.border ? rem('1px') : `0 0 ${rem('1px')} 0`, grey$g, /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('50px'), bold$5, grey$g, /*#__PURE__*/rem('15px'), bold$5, grey$g, device.s, device.m, device.l);
+})(["border-width:", ";border-style:solid;border-color:", ";border-radius:", " ", " 0 0;height:", ";display:flex;align-items:center;font-size:0.85rem;font-weight:", ";color:", ";text-transform:uppercase;> div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:none;flex:1;padding:0 ", ";font-size:0.85rem;font-weight:", ";color:", ";text-transform:uppercase;&:first-child,&:nth-child(2){display:initial;}@media ", "{&:nth-child(3){display:initial;}}@media ", "{&:nth-child(4){display:initial;}}@media ", "{display:initial;}}"], props => props.border ? rem('1px') : `0 0 ${rem('1px')} 0`, grey$h, /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('50px'), bold$5, grey$h, /*#__PURE__*/rem('15px'), bold$5, grey$h, device.s, device.m, device.l);
 const EmptyTableBody = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__EmptyTableBody",
   componentId: "sc-1dgsb9l-2"
-})(["border-width:", ";border-style:solid;border-color:", ";border-radius:0 0 ", " ", ";"], props => props.border ? `0 ${rem('1px')} ${rem('1px')} ${rem('1px')}` : 0, grey$g, /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('6px'));
+})(["border-width:", ";border-style:solid;border-color:", ";border-radius:0 0 ", " ", ";"], props => props.border ? `0 ${rem('1px')} ${rem('1px')} ${rem('1px')}` : 0, grey$h, /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('6px'));
 const EmptyTableRow = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__EmptyTableRow",
   componentId: "sc-1dgsb9l-3"
-})(["height:", ";display:flex;align-items:center;&:not(:last-child){border-bottom:", " solid ", ";}> div{display:none;flex:1;padding:0 ", ";&:first-child,&:nth-child(2){display:inherit;}@media ", "{&:nth-child(3){display:inherit;}}@media ", "{&:nth-child(4){display:inherit;}}@media ", "{display:inherit;}}"], /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('1px'), grey$g, /*#__PURE__*/rem('15px'), device.s, device.m, device.l);
+})(["height:", ";display:flex;align-items:center;&:not(:last-child){border-bottom:", " solid ", ";}> div{display:none;flex:1;padding:0 ", ";&:first-child,&:nth-child(2){display:inherit;}@media ", "{&:nth-child(3){display:inherit;}}@media ", "{&:nth-child(4){display:inherit;}}@media ", "{display:inherit;}}"], /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('1px'), grey$h, /*#__PURE__*/rem('15px'), device.s, device.m, device.l);
 const EmptyTableCellText = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__EmptyTableCellText",
   componentId: "sc-1dgsb9l-4"
@@ -2297,7 +2431,7 @@ const EmptyTableCellText = /*#__PURE__*/_styled.div.withConfig({
 const EmptyTableOverlay = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__EmptyTableOverlay",
   componentId: "sc-1dgsb9l-5"
-})(["position:absolute;bottom:0;background-image:linear-gradient( to bottom,", ",", " );width:100%;height:calc(100% - ", ");display:flex;justify-content:center;align-items:flex-end;padding:0 ", " ", " ", ";text-align:center;color:", ";"], /*#__PURE__*/rgba(light$e, 0), /*#__PURE__*/rgba(light$e, 1), /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('15px'), grey$g);
+})(["position:absolute;bottom:0;background-image:linear-gradient( to bottom,", ",", " );width:100%;height:calc(100% - ", ");display:flex;justify-content:center;align-items:flex-end;padding:0 ", " ", " ", ";text-align:center;color:", ";"], /*#__PURE__*/rgba(light$f, 0), /*#__PURE__*/rgba(light$f, 1), /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('15px'), grey$h);
 
 const EmptyTable = props => {
   let rows = [];
@@ -2357,29 +2491,29 @@ const ModalFooter = props => {
 };
 
 const {
-  green: green$8,
+  green: green$9,
   lightGreen,
-  darkGreen: darkGreen$4,
-  grey: grey$h,
-  lightGrey: lightGrey$c,
-  darkGrey: darkGrey$2,
-  red: red$a,
+  darkGreen: darkGreen$5,
+  grey: grey$i,
+  lightGrey: lightGrey$d,
+  darkGrey: darkGrey$3,
+  red: red$b,
   lightRed: lightRed$1,
   darkRed: darkRed$3
 } = colors;
-const Wrapper$6 = /*#__PURE__*/_styled.div.withConfig({
+const Wrapper$7 = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__Wrapper",
   componentId: "d2fn4g-0"
-})(["--default:", ";--light:", ";--dark:", ";", " ", " ", " border-width:", ";border-style:solid;border-color:var(--default);border-radius:", ";background-color:var(--light);padding:", ";div{&:first-child{flex:1;}p{margin:0;}}", ""], grey$h, lightGrey$c, darkGrey$2, props => props.color === 'grey' && css`
-      --default: ${grey$h};
-      --light: ${lightGrey$c};
-      --dark: ${darkGrey$2};
+})(["--default:", ";--light:", ";--dark:", ";", " ", " ", " border-width:", ";border-style:solid;border-color:var(--default);border-radius:", ";background-color:var(--light);padding:", ";div{&:first-child{flex:1;}p{margin:0;}}", ""], grey$i, lightGrey$d, darkGrey$3, props => props.color === 'grey' && css`
+      --default: ${grey$i};
+      --light: ${lightGrey$d};
+      --dark: ${darkGrey$3};
     `, props => props.color === 'green' && css`
-      --default: ${green$8};
+      --default: ${green$9};
       --light: ${lightGreen};
-      --dark: ${darkGreen$4};
+      --dark: ${darkGreen$5};
     `, props => props.color === 'red' && css`
-      --default: ${red$a};
+      --default: ${red$b};
       --light: ${lightRed$1};
       --dark: ${darkRed$3};
     `, /*#__PURE__*/rem('2px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('15px'), props => props.buttonValue && css`
@@ -2425,7 +2559,7 @@ const NoteCard = props => {
     className = 'note-card',
     style
   } = props;
-  return /*#__PURE__*/React.createElement(Wrapper$6, {
+  return /*#__PURE__*/React.createElement(Wrapper$7, {
     className: className,
     color: color,
     buttonValue: buttonValue,
@@ -2440,10 +2574,10 @@ function hasValue(value) {
 }
 
 const {
-  normal: normal$8,
-  light: light$f,
-  grey: grey$i,
-  lightGrey: lightGrey$d
+  normal: normal$9,
+  light: light$g,
+  grey: grey$j,
+  lightGrey: lightGrey$e
 } = colors;
 const {
   bold: bold$6
@@ -2455,11 +2589,11 @@ const TableWrapper = /*#__PURE__*/_styled.div.withConfig({
 const OverflowWrapper = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__OverflowWrapper",
   componentId: "vmoy3z-1"
-})(["@media ", "{display:block;border-radius:", ";background:linear-gradient(to right,", " 30%,rgba(255,255,255,0)),linear-gradient(to right,rgba(255,255,255,0),", " 70%) 0 100%,radial-gradient( farthest-side at 0% 50%,rgba(0,0,0,0.2),rgba(0,0,0,0) ),radial-gradient( farthest-side at 100% 50%,rgba(0,0,0,0.2),rgba(0,0,0,0) ) 0 100%;background-repeat:no-repeat;background-color:#fff;background-size:", " 100%,", " 100%,", " 100%,", " 100%;background-position:0 0,100%,0 0,100%;background-attachment:local,local,scroll,scroll;overflow-x:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;}"], device.s, /*#__PURE__*/rem('6px'), light$f, light$f, /*#__PURE__*/rem('40px'), /*#__PURE__*/rem('40px'), /*#__PURE__*/rem('14px'), /*#__PURE__*/rem('14px'));
+})(["@media ", "{display:block;border-radius:", ";background:linear-gradient(to right,", " 30%,rgba(255,255,255,0)),linear-gradient(to right,rgba(255,255,255,0),", " 70%) 0 100%,radial-gradient( farthest-side at 0% 50%,rgba(0,0,0,0.2),rgba(0,0,0,0) ),radial-gradient( farthest-side at 100% 50%,rgba(0,0,0,0.2),rgba(0,0,0,0) ) 0 100%;background-repeat:no-repeat;background-color:#fff;background-size:", " 100%,", " 100%,", " 100%,", " 100%;background-position:0 0,100%,0 0,100%;background-attachment:local,local,scroll,scroll;overflow-x:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;}"], device.s, /*#__PURE__*/rem('6px'), light$g, light$g, /*#__PURE__*/rem('40px'), /*#__PURE__*/rem('40px'), /*#__PURE__*/rem('14px'), /*#__PURE__*/rem('14px'));
 const Table = /*#__PURE__*/_styled.table.withConfig({
   displayName: "styles__Table",
   componentId: "vmoy3z-2"
-})(["width:100%;border-width:", ";border-style:solid;border-color:", ";border-radius:", ";border-spacing:0;white-space:nowrap;th,td{height:", ";padding:0 ", ";&.center{text-align:center;> div{justify-content:center;}}&.right{text-align:right;> div{justify-content:flex-end;}}&.thin{@media ", "{max-width:min-content;}}&.kai{text-align:right;> div{justify-content:flex-end;}}&.avatar > div{display:flex;align-items:center;.avatar-img{margin-right:", ";}}}th{font-size:0.85rem;&:first-child{border-top-left-radius:", ";}&:last-child{border-top-right-radius:", ";}}tr{border:", " solid ", ";border-radius:", ";position:relative;&:not(:last-child){margin-bottom:", ";}@media ", "{border:0;}}thead{border:none;clip:rect(0 0 0 0);height:", ";margin:", ";overflow:hidden;padding:0;position:absolute;width:", ";@media ", "{display:contents;font-weight:", ";color:", ";text-transform:uppercase;text-align:left;}}tbody{tr{display:block;transition-duration:0.3s;&:hover{background-color:", ";td.menu{button{opacity:1;}}}@media ", "{display:table-row;}}td{border-top:", " solid ", ";height:inherit;min-height:", ";padding:", ";display:flex;justify-content:flex-end;> div{margin-left:", ";height:100%;display:flex;justify-content:flex-end;align-items:center;flex-wrap:nowrap;text-align:right;> span{display:none;&:first-child,&:last-child{display:inherit;}}}img{min-width:", ";min-height:", ";}a{display:flex;align-items:center;color:", ";text-decoration-color:", ";}&:first-child{border:0;}&:before{position:absolute;left:", ";content:attr(data-label);font-weight:", ";text-transform:capitalize;}&.kai{svg{float:right;width:auto;min-width:", ";max-height:", ";}}.avatar-img{display:none;}.tag{margin:0;&:not(:first-child){display:none;}}&.menu{padding:0 ", " 0 0;button{margin-top:", ";transition:0.3s;}ul{top:", ";margin-left:", ";}}@media ", "{display:table-cell;height:", ";padding:0 ", ";align-items:center;> div{position:relative;margin-left:0;display:flex-start;justify-content:flex-start;text-align:left;> span{display:inherit;}}&:first-child{border-top:", " solid ", ";}&:before{content:'';}&.kai{max-width:", ";}.avatar-img{display:inherit;}.tag{&:not(:first-child){display:inherit;}&:not(:last-child){margin-right:", ";}}&.menu{width:", ";button{opacity:0;}}}}}"], props => props.border ? '1px' : '0', grey$i, /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('15px'), device.s, /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('1px'), grey$i, /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('15px'), device.s, /*#__PURE__*/rem('1px'), /*#__PURE__*/rem('-1px'), /*#__PURE__*/rem('1px'), device.s, bold$6, grey$i, lightGrey$d, device.s, /*#__PURE__*/rem('1px'), grey$i, /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('100px'), /*#__PURE__*/rem('30px'), /*#__PURE__*/rem('30px'), normal$8, grey$i, /*#__PURE__*/rem('15px'), bold$6, /*#__PURE__*/rem('20px'), /*#__PURE__*/rem('20px'), /*#__PURE__*/rem('10px'), /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('36px'), /*#__PURE__*/rem('-170px'), device.s, /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('1px'), grey$i, /*#__PURE__*/rem('100px'), /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('40px'));
+})(["width:100%;border-width:", ";border-style:solid;border-color:", ";border-radius:", ";border-spacing:0;white-space:nowrap;th,td{height:", ";padding:0 ", ";&.center{text-align:center;> div{justify-content:center;}}&.right{text-align:right;> div{justify-content:flex-end;}}&.thin{@media ", "{max-width:min-content;}}&.kai{text-align:right;> div{justify-content:flex-end;}}&.avatar > div{display:flex;align-items:center;.avatar-img{margin-right:", ";}}}th{font-size:0.85rem;&:first-child{border-top-left-radius:", ";}&:last-child{border-top-right-radius:", ";}}tr{border:", " solid ", ";border-radius:", ";position:relative;&:not(:last-child){margin-bottom:", ";}@media ", "{border:0;}}thead{border:none;clip:rect(0 0 0 0);height:", ";margin:", ";overflow:hidden;padding:0;position:absolute;width:", ";@media ", "{display:contents;font-weight:", ";color:", ";text-transform:uppercase;text-align:left;}}tbody{tr{display:block;transition-duration:0.3s;&:hover{background-color:", ";td.menu{button{opacity:1;}}}@media ", "{display:table-row;}}td{border-top:", " solid ", ";height:inherit;min-height:", ";padding:", ";display:flex;justify-content:flex-end;> div{margin-left:", ";height:100%;display:flex;justify-content:flex-end;align-items:center;flex-wrap:nowrap;text-align:right;> span{display:none;&:first-child,&:last-child{display:inherit;}}}img{min-width:", ";min-height:", ";}a{display:flex;align-items:center;color:", ";text-decoration-color:", ";}&:first-child{border:0;}&:before{position:absolute;left:", ";content:attr(data-label);font-weight:", ";text-transform:capitalize;}&.kai{svg{float:right;width:auto;min-width:", ";max-height:", ";}}.avatar-img{display:none;}.tag{margin:0;&:not(:first-child){display:none;}}&.menu{padding:0 ", " 0 0;button{margin-top:", ";transition:0.3s;}ul{top:", ";margin-left:", ";}}@media ", "{display:table-cell;height:", ";padding:0 ", ";align-items:center;> div{position:relative;margin-left:0;display:flex-start;justify-content:flex-start;text-align:left;> span{display:inherit;}}&:first-child{border-top:", " solid ", ";}&:before{content:'';}&.kai{max-width:", ";}.avatar-img{display:inherit;}.tag{&:not(:first-child){display:inherit;}&:not(:last-child){margin-right:", ";}}&.menu{width:", ";button{opacity:0;}}}}}"], props => props.border ? '1px' : '0', grey$j, /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('15px'), device.s, /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('1px'), grey$j, /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('15px'), device.s, /*#__PURE__*/rem('1px'), /*#__PURE__*/rem('-1px'), /*#__PURE__*/rem('1px'), device.s, bold$6, grey$j, lightGrey$e, device.s, /*#__PURE__*/rem('1px'), grey$j, /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('100px'), /*#__PURE__*/rem('30px'), /*#__PURE__*/rem('30px'), normal$9, grey$j, /*#__PURE__*/rem('15px'), bold$6, /*#__PURE__*/rem('20px'), /*#__PURE__*/rem('20px'), /*#__PURE__*/rem('10px'), /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('36px'), /*#__PURE__*/rem('-170px'), device.s, /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('1px'), grey$j, /*#__PURE__*/rem('100px'), /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('40px'));
 
 const Table$1 = props => {
   const {
@@ -2559,9 +2693,9 @@ const Table$1 = props => {
 };
 
 const {
-  normal: normal$9,
-  grey: grey$j,
-  lightGrey: lightGrey$e
+  normal: normal$a,
+  grey: grey$k,
+  lightGrey: lightGrey$f
 } = colors;
 const {
   bold: bold$7
@@ -2569,14 +2703,14 @@ const {
 const Table$2 = /*#__PURE__*/_styled.table.withConfig({
   displayName: "styles__Table",
   componentId: "sc-1p618q0-0"
-})(["position:relative;width:100%;border-width:", ";border-style:solid;border-color:", ";border-radius:", ";border-spacing:0;white-space:nowrap;table-layout:", ";th,td{height:", ";padding:0 ", ";&.center{text-align:center;> div{justify-content:center;}}&.right{text-align:right;> div{justify-content:flex-end;}}&.thin{@media ", "{max-width:min-content;}}&.kai{text-align:right;> div{justify-content:flex-end;}}&.avatar > div{display:flex;align-items:center;.avatar-img{margin-right:", ";}}}th{font-size:0.85rem;&:first-child{border-top-left-radius:", ";}&:last-child{border-top-right-radius:", ";}}tr{border:", " solid ", ";border-radius:", ";position:relative;&:not(:last-child){margin-bottom:", ";}@media ", "{border:0;}}thead{border:none;clip:rect(0 0 0 0);height:", ";margin:", ";overflow:hidden;padding:0;position:absolute;width:", ";@media ", "{display:contents;font-weight:", ";color:", ";text-transform:uppercase;text-align:left;}}tbody{tr{display:block;transition-duration:0.3s;&:hover{background-color:", ";td{&.drag-handle{svg{fill:", ";}}&.menu{button{opacity:1;}}}}@media ", "{display:table-row;}}td{border-top:", " solid ", ";height:inherit;min-height:", ";padding:", ";display:flex;justify-content:flex-end;&.drag-handle{> div{width:min-content;}svg{width:", ";height:", ";fill:", ";transition-duration:0.3s;}}> div{margin-left:", ";height:100%;display:flex;justify-content:flex-end;align-items:center;flex-wrap:nowrap;text-align:right;> span{display:none;&:first-child,&:last-child{display:inherit;}}}img{min-width:", ";min-height:", ";}a{display:flex;align-items:center;color:", ";text-decoration-color:", ";}&:first-child{border:0;}&:before{position:absolute;left:", ";content:attr(data-label);font-weight:", ";text-transform:capitalize;}&.kai{svg{float:right;width:auto;min-width:", ";max-height:", ";}}.avatar-img{display:none;}.tag{margin:0;&:not(:first-child){display:none;}}&.menu{padding:0 ", " 0 0;button{margin-top:", ";transition:0.3s;}ul{top:", ";margin-left:", ";}}@media ", "{display:table-cell;height:", ";padding:0 ", ";align-items:center;> div{position:relative;margin-left:0;display:flex-start;justify-content:flex-start;text-align:left;> span{display:inherit;}}&:first-child{border-top:", " solid ", ";}&:before{content:'';}&.kai{max-width:", ";}.avatar-img{display:inherit;}.tag{&:not(:first-child){display:inherit;}&:not(:last-child){margin-right:", ";}}&.menu{width:", ";button{opacity:0;}}}}}"], props => props.border ? '1px' : '0', grey$j, /*#__PURE__*/rem('6px'), props => props.layout, /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('15px'), device.s, /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('1px'), grey$j, /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('15px'), device.s, /*#__PURE__*/rem('1px'), /*#__PURE__*/rem('-1px'), /*#__PURE__*/rem('1px'), device.s, bold$7, grey$j, lightGrey$e, grey$j, device.s, /*#__PURE__*/rem('1px'), grey$j, /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('30px'), /*#__PURE__*/rem('30px'), grey$j, /*#__PURE__*/rem('100px'), /*#__PURE__*/rem('30px'), /*#__PURE__*/rem('30px'), normal$9, grey$j, /*#__PURE__*/rem('15px'), bold$7, /*#__PURE__*/rem('20px'), /*#__PURE__*/rem('20px'), /*#__PURE__*/rem('10px'), /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('36px'), /*#__PURE__*/rem('-170px'), device.s, /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('1px'), grey$j, /*#__PURE__*/rem('100px'), /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('40px'));
+})(["position:relative;width:100%;border-width:", ";border-style:solid;border-color:", ";border-radius:", ";border-spacing:0;white-space:nowrap;table-layout:", ";th,td{height:", ";padding:0 ", ";&.center{text-align:center;> div{justify-content:center;}}&.right{text-align:right;> div{justify-content:flex-end;}}&.thin{@media ", "{max-width:min-content;}}&.kai{text-align:right;> div{justify-content:flex-end;}}&.avatar > div{display:flex;align-items:center;.avatar-img{margin-right:", ";}}}th{font-size:0.85rem;&:first-child{border-top-left-radius:", ";}&:last-child{border-top-right-radius:", ";}}tr{border:", " solid ", ";border-radius:", ";position:relative;&:not(:last-child){margin-bottom:", ";}@media ", "{border:0;}}thead{border:none;clip:rect(0 0 0 0);height:", ";margin:", ";overflow:hidden;padding:0;position:absolute;width:", ";@media ", "{display:contents;font-weight:", ";color:", ";text-transform:uppercase;text-align:left;}}tbody{tr{display:block;transition-duration:0.3s;&:hover{background-color:", ";td{&.drag-handle{svg{fill:", ";}}&.menu{button{opacity:1;}}}}@media ", "{display:table-row;}}td{border-top:", " solid ", ";height:inherit;min-height:", ";padding:", ";display:flex;justify-content:flex-end;&.drag-handle{> div{width:min-content;}svg{width:", ";height:", ";fill:", ";transition-duration:0.3s;}}> div{margin-left:", ";height:100%;display:flex;justify-content:flex-end;align-items:center;flex-wrap:nowrap;text-align:right;> span{display:none;&:first-child,&:last-child{display:inherit;}}}img{min-width:", ";min-height:", ";}a{display:flex;align-items:center;color:", ";text-decoration-color:", ";}&:first-child{border:0;}&:before{position:absolute;left:", ";content:attr(data-label);font-weight:", ";text-transform:capitalize;}&.kai{svg{float:right;width:auto;min-width:", ";max-height:", ";}}.avatar-img{display:none;}.tag{margin:0;&:not(:first-child){display:none;}}&.menu{padding:0 ", " 0 0;button{margin-top:", ";transition:0.3s;}ul{top:", ";margin-left:", ";}}@media ", "{display:table-cell;height:", ";padding:0 ", ";align-items:center;> div{position:relative;margin-left:0;display:flex-start;justify-content:flex-start;text-align:left;> span{display:inherit;}}&:first-child{border-top:", " solid ", ";}&:before{content:'';}&.kai{max-width:", ";}.avatar-img{display:inherit;}.tag{&:not(:first-child){display:inherit;}&:not(:last-child){margin-right:", ";}}&.menu{width:", ";button{opacity:0;}}}}}"], props => props.border ? '1px' : '0', grey$k, /*#__PURE__*/rem('6px'), props => props.layout, /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('15px'), device.s, /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('1px'), grey$k, /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('15px'), device.s, /*#__PURE__*/rem('1px'), /*#__PURE__*/rem('-1px'), /*#__PURE__*/rem('1px'), device.s, bold$7, grey$k, lightGrey$f, grey$k, device.s, /*#__PURE__*/rem('1px'), grey$k, /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('30px'), /*#__PURE__*/rem('30px'), grey$k, /*#__PURE__*/rem('100px'), /*#__PURE__*/rem('30px'), /*#__PURE__*/rem('30px'), normal$a, grey$k, /*#__PURE__*/rem('15px'), bold$7, /*#__PURE__*/rem('20px'), /*#__PURE__*/rem('20px'), /*#__PURE__*/rem('10px'), /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('36px'), /*#__PURE__*/rem('-170px'), device.s, /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('1px'), grey$k, /*#__PURE__*/rem('100px'), /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('40px'));
 const TableRow = /*#__PURE__*/_styled.tr.withConfig({
   displayName: "styles__TableRow",
   componentId: "sc-1p618q0-1"
 })(["&[data-rbd-draggable-id='", "']{position:absolute;display:table;width:100%;}"], props => props.draggableId);
 
 const {
-  light: light$g
+  light: light$h
 } = colors;
 
 const TableDnD = props => {
@@ -2631,12 +2765,12 @@ const TableDnD = props => {
 
   const getItemStyle = (isDragging, draggableStyle) => ({
     userSelect: 'none',
-    background: isDragging ? light$g : 'transparent',
+    background: isDragging ? light$h : 'transparent',
     ...draggableStyle
   });
 
   const getListStyle = isDraggingOver => ({
-    background: isDraggingOver ? light$g : 'transparent'
+    background: isDraggingOver ? light$h : 'transparent'
   });
 
   return (
@@ -2735,14 +2869,14 @@ const TableDnD = props => {
 };
 
 const {
-  normal: normal$a,
-  grey: grey$k,
-  red: red$b
+  normal: normal$b,
+  grey: grey$l,
+  red: red$c
 } = colors;
-const Wrapper$7 = /*#__PURE__*/_styled.div.withConfig({
+const Wrapper$8 = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__Wrapper",
   componentId: "mbja2a-0"
-})(["display:inline-block;> label{margin-bottom:", ";color:", ";span{color:", ";}}&:not(:last-child){margin-bottom:", ";}"], /*#__PURE__*/rem('5px'), props => props.error ? red$b : grey$k, props => props.error ? red$b : normal$a, /*#__PURE__*/rem('15px'));
+})(["display:inline-block;> label{margin-bottom:", ";color:", ";span{color:", ";}}&:not(:last-child){margin-bottom:", ";}"], /*#__PURE__*/rem('5px'), props => props.error ? red$c : grey$l, props => props.error ? red$c : normal$b, /*#__PURE__*/rem('15px'));
 
 const FormGroup = props => {
   const {
@@ -2751,7 +2885,7 @@ const FormGroup = props => {
     error = false,
     children
   } = props;
-  return /*#__PURE__*/React.createElement(Wrapper$7, {
+  return /*#__PURE__*/React.createElement(Wrapper$8, {
     error: error
   }, /*#__PURE__*/React.createElement(Label, {
     value: label,
@@ -2760,14 +2894,14 @@ const FormGroup = props => {
 };
 
 const {
-  grey: grey$l,
-  lightGrey: lightGrey$f,
+  grey: grey$m,
+  lightGrey: lightGrey$g,
   lightRed: lightRed$2
 } = colors;
-const Wrapper$8 = /*#__PURE__*/_styled.div.withConfig({
+const Wrapper$9 = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__Wrapper",
   componentId: "sc-124afcu-0"
-})(["border:", " solid ", ";border-radius:", ";max-width:max-content;height:", ";display:flex;overflow:hidden;button,input{&:disabled{cursor:inherit;background-color:", ";svg{opacity:0.25;}&:hover{pointer-events:none;}}}"], /*#__PURE__*/rem('1px'), grey$l, /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('50px'), lightGrey$f);
+})(["border:", " solid ", ";border-radius:", ";max-width:max-content;height:", ";display:flex;overflow:hidden;button,input{&:disabled{cursor:inherit;background-color:", ";svg{opacity:0.25;}&:hover{pointer-events:none;}}}"], /*#__PURE__*/rem('1px'), grey$m, /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('50px'), lightGrey$g);
 const Input = /*#__PURE__*/_styled.input.withConfig({
   displayName: "styles__Input",
   componentId: "sc-124afcu-1"
@@ -2775,7 +2909,7 @@ const Input = /*#__PURE__*/_styled.input.withConfig({
 const Button$1 = /*#__PURE__*/_styled.button.withConfig({
   displayName: "styles__Button",
   componentId: "sc-124afcu-2"
-})(["width:", ";height:", ";border:0;background-color:", ";cursor:pointer;transition-duration:0.3s;&.remove-button{border-right:", " solid ", ";}&.add-button{border-left:", " solid ", ";}svg{width:auto;height:", ";fill:", ";}&:hover{background-color:", ";}"], /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('50px'), lightGrey$f, /*#__PURE__*/rem('1px'), grey$l, /*#__PURE__*/rem('1px'), grey$l, /*#__PURE__*/rem('20px'), grey$l, lightGrey$f);
+})(["width:", ";height:", ";border:0;background-color:", ";cursor:pointer;transition-duration:0.3s;&.remove-button{border-right:", " solid ", ";}&.add-button{border-left:", " solid ", ";}svg{width:auto;height:", ";fill:", ";}&:hover{background-color:", ";}"], /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('50px'), lightGrey$g, /*#__PURE__*/rem('1px'), grey$m, /*#__PURE__*/rem('1px'), grey$m, /*#__PURE__*/rem('20px'), grey$m, lightGrey$g);
 
 const NumberInputSpinner = props => {
   const {
@@ -2807,7 +2941,7 @@ const NumberInputSpinner = props => {
     setNumber(value);
   };
 
-  return /*#__PURE__*/React.createElement(Wrapper$8, null, /*#__PURE__*/React.createElement(Button$1, {
+  return /*#__PURE__*/React.createElement(Wrapper$9, null, /*#__PURE__*/React.createElement(Button$1, {
     className: "remove-button",
     "aria-label": decreaseAriaLabel,
     onClick: evt => {
@@ -2841,10 +2975,10 @@ const NumberInputSpinner = props => {
 };
 
 const {
-  green: green$9,
-  grey: grey$m,
-  lightGrey: lightGrey$g,
-  light: light$h
+  green: green$a,
+  grey: grey$n,
+  lightGrey: lightGrey$h,
+  light: light$i
 } = colors;
 const Steps = /*#__PURE__*/_styled.ul.withConfig({
   displayName: "styles__Steps",
@@ -2853,7 +2987,7 @@ const Steps = /*#__PURE__*/_styled.ul.withConfig({
 const Step = /*#__PURE__*/_styled.li.withConfig({
   displayName: "styles__Step",
   componentId: "sc-1s2dhfy-1"
-})(["list-style:none;flex:1;position:relative;height:", ";display:flex;justify-content:center;align-items:center;padding-right:", ";text-align:center;&:before,&:after{content:'';position:absolute;top:0;border:0 solid ", ";border-width:", " ", ";width:0;height:0;}&:before{left:", ";border-left-color:transparent;}&:after{left:calc(100% - ", ");border-color:transparent;border-left-color:", ";}&:first-child:before{border:none;}&:last-child:after{border:none;}&:first-child{overflow:hidden;> div{border-radius:", " 0 0 ", ";}}&:last-child{padding-right:0;> div{border-radius:0 ", " ", " 0;}}> div{background-color:", ";width:100%;height:100%;display:flex;justify-content:center;align-items:center;span{width:min-content;font-size:0.75rem;color:", ";@media ", "{width:100%;font-size:1rem;font-weight:700;}}}"], /*#__PURE__*/rem('44px'), /*#__PURE__*/rem('18px'), props => props.active ? green$9 : lightGrey$g, /*#__PURE__*/rem('22px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('-15px'), /*#__PURE__*/rem('18px'), props => props.active ? green$9 : lightGrey$g, /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('6px'), props => props.active ? green$9 : lightGrey$g, props => props.active ? light$h : grey$m, device.s);
+})(["list-style:none;flex:1;position:relative;height:", ";display:flex;justify-content:center;align-items:center;padding-right:", ";text-align:center;&:before,&:after{content:'';position:absolute;top:0;border:0 solid ", ";border-width:", " ", ";width:0;height:0;}&:before{left:", ";border-left-color:transparent;}&:after{left:calc(100% - ", ");border-color:transparent;border-left-color:", ";}&:first-child:before{border:none;}&:last-child:after{border:none;}&:first-child{overflow:hidden;> div{border-radius:", " 0 0 ", ";}}&:last-child{padding-right:0;> div{border-radius:0 ", " ", " 0;}}> div{background-color:", ";width:100%;height:100%;display:flex;justify-content:center;align-items:center;span{width:min-content;font-size:0.75rem;color:", ";@media ", "{width:100%;font-size:1rem;font-weight:700;}}}"], /*#__PURE__*/rem('44px'), /*#__PURE__*/rem('18px'), props => props.active ? green$a : lightGrey$h, /*#__PURE__*/rem('22px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('-15px'), /*#__PURE__*/rem('18px'), props => props.active ? green$a : lightGrey$h, /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('6px'), props => props.active ? green$a : lightGrey$h, props => props.active ? light$i : grey$n, device.s);
 
 const WizardSteps = props => {
   const {
@@ -2874,28 +3008,28 @@ const WizardSteps = props => {
 };
 
 const {
-  light: light$i,
-  green: green$a,
-  darkGreen: darkGreen$5,
-  red: red$c,
+  light: light$j,
+  green: green$b,
+  darkGreen: darkGreen$6,
+  red: red$d,
   darkRed: darkRed$4,
   orange: orange$3,
   darkOrange: darkOrange$2
 } = colors;
-const Wrapper$9 = _styled.div`
+const Wrapper$a = _styled.div`
   --shadow: 0 0 ${/*#__PURE__*/rem('25px')} 0 rgba(40, 40, 40, 0.2);
 
   position: fixed;
   top: ${/*#__PURE__*/rem('15px')};
   right: 0;
-  border: ${/*#__PURE__*/rem('2px')} solid ${darkGreen$5};
+  border: ${/*#__PURE__*/rem('2px')} solid ${darkGreen$6};
   border-radius: ${/*#__PURE__*/rem('6px')};
-  background-color: ${green$a};
+  background-color: ${green$b};
   width: ${/*#__PURE__*/rem('300px')};
   max-height: min-content;
   display: flex;
   padding: ${/*#__PURE__*/rem('15px')};
-  color: ${light$i};
+  color: ${light$j};
   -moz-box-shadow: var(--shadow);
   -webkit-box-shadow: var(--shadow);
   box-shadow: var(--shadow);
@@ -2906,7 +3040,7 @@ const Wrapper$9 = _styled.div`
     background-color: transparent;
 
     svg {
-      fill: ${darkGreen$5};
+      fill: ${darkGreen$6};
     }
   }
 
@@ -2940,7 +3074,7 @@ const Wrapper$9 = _styled.div`
 
   ${props => props.variant === 'red' && css`
       border: ${rem('2px')} solid ${darkRed$4};
-      background-color: ${red$c};
+      background-color: ${red$d};
 
       button {
         svg {
@@ -2973,7 +3107,7 @@ const AlertNotification = props => {
     value,
     children
   } = props;
-  return /*#__PURE__*/React.createElement(Wrapper$9, {
+  return /*#__PURE__*/React.createElement(Wrapper$a, {
     className: className,
     variant: variant
   }, /*#__PURE__*/React.createElement("div", null, value ? /*#__PURE__*/React.createElement("span", null, value) : children), /*#__PURE__*/React.createElement(Button, {
@@ -2984,10 +3118,10 @@ const AlertNotification = props => {
 };
 
 const {
-  normal: normal$b,
-  light: light$j,
+  normal: normal$c,
+  light: light$k,
   blue,
-  lightGrey: lightGrey$h
+  lightGrey: lightGrey$i
 } = colors;
 const {
   bold: bold$8
@@ -3032,7 +3166,7 @@ const PaginationWrapper = _styled.div`
         display: flex;
         justify-content: center;
         align-items: center;
-        color: ${normal$b};
+        color: ${normal$c};
         font-weight: ${bold$8};
         text-decoration: none;
 
@@ -3052,17 +3186,17 @@ const PaginationWrapper = _styled.div`
 
         a {
           background-color: ${blue};
-          color: ${light$j};
+          color: ${light$k};
         }
       }
     }
 
     &.dark {
       a {
-        color: ${lightGrey$h};
+        color: ${lightGrey$i};
 
         &:hover {
-          color: ${light$j};
+          color: ${light$k};
         }
       }
     }
@@ -3121,13 +3255,13 @@ const PaginationControl = props => {
 };
 
 const {
-  normal: normal$c,
-  green: green$b
+  normal: normal$d,
+  green: green$c
 } = colors;
 const {
   bold: bold$9
 } = fontWeight;
-const Wrapper$a = _styled.div`
+const Wrapper$b = _styled.div`
   min-height: ${props => props.variant === 'default' ? '50vh' : 'inherit'};
   display: flex;
   flex-direction: column;
@@ -3144,14 +3278,14 @@ const Wrapper$a = _styled.div`
   > span {
     margin-top: ${/*#__PURE__*/rem('15px')};
     font-weight: ${bold$9};
-    color: ${normal$c};
+    color: ${normal$d};
 
     a {
-      color: ${normal$c};
+      color: ${normal$d};
       transition-duration: 0.3s;
 
       &:hover {
-        color: ${green$b};
+        color: ${green$c};
       }
     }
   }
@@ -3162,7 +3296,7 @@ const Error = props => {
     variant = 'default',
     value
   } = props;
-  return /*#__PURE__*/React.createElement(Wrapper$a, {
+  return /*#__PURE__*/React.createElement(Wrapper$b, {
     variant: variant
   }, variant === 'default' ? /*#__PURE__*/React.createElement(Icon, {
     icon: "warning",
@@ -3171,13 +3305,13 @@ const Error = props => {
 };
 
 const {
-  normal: normal$d,
-  green: green$c
+  normal: normal$e,
+  green: green$d
 } = colors;
 const {
   bold: bold$a
 } = fontWeight;
-const Wrapper$b = _styled.div`
+const Wrapper$c = _styled.div`
   min-height: 50vh;
   display: flex;
   flex-direction: column;
@@ -3194,14 +3328,14 @@ const Wrapper$b = _styled.div`
   > div {
     margin-top: ${/*#__PURE__*/rem('15px')};
     font-weight: ${bold$a};
-    color: ${normal$d};
+    color: ${normal$e};
 
     a {
-      color: ${normal$d};
+      color: ${normal$e};
       transition-duration: 0.3s;
 
       &:hover {
-        color: ${green$c};
+        color: ${green$d};
       }
     }
   }
@@ -5163,20 +5297,20 @@ const DataWarning = props => {
       icon = /*#__PURE__*/React.createElement(IconLoginOnly, null);
   }
 
-  return /*#__PURE__*/React.createElement(Wrapper$b, {
+  return /*#__PURE__*/React.createElement(Wrapper$c, {
     type: type
   }, icon, /*#__PURE__*/React.createElement("div", null, children));
 };
 
 const {
-  normal: normal$e,
-  green: green$d,
-  darkGreen: darkGreen$6,
-  grey: grey$n,
-  lightGrey: lightGrey$i,
-  red: red$d
+  normal: normal$f,
+  green: green$e,
+  darkGreen: darkGreen$7,
+  grey: grey$o,
+  lightGrey: lightGrey$j,
+  red: red$e
 } = colors;
-const Wrapper$c = _styled.ul`
+const Wrapper$d = _styled.ul`
   display: flex;
   flex-direction: ${props => props.type === 'column' ? 'column' : 'row'};
   position: relative;
@@ -5197,11 +5331,11 @@ const Wrapper$c = _styled.ul`
   }
 
   input[type='radio']:checked ~ .check {
-    border-color: ${darkGreen$6};
+    border-color: ${darkGreen$7};
   }
 
   input[type='radio']:checked ~ .check::before {
-    background-color: ${green$d};
+    background-color: ${green$e};
   }
 
   & + span {
@@ -5224,7 +5358,7 @@ const Item = _styled.li`
     padding-left: calc(var(--size) + 5px);
     line-height: var(--size);
     vertical-align: middle;
-    color: ${props => props.error ? red$d : null};
+    color: ${props => props.error ? red$e : null};
     cursor: pointer;
     z-index: 1;
   }
@@ -5232,7 +5366,7 @@ const Item = _styled.li`
   .check {
     position: absolute;
     top: 0;
-    border: ${/*#__PURE__*/rem('2px')} solid ${props => props.error ? red$d : grey$n};
+    border: ${/*#__PURE__*/rem('2px')} solid ${props => props.error ? red$e : grey$o};
     border-radius: 100%;
     width: var(--size);
     height: var(--size);
@@ -5251,21 +5385,21 @@ const Item = _styled.li`
   }
 
   &:hover .check {
-    border-color: ${normal$e};
+    border-color: ${normal$f};
   }
 
   ${props => props.disabled && css`
       label {
-        color: ${grey$n};
+        color: ${grey$o};
       }
 
       input[type='radio'] ~ .check,
       input[type='radio']:checked ~ .check {
-        border-color: ${lightGrey$i};
+        border-color: ${lightGrey$j};
       }
 
       input[type='radio']:checked ~ .check::before {
-        background-color: ${lightGrey$i};
+        background-color: ${lightGrey$j};
       }
 
       &:hover {
@@ -5290,7 +5424,7 @@ const RadioGroup = props => {
   return /*#__PURE__*/React.createElement("div", {
     style: style,
     className: className
-  }, /*#__PURE__*/React.createElement(Wrapper$c, {
+  }, /*#__PURE__*/React.createElement(Wrapper$d, {
     type: type,
     group: group,
     error: error,
@@ -5315,7 +5449,7 @@ const RadioGroup = props => {
   }) : null);
 };
 
-const Wrapper$d = _styled.ul`
+const Wrapper$e = _styled.ul`
   display: flex;
   flex-direction: ${props => props.type === 'column' ? 'column' : 'row'};
   position: relative;
@@ -5348,7 +5482,7 @@ const CheckboxGroup = props => {
     error,
     disabled
   } = props;
-  return /*#__PURE__*/React.createElement(Wrapper$d, {
+  return /*#__PURE__*/React.createElement(Wrapper$e, {
     type: type,
     error: error
   }, children ? children : options && Array.isArray(options) ? options.map((value, index) => /*#__PURE__*/React.createElement("li", {
@@ -5365,15 +5499,15 @@ const CheckboxGroup = props => {
   }) : null);
 };
 
-const Wrapper$e = _styled.div`
+const Wrapper$f = _styled.div`
   label {
     margin-bottom: ${/*#__PURE__*/rem('5px')};
   }
 `;
 const {
-  grey: grey$o,
-  darkGrey: darkGrey$3,
-  light: light$k,
+  grey: grey$p,
+  darkGrey: darkGrey$4,
+  light: light$l,
   purple: purple$6
 } = colors;
 const Field = _styled.div`
@@ -5401,7 +5535,7 @@ const Field = _styled.div`
   button {
     border: 0;
     border-radius: 0 ${/*#__PURE__*/rem('6px')} ${/*#__PURE__*/rem('6px')} 0;
-    background-color: ${grey$o};
+    background-color: ${grey$p};
     min-width: ${/*#__PURE__*/rem('50px')};
     height: ${/*#__PURE__*/rem('50px')};
     display: flex;
@@ -5417,12 +5551,12 @@ const Field = _styled.div`
       width: auto;
       min-width: ${/*#__PURE__*/rem('20px')};
       height: ${/*#__PURE__*/rem('20px')};
-      fill: ${light$k};
+      fill: ${light$l};
       transition: 0.3s;
     }
 
     &:hover {
-      background-color: ${darkGrey$3};
+      background-color: ${darkGrey$4};
     }
 
     &:disabled {
@@ -5430,7 +5564,7 @@ const Field = _styled.div`
       opacity: 0.5;
 
       &:hover {
-        background-color: ${grey$o};
+        background-color: ${grey$p};
         pointer-events: none;
       }
     }
@@ -5454,7 +5588,7 @@ const FieldWidthButton = props => {
     buttonAction,
     buttonDisabled
   } = props;
-  return /*#__PURE__*/React.createElement(Wrapper$e, null, label && /*#__PURE__*/React.createElement(Label, {
+  return /*#__PURE__*/React.createElement(Wrapper$f, null, label && /*#__PURE__*/React.createElement(Label, {
     value: label
   }), /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(TextField, {
     minimal: false,
@@ -5476,23 +5610,23 @@ const FieldWidthButton = props => {
 };
 
 const {
-  normal: normal$f,
+  normal: normal$g,
   purple: purple$7,
-  grey: grey$p,
-  lightGrey: lightGrey$j,
-  light: light$l
+  grey: grey$q,
+  lightGrey: lightGrey$k,
+  light: light$m
 } = colors;
 const {
   bold: bold$b
 } = fontWeight;
-const Wrapper$f = /*#__PURE__*/_styled.div.withConfig({
+const Wrapper$g = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__Wrapper",
   componentId: "znznmm-0"
-})(["display:flex;align-items:center;ul.menu{width:0;animation:showAnimation 1s forwards;animation-delay:0.5s;overflow:hidden;}@keyframes showAnimation{0%{width:0%;}100%{width:100%;}}ul{margin:0;max-width:max-content;padding:0;&.menu{display:flex;li:not(:last-child){margin-right:", ";}}li{position:relative;list-style:none;a{display:flex;align-items:center;padding:", ";color:", ";text-transform:capitalize;text-decoration:none;white-space:nowrap;transition-duration:0.3s;svg{margin-right:", ";width:auto;height:", ";min-width:", ";fill:", ";transition-duration:0.3s;}&:hover{color:", ";svg{fill:", ";}}}&.active{font-weight:", ";a{pointer-events:none;svg{fill:", ";}}}}}"], /*#__PURE__*/rem('10px'), /*#__PURE__*/rem('10px'), normal$f, /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('24px'), /*#__PURE__*/rem('24px'), grey$p, props => props.customColor ? props.customColor : purple$7, props => props.customColor ? props.customColor : purple$7, bold$b, props => props.customColor ? props.customColor : purple$7);
+})(["display:flex;align-items:center;ul.menu{width:0;animation:showAnimation 1s forwards;animation-delay:0.5s;overflow:hidden;}@keyframes showAnimation{0%{width:0%;}100%{width:100%;}}ul{margin:0;max-width:max-content;padding:0;&.menu{display:flex;li:not(:last-child){margin-right:", ";}}li{position:relative;list-style:none;a{display:flex;align-items:center;padding:", ";color:", ";text-transform:capitalize;text-decoration:none;white-space:nowrap;transition-duration:0.3s;svg{margin-right:", ";width:auto;height:", ";min-width:", ";fill:", ";transition-duration:0.3s;}&:hover{color:", ";svg{fill:", ";}}}&.active{font-weight:", ";a{pointer-events:none;svg{fill:", ";}}}}}"], /*#__PURE__*/rem('10px'), /*#__PURE__*/rem('10px'), normal$g, /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('24px'), /*#__PURE__*/rem('24px'), grey$q, props => props.customColor ? props.customColor : purple$7, props => props.customColor ? props.customColor : purple$7, bold$b, props => props.customColor ? props.customColor : purple$7);
 const More = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__More",
   componentId: "znznmm-1"
-})(["position:relative;display:none;&.hide{display:initial;}ul{position:absolute;right:0;border:", " solid ", ";border-radius:", ";background-color:", ";margin-top:", ";padding:0;-moz-box-shadow:0 0 ", " 0 rgba(40,40,40,0.2);-webkit-box-shadow:0 0 ", " 0 rgba(40,40,40,0.2);box-shadow:0 0 ", " 0 rgba(40,40,40,0.2);z-index:1;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;&.more{display:none;}&.is-open{display:inherit;}li{list-style:none;transition-duration:0.3s;&:hover{background-color:", ";cursor:pointer;a{color:", ";svg{fill:", ";}}}&:first-child{border-radius:", " ", " 0 0;}&:last-child{border-radius:0 0 ", " ", ";}a{width:100%;height:100%;padding:", ";}}}"], /*#__PURE__*/rem('1px'), lightGrey$j, /*#__PURE__*/rem('4px'), light$l, /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('15px'), lightGrey$j, normal$f, normal$f, /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('15px'));
+})(["position:relative;display:none;&.hide{display:initial;}ul{position:absolute;right:0;border:", " solid ", ";border-radius:", ";background-color:", ";margin-top:", ";padding:0;-moz-box-shadow:0 0 ", " 0 rgba(40,40,40,0.2);-webkit-box-shadow:0 0 ", " 0 rgba(40,40,40,0.2);box-shadow:0 0 ", " 0 rgba(40,40,40,0.2);z-index:1;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;&.more{display:none;}&.is-open{display:inherit;}li{list-style:none;transition-duration:0.3s;&:hover{background-color:", ";cursor:pointer;a{color:", ";svg{fill:", ";}}}&:first-child{border-radius:", " ", " 0 0;}&:last-child{border-radius:0 0 ", " ", ";}a{width:100%;height:100%;padding:", ";}}}"], /*#__PURE__*/rem('1px'), lightGrey$k, /*#__PURE__*/rem('4px'), light$m, /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('15px'), lightGrey$k, normal$g, normal$g, /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('15px'));
 
 const HorizontalNav = props => {
   const [showMore, setShowMore] = useState(false);
@@ -5546,7 +5680,7 @@ const HorizontalNav = props => {
 
     return;
   }, [ref]);
-  return /*#__PURE__*/React.createElement(Wrapper$f, {
+  return /*#__PURE__*/React.createElement(Wrapper$g, {
     ref: ref,
     className: className,
     customColor: customColor
@@ -5569,7 +5703,7 @@ const HorizontalNav = props => {
 };
 
 const {
-  light: light$m
+  light: light$n
 } = colors;
 const {
   bold: bold$c
@@ -5585,11 +5719,11 @@ const ModalWrapper = /*#__PURE__*/_styled.div.withConfig({
 const ModalContainer = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__ModalContainer",
   componentId: "sc-16r6vcc-2"
-})(["position:relative;background:", ";width:100%;min-height:0;padding:", ";word-wrap:break-word;transition-duration:0.3s;@media ", "{--spacing:", ";margin:var(--spacing);border-radius:", ";max-width:", ";padding:var(--spacing);&:after{content:'';position:absolute;bottom:calc(var(--spacing) * -1);width:", ";height:var(--spacing);}}"], light$m, /*#__PURE__*/rem('15px'), device.s, /*#__PURE__*/rem('30px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('860px'), /*#__PURE__*/rem('1px'));
+})(["position:relative;background:", ";width:100%;min-height:0;padding:", ";word-wrap:break-word;transition-duration:0.3s;@media ", "{--spacing:", ";margin:var(--spacing);border-radius:", ";max-width:", ";padding:var(--spacing);&:after{content:'';position:absolute;bottom:calc(var(--spacing) * -1);width:", ";height:var(--spacing);}}"], light$n, /*#__PURE__*/rem('15px'), device.s, /*#__PURE__*/rem('30px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('860px'), /*#__PURE__*/rem('1px'));
 const ModalHeader = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__ModalHeader",
   componentId: "sc-16r6vcc-3"
-})(["display:flex;h2{margin:0 0 ", " 0;font-size:2rem;font-weight:", ";}button{display:none;position:absolute;top:0;right:0;margin:", " ", " 0 0;background-color:", ";z-index:1;&:hover{background-color:", ";}@media ", "{display:inherit;}}"], /*#__PURE__*/rem('30px'), bold$c, /*#__PURE__*/rem('-18px'), /*#__PURE__*/rem('-18px'), light$m, light$m, device.s);
+})(["display:flex;h2{margin:0 0 ", " 0;font-size:2rem;font-weight:", ";}button{display:none;position:absolute;top:0;right:0;margin:", " ", " 0 0;background-color:", ";z-index:1;&:hover{background-color:", ";}@media ", "{display:inherit;}}"], /*#__PURE__*/rem('30px'), bold$c, /*#__PURE__*/rem('-18px'), /*#__PURE__*/rem('-18px'), light$n, light$n, device.s);
 
 const Modal = props => {
   const {
@@ -5640,7 +5774,7 @@ const Modal = props => {
 };
 
 const {
-  light: light$n
+  light: light$o
 } = colors;
 const {
   bold: bold$d
@@ -5665,7 +5799,7 @@ const ModalWrapper$1 = /*#__PURE__*/_styled.div.withConfig({
 const ModalContainer$1 = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__ModalContainer",
   componentId: "sc-46huls-2"
-})(["position:absolute;right:0;background:", ";width:100%;min-height:100vh;display:flex;flex-direction:column;padding:", ";word-wrap:break-word;animation-timing-function:", ";animation-duration:1s;animation-fill-mode:forwards;transform:translate3d(100%,0,0);animation-name:", ";@media ", "{max-width:", ";padding:", ";}"], light$n, /*#__PURE__*/rem('15px'), /*#__PURE__*/timingFunctions('easeOutQuint'), slideInLeft, device.s, /*#__PURE__*/rem('400px'), /*#__PURE__*/rem('30px'));
+})(["position:absolute;right:0;background:", ";width:100%;min-height:100vh;display:flex;flex-direction:column;padding:", ";word-wrap:break-word;animation-timing-function:", ";animation-duration:1s;animation-fill-mode:forwards;transform:translate3d(100%,0,0);animation-name:", ";@media ", "{max-width:", ";padding:", ";}"], light$o, /*#__PURE__*/rem('15px'), /*#__PURE__*/timingFunctions('easeOutQuint'), slideInLeft, device.s, /*#__PURE__*/rem('400px'), /*#__PURE__*/rem('30px'));
 const ModalHeader$1 = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__ModalHeader",
   componentId: "sc-46huls-3"
@@ -5703,9 +5837,9 @@ const ModalDrawer = props => {
 };
 
 const {
-  lightGrey: lightGrey$k
+  lightGrey: lightGrey$l
 } = colors;
-const Wrapper$g = _styled.div`
+const Wrapper$h = _styled.div`
   div {
     width: 100%;
     height: 100%;
@@ -5766,7 +5900,7 @@ const Wrapper$g = _styled.div`
 
   .card {
     position: relative;
-    border: ${/*#__PURE__*/rem('2px')} solid ${lightGrey$k};
+    border: ${/*#__PURE__*/rem('2px')} solid ${lightGrey$l};
     border-radius: ${/*#__PURE__*/rem('6px')};
     width: ${/*#__PURE__*/rem('300px')};
     overflow: hidden;
@@ -5781,7 +5915,7 @@ const Wrapper$g = _styled.div`
       margin: ${/*#__PURE__*/rem('-45px')} 0 0 ${/*#__PURE__*/rem('20px')};
       width: ${/*#__PURE__*/rem('90px')};
       height: ${/*#__PURE__*/rem('90px')};
-      border: ${/*#__PURE__*/rem('1px')} solid ${lightGrey$k};
+      border: ${/*#__PURE__*/rem('1px')} solid ${lightGrey$l};
       border-radius: 999px;
     }
 
@@ -5920,32 +6054,32 @@ const LoadingState = props => {
       }), paragraphs));
   }
 
-  return /*#__PURE__*/React.createElement(Wrapper$g, {
+  return /*#__PURE__*/React.createElement(Wrapper$h, {
     type: type
   }, loadingType);
 };
 
 const {
-  normal: normal$g,
-  grey: grey$q,
-  lightGrey: lightGrey$l,
-  light: light$o
+  normal: normal$h,
+  grey: grey$r,
+  lightGrey: lightGrey$m,
+  light: light$p
 } = colors;
-const Wrapper$h = _styled.div`
+const Wrapper$i = _styled.div`
   .tab {
-    border-color: ${lightGrey$l};
+    border-color: ${lightGrey$m};
 
     &[aria-selected='true'] {
       border-bottom: 0;
     }
 
     &[aria-selected='false'] {
-      background-color: ${lightGrey$l};
-      color: ${grey$q};
+      background-color: ${lightGrey$m};
+      color: ${grey$r};
       transition-duration: 0.3s;
 
       &:hover {
-        color: ${normal$g};
+        color: ${normal$h};
       }
     }
 
@@ -5960,8 +6094,8 @@ const Wrapper$h = _styled.div`
 
   .panel {
     border-radius: 0 ${/*#__PURE__*/rem('6px')} ${/*#__PURE__*/rem('6px')} ${/*#__PURE__*/rem('6px')};
-    border-color: ${lightGrey$l};
-    background-color: ${light$o};
+    border-color: ${lightGrey$m};
+    background-color: ${light$p};
     padding: ${/*#__PURE__*/rem('30px')};
   }
 
@@ -5981,7 +6115,7 @@ const Wrapper$h = _styled.div`
   .RRT__tab {
     background: #eee;
     border-style: solid;
-    border-color: ${/*#__PURE__*/lighten(0.25, grey$q)};
+    border-color: ${/*#__PURE__*/lighten(0.25, grey$r)};
     border-width: ${/*#__PURE__*/rem('1px')} ${/*#__PURE__*/rem('1px')} ${/*#__PURE__*/rem('1px')} 0;
     cursor: pointer;
     z-index: 1;
@@ -5991,7 +6125,7 @@ const Wrapper$h = _styled.div`
 
   .RRT__tab:focus {
     outline: 0;
-    background-color: ${/*#__PURE__*/lighten(0.25, grey$q)};
+    background-color: ${/*#__PURE__*/lighten(0.25, grey$r)};
   }
 
   .RRT__accordion .RRT__tab {
@@ -6003,12 +6137,12 @@ const Wrapper$h = _styled.div`
   }
 
   .RRT__tab--selected {
-    background: ${light$o};
-    border-color: ${/*#__PURE__*/lighten(0.25, grey$q)} ${/*#__PURE__*/lighten(0.25, grey$q)} ${light$o};
+    background: ${light$p};
+    border-color: ${/*#__PURE__*/lighten(0.25, grey$r)} ${/*#__PURE__*/lighten(0.25, grey$r)} ${light$p};
   }
 
   .RRT__tab--selected:focus {
-    background-color: ${light$o};
+    background-color: ${light$p};
   }
 
   .RRT__tab--disabled {
@@ -6038,7 +6172,7 @@ const Wrapper$h = _styled.div`
   .RRT__panel {
     margin-top: ${/*#__PURE__*/rem('-1px')};
     padding: 1em;
-    border: ${/*#__PURE__*/rem('1px')} solid ${/*#__PURE__*/lighten(0.25, grey$q)};
+    border: ${/*#__PURE__*/rem('1px')} solid ${/*#__PURE__*/lighten(0.25, grey$r)};
   }
 
   .RRT__panel--hidden {
@@ -6050,8 +6184,8 @@ const Wrapper$h = _styled.div`
   }
 
   .RRT__showmore {
-    background: ${lightGrey$l};
-    border: ${/*#__PURE__*/rem('1px')} solid ${/*#__PURE__*/lighten(0.25, grey$q)};
+    background: ${lightGrey$m};
+    border: ${/*#__PURE__*/rem('1px')} solid ${/*#__PURE__*/lighten(0.25, grey$r)};
     border-radius: 0 ${/*#__PURE__*/rem('6px')} 0 0;
     cursor: pointer;
     z-index: 1;
@@ -6061,7 +6195,7 @@ const Wrapper$h = _styled.div`
   }
 
   .RRT__showmore--selected {
-    background: ${light$o};
+    background: ${light$p};
     border-bottom: none;
   }
 
@@ -6072,7 +6206,7 @@ const Wrapper$h = _styled.div`
   }
 
   .RRT__showmore-label--selected {
-    background-color: ${/*#__PURE__*/lighten(0.25, grey$q)};
+    background-color: ${/*#__PURE__*/lighten(0.25, grey$r)};
   }
 
   .RRT__showmore-list {
@@ -6110,7 +6244,7 @@ const TabsPanel = props => {
     }));
   };
 
-  return /*#__PURE__*/React.createElement(Wrapper$h, null, /*#__PURE__*/React.createElement(Tabs, {
+  return /*#__PURE__*/React.createElement(Wrapper$i, null, /*#__PURE__*/React.createElement(Tabs, {
     transform: false,
     unmountOnExit: unmountOnExit,
     selectedTabKey: selectedTabKey,
@@ -6120,7 +6254,7 @@ const TabsPanel = props => {
   }));
 };
 
-const Wrapper$i = _styled.div`
+const Wrapper$j = _styled.div`
   display: flex;
   flex-direction: column;
 `;
@@ -6140,7 +6274,7 @@ const TabsPanel$1 = props => {
     className = 'grid-container',
     children
   } = props;
-  return /*#__PURE__*/React.createElement(Wrapper$i, {
+  return /*#__PURE__*/React.createElement(Wrapper$j, {
     className: className
   }, children);
 };
@@ -6167,5 +6301,5 @@ const GridCol$1 = props => {
   }, children);
 };
 
-export { ActionsMenu, AlertNotification, AvatarImage, Button, ButtonDropdown, ButtonLink, CardValue, Checkbox, CheckboxButton, CheckboxGroup, DataWarning, EmptyTable, Error, ErrorField, FieldWidthButton, FormGroup, GridCol$1 as GridCol, TabsPanel$1 as GridContainer, GridRow$1 as GridRow, HorizontalNav, Icon, Label, LoadingState, Modal, ModalDrawer, ModalFooter, NoteCard, NumberInputSpinner, PaginationControl, ProgressBar, RadioGroup, Select, SelectInteractive, Slideshow, Spinner, Table$1 as Table, TableDnD, TabsPanel, Tag, TagNumber, TextArea, TextField, TextFieldAppendix, Toggle, TruncateLine, VideoPlayer, WizardSteps };
+export { ActionsMenu, AlertNotification, AvatarImage, Button, ButtonDropdown, ButtonLink, CardValue, Checkbox, CheckboxButton, CheckboxGroup, DataWarning, EmptyTable, Error, ErrorField, FieldWidthButton, FilePicker, FormGroup, GridCol$1 as GridCol, TabsPanel$1 as GridContainer, GridRow$1 as GridRow, HorizontalNav, Icon, Label, LoadingState, Modal, ModalDrawer, ModalFooter, NoteCard, NumberInputSpinner, PaginationControl, ProgressBar, RadioGroup, Select, SelectInteractive, Slideshow, Spinner, Table$1 as Table, TableDnD, TabsPanel, Tag, TagNumber, TextArea, TextField, TextFieldAppendix, Toggle, TruncateLine, VideoPlayer, WizardSteps };
 //# sourceMappingURL=rocket-kit.esm.js.map