@npm_leadtech/legal-lib-components 5.2.40 → 5.3.0

package/dist/src/components/atoms/Spinner/Spinner.styled.ts

@@ -0,0 +1,29 @@
+import styled from 'styled-components'
+
+export const SpinnerStyled = styled.svg`
+  animation: rotate 2s linear infinite;
+  width: 24px;
+  height: 24px;
+
+  &.e-spinner {
+    path {
+      fill: var(--others-white);
+      stroke-linecap: round;
+      stroke-dasharray: 15, 150;
+    }
+    &.big {
+      width: 70px;
+      height: 70px;
+    }
+    &.spinner--neutral {
+      path {
+        fill: var(--neutral-neutral-2);
+      }
+    }
+    &.spinner--primary {
+      path {
+        fill: var(--primary-main);
+      }
+    }
+  }
+`

package/dist/src/components/atoms/Spinner/Spinner.tsx

@@ -1,23 +1,23 @@
 import React, { type FC } from 'react'
 
 import { type SpinnerProps } from './SpinnerProps.types'
-// import './Spinner.scss'
+import { SpinnerStyled } from './Spinner.styled'
 
 const Spinner: FC<SpinnerProps> = ({ className = '', big = false }) => {
   return !big ? (
-    <svg className={`e-spinner ${className}`} width='24' height='24' viewBox='0 0 24 24' fill='none'>
+    <SpinnerStyled className={`e-spinner ${className}`} width='24' height='24' viewBox='0 0 24 24' fill='none'>
       <path
         d='M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 11.3864 2.49746 10.8889 3.11111 10.8889C3.72476 10.8889 4.22222 11.3864 4.22222 12C4.22222 16.2955 7.70445 19.7778 12 19.7778C16.2955 19.7778 19.7778 16.2955 19.7778 12C19.7778 7.70445 16.2955 4.22222 12 4.22222C11.3864 4.22222 10.8889 3.72476 10.8889 3.11111C10.8889 2.49746 11.3864 2 12 2Z'
         fill='#6D7275'
       />
-    </svg>
+    </SpinnerStyled>
   ) : (
-    <svg className={`e-spinner big ${className}`} viewBox='0 0 24 24' fill='none'>
+    <SpinnerStyled className={`e-spinner big ${className}`} viewBox='0 0 24 24' fill='none'>
       <path
         d='M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 11.3864 2.49746 10.8889 3.11111 10.8889C3.72476 10.8889 4.22222 11.3864 4.22222 12C4.22222 16.2955 7.70445 19.7778 12 19.7778C16.2955 19.7778 19.7778 16.2955 19.7778 12C19.7778 7.70445 16.2955 4.22222 12 4.22222C11.3864 4.22222 10.8889 3.72476 10.8889 3.11111C10.8889 2.49746 11.3864 2 12 2Z'
         fill='#6D7275'
       />
-    </svg>
+    </SpinnerStyled>
   )
 }
 

package/dist/src/components/atoms/StepRatafiaCard/StepRatafiaCard.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// import './StepRatafiaCard.scss'
+import { StepRatafiaCardStyled } from './StepRatafiaCard.styled';
 export const StepRatafiaCard = ({ title, icon, description }) => {
-    return (_jsxs("div", { className: 'step-ratafia-card', children: [_jsxs("div", { className: 'step-ratafia-card__title', children: [icon !== null && _jsx("div", { className: 'step-ratafia-card__title__icon', children: icon }), _jsx("h3", { className: 'sans-serif --medium --bold-weight step-ratafia-card__title__text', children: title })] }), _jsx("p", { className: 'sans-serif --small step-ratafia-card__description', children: description })] }));
+    return (_jsxs(StepRatafiaCardStyled, { className: 'step-ratafia-card', children: [_jsxs("div", { className: 'step-ratafia-card__title', children: [icon !== null && _jsx("div", { className: 'step-ratafia-card__title__icon', children: icon }), _jsx("h3", { className: 'sans-serif --medium --bold-weight step-ratafia-card__title__text', children: title })] }), _jsx("p", { className: 'sans-serif --small step-ratafia-card__description', children: description })] }));
 };
 export default StepRatafiaCard;

package/dist/src/components/atoms/StepRatafiaCard/StepRatafiaCard.styled.d.ts

@@ -0,0 +1 @@
+export declare const StepRatafiaCardStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/src/components/atoms/StepRatafiaCard/StepRatafiaCard.styled.js

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+export const StepRatafiaCardStyled = styled.div `
+  display: flex;
+  padding: 1.5rem;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+  align-self: stretch;
+
+  border-radius: 4px;
+  background: var(--neutral-neutral-6);
+
+  .step-ratafia-card {
+    &__title {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      align-self: stretch;
+
+      color: var(--neutral-neutral-1);
+
+      &__icon {
+        width: 20px;
+        height: 20px;
+      }
+    }
+  }
+`;

package/dist/src/components/atoms/StepRatafiaCard/StepRatafiaCard.styled.ts

@@ -0,0 +1,29 @@
+import styled from 'styled-components'
+
+export const StepRatafiaCardStyled = styled.div`
+  display: flex;
+  padding: 1.5rem;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+  align-self: stretch;
+
+  border-radius: 4px;
+  background: var(--neutral-neutral-6);
+
+  .step-ratafia-card {
+    &__title {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      align-self: stretch;
+
+      color: var(--neutral-neutral-1);
+
+      &__icon {
+        width: 20px;
+        height: 20px;
+      }
+    }
+  }
+`

package/dist/src/components/atoms/StepRatafiaCard/StepRatafiaCard.tsx

@@ -1,17 +1,17 @@
 import React from 'react'
 
 import { type StepRatafiaCardProps } from './StepRatafiaCardProps.types'
-// import './StepRatafiaCard.scss'
+import { StepRatafiaCardStyled } from './StepRatafiaCard.styled'
 
 export const StepRatafiaCard: React.FC<StepRatafiaCardProps> = ({ title, icon, description }) => {
   return (
-    <div className='step-ratafia-card'>
+    <StepRatafiaCardStyled className='step-ratafia-card'>
       <div className='step-ratafia-card__title'>
         {icon !== null && <div className='step-ratafia-card__title__icon'>{icon}</div>}
         <h3 className='sans-serif --medium --bold-weight step-ratafia-card__title__text'>{title}</h3>
       </div>
       <p className='sans-serif --small step-ratafia-card__description'>{description}</p>
-    </div>
+    </StepRatafiaCardStyled>
   )
 }
 

package/dist/src/components/atoms/Tag/Tag.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// import './Tag.scss'
+import { TagStyled } from './Tag.styled';
 export const Tag = ({ text, icon }) => {
-    return (_jsxs("div", { className: 'tag', children: [_jsx("div", { className: 'icon', children: icon }), _jsx("div", { className: 'text', children: text })] }));
+    return (_jsxs(TagStyled, { className: 'tag', children: [_jsx("div", { className: 'tag__icon', children: icon }), _jsx("div", { className: 'tag__text', children: text })] }));
 };

package/dist/src/components/atoms/Tag/Tag.styled.d.ts

@@ -0,0 +1 @@
+export declare const TagStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/src/components/atoms/Tag/Tag.styled.js

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+export const TagStyled = styled.div `
+  align-items: center;
+  background: var(--secondary-main-light-4);
+  border-radius: var(--global-border-radius);
+  display: flex;
+  gap: 4px;
+  justify-content: center;
+  padding: 4px;
+  width: fit-content;
+
+  .tag {
+    &__icon {
+      display: flex;
+
+      .icon-svg-with-theme-color {
+        background-color: get-color(secondary, main-dark-2);
+      }
+    }
+
+    &__text {
+      color: var(--neutral-neutral-1);
+      font-size: 12px;
+      font-weight: 700;
+      line-height: 16px;
+    }
+  }
+`;

package/dist/src/components/atoms/Tag/Tag.styled.ts

@@ -0,0 +1,29 @@
+import styled from 'styled-components'
+
+export const TagStyled = styled.div`
+  align-items: center;
+  background: var(--secondary-main-light-4);
+  border-radius: var(--global-border-radius);
+  display: flex;
+  gap: 4px;
+  justify-content: center;
+  padding: 4px;
+  width: fit-content;
+
+  .tag {
+    &__icon {
+      display: flex;
+
+      .icon-svg-with-theme-color {
+        background-color: get-color(secondary, main-dark-2);
+      }
+    }
+
+    &__text {
+      color: var(--neutral-neutral-1);
+      font-size: 12px;
+      font-weight: 700;
+      line-height: 16px;
+    }
+  }
+`

package/dist/src/components/atoms/Tag/Tag.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 
 import { type TagProps } from './TagProps'
-// import './Tag.scss'
+import { TagStyled } from './Tag.styled'
 
 export const Tag: React.FC<TagProps> = ({ text, icon }) => {
   return (
-    <div className='tag'>
-      <div className='icon'>{icon}</div>
-      <div className='text'>{text}</div>
-    </div>
+    <TagStyled className='tag'>
+      <div className='tag__icon'>{icon}</div>
+      <div className='tag__text'>{text}</div>
+    </TagStyled>
   )
 }

package/dist/src/components/atoms/TagRatafiaItem/TagRatafiaItem.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// import './TagRatafiaItem.scss'
+import { TagRatafiaItemStyled } from './TagRatafiaItem.styled';
 export const TagRatafiaItem = ({ icon, description }) => {
-    return (_jsxs("div", { className: 'tag-ratafia-item', children: [icon !== null && _jsx("div", { className: 'tag-ratafia-item__icon', children: icon }), _jsx("span", { className: 'sans-serif --small tag-ratafia-item__description', itemProp: 'text', children: description })] }));
+    return (_jsxs(TagRatafiaItemStyled, { className: 'tag-ratafia-item', children: [icon !== null && _jsx("div", { className: 'tag-ratafia-item__icon', children: icon }), _jsx("span", { className: 'sans-serif --small tag-ratafia-item__description', itemProp: 'text', children: description })] }));
 };
 export default TagRatafiaItem;

package/dist/src/components/atoms/TagRatafiaItem/TagRatafiaItem.styled.d.ts

@@ -0,0 +1 @@
+export declare const TagRatafiaItemStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/src/components/atoms/TagRatafiaItem/TagRatafiaItem.styled.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+export const TagRatafiaItemStyled = styled.div `
+  background: var(--primary-main-light-6);
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+
+  .tag-ratafia-item {
+    &__icon {
+      height: 16px;
+      width: 16px;
+    }
+    &__description {
+      color: var(--primary-main-dark-2);
+    }
+  }
+`;

package/dist/src/components/atoms/TagRatafiaItem/TagRatafiaItem.styled.ts

@@ -0,0 +1,21 @@
+import styled from 'styled-components'
+
+export const TagRatafiaItemStyled = styled.div`
+  background: var(--primary-main-light-6);
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+
+  .tag-ratafia-item {
+    &__icon {
+      height: 16px;
+      width: 16px;
+    }
+    &__description {
+      color: var(--primary-main-dark-2);
+    }
+  }
+`

package/dist/src/components/atoms/TagRatafiaItem/TagRatafiaItem.tsx

@@ -1,16 +1,16 @@
 import React from 'react'
 
 import { type TagRatafiaItemProps } from './TagRatafiaItemProps.types'
-// import './TagRatafiaItem.scss'
+import { TagRatafiaItemStyled } from './TagRatafiaItem.styled'
 
 export const TagRatafiaItem: React.FC<TagRatafiaItemProps> = ({ icon, description }) => {
   return (
-    <div className={'tag-ratafia-item'}>
+    <TagRatafiaItemStyled className={'tag-ratafia-item'}>
       {icon !== null && <div className={'tag-ratafia-item__icon'}>{icon}</div>}
       <span className='sans-serif --small tag-ratafia-item__description' itemProp='text'>
         {description}
       </span>
-    </div>
+    </TagRatafiaItemStyled>
   )
 }
 

package/dist/src/components/atoms/Tagline/Tagline.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// import './Tagline.scss'
+import { TaglineStyled } from './Tagline.styled';
 export const Tagline = ({ text }) => {
-    return (_jsx("div", { className: 'tagline', children: _jsx("span", { className: 'sans-serif --small tagline__text', children: text }) }));
+    return (_jsx(TaglineStyled, { className: 'tagline', children: _jsx("span", { className: 'sans-serif --small tagline__text', children: text }) }));
 };

package/dist/src/components/atoms/Tagline/Tagline.styled.d.ts

@@ -0,0 +1 @@
+export declare const TaglineStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/src/components/atoms/Tagline/Tagline.styled.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+export const TaglineStyled = styled.div `
+  margin-bottom: 1rem;
+
+  .tagline {
+    &__text {
+      border-bottom: solid 1px var(--neutral-neutral-3);
+      color: var(--neutral-neutral-2);
+      display: inline-block;
+      font-family: var(--font-sans);
+      font-weight: bold;
+      letter-spacing: 0;
+      padding-bottom: 0.5rem;
+      text-transform: uppercase;
+    }
+  }
+`;

package/dist/src/components/atoms/Tagline/Tagline.styled.ts

@@ -0,0 +1,18 @@
+import styled from 'styled-components'
+
+export const TaglineStyled = styled.div`
+  margin-bottom: 1rem;
+
+  .tagline {
+    &__text {
+      border-bottom: solid 1px var(--neutral-neutral-3);
+      color: var(--neutral-neutral-2);
+      display: inline-block;
+      font-family: var(--font-sans);
+      font-weight: bold;
+      letter-spacing: 0;
+      padding-bottom: 0.5rem;
+      text-transform: uppercase;
+    }
+  }
+`

package/dist/src/components/atoms/Tagline/Tagline.tsx

@@ -1,12 +1,12 @@
 import React, { type FC } from 'react'
 
 import { type TaglineProps } from './TaglineProps.types'
-// import './Tagline.scss'
+import { TaglineStyled } from './Tagline.styled'
 
 export const Tagline: FC<TaglineProps> = ({ text }) => {
   return (
-    <div className='tagline'>
+    <TaglineStyled className='tagline'>
       <span className='sans-serif --small tagline__text'>{text}</span>
-    </div>
+    </TaglineStyled>
   )
 }

package/dist/src/components/atoms/TextArea/TextArea.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TextAreaStyled } from './TextArea.styled';
 import error from '../../../../images/svg/info-error_24px_outlined.svg';
-// import './TextArea.scss'
 const TextArea = ({ customClass = '', disabled, errorMessage, label, name, onChange, placeholder, tooltip, validate = false, value, dataQa }) => {
     const classNames = `${validate ? 'e-textarea' : 'e-textarea --is-invalid'} 
     ${customClass}`;
-    return (_jsxs("div", { className: classNames, children: [tooltip !== undefined && _jsx("p", { className: 'tooltip-form sans-serif --small', children: tooltip }), errorMessage !== undefined && !validate && (_jsxs("span", { className: 'e-text--error sans-serif --small', children: [_jsx("img", { src: error, alt: errorMessage }), errorMessage] })), _jsx("textarea", { id: name, name: name, placeholder: placeholder, onChange: onChange, value: value, disabled: disabled, "data-qa": dataQa }), label !== undefined && (_jsx("div", { className: 'e-textarea__inner', children: _jsx("div", { className: 'inputLabel', children: label }) }))] }));
+    return (_jsxs(TextAreaStyled, { className: classNames, children: [tooltip !== undefined && _jsx("p", { className: 'tooltip-form sans-serif --small', children: tooltip }), errorMessage !== undefined && !validate && (_jsxs("span", { className: 'e-text--error sans-serif --small', children: [_jsx("img", { src: error, alt: errorMessage }), errorMessage] })), _jsx("textarea", { id: name, name: name, placeholder: placeholder, onChange: onChange, value: value, disabled: disabled, "data-qa": dataQa }), label !== undefined && (_jsx("div", { className: 'e-textarea__inner', children: _jsx("div", { className: 'inputLabel', children: label }) }))] }));
 };
 export default TextArea;

package/dist/src/components/atoms/TextArea/TextArea.styled.d.ts

@@ -0,0 +1 @@
+export declare const TextAreaStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/src/components/atoms/TextArea/TextArea.styled.js

@@ -0,0 +1,106 @@
+import styled from 'styled-components';
+export const TextAreaStyled = styled.div `
+  display: flex;
+  flex-direction: column-reverse;
+
+  &.--group-invalid {
+    input {
+      box-shadow: 0 0 0 2px var(--error-main);
+      background-color: var(--error-error-3);
+
+      &:active,
+      &:focus {
+        box-shadow: 0 0 0 2px var(--primary-main);
+        outline: none;
+        background-color: var(--neutral-neutral-6);
+      }
+    }
+  }
+
+  &.e-textarea {
+    &.--is-invalid {
+      .e-text--error {
+        display: flex;
+        align-content: center;
+        bottom: -1.5rem;
+        margin-top: 0.5rem;
+        color: var(--error-main);
+
+        img {
+          max-width: 20px;
+          margin-right: 0.25rem;
+        }
+      }
+
+      textarea {
+        box-shadow: 0 0 0 2px var(--error-main);
+        background-color: var(--error-error-3);
+
+        &:active,
+        &:focus {
+          box-shadow: 0 0 0 2px var(--primary-main);
+          outline: none;
+          background-color: var(--neutral-neutral-6);
+        }
+      }
+    }
+  }
+
+  &.e-textarea {
+    textarea {
+      color: var(--neutral-neutral-2);
+      background-color: var(--neutral-neutral-6);
+      border-radius: 4px;
+      padding: 0.75rem 0 0.75rem 0.75rem;
+      font-size: 0.875rem;
+      height: 10rem;
+      border: none;
+      text-overflow: ellipsis;
+      transition: box-shadow 0.3s ease;
+      box-shadow: 0 0 0 1px var(--neutral-neutral-3);
+      margin: 0.0005em;
+      outline: none;
+      resize: vertical;
+
+      &::placeholder {
+        color: var(--neutral-neutral-2);
+      }
+
+      &:-ms-input-placeholder {
+        color: var(--neutral-neutral-2);
+      }
+
+      &::-ms-input-placeholder {
+        color: var(--neutral-neutral-2);
+      }
+
+      &:hover {
+        box-shadow: 0 0 0 1px var(--neutral-neutral-2);
+      }
+
+      &:active,
+      &:focus {
+        box-shadow: 0 0 0 2px var(--primary-main);
+        outline: none;
+      }
+    }
+
+    .input-icon {
+      position: absolute;
+      transform: translate(-15%, -65%);
+      right: 0;
+      bottom: 0;
+    }
+
+    &__inner {
+      margin-bottom: 0;
+    }
+
+    .inputLabel {
+      font-weight: bold;
+    }
+    .tooltip-form {
+      margin-top: 0;
+    }
+  }
+`;

package/dist/src/components/atoms/TextArea/TextArea.styled.ts

@@ -0,0 +1,107 @@
+import styled from 'styled-components'
+
+export const TextAreaStyled = styled.div`
+  display: flex;
+  flex-direction: column-reverse;
+
+  &.--group-invalid {
+    input {
+      box-shadow: 0 0 0 2px var(--error-main);
+      background-color: var(--error-error-3);
+
+      &:active,
+      &:focus {
+        box-shadow: 0 0 0 2px var(--primary-main);
+        outline: none;
+        background-color: var(--neutral-neutral-6);
+      }
+    }
+  }
+
+  &.e-textarea {
+    &.--is-invalid {
+      .e-text--error {
+        display: flex;
+        align-content: center;
+        bottom: -1.5rem;
+        margin-top: 0.5rem;
+        color: var(--error-main);
+
+        img {
+          max-width: 20px;
+          margin-right: 0.25rem;
+        }
+      }
+
+      textarea {
+        box-shadow: 0 0 0 2px var(--error-main);
+        background-color: var(--error-error-3);
+
+        &:active,
+        &:focus {
+          box-shadow: 0 0 0 2px var(--primary-main);
+          outline: none;
+          background-color: var(--neutral-neutral-6);
+        }
+      }
+    }
+  }
+
+  &.e-textarea {
+    textarea {
+      color: var(--neutral-neutral-2);
+      background-color: var(--neutral-neutral-6);
+      border-radius: 4px;
+      padding: 0.75rem 0 0.75rem 0.75rem;
+      font-size: 0.875rem;
+      height: 10rem;
+      border: none;
+      text-overflow: ellipsis;
+      transition: box-shadow 0.3s ease;
+      box-shadow: 0 0 0 1px var(--neutral-neutral-3);
+      margin: 0.0005em;
+      outline: none;
+      resize: vertical;
+
+      &::placeholder {
+        color: var(--neutral-neutral-2);
+      }
+
+      &:-ms-input-placeholder {
+        color: var(--neutral-neutral-2);
+      }
+
+      &::-ms-input-placeholder {
+        color: var(--neutral-neutral-2);
+      }
+
+      &:hover {
+        box-shadow: 0 0 0 1px var(--neutral-neutral-2);
+      }
+
+      &:active,
+      &:focus {
+        box-shadow: 0 0 0 2px var(--primary-main);
+        outline: none;
+      }
+    }
+
+    .input-icon {
+      position: absolute;
+      transform: translate(-15%, -65%);
+      right: 0;
+      bottom: 0;
+    }
+
+    &__inner {
+      margin-bottom: 0;
+    }
+
+    .inputLabel {
+      font-weight: bold;
+    }
+    .tooltip-form {
+      margin-top: 0;
+    }
+  }
+`

package/dist/src/components/atoms/TextArea/TextArea.tsx

@@ -2,8 +2,8 @@
 import React, { type FC } from 'react'
 
 import { type TextAreaProps } from './TextAreaProps.types'
+import { TextAreaStyled } from './TextArea.styled'
 import error from '../../../../images/svg/info-error_24px_outlined.svg'
-// import './TextArea.scss'
 
 const TextArea: FC<TextAreaProps> = ({
   customClass = '',
@@ -22,7 +22,7 @@ const TextArea: FC<TextAreaProps> = ({
     ${customClass}`
 
   return (
-    <div className={classNames}>
+    <TextAreaStyled className={classNames}>
       {tooltip !== undefined && <p className='tooltip-form sans-serif --small'>{tooltip}</p>}
       {errorMessage !== undefined && !validate && (
         <span className='e-text--error sans-serif --small'>
@@ -44,7 +44,7 @@ const TextArea: FC<TextAreaProps> = ({
           <div className='inputLabel'>{label}</div>
         </div>
       )}
-    </div>
+    </TextAreaStyled>
   )
 }
 

package/dist/src/components/atoms/Toggle/Toggle.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// import './Toggle.scss'
+import { ToggleStyled } from './Toggle.styled';
 const Toggle = ({ toggleAction, toggleCheck, label }) => {
-    return (_jsxs("div", { className: 'e-toggle', children: [_jsxs("label", { className: 'switch', children: [_jsx("input", { type: 'checkbox', className: `toggle-checkbox ${toggleCheck ? 'isOn' : ''}`, checked: toggleCheck, onChange: toggleAction }), _jsx("div", { className: 'slider' })] }), _jsx("span", { children: label })] }));
+    return (_jsxs(ToggleStyled, { className: 'e-toggle', children: [_jsxs("label", { className: 'switch', children: [_jsx("input", { type: 'checkbox', className: `toggle-checkbox ${toggleCheck ? 'isOn' : ''}`, checked: toggleCheck, onChange: toggleAction }), _jsx("div", { className: 'slider' })] }), _jsx("span", { children: label })] }));
 };
 export default Toggle;

package/dist/src/components/atoms/Toggle/Toggle.styled.d.ts

@@ -0,0 +1 @@
+export declare const ToggleStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;