@mw-kit/mw-ui 1.7.69 → 1.7.71

package/dist/index.modern.js

@@ -12207,7 +12207,7 @@ var EllipsisContainer$1 = function EllipsisContainer$1(props) {
   }));
 };
 
-var _templateObject$5, _templateObject2$5, _templateObject3$5, _templateObject4$3, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1;
+var _templateObject$5, _templateObject2$5, _templateObject3$5, _templateObject4$3, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1;
 var IconContainer = styled.button(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 17px;\n\n  background-color: transparent;\n  border: none;\n  box-shadow: none;\n  padding: 0;\n\n  ", "\n"])), function (_ref) {
   var onClick = _ref.onClick,
       disabled = _ref.disabled;
@@ -12223,11 +12223,11 @@ var Input = styled.input(_templateObject4$3 || (_templateObject4$3 = _taggedTemp
   return theme.useTypography('p');
 }, function (_ref4) {
   var theme = _ref4.theme,
-      invalid = _ref4.invalid;
+      invalid = _ref4.$invalid;
   return invalid ? theme.colors.warningRed : theme.colors.darkBlue;
 }, function (_ref5) {
   var theme = _ref5.theme,
-      invalid = _ref5.invalid;
+      invalid = _ref5.$invalid;
   return invalid ? theme.colors.warningRed : theme.colors.darkGrey;
 }, function (_ref6) {
   var placeholder = _ref6.placeholder;
@@ -12242,7 +12242,7 @@ var Input = styled.input(_templateObject4$3 || (_templateObject4$3 = _taggedTemp
   return css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteralLoose(["\n        opacity: 0.5;\n        font-size: 14px;\n        letter-spacing: 0px;\n      "])));
 }, function (_ref8) {
   var theme = _ref8.theme,
-      paddingless = _ref8.paddingless;
+      paddingless = _ref8.$paddingless;
 
   if (paddingless) {
     return css(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteralLoose(["\n        padding: 0;\n      "])));
@@ -12251,17 +12251,17 @@ var Input = styled.input(_templateObject4$3 || (_templateObject4$3 = _taggedTemp
   return css(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", ";\n      ~ ", " {\n        padding: ", " ", ";\n      }\n    "])), theme.spacings.s2, theme.spacings.s3, ChildrenContainer, theme.spacings.s2, theme.spacings.s3);
 }, function (_ref9) {
   var theme = _ref9.theme,
-      invalid = _ref9.invalid,
-      borderless = _ref9.borderless;
+      invalid = _ref9.$invalid,
+      borderless = _ref9.$borderless;
   if (borderless) return 'transparent';
   return invalid ? theme.colors.warningRed : theme.colors.lightGrey;
 }, function (_ref10) {
   var theme = _ref10.theme,
-      invalid = _ref10.invalid;
+      invalid = _ref10.$invalid;
   var color = invalid ? theme.getColor('warningRed', 5) : theme.colors.white;
   return css(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n      /** google chrome blue background */\n      -webkit-box-shadow: 0 0 0px 1000px ", " inset !important;\n    "])), color, color);
 }, function (_ref11) {
-  var arrows = _ref11.arrows;
+  var arrows = _ref11.$arrows;
   if (arrows) return;
   return css(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n      /* Chrome, Safari, Edge, Opera */\n      :-webkit-outer-spin-button,\n      :-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n      }\n\n      /* Firefox */\n      -moz-appearance: textfield;\n    "])));
 }, function (_ref12) {
@@ -12275,33 +12275,33 @@ var InputContainer = styled.div(_templateObject12$1 || (_templateObject12$1 = _t
   var width = _ref13.width;
   return width || '100%';
 });
-var Label = styled.label(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  color: ", ";\n\n  width: ", ";\n  box-sizing: border-box;\n  display: block;\n\n  ", "\n\n  > ", " > ", " {\n    bottom: ", ";\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref14) {
+var Label = styled.label(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteralLoose(["\n  ", ";\n  line-height: 17px;\n\n  color: ", ";\n\n  width: ", ";\n  box-sizing: border-box;\n  display: block;\n\n  ", "\n\n  > ", " > ", " {\n    bottom: ", ";\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref14) {
   var theme = _ref14.theme;
   return theme.useTypography('p');
 }, function (_ref15) {
   var theme = _ref15.theme;
   return theme.colors.greyishBlue;
 }, function (_ref16) {
-  var width = _ref16.width;
+  var width = _ref16.$width;
   return width || '100%';
 }, function (_ref17) {
-  var disabled = _ref17.disabled;
+  var disabled = _ref17.$disabled;
   if (!disabled) return;
   return css(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
 }, InputContainer, IconContainer, function (_ref18) {
   var theme = _ref18.theme,
-      paddingless = _ref18.paddingless;
+      paddingless = _ref18.$paddingless;
   return paddingless ? '2px' : "calc(" + theme.spacings.s2 + " + 1px)";
 }, function (_ref19) {
-  var readOnly = _ref19.readOnly,
-      disabled = _ref19.disabled,
-      loading = _ref19.loading;
+  var readOnly = _ref19.$readOnly,
+      disabled = _ref19.$disabled,
+      loading = _ref19.$loading;
   if (loading || readOnly || disabled) return;
   return css(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteralLoose(["\n      cursor: pointer;\n    "])));
 }, function (_ref20) {
   var theme = _ref20.theme,
-      icon = _ref20.icon,
-      paddingless = _ref20.paddingless;
+      icon = _ref20.$icon,
+      paddingless = _ref20.$paddingless;
   if (!icon) return;
   var width = icon.width,
       position = icon.position;
@@ -12314,36 +12314,123 @@ var Label = styled.label(_templateObject13$1 || (_templateObject13$1 = _taggedTe
   return css(_templateObject17$1 || (_templateObject17$1 = _taggedTemplateLiteralLoose(["\n      > ", " > ", " {\n        width: ", ";\n        left: calc(", " / 2);\n      }\n\n      > ", " > ", " {\n        padding-left: calc(", " + ", ");\n        ~ ", " {\n          padding-left: calc(", " + ", ");\n        }\n      }\n    "])), InputContainer, IconContainer, width, padding, InputContainer, Input, padding, width, ChildrenContainer, padding, width);
 });
 var LabelText = styled.div(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref21) {
-  var theme = _ref21.theme;
-  return theme.spacings.s1;
+  var theme = _ref21.theme,
+      viewMode = _ref21.$viewMode;
+  return theme.spacings[viewMode ? 's3' : 's1'];
 }, function (_ref22) {
-  var required = _ref22.required;
-  if (!required) return;
+  var required = _ref22.$required,
+      viewMode = _ref22.$viewMode;
+  if (!required || viewMode) return;
   return css(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
 });
+var ViewModeContainer = styled.div(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref23) {
+  var children = _ref23.children;
+  if (children) return;
+  return css(_templateObject21$1 || (_templateObject21$1 = _taggedTemplateLiteralLoose(["\n      :before {\n        content: ' ';\n        white-space: pre;\n      }\n    "])));
+});
+
+var defaultValue = {
+  isRequired: function isRequired() {
+    return false;
+  },
+  isInvalid: function isInvalid() {
+    return false;
+  },
+  isViewMode: function isViewMode() {
+    return false;
+  },
+  isDisabled: function isDisabled() {
+    return false;
+  }
+};
+var Context = React__default.createContext(_extends({}, defaultValue));
+
+var useContext = function useContext(name) {
+  var context = React__default.useContext(Context);
+  return _extends({
+    isRequired: function isRequired() {
+      return false;
+    },
+    isInvalid: function isInvalid() {
+      return false;
+    },
+    isViewMode: function isViewMode() {
+      return false;
+    },
+    isDisabled: function isDisabled() {
+      return false;
+    }
+  }, name ? {
+    isRequired: function isRequired() {
+      return context.isRequired(name);
+    },
+    isInvalid: function isInvalid() {
+      return context.isInvalid(name);
+    },
+    isViewMode: function isViewMode() {
+      return context.isViewMode(name);
+    },
+    isDisabled: function isDisabled() {
+      return context.isDisabled(name);
+    }
+  } : {});
+};
+
+var Provider = function Provider(props) {
+  return React__default.createElement(Context.Provider, Object.assign({}, props, {
+    value: _extends({}, defaultValue, props.value)
+  }));
+};
+
+var Form = Object.assign(React__default.forwardRef(Object.assign(function (props, ref) {
+  var formProps = filterObject(props, ['isRequired', 'isInvalid', 'isViewMode', 'isDisabled']);
+  return React__default.createElement(Provider, {
+    value: _extends({}, props.isRequired ? {
+      isRequired: props.isRequired
+    } : {}, props.isInvalid ? {
+      isInvalid: props.isInvalid
+    } : {}, props.isViewMode ? {
+      isViewMode: props.isViewMode
+    } : {}, props.isDisabled ? {
+      isDisabled: props.isDisabled
+    } : {})
+  }, React__default.createElement("form", Object.assign({
+    ref: ref
+  }, formProps)));
+}, {
+  displayName: 'Form'
+})), {
+  useContext: useContext
+});
 
 var Input$1 = React__default.forwardRef(function (props, ref) {
   var _props = _extends({}, props),
       label = _props.label,
       loading = _props.loading,
+      readOnly = _props.readOnly,
+      arrows = _props.arrows,
+      borderless = _props.borderless,
+      paddingless = _props.paddingless,
       clearable = _props.clearable,
       onPressEnter = _props.onPressEnter,
       width = _props.width;
 
+  var _Form$useContext = Form.useContext(props.name),
+      isRequired = _Form$useContext.isRequired,
+      isInvalid = _Form$useContext.isInvalid,
+      isViewMode = _Form$useContext.isViewMode,
+      isDisabled = _Form$useContext.isDisabled;
+
   var mask = getMask(props.mask);
   useEffect(function () {
     if (!isString(props.value)) return;
     var masked = mask(props.value);
     if (masked !== props.value) setValue(masked);
   }, [props.value]);
-  var intInvalid = props.invalid ? 1 : 0;
-  var intLoading = props.loading ? 1 : 0;
-  var intRequired = props.required ? 1 : 0;
-  var intDisabled = props.disabled ? 1 : 0;
-  var intReadOnly = props.readOnly ? 1 : 0;
-  var intArrows = props.arrows ? 1 : 0;
-  var intBorderless = props.borderless ? 1 : 0;
-  var intPaddingless = props.paddingless ? 1 : 0;
+  var invalid = isInvalid() || props.invalid;
+  var required = isRequired() || props.required;
+  var disabled = isDisabled() || props.disabled;
+  var viewMode = isViewMode() || props.viewMode;
   var position;
   var iconWidth;
   var iconSubmit;
@@ -12353,18 +12440,18 @@ var Input$1 = React__default.forwardRef(function (props, ref) {
   if (props.icon) {
     icon = _extends({}, props.icon.icon);
     position = props.icon.position || 'right';
-    if (intInvalid) icon.color = 'warningRed';
+    if (invalid) icon.color = 'warningRed';
     iconWidth = icon.width;
     iconSubmit = props.icon.submit;
     iconOnClick = props.icon.onClick;
   }
 
-  var inputProps = filterObject(props, ['label', 'invalid', 'required', 'icon', 'mask', 'loading', 'clearable', 'setValue', 'onPressEnter', 'htmlDisabled', 'htmlReadOnly', 'width', 'inputWidth', 'arrows', 'borderless', 'paddingless', 'children'], {
-    invalid: intInvalid,
+  var inputProps = filterObject(props, ['label', 'invalid', 'required', 'icon', 'mask', 'loading', 'clearable', 'setValue', 'onPressEnter', 'htmlDisabled', 'htmlReadOnly', 'viewMode', 'width', 'inputWidth', 'arrows', 'borderless', 'paddingless', 'children'], {
+    $invalid: invalid,
     type: 'text',
-    arrows: intArrows,
-    borderless: intBorderless,
-    paddingless: intPaddingless
+    $arrows: arrows,
+    $borderless: borderless,
+    $paddingless: paddingless
   });
 
   var onChange = inputProps.onChange || function () {};
@@ -12455,16 +12542,19 @@ var Input$1 = React__default.forwardRef(function (props, ref) {
   if (props.htmlDisabled) inputProps.disabled = true;
   if (props.htmlReadOnly) inputProps.readOnly = true;
   return React__default.createElement(Label, {
-    readOnly: intReadOnly,
-    disabled: intDisabled,
-    loading: intLoading,
-    invalid: intInvalid,
-    paddingless: intPaddingless,
-    icon: iconProps,
-    width: width
+    "$readOnly": readOnly || viewMode,
+    "$disabled": disabled,
+    "$loading": loading,
+    "$invalid": invalid,
+    "$paddingless": paddingless,
+    "$icon": iconProps,
+    "$width": width
   }, label && React__default.createElement(LabelText, {
-    required: intRequired
-  }, label), React__default.createElement(InputContainer, {
+    "$required": required,
+    "$viewMode": viewMode
+  }, label), viewMode ? React__default.createElement(ViewModeContainer, {
+    children: inputProps.value || props.children
+  }) : React__default.createElement(InputContainer, {
     width: props.inputWidth
   }, React__default.createElement(Input, Object.assign({}, inputProps, {
     ref: ref
@@ -12484,17 +12574,18 @@ var Checkmark = styled.div(_templateObject$6 || (_templateObject$6 = _taggedTemp
   var theme = _ref.theme;
   return theme.colors.white;
 }, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.colors.lightGrey;
+  var theme = _ref2.theme,
+      viewMode = _ref2.$viewMode;
+  return viewMode ? 'transparent' : theme.colors.blue;
 }, function (_ref3) {
   var theme = _ref3.theme;
   return theme.colors.blue;
 });
-var Label$1 = styled.label(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 14px;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  display: flex;\n  align-items: center;\n\n  user-select: none;\n  min-height: ", ";\n  min-width: ", ";\n  gap: ", ";\n\n  > input {\n    position: absolute;\n    opacity: 0;\n    height: 1px;\n    width: 1px;\n  }\n\n  :hover ", " {\n    background-color: ", ";\n  }\n\n  > input:checked ~ ", " {\n    border-color: ", ";\n\n    :after {\n      width: 5px;\n      height: 9.5px;\n      border-width: 0 2px 2px 0;\n      left: 5px;\n      top: 1px;\n    }\n  }\n\n  ", ";\n\n  ", "\n"])), function (_ref4) {
+var Label$1 = styled.label(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 14px;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  display: flex;\n  align-items: center;\n\n  user-select: none;\n  min-height: ", ";\n  min-width: ", ";\n  gap: ", ";\n\n  > input {\n    position: absolute;\n    opacity: 0;\n    height: 1px;\n    width: 1px;\n  }\n\n  :hover ", " {\n    background-color: ", ";\n  }\n\n  > input:checked ~ ", " {\n    :after {\n      width: 5px;\n      height: 9.5px;\n      border-width: 0 2px 2px 0;\n      left: 5px;\n      top: 1px;\n    }\n  }\n\n  ", ";\n\n  ", "\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.useTypography('p');
 }, function (_ref5) {
-  var padding = _ref5.padding,
+  var padding = _ref5.$padding,
       theme = _ref5.theme;
   if (!padding) return;
   var _padding = {
@@ -12538,17 +12629,19 @@ var Label$1 = styled.label(_templateObject2$6 || (_templateObject2$6 = _taggedTe
 
   return css(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n      padding-top: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n      padding-bottom: ", ";\n    "])), _padding.top, _padding.left, _padding.right, _padding.bottom);
 }, function (_ref6) {
-  var disabled = _ref6.disabled;
+  var disabled = _ref6.$disabled,
+      readOnly = _ref6.$readOnly;
 
-  if (!disabled) {
-    return css(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n        cursor: pointer;\n      "])));
+  if (disabled) {
+    return css(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n        opacity: 0.5;\n      "])));
   }
 
-  return css(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
+  if (readOnly) return;
+  return css(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n      cursor: pointer;\n    "])));
 }, function (_ref7) {
   var theme = _ref7.theme,
-      bordered = _ref7.bordered,
-      invalid = _ref7.invalid;
+      bordered = _ref7.$bordered,
+      invalid = _ref7.$invalid;
   if (!bordered) return;
   return css(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", ";\n\n      border-width: 1px;\n      border-style: solid;\n      border-color: ", ";\n      border-radius: 4px;\n    "])), theme.spacings.s2, theme.spacings.s3, theme.colors[invalid ? 'warningRed' : 'lightGrey']);
 }, size, size, function (_ref8) {
@@ -12558,32 +12651,38 @@ var Label$1 = styled.label(_templateObject2$6 || (_templateObject2$6 = _taggedTe
   var theme = _ref9.theme;
   return theme.colors.iceWhite;
 }, Checkmark, function (_ref10) {
-  var theme = _ref10.theme;
-  return theme.colors.blue;
-}, function (_ref11) {
-  var theme = _ref11.theme,
-      invalid = _ref11.invalid;
+  var theme = _ref10.theme,
+      invalid = _ref10.$invalid;
   if (!invalid) return;
   return css(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n      ", ",\n      > input:checked ~ ", ", \n      > input:checked ~ ", ":after {\n        border-color: ", ";\n      }\n    "])), Checkmark, Checkmark, Checkmark, theme.colors.warningRed);
-}, function (_ref12) {
-  var width = _ref12.width;
+}, function (_ref11) {
+  var width = _ref11.$width;
   return width && css(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n        width: ", ";\n      "])), width);
 });
-var LabelContent = styled.div(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  ", "\n  line-height: 14px;\n  flex: 1;\n  overflow: hidden;\n\n  ", "\n"])), function (_ref13) {
-  var theme = _ref13.theme;
+var LabelContent = styled.div(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  ", "\n  line-height: 14px;\n  flex: 1;\n  overflow: hidden;\n\n  ", "\n"])), function (_ref12) {
+  var theme = _ref12.theme;
   return theme.useTypography('p');
-}, function (_ref14) {
-  var required = _ref14.required;
-  if (!required) return;
+}, function (_ref13) {
+  var required = _ref13.required,
+      viewMode = _ref13.viewMode;
+  if (!required || viewMode) return;
   return css(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
 });
 
 var Checkbox = React__default.forwardRef(function (props, ref) {
-  var disabled = props.disabled,
-      required = props.required,
-      invalid = props.invalid,
-      padding = props.padding,
+  var padding = props.padding,
       bordered = props.bordered;
+
+  var _Form$useContext = Form.useContext(props.name),
+      isRequired = _Form$useContext.isRequired,
+      isInvalid = _Form$useContext.isInvalid,
+      isViewMode = _Form$useContext.isViewMode,
+      isDisabled = _Form$useContext.isDisabled;
+
+  var invalid = isInvalid() || props.invalid;
+  var required = isRequired() || props.required;
+  var disabled = isDisabled() || props.disabled;
+  var viewMode = isViewMode() || props.viewMode;
   var htmlProps = filterObject(props, ['label', 'invalid', 'required', 'padding', 'bordered']);
 
   var _ref = function () {
@@ -12599,18 +12698,23 @@ var Checkbox = React__default.forwardRef(function (props, ref) {
       children = _ref[1];
 
   return React__default.createElement(Label$1, {
-    disabled: disabled ? 1 : 0,
-    required: required ? 1 : 0,
-    invalid: invalid ? 1 : 0,
-    bordered: bordered ? 1 : 0,
-    padding: padding,
-    width: props.width
+    "$disabled": disabled,
+    "$required": required,
+    "$invalid": invalid,
+    "$bordered": !viewMode && bordered,
+    "$padding": padding,
+    "$readOnly": props.readOnly || viewMode,
+    "$width": props.width
   }, React__default.createElement("input", Object.assign({}, htmlProps, {
     type: 'checkbox',
-    ref: ref
-  })), React__default.createElement(Checkmark, null), React__default.createElement(LabelComponent, Object.assign({}, {
+    ref: ref,
+    disabled: htmlProps.disabled || viewMode
+  })), React__default.createElement(Checkmark, {
+    "$viewMode": viewMode
+  }), React__default.createElement(LabelComponent, Object.assign({}, {
     disabled: disabled,
     required: required,
+    viewMode: viewMode,
     invalid: invalid,
     bordered: bordered,
     padding: padding,
@@ -14460,9 +14564,9 @@ var Date$1 = React__default.forwardRef(function (props, ref) {
 });
 Date$1.displayName = 'Date';
 
-var Provider = React__default.createContext({});
-var useContext = function useContext() {
-  return React__default.useContext(Provider);
+var Provider$1 = React__default.createContext({});
+var useContext$1 = function useContext() {
+  return React__default.useContext(Provider$1);
 };
 
 var _templateObject$l, _templateObject2$f;
@@ -14472,7 +14576,7 @@ var HeaderContainer = styled.div(_templateObject$l || (_templateObject$l = _tagg
 });
 
 var Header$1 = function Header() {
-  var context = useContext();
+  var context = useContext$1();
 
   if (!context.props.search) {
     return React__default.createElement(React__default.Fragment, null);
@@ -14585,7 +14689,7 @@ var useSelect = function useSelect(props) {
       maxHeight: props.maxHeight || '180px'
     },
     getContext: function getContext(base, children) {
-      return React__default.createElement(Provider.Provider, {
+      return React__default.createElement(Provider$1.Provider, {
         value: _extends({}, base, {
           props: props,
           options: options
@@ -14600,13 +14704,13 @@ var useSelect = function useSelect(props) {
   return parsed;
 };
 
-var Provider$1 = React__default.createContext({});
-var useContext$1 = function useContext() {
-  return React__default.useContext(Provider$1);
+var Provider$2 = React__default.createContext({});
+var useContext$2 = function useContext() {
+  return React__default.useContext(Provider$2);
 };
 
 var Footer$1 = function Footer() {
-  var context = useContext$1();
+  var context = useContext$2();
   var _context$props = context.props,
       value = _context$props.value,
       setValue = _context$props.setValue,
@@ -14668,7 +14772,7 @@ var SelectAllContainer = styled.div(_templateObject3$e || (_templateObject3$e =
 });
 
 var Header$2 = function Header() {
-  var context = useContext$1();
+  var context = useContext$2();
 
   if (!context.props.search) {
     return React__default.createElement(React__default.Fragment, null);
@@ -14717,7 +14821,7 @@ var Header$2 = function Header() {
 };
 
 var Label$2 = function Label(props) {
-  var context = useContext$1();
+  var context = useContext$2();
   var _context$checked = context.checked,
       checked = _context$checked[0],
       setChecked = _context$checked[1];
@@ -14816,7 +14920,7 @@ var useSelectMultiple = function useSelectMultiple(props) {
       maxHeight: props.maxHeight || (props.selectAll ? '269px' : '224px')
     },
     getContext: function getContext(base, children) {
-      return React__default.createElement(Provider$1.Provider, {
+      return React__default.createElement(Provider$2.Provider, {
         value: _extends({}, base, {
           props: props,
           options: options,
@@ -15574,86 +15678,107 @@ var DatePicker = React__default.forwardRef(function (props, ref) {
 });
 DatePicker.displayName = 'DatePicker';
 
-var _templateObject$s, _templateObject2$m, _templateObject3$i, _templateObject4$c, _templateObject5$a, _templateObject6$9, _templateObject7$9;
-var LabelContainer$3 = styled.div(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 14px;\n  display: flex;\n  align-items: center;\n\n  ", "\n"])), function (_ref) {
+var _templateObject$s, _templateObject2$m, _templateObject3$i, _templateObject4$c, _templateObject5$a, _templateObject6$9, _templateObject7$9, _templateObject8$8;
+var LabelContainer$3 = styled.div(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 14px;\n  display: flex;\n  align-items: center;\n\n  ", "\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.useTypography('p');
 }, function (_ref2) {
-  var required = _ref2.required;
-  if (!required) return;
+  var required = _ref2.$required,
+      viewMode = _ref2.$viewMode;
+  if (!required || viewMode) return;
   return css(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n      :after {\n        content: '*';\n      }\n    "])));
+}, function (_ref3) {
+  var keepSpace = _ref3.$keepSpace,
+      children = _ref3.children;
+  if (!keepSpace || children) return;
+  return css(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteralLoose(["\n      :before {\n        content: '';\n        white-space: pre;\n      }\n    "])));
 });
-var Label$4 = styled.label(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: ", ";\n  position: relative;\n  align-items: center;\n\n  ", "\n\n  ", "\n\n  > input {\n    position: absolute;\n    height: 0%;\n    width: 0%;\n    opacity: 0;\n  }\n\n  > span {\n    position: relative;\n    width: 50px;\n    height: calc(", " + 1px);\n    background-color: ", ";\n    border-radius: 20px;\n    transition-property: background-color;\n    transition-duration: 0.4s;\n    transition-timing-function: ease-in-out;\n    box-sizing: content-box;\n    :before {\n      content: '';\n      transition-property: left;\n      transition-duration: 0.4s;\n      transition-timing-function: ease-in-out;\n      position: absolute;\n      border-width: 1px;\n      border-style: solid;\n      border-radius: 100%;\n      left: 0;\n      box-shadow: 0px 1px 3px ", ";\n      width: calc(", " - 1px);\n      height: calc(", " - 1px);\n      background-color: ", ";\n    }\n  }\n\n  > input:checked + span {\n    :before {\n      left: calc(100% - ", " - 1px);\n    }\n  }\n"])), function (_ref3) {
-  var theme = _ref3.theme;
+var Label$4 = styled.label(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: ", ";\n  position: relative;\n  align-items: center;\n\n  ", "\n\n  ", "\n\n  > input {\n    position: absolute;\n    height: 0%;\n    width: 0%;\n    opacity: 0;\n  }\n\n  > span {\n    position: relative;\n    width: 50px;\n    height: calc(", " + 1px);\n    background-color: ", ";\n    border-radius: 20px;\n    transition-property: background-color;\n    transition-duration: 0.4s;\n    transition-timing-function: ease-in-out;\n    box-sizing: content-box;\n    :before {\n      content: '';\n      transition-property: left;\n      transition-duration: 0.4s;\n      transition-timing-function: ease-in-out;\n      position: absolute;\n      border-width: 1px;\n      border-style: solid;\n      border-radius: 100%;\n      left: 0;\n      box-shadow: 0px 1px 3px ", ";\n      width: calc(", " - 1px);\n      height: calc(", " - 1px);\n      background-color: ", ";\n    }\n  }\n\n  > input:checked + span {\n    :before {\n      left: calc(100% - ", " - 1px);\n    }\n  }\n"])), function (_ref4) {
+  var theme = _ref4.theme;
   return theme.spacings.s1;
-}, function (_ref4) {
-  var disabled = _ref4.disabled;
+}, function (_ref5) {
+  var disabled = _ref5.$disabled;
 
   if (!disabled) {
-    return css(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteralLoose(["\n        > span {\n          cursor: pointer;\n        }\n      "])));
+    return css(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteralLoose(["\n        > span {\n          cursor: pointer;\n        }\n      "])));
   }
 
-  return css(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
-}, function (_ref5) {
-  var invalid = _ref5.invalid;
+  return css(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
+}, function (_ref6) {
+  var invalid = _ref6.$invalid;
 
   if (!invalid) {
-    return css(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteralLoose(["\n        > span:before {\n          border-color: ", ";\n        }\n        > input:checked + span {\n          background-color: ", ";\n        }\n      "])), function (_ref6) {
-      var theme = _ref6.theme;
-      return theme.colors.lightGrey;
-    }, function (_ref7) {
+    return css(_templateObject7$9 || (_templateObject7$9 = _taggedTemplateLiteralLoose(["\n        > span:before {\n          border-color: ", ";\n        }\n        > input:checked + span {\n          background-color: ", ";\n        }\n      "])), function (_ref7) {
       var theme = _ref7.theme;
+      return theme.colors.lightGrey;
+    }, function (_ref8) {
+      var theme = _ref8.theme;
       return theme.colors.blue;
     });
   }
 
-  return css(_templateObject7$9 || (_templateObject7$9 = _taggedTemplateLiteralLoose(["\n      > span:before {\n        border-color: ", ";\n      }\n      > input:checked + span {\n        background-color: ", ";\n      }\n    "])), function (_ref8) {
-    var theme = _ref8.theme;
-    return theme.colors.warningRed;
-  }, function (_ref9) {
+  return css(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteralLoose(["\n      > span:before {\n        border-color: ", ";\n      }\n      > input:checked + span {\n        background-color: ", ";\n      }\n    "])), function (_ref9) {
     var theme = _ref9.theme;
     return theme.colors.warningRed;
+  }, function (_ref10) {
+    var theme = _ref10.theme;
+    return theme.colors.warningRed;
   });
-}, function (_ref10) {
-  var theme = _ref10.theme;
-  return theme.spacings.s4;
 }, function (_ref11) {
   var theme = _ref11.theme;
-  return theme.colors.warningGray;
+  return theme.spacings.s4;
 }, function (_ref12) {
   var theme = _ref12.theme;
-  return theme.getColor('black', 10);
+  return theme.colors.warningGray;
 }, function (_ref13) {
   var theme = _ref13.theme;
-  return theme.spacings.s4;
+  return theme.getColor('black', 10);
 }, function (_ref14) {
   var theme = _ref14.theme;
   return theme.spacings.s4;
 }, function (_ref15) {
   var theme = _ref15.theme;
-  return theme.colors.white;
+  return theme.spacings.s4;
 }, function (_ref16) {
   var theme = _ref16.theme;
+  return theme.colors.white;
+}, function (_ref17) {
+  var theme = _ref17.theme;
   return theme.spacings.s4;
 });
 
 var Switch = function Switch(props) {
-  var disabled = props.disabled,
-      required = props.required,
-      invalid = props.invalid;
+  var _Form$useContext = Form.useContext(props.name),
+      isRequired = _Form$useContext.isRequired,
+      isInvalid = _Form$useContext.isInvalid,
+      isViewMode = _Form$useContext.isViewMode,
+      isDisabled = _Form$useContext.isDisabled;
+
+  var invalid = isInvalid() || props.invalid;
+  var required = isRequired() || props.required;
+  var disabled = isDisabled() || props.disabled;
+  var viewMode = isViewMode() || props.viewMode;
   var label = isObject(props.label) ? props.label : {
     label: props.label
   };
-  var htmlProps = filterObject(props, ['label', 'invalid', 'required', 'htmlDisabled', 'labelProps']);
+  var htmlProps = filterObject(props, ['label', 'invalid', 'required', 'htmlDisabled', 'labelProps', 'viewMode']);
   htmlProps.disabled = props.disabled || props.htmlDisabled;
   return React__default.createElement(Label$4, Object.assign({}, props.labelProps || {}, {
-    disabled: disabled ? 1 : 0,
-    invalid: invalid ? 1 : 0
+    "$disabled": disabled,
+    "$invalid": invalid
   }), label.label && React__default.createElement(LabelContainer$3, {
-    required: required ? 1 : 0
-  }, label.label), label.before && React__default.createElement(LabelContainer$3, null, label.before), React__default.createElement("input", Object.assign({}, htmlProps, {
+    "$required": required,
+    "$viewMode": viewMode
+  }, label.label), viewMode ? React__default.createElement(LabelContainer$3, {
+    "$keepSpace": true,
+    children: label[props.checked ? 'after' : 'before']
+  }) : React__default.createElement(React__default.Fragment, null, label.before && React__default.createElement(LabelContainer$3, {
+    children: label.before
+  }), React__default.createElement("input", Object.assign({}, htmlProps, {
     type: 'checkbox'
-  })), React__default.createElement("span", null), label.after && React__default.createElement(LabelContainer$3, null, label.after));
+  })), React__default.createElement("span", null), label.after && React__default.createElement(LabelContainer$3, {
+    children: label.after
+  })));
 };
 
 var _templateObject$t, _templateObject2$n;
@@ -15727,20 +15852,27 @@ var NavBar = styled.div(_templateObject$x || (_templateObject$x = _taggedTemplat
   return theme.colors.blue;
 });
 
-var _templateObject$y, _templateObject2$q, _templateObject3$l;
-var Label$5 = styled.label(_templateObject$y || (_templateObject$y = _taggedTemplateLiteralLoose(["\n  ", ";\n  line-height: 19px;\n\n  width: ", ";\n  box-sizing: border-box;\n  display: block;\n  position: relative;\n\n  ", "\n\n  > ", " {\n    ", "\n  }\n\n  :not(:hover) ", " {\n    height: 0;\n  }\n"])), function (_ref) {
+var _templateObject$y, _templateObject2$q, _templateObject3$l, _templateObject4$d, _templateObject5$b;
+var Label$5 = styled.label(_templateObject$y || (_templateObject$y = _taggedTemplateLiteralLoose(["\n  ", ";\n  line-height: 17px;\n\n  ", ";\n  box-sizing: border-box;\n  display: block;\n  position: relative;\n\n  ", "\n\n  > ", " {\n    ", "\n  }\n\n  :not(:hover) ", " {\n    height: 0;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.useTypography('p');
 }, function (_ref2) {
-  var width = _ref2.width;
-  return width || '100%';
+  var width = _ref2.width,
+      viewMode = _ref2.$viewMode;
+
+  if (width) {
+    return css(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteralLoose(["\n        width: ", ";\n      "])), width);
+  }
+
+  return !viewMode && css(_templateObject3$l || (_templateObject3$l = _taggedTemplateLiteralLoose(["\n        width: 100%;\n      "])));
 }, function (_ref3) {
-  var disabled = _ref3.disabled;
+  var disabled = _ref3.$disabled;
   if (!disabled) return;
-  return css(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
+  return css(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
 }, LabelContainer$4, function (_ref4) {
-  var required = _ref4.required;
-  return required && css(_templateObject3$l || (_templateObject3$l = _taggedTemplateLiteralLoose(["\n          :after {\n            content: ' *';\n          }\n        "])));
+  var required = _ref4.$required,
+      viewMode = _ref4.$viewMode;
+  return required && !viewMode && css(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteralLoose(["\n          :after {\n            content: ' *';\n          }\n        "])));
 }, NavBar);
 
 var _templateObject$z, _templateObject2$r;
@@ -15762,15 +15894,18 @@ var LabelsContainer = styled.div(_templateObject$B || (_templateObject$B = _tagg
   var position = _ref.position;
 
   if (position === 'bottom') {
-    return css(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteralLoose(["\n        ", " {\n          flex-direction: column-reverse;\n        }\n\n        ", " {\n          :after {\n            bottom: calc(100% + 10px);\n          }\n        }\n\n        ", " {\n          align-items: start;\n        }\n      "])), InputContainer$1, Marker, MinMaxLabelContainer);
+    return css(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteralLoose(["\n        ", " {\n          flex-direction: column-reverse;\n        }\n\n        ", " {\n          :after {\n            bottom: calc(100% + 9px);\n          }\n        }\n\n        ", " {\n          align-items: start;\n        }\n      "])), InputContainer$1, Marker, MinMaxLabelContainer);
   }
 
-  return css(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteralLoose(["\n      ", " {\n        flex-direction: column;\n      }\n\n      ", " {\n        :after {\n          top: calc(100% + 9px);\n        }\n      }\n\n      ", " {\n        align-items: end;\n      }\n    "])), InputContainer$1, Marker, MinMaxLabelContainer);
+  return css(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteralLoose(["\n      ", " {\n        flex-direction: column;\n      }\n\n      ", " {\n        :after {\n          top: calc(100% + 10px);\n        }\n      }\n\n      ", " {\n        align-items: end;\n      }\n    "])), InputContainer$1, Marker, MinMaxLabelContainer);
 });
 
 var _templateObject$C;
 var MarkersContainer = styled.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n  height: 17px;\n"])));
 
+var _templateObject$D;
+var ViewModeContainer$1 = styled.div(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"])));
+
 var getMarkers = function getMarkers(props) {
   if (props.markers && 'markers' in props.markers) {
     var _strict = props.markers.strict;
@@ -15869,12 +16004,20 @@ var Range = React__default.forwardRef(function (props, ref) {
   var label = props.label,
       minLabel = props.minLabel,
       maxLabel = props.maxLabel,
-      invalid = props.invalid,
-      disabled = props.disabled,
-      required = props.required,
       width = props.width,
       setValue = props.setValue;
 
+  var _Form$useContext = Form.useContext(props.name),
+      isRequired = _Form$useContext.isRequired,
+      isInvalid = _Form$useContext.isInvalid,
+      isViewMode = _Form$useContext.isViewMode,
+      isDisabled = _Form$useContext.isDisabled;
+
+  var invalid = isInvalid() || props.invalid;
+  var required = isRequired() || props.required;
+  var disabled = isDisabled() || props.disabled;
+  var viewMode = isViewMode() || props.viewMode;
+
   var _getMarkers = getMarkers(props),
       min = _getMarkers.min,
       max = _getMarkers.max,
@@ -15965,12 +16108,15 @@ var Range = React__default.forwardRef(function (props, ref) {
   });
   var bulletSize = strict === true ? 22 : 14;
   return React__default.createElement(Label$5, {
-    required: required ? 1 : 0,
-    disabled: disabled ? 1 : 0,
+    "$required": required,
+    "$disabled": disabled,
+    "$viewMode": viewMode,
     width: width
   }, label && React__default.createElement("div", {
     children: label
-  }), React__default.createElement(LabelsContainer, {
+  }), viewMode ? React__default.createElement(ViewModeContainer$1, {
+    children: currentValue
+  }) : React__default.createElement(LabelsContainer, {
     position: position
   }, minLabel && React__default.createElement(MinMaxLabelContainer, null, minLabel), React__default.createElement(InputContainer$1, {
     invalid: invalid ? 1 : 0
@@ -16024,8 +16170,8 @@ var Range = React__default.forwardRef(function (props, ref) {
 });
 Range.displayName = 'input';
 
-var _templateObject$D, _templateObject2$t, _templateObject3$n, _templateObject4$d, _templateObject5$b, _templateObject6$a, _templateObject7$a;
-var LabelContainer$5 = styled.div(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n  ", "\n  display: flex;\n  align-items: center;\n"])), function (_ref) {
+var _templateObject$E, _templateObject2$t, _templateObject3$n, _templateObject4$e, _templateObject5$c, _templateObject6$a, _templateObject7$a;
+var LabelContainer$5 = styled.div(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose(["\n  ", "\n  display: flex;\n  align-items: center;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.useTypography('p');
 });
@@ -16039,11 +16185,11 @@ var Label$6 = styled.label(_templateObject2$t || (_templateObject2$t = _taggedTe
     return css(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteralLoose(["\n        > span {\n          cursor: pointer;\n        }\n      "])));
   }
 
-  return css(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
+  return css(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
 }, function (_ref4) {
   var required = _ref4.required;
   if (!required) return;
-  return css(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteralLoose(["\n      > ", " {\n        :after {\n          content: ' *';\n        }\n      }\n    "])), LabelContainer$5);
+  return css(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose(["\n      > ", " {\n        :after {\n          content: ' *';\n        }\n      }\n    "])), LabelContainer$5);
 }, function (_ref5) {
   var invalid = _ref5.invalid;
 
@@ -16267,8 +16413,8 @@ var parse = function parse(value) {
   });
 };
 
-var _templateObject$E, _templateObject2$u, _templateObject3$o, _templateObject4$e, _templateObject5$c, _templateObject6$b, _templateObject7$b, _templateObject8$8, _templateObject9$8, _templateObject10$7, _templateObject11$3, _templateObject12$2;
-var RelativeContainer$5 = styled.div(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose(["\n  position: relative;\n  user-select: none;\n  min-width: 220px;\n\n  > input,\n  > label > input {\n    color: transparent;\n    background-color: transparent;\n    width: 1px;\n    height: 1px;\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    border: 0;\n    padding: 0;\n    overflow: hidden;\n    outline: none;\n    box-shadow: none;\n  }\n"])));
+var _templateObject$F, _templateObject2$u, _templateObject3$o, _templateObject4$f, _templateObject5$d, _templateObject6$b, _templateObject7$b, _templateObject8$9, _templateObject9$8, _templateObject10$7, _templateObject11$3, _templateObject12$2;
+var RelativeContainer$5 = styled.div(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n  position: relative;\n  user-select: none;\n  min-width: 220px;\n\n  > input,\n  > label > input {\n    color: transparent;\n    background-color: transparent;\n    width: 1px;\n    height: 1px;\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    border: 0;\n    padding: 0;\n    overflow: hidden;\n    outline: none;\n    box-shadow: none;\n  }\n"])));
 var LabelContainer$6 = styled.div(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 17px;\n  flex: 1;\n\n  :first-child {\n    text-align: left;\n  }\n  :not(:first-child) {\n    text-align: center;\n  }\n\n  ", "\n\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.useTypography('p');
@@ -16282,9 +16428,9 @@ var LabelContainer$6 = styled.div(_templateObject2$u || (_templateObject2$u = _t
 }, function (_ref4) {
   var onClick = _ref4.onClick;
   if (!onClick) return;
-  return css(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
+  return css(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
 });
-var Container$6 = styled.div(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  border-radius: 4px;\n  white-space: nowrap;\n  gap: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n\n  width: 100%;\n\n  ", ";\n\n  ", "\n\n  ", "\n"])), function (_ref5) {
+var Container$6 = styled.div(_templateObject5$d || (_templateObject5$d = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  border-radius: 4px;\n  white-space: nowrap;\n  gap: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n\n  width: 100%;\n\n  ", ";\n\n  ", "\n\n  ", "\n"])), function (_ref5) {
   var theme = _ref5.theme;
   return theme.spacings.s1;
 }, function (_ref6) {
@@ -16310,7 +16456,7 @@ var Container$6 = styled.div(_templateObject5$c || (_templateObject5$c = _tagged
 }, function (_ref10) {
   var disabled = _ref10.disabled;
   if (!disabled) return;
-  return css(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
+  return css(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
 });
 var Button$4 = styled.button(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  background-color: transparent;\n  border: none;\n  padding: 0;\n  box-shadow: none;\n\n  ", ";\n"])), function (_ref11) {
   var onClick = _ref11.onClick;
@@ -16555,8 +16701,8 @@ var DatePicker$1 = Object.assign(Component$1, {
   useDefaultDateIntervalState: useDefaultDateIntervalState
 });
 
-var _templateObject$F;
-var Input$3 = styled.input(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  color: ", ";\n\n  line-height: 17px;\n\n  ::placeholder {\n    color: ", ";\n\n    line-height: 17px;\n    ", ";\n    opacity: 1;\n  }\n\n  display: block;\n  box-sizing: border-box;\n  flex: 1;\n  min-width: ", ";\n\n  padding: calc(", " / 2) 0;\n\n  box-shadow: none;\n  outline: none;\n  border: 1px solid transparent;\n"])), function (_ref) {
+var _templateObject$G;
+var Input$3 = styled.input(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  color: ", ";\n\n  line-height: 17px;\n\n  ::placeholder {\n    color: ", ";\n\n    line-height: 17px;\n    ", ";\n    opacity: 1;\n  }\n\n  display: block;\n  box-sizing: border-box;\n  flex: 1;\n  min-width: ", ";\n\n  padding: calc(", " / 2) 0;\n\n  box-shadow: none;\n  outline: none;\n  border: 1px solid transparent;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.useTypography('p');
 }, function (_ref2) {
@@ -16619,8 +16765,8 @@ var Input$4 = React__default.forwardRef(function (props, ref) {
 });
 Input$4.displayName = 'Input';
 
-var _templateObject$G, _templateObject2$v;
-var Label$7 = styled.div(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref) {
+var _templateObject$H, _templateObject2$v;
+var Label$7 = styled.div(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.spacings.s1;
 }, function (_ref2) {
@@ -16633,8 +16779,8 @@ var Label$8 = function Label(props) {
   return props.children ? React__default.createElement(Label$7, Object.assign({}, props)) : null;
 };
 
-var _templateObject$H;
-var Tag = styled.div(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 17px;\n\n  background-color: ", ";\n  color: ", ";\n  padding: calc(", " / 2);\n\n  border-style: solid;\n  border-width: 1px;\n  border-color: ", ";\n  display: flex;\n  align-items: center;\n  gap: ", ";\n\n  > div:last-child {\n    cursor: pointer;\n  }\n"])), function (_ref) {
+var _templateObject$I;
+var Tag = styled.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 17px;\n\n  background-color: ", ";\n  color: ", ";\n  padding: calc(", " / 2);\n\n  border-style: solid;\n  border-width: 1px;\n  border-color: ", ";\n  display: flex;\n  align-items: center;\n  gap: ", ";\n\n  > div:last-child {\n    cursor: pointer;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.useTypography('p');
 }, function (_ref2) {
@@ -16667,8 +16813,8 @@ var Tag$1 = function Tag$1(props) {
   })));
 };
 
-var _templateObject$I, _templateObject2$w, _templateObject3$p;
-var Label$9 = styled.label(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  color: ", ";\n\n  width: ", ";\n  box-sizing: border-box;\n  position: relative;\n  display: block;\n\n  ", "\n"])), function (_ref) {
+var _templateObject$J, _templateObject2$w, _templateObject3$p;
+var Label$9 = styled.label(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  color: ", ";\n\n  width: ", ";\n  box-sizing: border-box;\n  position: relative;\n  display: block;\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.useTypography('p');
 }, function (_ref2) {
@@ -16762,8 +16908,8 @@ var Tags = React__default.forwardRef(function (props, ref) {
 });
 Tags.displayName = 'Tags';
 
-var _templateObject$J;
-var RelativeContainer$6 = styled.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var _templateObject$K;
+var RelativeContainer$6 = styled.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
 
 var isLeapYear$1 = function isLeapYear(year) {
   if (year % 4 !== 0) return false;else if (year % 100 !== 0) return true;else if (year % 400 !== 0) return false;else return true;
@@ -17164,8 +17310,8 @@ var Input$5 = Object.assign(Component$2, {
   getPhoneDetails: Phone.getPhoneDetails
 });
 
-var _templateObject$K, _templateObject2$x, _templateObject3$q, _templateObject4$f;
-var Container$7 = styled(AbsoluteContainer)(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n\n  > div {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n\n    > div {\n      padding: ", ";\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n  }\n"])), function (_ref) {
+var _templateObject$L, _templateObject2$x, _templateObject3$q, _templateObject4$g;
+var Container$7 = styled(AbsoluteContainer)(_templateObject$L || (_templateObject$L = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n\n  > div {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n\n    > div {\n      padding: ", ";\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.white;
 }, function (_ref2) {
@@ -17188,7 +17334,7 @@ var Title = styled.div(_templateObject3$q || (_templateObject3$q = _taggedTempla
   var getColor = _ref6.theme.getColor;
   return getColor('greyishBlue', 50);
 });
-var Item = styled.div(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n  display: flex;\n  align-items: center;\n\n  :not(:last-child) {\n    border-bottom: 1px solid\n      ", ";\n  }\n\n  > div:nth-child(1) {\n    flex: 1;\n\n    > div:nth-child(1) {\n      ", "\n      color: ", ";\n    }\n    > div:nth-child(2) {\n      ", "\n    }\n  }\n  > div:nth-child(2) {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n"])), function (_ref7) {
+var Item = styled.div(_templateObject4$g || (_templateObject4$g = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n  display: flex;\n  align-items: center;\n\n  :not(:last-child) {\n    border-bottom: 1px solid\n      ", ";\n  }\n\n  > div:nth-child(1) {\n    flex: 1;\n\n    > div:nth-child(1) {\n      ", "\n      color: ", ";\n    }\n    > div:nth-child(2) {\n      ", "\n    }\n  }\n  > div:nth-child(2) {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n"])), function (_ref7) {
   var s1 = _ref7.theme.spacings.s1;
   return s1 + " " + s1 + " " + s1 + " 0";
 }, function (_ref8) {
@@ -17302,8 +17448,8 @@ var AppliedFiltersMenu = function AppliedFiltersMenu(props) {
   }))));
 };
 
-var _templateObject$L, _templateObject2$y, _templateObject3$r;
-var Container$8 = styled.div(_templateObject$L || (_templateObject$L = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: ", ";\n  align-items: center;\n  color: ", ";\n\n  ", "\n"])), function (_ref) {
+var _templateObject$M, _templateObject2$y, _templateObject3$r;
+var Container$8 = styled.div(_templateObject$M || (_templateObject$M = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: ", ";\n  align-items: center;\n  color: ", ";\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme,
       gap = _ref.$gap;
   return gap === '0' ? '0' : theme.spacings[gap];
@@ -17369,21 +17515,21 @@ var AppliedFilters = Object.assign(function (props) {
   Menu: AppliedFiltersMenu
 });
 
-var _templateObject$M, _templateObject2$z, _templateObject3$s, _templateObject4$g, _templateObject5$d, _templateObject6$c, _templateObject7$c, _templateObject8$9, _templateObject9$9, _templateObject10$8;
-var Container$9 = styled.div(_templateObject$M || (_templateObject$M = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  background: #fff;\n  border: 1px solid #d4d4d5;\n  border-radius: 4px;\n  border-left-width: 5px;\n  padding: 14px;\n  ", "\n  ", "\n    ", "\n  ", "\n\n  ", "\n    ", "\n    ", "\n\n    ", "\n    ", "\n"])), function (props) {
+var _templateObject$N, _templateObject2$z, _templateObject3$s, _templateObject4$h, _templateObject5$e, _templateObject6$c, _templateObject7$c, _templateObject8$a, _templateObject9$9, _templateObject10$8;
+var Container$9 = styled.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  background: #fff;\n  border: 1px solid #d4d4d5;\n  border-radius: 4px;\n  border-left-width: 5px;\n  padding: 14px;\n  ", "\n  ", "\n    ", "\n  ", "\n\n  ", "\n    ", "\n    ", "\n\n    ", "\n    ", "\n"])), function (props) {
   return props.size === 'mini' && css(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n      width: 394px;\n      height: 99px;\n    "])));
 }, function (props) {
   return props.size === 'small' && css(_templateObject3$s || (_templateObject3$s = _taggedTemplateLiteralLoose(["\n      width: 394px;\n      height: 131px;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && css(_templateObject4$g || (_templateObject4$g = _taggedTemplateLiteralLoose(["\n      width: 394px;\n    "])));
+  return props.size === 'medium' && css(_templateObject4$h || (_templateObject4$h = _taggedTemplateLiteralLoose(["\n      width: 394px;\n    "])));
 }, function (props) {
-  return props.size === 'big' && css(_templateObject5$d || (_templateObject5$d = _taggedTemplateLiteralLoose(["\n      width: 414px;\n      height: 324px;\n    "])));
+  return props.size === 'big' && css(_templateObject5$e || (_templateObject5$e = _taggedTemplateLiteralLoose(["\n      width: 414px;\n      height: 324px;\n    "])));
 }, function (props) {
   return props.borderType === 'info' && css(_templateObject6$c || (_templateObject6$c = _taggedTemplateLiteralLoose(["\n      border-left-color: #4d6dbe;\n    "])));
 }, function (props) {
   return props.borderType === 'success' && css(_templateObject7$c || (_templateObject7$c = _taggedTemplateLiteralLoose(["\n      border-left-color: #66bb6a;\n    "])));
 }, function (props) {
-  return props.borderType === 'warning' && css(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteralLoose(["\n      border-left-color: #fbcb01;\n    "])));
+  return props.borderType === 'warning' && css(_templateObject8$a || (_templateObject8$a = _taggedTemplateLiteralLoose(["\n      border-left-color: #fbcb01;\n    "])));
 }, function (props) {
   return props.borderType === 'danger' && css(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["\n      border-left-color: #e23851;\n    "])));
 }, function (props) {
@@ -17399,8 +17545,8 @@ var Card = function Card(_ref) {
   return React__default.createElement(Container$9, Object.assign({}, rest), children);
 };
 
-var _templateObject$N;
-var Container$a = styled.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n\n  > div:nth-child(1) {\n    ", "\n    color: ", ";\n  }\n"])), function (_ref) {
+var _templateObject$O;
+var Container$a = styled.div(_templateObject$O || (_templateObject$O = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n\n  > div:nth-child(1) {\n    ", "\n    color: ", ";\n  }\n"])), function (_ref) {
   var s1 = _ref.theme.spacings.s1;
   return "0 0 " + s1 + " " + s1;
 }, function (_ref2) {
@@ -17461,8 +17607,8 @@ var Header$4 = function Header(props) {
   }));
 };
 
-var _templateObject$O;
-var EmptyMessage = styled.div(_templateObject$O || (_templateObject$O = _taggedTemplateLiteralLoose(["\n  padding: 0 20px;\n  color: ", ";\n  text-align: center;\n  margin: auto;\n  width: 100%;\n"])), function (_ref) {
+var _templateObject$P;
+var EmptyMessage = styled.div(_templateObject$P || (_templateObject$P = _taggedTemplateLiteralLoose(["\n  padding: 0 20px;\n  color: ", ";\n  text-align: center;\n  margin: auto;\n  width: 100%;\n"])), function (_ref) {
   var lightGrey = _ref.theme.colors.lightGrey;
   return lightGrey;
 });
@@ -17803,14 +17949,14 @@ var Filters = Object.assign(function (props) {
   Menu: FiltersMenu
 });
 
-var Provider$2 = React__default.createContext({
+var Provider$3 = React__default.createContext({
   cols: {}
 });
-var useContext$2 = function useContext() {
-  return React__default.useContext(Provider$2);
+var useContext$3 = function useContext() {
+  return React__default.useContext(Provider$3);
 };
 
-var _templateObject$P, _templateObject2$A, _templateObject3$t, _templateObject4$h, _templateObject5$e, _templateObject6$d, _templateObject7$d, _templateObject8$a, _templateObject9$a, _templateObject10$9, _templateObject11$4, _templateObject12$3, _templateObject13$2, _templateObject14$2, _templateObject15$2;
+var _templateObject$Q, _templateObject2$A, _templateObject3$t, _templateObject4$i, _templateObject5$f, _templateObject6$d, _templateObject7$d, _templateObject8$b, _templateObject9$a, _templateObject10$9, _templateObject11$4, _templateObject12$3, _templateObject13$2, _templateObject14$2, _templateObject15$2;
 var aligns = {
   self: {
     horizontal: {
@@ -17839,7 +17985,7 @@ var aligns = {
     }
   }
 };
-var Col = styled.div(_templateObject$P || (_templateObject$P = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  position: relative;\n\n  ", "\n\n  padding: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", ";\n\n  ", ";\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+var Col = styled.div(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  position: relative;\n\n  ", "\n\n  padding: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", ";\n\n  ", ";\n\n  ", "\n\n  ", "\n"])), function (_ref) {
   var width = _ref.width;
 
   if (width === undefined) {
@@ -17849,7 +17995,7 @@ var Col = styled.div(_templateObject$P || (_templateObject$P = _taggedTemplateLi
   }
 
   var w = parseFloat(width) * 100 / 12;
-  return css(_templateObject4$h || (_templateObject4$h = _taggedTemplateLiteralLoose(["\n      flex: 0 0 ", "%;\n      max-width: ", "%;\n      width: 100%;\n    "])), w, w);
+  return css(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteralLoose(["\n      flex: 0 0 ", "%;\n      max-width: ", "%;\n      width: 100%;\n    "])), w, w);
 }, function (_ref2) {
   var spacing = _ref2.spacing;
   var padding = getSpacings(spacing === undefined ? 's1' : spacing);
@@ -17857,7 +18003,7 @@ var Col = styled.div(_templateObject$P || (_templateObject$P = _taggedTemplateLi
 }, function (_ref3) {
   var spacingAround = _ref3.spacingAround;
   if (spacingAround) return;
-  return css(_templateObject5$e || (_templateObject5$e = _taggedTemplateLiteralLoose(["\n      :first-child {\n        padding-left: 0;\n      }\n      :last-child {\n        padding-right: 0;\n      }\n    "])));
+  return css(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteralLoose(["\n      :first-child {\n        padding-left: 0;\n      }\n      :last-child {\n        padding-right: 0;\n      }\n    "])));
 }, function (_ref4) {
   var align = _ref4.align;
   if (align === undefined) return;
@@ -17881,7 +18027,7 @@ var Col = styled.div(_templateObject$P || (_templateObject$P = _taggedTemplateLi
     if (align.content.horizontal !== undefined) {
       var _v2 = align.content.horizontal;
       var _a2 = aligns.content.horizontal;
-      styles.push(css(_templateObject8$a || (_templateObject8$a = _taggedTemplateLiteralLoose(["\n          justify-content: ", ";\n        "])), _a2[_v2]));
+      styles.push(css(_templateObject8$b || (_templateObject8$b = _taggedTemplateLiteralLoose(["\n          justify-content: ", ";\n        "])), _a2[_v2]));
     }
 
     if (align.content.vertical !== undefined) {
@@ -17928,7 +18074,7 @@ var Col = styled.div(_templateObject$P || (_templateObject$P = _taggedTemplateLi
 });
 
 var Col$1 = React__default.forwardRef(function (props, ref) {
-  var context = useContext$2();
+  var context = useContext$3();
 
   var _props = _extends({}, context.cols, props);
 
@@ -17939,16 +18085,16 @@ var Col$1 = React__default.forwardRef(function (props, ref) {
 });
 Col$1.displayName = 'Col';
 
-var Provider$3 = React__default.createContext({
+var Provider$4 = React__default.createContext({
   rows: {},
   cols: {}
 });
-var useContext$3 = function useContext() {
-  return React__default.useContext(Provider$3);
+var useContext$4 = function useContext() {
+  return React__default.useContext(Provider$4);
 };
 
-var _templateObject$Q, _templateObject2$B, _templateObject3$u;
-var Grid = styled.div(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+var _templateObject$R, _templateObject2$B, _templateObject3$u;
+var Grid = styled.div(_templateObject$R || (_templateObject$R = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n\n  ", "\n\n  ", "\n"])), function (_ref) {
   var spacing = _ref.spacing;
   if (spacing === undefined) return;
   var padding = getSpacings(spacing);
@@ -17964,7 +18110,7 @@ var Grid$1 = React__default.forwardRef(function (props, ref) {
   var cols = props.cols || {};
   var rows = props.rows || {};
   var gridProps = filterObject(props, ['cols', 'rows']);
-  return React__default.createElement(Provider$3.Provider, {
+  return React__default.createElement(Provider$4.Provider, {
     value: {
       rows: rows,
       cols: cols
@@ -17975,7 +18121,7 @@ var Grid$1 = React__default.forwardRef(function (props, ref) {
 });
 Grid$1.displayName = 'Grid';
 
-var _templateObject$R, _templateObject2$C, _templateObject3$v, _templateObject4$i, _templateObject5$f, _templateObject6$e, _templateObject7$e, _templateObject8$b, _templateObject9$b, _templateObject10$a;
+var _templateObject$S, _templateObject2$C, _templateObject3$v, _templateObject4$j, _templateObject5$g, _templateObject6$e, _templateObject7$e, _templateObject8$c, _templateObject9$b, _templateObject10$a;
 var horizontalAligns = {
   around: 'space-around',
   between: 'space-between',
@@ -17988,7 +18134,7 @@ var verticalAligns = {
   top: 'start',
   bottom: 'end'
 };
-var Row = styled.div(_templateObject$R || (_templateObject$R = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  color: ", ";\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+var Row = styled.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  color: ", ";\n\n  ", "\n\n  ", "\n"])), function (_ref) {
   var spacing = _ref.spacing;
   if (spacing === undefined) return;
   var padding = getSpacings(spacing);
@@ -18000,11 +18146,11 @@ var Row = styled.div(_templateObject$R || (_templateObject$R = _taggedTemplateLi
 }, function (_ref3) {
   var horizontalAlign = _ref3.horizontalAlign;
   if (horizontalAlign === undefined) return;
-  return css(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteralLoose(["\n      justify-content: ", ";\n    "])), horizontalAligns[horizontalAlign]);
+  return css(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteralLoose(["\n      justify-content: ", ";\n    "])), horizontalAligns[horizontalAlign]);
 }, function (_ref4) {
   var verticalAlign = _ref4.verticalAlign;
   if (verticalAlign === undefined) return;
-  return css(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteralLoose(["\n      align-items: ", ";\n    "])), verticalAligns[verticalAlign]);
+  return css(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteralLoose(["\n      align-items: ", ";\n    "])), verticalAligns[verticalAlign]);
 }, function (_ref5) {
   var striped = _ref5.striped,
       backgroundColor = _ref5.backgroundColor,
@@ -18032,7 +18178,7 @@ var Row = styled.div(_templateObject$R || (_templateObject$R = _taggedTemplateLi
     even: theme.colors.white,
     odd: theme.colors.white
   });
-  return css(_templateObject8$b || (_templateObject8$b = _taggedTemplateLiteralLoose(["\n      :nth-child(even) {\n        background-color: ", ";\n      }\n      :nth-child(odd) {\n        background-color: ", ";\n      }\n    "])), colors.even, colors.odd);
+  return css(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n      :nth-child(even) {\n        background-color: ", ";\n      }\n      :nth-child(odd) {\n        background-color: ", ";\n      }\n    "])), colors.even, colors.odd);
 }, function (_ref6) {
   var fontColor = _ref6.fontColor,
       theme = _ref6.theme;
@@ -18054,12 +18200,12 @@ var Row = styled.div(_templateObject$R || (_templateObject$R = _taggedTemplateLi
 });
 
 var Row$1 = React__default.forwardRef(function (props, ref) {
-  var context = useContext$3();
+  var context = useContext$4();
 
   var cols = _extends({}, context.cols, props.cols || {});
 
   var rowProps = filterObject(props, ['cols'], _extends({}, context.rows));
-  return React__default.createElement(Provider$2.Provider, {
+  return React__default.createElement(Provider$3.Provider, {
     value: {
       cols: cols
     }
@@ -18106,8 +18252,8 @@ var widths = {
   default: '642.5px'
 };
 
-var _templateObject$S, _templateObject2$D, _templateObject3$w, _templateObject4$j, _templateObject5$g, _templateObject6$f, _templateObject7$f, _templateObject8$c, _templateObject9$c, _templateObject10$b;
-var Background = styled.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  backdrop-filter: blur(3px);\n  background-color: ", ";\n"])), function (_ref) {
+var _templateObject$T, _templateObject2$D, _templateObject3$w, _templateObject4$k, _templateObject5$h, _templateObject6$f, _templateObject7$f, _templateObject8$d, _templateObject9$c, _templateObject10$b;
+var Background = styled.div(_templateObject$T || (_templateObject$T = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  backdrop-filter: blur(3px);\n  background-color: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.getColor('black', 25);
 });
@@ -18117,9 +18263,9 @@ var Header$5 = styled.div(_templateObject3$w || (_templateObject3$w = _taggedTem
       colors = _ref2$theme.colors,
       spacings = _ref2$theme.spacings,
       useTypography = _ref2$theme.useTypography;
-  return css(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteralLoose(["\n    border-bottom: 1px solid ", ";\n    padding: ", ";\n\n    ", "\n  "])), colors.lightestGrey, spacings.s4, useTypography('h1'));
+  return css(_templateObject4$k || (_templateObject4$k = _taggedTemplateLiteralLoose(["\n    border-bottom: 1px solid ", ";\n    padding: ", ";\n\n    ", "\n  "])), colors.lightestGrey, spacings.s4, useTypography('h1'));
 });
-var Footer$2 = styled.div(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  ", "\n"])), function (_ref3) {
+var Footer$2 = styled.div(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  ", "\n"])), function (_ref3) {
   var _ref3$theme = _ref3.theme,
       spacings = _ref3$theme.spacings,
       colors = _ref3$theme.colors;
@@ -18129,7 +18275,7 @@ var FooterMessage = styled.div(_templateObject7$f || (_templateObject7$f = _tagg
   var theme = _ref4.theme;
   return theme.getColor('darkBlue', 75);
 });
-var FooterButtons = styled.div(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: ", ";\n"])), function (_ref5) {
+var FooterButtons = styled.div(_templateObject8$d || (_templateObject8$d = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: ", ";\n"])), function (_ref5) {
   var theme = _ref5.theme;
   return theme.spacings.s3;
 });
@@ -18215,8 +18361,8 @@ var Modal = function Modal(props) {
   }))))));
 };
 
-var _templateObject$T;
-var Content$1 = styled.div(_templateObject$T || (_templateObject$T = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
+var _templateObject$U;
+var Content$1 = styled.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.spacings.s5 + " " + theme.spacings.s4;
 });
@@ -18253,8 +18399,8 @@ var ConfirmDelete = function ConfirmDelete(props) {
   }, React__default.createElement(Content$1, null, children || content));
 };
 
-var _templateObject$U;
-var Content$2 = styled.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
+var _templateObject$V;
+var Content$2 = styled.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.spacings.s5 + " " + theme.spacings.s4;
 });
@@ -18294,8 +18440,8 @@ var ConfirmSuccess = function ConfirmSuccess(props) {
   }, React__default.createElement(Content$2, null, children || content));
 };
 
-var _templateObject$V;
-var Content$3 = styled.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
+var _templateObject$W;
+var Content$3 = styled.div(_templateObject$W || (_templateObject$W = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.spacings.s5 + " " + theme.spacings.s4;
 });
@@ -18336,18 +18482,18 @@ var Modal$1 = Object.assign(Modal, {
   Audit: Audit
 });
 
-var _templateObject$W, _templateObject2$E, _templateObject3$x, _templateObject4$k, _templateObject5$h, _templateObject6$g, _templateObject7$g, _templateObject8$d, _templateObject9$d, _templateObject10$c, _templateObject11$5;
-var Container$c = styled.div(_templateObject$W || (_templateObject$W = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 300px;\n  position: absolute;\n  padding: 14px;\n"])));
+var _templateObject$X, _templateObject2$E, _templateObject3$x, _templateObject4$l, _templateObject5$i, _templateObject6$g, _templateObject7$g, _templateObject8$e, _templateObject9$d, _templateObject10$c, _templateObject11$5;
+var Container$c = styled.div(_templateObject$X || (_templateObject$X = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 300px;\n  position: absolute;\n  padding: 14px;\n"])));
 var Header$6 = styled.div(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
 var HeaderImage = styled.div(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteralLoose(["\n  width: 43px;\n  height: 44px;\n  background-color: #ebebeb;\n"])));
-var HeaderContent = styled.div(_templateObject4$k || (_templateObject4$k = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1;\n"])));
-var MainContent = styled.div(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n"])));
+var HeaderContent = styled.div(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1;\n"])));
+var MainContent = styled.div(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n"])));
 var HeaderLine = styled.div(_templateObject6$g || (_templateObject6$g = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
   return props.height;
 }, function (props) {
   return props.size === 'mini' && css(_templateObject7$g || (_templateObject7$g = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && css(_templateObject8$d || (_templateObject8$d = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && css(_templateObject8$e || (_templateObject8$e = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
   return props.size === 'medium' && css(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
@@ -18388,28 +18534,28 @@ var Template1 = function Template1(props) {
   })));
 };
 
-var _templateObject$X, _templateObject2$F, _templateObject3$y, _templateObject4$l, _templateObject5$i;
-var HeaderLine$1 = styled.div(_templateObject$X || (_templateObject$X = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
+var _templateObject$Y, _templateObject2$F, _templateObject3$y, _templateObject4$m, _templateObject5$j;
+var HeaderLine$1 = styled.div(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
   return props.height;
 }, function (props) {
   return props.size === 'mini' && css(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
   return props.size === 'small' && css(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && css(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
+  return props.size === 'medium' && css(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
-  return props.size === 'large' && css(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
+  return props.size === 'large' && css(_templateObject5$j || (_templateObject5$j = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
 
-var _templateObject$Y, _templateObject2$G, _templateObject3$z, _templateObject4$m, _templateObject5$j, _templateObject6$h, _templateObject7$h, _templateObject8$e;
-var Container$d = styled.div(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
+var _templateObject$Z, _templateObject2$G, _templateObject3$z, _templateObject4$n, _templateObject5$k, _templateObject6$h, _templateObject7$h, _templateObject8$f;
+var Container$d = styled.div(_templateObject$Z || (_templateObject$Z = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
 var Template2Container = styled(Container$d)(_templateObject2$G || (_templateObject2$G = _taggedTemplateLiteralLoose(["\n  background: #fff;\n  border: 2px solid #ebebeb;\n"])));
 var Header$7 = styled.div(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
-var HeaderImage$1 = styled.div(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteralLoose(["\n  width: 43px;\n  height: 44px;\n  background-color: #ebebeb;\n"])));
-var HeaderContent$1 = styled.div(_templateObject5$j || (_templateObject5$j = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1;\n"])));
+var HeaderImage$1 = styled.div(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n  width: 43px;\n  height: 44px;\n  background-color: #ebebeb;\n"])));
+var HeaderContent$1 = styled.div(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1;\n"])));
 var MainContent$1 = styled.div(_templateObject6$h || (_templateObject6$h = _taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n"])));
 var MainLine$1 = styled(HeaderLine$1)(_templateObject7$h || (_templateObject7$h = _taggedTemplateLiteralLoose(["\n  margin-bottom: 14px;\n  margin-left: 0;\n"])));
-var HeaderLine$2 = styled(HeaderLine$1)(_templateObject8$e || (_templateObject8$e = _taggedTemplateLiteralLoose([""])));
+var HeaderLine$2 = styled(HeaderLine$1)(_templateObject8$f || (_templateObject8$f = _taggedTemplateLiteralLoose([""])));
 
 var Template2 = function Template2(props) {
   if (!props.loading) return React__default.createElement(React__default.Fragment, null);
@@ -18432,8 +18578,8 @@ var Template2 = function Template2(props) {
   })));
 };
 
-var _templateObject$Z, _templateObject2$H, _templateObject3$A;
-var Container$e = styled.div(_templateObject$Z || (_templateObject$Z = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
+var _templateObject$_, _templateObject2$H, _templateObject3$A;
+var Container$e = styled.div(_templateObject$_ || (_templateObject$_ = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
 var Template3Container = styled(Container$e)(_templateObject2$H || (_templateObject2$H = _taggedTemplateLiteralLoose([""])));
 var Template3Line = styled(HeaderLine$1)(_templateObject3$A || (_templateObject3$A = _taggedTemplateLiteralLoose(["\n  background-color: #dadada;\n  height: ", ";\n"])), function (props) {
   return props.height;
@@ -18464,21 +18610,21 @@ var Template3 = function Template3(props) {
   }));
 };
 
-var _templateObject$_, _templateObject2$I, _templateObject3$B, _templateObject4$n, _templateObject5$k, _templateObject6$i, _templateObject7$i, _templateObject8$f;
-var Container$f = styled.div(_templateObject$_ || (_templateObject$_ = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
+var _templateObject$$, _templateObject2$I, _templateObject3$B, _templateObject4$o, _templateObject5$l, _templateObject6$i, _templateObject7$i, _templateObject8$g;
+var Container$f = styled.div(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
 var HeaderLine$3 = styled.div(_templateObject2$I || (_templateObject2$I = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
   return props.height;
 }, function (props) {
   return props.size === 'mini' && css(_templateObject3$B || (_templateObject3$B = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && css(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && css(_templateObject4$o || (_templateObject4$o = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && css(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
+  return props.size === 'medium' && css(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
   return props.size === 'large' && css(_templateObject6$i || (_templateObject6$i = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
 var Template4Container = styled(Container$f)(_templateObject7$i || (_templateObject7$i = _taggedTemplateLiteralLoose(["\n  border: 1px solid #e6e6e7;\n  border-radius: 4px;\n"])));
-var CustomLine = styled(HeaderLine$3)(_templateObject8$f || (_templateObject8$f = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n"])), function (props) {
+var CustomLine = styled(HeaderLine$3)(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n"])), function (props) {
   return props.width;
 }, function (props) {
   return props.height;
@@ -18531,21 +18677,21 @@ var Template4 = function Template4(props) {
   }));
 };
 
-var _templateObject$$, _templateObject2$J, _templateObject3$C, _templateObject4$o, _templateObject5$l, _templateObject6$j, _templateObject7$j, _templateObject8$g, _templateObject9$e;
-var Container$g = styled.div(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 746px;\n  height: 169px;\n  border: 1px solid #e6e6e7;\n  border-radius: 4px;\n  padding: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
+var _templateObject$10, _templateObject2$J, _templateObject3$C, _templateObject4$p, _templateObject5$m, _templateObject6$j, _templateObject7$j, _templateObject8$h, _templateObject9$e;
+var Container$g = styled.div(_templateObject$10 || (_templateObject$10 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 746px;\n  height: 169px;\n  border: 1px solid #e6e6e7;\n  border-radius: 4px;\n  padding: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
 var Circle = styled.div(_templateObject2$J || (_templateObject2$J = _taggedTemplateLiteralLoose(["\n  width: 141px;\n  height: 141px;\n  background-color: #dddedf;\n  border-radius: 50%;\n"])));
 var HeaderLine$4 = styled.div(_templateObject3$C || (_templateObject3$C = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
   return props.height;
 }, function (props) {
-  return props.size === 'mini' && css(_templateObject4$o || (_templateObject4$o = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && css(_templateObject4$p || (_templateObject4$p = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && css(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && css(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
   return props.size === 'medium' && css(_templateObject6$j || (_templateObject6$j = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
   return props.size === 'large' && css(_templateObject7$j || (_templateObject7$j = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
-var CustomLine$1 = styled(HeaderLine$4)(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n"])), function (props) {
+var CustomLine$1 = styled(HeaderLine$4)(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n"])), function (props) {
   return props.width;
 }, function (props) {
   return props.height;
@@ -18579,20 +18725,20 @@ var Template5 = function Template5(props) {
   })));
 };
 
-var _templateObject$10, _templateObject2$K, _templateObject3$D, _templateObject4$p, _templateObject5$m, _templateObject6$k, _templateObject7$k, _templateObject8$h, _templateObject9$f;
-var Container$h = styled.div(_templateObject$10 || (_templateObject$10 = _taggedTemplateLiteralLoose(["\n  width: 395px;\n\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background-color: #f5f5f5;\n"])));
+var _templateObject$11, _templateObject2$K, _templateObject3$D, _templateObject4$q, _templateObject5$n, _templateObject6$k, _templateObject7$k, _templateObject8$i, _templateObject9$f;
+var Container$h = styled.div(_templateObject$11 || (_templateObject$11 = _taggedTemplateLiteralLoose(["\n  width: 395px;\n\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background-color: #f5f5f5;\n"])));
 var Header$8 = styled.div(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n"])));
 var Footer$3 = styled.div(_templateObject3$D || (_templateObject3$D = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  border-top: 1px solid #b1b1b3;\n  height: 50px;\n"])));
-var HeaderLine$5 = styled.div(_templateObject4$p || (_templateObject4$p = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
+var HeaderLine$5 = styled.div(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
   return props.height;
 }, function (props) {
-  return props.size === 'mini' && css(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && css(_templateObject5$n || (_templateObject5$n = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
   return props.size === 'small' && css(_templateObject6$k || (_templateObject6$k = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
   return props.size === 'medium' && css(_templateObject7$k || (_templateObject7$k = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
-  return props.size === 'large' && css(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
+  return props.size === 'large' && css(_templateObject8$i || (_templateObject8$i = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
 var CustomLine$2 = styled(HeaderLine$5)(_templateObject9$f || (_templateObject9$f = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border: 1px solid #dedede5e;\n"])), function (props) {
   return props.width;
@@ -18622,21 +18768,21 @@ var Template6 = function Template6(props) {
   })));
 };
 
-var _templateObject$11, _templateObject2$L, _templateObject3$E, _templateObject4$q, _templateObject5$n, _templateObject6$l, _templateObject7$l, _templateObject8$i, _templateObject9$g, _templateObject10$d;
-var Container$i = styled.div(_templateObject$11 || (_templateObject$11 = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 110px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
+var _templateObject$12, _templateObject2$L, _templateObject3$E, _templateObject4$r, _templateObject5$o, _templateObject6$l, _templateObject7$l, _templateObject8$j, _templateObject9$g, _templateObject10$d;
+var Container$i = styled.div(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 110px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
 var Header$9 = styled.div(_templateObject2$L || (_templateObject2$L = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
 var HeaderLine$6 = styled.div(_templateObject3$E || (_templateObject3$E = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
   return props.height;
 }, function (props) {
-  return props.size === 'mini' && css(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && css(_templateObject4$r || (_templateObject4$r = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && css(_templateObject5$n || (_templateObject5$n = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && css(_templateObject5$o || (_templateObject5$o = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
   return props.size === 'medium' && css(_templateObject6$l || (_templateObject6$l = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
   return props.size === 'large' && css(_templateObject7$l || (_templateObject7$l = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
-var CustomLine$3 = styled(HeaderLine$6)(_templateObject8$i || (_templateObject8$i = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border: 1px solid #dedede5e;\n"])), function (props) {
+var CustomLine$3 = styled(HeaderLine$6)(_templateObject8$j || (_templateObject8$j = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border: 1px solid #dedede5e;\n"])), function (props) {
   return props.width;
 }, function (props) {
   return props.height;
@@ -18656,21 +18802,21 @@ var Template7 = function Template7(props) {
   })), React__default.createElement(Main$2, null, React__default.createElement(Circle$1, null), React__default.createElement(Circle$1, null), React__default.createElement(Circle$1, null), React__default.createElement(Circle$1, null), React__default.createElement(Circle$1, null)));
 };
 
-var _templateObject$12, _templateObject2$M, _templateObject3$F, _templateObject4$r, _templateObject5$o, _templateObject6$m, _templateObject7$m, _templateObject8$j, _templateObject9$h;
-var Container$j = styled.div(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 110px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
+var _templateObject$13, _templateObject2$M, _templateObject3$F, _templateObject4$s, _templateObject5$p, _templateObject6$m, _templateObject7$m, _templateObject8$k, _templateObject9$h;
+var Container$j = styled.div(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 110px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
 var Header$a = styled.div(_templateObject2$M || (_templateObject2$M = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
 var HeaderLine$7 = styled.div(_templateObject3$F || (_templateObject3$F = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
   return props.height;
 }, function (props) {
-  return props.size === 'mini' && css(_templateObject4$r || (_templateObject4$r = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && css(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && css(_templateObject5$o || (_templateObject5$o = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && css(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
   return props.size === 'medium' && css(_templateObject6$m || (_templateObject6$m = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
   return props.size === 'large' && css(_templateObject7$m || (_templateObject7$m = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
-var CustomLine$4 = styled(HeaderLine$7)(_templateObject8$j || (_templateObject8$j = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border: 1px solid #dedede5e;\n"])), function (props) {
+var CustomLine$4 = styled(HeaderLine$7)(_templateObject8$k || (_templateObject8$k = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border: 1px solid #dedede5e;\n"])), function (props) {
   return props.width;
 }, function (props) {
   return props.height;
@@ -18699,21 +18845,21 @@ var Template8 = function Template8(props) {
   })));
 };
 
-var _templateObject$13, _templateObject2$N, _templateObject3$G, _templateObject4$s, _templateObject5$p, _templateObject6$n, _templateObject7$n, _templateObject8$k, _templateObject9$i, _templateObject10$e;
-var Container$k = styled.div(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 245px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
+var _templateObject$14, _templateObject2$N, _templateObject3$G, _templateObject4$t, _templateObject5$q, _templateObject6$n, _templateObject7$n, _templateObject8$l, _templateObject9$i, _templateObject10$e;
+var Container$k = styled.div(_templateObject$14 || (_templateObject$14 = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 245px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
 var Header$b = styled.div(_templateObject2$N || (_templateObject2$N = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
 var HeaderLine$8 = styled.div(_templateObject3$G || (_templateObject3$G = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 7px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
   return props.height;
 }, function (props) {
-  return props.size === 'mini' && css(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && css(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && css(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && css(_templateObject5$q || (_templateObject5$q = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
   return props.size === 'medium' && css(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
   return props.size === 'large' && css(_templateObject7$n || (_templateObject7$n = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
-var CustomLine$5 = styled(HeaderLine$8)(_templateObject8$k || (_templateObject8$k = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border: 1px solid #dedede5e;\n"])), function (props) {
+var CustomLine$5 = styled(HeaderLine$8)(_templateObject8$l || (_templateObject8$l = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border: 1px solid #dedede5e;\n"])), function (props) {
   return props.width;
 }, function (props) {
   return props.height;
@@ -18738,21 +18884,21 @@ var Template8$1 = function Template8(props) {
   })), React__default.createElement(Main$4, null, React__default.createElement(Circle$2, null)));
 };
 
-var _templateObject$14, _templateObject2$O, _templateObject3$H, _templateObject4$t, _templateObject5$q, _templateObject6$o, _templateObject7$o, _templateObject8$l, _templateObject9$j, _templateObject10$f, _templateObject11$6;
-var Container$l = styled.div(_templateObject$14 || (_templateObject$14 = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 245px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
+var _templateObject$15, _templateObject2$O, _templateObject3$H, _templateObject4$u, _templateObject5$r, _templateObject6$o, _templateObject7$o, _templateObject8$m, _templateObject9$j, _templateObject10$f, _templateObject11$6;
+var Container$l = styled.div(_templateObject$15 || (_templateObject$15 = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 245px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
 var Header$c = styled.div(_templateObject2$O || (_templateObject2$O = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
 var HeaderLine$9 = styled.div(_templateObject3$H || (_templateObject3$H = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 7px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
   return props.height;
 }, function (props) {
-  return props.size === 'mini' && css(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && css(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && css(_templateObject5$q || (_templateObject5$q = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && css(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
   return props.size === 'medium' && css(_templateObject6$o || (_templateObject6$o = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
   return props.size === 'large' && css(_templateObject7$o || (_templateObject7$o = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
-var CustomLine$6 = styled(HeaderLine$9)(_templateObject8$l || (_templateObject8$l = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border: 1px solid #dedede5e;\n"])), function (props) {
+var CustomLine$6 = styled(HeaderLine$9)(_templateObject8$m || (_templateObject8$m = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border: 1px solid #dedede5e;\n"])), function (props) {
   return props.width;
 }, function (props) {
   return props.height;
@@ -18882,8 +19028,8 @@ var Placeholder = function Placeholder(props) {
   }
 };
 
-var _templateObject$15, _templateObject2$P, _templateObject3$I, _templateObject4$u, _templateObject5$r, _templateObject6$p, _templateObject7$p;
-var Container$m = styled.div(_templateObject$15 || (_templateObject$15 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  span {\n    display: inline-block;\n    margin-left: 7px;\n    color: #000000cc;\n  }\n"])));
+var _templateObject$16, _templateObject2$P, _templateObject3$I, _templateObject4$v, _templateObject5$s, _templateObject6$p, _templateObject7$p;
+var Container$m = styled.div(_templateObject$16 || (_templateObject$16 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  span {\n    display: inline-block;\n    margin-left: 7px;\n    color: #000000cc;\n  }\n"])));
 var Progress = styled.div(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteralLoose(["\n  width: 64px;\n  height: 12px;\n  border: 1px solid #e4e4e4;\n  div {\n    width: ", ";\n    max-width: 64px;\n    height: 100%;\n    ", "\n\n    ", "\n    ", "\n      ", "\n      ", "\n  }\n"])), function (props) {
   return props.value + "%";
 }, function (props) {
@@ -18892,12 +19038,12 @@ var Progress = styled.div(_templateObject2$P || (_templateObject2$P = _taggedTem
     return theme.colors.warningGray;
   });
 }, function (props) {
-  return props.type === 'info' && css(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref2) {
+  return props.type === 'info' && css(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref2) {
     var theme = _ref2.theme;
     return theme.colors.blue;
   });
 }, function (props) {
-  return props.type === 'danger' && css(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref3) {
+  return props.type === 'danger' && css(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref3) {
     var theme = _ref3.theme;
     return theme.colors.warningRed;
   });
@@ -18917,8 +19063,8 @@ var ProgressBar = function ProgressBar(props) {
   return React__default.createElement(Container$m, null, React__default.createElement(Progress, Object.assign({}, props), React__default.createElement("div", null)), React__default.createElement("span", null, " ", props.value || '0', "%"));
 };
 
-var _templateObject$16, _templateObject2$Q, _templateObject3$J, _templateObject4$v, _templateObject5$s, _templateObject6$q, _templateObject7$q, _templateObject8$m;
-var Container$n = styled.div(_templateObject$16 || (_templateObject$16 = _taggedTemplateLiteralLoose(["\n  display: block;\n"])));
+var _templateObject$17, _templateObject2$Q, _templateObject3$J, _templateObject4$w, _templateObject5$t, _templateObject6$q, _templateObject7$q, _templateObject8$n;
+var Container$n = styled.div(_templateObject$17 || (_templateObject$17 = _taggedTemplateLiteralLoose(["\n  display: block;\n"])));
 var delimiters = {
   blue: ['blue'],
   grey: ['warningGray']
@@ -18951,20 +19097,20 @@ var Tabs = styled.ul(_templateObject2$Q || (_templateObject2$Q = _taggedTemplate
     return internal ? "1px solid " + theme.getColor.apply(theme, delimiters[delimiter || 'grey']) : "2px solid " + theme.getColor.apply(theme, delimiters[delimiter || 'blue']);
   }();
 
-  return css(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteralLoose(["\n      border-bottom: ", ";\n\n      + div {\n        border: 1px solid ", ";\n        border-top-width: 0px;\n        border-radius: 0px 0px 2px 2px;\n        padding: ", ";\n      }\n    "])), border, theme.getColor.apply(theme, delimiters.grey), theme.spacings.s3);
+  return css(_templateObject4$w || (_templateObject4$w = _taggedTemplateLiteralLoose(["\n      border-bottom: ", ";\n\n      + div {\n        border: 1px solid ", ";\n        border-top-width: 0px;\n        border-radius: 0px 0px 2px 2px;\n        padding: ", ";\n      }\n    "])), border, theme.getColor.apply(theme, delimiters.grey), theme.spacings.s3);
 }, function (_ref3) {
   var theme = _ref3.theme,
       internal = _ref3.$internal;
   return internal ? theme.spacings.s6 : 0;
 });
-var Tab = styled.li(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  ", "\n"])), function (_ref4) {
+var Tab = styled.li(_templateObject5$t || (_templateObject5$t = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  ", "\n"])), function (_ref4) {
   var theme = _ref4.theme,
       active = _ref4.$active,
       internal = _ref4.$internal;
   return css(_templateObject6$q || (_templateObject6$q = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    padding: ", ";\n    gap: ", ";\n\n    ", "\n\n    span {\n      color: ", ";\n    }\n  "])), theme.colors[active ? 'blue' : 'white'], theme.spacings.s3, theme.spacings.s3, internal ? css(_templateObject7$q || (_templateObject7$q = _taggedTemplateLiteralLoose(["\n          border-radius: 4px 4px 0 0;\n\n          > span {\n            ", "\n            line-height: 17px;\n          }\n        "])), function (_ref5) {
     var theme = _ref5.theme;
     return theme.useTypography('h4');
-  }) : css(_templateObject8$m || (_templateObject8$m = _taggedTemplateLiteralLoose(["\n          box-shadow: 0px 3px 6px ", ";\n\n          > span {\n            ", "\n            line-height: 19px;\n          }\n        "])), theme.getColor('black', 15), function (_ref6) {
+  }) : css(_templateObject8$n || (_templateObject8$n = _taggedTemplateLiteralLoose(["\n          box-shadow: 0px 3px 6px ", ";\n\n          > span {\n            ", "\n            line-height: 19px;\n          }\n        "])), theme.getColor('black', 15), function (_ref6) {
     var theme = _ref6.theme;
     return theme.useTypography('h2');
   }), theme.colors[active ? 'white' : 'darkBlue']);
@@ -18986,6 +19132,8 @@ var Tabs$1 = function Tabs$1(props) {
       status = _useState[0],
       setStatus = _useState[1];
 
+  var onClose = props.onClose || function () {};
+
   var activate = function activate(active, length) {
     setStatus(function (prev) {
       if (length !== undefined && length !== prev.length) {
@@ -19029,7 +19177,7 @@ var Tabs$1 = function Tabs$1(props) {
     activate(index);
   };
 
-  var onClickClose = function onClickClose(index) {
+  var onClickClose = function onClickClose(index, tab, event) {
     var getActive = function getActive(removed, prev) {
       for (var i = index - 1; i > -1; i--) {
         if (removed[i] !== 'closed') {
@@ -19062,9 +19210,10 @@ var Tabs$1 = function Tabs$1(props) {
 
       return status;
     });
+    onClose(index, tab, event);
   };
 
-  var divProps = filterObject(props, ['options', 'activeState', 'internal', 'maxTabs', 'onMaxTabsExceeded', 'alwaysOpen', 'delimiter', 'spacing']);
+  var divProps = filterObject(props, ['options', 'activeState', 'internal', 'maxTabs', 'onMaxTabsExceeded', 'onClose', 'alwaysOpen', 'delimiter', 'spacing']);
   return React__default.createElement(Container$n, Object.assign({}, divProps), React__default.createElement(Tabs, {
     "$internal": props.internal,
     "$delimiter": props.delimiter,
@@ -19081,8 +19230,8 @@ var Tabs$1 = function Tabs$1(props) {
     }, React__default.createElement("span", null, tab.label), !props.alwaysOpen && React__default.createElement(Icon, {
       type: 'feather',
       icon: 'x',
-      onClick: function onClick() {
-        return onClickClose(index);
+      onClick: function onClick(e) {
+        return onClickClose(index, tab, e);
       },
       width: '14px',
       height: '14px',
@@ -19094,8 +19243,8 @@ var Tabs$1 = function Tabs$1(props) {
   }));
 };
 
-var _templateObject$17;
-var Container$o = styled.textarea(_templateObject$17 || (_templateObject$17 = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  resize: none;\n  outline: 0;\n  border: 1px solid #c8c8c8;\n  padding: 14px;\n  border-radius: 4px;\n  color: #192338;\n"])), function (props) {
+var _templateObject$18;
+var Container$o = styled.textarea(_templateObject$18 || (_templateObject$18 = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  resize: none;\n  outline: 0;\n  border: 1px solid #c8c8c8;\n  padding: 14px;\n  border-radius: 4px;\n  color: #192338;\n"])), function (props) {
   return "" + props.width;
 }, function (props) {
   return "" + props.height;
@@ -19105,17 +19254,17 @@ var TextArea = function TextArea(props) {
   return React__default.createElement(Container$o, Object.assign({}, props));
 };
 
-var _templateObject$18, _templateObject2$R, _templateObject3$K, _templateObject4$w, _templateObject5$t, _templateObject6$r;
-var Container$p = styled.div(_templateObject$18 || (_templateObject$18 = _taggedTemplateLiteralLoose(["\n  border-radius: 4px;\n  width: ", ";\n  height: 88px;\n  border: 1px solid transparent;\n  position: relative;\n\n  ", "\n\n  ", "\n\n    ", "\n\n  svg {\n    cursor: pointer;\n    position: absolute;\n    top: 14px;\n    right: 14px;\n    width: 13px;\n    height: 13px;\n  }\n"])), function (props) {
+var _templateObject$19, _templateObject2$R, _templateObject3$K, _templateObject4$x, _templateObject5$u, _templateObject6$r;
+var Container$p = styled.div(_templateObject$19 || (_templateObject$19 = _taggedTemplateLiteralLoose(["\n  border-radius: 4px;\n  width: ", ";\n  height: 88px;\n  border: 1px solid transparent;\n  position: relative;\n\n  ", "\n\n  ", "\n\n    ", "\n\n  svg {\n    cursor: pointer;\n    position: absolute;\n    top: 14px;\n    right: 14px;\n    width: 13px;\n    height: 13px;\n  }\n"])), function (props) {
   return props.size === 'large' ? '837px' : '460px';
 }, function (props) {
   return props.color === 'success' && css(_templateObject2$R || (_templateObject2$R = _taggedTemplateLiteralLoose(["\n      background-color: #fcfff5;\n      opacity: 1;\n      border-color: #a8c599;\n      h4 {\n        color: #1e561f;\n      }\n      p {\n        color: #1e561fcc;\n      }\n    "])));
 }, function (props) {
   return props.color === 'error' && css(_templateObject3$K || (_templateObject3$K = _taggedTemplateLiteralLoose(["\n      background-color: #fff6f6;\n      opacity: 1;\n      border-color: #973937;\n      h4 {\n        color: #973937;\n      }\n      p {\n        color: #973937;\n      }\n    "])));
 }, function (props) {
-  return props.color === 'warning' && css(_templateObject4$w || (_templateObject4$w = _taggedTemplateLiteralLoose(["\n      background-color: #fffaf3;\n      opacity: 1;\n      border-color: #ccbea0;\n      h4 {\n        color: #7a4d05;\n      }\n      p {\n        color: #7a4d05cc;\n      }\n    "])));
+  return props.color === 'warning' && css(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose(["\n      background-color: #fffaf3;\n      opacity: 1;\n      border-color: #ccbea0;\n      h4 {\n        color: #7a4d05;\n      }\n      p {\n        color: #7a4d05cc;\n      }\n    "])));
 });
-var IconContainer$2 = styled.div(_templateObject5$t || (_templateObject5$t = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 14px 14px 0 0;\n  margin: 0;\n"])));
+var IconContainer$2 = styled.div(_templateObject5$u || (_templateObject5$u = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 14px 14px 0 0;\n  margin: 0;\n"])));
 var IconContent = styled.div(_templateObject6$r || (_templateObject6$r = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  padding: 13px 0 21px 28px;\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n\n  h4 {\n    margin-bottom: 7px;\n    font-size: 18p;\n  }\n  p {\n    margin: 0;\n    font-size: 14px;\n    max-width: 380px;\n  }\n"])));
 
 var Toast = function Toast(props) {
@@ -19128,8 +19277,8 @@ var Toast = function Toast(props) {
   })), React__default.createElement(IconContent, null, React__default.createElement("h4", null, props.title), React__default.createElement("p", null, " ", props.description)));
 };
 
-var _templateObject$19, _templateObject2$S, _templateObject3$L, _templateObject4$x, _templateObject5$u;
-var Image = styled.img(_templateObject$19 || (_templateObject$19 = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n  max-height: 100%;\n"])));
+var _templateObject$1a, _templateObject2$S, _templateObject3$L, _templateObject4$y, _templateObject5$v;
+var Image = styled.img(_templateObject$1a || (_templateObject$1a = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n  max-height: 100%;\n"])));
 var Container$q = styled.div(_templateObject2$S || (_templateObject2$S = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-flex;\n\n  &,\n  ", " {\n    width: ", ";\n\n    height: ", ";\n  }\n"])), Image, function (_ref) {
   var width = _ref.width;
 
@@ -19161,11 +19310,11 @@ var Dimmer = styled.div(_templateObject3$L || (_templateObject3$L = _taggedTempl
   var theme = _ref3.theme;
   return theme.getColor('greyishBlue', 50);
 });
-var Button$6 = styled(Button$1)(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n"])), function (_ref4) {
+var Button$6 = styled(Button$1)(_templateObject4$y || (_templateObject4$y = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.getColor('white', 50);
 });
-var ModalContent = styled.div(_templateObject5$u || (_templateObject5$u = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n\n  img {\n    max-height: 100%;\n    max-width: 100%;\n  }\n"])));
+var ModalContent = styled.div(_templateObject5$v || (_templateObject5$v = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n\n  img {\n    max-height: 100%;\n    max-width: 100%;\n  }\n"])));
 
 var _excluded$3 = ["src", "defaultClickOptions"];
 
@@ -19201,5 +19350,5 @@ var Zoom = function Zoom(props) {
   }))));
 };
 
-export { AbsoluteContainer as MwAbsoluteContainer, AppliedFilters as MwAppliedFilters, Button$1 as MwButton, Calendar as MwCalendar, Card as MwCard, EllipsisContainer$1 as MwEllipsisContainer, Filters as MwFilters, Grid$2 as MwGrid, Icon as MwIcon, Indicator as MwIndicator, Input$5 as MwInput, Link as MwLink, Loader as MwLoader, Menu as MwMenu, Modal$1 as MwModal, Placeholder as MwPlaceholder, ProgressBar as MwProgressBar, ScrollContainer as MwScrollContainer, Tabs$1 as MwTabs, TextArea as MwTextArea, Toast as MwToast, Transition as MwTransition, Zoom as MwZoom, ThemeProvider, useTransition as useMwTransition };
+export { AbsoluteContainer as MwAbsoluteContainer, AppliedFilters as MwAppliedFilters, Button$1 as MwButton, Calendar as MwCalendar, Card as MwCard, EllipsisContainer$1 as MwEllipsisContainer, Filters as MwFilters, Form as MwForm, Grid$2 as MwGrid, Icon as MwIcon, Indicator as MwIndicator, Input$5 as MwInput, Link as MwLink, Loader as MwLoader, Menu as MwMenu, Modal$1 as MwModal, Placeholder as MwPlaceholder, ProgressBar as MwProgressBar, ScrollContainer as MwScrollContainer, Tabs$1 as MwTabs, TextArea as MwTextArea, Toast as MwToast, Transition as MwTransition, Zoom as MwZoom, ThemeProvider, useTransition as useMwTransition };
 //# sourceMappingURL=index.modern.js.map