@npm_leadtech/legal-lib-components 5.2.7 → 5.2.9

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

@@ -0,0 +1,224 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const SearchSelectStyled = styled.div`
+  .e-searchselect {
+    display: flex;
+    flex-direction: column-reverse;
+    margin-bottom: 2rem;
+    position: relative;
+    width: 100%;
+
+    @media ${device.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: var(--global-border-radius);
+      transition: box-shadow 0.3s ease;
+      box-shadow: 0 0 0 1px var(--neutral-neutral-3);
+      background-color: var(--neutral-neutral-5);
+
+      .css-1hwfws3 {
+        height: 40px;
+      }
+
+      .css-yk16xz-control {
+        background-color: var(--neutral-neutral-6);
+        border: none;
+      }
+
+      .css-1pahdxg-control {
+        outline: none;
+        border: none;
+        background-color: var(--neutral-neutral-6);
+        box-shadow: 0 0 0 2px var(--primary-main);
+      }
+
+      .css-1wa3eu0-placeholder {
+        font-size: 0.875rem;
+        color: var(--neutral-neutral-2);
+      }
+
+      .css-26l3qy-menu {
+        border-radius: var(--global-border-radius);
+        box-shadow: var(--box-shadow-container);
+        font-size: 0.875rem;
+      }
+
+      .css-9gakcf-option {
+        background-color: var(--neutral-neutral-6);
+        color: var(--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: var(--neutral-neutral-4);
+        }
+      }
+
+      &:hover {
+        box-shadow: 0 0 0 1px var(--neutral-neutral-2);
+      }
+
+      &:active,
+      &:focus {
+        outline: none;
+      }
+    }
+
+    &.--group-invalid {
+      .legal-selector {
+        box-shadow: 0 0 0 1px var(--error-main);
+      }
+
+      .css-yk16xz-control {
+        background-color: var(--error-error-3);
+      }
+    }
+
+    &.--is-invalid {
+      .e-searchselect--error {
+        display: flex;
+        align-content: center;
+        position: absolute;
+        bottom: 0;
+        margin-top: 0.5rem;
+        color: var(--error-main);
+
+        img {
+          max-width: 20px;
+          margin-right: 0.25rem;
+        }
+      }
+
+      .legal-selector {
+        box-shadow: 0 0 0 1px var(--error-main);
+      }
+
+      .css-yk16xz-control {
+        background-color: var(--error-error-3);
+      }
+    }
+  }
+
+  .searchselect__label {
+    color: var(--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;
+
+    @media ${device.laptop} {
+      max-width: 100%;
+    }
+  }
+
+  .mobile-select-container {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 1.25rem;
+  }
+
+  .width {
+    width: 85%;
+
+    @media ${device['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 './ShowMoreBox.scss'
+import { ShowMoreBoxStyled } from './ShowMoreBox.styled';
 export const ShowMoreBox = ({ children, collapsedButtonText = 'Show More', expandedButtonText = 'Show Less' }) => {
     const [isExpanded, setIsExpanded] = React.useState(false);
-    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: () => {
+    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: () => {
                             setIsExpanded(!isExpanded);
                         }, onKeyDown: () => {
                             setIsExpanded(!isExpanded);

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

@@ -0,0 +1 @@
+export declare const ShowMoreBoxStyled: 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/ShowMoreBox/ShowMoreBox.styled.js

@@ -0,0 +1,48 @@
+import styled from 'styled-components';
+export const ShowMoreBoxStyled = styled.div `
+  display: flex;
+  padding: 1rem;
+  flex-direction: column;
+  gap: var(--global-gap);
+  border-radius: var(--global-border-radius);
+  background: var(--neutral-neutral-5);
+
+  &.show-more-box {
+    .content {
+      color: var(--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: var(--primary-main-light-1);
+        font-size: 14px;
+        line-height: 18px;
+        letter-spacing: -0.3px;
+      }
+
+      svg {
+        width: 20px;
+        height: 20px;
+
+        path {
+          fill: var(--primary-main-light-1);
+        }
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,49 @@
+import styled from 'styled-components'
+
+export const ShowMoreBoxStyled = styled.div`
+  display: flex;
+  padding: 1rem;
+  flex-direction: column;
+  gap: var(--global-gap);
+  border-radius: var(--global-border-radius);
+  background: var(--neutral-neutral-5);
+
+  &.show-more-box {
+    .content {
+      color: var(--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: var(--primary-main-light-1);
+        font-size: 14px;
+        line-height: 18px;
+        letter-spacing: -0.3px;
+      }
+
+      svg {
+        width: 20px;
+        height: 20px;
+
+        path {
+          fill: var(--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 './ShowMoreBox.scss'
+import { ShowMoreBoxStyled } from './ShowMoreBox.styled'
 
 export const ShowMoreBox: React.FC<ShowMoreBoxProps> = ({
   children,
@@ -12,7 +12,7 @@ export const ShowMoreBox: React.FC<ShowMoreBoxProps> = ({
 }) => {
   const [isExpanded, setIsExpanded] = React.useState(false)
   return (
-    <div className='show-more-box'>
+    <ShowMoreBoxStyled 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>
-    </div>
+    </ShowMoreBoxStyled>
   )
 }

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("button", { 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(SidemenuTabStyled, { 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.styled.d.ts

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

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

@@ -0,0 +1,92 @@
+import styled from 'styled-components';
+export const SidemenuTabStyled = styled.button `
+  padding: 1rem 0.5rem;
+  color: var(--neutral-neutral-3);
+  background-color: transparent;
+  border: none;
+  outline: none;
+  width: 100%;
+  position: relative;
+  cursor: pointer;
+
+  &.sidemenu-tab {
+    svg {
+      margin-right: 1rem;
+
+      g g {
+        fill: var(--neutral-neutral-3);
+      }
+    }
+
+    &--active {
+      border-left: 2px solid var(--primary-main-light-3);
+      color: var(--primary-main-light-3);
+      background-color: var(--primary-main-dark-1);
+
+      p {
+        font-weight: bold;
+      }
+
+      svg g g {
+        fill: var(--primary-main-light-3);
+      }
+    }
+    &--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: var(--primary-main-light-1);
+        background-color: var(--primary-main-light-5);
+
+        .sidemenu-tab__inner {
+          p {
+            font-weight: bold;
+          }
+
+          svg g g {
+            fill: var(--primary-main-light-1);
+          }
+
+          svg g g use {
+            fill: var(--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: var(--neutral-neutral-2);
+        }
+      }
+    }
+  }
+
+  .sidemenu-tab {
+    &__inner {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+  }
+`;

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

@@ -0,0 +1,93 @@
+import styled from 'styled-components'
+
+export const SidemenuTabStyled = styled.button`
+  padding: 1rem 0.5rem;
+  color: var(--neutral-neutral-3);
+  background-color: transparent;
+  border: none;
+  outline: none;
+  width: 100%;
+  position: relative;
+  cursor: pointer;
+
+  &.sidemenu-tab {
+    svg {
+      margin-right: 1rem;
+
+      g g {
+        fill: var(--neutral-neutral-3);
+      }
+    }
+
+    &--active {
+      border-left: 2px solid var(--primary-main-light-3);
+      color: var(--primary-main-light-3);
+      background-color: var(--primary-main-dark-1);
+
+      p {
+        font-weight: bold;
+      }
+
+      svg g g {
+        fill: var(--primary-main-light-3);
+      }
+    }
+    &--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: var(--primary-main-light-1);
+        background-color: var(--primary-main-light-5);
+
+        .sidemenu-tab__inner {
+          p {
+            font-weight: bold;
+          }
+
+          svg g g {
+            fill: var(--primary-main-light-1);
+          }
+
+          svg g g use {
+            fill: var(--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: var(--neutral-neutral-2);
+        }
+      }
+    }
+  }
+
+  .sidemenu-tab {
+    &__inner {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+  }
+`

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 => (
-    <button className={classes} onClick={onClick}>
+    <SidemenuTabStyled className={classes} onClick={onClick}>
       <div className='sidemenu-tab__inner'>
         {image}
         <p className='sans-serif --medium'>{children ?? text}</p>
       </div>
-    </button>
+    </SidemenuTabStyled>
   )
 
   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 './Spinner.scss'
+import { SpinnerStyled } from './Spinner.styled';
 const Spinner = ({ className = '', big = false }) => {
-    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' }) }));
+    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' }) }));
 };
 export default Spinner;

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

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

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

@@ -0,0 +1,28 @@
+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);
+      }
+    }
+  }
+`;