@taikai/rocket-kit 2.0.0 → 2.0.1

package/dist/rocket-kit.esm.js

@@ -1246,6 +1246,7 @@ const {
   normal: normal$6,
   light: light$9,
   grey: grey$d,
+  lightGrey: lightGrey$8,
   purple: purple$5,
   lightPurple
 } = colors;
@@ -1362,55 +1363,83 @@ const SelectWrapper = _styled.div`
       transition-duration: 0.3s;
     }
   }
-`;
 
-const SelectInteractive = props => {
-  const {
-    name,
-    multi = false,
-    search = true,
-    placeholder,
-    options,
-    value,
-    clear = true,
-    onChange = () => {},
-    onInputChange = () => {},
-    error,
-    disabled = false,
-    dataTestId
-  } = props;
-  const {
-    Option
-  } = components;
-
-  const CustomSelectOption = (props, commonProps) => /*#__PURE__*/React.createElement(Option, Object.assign({}, props, commonProps), props.data.icon ? /*#__PURE__*/React.createElement(Icon, {
-    icon: props.data.icon
-  }) : props.data.customImage ? props.data.customImage : null, props.data.label);
+  .select__option--is-disabled {
+    pointer-events: none;
+  }
+`;
+const SelectGroupLabel = _styled.span`
+  font-size: ${/*#__PURE__*/rem('12px')};
+  color: ${lightGrey$8};
 
-  const CustomSelectValue = props => /*#__PURE__*/React.createElement("div", null, props.data.icon ? /*#__PURE__*/React.createElement(Icon, {
-    icon: props.data.icon
-  }) : props.data.customImage ? props.data.customImage : null, props.data.label);
+  + .tag {
+    border-color: ${lightGrey$8};
+    background-color: ${lightGrey$8};
+    color: ${grey$d};
+  }
+`;
 
-  return /*#__PURE__*/React.createElement(SelectWrapper, {
-    "data-testid": dataTestId
-  }, /*#__PURE__*/React.createElement(Select$1, {
-    className: "select-interactive",
-    classNamePrefix: "select",
+const {
+  Option
+} = components;
+const FormatGroupLabel = ({
+  label,
+  options
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between'
+    }
+  }, /*#__PURE__*/React.createElement(SelectGroupLabel, {
+    className: "selective-options-group-label"
+  }, label), /*#__PURE__*/React.createElement(Tag, {
+    value: `${options == null ? void 0 : options.length}`
+  }));
+};
+const CustomSelectOption = (props, commonProps) => /*#__PURE__*/React.createElement(Option, Object.assign({}, props, commonProps), props.data.icon ? /*#__PURE__*/React.createElement(Icon, {
+  icon: props.data.icon
+}) : props.data.customImage ? props.data.customImage : null, props.data.label);
+const CustomSelectValue = props => /*#__PURE__*/React.createElement("div", null, props.data.icon ? /*#__PURE__*/React.createElement(Icon, {
+  icon: props.data.icon
+}) : props.data.customImage ? props.data.customImage : null, props.data.label);
+
+const SelectInteractive = ({
+  name,
+  multi = false,
+  search = true,
+  placeholder,
+  options,
+  value,
+  clear = true,
+  error,
+  disabled = false,
+  formatGroupLabel = true,
+  onChange = () => {},
+  onInputChange = () => {},
+  ...rest
+}) => {
+  return /*#__PURE__*/React.createElement(SelectWrapper, Object.assign({}, rest), /*#__PURE__*/React.createElement(Select$1, {
     name: name,
+    value: value,
     isMulti: multi,
-    isSearchable: search,
-    isDisabled: disabled,
-    placeholder: placeholder,
     options: options,
-    value: value,
     isClearable: clear,
-    onChange: onChange,
+    isDisabled: disabled,
+    isSearchable: search,
+    classNamePrefix: "select",
+    placeholder: placeholder,
+    className: "select-interactive",
+    // @ts-ignore
+    onChange: e => onChange(e != null ? e : []),
     defaultMenuIsOpen: false,
     onInputChange: onInputChange,
     components: {
       Option: CustomSelectOption,
       SingleValue: CustomSelectValue
-    }
+    },
+    formatGroupLabel: s => formatGroupLabel ? FormatGroupLabel == null ? void 0 : FormatGroupLabel(s) : undefined
   }), error ? /*#__PURE__*/React.createElement(ErrorField, {
     error: error
   }) : null);
@@ -1419,7 +1448,7 @@ const SelectInteractive = props => {
 const {
   normal: normal$7,
   grey: grey$e,
-  lightGrey: lightGrey$8,
+  lightGrey: lightGrey$9,
   red: red$8,
   lightRed
 } = colors;
@@ -1445,7 +1474,7 @@ const Appendix = _styled.div`
   border-width: ${props => props.position === 'left' ? `0 ${rem('1px')} 0 0` : `0 0 0 ${rem('1px')}`};
   border-style: solid;
   border-color: ${props => props.error ? red$8 : grey$e};
-  background-color: ${props => props.error ? lightRed : lightGrey$8};
+  background-color: ${props => props.error ? lightRed : lightGrey$9};
   padding: 0 ${/*#__PURE__*/rem('15px')};
   color: ${props => props.error ? red$8 : grey$e};
   line-height: ${/*#__PURE__*/rem('48px')};
@@ -1946,7 +1975,7 @@ const VideoPlayer = props => {
 };
 
 const {
-  lightGrey: lightGrey$9,
+  lightGrey: lightGrey$a,
   green: green$6
 } = colors;
 const {
@@ -1959,7 +1988,7 @@ const Wrapper$5 = _styled.div`
 const Bar = _styled.div`
   flex: 1;
   border-radius: 999px;
-  background-color: ${lightGrey$9};
+  background-color: ${lightGrey$a};
   height: ${/*#__PURE__*/rem('10px')};
   overflow: hidden;
 `;
@@ -1989,7 +2018,7 @@ const ProgressBar = props => {
 const {
   light: light$b,
   green: green$7,
-  lightGrey: lightGrey$a
+  lightGrey: lightGrey$b
 } = colors;
 const Switcher = _styled.fieldset`
   margin: 0;
@@ -2048,7 +2077,7 @@ const Switcher = _styled.fieldset`
         }
 
         &.switch-off:checked ~ .bg {
-          background-color: ${lightGrey$a};
+          background-color: ${lightGrey$b};
         }
       }
 
@@ -2076,7 +2105,7 @@ const Switcher = _styled.fieldset`
         border-radius: 999px;
         background-color: transparent;
         transition: all 0.3s ease-out;
-        background-color: ${lightGrey$a};
+        background-color: ${lightGrey$b};
       }
     }
   }
@@ -2166,7 +2195,7 @@ const Toggle = ({
 const {
   red: red$9,
   grey: grey$f,
-  lightGrey: lightGrey$b,
+  lightGrey: lightGrey$c,
   darkGrey: darkGrey$2,
   green: green$8,
   darkGreen: darkGreen$4,
@@ -2189,7 +2218,7 @@ const Wrapper$6 = _styled.div`
     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'};
+    background-color: ${props => props.disabled ? lightGrey$c : 'transparent'};
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -2217,7 +2246,7 @@ const Wrapper$6 = _styled.div`
 
       &.button {
         border-left: ${props => props.minimal ? 0 : `${rem('1px')} solid ${grey$f}`};
-        background-color: ${props => props.minimal ? 'transparent' : props.disabled ? lightGrey$b : green$8};
+        background-color: ${props => props.minimal ? 'transparent' : props.disabled ? lightGrey$c : 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};
@@ -2300,7 +2329,7 @@ const FilePicker = props => {
 const {
   normal: normal$9,
   light: light$d,
-  lightGrey: lightGrey$c,
+  lightGrey: lightGrey$d,
   red: red$a
 } = colors;
 const ActionsMenuStyle$1 = /*#__PURE__*/_styled.div.withConfig({
@@ -2310,11 +2339,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$c, /*#__PURE__*/rem('4px'), light$d, /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('200px'), /*#__PURE__*/rem('250px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/lighten(0.7, normal$9), /*#__PURE__*/rem('15px'), /*#__PURE__*/lighten(0.7, normal$9), /*#__PURE__*/rem('15px'), /*#__PURE__*/lighten(0.7, normal$9), 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$d, /*#__PURE__*/rem('4px'), light$d, /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('200px'), /*#__PURE__*/rem('250px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/lighten(0.7, normal$9), /*#__PURE__*/rem('15px'), /*#__PURE__*/lighten(0.7, normal$9), /*#__PURE__*/rem('15px'), /*#__PURE__*/lighten(0.7, normal$9), 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$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$9);
+    `, /*#__PURE__*/rem('45px'), lightGrey$d, /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('1px'), lightGrey$d, red$a, lightGrey$d, /*#__PURE__*/rem('20px'), normal$9);
 
 const ActionMenuList = props => {
   const {
@@ -2517,7 +2546,7 @@ const {
   lightGreen,
   darkGreen: darkGreen$5,
   grey: grey$i,
-  lightGrey: lightGrey$d,
+  lightGrey: lightGrey$e,
   darkGrey: darkGrey$3,
   red: red$b,
   lightRed: lightRed$1,
@@ -2526,9 +2555,9 @@ const {
 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$i, lightGrey$d, darkGrey$3, props => props.color === 'grey' && css`
+})(["--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$e, darkGrey$3, props => props.color === 'grey' && css`
       --default: ${grey$i};
-      --light: ${lightGrey$d};
+      --light: ${lightGrey$e};
       --dark: ${darkGrey$3};
     `, props => props.color === 'green' && css`
       --default: ${green$9};
@@ -2599,7 +2628,7 @@ const {
   normal: normal$a,
   light: light$g,
   grey: grey$j,
-  lightGrey: lightGrey$e
+  lightGrey: lightGrey$f
 } = colors;
 const {
   bold: bold$7
@@ -2615,7 +2644,7 @@ const OverflowWrapper = /*#__PURE__*/_styled.div.withConfig({
 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$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$7, 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$a, 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'));
+})(["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$7, grey$j, lightGrey$f, device.s, /*#__PURE__*/rem('1px'), grey$j, /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('100px'), /*#__PURE__*/rem('30px'), /*#__PURE__*/rem('30px'), normal$a, 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'));
 
 const Table$1 = props => {
   const {
@@ -2717,7 +2746,7 @@ const Table$1 = props => {
 const {
   normal: normal$b,
   grey: grey$k,
-  lightGrey: lightGrey$f
+  lightGrey: lightGrey$g
 } = colors;
 const {
   bold: bold$8
@@ -2725,7 +2754,7 @@ 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$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$8, 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$b, grey$k, /*#__PURE__*/rem('15px'), bold$8, /*#__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'));
+})(["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$8, grey$k, lightGrey$g, 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$b, grey$k, /*#__PURE__*/rem('15px'), bold$8, /*#__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"
@@ -2917,13 +2946,13 @@ const FormGroup = props => {
 
 const {
   grey: grey$m,
-  lightGrey: lightGrey$g,
+  lightGrey: lightGrey$h,
   lightRed: lightRed$2
 } = colors;
 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$m, /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('50px'), lightGrey$g);
+})(["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$h);
 const Input = /*#__PURE__*/_styled.input.withConfig({
   displayName: "styles__Input",
   componentId: "sc-124afcu-1"
@@ -2931,7 +2960,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$g, /*#__PURE__*/rem('1px'), grey$m, /*#__PURE__*/rem('1px'), grey$m, /*#__PURE__*/rem('20px'), grey$m, lightGrey$g);
+})(["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$h, /*#__PURE__*/rem('1px'), grey$m, /*#__PURE__*/rem('1px'), grey$m, /*#__PURE__*/rem('20px'), grey$m, lightGrey$h);
 
 const NumberInputSpinner = props => {
   const {
@@ -2999,7 +3028,7 @@ const NumberInputSpinner = props => {
 const {
   green: green$a,
   grey: grey$n,
-  lightGrey: lightGrey$h,
+  lightGrey: lightGrey$i,
   light: light$i
 } = colors;
 const Steps = /*#__PURE__*/_styled.ul.withConfig({
@@ -3009,7 +3038,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$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);
+})(["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$i, /*#__PURE__*/rem('22px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('-15px'), /*#__PURE__*/rem('18px'), props => props.active ? green$a : lightGrey$i, /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('6px'), props => props.active ? green$a : lightGrey$i, props => props.active ? light$i : grey$n, device.s);
 
 const WizardSteps = props => {
   const {
@@ -3143,7 +3172,7 @@ const {
   normal: normal$d,
   light: light$k,
   blue: blue$2,
-  lightGrey: lightGrey$i
+  lightGrey: lightGrey$j
 } = colors;
 const {
   bold: bold$9
@@ -3215,7 +3244,7 @@ const PaginationWrapper = _styled.div`
 
     &.dark {
       a {
-        color: ${lightGrey$i};
+        color: ${lightGrey$j};
 
         &:hover {
           color: ${light$k};
@@ -5329,7 +5358,7 @@ const {
   green: green$e,
   darkGreen: darkGreen$7,
   grey: grey$o,
-  lightGrey: lightGrey$j,
+  lightGrey: lightGrey$k,
   red: red$e
 } = colors;
 const Wrapper$d = _styled.ul`
@@ -5417,11 +5446,11 @@ const Item = _styled.li`
 
       input[type='radio'] ~ .check,
       input[type='radio']:checked ~ .check {
-        border-color: ${lightGrey$j};
+        border-color: ${lightGrey$k};
       }
 
       input[type='radio']:checked ~ .check::before {
-        background-color: ${lightGrey$j};
+        background-color: ${lightGrey$k};
       }
 
       &:hover {
@@ -5635,7 +5664,7 @@ const {
   normal: normal$h,
   purple: purple$7,
   grey: grey$q,
-  lightGrey: lightGrey$k,
+  lightGrey: lightGrey$l,
   light: light$m
 } = colors;
 const {
@@ -5648,7 +5677,7 @@ const Wrapper$g = /*#__PURE__*/_styled.div.withConfig({
 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$k, /*#__PURE__*/rem('4px'), light$m, /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('15px'), lightGrey$k, normal$h, normal$h, /*#__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$l, /*#__PURE__*/rem('4px'), light$m, /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('15px'), lightGrey$l, normal$h, normal$h, /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('15px'));
 
 const HorizontalNav = props => {
   const [showMore, setShowMore] = useState(false);
@@ -5803,11 +5832,11 @@ const {
 } = fontWeight;
 const slideInLeft = keyframes`
   from {
-    transform: translate3d(100%, 0, 0);
+    transform: translateX(100%);
   }
 
   to {
-    transform: translate3d(0, 0, 0);
+    transform: translateX(0);
   }
 `;
 const ModalOverlay$1 = /*#__PURE__*/_styled.div.withConfig({
@@ -5821,7 +5850,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$o, /*#__PURE__*/rem('15px'), /*#__PURE__*/timingFunctions('easeOutQuint'), slideInLeft, device.s, /*#__PURE__*/rem('400px'), /*#__PURE__*/rem('30px'));
+})(["position:fixed;right:0;background:", ";width:100%;height:100vh;display:flex;flex-direction:column;padding:", ";word-wrap:break-word;animation-timing-function:", ";animation-duration:1s;animation-fill-mode:forwards;transform:translateX(100%);animation-name:", ";overflow-y:auto;@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"
@@ -5859,7 +5888,7 @@ const ModalDrawer = props => {
 };
 
 const {
-  lightGrey: lightGrey$l
+  lightGrey: lightGrey$m
 } = colors;
 const Wrapper$h = _styled.div`
   div {
@@ -5922,7 +5951,7 @@ const Wrapper$h = _styled.div`
 
   .card {
     position: relative;
-    border: ${/*#__PURE__*/rem('2px')} solid ${lightGrey$l};
+    border: ${/*#__PURE__*/rem('2px')} solid ${lightGrey$m};
     border-radius: ${/*#__PURE__*/rem('6px')};
     width: ${/*#__PURE__*/rem('300px')};
     overflow: hidden;
@@ -5937,7 +5966,7 @@ const Wrapper$h = _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$l};
+      border: ${/*#__PURE__*/rem('1px')} solid ${lightGrey$m};
       border-radius: 999px;
     }
 
@@ -6084,19 +6113,19 @@ const LoadingState = props => {
 const {
   normal: normal$i,
   grey: grey$r,
-  lightGrey: lightGrey$m,
+  lightGrey: lightGrey$n,
   light: light$p
 } = colors;
 const Wrapper$i = _styled.div`
   .tab {
-    border-color: ${lightGrey$m};
+    border-color: ${lightGrey$n};
 
     &[aria-selected='true'] {
       border-bottom: 0;
     }
 
     &[aria-selected='false'] {
-      background-color: ${lightGrey$m};
+      background-color: ${lightGrey$n};
       color: ${grey$r};
       transition-duration: 0.3s;
 
@@ -6116,7 +6145,7 @@ const Wrapper$i = _styled.div`
 
   .panel {
     border-radius: 0 ${/*#__PURE__*/rem('6px')} ${/*#__PURE__*/rem('6px')} ${/*#__PURE__*/rem('6px')};
-    border-color: ${lightGrey$m};
+    border-color: ${lightGrey$n};
     background-color: ${light$p};
     padding: ${/*#__PURE__*/rem('30px')};
   }
@@ -6206,7 +6235,7 @@ const Wrapper$i = _styled.div`
   }
 
   .RRT__showmore {
-    background: ${lightGrey$m};
+    background: ${lightGrey$n};
     border: ${/*#__PURE__*/rem('1px')} solid ${/*#__PURE__*/lighten(0.25, grey$r)};
     border-radius: 0 ${/*#__PURE__*/rem('6px')} 0 0;
     cursor: pointer;