@mw-kit/mw-ui 1.7.115 → 1.7.116

package/dist/index.js

@@ -18413,13 +18413,17 @@ const Tag$1 = props => {
 let _$J = t => t,
     _t$J,
     _t2$w,
-    _t3$q;
+    _t3$q,
+    _t4$i,
+    _t5$e,
+    _t6$c;
 const Label$9 = styled.label(_t$J || (_t$J = _$J`
   ${0};
 
   color: ${0};
 
   width: ${0};
+  max-width: 100%;
   box-sizing: border-box;
   position: relative;
   display: block;
@@ -18442,43 +18446,75 @@ const Label$9 = styled.label(_t$J || (_t$J = _$J`
     `));
 });
 const TagContainer = styled.div(_t3$q || (_t3$q = _$J`
-  border-width: 1px;
-  border-style: solid;
-  border-color: ${0};
-  border-radius: 4px;
   display: flex;
   flex-wrap: wrap;
   gap: calc(${0} / 2);
-  padding: ${0};
+
+  ${0};
+
+  ${0};
 `), ({
-  theme,
-  invalid
-}) => theme.colors[invalid ? 'warningRed' : 'lightGrey'], ({
   theme
 }) => theme.spacings.s1, ({
-  theme
-}) => theme.spacings.s1);
+  borderless,
+  theme,
+  invalid
+}) => {
+  if (!borderless) {
+    return css(_t4$i || (_t4$i = _$J`
+        border-width: 1px;
+        border-style: solid;
+        border-radius: 4px;
+        border-color: ${0};
+      `), theme.colors[invalid ? 'warningRed' : 'lightGrey']);
+  }
+}, ({
+  theme,
+  paddingless
+}) => {
+  if (paddingless) {
+    return css(_t5$e || (_t5$e = _$J`
+        padding: 0;
+        > input {
+          padding: 0;
+        }
+      `));
+  }
+
+  return css(_t6$c || (_t6$c = _$J`
+      padding: ${0};
+    `), theme.spacings.s1);
+});
 
 const Tags = React__default.forwardRef((props, ref) => {
+  var _props$input;
+
   const {
     value,
     setValue
   } = props;
-  const [inputValue, setInputValue] = props.input && props.input.value ? props.input.value : useState('');
+  const [inputValue, setInputValue] = (_props$input = props.input) !== null && _props$input !== void 0 && _props$input.value ? props.input.value : useState('');
+  const paddingless = props.paddingless || false;
+  const borderless = props.borderless || false;
+  const maxTags = props.maxTags || Number.POSITIVE_INFINITY;
 
   const validate = props.validate || (() => true);
 
+  const onBlur = props.onBlur || (() => {});
+
   const onBeforeAdd = props.onBeforeAdd || (v => v);
 
   const validateUnique = props.unique ? v => value.some(e => strCmp(e, v)) ? '' : v : v => v;
 
   const add = v => {
     if (v === '') return;
-    v = validateUnique(v);
-    if (v === '') return;
-    v = onBeforeAdd(v);
-    if (v === '') return;
-    setValue([...value, v]);
+    let newV = validateUnique(v);
+    if (newV === '') return;
+    newV = onBeforeAdd(newV);
+    if (newV === '') return;
+    const content = [...value, newV];
+    if (content.length > maxTags) return;
+    setValue(content);
     setInputValue('');
   };
 
@@ -18494,18 +18530,28 @@ const Tags = React__default.forwardRef((props, ref) => {
   }, React__default.createElement(Label$8, {
     required: props.required
   }, props.label), React__default.createElement(TagContainer, {
-    invalid: props.invalid
+    invalid: props.invalid,
+    borderless: borderless,
+    paddingless: paddingless
   }, value.map((v, index) => React__default.createElement(Tag$1, {
     key: index,
     onClose: () => remove(index),
     invalid: !validate(v)
   }, v)), React__default.createElement(Input$4, Object.assign({
+    onBlur: onBlur,
     ref: ref,
-    disabled: props.disabled || props.loading,
-    invalid: props.invalid
+    disabled: props.disabled || props.loading || value.length === maxTags,
+    invalid: props.invalid,
+    placeholder: value.length === 0 ? props.placeholder : ''
   }, props.input, {
     value: [inputValue, setInputValue],
-    onPressEnter: e => add(e.target.value)
+    onPressEnter: e => add(e.target.value),
+    style: value.length === maxTags ? {
+      width: 0,
+      minWidth: 0,
+      maxWidth: 0,
+      border: 'none'
+    } : {}
   }))));
 });
 Tags.displayName = 'Tags';
@@ -18912,7 +18958,7 @@ let _$L = t => t,
     _t$L,
     _t2$x,
     _t3$r,
-    _t4$i;
+    _t4$j;
 const Container$7 = styled(AbsoluteContainer)(_t$L || (_t$L = _$L`
   background-color: ${0};
 
@@ -18975,7 +19021,7 @@ const Title = styled.div(_t3$r || (_t3$r = _$L`
     getColor
   }
 }) => getColor('greyishBlue', 50));
-const Item = styled.div(_t4$i || (_t4$i = _$L`
+const Item = styled.div(_t4$j || (_t4$j = _$L`
   padding: ${0};
   display: flex;
   align-items: center;
@@ -19198,9 +19244,9 @@ let _$N = t => t,
     _t$N,
     _t2$z,
     _t3$t,
-    _t4$j,
-    _t5$e,
-    _t6$c,
+    _t4$k,
+    _t5$f,
+    _t6$d,
     _t7$c,
     _t8$a,
     _t9$9,
@@ -19229,12 +19275,12 @@ const Container$9 = styled.div(_t$N || (_t$N = _$N`
     `)), props => props.size === 'small' && css(_t3$t || (_t3$t = _$N`
       width: 394px;
       height: 131px;
-    `)), props => props.size === 'medium' && css(_t4$j || (_t4$j = _$N`
+    `)), props => props.size === 'medium' && css(_t4$k || (_t4$k = _$N`
       width: 394px;
-    `)), props => props.size === 'big' && css(_t5$e || (_t5$e = _$N`
+    `)), props => props.size === 'big' && css(_t5$f || (_t5$f = _$N`
       width: 414px;
       height: 324px;
-    `)), props => props.borderType === 'info' && css(_t6$c || (_t6$c = _$N`
+    `)), props => props.borderType === 'info' && css(_t6$d || (_t6$d = _$N`
       border-left-color: #4d6dbe;
     `)), props => props.borderType === 'success' && css(_t7$c || (_t7$c = _$N`
       border-left-color: #66bb6a;
@@ -19650,9 +19696,9 @@ let _$Q = t => t,
     _t$Q,
     _t2$A,
     _t3$u,
-    _t4$k,
-    _t5$f,
-    _t6$d,
+    _t4$l,
+    _t5$g,
+    _t6$e,
     _t7$d,
     _t8$b,
     _t9$a,
@@ -19731,7 +19777,7 @@ const Col = styled.div(_t$Q || (_t$Q = _$Q`
   }
 
   const w = parseFloat(width) * 100 / 12;
-  return css(_t4$k || (_t4$k = _$Q`
+  return css(_t4$l || (_t4$l = _$Q`
       flex: 0 0 ${0}%;
       max-width: ${0}%;
       width: 100%;
@@ -19745,7 +19791,7 @@ const Col = styled.div(_t$Q || (_t$Q = _$Q`
   spacingAround
 }) => {
   if (spacingAround) return;
-  return css(_t5$f || (_t5$f = _$Q`
+  return css(_t5$g || (_t5$g = _$Q`
       :first-child {
         padding-left: 0;
       }
@@ -19763,7 +19809,7 @@ const Col = styled.div(_t$Q || (_t$Q = _$Q`
     if (align.self.horizontal !== undefined) {
       const v = align.self.horizontal;
       const a = aligns.self.horizontal;
-      styles.push(css(_t6$d || (_t6$d = _$Q`
+      styles.push(css(_t6$e || (_t6$e = _$Q`
           justify-self: ${0};
         `), a[v]));
     }
@@ -19927,9 +19973,9 @@ let _$S = t => t,
     _t$S,
     _t2$C,
     _t3$w,
-    _t4$l,
-    _t5$g,
-    _t6$e,
+    _t4$m,
+    _t5$h,
+    _t6$f,
     _t7$e,
     _t8$c,
     _t9$b,
@@ -19990,14 +20036,14 @@ const Row = styled.div(_t$S || (_t$S = _$S`
   horizontalAlign
 }) => {
   if (horizontalAlign === undefined) return;
-  return css(_t4$l || (_t4$l = _$S`
+  return css(_t4$m || (_t4$m = _$S`
       justify-content: ${0};
     `), horizontalAligns[horizontalAlign]);
 }, ({
   verticalAlign
 }) => {
   if (verticalAlign === undefined) return;
-  return css(_t5$g || (_t5$g = _$S`
+  return css(_t5$h || (_t5$h = _$S`
       align-items: ${0};
     `), verticalAligns[verticalAlign]);
 }, ({
@@ -20007,7 +20053,7 @@ const Row = styled.div(_t$S || (_t$S = _$S`
 }) => {
   if (backgroundColor !== undefined) {
     const c = Array.isArray(backgroundColor) ? theme.getColor(...backgroundColor) : theme.colors[backgroundColor];
-    return css(_t6$e || (_t6$e = _$S`
+    return css(_t6$f || (_t6$f = _$S`
         background-color: ${0};
       `), c);
   }
@@ -20135,9 +20181,9 @@ let _$T = t => t,
     _t$T,
     _t2$D,
     _t3$x,
-    _t4$m,
-    _t5$h,
-    _t6$f,
+    _t4$n,
+    _t5$i,
+    _t6$g,
     _t7$f,
     _t8$d,
     _t9$c,
@@ -20172,13 +20218,13 @@ const Header$5 = styled.div(_t3$x || (_t3$x = _$T`
     spacings,
     useTypography
   }
-}) => css(_t4$m || (_t4$m = _$T`
+}) => css(_t4$n || (_t4$n = _$T`
     border-bottom: 1px solid ${0};
     padding: ${0};
 
     ${0}
   `), colors.lightestGrey, spacings.s4, useTypography('h1')));
-const Footer$2 = styled.div(_t5$h || (_t5$h = _$T`
+const Footer$2 = styled.div(_t5$i || (_t5$i = _$T`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -20189,7 +20235,7 @@ const Footer$2 = styled.div(_t5$h || (_t5$h = _$T`
     spacings,
     colors
   }
-}) => css(_t6$f || (_t6$f = _$T`
+}) => css(_t6$g || (_t6$g = _$T`
     border-top: 1px solid ${0};
     padding: ${0};
   `), colors.lightestGrey, spacings.s3));
@@ -20445,9 +20491,9 @@ let _$X = t => t,
     _t$X,
     _t2$E,
     _t3$y,
-    _t4$n,
-    _t5$i,
-    _t6$g,
+    _t4$o,
+    _t5$j,
+    _t6$h,
     _t7$g,
     _t8$e,
     _t9$d,
@@ -20467,16 +20513,16 @@ const HeaderImage = styled.div(_t3$y || (_t3$y = _$X`
   height: 44px;
   background-color: #ebebeb;
 `));
-const HeaderContent = styled.div(_t4$n || (_t4$n = _$X`
+const HeaderContent = styled.div(_t4$o || (_t4$o = _$X`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   flex: 1;
 `));
-const MainContent = styled.div(_t5$i || (_t5$i = _$X`
+const MainContent = styled.div(_t5$j || (_t5$j = _$X`
   margin-top: 8px;
 `));
-const HeaderLine = styled.div(_t6$g || (_t6$g = _$X`
+const HeaderLine = styled.div(_t6$h || (_t6$h = _$X`
   height: ${0};
   background-color: #ebebeb;
   margin-left: 7px;
@@ -20542,8 +20588,8 @@ let _$Y = t => t,
     _t$Y,
     _t2$F,
     _t3$z,
-    _t4$o,
-    _t5$j;
+    _t4$p,
+    _t5$k;
 const HeaderLine$1 = styled.div(_t$Y || (_t$Y = _$Y`
   height: ${0};
   background-color: #ebebeb;
@@ -20563,9 +20609,9 @@ const HeaderLine$1 = styled.div(_t$Y || (_t$Y = _$Y`
       width: 15%;
     `)), props => props.size === 'small' && css(_t3$z || (_t3$z = _$Y`
       width: 25%;
-    `)), props => props.size === 'medium' && css(_t4$o || (_t4$o = _$Y`
+    `)), props => props.size === 'medium' && css(_t4$p || (_t4$p = _$Y`
       width: 45%;
-    `)), props => props.size === 'large' && css(_t5$j || (_t5$j = _$Y`
+    `)), props => props.size === 'large' && css(_t5$k || (_t5$k = _$Y`
       width: 75%;
     `)));
 
@@ -20573,9 +20619,9 @@ let _$Z = t => t,
     _t$Z,
     _t2$G,
     _t3$A,
-    _t4$p,
-    _t5$k,
-    _t6$h,
+    _t4$q,
+    _t5$l,
+    _t6$i,
     _t7$h,
     _t8$f;
 const Container$d = styled.div(_t$Z || (_t$Z = _$Z`
@@ -20591,18 +20637,18 @@ const Template2Container = styled(Container$d)(_t2$G || (_t2$G = _$Z`
 const Header$7 = styled.div(_t3$A || (_t3$A = _$Z`
   display: flex;
 `));
-const HeaderImage$1 = styled.div(_t4$p || (_t4$p = _$Z`
+const HeaderImage$1 = styled.div(_t4$q || (_t4$q = _$Z`
   width: 43px;
   height: 44px;
   background-color: #ebebeb;
 `));
-const HeaderContent$1 = styled.div(_t5$k || (_t5$k = _$Z`
+const HeaderContent$1 = styled.div(_t5$l || (_t5$l = _$Z`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   flex: 1;
 `));
-const MainContent$1 = styled.div(_t6$h || (_t6$h = _$Z`
+const MainContent$1 = styled.div(_t6$i || (_t6$i = _$Z`
   margin-top: 8px;
 `));
 const MainLine$1 = styled(HeaderLine$1)(_t7$h || (_t7$h = _$Z`
@@ -20677,9 +20723,9 @@ let _$$ = t => t,
     _t$$,
     _t2$I,
     _t3$C,
-    _t4$q,
-    _t5$l,
-    _t6$i,
+    _t4$r,
+    _t5$m,
+    _t6$j,
     _t7$i,
     _t8$g;
 const Container$f = styled.div(_t$$ || (_t$$ = _$$`
@@ -20705,11 +20751,11 @@ const HeaderLine$3 = styled.div(_t2$I || (_t2$I = _$$`
     ${0}
 `), props => props.height, props => props.size === 'mini' && css(_t3$C || (_t3$C = _$$`
       width: 15%;
-    `)), props => props.size === 'small' && css(_t4$q || (_t4$q = _$$`
+    `)), props => props.size === 'small' && css(_t4$r || (_t4$r = _$$`
       width: 25%;
-    `)), props => props.size === 'medium' && css(_t5$l || (_t5$l = _$$`
+    `)), props => props.size === 'medium' && css(_t5$m || (_t5$m = _$$`
       width: 45%;
-    `)), props => props.size === 'large' && css(_t6$i || (_t6$i = _$$`
+    `)), props => props.size === 'large' && css(_t6$j || (_t6$j = _$$`
       width: 75%;
     `)));
 const Template4Container = styled(Container$f)(_t7$i || (_t7$i = _$$`
@@ -20771,9 +20817,9 @@ let _$10 = t => t,
     _t$10,
     _t2$J,
     _t3$D,
-    _t4$r,
-    _t5$m,
-    _t6$j,
+    _t4$s,
+    _t5$n,
+    _t6$k,
     _t7$j,
     _t8$h,
     _t9$e;
@@ -20809,11 +20855,11 @@ const HeaderLine$4 = styled.div(_t3$D || (_t3$D = _$10`
     ${0}
 
     ${0}
-`), props => props.height, props => props.size === 'mini' && css(_t4$r || (_t4$r = _$10`
+`), props => props.height, props => props.size === 'mini' && css(_t4$s || (_t4$s = _$10`
       width: 15%;
-    `)), props => props.size === 'small' && css(_t5$m || (_t5$m = _$10`
+    `)), props => props.size === 'small' && css(_t5$n || (_t5$n = _$10`
       width: 25%;
-    `)), props => props.size === 'medium' && css(_t6$j || (_t6$j = _$10`
+    `)), props => props.size === 'medium' && css(_t6$k || (_t6$k = _$10`
       width: 45%;
     `)), props => props.size === 'large' && css(_t7$j || (_t7$j = _$10`
       width: 75%;
@@ -20857,9 +20903,9 @@ let _$11 = t => t,
     _t$11,
     _t2$K,
     _t3$E,
-    _t4$s,
-    _t5$n,
-    _t6$k,
+    _t4$t,
+    _t5$o,
+    _t6$l,
     _t7$k,
     _t8$i,
     _t9$f;
@@ -20882,7 +20928,7 @@ const Footer$3 = styled.div(_t3$E || (_t3$E = _$11`
   border-top: 1px solid #b1b1b3;
   height: 50px;
 `));
-const HeaderLine$5 = styled.div(_t4$s || (_t4$s = _$11`
+const HeaderLine$5 = styled.div(_t4$t || (_t4$t = _$11`
   height: ${0};
   background-color: #ebebeb;
   margin-left: 7px;
@@ -20897,9 +20943,9 @@ const HeaderLine$5 = styled.div(_t4$s || (_t4$s = _$11`
     ${0}
 
     ${0}
-`), props => props.height, props => props.size === 'mini' && css(_t5$n || (_t5$n = _$11`
+`), props => props.height, props => props.size === 'mini' && css(_t5$o || (_t5$o = _$11`
       width: 15%;
-    `)), props => props.size === 'small' && css(_t6$k || (_t6$k = _$11`
+    `)), props => props.size === 'small' && css(_t6$l || (_t6$l = _$11`
       width: 25%;
     `)), props => props.size === 'medium' && css(_t7$k || (_t7$k = _$11`
       width: 45%;
@@ -20937,9 +20983,9 @@ let _$12 = t => t,
     _t$12,
     _t2$L,
     _t3$F,
-    _t4$t,
-    _t5$o,
-    _t6$l,
+    _t4$u,
+    _t5$p,
+    _t6$m,
     _t7$l,
     _t8$j,
     _t9$g,
@@ -20974,11 +21020,11 @@ const HeaderLine$6 = styled.div(_t3$F || (_t3$F = _$12`
     ${0}
 
     ${0}
-`), props => props.height, props => props.size === 'mini' && css(_t4$t || (_t4$t = _$12`
+`), props => props.height, props => props.size === 'mini' && css(_t4$u || (_t4$u = _$12`
       width: 15%;
-    `)), props => props.size === 'small' && css(_t5$o || (_t5$o = _$12`
+    `)), props => props.size === 'small' && css(_t5$p || (_t5$p = _$12`
       width: 25%;
-    `)), props => props.size === 'medium' && css(_t6$l || (_t6$l = _$12`
+    `)), props => props.size === 'medium' && css(_t6$m || (_t6$m = _$12`
       width: 45%;
     `)), props => props.size === 'large' && css(_t7$l || (_t7$l = _$12`
       width: 75%;
@@ -21018,9 +21064,9 @@ let _$13 = t => t,
     _t$13,
     _t2$M,
     _t3$G,
-    _t4$u,
-    _t5$p,
-    _t6$m,
+    _t4$v,
+    _t5$q,
+    _t6$n,
     _t7$m,
     _t8$k,
     _t9$h;
@@ -21054,11 +21100,11 @@ const HeaderLine$7 = styled.div(_t3$G || (_t3$G = _$13`
     ${0}
 
     ${0}
-`), props => props.height, props => props.size === 'mini' && css(_t4$u || (_t4$u = _$13`
+`), props => props.height, props => props.size === 'mini' && css(_t4$v || (_t4$v = _$13`
       width: 15%;
-    `)), props => props.size === 'small' && css(_t5$p || (_t5$p = _$13`
+    `)), props => props.size === 'small' && css(_t5$q || (_t5$q = _$13`
       width: 25%;
-    `)), props => props.size === 'medium' && css(_t6$m || (_t6$m = _$13`
+    `)), props => props.size === 'medium' && css(_t6$n || (_t6$n = _$13`
       width: 45%;
     `)), props => props.size === 'large' && css(_t7$m || (_t7$m = _$13`
       width: 75%;
@@ -21101,9 +21147,9 @@ let _$14 = t => t,
     _t$14,
     _t2$N,
     _t3$H,
-    _t4$v,
-    _t5$q,
-    _t6$n,
+    _t4$w,
+    _t5$r,
+    _t6$o,
     _t7$n,
     _t8$l,
     _t9$i,
@@ -21138,11 +21184,11 @@ const HeaderLine$8 = styled.div(_t3$H || (_t3$H = _$14`
     ${0}
 
     ${0}
-`), props => props.height, props => props.size === 'mini' && css(_t4$v || (_t4$v = _$14`
+`), props => props.height, props => props.size === 'mini' && css(_t4$w || (_t4$w = _$14`
       width: 15%;
-    `)), props => props.size === 'small' && css(_t5$q || (_t5$q = _$14`
+    `)), props => props.size === 'small' && css(_t5$r || (_t5$r = _$14`
       width: 25%;
-    `)), props => props.size === 'medium' && css(_t6$n || (_t6$n = _$14`
+    `)), props => props.size === 'medium' && css(_t6$o || (_t6$o = _$14`
       width: 45%;
     `)), props => props.size === 'large' && css(_t7$n || (_t7$n = _$14`
       width: 75%;
@@ -21187,9 +21233,9 @@ let _$15 = t => t,
     _t$15,
     _t2$O,
     _t3$I,
-    _t4$w,
-    _t5$r,
-    _t6$o,
+    _t4$x,
+    _t5$s,
+    _t6$p,
     _t7$o,
     _t8$m,
     _t9$j,
@@ -21225,11 +21271,11 @@ const HeaderLine$9 = styled.div(_t3$I || (_t3$I = _$15`
     ${0}
 
     ${0}
-`), props => props.height, props => props.size === 'mini' && css(_t4$w || (_t4$w = _$15`
+`), props => props.height, props => props.size === 'mini' && css(_t4$x || (_t4$x = _$15`
       width: 15%;
-    `)), props => props.size === 'small' && css(_t5$r || (_t5$r = _$15`
+    `)), props => props.size === 'small' && css(_t5$s || (_t5$s = _$15`
       width: 25%;
-    `)), props => props.size === 'medium' && css(_t6$o || (_t6$o = _$15`
+    `)), props => props.size === 'medium' && css(_t6$p || (_t6$p = _$15`
       width: 45%;
     `)), props => props.size === 'large' && css(_t7$o || (_t7$o = _$15`
       width: 75%;
@@ -21382,9 +21428,9 @@ let _$16 = t => t,
     _t$16,
     _t2$P,
     _t3$J,
-    _t4$x,
-    _t5$s,
-    _t6$p,
+    _t4$y,
+    _t5$t,
+    _t6$q,
     _t7$p;
 const Container$m = styled.div(_t$16 || (_t$16 = _$16`
   display: flex;
@@ -21416,15 +21462,15 @@ const Progress = styled.div(_t2$P || (_t2$P = _$16`
         background-color: ${0};
       `), ({
   theme
-}) => theme.colors.warningGray), props => props.type === 'info' && css(_t4$x || (_t4$x = _$16`
+}) => theme.colors.warningGray), props => props.type === 'info' && css(_t4$y || (_t4$y = _$16`
         background-color: ${0};
       `), ({
   theme
-}) => theme.colors.blue), props => props.type === 'danger' && css(_t5$s || (_t5$s = _$16`
+}) => theme.colors.blue), props => props.type === 'danger' && css(_t5$t || (_t5$t = _$16`
         background-color: ${0};
       `), ({
   theme
-}) => theme.colors.warningRed), props => props.type === 'success' && css(_t6$p || (_t6$p = _$16`
+}) => theme.colors.warningRed), props => props.type === 'success' && css(_t6$q || (_t6$q = _$16`
         background-color: ${0};
       `), ({
   theme
@@ -21849,7 +21895,7 @@ let _$1c = t => t,
     _t$1c,
     _t2$S,
     _t3$K,
-    _t4$y;
+    _t4$z;
 const delimiters = {
   blue: ['blue'],
   grey: ['warningGray']
@@ -21901,7 +21947,7 @@ const Tabs = styled.div(_t2$S || (_t2$S = _$1c`
   $delimiter: delimiter
 }) => {
   const border = delimiter === 'none' ? 'none' : internal ? `1px solid ${theme.getColor(...delimiters[delimiter || 'grey'])}` : `2px solid ${theme.getColor(...delimiters[delimiter || 'blue'])}`;
-  return css(_t4$y || (_t4$y = _$1c`
+  return css(_t4$z || (_t4$z = _$1c`
       border-bottom: ${0};
       + ${0} {
         border: 1px solid ${0};
@@ -22017,9 +22063,9 @@ let _$1e = t => t,
     _t$1e,
     _t2$T,
     _t3$L,
-    _t4$z,
-    _t5$t,
-    _t6$q;
+    _t4$A,
+    _t5$u,
+    _t6$r;
 const Container$r = styled.div(_t$1e || (_t$1e = _$1e`
   border-radius: 4px;
   width: ${0};
@@ -22061,7 +22107,7 @@ const Container$r = styled.div(_t$1e || (_t$1e = _$1e`
       p {
         color: #973937;
       }
-    `)), props => props.color === 'warning' && css(_t4$z || (_t4$z = _$1e`
+    `)), props => props.color === 'warning' && css(_t4$A || (_t4$A = _$1e`
       background-color: #fffaf3;
       opacity: 1;
       border-color: #ccbea0;
@@ -22072,7 +22118,7 @@ const Container$r = styled.div(_t$1e || (_t$1e = _$1e`
         color: #7a4d05cc;
       }
     `)));
-const IconContainer$2 = styled.div(_t5$t || (_t5$t = _$1e`
+const IconContainer$2 = styled.div(_t5$u || (_t5$u = _$1e`
   width: 100%;
   display: flex;
   align-items: center;
@@ -22080,7 +22126,7 @@ const IconContainer$2 = styled.div(_t5$t || (_t5$t = _$1e`
   padding: 14px 14px 0 0;
   margin: 0;
 `));
-const IconContent = styled.div(_t6$q || (_t6$q = _$1e`
+const IconContent = styled.div(_t6$r || (_t6$r = _$1e`
   width: 100%;
   padding: 13px 0 21px 28px;
   display: flex;
@@ -22110,8 +22156,8 @@ let _$1f = t => t,
     _t$1f,
     _t2$U,
     _t3$M,
-    _t4$A,
-    _t5$u;
+    _t4$B,
+    _t5$v;
 const Image = styled.img(_t$1f || (_t$1f = _$1f`
   max-width: 100%;
   max-height: 100%;
@@ -22173,12 +22219,12 @@ const Dimmer = styled.div(_t3$M || (_t3$M = _$1f`
 `), ({
   theme
 }) => theme.getColor('greyishBlue', 50));
-const Button$6 = styled(Button$1)(_t4$A || (_t4$A = _$1f`
+const Button$6 = styled(Button$1)(_t4$B || (_t4$B = _$1f`
   background-color: ${0};
 `), ({
   theme
 }) => theme.getColor('white', 50));
-const ModalContent = styled.div(_t5$u || (_t5$u = _$1f`
+const ModalContent = styled.div(_t5$v || (_t5$v = _$1f`
   position: absolute;
   width: 100%;
   height: 100%;