@npm_leadtech/legal-lib-components 5.2.32 → 5.2.40

package/dist/src/components/atoms/SearchSelect/SearchSelect.scss

@@ -0,0 +1,222 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.e-searchselect {
+  display: flex;
+  flex-direction: column-reverse;
+  margin-bottom: 2rem;
+  position: relative;
+  width: 100%;
+
+  @include laptop {
+    max-width: 50%;
+  }
+
+  &--error {
+    display: none;
+  }
+
+  &__inner {
+    margin-bottom: 0.5rem;
+
+    label {
+      font-weight: bold;
+    }
+  }
+
+  .css-1wy0on6 {
+    & div:not(:last-child):first-child {
+      display: none;
+    }
+  }
+
+  .css-1hb7zxy-IndicatorsContainer {
+    div:nth-child(1) {
+      display: none;
+    }
+  }
+
+  .css-1gtu0rj-indicatorContainer {
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iOHB4IiBoZWlnaHQ9IjIwcHgiIHZpZXdCb3g9IjAgMCA4IDIwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IHNrZXRjaHRvb2wgNjMuMSAoMTAxMDEwKSAtIGh0dHBzOi8vc2tldGNoLmNvbSAtLT4KICAgIDx0aXRsZT41N0NBNzNCRi02MUNDLTQ2RkYtOEE5Qi1DMzMzRTQxQUZDMzA8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIHNrZXRjaHRvb2wuPC9kZXNjPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggZD0iTTE1LjA2LDE2LjI5NSBMMTYsMTcuMjM1IEwxMiwyMS4yMzUgTDgsMTcuMjM1IEw4Ljk0LDE2LjI5NSBMMTIsMTkuMzQ4MzMzMyBMMTUuMDYsMTYuMjk1IFogTTEyLDIuMjk1IEwxNiw2LjI5NSBMMTUuMDYsNy4yMzUgTDEyLDQuMTgxNjY2NjcgTDguOTQsNy4yMzUgTDgsNi4yOTUgTDEyLDIuMjk1IFoiIGlkPSJwYXRoLTEiPjwvcGF0aD4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJVSS1TdHlsZS1HdWlkZS0tLUxEIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iVUktU3R5bGUtR3VpZGUtLS1MYXdEaXN0cmljdC0wMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTc2MS4wMDAwMDAsIC05NjYuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSJpY29uL2V4cGFuZF9kcm9wZG93bl8yNHB4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3NTMuMDAwMDAwLCA5NjQuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iQm91bmQiIHg9IjAiIHk9IjAiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PC9yZWN0PgogICAgICAgICAgICAgICAgPG1hc2sgaWQ9Im1hc2stMiIgZmlsbD0id2hpdGUiPgogICAgICAgICAgICAgICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+CiAgICAgICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgICAgICA8ZyBpZD0iQ29tYmluZWQtU2hhcGUiIGZpbGwtcnVsZT0ibm9uemVybyI+PC9nPgogICAgICAgICAgICAgICAgPGcgaWQ9IuKGsy1Db2xvciIgbWFzaz0idXJsKCNtYXNrLTIpIiBmaWxsPSIjMUUyMDIxIj4KICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiPjwvcmVjdD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+);
+    background-repeat: no-repeat;
+    background-position: center center;
+    height: 30px;
+    width: 30px;
+
+    svg {
+      display: none;
+    }
+
+    &:not(:last-child):first-child {
+      display: none;
+    }
+  }
+
+  .css-tlfecz-indicatorContainer {
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iOHB4IiBoZWlnaHQ9IjIwcHgiIHZpZXdCb3g9IjAgMCA4IDIwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IHNrZXRjaHRvb2wgNjMuMSAoMTAxMDEwKSAtIGh0dHBzOi8vc2tldGNoLmNvbSAtLT4KICAgIDx0aXRsZT41N0NBNzNCRi02MUNDLTQ2RkYtOEE5Qi1DMzMzRTQxQUZDMzA8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIHNrZXRjaHRvb2wuPC9kZXNjPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggZD0iTTE1LjA2LDE2LjI5NSBMMTYsMTcuMjM1IEwxMiwyMS4yMzUgTDgsMTcuMjM1IEw4Ljk0LDE2LjI5NSBMMTIsMTkuMzQ4MzMzMyBMMTUuMDYsMTYuMjk1IFogTTEyLDIuMjk1IEwxNiw2LjI5NSBMMTUuMDYsNy4yMzUgTDEyLDQuMTgxNjY2NjcgTDguOTQsNy4yMzUgTDgsNi4yOTUgTDEyLDIuMjk1IFoiIGlkPSJwYXRoLTEiPjwvcGF0aD4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJVSS1TdHlsZS1HdWlkZS0tLUxEIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iVUktU3R5bGUtR3VpZGUtLS1MYXdEaXN0cmljdC0wMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTc2MS4wMDAwMDAsIC05NjYuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSJpY29uL2V4cGFuZF9kcm9wZG93bl8yNHB4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3NTMuMDAwMDAwLCA5NjQuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iQm91bmQiIHg9IjAiIHk9IjAiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PC9yZWN0PgogICAgICAgICAgICAgICAgPG1hc2sgaWQ9Im1hc2stMiIgZmlsbD0id2hpdGUiPgogICAgICAgICAgICAgICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+CiAgICAgICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgICAgICA8ZyBpZD0iQ29tYmluZWQtU2hhcGUiIGZpbGwtcnVsZT0ibm9uemVybyI+PC9nPgogICAgICAgICAgICAgICAgPGcgaWQ9IuKGsy1Db2xvciIgbWFzaz0idXJsKCNtYXNrLTIpIiBmaWxsPSIjMUUyMDIxIj4KICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiPjwvcmVjdD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+);
+    background-repeat: no-repeat;
+    background-position: center center;
+    height: 30px;
+    width: 30px;
+
+    svg {
+      display: none;
+    }
+  }
+
+  .css-1u9des2-indicatorSeparator {
+    display: none;
+  }
+
+  .legal-selector {
+    display: flex;
+    flex-direction: column-reverse;
+    margin-bottom: 1rem;
+    position: relative;
+    border-radius: $global-border-radius;
+    transition: box-shadow 0.3s ease;
+    box-shadow: 0 0 0 1px get-color(neutral, neutral-3);
+    background-color: get-color(neutral, neutral-5);
+
+    .css-1hwfws3 {
+      height: 40px;
+    }
+
+    .css-yk16xz-control {
+      background-color: get-color(neutral, neutral-6);
+      border: none;
+    }
+
+    .css-1pahdxg-control {
+      outline: none;
+      border: none;
+      background-color: get-color(neutral, neutral-6);
+      box-shadow: 0 0 0 2px get-color(primary);
+    }
+
+    .css-1wa3eu0-placeholder {
+      font-size: 0.875rem;
+      color: get-color(neutral, neutral-2);
+    }
+
+    .css-26l3qy-menu {
+      border-radius: $global-border-radius;
+      box-shadow: $box-shadow-container;
+      font-size: 0.875rem;
+    }
+
+    .css-9gakcf-option {
+      background-color: get-color(neutral, neutral-6);
+      color: get-color(neutral, neutral-1);
+    }
+
+    .css-1uccc91-singleValue {
+      font-size: 0.875rem;
+      transition: all 0.3s ease;
+    }
+
+    .css-b8ldur-Input {
+      font-size: 0.875rem;
+    }
+
+    .css-1n7v3ny-option {
+      background-color: transparent;
+      &:hover {
+        background-color: get-color(neutral, neutral-4);
+      }
+    }
+
+    &:hover {
+      box-shadow: 0 0 0 1px get-color(neutral, neutral-2);
+    }
+
+    &:active,
+    &:focus {
+      outline: none;
+    }
+  }
+
+  &.--group-invalid {
+    .legal-selector {
+      box-shadow: 0 0 0 1px get-color(error);
+    }
+
+    .css-yk16xz-control {
+      background-color: get-color(error, error-3);
+    }
+  }
+
+  &.--is-invalid {
+    .e-searchselect--error {
+      display: flex;
+      align-content: center;
+      position: absolute;
+      bottom: 0;
+      margin-top: 0.5rem;
+      color: get-color(error);
+
+      img {
+        max-width: 20px;
+        margin-right: 0.25rem;
+      }
+    }
+
+    .legal-selector {
+      box-shadow: 0 0 0 1px get-color(error);
+    }
+
+    .css-yk16xz-control {
+      background-color: get-color(error, error-3);
+    }
+  }
+}
+
+.searchselect__label {
+  color: get-color(neutral, neutral-1);
+}
+
+.searchselect--fullwidth {
+  max-width: 100%;
+}
+
+.search-select--bare {
+  margin-bottom: 0;
+
+  .legal-selector,
+  .e-searchselect__inner {
+    margin-bottom: 0;
+  }
+
+  .legal-selector,
+  .css-1pahdxg-control,
+  .css-yk16xz-control {
+    min-height: 42px;
+  }
+
+  .legal-selector {
+    margin-bottom: 0;
+  }
+}
+
+.search-select--small {
+  width: 5.5rem;
+
+  @include laptop {
+    max-width: 100%;
+  }
+}
+
+.mobile-select-container {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 1.25rem;
+}
+
+.width {
+  width: 85%;
+
+  @include portrait-tablets {
+    width: 60%;
+  }
+}

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

@@ -8,9 +8,9 @@ import React, { type FC } from 'react'
 import Select from 'react-select'
 
 import { type SearchSelectProps } from './SearchSelectProps.types'
-import { SearchSelectStyled } from './SearchSelect.styled'
 import classNames from 'classnames'
 import error from '../../../../images/svg/info-error_24px_outlined.svg'
+// import './SearchSelect.scss'
 
 export enum MenuPlacement {
   top = 'top',
@@ -60,7 +60,7 @@ const SearchSelect: FC<SearchSelectProps> = (props) => {
     )
 
   return (
-    <SearchSelectStyled>
+    <>
       {props.label && (
         <div className={'e-searchselect__inner'}>
           <label className='searchselect__label'>{props.label}</label>
@@ -98,7 +98,7 @@ const SearchSelect: FC<SearchSelectProps> = (props) => {
           menuPlacement={menuPlacement}
         />
       </div>
-    </SearchSelectStyled>
+    </>
   )
 }
 

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

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { ChevronExpandLess } from '../../../../images/componentsSvg/ChevronExpandLess';
 import { ChevronExpandMore } from '../../../../images/componentsSvg/ChevronExpandMore';
-import { ShowMoreBoxStyled } from './ShowMoreBox.styled';
+// import './ShowMoreBox.scss'
 export const ShowMoreBox = ({ children, collapsedButtonText = 'Show More', expandedButtonText = 'Show Less' }) => {
     const [isExpanded, setIsExpanded] = React.useState(false);
-    return (_jsxs(ShowMoreBoxStyled, { className: 'show-more-box', children: [_jsx("div", { className: `content ${isExpanded ? '' : 'truncate'}`, children: children }), _jsxs("div", { className: 'button', children: [_jsx("div", { role: 'button', tabIndex: 0, onClick: () => {
+    return (_jsxs("div", { className: 'show-more-box', children: [_jsx("div", { className: `content ${isExpanded ? '' : 'truncate'}`, children: children }), _jsxs("div", { className: 'button', children: [_jsx("div", { role: 'button', tabIndex: 0, onClick: () => {
                             setIsExpanded(!isExpanded);
                         }, onKeyDown: () => {
                             setIsExpanded(!isExpanded);

package/dist/src/components/atoms/ShowMoreBox/ShowMoreBox.scss

@@ -0,0 +1,48 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.show-more-box {
+  display: flex;
+  padding: 1rem;
+  flex-direction: column;
+  gap: $global-gap;
+  border-radius: $global-border-radius;
+  background: get-color(neutral, neutral-5);
+
+  .content {
+    color: get-color(neutral, neutral-1);
+    font-size: 12px;
+    line-height: 16px;
+    letter-spacing: -0.3px;
+
+    &.truncate {
+      display: -webkit-box;
+      -webkit-line-clamp: 4;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+  }
+
+  .button {
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+    cursor: pointer;
+
+    div {
+      color: get-color(primary, main-light-1);
+      font-size: 14px;
+      line-height: 18px;
+      letter-spacing: -0.3px;
+    }
+
+    svg {
+      width: 20px;
+      height: 20px;
+
+      path {
+        fill: get-color(primary, main-light-1);
+      }
+    }
+  }
+}

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

@@ -3,7 +3,7 @@ import React from 'react'
 import { ChevronExpandLess } from '../../../../images/componentsSvg/ChevronExpandLess'
 import { ChevronExpandMore } from '../../../../images/componentsSvg/ChevronExpandMore'
 import { type ShowMoreBoxProps } from './ShowMoreBoxProps'
-import { ShowMoreBoxStyled } from './ShowMoreBox.styled'
+// import './ShowMoreBox.scss'
 
 export const ShowMoreBox: React.FC<ShowMoreBoxProps> = ({
   children,
@@ -12,7 +12,7 @@ export const ShowMoreBox: React.FC<ShowMoreBoxProps> = ({
 }) => {
   const [isExpanded, setIsExpanded] = React.useState(false)
   return (
-    <ShowMoreBoxStyled className='show-more-box'>
+    <div className='show-more-box'>
       <div className={`content ${isExpanded ? '' : 'truncate'}`}>{children}</div>
       <div className='button'>
         <div
@@ -29,6 +29,6 @@ export const ShowMoreBox: React.FC<ShowMoreBoxProps> = ({
         </div>
         {isExpanded ? <ChevronExpandLess /> : <ChevronExpandMore />}
       </div>
-    </ShowMoreBoxStyled>
+    </div>
   )
 }

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

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { MenuItems } from '../MenuItems';
-import { SidemenuTabStyled } from './SidemenuTab.styled';
 import { Tooltip } from '../Tooltip';
+// import './SidemenuTab.scss'
 const SidemenuTab = ({ active, mobile, menu, text, image, onClick, children }) => {
     const classes = classNames('sidemenu-tab', {
         'sidemenu-tab--active': active,
         'sidemenu-tab--mobile': mobile
     });
-    const renderTab = () => (_jsx(SidemenuTabStyled, { className: classes, onClick: onClick, children: _jsxs("div", { className: 'sidemenu-tab__inner', children: [image, _jsx("p", { className: 'sans-serif --medium', children: children ?? text })] }) }));
+    const renderTab = () => (_jsx("button", { className: classes, onClick: onClick, children: _jsxs("div", { className: 'sidemenu-tab__inner', children: [image, _jsx("p", { className: 'sans-serif --medium', children: children ?? text })] }) }));
     if (menu === undefined || menu?.lenght === 0) {
         return renderTab();
     }

package/dist/src/components/atoms/SidemenuTab/SidemenuTab.scss

@@ -0,0 +1,90 @@
+@import '../../../globalStyles/variables.scss';
+
+.sidemenu-tab {
+  padding: 1rem 0.5rem;
+  color: get-color(neutral, neutral-3);
+  background-color: transparent;
+  border: none;
+  outline: none;
+  width: 100%;
+  position: relative;
+  cursor: pointer;
+
+  svg {
+    margin-right: 1rem;
+
+    g g {
+      fill: get-color(neutral, neutral-3);
+    }
+  }
+
+  &--active {
+    border-left: 2px solid get-color(primary, main-light-3);
+    color: get-color(primary, main-light-3);
+    background-color: get-color(primary, main-dark-1);
+
+    p {
+      font-weight: bold;
+    }
+
+    svg g g {
+      fill: get-color(primary, main-light-3);
+    }
+  }
+
+  &__inner {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  &--mobile {
+    background-color: transparent;
+    border: none;
+    outline: none;
+    width: 100%;
+    padding: 0;
+    position: relative;
+
+    .sans-serif.--medium {
+      font-size: 0.75rem;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &.sidemenu-tab--active {
+      color: get-color(primary, main-light-1);
+      background-color: get-color(primary, main-light-5);
+
+      .sidemenu-tab__inner {
+        p {
+          font-weight: bold;
+        }
+
+        svg g g {
+          fill: get-color(primary, main-light-1);
+        }
+
+        svg g g use {
+          fill: get-color(primary, main-light-1);
+        }
+      }
+    }
+
+    .sidemenu-tab__inner {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    svg {
+      margin-right: 0;
+      width: 16px;
+      g g use {
+        fill: get-color(neutral, neutral-2);
+      }
+    }
+  }
+}

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

@@ -5,8 +5,8 @@ import classNames from 'classnames'
 
 import { MenuItems } from '../MenuItems'
 import { type SideMenuTabProps } from './SideMenuTabProps.types'
-import { SidemenuTabStyled } from './SidemenuTab.styled'
 import { Tooltip } from '../Tooltip'
+// import './SidemenuTab.scss'
 
 const SidemenuTab: React.FC<SideMenuTabProps> = ({ active, mobile, menu, text, image, onClick, children }) => {
   const classes = classNames('sidemenu-tab', {
@@ -15,12 +15,12 @@ const SidemenuTab: React.FC<SideMenuTabProps> = ({ active, mobile, menu, text, i
   })
 
   const renderTab = (): React.ReactElement => (
-    <SidemenuTabStyled className={classes} onClick={onClick}>
+    <button className={classes} onClick={onClick}>
       <div className='sidemenu-tab__inner'>
         {image}
         <p className='sans-serif --medium'>{children ?? text}</p>
       </div>
-    </SidemenuTabStyled>
+    </button>
   )
 
   if (menu === undefined || menu?.lenght === 0) {

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { SpinnerStyled } from './Spinner.styled';
+// import './Spinner.scss'
 const Spinner = ({ className = '', big = false }) => {
-    return !big ? (_jsx(SpinnerStyled, { className: `e-spinner ${className}`, width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', children: _jsx("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' }) })) : (_jsx(SpinnerStyled, { className: `e-spinner big ${className}`, viewBox: '0 0 24 24', fill: 'none', children: _jsx("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' }) }));
+    return !big ? (_jsx("svg", { className: `e-spinner ${className}`, width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', children: _jsx("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' }) })) : (_jsx("svg", { className: `e-spinner big ${className}`, viewBox: '0 0 24 24', fill: 'none', children: _jsx("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' }) }));
 };
 export default Spinner;

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

@@ -0,0 +1,31 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.e-spinner {
+  animation: rotate 2s linear infinite;
+  width: 24px;
+  height: 24px;
+
+  path {
+    fill: get-color(others, white);
+    stroke-linecap: round;
+    stroke-dasharray: 15, 150;
+  }
+}
+
+.e-spinner.big {
+  width: 70px;
+  height: 70px;
+}
+
+.spinner--neutral {
+  path {
+    fill: get-color(neutral, neutral-2);
+  }
+}
+
+.spinner--primary {
+  path {
+    fill: get-color(primary);
+  }
+}

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 { SpinnerStyled } from './Spinner.styled'
+// import './Spinner.scss'
 
 const Spinner: FC<SpinnerProps> = ({ className = '', big = false }) => {
   return !big ? (
-    <SpinnerStyled className={`e-spinner ${className}`} width='24' height='24' viewBox='0 0 24 24' fill='none'>
+    <svg 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'
       />
-    </SpinnerStyled>
+    </svg>
   ) : (
-    <SpinnerStyled className={`e-spinner big ${className}`} viewBox='0 0 24 24' fill='none'>
+    <svg 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'
       />
-    </SpinnerStyled>
+    </svg>
   )
 }
 

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { StepRatafiaCardStyled } from './StepRatafiaCard.styled';
+// import './StepRatafiaCard.scss'
 export const StepRatafiaCard = ({ title, icon, 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 })] }));
+    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 })] }));
 };
 export default StepRatafiaCard;

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

@@ -0,0 +1,27 @@
+@import '../../../globalStyles/variables.scss';
+
+.step-ratafia-card {
+  display: flex;
+  padding: 1.5rem;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+  align-self: stretch;
+
+  border-radius: 4px;
+  background: get-color(neutral, neutral-6);
+
+  &__title {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    align-self: stretch;
+
+    color: get-color(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 { StepRatafiaCardStyled } from './StepRatafiaCard.styled'
+// import './StepRatafiaCard.scss'
 
 export const StepRatafiaCard: React.FC<StepRatafiaCardProps> = ({ title, icon, description }) => {
   return (
-    <StepRatafiaCardStyled className='step-ratafia-card'>
+    <div 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>
-    </StepRatafiaCardStyled>
+    </div>
   )
 }
 

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

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

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

@@ -2,8 +2,8 @@
 
 .tag {
   align-items: center;
-  background: var(--secondary-main-light-4);
-  border-radius: var(--global-border-radius);
+  background: get-color(secondary, main-light-4);
+  border-radius: $global-border-radius;
   display: flex;
   gap: 4px;
   justify-content: center;
@@ -19,7 +19,7 @@
   }
 
   .text {
-    color: var(--neutral-neutral-1);
+    color: get-color(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 { TagStyled } from './Tag.styled'
+// import './Tag.scss'
 
 export const Tag: React.FC<TagProps> = ({ text, icon }) => {
   return (
-    <TagStyled className='tag'>
-      <div className='tag__icon'>{icon}</div>
-      <div className='tag__text'>{text}</div>
-    </TagStyled>
+    <div className='tag'>
+      <div className='icon'>{icon}</div>
+      <div className='text'>{text}</div>
+    </div>
   )
 }

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { TagRatafiaItemStyled } from './TagRatafiaItem.styled';
+// import './TagRatafiaItem.scss'
 export const TagRatafiaItem = ({ icon, 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 })] }));
+    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 })] }));
 };
 export default TagRatafiaItem;