@npm_leadtech/legal-lib-components 5.2.7 → 5.2.9

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

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+export const BreadcrumItemStyled = styled.li `
+  display: flex;
+  align-items: center;
+
+  &.inline-list {
+    .chevron-right24px {
+      > g > g {
+        fill: var(--primary-main-light-1);
+      }
+    }
+
+    a,
+    span {
+      color: var(--primary-main-light-1);
+      font-weight: 700;
+      font-size: 12px;
+      line-height: 16px;
+      letter-spacing: -0.3px;
+    }
+  }
+`;

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

@@ -0,0 +1,23 @@
+import styled from 'styled-components'
+
+export const BreadcrumItemStyled = styled.li`
+  display: flex;
+  align-items: center;
+
+  &.inline-list {
+    .chevron-right24px {
+      > g > g {
+        fill: var(--primary-main-light-1);
+      }
+    }
+
+    a,
+    span {
+      color: var(--primary-main-light-1);
+      font-weight: 700;
+      font-size: 12px;
+      line-height: 16px;
+      letter-spacing: -0.3px;
+    }
+  }
+`

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

@@ -2,16 +2,16 @@ import React, { type FC } from 'react'
 import { Link } from 'gatsby-link'
 
 import { ChevronRight24px } from '../../../../images/componentsSvg/ChevronRight24px'
-// import './BreadcrumItem.scss'
 
 import { type BreadcrumItemProps } from './BreadcrumItemProps.types'
+import { BreadcrumItemStyled } from './BreadcrumItem.styled'
 
 const BreadcrumItem: FC<BreadcrumItemProps> = ({ text, position, url }) => {
   return (
-    <li className='inline-list'>
+    <BreadcrumItemStyled className='inline-list'>
       {position > 0 && <ChevronRight24px />}
       {url !== undefined ? <Link to={url}>{text}</Link> : <span>{text}</span>}
-    </li>
+    </BreadcrumItemStyled>
   )
 }
 

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

@@ -5,7 +5,7 @@ html[data-theme='lawdistrict'] {
   .e-button {
     &.--primary {
       &-3 {
-        color: get-color(neutral);
+        color: var(--neutral-main);
       }
     }
   }
@@ -15,7 +15,7 @@ html[data-theme='lawdistrict'] {
   padding: 0.5rem 1rem;
   align-items: center;
   align-self: center;
-  border-radius: $global-border-radius;
+  border-radius: var(--global-border-radius);
   text-align: center;
   text-decoration: none;
   cursor: pointer;
@@ -50,14 +50,14 @@ html[data-theme='lawdistrict'] {
     position: absolute;
 
     label {
-      color: get-color(neutral);
+      color: var(--neutral-main);
     }
   }
 
   &.--styleless {
     background-color: get-color(others, white);
     font-size: 0.9rem;
-    color: get-color(neutral, neutral-2);
+    color: var(--neutral-neutral-2);
     text-align: left;
     border: none;
 
@@ -94,14 +94,14 @@ html[data-theme='lawdistrict'] {
     }
 
     &-3 {
-      background-color: get-color(secondary);
-      border: 2px solid get-color(secondary);
+      background-color: var(--secondary-main);
+      border: 2px solid var(--secondary-main);
       color: get-color(others, white);
       font-weight: bold;
 
       &:hover {
-        background-color: get-color(secondary, main-dark-1);
-        border-color: get-color(secondary, main-dark-1);
+        background-color: var(--secondary-main-dark-1);
+        border-color: var(--secondary-main-dark-1);
       }
     }
 
@@ -134,21 +134,21 @@ html[data-theme='lawdistrict'] {
 
     &-2 {
       background-color: transparent;
-      border: 2px solid get-color(secondary);
-      color: get-color(neutral);
+      border: 2px solid var(--secondary-main);
+      color: var(--neutral-main);
       font-weight: bold;
 
       &:hover {
-        background-color: get-color(secondary, main-light-4);
+        background-color: var(--secondary-main-light-4);
       }
     }
 
     &-icon {
       display: flex;
       justify-content: center;
-      border-radius: $global-border-radius;
-      border: 2px solid get-color(neutral, neutral-2);
-      background-color: get-color(neutral, neutral-5);
+      border-radius: var(--global-border-radius);
+      border: 2px solid var(--neutral-neutral-2);
+      background-color: var(--neutral-neutral-5);
 
       svg {
         width: 20px;
@@ -160,7 +160,7 @@ html[data-theme='lawdistrict'] {
       }
 
       &:hover {
-        background-color: get-color(neutral, neutral-4);
+        background-color: var(--neutral-neutral-4);
       }
 
       &.--bold {
@@ -187,7 +187,7 @@ html[data-theme='lawdistrict'] {
         }
 
         &:hover {
-          background-color: get-color(neutral, neutral-1);
+          background-color: var(--neutral-neutral-1);
         }
       }
     }
@@ -198,14 +198,14 @@ html[data-theme='lawdistrict'] {
   }
 
   &.--disabled {
-    background-color: get-color(neutral, neutral-4);
-    color: get-color(neutral, neutral-1);
+    background-color: var(--neutral-neutral-4);
+    color: var(--neutral-neutral-1);
     pointer-events: none;
   }
 
   &.--error {
-    border-color: get-color(error, main);
-    color: get-color(error, main);
+    border-color: var(--error-main);
+    color: var(--error-main);
   }
 
   &--fluid {
@@ -214,14 +214,14 @@ html[data-theme='lawdistrict'] {
 }
 
 .button--secondary-3 {
-  color: get-color(neutral, neutral-1);
+  color: var(--neutral-neutral-1);
   display: flex;
   font-size: 14px;
   font-weight: bold;
   justify-content: center;
-  border-radius: $global-border-radius;
-  border: 2px solid get-color(neutral, neutral-2);
-  background-color: get-color(neutral, neutral-6);
+  border-radius: var(--global-border-radius);
+  border: 2px solid var(--neutral-neutral-2);
+  background-color: var(--neutral-neutral-6);
 
   .button__icon {
     width: 20px;
@@ -229,7 +229,7 @@ html[data-theme='lawdistrict'] {
   }
 
   .button__icon__g {
-    fill: get-color(neutral, neutral-1);
+    fill: var(--neutral-neutral-1);
   }
 
   img {
@@ -237,12 +237,12 @@ html[data-theme='lawdistrict'] {
   }
 
   &:hover {
-    background-color: get-color(neutral, neutral-4);
+    background-color: var(--neutral-neutral-4);
   }
 }
 
 .button--secondary-4 {
-  background-color: get-color(neutral);
+  background-color: var(--neutral-main);
   border: 1px solid get-color(others, white) !important;
   color: get-color(others, white);
 
@@ -251,7 +251,7 @@ html[data-theme='lawdistrict'] {
   }
 
   &:hover {
-    background-color: get-color(neutral, neutral-1);
+    background-color: var(--neutral-neutral-1);
   }
 }
 

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

@@ -3,8 +3,8 @@
 
 .button-icon {
   background: none;
-  border-radius: $global-border-radius;
-  border: 1px solid get-color(neutral, neutral-4);
+  border-radius: var(--global-border-radius);
+  border: 1px solid var(--neutral-neutral-4);
   display: inline-flex;
   padding: 0.1875rem;
   transition: all 0.3s ease;
@@ -12,13 +12,13 @@
   cursor: pointer;
 
   &--disabled {
-    background-color: get-color(neutral, neutral-4);
-    color: get-color(neutral, neutral-1);
+    background-color: var(--neutral-neutral-4);
+    color: var(--neutral-neutral-1);
     pointer-events: none;
   }
 
   &:hover {
-    background-color: get-color(primary, main-light-5);
+    background-color: var(--primary-main-light-5);
 
     .button-icon__tooltip {
       transform: translate(-50%, 0);
@@ -30,7 +30,7 @@
   &__tooltip {
     font-size: 12px;
     position: absolute;
-    color: get-color(neutral, neutral-2);
+    color: var(--neutral-neutral-2);
     bottom: -1.25rem;
     left: 50%;
     margin: 0 auto;

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import CardPaneInfo from './CardPaneInfo';
-// import './CardPane.scss'
+import { CardPaneStyled } from './CardPane.styled';
 const CardPane = ({ data }) => {
     if (data?.length === 0)
         return null;
-    return (_jsx("div", { className: 'pane', children: data.map((item) => (_jsx(CardPaneInfo, { ...item }, item.id))) }));
+    return (_jsx(CardPaneStyled, { className: 'pane', children: data.map((item) => (_jsx(CardPaneInfo, { ...item }, item.id))) }));
 };
 export default CardPane;

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

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

@@ -0,0 +1,109 @@
+import { device, size } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const CardPaneStyled = styled.div `
+  align-items: flex-start;
+  border-top: 1px solid var(--neutral-neutral-4);
+  display: flex;
+  font-family: var(--font-sans);
+  padding: 1.5rem 0;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  .pane {
+    &-wrapper {
+      margin-top: 1rem;
+      padding-right: 0;
+      width: 100%;
+
+      @media ${device['portrait-tablets']} {
+        margin-top: 0;
+        padding-right: 0.875rem;
+        width: 50%;
+      }
+
+      @media ${device['landscape-tablets']} {
+        padding-right: 0.55rem;
+      }
+      @media ${device.laptop} {
+        padding-right: 0.875rem;
+      }
+      &:first-child {
+        margin-top: 0;
+      }
+      &:nth-child(2) {
+        text-align: right;
+        @media (min-width: ${size.xxs}) and (max-width: ${size.sm}) {
+          text-align: left;
+        }
+      }
+      &:nth-child(3) {
+        margin-top: 30px;
+      }
+      &:last-child {
+        padding-right: 0;
+      }
+      span {
+        display: block;
+        &.marker {
+          display: inline-block;
+          text-indent: -0.625rem;
+        }
+      }
+    }
+    &--title {
+      color: var(--neutral-neutral-2);
+      font-size: 0.875rem;
+      line-height: 1.29;
+      @media ${device['portrait-tablets']} {
+        font-size: 0.65rem;
+      }
+      @media ${device['landscape-tablets']} {
+        font-size: 0.75rem;
+      }
+      @media ${device.laptop} {
+        font-size: 0.875rem;
+      }
+    }
+    &--description {
+      color: var(--neutral-main);
+      font-size: 1rem;
+      font-weight: 700;
+      letter-spacing: -0.3px;
+      line-height: 1.38;
+      margin-top: 2px;
+
+      &--active {
+        color: var(--primary-main);
+      }
+
+      &--inactive {
+        color: var(--error-main);
+      }
+    }
+
+    @media ${device['portrait-tablets']} {
+      flex-direction: row;
+    }
+  }
+  .marker {
+    display: inline-block;
+    margin-left: -10px;
+    @-moz-document url-prefix() {
+      margin-left: 0px;
+    }
+    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+      margin-left: 0px;
+    }
+  }
+  .position {
+    margin-left: 2px;
+    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+      margin-left: 15px;
+    }
+  }
+  @-moz-document url-prefix() {
+    .position {
+      margin-left: 15px;
+    }
+  }
+`;

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

@@ -0,0 +1,110 @@
+import { device, size } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const CardPaneStyled = styled.div`
+  align-items: flex-start;
+  border-top: 1px solid var(--neutral-neutral-4);
+  display: flex;
+  font-family: var(--font-sans);
+  padding: 1.5rem 0;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  .pane {
+    &-wrapper {
+      margin-top: 1rem;
+      padding-right: 0;
+      width: 100%;
+
+      @media ${device['portrait-tablets']} {
+        margin-top: 0;
+        padding-right: 0.875rem;
+        width: 50%;
+      }
+
+      @media ${device['landscape-tablets']} {
+        padding-right: 0.55rem;
+      }
+      @media ${device.laptop} {
+        padding-right: 0.875rem;
+      }
+      &:first-child {
+        margin-top: 0;
+      }
+      &:nth-child(2) {
+        text-align: right;
+        @media (min-width: ${size.xxs}) and (max-width: ${size.sm}) {
+          text-align: left;
+        }
+      }
+      &:nth-child(3) {
+        margin-top: 30px;
+      }
+      &:last-child {
+        padding-right: 0;
+      }
+      span {
+        display: block;
+        &.marker {
+          display: inline-block;
+          text-indent: -0.625rem;
+        }
+      }
+    }
+    &--title {
+      color: var(--neutral-neutral-2);
+      font-size: 0.875rem;
+      line-height: 1.29;
+      @media ${device['portrait-tablets']} {
+        font-size: 0.65rem;
+      }
+      @media ${device['landscape-tablets']} {
+        font-size: 0.75rem;
+      }
+      @media ${device.laptop} {
+        font-size: 0.875rem;
+      }
+    }
+    &--description {
+      color: var(--neutral-main);
+      font-size: 1rem;
+      font-weight: 700;
+      letter-spacing: -0.3px;
+      line-height: 1.38;
+      margin-top: 2px;
+
+      &--active {
+        color: var(--primary-main);
+      }
+
+      &--inactive {
+        color: var(--error-main);
+      }
+    }
+
+    @media ${device['portrait-tablets']} {
+      flex-direction: row;
+    }
+  }
+  .marker {
+    display: inline-block;
+    margin-left: -10px;
+    @-moz-document url-prefix() {
+      margin-left: 0px;
+    }
+    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+      margin-left: 0px;
+    }
+  }
+  .position {
+    margin-left: 2px;
+    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+      margin-left: 15px;
+    }
+  }
+  @-moz-document url-prefix() {
+    .position {
+      margin-left: 15px;
+    }
+  }
+`

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

@@ -3,17 +3,17 @@ import React, { type FC } from 'react'
 
 import CardPaneInfo from './CardPaneInfo'
 import { type CardPaneProps } from './CardPaneProps.types'
-// import './CardPane.scss'
+import { CardPaneStyled } from './CardPane.styled'
 
 const CardPane: FC<CardPaneProps> = ({ data }) => {
   if (data?.length === 0) return null
 
   return (
-    <div className='pane'>
+    <CardPaneStyled className='pane'>
       {data.map((item) => (
         <CardPaneInfo key={item.id} {...item} />
       ))}
-    </div>
+    </CardPaneStyled>
   )
 }
 

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// import './Checkbox.scss'
+import { CheckboxStyled } from './Checkbox.styled';
 const Checkbox = ({ name, className = '', value, validate = false, tooltip = undefined, isValidGroup = false, label = '', onChange, disabled, dataQa }) => {
     const classStyle = `${validate ? 'e-checkbox' : 'e-checkbox --is-invalid'} ${className} ${!isValidGroup ? '--group-invalid' : ''} `;
-    return (_jsxs("div", { className: classStyle, children: [tooltip !== undefined && _jsx("p", { className: 'tooltip-form sans-serif --small', children: tooltip }), _jsx("input", { type: 'checkbox', name: name, id: name, onChange: onChange, value: value === '1' ? value : '0', checked: value === '1', disabled: disabled, "data-qa": dataQa }), _jsx("label", { htmlFor: name, "data-qa": name, children: _jsx("span", { dangerouslySetInnerHTML: { __html: label } }) })] }));
+    return (_jsxs(CheckboxStyled, { className: classStyle, children: [tooltip !== undefined && _jsx("p", { className: 'tooltip-form sans-serif --small', children: tooltip }), _jsx("input", { type: 'checkbox', name: name, id: name, onChange: onChange, value: value === '1' ? value : '0', checked: value === '1', disabled: disabled, "data-qa": dataQa }), _jsx("label", { htmlFor: name, "data-qa": name, children: _jsx("span", { dangerouslySetInnerHTML: { __html: label } }) })] }));
 };
 export default Checkbox;

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

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

@@ -0,0 +1,133 @@
+// import { device, size } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components';
+export const CheckboxStyled = styled.div `
+  display: flex;
+  flex-direction: column-reverse;
+  justify-content: flex-end;
+  position: relative;
+  font-size: 1rem;
+  margin-bottom: 0.5rem;
+
+  .e-checkbox {
+    &-wrapper {
+      display: flex;
+      flex-flow: row nowrap;
+    }
+  }
+
+  input {
+    &:not(:checked),
+    &:checked {
+      position: absolute;
+      left: -9999px;
+    }
+
+    &:not(:checked) + label,
+    &:checked + label {
+      cursor: pointer;
+      font-size: 1rem;
+      font-weight: normal;
+      display: flex;
+      position: relative;
+      padding-top: 0;
+      top: 35%;
+      padding-left: 1.5rem;
+      margin-right: 1.5rem;
+
+      span {
+        margin-left: 0.5rem;
+      }
+
+      &:before {
+        content: '';
+        background-color: var(--others-white);
+        border: 1px solid var(--neutral-main);
+        left: 1px;
+        position: absolute;
+        top: 0;
+        height: 1.5rem;
+        width: 1.5rem;
+        border-radius: var(--global-border-radius);
+      }
+
+      &:after {
+        background-color: currentColor;
+        content: '';
+        padding: 0 0.5em;
+        margin: 0 0.125rem;
+        -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogc2tldGNodG9vbCA2MCAoMTAxMDEwKSAtIGh0dHBzOi8vc2tldGNoLmNvbSAtLT4KICAgIDx0aXRsZT5BNzI2QkEzMC0zMDVGLTQ2OEQtQURCMi1FMzU3ODVCQjFFQjlfb3V0bGluZWQ8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIHNrZXRjaHRvb2wuPC9kZXNjPgogICAgPGRlZnM+CiAgICAgICAgPHBvbHlnb24gaWQ9InBhdGgtMSIgcG9pbnRzPSI1Ljg2NjY2Njc4IDEwLjU5OTk5OTkgMy4wNjY2NjY3MiA3LjgwMDAwMDAxIDIuMTMzMzMzMzcgOC43MzMzMzMzMSA1Ljg2NjY2Njc4IDEyLjQ2NjY2NjUgMTMuODY2NjY3IDQuNDY2NjY2NzcgMTIuOTMzMzMzNiAzLjUzMzMzMzQ2Ij48L3BvbHlnb24+CiAgICA8L2RlZnM+CiAgICA8ZyBpZD0iQXNzZXQtQXJ0Ym9hcmQtUGFnZSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Imljb24vZG9uZV8yNHB4Ij4KICAgICAgICAgICAgPG1hc2sgaWQ9Im1hc2stMiIgZmlsbD0id2hpdGUiPgogICAgICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICAgICAgPC9tYXNrPgogICAgICAgICAgICA8ZyBpZD0iaWNvbi9hY3Rpb24vZG9uZV8yNHB4IiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvZz4KICAgICAgICAgICAgPGcgaWQ9IuKGsy1Db2xvci1Db2xvci0vLUljb25zLS8tTmV1dHJhbHMtLy1XaGl0ZSIgbWFzaz0idXJsKCNtYXNrLTIpIiBmaWxsPSIjMDU2NDZFIj4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjAiIHk9IjAiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PC9yZWN0PgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=);
+        mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogc2tldGNodG9vbCA2MCAoMTAxMDEwKSAtIGh0dHBzOi8vc2tldGNoLmNvbSAtLT4KICAgIDx0aXRsZT5BNzI2QkEzMC0zMDVGLTQ2OEQtQURCMi1FMzU3ODVCQjFFQjlfb3V0bGluZWQ8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIHNrZXRjaHRvb2wuPC9kZXNjPgogICAgPGRlZnM+CiAgICAgICAgPHBvbHlnb24gaWQ9InBhdGgtMSIgcG9pbnRzPSI1Ljg2NjY2Njc4IDEwLjU5OTk5OTkgMy4wNjY2NjY3MiA3LjgwMDAwMDAxIDIuMTMzMzMzMzcgOC43MzMzMzMzMSA1Ljg2NjY2Njc4IDEyLjQ2NjY2NjUgMTMuODY2NjY3IDQuNDY2NjY2NzcgMTIuOTMzMzMzNiAzLjUzMzMzMzQ2Ij48L3BvbHlnb24+CiAgICA8L2RlZnM+CiAgICA8ZyBpZD0iQXNzZXQtQXJ0Ym9hcmQtUGFnZSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Imljb24vZG9uZV8yNHB4Ij4KICAgICAgICAgICAgPG1hc2sgaWQ9Im1hc2stMiIgZmlsbD0id2hpdGUiPgogICAgICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICAgICAgPC9tYXNrPgogICAgICAgICAgICA8ZyBpZD0iaWNvbi9hY3Rpb24vZG9uZV8yNHB4IiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvZz4KICAgICAgICAgICAgPGcgaWQ9IuKGsy1Db2xvci1Db2xvci0vLUljb25zLS8tTmV1dHJhbHMtLy1XaGl0ZSIgbWFzaz0idXJsKCNtYXNrLTIpIiBmaWxsPSIjMDU2NDZFIj4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjAiIHk9IjAiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PC9yZWN0PgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=);
+        -webkit-mask-repeat: no-repeat;
+        mask-repeat: no-repeat;
+        -webkit-mask-position: center;
+        mask-position: center;
+        clip-path: padding-box inset(0.28125em 0);
+        position: absolute;
+        width: 20px;
+        height: 20px;
+        left: 0.09rem;
+        top: 2px;
+        color: var(--primary-main);
+      }
+    }
+
+    &:not(:checked) {
+      & + label {
+        &:after {
+          opacity: 0;
+          transform: scale(0);
+          top: 3px;
+          left: 0.25rem;
+        }
+
+        &:hover {
+          &:before {
+            background-color: var(--primary-main-light-5);
+          }
+        }
+      }
+    }
+
+    &:checked {
+      & + label {
+        &:after {
+          opacity: 1;
+          transform: scale(1);
+        }
+
+        &:before {
+          background-color: var(--primary-main-light-5);
+          border: 1.5px solid var(--primary-main);
+          border-radius: var(--global-border-radius);
+        }
+      }
+    }
+
+    &[disabled] {
+      & + label {
+        opacity: 0.4;
+
+        &:before,
+        &:after {
+          opacity: 0.7;
+        }
+      }
+    }
+  }
+
+  &.--is-invalid,
+  &.--group-invalid {
+    input {
+      &:not(:checked) + label,
+      &:checked + label {
+        &:before {
+          border: 2px solid var(--error-main);
+        }
+      }
+    }
+  }
+
+  .tooltip-form {
+    margin-top: 0;
+  }
+`;