@ntbjs/react-components 2.0.14 → 3.0.0-rc.1

package/build/inputs/TextArea/TextArea.styled.js

@@ -1,191 +1,47 @@
 import styled, { keyframes, css } from 'styled-components';
 import { applyDefaultTheme } from '../../utils/defaultTheme.js';
 
-const fadeInCheck = keyframes`
-  from {
-    opacity: 0
-  }
-  to {
-    opacity: 1
-  }
-`;
-const fadeOutCheck = keyframes`
-  from {
-    opacity: 1
-  }
-  to {
-    opacity: 0
-  }
-`;
-const activeLabel = css`
-  font-size: 0.75rem;
-  padding: 0 3px;
-  top: -7px;
-  letter-spacing: 0.03em;
-  left: 8px !important;
-  opacity: 1 !important;
-`;
+const fadeInCheck = keyframes(["from{opacity:0}to{opacity:1}"]);
+const activeLabel = css(["font-size:0.75rem;padding:0 3px;top:-7px;letter-spacing:0.03em;left:8px !important;opacity:1 !important;"]);
 const shouldForwardProp = prop => {
   return prop !== 'theme' && !prop.startsWith('$');
 };
 const TextAreaContainter = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  display: flex;
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "TextAreastyled__TextAreaContainter",
+  componentId: "sc-1ymvc76-0"
+})(["display:flex;"]);
 const Label = styled.label.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  ${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'))};
-  flex-basis: 33.33%;
-  font-size: 0.875rem;
-  line-height: 1rem;
-  height: 19px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding-top: 13px;
-  ${props => props.disabled && css`
-      cursor: not-allowed;
-    `}
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "TextAreastyled__Label",
+  componentId: "sc-1ymvc76-1"
+})(["", ";flex-basis:33.33%;font-size:0.875rem;line-height:1rem;height:19px;display:flex;justify-content:space-between;align-items:center;padding-top:13px;", ""], props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')), props => props.disabled && css(["cursor:not-allowed;"]));
 const InputIconContainer = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  opacity: 0;
-  pointer-events: none;
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-  display: flex;
-  align-items: flex-start;
-
-  position: absolute;
-  right: 15px;
-  top: 10px;
-  bottom: 0;
-  > .smallPadingIcon {
-    padding: 4px;
-    width: 15px;
-    height: 15px;
-    border-radius: 5px;
-    opacity: 1;
-    margin-top: -5px;
-    ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-900'), props.theme.getColor('gray-300'), '!important')}
-  }
-  svg {
-    width: 15px;
-    opacity: 0.7;
-    transition: opacity 250ms;
-
-    ${props => props.disabled && css`
-        display: none;
-      `}
-  }
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "TextAreastyled__InputIconContainer",
+  componentId: "sc-1ymvc76-2"
+})(["opacity:0;pointer-events:none;border-top-right-radius:3px;border-bottom-right-radius:3px;display:flex;align-items:flex-start;position:absolute;right:15px;top:10px;bottom:0;> .smallPadingIcon{padding:4px;width:15px;height:15px;border-radius:5px;opacity:1;margin-top:-5px;", "}svg{width:15px;opacity:0.7;transition:opacity 250ms;", "}"], props => props.theme.themeProp('background-color', props.theme.getColor('gray-900'), props.theme.getColor('gray-300'), '!important'), props => props.disabled && css(["display:none;"]));
 const TextInputField = styled.textarea.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  width: 100%;
-  font-family: inherit;
-  font-size: 0.875rem;
-  border-radius: 3px;
-  padding: 5px 10px;
-  resize: vertical;
-  z-index: 0;
-  box-sizing: border-box;
-  appearance: none;
-  border: 1px solid;
-  transition:
-    height 550ms ease-in-out,
-    border-color 350ms,
-    background 350ms;
-
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))}
-
-  ${props => props.$borderRadius && css`
-      border-radius: ${props.$borderRadius}px;
-    `}
-
-  ${props => {
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "TextAreastyled__TextInputField",
+  componentId: "sc-1ymvc76-3"
+})(["width:100%;font-family:inherit;font-size:0.875rem;border-radius:3px;padding:5px 10px;resize:vertical;z-index:0;box-sizing:border-box;appearance:none;border:1px solid;transition:height 550ms ease-in-out,border-color 350ms,background 350ms;", " ", " ", " ", " ", " ", "  ", " ", " ", " ", " ", " ", " &&:hover:not(:focus){", " ", " ", " & + ", "{opacity:1;", "}}&::placeholder{", "}", ";&:focus::placeholder{", "}&&:focus{outline:none;", "}&&:not(:hover):not(:focus){", " ", " ", "}"], props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')), props => props.$borderRadius && css(["border-radius:", "px;"], props.$borderRadius), props => {
   if (props.$type === 'error') {
-    return css`
-        ${props.theme.themeProp('color', 'white', 'black')}
-        ${props.theme.themeProp('background', '#7f1b1b', '#FBEAE6')}
-        ${props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6')}
-      `;
+    return css(["", " ", " ", ""], 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`
-        ${props.theme.themeProp('color', 'white', 'black')}
-        ${props.theme.themeProp('background', '#634E01', '#FFFDE8')}
-        ${props.theme.themeProp('border-color', '#634E01', '#FFFDE8')}
-      `;
+    return css(["", " ", " ", ""], 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`
-        ${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'))}
-      `;
+    return css(["", " ", " ", ""], 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`
-        ${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'))}
-      `;
+    return css(["", " ", " ", ""], 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`
-        ${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'))}
-      `;
+    return css(["", " ", " ", ""], 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.readOnly && css`
-      cursor: default;
-      border-color: transparent !important;
-      padding: 12px 10px;
-    `}
-
-  ${props => props.disabled && css`
-      cursor: not-allowed;
-    `}
-
-
-  ${props => props.$noBorder && !props.$type && css`
-      ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-900'), props.theme.getColor('white'))}
-    `} 
-
-  ${props => props.$noBorder && props.$type === 'warning' && css`
-      ${props => props.theme.themeProp('border-color', '#634E01', '#FFFDE8')}
-    `}
-
-  ${props => props.$noBorder && props.$type === 'error' && css`
-      ${props => props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6')}
-    `}
-
-
-  ${props => props.padding === 'small' && css`
-      padding: 5px 10px;
-    `}
-
-  ${props => props.padding === 'medium' && css`
-      padding: 13px 15px;
-    `}
-
-  ${props => props.padding === 'large' && css`
-      padding: 15px 55px;
-    `}
-
-  ${props => props.$hasIcon && css`
-      padding-left: 55px;
-      padding-right: 35px;
-      padding-top: 13.5px;
-    `}
-
-
-  &&:hover:not(:focus) {
-    ${props => {
+}, props => props.readOnly && css(["cursor:default;border-color:transparent !important;padding:12px 10px;"]), props => props.disabled && css(["cursor:not-allowed;"]), props => props.$noBorder && !props.$type && css(["", ""], props => props.theme.themeProp('border-color', props.theme.getColor('gray-900'), props.theme.getColor('white'))), props => props.$noBorder && props.$type === 'warning' && css(["", ""], props => props.theme.themeProp('border-color', '#634E01', '#FFFDE8')), props => props.$noBorder && props.$type === 'error' && css(["", ""], props => props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6')), props => props.padding === 'small' && css(["padding:5px 10px;"]), props => props.padding === 'medium' && css(["padding:13px 15px;"]), props => props.padding === 'large' && css(["padding:15px 55px;"]), props => props.$hasIcon && css(["padding-left:55px;padding-right:35px;padding-top:13.5px;"]), props => {
   if (props.disabled) {
     return '';
   }
@@ -205,59 +61,19 @@ const TextInputField = styled.textarea.withConfig({
     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} {
-      opacity: 1;
-      ${props => props.$type === 'success' && css`
-          opacity: 0;
-        `}
-    }
-  }
-
-&::placeholder {
-  ${props => {
+}, 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(["opacity:0;"]), props => {
   if (props.$type === 'error' || props.$type === 'warning') {
-    return css`
-        color: ${props.theme.getColor('gray-400')};
-        opacity: 0.9;
-      `;
+    return css(["color:", ";opacity:0.9;"], props.theme.getColor('gray-400'));
   } else {
-    return css`
-        ${props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'))}
-        opacity: 0.6;
-      `;
+    return css(["", " opacity:0.6;"], props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')));
   }
-}}
-}
-
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'))};
-
-
-
-  &:focus::placeholder {
-    ${props => {
+}, props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600')), props => {
   if (props.$type === 'warning' || props.$type === 'error') {
-    return css`
-          color: ${props.theme.getColor('gray-500')} !important;
-          opacity: 0.8 !important;
-        `;
+    return css(["color:", " !important;opacity:0.8 !important;"], props.theme.getColor('gray-500'));
   } else {
-    return css`
-          ${props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'))}
-        `;
+    return css(["", ""], props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600')));
   }
-}}
-  }
-
-  &&:focus {
-    outline: none;
-
-    ${props => {
+}, props => {
   if (props.readOnly) {
     if (props.$type === 'error') {
       return props.theme.themeProp('background', '#7f1b1b', '#FBEAE6');
@@ -267,28 +83,13 @@ const TextInputField = styled.textarea.withConfig({
     return '';
   }
   if (props.$type === 'error') {
-    return css`
-          ${props.theme.themeProp('border-color', '#D83018', '#D83018')}
-          ${props.theme.themeProp('background', 'white', 'white')}
-        ${props.theme.themeProp('color', 'black', 'black')}
-        `;
+    return css(["", " ", " ", ""], 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`
-          ${props.theme.themeProp('border-color', '#F4E21E', '#F4E21E')}
-          ${props.theme.themeProp('background', 'white', 'white')}
-        ${props.theme.themeProp('color', 'black', 'black')}
-        `;
+    return css(["", " ", " ", ""], props.theme.themeProp('border-color', '#F4E21E', '#F4E21E'), props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
   } else {
-    return css`
-          border-color: ${props.theme.getColor('gray-600')};
-          ${props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'))}
-        `;
+    return css(["border-color:", ";", ""], props.theme.getColor('gray-600'), props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')));
   }
-}}
-  }
-
-  &&:not(:hover):not(:focus) {
-    ${props => {
+}, props => {
   if (props.$edit) {
     if (props.$type === 'error') {
       return props.theme.themeProp('background', '#7f1b1b', '#FEE2E2');
@@ -298,165 +99,49 @@ const TextInputField = styled.textarea.withConfig({
       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`
-        ${props => props.theme.themeProp('border-color', '#27272A', '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(["", ""], props => props.theme.themeProp('border-color', '#27272A', 'rgba(244,244,245, 0.3)')));
 const TextInputLabel = styled.label.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  position: absolute;
-  top: 13px;
-  left: 11px;
-  line-height: 1.2;
-  font-size: 0.875rem;
-  transition: all 150ms;
-  margin-botton: 50px;
-
-  ${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`
-      ${activeLabel}
-    `}
-
-  ${props => props.$hasPlaceholder && css`
-      ${activeLabel};
-    `}
-  content: "";
-
-  ${props => props.$hasIcon && css`
-      left: 55px;
-    `}
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "TextAreastyled__TextInputLabel",
+  componentId: "sc-1ymvc76-4"
+})(["position:absolute;top:13px;left:11px;line-height:1.2;font-size:0.875rem;transition:all 150ms;margin-botton:50px;", ";", " ", " ", " ", " content:\"\";", ""], 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(["", ""], activeLabel), props => props.$hasPlaceholder && css(["", ";"], activeLabel), props => props.$hasIcon && css(["left:55px;"]));
 const TextInputFieldIcon = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 2.625rem;
-  display: flex;
-  padding: 0 10px;
-
-  svg {
-    width: 15px;
-    opacity: 0.6;
-    transition: opacity 250ms;
-  }
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "TextAreastyled__TextInputFieldIcon",
+  componentId: "sc-1ymvc76-5"
+})(["position:absolute;top:0;left:0;height:2.625rem;display:flex;padding:0 10px;svg{width:15px;opacity:0.6;transition:opacity 250ms;}"]);
 const TextInputFieldIconAlert = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  position: absolute;
-  top: 2.8px;
-  display: flex;
-  padding: 0 10px 0 30px;
-  opacity: 0.6;
-  transition: opacity 250ms;
-  ${props => props.$type === 'warning' && props.theme.themeProp('color', '#EAB308', '#2F2402')}
-  svg {
-    margin-top: 12px;
-    width: 15px;
-  }
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "TextAreastyled__TextInputFieldIconAlert",
+  componentId: "sc-1ymvc76-6"
+})(["position:absolute;top:2.8px;display:flex;padding:0 10px 0 30px;opacity:0.6;transition:opacity 250ms;", " svg{margin-top:12px;width:15px;}"], props => props.$type === 'warning' && props.theme.themeProp('color', '#EAB308', '#2F2402'));
 const TextInput = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  position: relative;
-  flex-basis: ${props => props.$fieldLabel ? '66.66%' : '100%'};
-
-  ${props => props.disabled && css`
-      opacity: 0.5;
-
-      > * {
-        cursor: not-allowed;
-      }
-    `}
-
-  &:focus-within {
-    ${TextInputLabel} {
-      ${activeLabel};
-    }
-
-    ${TextInputFieldIcon} {
-      svg {
-        opacity: 1;
-      }
-    }
-  }
-
-  ${TextInputField}:not(:placeholder-shown) + ${TextInputLabel} {
-    ${activeLabel};
-    ${props => props.$type === 'error' && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'))}
-  }
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "TextAreastyled__TextInput",
+  componentId: "sc-1ymvc76-7"
+})(["position:relative;flex-basis:", ";", " &:focus-within{", "{", ";}", "{svg{opacity:1;}}}", ":not(:placeholder-shown) + ", "{", ";", "}"], props => props.$fieldLabel ? '66.66%' : '100%', props => props.disabled && css(["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.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  margin: 8px 0 0 0;
-  padding: 0 0.6875rem;
-  font-size: 0.75rem;
-  line-height: 1.333;
-
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'))};
-
-  ${props => (props.$type === 'warning-border' || props.$type === 'warning') && css`
-      ${props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500'))}
-    `}
-
-  ${props => (props.$type === 'error-border' || props.$type === 'error') && css`
-      ${props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'))}
-    `}
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "TextAreastyled__Description",
+  componentId: "sc-1ymvc76-8"
+})(["margin:8px 0 0 0;padding:0 0.6875rem;font-size:0.75rem;line-height:1.333;", ";", " ", ""], props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')), props => (props.$type === 'warning-border' || props.$type === 'warning') && css(["", ""], props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500'))), props => (props.$type === 'error-border' || props.$type === 'error') && css(["", ""], props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'))));
 const SuccessContainer = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  opacity: 1;
-  pointer-events: none;
-  opacity: ${props => props.$fadeIn ? 0 : 1};
-  animation: ${props => props.$fadeIn ? fadeOutCheck : fadeInCheck} 0.5s ease-in-out;
-  transition: opacity 0.5s ease-in-out;
-  position: absolute;
-  margin-top: -35px;
-  margin-left: 5px;
-  width: 15px;
-  height: 15px;
-  padding: 5px;
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'))}
-
-  > svg {
-    width: 15px;
-  }
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "TextAreastyled__SuccessContainer",
+  componentId: "sc-1ymvc76-9"
+})(["opacity:1;pointer-events:none;animation:", " 0.5s ease-in-out;transition:opacity 0.5s ease-in-out;position:absolute;margin-top:-35px;margin-left:5px;width:15px;height:15px;padding:5px;", " > svg{width:15px;}"], fadeInCheck, props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500')));
 const SuccessContainerLabel = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  opacity: 1;
-  pointer-events: none;
-  opacity: ${props => props.$fadeIn ? 0 : 1};
-  animation: ${props => props.$fadeIn ? fadeOutCheck : fadeInCheck} 0.5s ease-in-out;
-  transition: opacity 0.5s ease-in-out;
-  margin-right: 5px;
-  margin-top: -7px;
-  width: 15px;
-  height: 15px;
-  padding: 5px;
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'))}
-
-  > svg {
-    width: 13px;
-  }
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "TextAreastyled__SuccessContainerLabel",
+  componentId: "sc-1ymvc76-10"
+})(["opacity:1;pointer-events:none;animation:", " 0.5s ease-in-out;transition:opacity 0.5s ease-in-out;margin-right:5px;margin-top:-7px;width:15px;height:15px;padding:5px;", " > svg{width:13px;}"], 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 };
 //# sourceMappingURL=TextArea.styled.js.map