@npm_leadtech/legal-lib-components 4.1.6 → 4.1.10

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

@@ -0,0 +1,100 @@
+/* eslint-disable @typescript-eslint/strict-boolean-expressions */
+import React, { type FC } from 'react'
+import Select from 'react-select'
+
+import { type SearchSelectProps } from './SearchSelectProps.types'
+import classNames from 'classnames'
+import error from '../../../../images/svg/info-error_24px_outlined.svg'
+// import './SearchSelect.scss'
+
+export enum MenuPlacement {
+  top = 'top',
+  bottom = 'bottom',
+  auto = 'auto'
+}
+
+const getSortedItems = (items: any, isSortAlphabetically: boolean | undefined = false): any => {
+  if (isSortAlphabetically) {
+    return items.sort((item1: any, item2: any) => {
+      const textItem1 = item1.label.toUpperCase()
+      const textItem2 = item2.label.toUpperCase()
+      if (textItem1 < textItem2) return -1
+      return textItem1 > textItem2 ? 1 : 0
+    })
+  }
+  return items
+}
+
+const SearchSelect: FC<SearchSelectProps> = (props) => {
+  const { customClass = '', menuPlacement = MenuPlacement.bottom } = props
+  const sortedItems = getSortedItems(props.items, props.isSortAlphabetically)
+  const defaultValue = props.defaultValue as unknown as string
+
+  const classnames = classNames({
+    'e-searchselect': true,
+    '--is-invalid': !props.validate,
+    [`${customClass}`]: props.customClass,
+    '--group-invalid': !props.isValidGroup
+  })
+
+  const handleChange = (selectedOption): void => {
+    const selectObject = {
+      target: {
+        name: props.name,
+        value: selectedOption
+      }
+    }
+    props.onChange(selectObject)
+  }
+
+  const TooltipObject =
+    props.tooltip && typeof props.tooltip === 'string' ? (
+      <p className='tooltip-form sans-serif --small'>{props.tooltip}</p>
+    ) : (
+      ''
+    )
+
+  return (
+    <>
+      {props.label && (
+        <div className={'e-searchselect__inner'}>
+          <label className='searchselect__label'>{props.label}</label>
+        </div>
+      )}
+      <div className={`${classnames} ${props.width ? 'width' : ''}`} data-qa={`${props.dataQA ?? props.name}`}>
+        {TooltipObject}
+        <span className='e-searchselect--error sans-serif --small'>
+          <img src={error} alt={props.errorMessage} width='24' height='24' />
+          {props.errorMessage}
+        </span>
+        <Select
+          styles={{
+            control: (baseStyles, state) => {
+              return {
+                ...baseStyles,
+                borderColor: state.isFocused ? 'var(--primary-main) !important' : '',
+                boxShadow: state.isFocused ? '0 0 0 1px var(--primary-main) !important' : '',
+                borderStyle: state.isFocused ? 'solid' : 'initial'
+              }
+            }
+          }}
+          id={props.name}
+          name={props.name}
+          className='legal-selector'
+          defaultValue={defaultValue}
+          onChange={handleChange}
+          isDisabled={props.disabled}
+          isSearchable={props.isSearchable !== false}
+          options={sortedItems}
+          escapeClearsValue={true}
+          isClearable={true}
+          placeholder={props.placeholder}
+          defaultMenuIsOpen={props.defaultMenuIsOpen}
+          menuPlacement={menuPlacement}
+        />
+      </div>
+    </>
+  )
+}
+
+export default SearchSelect

package/dist/src/components/atoms/SearchSelect/SearchSelectProps.types.ts

@@ -0,0 +1,28 @@
+import { type MenuPlacement } from './SearchSelect'
+
+type DefaultValue = Record<string, string | null | undefined>
+
+export interface SearchSelectProps {
+  id?: string
+  name: string
+  customClass?: string
+  value?: string
+  validate?: boolean
+  tooltip?: string
+  isValidGroup?: boolean
+  label: string
+  items: any[]
+  onChange: (event: any) => void
+  disabled?: boolean
+  errorMessage?: string
+  notes?: string
+  isSortAlphabetically?: boolean
+  isSearchable?: boolean
+  placeholder?: string
+  defaultMenuIsOpen?: boolean
+  tooltipBesideLabel?: React.ReactNode
+  width?: boolean
+  defaultValue: DefaultValue
+  menuPlacement: MenuPlacement
+  dataQA: string
+}

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

@@ -0,0 +1,2 @@
+export { default as SearchSelect, MenuPlacement } from './SearchSelect'
+export { type SearchSelectProps } from './SearchSelectProps.types'

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

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import { ChevronExpandLess } from '../../../../images/componentsSvg/ChevronExpandLess'
+import { ChevronExpandMore } from '../../../../images/componentsSvg/ChevronExpandMore'
+import { type ShowMoreBoxProps } from './ShowMoreBoxProps'
+// import './ShowMoreBox.scss'
+
+export const ShowMoreBox: React.FC<ShowMoreBoxProps> = ({
+  children,
+  collapsedButtonText = 'Show More',
+  expandedButtonText = 'Show Less'
+}) => {
+  const [isExpanded, setIsExpanded] = React.useState(false)
+  return (
+    <div className='show-more-box'>
+      <div className={`content ${isExpanded ? '' : 'truncate'}`}>{children}</div>
+      <div className='button'>
+        <div
+          role='button'
+          tabIndex={0}
+          onClick={() => {
+            setIsExpanded(!isExpanded)
+          }}
+          onKeyDown={() => {
+            setIsExpanded(!isExpanded)
+          }}
+        >
+          {isExpanded ? expandedButtonText : collapsedButtonText}
+        </div>
+        {isExpanded ? <ChevronExpandLess /> : <ChevronExpandMore />}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,5 @@
+export interface ShowMoreBoxProps {
+  children: React.ReactNode
+  collapsedButtonText?: string
+  expandedButtonText?: string
+}

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

@@ -0,0 +1,2 @@
+export { ShowMoreBox } from './ShowMoreBox'
+export type { ShowMoreBoxProps } from './ShowMoreBoxProps'

package/dist/src/components/atoms/SidemenuTab/SideMenuTabProps.types.ts

@@ -0,0 +1,11 @@
+import { type MouseEventHandler } from 'react'
+
+export interface SideMenuTabProps {
+  text?: string
+  active?: boolean
+  mobile?: boolean
+  menu?: any
+  onClick?: MouseEventHandler<HTMLButtonElement>
+  image?: React.ReactNode
+  children?: React.ReactNode
+}

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

@@ -1,5 +1,4 @@
 import React from 'react';
 import { type SideMenuTabProps } from './SideMenuTabProps.types';
-import './SidemenuTab.scss';
 declare const SidemenuTab: React.FC<SideMenuTabProps>;
 export default SidemenuTab;

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { MenuItems } from '../MenuItems';
 import { Tooltip } from '../Tooltip';
-import './SidemenuTab.scss';
+// import './SidemenuTab.scss'
 const SidemenuTab = ({ active, mobile, menu, text, image, onClick, children }) => {
     const classes = classNames('sidemenu-tab', {
         'sidemenu-tab--active': active,

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

@@ -0,0 +1,35 @@
+import React from 'react'
+import classNames from 'classnames'
+
+import { MenuItems } from '../MenuItems'
+import { type SideMenuTabProps } from './SideMenuTabProps.types'
+import { Tooltip } from '../Tooltip'
+// import './SidemenuTab.scss'
+
+const SidemenuTab: React.FC<SideMenuTabProps> = ({ active, mobile, menu, text, image, onClick, children }) => {
+  const classes = classNames('sidemenu-tab', {
+    'sidemenu-tab--active': active,
+    'sidemenu-tab--mobile': mobile
+  })
+
+  const renderTab = (): React.ReactElement => (
+    <button className={classes} onClick={onClick}>
+      <div className='sidemenu-tab__inner'>
+        {image}
+        <p className='sans-serif --medium'>{children ?? text}</p>
+      </div>
+    </button>
+  )
+
+  if (menu === undefined || menu?.lenght === 0) {
+    return renderTab()
+  }
+
+  return (
+    <Tooltip content={<MenuItems list={menu} />} interactive trigger='click'>
+      {renderTab()}
+    </Tooltip>
+  )
+}
+
+export default SidemenuTab

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

@@ -0,0 +1,2 @@
+export { default as SidemenuTab } from './SidemenuTab'
+export { type SideMenuTabProps } from './SideMenuTabProps.types'

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

@@ -0,0 +1,32 @@
+@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;
+    animation: dash 1.5s ease-in-out infinite;
+  }
+}
+
+.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

@@ -0,0 +1,24 @@
+import React, { type FC } from 'react'
+
+import { type SpinnerProps } from './SpinnerProps.types'
+// import './Spinner.scss'
+
+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'>
+      <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>
+  ) : (
+    <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'
+      />
+    </svg>
+  )
+}
+
+export default Spinner

package/dist/src/components/atoms/Spinner/SpinnerProps.types.ts

@@ -0,0 +1,4 @@
+export interface SpinnerProps {
+  className?: string
+  big?: boolean
+}

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

@@ -0,0 +1,2 @@
+export { default as Spinner } from './Spinner'
+export { type SpinnerProps } from './SpinnerProps.types'