@ntbjs/react-components 2.0.0-rc.11 → 2.0.0-rc.13

package/esm/components/inputs/TextArea/TextArea.styled.js

@@ -11,6 +11,8 @@ let _ = t => t,
   _t7,
   _t8,
   _t9,
+  _t0,
+  _t1,
   _t10,
   _t11,
   _t12,
@@ -41,11 +43,7 @@ let _ = t => t,
   _t37,
   _t38,
   _t39,
-  _t40,
-  _t41,
-  _t42,
-  _t43,
-  _t44;
+  _t40;
 const fadeInCheck = keyframes(_t || (_t = _`
   from {
     opacity: 0
@@ -70,23 +68,17 @@ const activeLabel = css(_t3 || (_t3 = _`
   left: 8px !important;
   opacity: 1 !important;
 `));
-const placeholderBaseStyle = css(_t4 || (_t4 = _`
-  ${0}
-
-  ${0}
-
-     ${0}
-
-  ${0}
-`), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-600')), props => props.type === 'error-border' && css(_t5 || (_t5 = _`
-      ${0}
-    `), props.theme.themeProp('color', props.theme.getColor('red-500'), props.theme.getColor('red-500'))), props => props.type === 'warning-border' && css(_t6 || (_t6 = _`
-      ${0}
-    `), props.theme.themeProp('color', props.theme.getColor('orange-500'), props.theme.getColor('orange-500'))), props => props.theme.themeProp('opacity', 0.6, 0.5));
-const TextAreaContainter = styled.div.attrs(applyDefaultTheme)(_t7 || (_t7 = _`
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const TextAreaContainter = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t4 || (_t4 = _`
   display: flex;
 `));
-const Label = styled.label.attrs(applyDefaultTheme)(_t8 || (_t8 = _`
+const Label = styled.label.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t5 || (_t5 = _`
   ${0};
   flex-basis: 33.33%;
   font-size: 0.875rem;
@@ -97,10 +89,12 @@ const Label = styled.label.attrs(applyDefaultTheme)(_t8 || (_t8 = _`
   align-items: center;
   padding-top: 13px;
   ${0}
-`), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')), props => props.disabled && css(_t9 || (_t9 = _`
+`), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')), props => props.disabled && css(_t6 || (_t6 = _`
       cursor: not-allowed;
     `)));
-const InputIconContainer = styled.div.attrs(applyDefaultTheme)(_t10 || (_t10 = _`
+const InputIconContainer = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t7 || (_t7 = _`
   opacity: 0;
   pointer-events: none;
   border-top-right-radius: 3px;
@@ -128,27 +122,26 @@ const InputIconContainer = styled.div.attrs(applyDefaultTheme)(_t10 || (_t10 = _
 
     ${0}
   }
-`), props => props.theme.themeProp('background-color', props.theme.getColor('gray-900'), props.theme.getColor('gray-300'), '!important'), props => props.disabled && css(_t11 || (_t11 = _`
+`), props => props.theme.themeProp('background-color', props.theme.getColor('gray-900'), props.theme.getColor('gray-300'), '!important'), props => props.disabled && css(_t8 || (_t8 = _`
         display: none;
       `)));
-const TextInputField = styled.textarea.attrs(applyDefaultTheme)(_t12 || (_t12 = _`
+const TextInputField = styled.textarea.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t9 || (_t9 = _`
   width: 100%;
   font-family: inherit;
   font-size: 0.875rem;
-  border-radius: 2px;
+  border-radius: 3px;
   padding: 5px 10px;
   resize: vertical;
   z-index: 0;
-  border-radius: 3px;
   box-sizing: border-box;
   appearance: none;
   border: 1px solid;
-  transition: height 550ms ease-in-out; border-color 350ms;
-
-
-   ${0}
-
-
+  transition:
+    height 550ms ease-in-out,
+    border-color 350ms,
+    background 350ms;
 
   ${0}
 
@@ -156,32 +149,17 @@ const TextInputField = styled.textarea.attrs(applyDefaultTheme)(_t12 || (_t12 =
 
   ${0}
 
- 
-  ${0}
 
- 
   ${0}
 
   ${0}
 
-  ${0} 
-
-  ${0}  
-  
 
-  ${0}   
+  ${0} 
 
-     
-    
   ${0}
 
-      ${0}       
-
   ${0}
-    
-  
-    ${0}
-
 
 
   ${0}
@@ -190,108 +168,199 @@ const TextInputField = styled.textarea.attrs(applyDefaultTheme)(_t12 || (_t12 =
 
   ${0}
 
-      ${0}
-
+  ${0}
 
 
   &&:hover:not(:focus) {
-    ${0};
-
-      ${0};
-
-    ${0};
+    ${0}
 
-  
-     ${0}; 
+    ${0}
 
+    ${0}
 
-    ${0};
-    transition: background 350ms;
     & + ${0} {
       opacity: 1;
-      ${0};
-      transition: opacity 350ms;
+      ${0}
     }
   }
 
   &::placeholder {
-   
-   ${0}
-    
-  }
+    ${0}
 
+    ${0}
 
+      ${0}
+  }
 
-  &&:focus {
-    outline: none;
+  &:hover::placeholder {
     ${0}
 
-    ${0};
+    ${0}
+  }
 
-        
-    ${0}  
-      
+  &:focus::placeholder {
     ${0}
 
+    ${0}
+  }
+
+  &&:focus {
+    outline: none;
+
+    ${0}
   }
 
   &&:not(:hover):not(:focus) {
-    ${0};
-    ${0};
+    ${0}
 
-       ${0}
-       
+    ${0}
+
+    ${0}
+  }
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')), props => props.$borderRadius && css(_t0 || (_t0 = _`
+      border-radius: ${0}px;
+    `), props.$borderRadius), props => {
+  if (props.type === 'error') {
+    return css(_t1 || (_t1 = _`
+        ${0}
+        ${0}
+        ${0}
+      `), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#7f1b1b', '#FBEAE6'), props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6'));
+  } else if (props.type === 'warning') {
+    return css(_t10 || (_t10 = _`
+        ${0}
+        ${0}
+        ${0}
+      `), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#634E01', '#FFFDE8'), props.theme.themeProp('border-color', '#634E01', '#FFFDE8'));
+  } else if (props.type === 'error-border') {
+    return css(_t11 || (_t11 = _`
+        ${0}
+        ${0}
+        ${0}
+      `), props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')), props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white')), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
+  } else if (props.type === 'warning-border') {
+    return css(_t12 || (_t12 = _`
+        ${0}
+        ${0}
+        ${0}
+      `), props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')), props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white')), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
+  } else {
+    return css(_t13 || (_t13 = _`
+        ${0}
+        ${0}
+        ${0}
+      `), props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')), props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white')), props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400')));
   }
-`), props => props.borderRadius && css(_t13 || (_t13 = _`
-       border-radius: ${0}px;
-     `), props.borderRadius), props => props.theme.themeProp('color', 'white', 'black'), props => props.readOnly && css(_t14 || (_t14 = _`
+}, props => props.readOnly && css(_t14 || (_t14 = _`
       cursor: default;
       border-color: transparent !important;
-      padding: 12px 10px; ;
+      padding: 12px 10px;
     `)), props => props.disabled && css(_t15 || (_t15 = _`
       cursor: not-allowed;
-    `)), props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')), props => props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white')), props => props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400')), props => props.noBorder && css(_t16 || (_t16 = _`
-      ${0}
-    `), props => props.theme.themeProp('border-color', props.theme.getColor('gray-900'), props.theme.getColor('white'))), props => props.type === 'warning' && css(_t17 || (_t17 = _`
-      ${0}
+    `)), props => props.$noBorder && !props.type && css(_t16 || (_t16 = _`
       ${0}
+    `), props => props.theme.themeProp('border-color', props.theme.getColor('gray-900'), props.theme.getColor('white'))), props => props.$noBorder && props.type === 'warning' && css(_t17 || (_t17 = _`
       ${0}
-    `), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#634E01', '#FFFDE8'), props.theme.themeProp('border-color', '#634E01 ', '#FFFDE8')), props => props.type === 'error' && css(_t18 || (_t18 = _`
+    `), props => props.theme.themeProp('border-color', '#634E01', '#FFFDE8')), props => props.$noBorder && props.type === 'error' && css(_t18 || (_t18 = _`
       ${0}
-      ${0}
-      ${0}
-    `), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#7f1b1b', '#FBEAE6'), props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6')), props => props.noBorder && props.type === 'warning' && css(_t19 || (_t19 = _`
-      ${0}
-    `), props => props.theme.themeProp('border-color', '#634E01', '#FFFDE8')), props => props.noBorder && props.type === 'error' && css(_t20 || (_t20 = _`
-          ${0}
-        `), props => props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6')), props => props.type === 'warning-border' && css(_t21 || (_t21 = _`
-      ${0}
-    `), props.theme.themeProp('border-color', props.theme.getColor('orange-500'), props.theme.getColor('orange-500'))), props => props.type === 'error-border' && css(_t22 || (_t22 = _`
-        ${0}
-      `), props.theme.themeProp('border-color', props.theme.getColor('red-500'), props.theme.getColor('red-500'))), props => props.padding === 'small' && css(_t23 || (_t23 = _`
+    `), props => props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6')), props => props.padding === 'small' && css(_t19 || (_t19 = _`
       padding: 5px 10px;
-    `)), props => props.padding === 'medium' && css(_t24 || (_t24 = _`
+    `)), props => props.padding === 'medium' && css(_t20 || (_t20 = _`
       padding: 13px 15px;
-    `)), props => props.padding === 'large' && css(_t25 || (_t25 = _`
+    `)), props => props.padding === 'large' && css(_t21 || (_t21 = _`
       padding: 15px 55px;
-    `)), props => props.hasIcon && css(_t26 || (_t26 = _`
-          padding-left: 55px;
-          padding-right: 35px;
-          padding-top: 13.5px;
-        `)), props => !props.readOnly && !props.disabled && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')), props => props.edit && props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')), props => props.type === 'warning' && props.theme.themeProp('background', '#806403', '#FFFEBF'), props => props.type === 'error' && props.theme.themeProp('background', '#901d1d', '#F7D5D0'), props => props.noBorder && !props.readOnly && props.type != 'warning' && props.type != 'error' ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')) : 'background: transparent', InputIconContainer, props => props.type === 'success' && css(_t27 || (_t27 = _`
+    `)), props => props.$hasIcon && css(_t22 || (_t22 = _`
+      padding-left: 55px;
+      padding-right: 35px;
+      padding-top: 13.5px;
+    `)), props => {
+  if (props.disabled) {
+    return '';
+  }
+  if (props.readOnly) {
+    if (props.type === 'error') {
+      return props.theme.themeProp('background', '#7f1b1b', '#FBEAE6');
+    } else if (props.type === 'warning') {
+      return props.theme.themeProp('background', '#634E01', '#FFFDE8');
+    }
+    return '';
+  }
+  if (props.type === 'error') {
+    return props.theme.themeProp('background', '#901d1d', '#F7D5D0');
+  } else if (props.type === 'warning') {
+    return props.theme.themeProp('background', '#806403', '#FFFEBF');
+  } else if (!props.disabled) {
+    return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
+  }
+  return '';
+}, props => props.$edit && props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')), props => props.$noBorder && !props.readOnly && props.type !== 'warning' && props.type !== 'error' ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')) : '', InputIconContainer, props => props.type === 'success' && css(_t23 || (_t23 = _`
           opacity: 0;
-        `)), placeholderBaseStyle, props => props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-600')), props => props.theme.themeProp('background', 'transparent', props.theme.getColor('white')), props => props.type === 'warning' && css(_t28 || (_t28 = _`
-        ${0}
-        ${0}
-        ${0}
-      `), props => props.theme.themeProp('border-color', '#F4E21E', '#F4E21E'), props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black')), props => props.type === 'error' && css(_t29 || (_t29 = _`
+        `)), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600')), props => props.theme.themeProp('opacity', 0.6, 0.5), props => {
+  if (props.type === 'warning') {
+    return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
+  } else if (props.type === 'error') {
+    return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
+  }
+  return '';
+}, props => props.theme.themeProp('opacity', 0.6, 0.5), props => {
+  if (props.type === 'warning') {
+    return props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('gray-900'));
+  } else if (props.type === 'error') {
+    return props.theme.themeProp('color', props.theme.getColor('red-600'), props.theme.getColor('red-600'));
+  } else {
+    return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
+  }
+}, props => props.theme.themeProp('opacity', 0.6, 0.5), props => {
+  if (props.type === 'warning') {
+    return props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('gray-900'));
+  } else if (props.type === 'error') {
+    return props.theme.themeProp('color', props.theme.getColor('red-600'), props.theme.getColor('red-600'));
+  } else {
+    return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
+  }
+}, props => {
+  if (props.readOnly) {
+    if (props.type === 'error') {
+      return props.theme.themeProp('background', '#7f1b1b', '#FBEAE6');
+    } else if (props.type === 'warning') {
+      return props.theme.themeProp('background', '#634E01', '#FFFDE8');
+    }
+    return '';
+  }
+  if (props.type === 'error') {
+    return css(_t24 || (_t24 = _`
+          ${0}
+          ${0}
         ${0}
+        `), props.theme.themeProp('border-color', '#D83018', '#D83018'), props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
+  } else if (props.type === 'warning') {
+    return css(_t25 || (_t25 = _`
+          ${0}
+          ${0}
         ${0}
+        `), props.theme.themeProp('border-color', '#F4E21E', '#F4E21E'), props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
+  } else {
+    return css(_t26 || (_t26 = _`
+          ${0}
+          ${0}
+        `), props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-600')), props.theme.themeProp('background', 'transparent', props.theme.getColor('white')));
+  }
+}, props => {
+  if (props.$edit) {
+    if (props.type === 'error') {
+      return props.theme.themeProp('background', '#7f1b1b', '#FEE2E2');
+    } else if (props.type === 'warning') {
+      return props.theme.themeProp('background', '#634E01', '#FFFDE8');
+    } else {
+      return props.theme.themeProp('background', 'rgba(39,39,42, 0.7)', 'rgba(244,244,245, 0.3)');
+    }
+  }
+}, props => props.$edit && props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)'), props => props.$noBorder && props.$edit && css(_t27 || (_t27 = _`
         ${0}
-      `), props => props.theme.themeProp('border-color', '#D83018', '#D83018'), props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black')), props => props.edit && props.theme.themeProp('background', 'rgba(39,39,42, 0.7)', 'rgba(244,244,245, 0.3)'), props => props.edit && props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)'), props => props.noBorder && props.edit && css(_t30 || (_t30 = _`
-           ${0}
-         `), props => props.theme.themeProp('border-color', '#27272A', 'rgba(244,244,245, 0.3)')));
-const TextInputLabel = styled.label.attrs(applyDefaultTheme)(_t31 || (_t31 = _`
+      `), props => props.theme.themeProp('border-color', '#27272A', 'rgba(244,244,245, 0.3)')));
+const TextInputLabel = styled.label.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t28 || (_t28 = _`
   position: absolute;
   top: 13px;
   left: 11px;
@@ -302,7 +371,8 @@ const TextInputLabel = styled.label.attrs(applyDefaultTheme)(_t31 || (_t31 = _`
 
   ${0};
 
-  ${0};
+      ${0}
+
 
   ${0}
 
@@ -312,14 +382,16 @@ const TextInputLabel = styled.label.attrs(applyDefaultTheme)(_t31 || (_t31 = _`
   content: "";
 
   ${0}
-`), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')), placeholderBaseStyle, props => props.theme.themeProp('background', `linear-gradient(0deg, ${props.theme.getColor('gray-900')} calc(50% + 1px), transparent 50%)`, `linear-gradient(0deg, ${props.theme.getColor('white')} calc(50% + 1px), transparent 50%)`), props => !props.inputIsEmpty && css(_t32 || (_t32 = _`
+`), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')), props => props.theme.themeProp('opacity', 0.6, 0.5), props => props.theme.themeProp('background', `linear-gradient(0deg, ${props.theme.getColor('gray-900')} calc(50% + 1px), transparent 50%)`, `linear-gradient(0deg, ${props.theme.getColor('white')} calc(50% + 1px), transparent 50%)`), props => !props.$inputIsEmpty && css(_t29 || (_t29 = _`
       ${0}
-    `), activeLabel), props => props.hasPlaceholder && css(_t33 || (_t33 = _`
+    `), activeLabel), props => props.$hasPlaceholder && css(_t30 || (_t30 = _`
       ${0};
-    `), activeLabel), props => props.hasIcon && css(_t34 || (_t34 = _`
+    `), activeLabel), props => props.$hasIcon && css(_t31 || (_t31 = _`
       left: 55px;
     `)));
-const TextInputFieldIcon = styled.div.attrs(applyDefaultTheme)(_t35 || (_t35 = _`
+const TextInputFieldIcon = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t32 || (_t32 = _`
   position: absolute;
   top: 0;
   left: 0;
@@ -333,7 +405,9 @@ const TextInputFieldIcon = styled.div.attrs(applyDefaultTheme)(_t35 || (_t35 = _
     transition: opacity 250ms;
   }
 `));
-const TextInputFieldIconAlert = styled.div.attrs(applyDefaultTheme)(_t36 || (_t36 = _`
+const TextInputFieldIconAlert = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t33 || (_t33 = _`
   position: absolute;
   top: 2.8px;
   display: flex;
@@ -346,16 +420,14 @@ const TextInputFieldIconAlert = styled.div.attrs(applyDefaultTheme)(_t36 || (_t3
     width: 15px;
   }
 `), props => props.type === 'warning' && props.theme.themeProp('color', '#EAB308', '#2F2402'));
-const TextInput = styled.div.attrs(applyDefaultTheme)(_t37 || (_t37 = _`
+const TextInput = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t34 || (_t34 = _`
   position: relative;
   flex-basis: ${0};
 
   ${0}
 
-  ${0}
-
-    
-
   &:focus-within {
     ${0} {
       ${0};
@@ -372,17 +444,16 @@ const TextInput = styled.div.attrs(applyDefaultTheme)(_t37 || (_t37 = _`
     ${0};
     ${0}
   }
-  }
-`), props => props.$fieldLabel ? '66.66%' : '100%', props => props.readOnly && css(_t38 || (_t38 = _`
-      overflow: auto;
-    `)), props => props.disabled && css(_t39 || (_t39 = _`
+`), props => props.$fieldLabel ? '66.66%' : '100%', props => props.disabled && css(_t35 || (_t35 = _`
       opacity: 0.5;
 
       > * {
         cursor: not-allowed;
       }
     `)), TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, props => props.type === 'error' && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
-const Description = styled.div.attrs(applyDefaultTheme)(_t40 || (_t40 = _`
+const Description = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t36 || (_t36 = _`
   margin: 8px 0 0 0;
   padding: 0 0.6875rem;
   font-size: 0.75rem;
@@ -393,12 +464,14 @@ const Description = styled.div.attrs(applyDefaultTheme)(_t40 || (_t40 = _`
   ${0}
 
   ${0}
-`), props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')), props => (props.type === 'warning-border' || props.type === 'warning') && css(_t41 || (_t41 = _`
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')), props => (props.type === 'warning-border' || props.type === 'warning') && css(_t37 || (_t37 = _`
       ${0}
-    `), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500'))), props => (props.type === 'error-border' || props.type === 'error') && css(_t42 || (_t42 = _`
+    `), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500'))), props => (props.type === 'error-border' || props.type === 'error') && css(_t38 || (_t38 = _`
       ${0}
     `), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'))));
-const SuccessContainer = styled.div.attrs(applyDefaultTheme)(_t43 || (_t43 = _`
+const SuccessContainer = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t39 || (_t39 = _`
   opacity: 1;
   pointer-events: none;
   opacity: ${0};
@@ -415,8 +488,10 @@ const SuccessContainer = styled.div.attrs(applyDefaultTheme)(_t43 || (_t43 = _`
   > svg {
     width: 15px;
   }
-`), props => props.fadeIn ? 0 : 1, props => props.fadeIn ? fadeOutCheck : fadeInCheck, props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500')));
-const SuccessContainerLabel = styled.div.attrs(applyDefaultTheme)(_t44 || (_t44 = _`
+`), props => props.$fadeIn ? 0 : 1, props => props.$fadeIn ? fadeOutCheck : fadeInCheck, props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500')));
+const SuccessContainerLabel = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t40 || (_t40 = _`
   opacity: 1;
   pointer-events: none;
   opacity: ${0};
@@ -432,6 +507,6 @@ const SuccessContainerLabel = styled.div.attrs(applyDefaultTheme)(_t44 || (_t44
   > svg {
     width: 13px;
   }
-`), props => props.fadeIn ? 0 : 1, props => props.fadeIn ? fadeOutCheck : fadeInCheck, props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500')));
+`), props => props.$fadeIn ? 0 : 1, props => props.$fadeIn ? fadeOutCheck : fadeInCheck, props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500')));
 
 export { Description, InputIconContainer, Label, SuccessContainer, SuccessContainerLabel, TextAreaContainter, TextInput, TextInputField, TextInputFieldIcon, TextInputFieldIconAlert, TextInputLabel };

package/esm/components/inputs/TextInput/TextInput.js

@@ -2,7 +2,7 @@ import { objectWithoutProperties as _objectWithoutProperties, extends as _extend
 import React from '../../../node_modules/react/index.js';
 import { nanoid } from 'nanoid';
 import PropTypes from '../../../node_modules/prop-types/index.js';
-import useMergedRefs from '../../../node_modules/@restart/hooks/esm/useMergedRefs.js';
+import useMergedRefs from '../../../node_modules/@restart/hooks/lib/useMergedRefs.js';
 import { isBoolean, isEmpty } from 'lodash';
 import { ReactComponent as SvgEditNote } from '../../../icons/edit-note.svg.js';
 import { TextInput as TextInput$2, TextInputFieldIcon, TextInputWrapper, Adornment, TextInputField, InputIconContainer, TextInputLabel, Description } from './TextInput.styled.js';
@@ -61,16 +61,16 @@ const TextInput = React.forwardRef(function TextInput(_ref, forwardedRef) {
     return null;
   }, [description, error, warning]);
   return React.createElement(TextInput$2, {
-    error: hasError,
+    $error: hasError,
     disabled: disabled,
-    warning: hasWarning,
+    $warning: hasWarning,
     className: className,
     style: style
   }, typeof icon !== 'undefined' && React.createElement(TextInputFieldIcon, null, icon), React.createElement(TextInputWrapper, null, typeof (adornments === null || adornments === void 0 ? void 0 : adornments.prefix) === 'string' && adornments.prefix.length > 0 && React.createElement(Adornment, {
     htmlFor: `text-input-${uniqueId}`,
-    error: hasError,
-    warning: hasWarning,
-    isPrefix: true,
+    $error: hasError,
+    $warning: hasWarning,
+    $isPrefix: true,
     onClick: () => textInputDomNode.current.focus()
   }, adornments.prefix), React.createElement(TextInputField, _extends({
     ref: textInputRef,
@@ -81,32 +81,31 @@ const TextInput = React.forwardRef(function TextInput(_ref, forwardedRef) {
     type: type,
     required: required,
     autoComplete: autoComplete,
-    hasIcon: Boolean(icon),
-    error: hasError,
-    warning: hasWarning,
+    $hasIcon: Boolean(icon),
+    $error: hasError,
+    $warning: hasWarning,
     id: `text-input-${uniqueId}`,
     onChange: onChange,
     onBlur: onBlur,
     readOnly: readOnly,
-    noBorder: noBorder
+    $noBorder: noBorder
   }, rest)), !readOnly && noBorder && React.createElement(InputIconContainer, {
-    error: error,
-    warning: warning
+    $error: hasError,
+    $warning: hasWarning
   }, React.createElement(SvgEditNote, null)), label && React.createElement(TextInputLabel, {
     htmlFor: `text-input-${uniqueId}`,
-    hasPlaceholder: Boolean(placeholder),
-    hasAdornments: Boolean(typeof (adornments === null || adornments === void 0 ? void 0 : adornments.prefix) === 'string' && adornments.prefix.length > 0 || typeof (adornments === null || adornments === void 0 ? void 0 : adornments.suffix) === 'string' && adornments.suffix.length > 0),
-    hasIcon: Boolean(icon),
-    error: hasError,
-    warning: hasWarning
+    $hasPlaceholder: Boolean(placeholder),
+    $hasAdornments: Boolean(typeof (adornments === null || adornments === void 0 ? void 0 : adornments.prefix) === 'string' && adornments.prefix.length > 0 || typeof (adornments === null || adornments === void 0 ? void 0 : adornments.suffix) === 'string' && adornments.suffix.length > 0),
+    $hasIcon: Boolean(icon),
+    $error: hasError
   }, label, required && ' *'), typeof (adornments === null || adornments === void 0 ? void 0 : adornments.suffix) === 'string' && adornments.suffix.length > 0 && React.createElement(Adornment, {
-    error: hasError,
-    warning: hasWarning,
-    isPrefix: false,
+    $error: hasError,
+    $warning: hasWarning,
+    $isPrefix: false,
     onClick: () => textInputDomNode.current.focus()
   }, adornments.suffix)), typeof descriptionText === 'string' && descriptionText.length > 0 && React.createElement(Description, {
-    error: hasError,
-    warning: hasWarning
+    $error: hasError,
+    $warning: hasWarning
   }, descriptionText));
 });
 TextInput.defaultProps = {