npm - @mw-kit/mw-ui - Versions diffs - 1.7.69 → 1.7.71 - Mend

@mw-kit/mw-ui 1.7.69 → 1.7.71

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/dist/index.js CHANGED Viewed

@@ -12210,7 +12210,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__default.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;
@@ -12226,11 +12226,11 @@ var Input = styled__default.input(_templateObject4$3 || (_templateObject4$3 = _t
   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;
@@ -12245,7 +12245,7 @@ var Input = styled__default.input(_templateObject4$3 || (_templateObject4$3 = _t
   return styled.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 styled.css(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteralLoose(["\n        padding: 0;\n      "])));
@@ -12254,17 +12254,17 @@ var Input = styled__default.input(_templateObject4$3 || (_templateObject4$3 = _t
   return styled.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 styled.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 styled.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) {
@@ -12278,33 +12278,33 @@ var InputContainer = styled__default.div(_templateObject12$1 || (_templateObject
   var width = _ref13.width;
   return width || '100%';
 });
-var Label = styled__default.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__default.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 styled.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 styled.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;
@@ -12317,36 +12317,123 @@ var Label = styled__default.label(_templateObject13$1 || (_templateObject13$1 =
   return styled.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__default.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 styled.css(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
 });
+var ViewModeContainer = styled__default.div(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref23) {
+  var children = _ref23.children;
+  if (children) return;
+  return styled.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);
   React.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;
@@ -12356,18 +12443,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 () {};
@@ -12458,16 +12545,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
@@ -12487,17 +12577,18 @@ var Checkmark = styled__default.div(_templateObject$6 || (_templateObject$6 = _t
   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__default.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__default.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 = {
@@ -12541,17 +12632,19 @@ var Label$1 = styled__default.label(_templateObject2$6 || (_templateObject2$6 =
   return styled.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 styled.css(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n        cursor: pointer;\n      "])));
+  if (disabled) {
+    return styled.css(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n        opacity: 0.5;\n      "])));
   }
-  return styled.css(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
+  if (readOnly) return;
+  return styled.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 styled.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) {
@@ -12561,32 +12654,38 @@ var Label$1 = styled__default.label(_templateObject2$6 || (_templateObject2$6 =
   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 styled.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 && styled.css(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n        width: ", ";\n      "])), width);
 });
-var LabelContent = styled__default.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__default.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 styled.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 () {
@@ -12602,18 +12701,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,
@@ -14463,9 +14567,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;
@@ -14475,7 +14579,7 @@ var HeaderContainer = styled__default.div(_templateObject$l || (_templateObject$
 });
 var Header$1 = function Header() {
-  var context = useContext();
+  var context = useContext$1();
   if (!context.props.search) {
     return React__default.createElement(React__default.Fragment, null);
@@ -14588,7 +14692,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
@@ -14603,13 +14707,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,
@@ -14671,7 +14775,7 @@ var SelectAllContainer = styled__default.div(_templateObject3$e || (_templateObj
 });
 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);
@@ -14720,7 +14824,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];
@@ -14819,7 +14923,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,
@@ -15577,86 +15681,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__default.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__default.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 styled.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 styled.css(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteralLoose(["\n      :before {\n        content: '';\n        white-space: pre;\n      }\n    "])));
 });
-var Label$4 = styled__default.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__default.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 styled.css(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteralLoose(["\n        > span {\n          cursor: pointer;\n        }\n      "])));
+    return styled.css(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteralLoose(["\n        > span {\n          cursor: pointer;\n        }\n      "])));
   }
-  return styled.css(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
-}, function (_ref5) {
-  var invalid = _ref5.invalid;
+  return styled.css(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
+}, function (_ref6) {
+  var invalid = _ref6.$invalid;
   if (!invalid) {
-    return styled.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 styled.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 styled.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 styled.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;
@@ -15730,20 +15855,27 @@ var NavBar = styled__default.div(_templateObject$x || (_templateObject$x = _tagg
   return theme.colors.blue;
 });
-var _templateObject$y, _templateObject2$q, _templateObject3$l;
-var Label$5 = styled__default.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__default.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 styled.css(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteralLoose(["\n        width: ", ";\n      "])), width);
+  }
+  return !viewMode && styled.css(_templateObject3$l || (_templateObject3$l = _taggedTemplateLiteralLoose(["\n        width: 100%;\n      "])));
 }, function (_ref3) {
-  var disabled = _ref3.disabled;
+  var disabled = _ref3.$disabled;
   if (!disabled) return;
-  return styled.css(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
+  return styled.css(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
 }, LabelContainer$4, function (_ref4) {
-  var required = _ref4.required;
-  return required && styled.css(_templateObject3$l || (_templateObject3$l = _taggedTemplateLiteralLoose(["\n          :after {\n            content: ' *';\n          }\n        "])));
+  var required = _ref4.$required,
+      viewMode = _ref4.$viewMode;
+  return required && !viewMode && styled.css(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteralLoose(["\n          :after {\n            content: ' *';\n          }\n        "])));
 }, NavBar);
 var _templateObject$z, _templateObject2$r;
@@ -15765,15 +15897,18 @@ var LabelsContainer = styled__default.div(_templateObject$B || (_templateObject$
   var position = _ref.position;
   if (position === 'bottom') {
-    return styled.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 styled.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 styled.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 styled.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__default.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n  height: 17px;\n"])));
+var _templateObject$D;
+var ViewModeContainer$1 = styled__default.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;
@@ -15872,12 +16007,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,
@@ -15968,12 +16111,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
@@ -16027,8 +16173,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__default.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__default.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');
 });
@@ -16042,11 +16188,11 @@ var Label$6 = styled__default.label(_templateObject2$t || (_templateObject2$t =
     return styled.css(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteralLoose(["\n        > span {\n          cursor: pointer;\n        }\n      "])));
   }
-  return styled.css(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
+  return styled.css(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
 }, function (_ref4) {
   var required = _ref4.required;
   if (!required) return;
-  return styled.css(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteralLoose(["\n      > ", " {\n        :after {\n          content: ' *';\n        }\n      }\n    "])), LabelContainer$5);
+  return styled.css(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose(["\n      > ", " {\n        :after {\n          content: ' *';\n        }\n      }\n    "])), LabelContainer$5);
 }, function (_ref5) {
   var invalid = _ref5.invalid;
@@ -16270,8 +16416,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__default.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__default.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__default.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');
@@ -16285,9 +16431,9 @@ var LabelContainer$6 = styled__default.div(_templateObject2$u || (_templateObjec
 }, function (_ref4) {
   var onClick = _ref4.onClick;
   if (!onClick) return;
-  return styled.css(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
+  return styled.css(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
 });
-var Container$6 = styled__default.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__default.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) {
@@ -16313,7 +16459,7 @@ var Container$6 = styled__default.div(_templateObject5$c || (_templateObject5$c
 }, function (_ref10) {
   var disabled = _ref10.disabled;
   if (!disabled) return;
-  return styled.css(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
+  return styled.css(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
 });
 var Button$4 = styled__default.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;
@@ -16558,8 +16704,8 @@ var DatePicker$1 = Object.assign(Component$1, {
   useDefaultDateIntervalState: useDefaultDateIntervalState
 });
-var _templateObject$F;
-var Input$3 = styled__default.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__default.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) {
@@ -16622,8 +16768,8 @@ var Input$4 = React__default.forwardRef(function (props, ref) {
 });
 Input$4.displayName = 'Input';
-var _templateObject$G, _templateObject2$v;
-var Label$7 = styled__default.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__default.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) {
@@ -16636,8 +16782,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__default.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__default.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) {
@@ -16670,8 +16816,8 @@ var Tag$1 = function Tag$1(props) {
   })));
 };
-var _templateObject$I, _templateObject2$w, _templateObject3$p;
-var Label$9 = styled__default.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__default.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) {
@@ -16765,8 +16911,8 @@ var Tags = React__default.forwardRef(function (props, ref) {
 });
 Tags.displayName = 'Tags';
-var _templateObject$J;
-var RelativeContainer$6 = styled__default.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var _templateObject$K;
+var RelativeContainer$6 = styled__default.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;
@@ -17167,8 +17313,8 @@ var Input$5 = Object.assign(Component$2, {
   getPhoneDetails: Phone.getPhoneDetails
 });
-var _templateObject$K, _templateObject2$x, _templateObject3$q, _templateObject4$f;
-var Container$7 = styled__default(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__default(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) {
@@ -17191,7 +17337,7 @@ var Title = styled__default.div(_templateObject3$q || (_templateObject3$q = _tag
   var getColor = _ref6.theme.getColor;
   return getColor('greyishBlue', 50);
 });
-var Item = styled__default.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__default.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) {
@@ -17305,8 +17451,8 @@ var AppliedFiltersMenu = function AppliedFiltersMenu(props) {
   }))));
 };
-var _templateObject$L, _templateObject2$y, _templateObject3$r;
-var Container$8 = styled__default.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__default.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];
@@ -17372,21 +17518,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__default.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__default.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' && styled.css(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n      width: 394px;\n      height: 99px;\n    "])));
 }, function (props) {
   return props.size === 'small' && styled.css(_templateObject3$s || (_templateObject3$s = _taggedTemplateLiteralLoose(["\n      width: 394px;\n      height: 131px;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && styled.css(_templateObject4$g || (_templateObject4$g = _taggedTemplateLiteralLoose(["\n      width: 394px;\n    "])));
+  return props.size === 'medium' && styled.css(_templateObject4$h || (_templateObject4$h = _taggedTemplateLiteralLoose(["\n      width: 394px;\n    "])));
 }, function (props) {
-  return props.size === 'big' && styled.css(_templateObject5$d || (_templateObject5$d = _taggedTemplateLiteralLoose(["\n      width: 414px;\n      height: 324px;\n    "])));
+  return props.size === 'big' && styled.css(_templateObject5$e || (_templateObject5$e = _taggedTemplateLiteralLoose(["\n      width: 414px;\n      height: 324px;\n    "])));
 }, function (props) {
   return props.borderType === 'info' && styled.css(_templateObject6$c || (_templateObject6$c = _taggedTemplateLiteralLoose(["\n      border-left-color: #4d6dbe;\n    "])));
 }, function (props) {
   return props.borderType === 'success' && styled.css(_templateObject7$c || (_templateObject7$c = _taggedTemplateLiteralLoose(["\n      border-left-color: #66bb6a;\n    "])));
 }, function (props) {
-  return props.borderType === 'warning' && styled.css(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteralLoose(["\n      border-left-color: #fbcb01;\n    "])));
+  return props.borderType === 'warning' && styled.css(_templateObject8$a || (_templateObject8$a = _taggedTemplateLiteralLoose(["\n      border-left-color: #fbcb01;\n    "])));
 }, function (props) {
   return props.borderType === 'danger' && styled.css(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["\n      border-left-color: #e23851;\n    "])));
 }, function (props) {
@@ -17402,8 +17548,8 @@ var Card = function Card(_ref) {
   return React__default.createElement(Container$9, Object.assign({}, rest), children);
 };
-var _templateObject$N;
-var Container$a = styled__default.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__default.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) {
@@ -17464,8 +17610,8 @@ var Header$4 = function Header(props) {
   }));
 };
-var _templateObject$O;
-var EmptyMessage = styled__default.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__default.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;
 });
@@ -17806,14 +17952,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: {
@@ -17842,7 +17988,7 @@ var aligns = {
     }
   }
 };
-var Col = styled__default.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__default.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) {
@@ -17852,7 +17998,7 @@ var Col = styled__default.div(_templateObject$P || (_templateObject$P = _taggedT
   }
   var w = parseFloat(width) * 100 / 12;
-  return styled.css(_templateObject4$h || (_templateObject4$h = _taggedTemplateLiteralLoose(["\n      flex: 0 0 ", "%;\n      max-width: ", "%;\n      width: 100%;\n    "])), w, w);
+  return styled.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);
@@ -17860,7 +18006,7 @@ var Col = styled__default.div(_templateObject$P || (_templateObject$P = _taggedT
 }, function (_ref3) {
   var spacingAround = _ref3.spacingAround;
   if (spacingAround) return;
-  return styled.css(_templateObject5$e || (_templateObject5$e = _taggedTemplateLiteralLoose(["\n      :first-child {\n        padding-left: 0;\n      }\n      :last-child {\n        padding-right: 0;\n      }\n    "])));
+  return styled.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;
@@ -17884,7 +18030,7 @@ var Col = styled__default.div(_templateObject$P || (_templateObject$P = _taggedT
     if (align.content.horizontal !== undefined) {
       var _v2 = align.content.horizontal;
       var _a2 = aligns.content.horizontal;
-      styles.push(styled.css(_templateObject8$a || (_templateObject8$a = _taggedTemplateLiteralLoose(["\n          justify-content: ", ";\n        "])), _a2[_v2]));
+      styles.push(styled.css(_templateObject8$b || (_templateObject8$b = _taggedTemplateLiteralLoose(["\n          justify-content: ", ";\n        "])), _a2[_v2]));
     }
     if (align.content.vertical !== undefined) {
@@ -17931,7 +18077,7 @@ var Col = styled__default.div(_templateObject$P || (_templateObject$P = _taggedT
 });
 var Col$1 = React__default.forwardRef(function (props, ref) {
-  var context = useContext$2();
+  var context = useContext$3();
   var _props = _extends({}, context.cols, props);
@@ -17942,16 +18088,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__default.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__default.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);
@@ -17967,7 +18113,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
@@ -17978,7 +18124,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',
@@ -17991,7 +18137,7 @@ var verticalAligns = {
   top: 'start',
   bottom: 'end'
 };
-var Row = styled__default.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__default.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);
@@ -18003,11 +18149,11 @@ var Row = styled__default.div(_templateObject$R || (_templateObject$R = _taggedT
 }, function (_ref3) {
   var horizontalAlign = _ref3.horizontalAlign;
   if (horizontalAlign === undefined) return;
-  return styled.css(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteralLoose(["\n      justify-content: ", ";\n    "])), horizontalAligns[horizontalAlign]);
+  return styled.css(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteralLoose(["\n      justify-content: ", ";\n    "])), horizontalAligns[horizontalAlign]);
 }, function (_ref4) {
   var verticalAlign = _ref4.verticalAlign;
   if (verticalAlign === undefined) return;
-  return styled.css(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteralLoose(["\n      align-items: ", ";\n    "])), verticalAligns[verticalAlign]);
+  return styled.css(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteralLoose(["\n      align-items: ", ";\n    "])), verticalAligns[verticalAlign]);
 }, function (_ref5) {
   var striped = _ref5.striped,
       backgroundColor = _ref5.backgroundColor,
@@ -18035,7 +18181,7 @@ var Row = styled__default.div(_templateObject$R || (_templateObject$R = _taggedT
     even: theme.colors.white,
     odd: theme.colors.white
   });
-  return styled.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 styled.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;
@@ -18057,12 +18203,12 @@ var Row = styled__default.div(_templateObject$R || (_templateObject$R = _taggedT
 });
 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
     }
@@ -18109,8 +18255,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__default.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__default.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);
 });
@@ -18120,9 +18266,9 @@ var Header$5 = styled__default.div(_templateObject3$w || (_templateObject3$w = _
       colors = _ref2$theme.colors,
       spacings = _ref2$theme.spacings,
       useTypography = _ref2$theme.useTypography;
-  return styled.css(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteralLoose(["\n    border-bottom: 1px solid ", ";\n    padding: ", ";\n\n    ", "\n  "])), colors.lightestGrey, spacings.s4, useTypography('h1'));
+  return styled.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__default.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__default.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;
@@ -18132,7 +18278,7 @@ var FooterMessage = styled__default.div(_templateObject7$f || (_templateObject7$
   var theme = _ref4.theme;
   return theme.getColor('darkBlue', 75);
 });
-var FooterButtons = styled__default.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__default.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;
 });
@@ -18218,8 +18364,8 @@ var Modal = function Modal(props) {
   }))))));
 };
-var _templateObject$T;
-var Content$1 = styled__default.div(_templateObject$T || (_templateObject$T = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
+var _templateObject$U;
+var Content$1 = styled__default.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.spacings.s5 + " " + theme.spacings.s4;
 });
@@ -18256,8 +18402,8 @@ var ConfirmDelete = function ConfirmDelete(props) {
   }, React__default.createElement(Content$1, null, children || content));
 };
-var _templateObject$U;
-var Content$2 = styled__default.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
+var _templateObject$V;
+var Content$2 = styled__default.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.spacings.s5 + " " + theme.spacings.s4;
 });
@@ -18297,8 +18443,8 @@ var ConfirmSuccess = function ConfirmSuccess(props) {
   }, React__default.createElement(Content$2, null, children || content));
 };
-var _templateObject$V;
-var Content$3 = styled__default.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
+var _templateObject$W;
+var Content$3 = styled__default.div(_templateObject$W || (_templateObject$W = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.spacings.s5 + " " + theme.spacings.s4;
 });
@@ -18339,18 +18485,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__default.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__default.div(_templateObject$X || (_templateObject$X = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 300px;\n  position: absolute;\n  padding: 14px;\n"])));
 var Header$6 = styled__default.div(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
 var HeaderImage = styled__default.div(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteralLoose(["\n  width: 43px;\n  height: 44px;\n  background-color: #ebebeb;\n"])));
-var HeaderContent = styled__default.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__default.div(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n"])));
+var HeaderContent = styled__default.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__default.div(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n"])));
 var HeaderLine = styled__default.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' && styled.css(_templateObject7$g || (_templateObject7$g = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && styled.css(_templateObject8$d || (_templateObject8$d = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && styled.css(_templateObject8$e || (_templateObject8$e = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
   return props.size === 'medium' && styled.css(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
@@ -18391,28 +18537,28 @@ var Template1 = function Template1(props) {
   })));
 };
-var _templateObject$X, _templateObject2$F, _templateObject3$y, _templateObject4$l, _templateObject5$i;
-var HeaderLine$1 = styled__default.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__default.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' && styled.css(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
   return props.size === 'small' && styled.css(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && styled.css(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
+  return props.size === 'medium' && styled.css(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
-  return props.size === 'large' && styled.css(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
+  return props.size === 'large' && styled.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__default.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__default.div(_templateObject$Z || (_templateObject$Z = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
 var Template2Container = styled__default(Container$d)(_templateObject2$G || (_templateObject2$G = _taggedTemplateLiteralLoose(["\n  background: #fff;\n  border: 2px solid #ebebeb;\n"])));
 var Header$7 = styled__default.div(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
-var HeaderImage$1 = styled__default.div(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteralLoose(["\n  width: 43px;\n  height: 44px;\n  background-color: #ebebeb;\n"])));
-var HeaderContent$1 = styled__default.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__default.div(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n  width: 43px;\n  height: 44px;\n  background-color: #ebebeb;\n"])));
+var HeaderContent$1 = styled__default.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__default.div(_templateObject6$h || (_templateObject6$h = _taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n"])));
 var MainLine$1 = styled__default(HeaderLine$1)(_templateObject7$h || (_templateObject7$h = _taggedTemplateLiteralLoose(["\n  margin-bottom: 14px;\n  margin-left: 0;\n"])));
-var HeaderLine$2 = styled__default(HeaderLine$1)(_templateObject8$e || (_templateObject8$e = _taggedTemplateLiteralLoose([""])));
+var HeaderLine$2 = styled__default(HeaderLine$1)(_templateObject8$f || (_templateObject8$f = _taggedTemplateLiteralLoose([""])));
 var Template2 = function Template2(props) {
   if (!props.loading) return React__default.createElement(React__default.Fragment, null);
@@ -18435,8 +18581,8 @@ var Template2 = function Template2(props) {
   })));
 };
-var _templateObject$Z, _templateObject2$H, _templateObject3$A;
-var Container$e = styled__default.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__default.div(_templateObject$_ || (_templateObject$_ = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
 var Template3Container = styled__default(Container$e)(_templateObject2$H || (_templateObject2$H = _taggedTemplateLiteralLoose([""])));
 var Template3Line = styled__default(HeaderLine$1)(_templateObject3$A || (_templateObject3$A = _taggedTemplateLiteralLoose(["\n  background-color: #dadada;\n  height: ", ";\n"])), function (props) {
   return props.height;
@@ -18467,21 +18613,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__default.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__default.div(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-height: 100%;\n  position: absolute;\n  padding: 14px;\n"])));
 var HeaderLine$3 = styled__default.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' && styled.css(_templateObject3$B || (_templateObject3$B = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && styled.css(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && styled.css(_templateObject4$o || (_templateObject4$o = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && styled.css(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
+  return props.size === 'medium' && styled.css(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
   return props.size === 'large' && styled.css(_templateObject6$i || (_templateObject6$i = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
 var Template4Container = styled__default(Container$f)(_templateObject7$i || (_templateObject7$i = _taggedTemplateLiteralLoose(["\n  border: 1px solid #e6e6e7;\n  border-radius: 4px;\n"])));
-var CustomLine = styled__default(HeaderLine$3)(_templateObject8$f || (_templateObject8$f = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n"])), function (props) {
+var CustomLine = styled__default(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;
@@ -18534,21 +18680,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__default.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__default.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__default.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__default.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' && styled.css(_templateObject4$o || (_templateObject4$o = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && styled.css(_templateObject4$p || (_templateObject4$p = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && styled.css(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && styled.css(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
   return props.size === 'medium' && styled.css(_templateObject6$j || (_templateObject6$j = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
   return props.size === 'large' && styled.css(_templateObject7$j || (_templateObject7$j = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
-var CustomLine$1 = styled__default(HeaderLine$4)(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n"])), function (props) {
+var CustomLine$1 = styled__default(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;
@@ -18582,20 +18728,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__default.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__default.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__default.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__default.div(_templateObject3$D || (_templateObject3$D = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  border-top: 1px solid #b1b1b3;\n  height: 50px;\n"])));
-var HeaderLine$5 = styled__default.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__default.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' && styled.css(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && styled.css(_templateObject5$n || (_templateObject5$n = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
   return props.size === 'small' && styled.css(_templateObject6$k || (_templateObject6$k = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
   return props.size === 'medium' && styled.css(_templateObject7$k || (_templateObject7$k = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
-  return props.size === 'large' && styled.css(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
+  return props.size === 'large' && styled.css(_templateObject8$i || (_templateObject8$i = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
 var CustomLine$2 = styled__default(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;
@@ -18625,21 +18771,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__default.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__default.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__default.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__default.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' && styled.css(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && styled.css(_templateObject4$r || (_templateObject4$r = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && styled.css(_templateObject5$n || (_templateObject5$n = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && styled.css(_templateObject5$o || (_templateObject5$o = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
   return props.size === 'medium' && styled.css(_templateObject6$l || (_templateObject6$l = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
   return props.size === 'large' && styled.css(_templateObject7$l || (_templateObject7$l = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
-var CustomLine$3 = styled__default(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__default(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;
@@ -18659,21 +18805,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__default.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__default.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__default.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__default.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' && styled.css(_templateObject4$r || (_templateObject4$r = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && styled.css(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && styled.css(_templateObject5$o || (_templateObject5$o = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && styled.css(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
   return props.size === 'medium' && styled.css(_templateObject6$m || (_templateObject6$m = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
   return props.size === 'large' && styled.css(_templateObject7$m || (_templateObject7$m = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
-var CustomLine$4 = styled__default(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__default(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;
@@ -18702,21 +18848,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__default.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__default.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__default.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__default.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' && styled.css(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && styled.css(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && styled.css(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && styled.css(_templateObject5$q || (_templateObject5$q = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
   return props.size === 'medium' && styled.css(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
   return props.size === 'large' && styled.css(_templateObject7$n || (_templateObject7$n = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
-var CustomLine$5 = styled__default(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__default(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;
@@ -18741,21 +18887,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__default.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__default.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__default.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__default.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' && styled.css(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
+  return props.size === 'mini' && styled.css(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteralLoose(["\n      width: 15%;\n    "])));
 }, function (props) {
-  return props.size === 'small' && styled.css(_templateObject5$q || (_templateObject5$q = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
+  return props.size === 'small' && styled.css(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
   return props.size === 'medium' && styled.css(_templateObject6$o || (_templateObject6$o = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
   return props.size === 'large' && styled.css(_templateObject7$o || (_templateObject7$o = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
-var CustomLine$6 = styled__default(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__default(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;
@@ -18885,8 +19031,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__default.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__default.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__default.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) {
@@ -18895,12 +19041,12 @@ var Progress = styled__default.div(_templateObject2$P || (_templateObject2$P = _
     return theme.colors.warningGray;
   });
 }, function (props) {
-  return props.type === 'info' && styled.css(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref2) {
+  return props.type === 'info' && styled.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' && styled.css(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref3) {
+  return props.type === 'danger' && styled.css(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), function (_ref3) {
     var theme = _ref3.theme;
     return theme.colors.warningRed;
   });
@@ -18920,8 +19066,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__default.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__default.div(_templateObject$17 || (_templateObject$17 = _taggedTemplateLiteralLoose(["\n  display: block;\n"])));
 var delimiters = {
   blue: ['blue'],
   grey: ['warningGray']
@@ -18954,20 +19100,20 @@ var Tabs = styled__default.ul(_templateObject2$Q || (_templateObject2$Q = _tagge
     return internal ? "1px solid " + theme.getColor.apply(theme, delimiters[delimiter || 'grey']) : "2px solid " + theme.getColor.apply(theme, delimiters[delimiter || 'blue']);
   }();
-  return styled.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 styled.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__default.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__default.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 styled.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 ? styled.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');
-  }) : styled.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) {
+  }) : styled.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']);
@@ -18989,6 +19135,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) {
@@ -19032,7 +19180,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') {
@@ -19065,9 +19213,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,
@@ -19084,8 +19233,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',
@@ -19097,8 +19246,8 @@ var Tabs$1 = function Tabs$1(props) {
   }));
 };
-var _templateObject$17;
-var Container$o = styled__default.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__default.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;
@@ -19108,17 +19257,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__default.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__default.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' && styled.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' && styled.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' && styled.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' && styled.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__default.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__default.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__default.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) {
@@ -19131,8 +19280,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__default.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__default.img(_templateObject$1a || (_templateObject$1a = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n  max-height: 100%;\n"])));
 var Container$q = styled__default.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;
@@ -19164,11 +19313,11 @@ var Dimmer = styled__default.div(_templateObject3$L || (_templateObject3$L = _ta
   var theme = _ref3.theme;
   return theme.getColor('greyishBlue', 50);
 });
-var Button$6 = styled__default(Button$1)(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n"])), function (_ref4) {
+var Button$6 = styled__default(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__default.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__default.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"];
@@ -19219,6 +19368,7 @@ exports.MwCalendar = Calendar;
 exports.MwCard = Card;
 exports.MwEllipsisContainer = EllipsisContainer$1;
 exports.MwFilters = Filters;
+exports.MwForm = Form;
 exports.MwGrid = Grid$2;
 exports.MwIcon = Icon;
 exports.MwIndicator = Indicator;