@npm_leadtech/legal-lib-components 5.39.12 → 5.40.0

package/dist/css/styles.css

@@ -1768,61 +1768,194 @@ h2.react-datepicker__current-month {
   height: 1em;
   vertical-align: -0.125em;
 }
-.e-radio .label {
-  color: var(--neutral-neutral-1);
-  margin-bottom: 1rem;
-  display: block;
-}
-.e-radio.default .e-radio__inner {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-.e-radio.default .e-radio__inner .radio-item-container .e-radio-label {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-.e-radio.default .e-radio__inner .radio-item-container .e-radio-label .radio-item-input {
-  visibility: hidden;
-}
-.e-radio.default .e-radio__inner .radio-item-container .e-radio-label input[type=radio]:after {
-  width: 16px;
-  height: 16px;
-  border-radius: 16px;
-  top: -4px;
-  left: -2px;
-  position: relative;
-  background-color: var(--others-white);
-  content: "";
-  display: inline-block;
-  visibility: visible;
-  border: 1px solid var(--neutral-neutral-1);
-  cursor: pointer;
-}
-.e-radio.default .e-radio__inner .radio-item-container .e-radio-label .e-radio-label__label {
-  cursor: pointer;
-}
-.e-radio.default .e-radio__inner .radio-item-container.active .e-radio-label input[type=radio]:after {
-  border: 5px solid var(--primary-main);
-}
-.e-radio.default .e-radio__inner .radio-item-container.active .e-radio-label .e-radio-label__label {
-  color: var(--primary-main);
-}
-.e-radio.default .e-radio__inner .radio-item-container:hover .e-radio-label input[type=radio]:after {
-  background-color: var(--primary-main-light-5);
-}
-@media (min-width: 575px) {
-  .e-radio.default .e-radio__inner {
-    gap: 0.5rem;
-  }
-}
 .e-radio label:first-child:not(.e-radio-label) {
   font-weight: bold;
 }
 .e-radio .radio-item-container {
   width: 100%;
 }
+@media (max-width: 575px) {
+  .e-radio.--regular .e-radio__inner {
+    display: flex;
+    flex-flow: row wrap;
+    width: 100%;
+    margin-left: 1.5rem;
+  }
+  .e-radio.--regular .e-radio__inner label {
+    margin-bottom: 0.25rem;
+    flex-basis: 100%;
+    display: flex;
+    align-items: center;
+    color: var(--neutral-main);
+    font-size: 16px;
+    position: relative;
+    cursor: pointer;
+    width: 100%;
+  }
+  .e-radio.--regular input {
+    position: absolute;
+    left: -9999px;
+  }
+  .e-radio.--regular input:not(:checked):hover + label:before {
+    background-color: var(--primary-main-light-5);
+  }
+  .e-radio.--regular input:checked:hover + label:before {
+    background-color: var(--primary-main);
+  }
+  .e-radio.--regular input:checked + label {
+    color: var(--primary-main);
+    text-shadow: -0.02ex 0 var(--primary-main), 0.02ex 0 var(--primary-main);
+  }
+  .e-radio.--regular input:checked + label:before {
+    content: "";
+    position: absolute;
+    top: 2px;
+    left: -23px;
+    height: 1.25rem;
+    width: 1.25rem;
+    background-color: var(--primary-main);
+    border: 1px solid var(--primary-main);
+    border-radius: 50%;
+    box-sizing: border-box;
+  }
+  .e-radio.--regular input:checked + label:after {
+    content: "";
+    position: absolute;
+    top: 0.5rem;
+    left: -17px;
+    display: block;
+    height: 0.5rem;
+    width: 0.5rem;
+    background: currentColor;
+    border-radius: 50%;
+    opacity: 1;
+    transform: scale(1);
+    color: #fff;
+    transition: all 0.1s;
+  }
+  .e-radio.--regular input + label {
+    cursor: pointer;
+    font-size: 16px;
+  }
+  .e-radio.--regular input + label:before {
+    content: "";
+    position: absolute;
+    left: -23px;
+    top: 2px;
+    height: 1.25rem;
+    width: 1.25rem;
+    border-radius: 50%;
+    background-color: transparent;
+    border: 1px solid var(--neutral-main);
+    box-sizing: border-box;
+  }
+  .e-radio.--regular input + label:after {
+    position: absolute;
+    top: 0.5rem;
+    left: -17px;
+    display: block;
+    height: 0.5rem;
+    width: 0.5rem;
+    opacity: 0;
+    transform: scale(0);
+    color: var(--others-white);
+    transition: all 0.1s;
+    content: "";
+    bottom: 0.5rem;
+    border-radius: 50%;
+  }
+}
+@media (min-width: 575px) {
+  .e-radio.--regular:not(.--icons) .e-radio__inner {
+    display: flex;
+    flex-flow: row wrap;
+    width: 100%;
+    margin-left: 1.5rem;
+  }
+  .e-radio.--regular:not(.--icons) .e-radio__inner label {
+    margin-bottom: 0.25rem;
+    flex-basis: 100%;
+    display: flex;
+    align-items: center;
+    color: var(--neutral-main);
+    font-size: 16px;
+    position: relative;
+    cursor: pointer;
+    width: 100%;
+  }
+  .e-radio.--regular:not(.--icons) input {
+    position: absolute;
+    left: -9999px;
+  }
+  .e-radio.--regular:not(.--icons) input:not(:checked):hover + label:before {
+    background-color: var(--primary-main-light-5);
+  }
+  .e-radio.--regular:not(.--icons) input:checked:hover + label:before {
+    background-color: var(--primary-main);
+  }
+  .e-radio.--regular:not(.--icons) input:checked + label {
+    color: var(--primary-main);
+    text-shadow: -0.02ex 0 var(--primary-main), 0.02ex 0 var(--primary-main);
+  }
+  .e-radio.--regular:not(.--icons) input:checked + label:before {
+    content: "";
+    position: absolute;
+    top: 2px;
+    left: -23px;
+    height: 1.25rem;
+    width: 1.25rem;
+    background-color: var(--primary-main);
+    border: 1px solid var(--primary-main);
+    border-radius: 50%;
+    box-sizing: border-box;
+  }
+  .e-radio.--regular:not(.--icons) input:checked + label:after {
+    content: "";
+    position: absolute;
+    top: 0.5rem;
+    left: -17px;
+    display: block;
+    height: 0.5rem;
+    width: 0.5rem;
+    background: currentColor;
+    border-radius: 50%;
+    opacity: 1;
+    transform: scale(1);
+    color: #fff;
+    transition: all 0.1s;
+  }
+  .e-radio.--regular:not(.--icons) input + label {
+    cursor: pointer;
+    font-size: 16px;
+  }
+  .e-radio.--regular:not(.--icons) input + label:before {
+    content: "";
+    position: absolute;
+    left: -23px;
+    top: 2px;
+    height: 1.25rem;
+    width: 1.25rem;
+    border-radius: 50%;
+    background-color: transparent;
+    border: 1px solid var(--neutral-main);
+    box-sizing: border-box;
+  }
+  .e-radio.--regular:not(.--icons) input + label:after {
+    position: absolute;
+    top: 0.5rem;
+    left: -17px;
+    display: block;
+    height: 0.5rem;
+    width: 0.5rem;
+    opacity: 0;
+    transform: scale(0);
+    color: var(--others-white);
+    transition: all 0.1s;
+    content: "";
+    bottom: 0.5rem;
+    border-radius: 50%;
+  }
+}
 @media (max-width: 575px) {
   .e-radio.--tabs .e-radio__inner {
     display: flex;
@@ -1939,52 +2072,6 @@ h2.react-datepicker__current-month {
     width: 100%;
   }
 }
-@media (max-width: 575px) {
-  .e-radio.--icons .e-radio__inner {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-  .e-radio.--icons .e-radio__inner .radio-item-container .e-radio-label {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-  .e-radio.--icons .e-radio__inner .radio-item-container .e-radio-label .radio-item-input {
-    visibility: hidden;
-  }
-  .e-radio.--icons .e-radio__inner .radio-item-container .e-radio-label input[type=radio]:after {
-    width: 16px;
-    height: 16px;
-    border-radius: 16px;
-    top: -4px;
-    left: -2px;
-    position: relative;
-    background-color: var(--others-white);
-    content: "";
-    display: inline-block;
-    visibility: visible;
-    border: 1px solid var(--neutral-neutral-1);
-    cursor: pointer;
-  }
-  .e-radio.--icons .e-radio__inner .radio-item-container .e-radio-label .e-radio-label__label {
-    cursor: pointer;
-  }
-  .e-radio.--icons .e-radio__inner .radio-item-container.active .e-radio-label input[type=radio]:after {
-    border: 5px solid var(--primary-main);
-  }
-  .e-radio.--icons .e-radio__inner .radio-item-container.active .e-radio-label .e-radio-label__label {
-    color: var(--primary-main);
-  }
-  .e-radio.--icons .e-radio__inner .radio-item-container:hover .e-radio-label input[type=radio]:after {
-    background-color: var(--primary-main-light-5);
-  }
-}
-@media (max-width: 575px) and (min-width: 575px) {
-  .e-radio.--icons .e-radio__inner {
-    gap: 0.5rem;
-  }
-}
 .e-radio.--icons .radio-icon {
   display: none;
 }
@@ -2031,6 +2118,10 @@ h2.react-datepicker__current-month {
     margin-right: 1rem;
   }
 }
+.e-radio.--is-invalid.--regular input + label:before,
+.e-radio.--group-invalid.--regular input + label:before {
+  border-color: var(--error-main);
+}
 .e-radio.--is-invalid.--tabs .e-radio__inner,
 .e-radio.--is-invalid.--group-invalid .e-radio__inner,
 .e-radio.--group-invalid.--tabs .e-radio__inner,
@@ -2049,6 +2140,9 @@ h2.react-datepicker__current-month {
 .e-radio.--group-invalid.--group-invalid .e-radio__inner label:last-child label {
   border-right: none;
 }
+.radio-group__label {
+  color: var(--neutral-neutral-1);
+}
 .e-radio.radio--small.--tabs input + label {
   font-size: 0.875rem;
   padding: 0.75rem;
@@ -2057,6 +2151,20 @@ h2.react-datepicker__current-month {
   margin-top: 0;
   margin-bottom: 0;
 }
+.e-radio.radio--narrow.--regular .e-radio__inner {
+  margin-top: 0.5rem;
+}
+.e-radio.--regular.radio--regular--bare .e-radio__inner {
+  display: inline-block;
+  margin-right: auto;
+  text-align: left;
+  width: auto;
+}
+.e-radio.--regular.radio--regular--bare .e-radio-label,
+.e-radio.--regular.radio--regular--bare .e-radio-label__label {
+  display: block;
+  margin-bottom: 0.75rem;
+}
 .tippy-box {
   background-color: var(--others-white);
   border-radius: var(--global-border-radius);

package/dist/images/svg/back-element-sign-01.svg

@@ -0,0 +1,9 @@
+<svg width="239" height="433" viewBox="0 0 239 433" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M239 504C239 517.807 227.807 529 214 529C200.193 529 189 517.807 189 504H239ZM50 3.00407e-05V31.5H1.49012e-06V3.00407e-05H50ZM119.5 101H151V151H119.5V101ZM151 277H88V227H151V277ZM88 353H119.5V403H88V353ZM239 472.5V504H189V472.5H239ZM119.5 353C185.498 353 239 406.502 239 472.5H189C189 434.116 157.884 403 119.5 403V353ZM50 315C50 335.987 67.0132 353 88 353V403C39.3989 403 1.49012e-06 363.601 1.49012e-06 315H50ZM88 277C67.0132 277 50 294.013 50 315H1.49012e-06C1.49012e-06 266.399 39.3989 227 88 227V277ZM239 189C239 237.601 199.601 277 151 277V227C171.987 227 189 209.987 189 189H239ZM151 101C199.601 101 239 140.399 239 189H189C189 168.013 171.987 151 151 151V101ZM50 31.5C50 69.8838 81.1162 101 119.5 101V151C53.502 151 1.49012e-06 97.498 1.49012e-06 31.5H50Z" fill="url(#paint0_linear_7620_13777)"/>
+<defs>
+<linearGradient id="paint0_linear_7620_13777" x1="119.5" y1="503.911" x2="119.5" y2="0.000116057" gradientUnits="userSpaceOnUse">
+<stop stop-color="#02374A" stop-opacity="0.2"/>
+<stop offset="1" stop-color="#02374A" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

package/dist/images/svg/back-element-sign-02.svg

@@ -0,0 +1,9 @@
+<svg width="251" height="336" viewBox="0 0 251 336" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M-217.15 296.813C-224.828 308.288 -221.75 323.815 -210.274 331.493C-198.799 339.171 -183.272 336.093 -175.594 324.618L-217.15 296.813ZM208.503 0.525201L190.986 26.7053L232.541 54.5104L250.058 28.3303L208.503 0.525201ZM94.574 45.8188L68.3939 28.3016L40.5888 69.8573L66.769 87.3745L94.574 45.8188ZM-29.4799 174.578L22.8803 209.612L50.6854 168.056L-1.67484 133.022L-29.4799 174.578ZM-19.3833 272.777L-45.5635 255.26L-73.3685 296.815L-47.1884 314.333L-19.3833 272.777ZM-211.336 288.124L-217.15 296.813L-175.594 324.618L-169.78 315.929L-211.336 288.124ZM-45.5635 255.26C-100.415 218.558 -174.634 233.272 -211.336 288.124L-169.78 315.929C-148.435 284.027 -105.27 275.47 -73.3685 296.815L-45.5635 255.26ZM-47.1884 314.333C-6.79535 341.36 47.8595 330.524 74.8866 290.131L33.3308 262.326C21.6601 279.769 -1.94089 284.448 -19.3833 272.777L-47.1884 314.333ZM22.8803 209.612C40.3228 221.283 45.0016 244.884 33.3308 262.326L74.8866 290.131C101.914 249.738 91.0784 195.083 50.6854 168.056L22.8803 209.612ZM-53.6811 52.5028C-80.7082 92.8958 -69.8729 147.551 -29.4799 174.578L-1.67484 133.022C-19.1173 121.351 -23.7961 97.7503 -12.1254 80.3078L-53.6811 52.5028ZM68.3939 28.3016C28.0008 1.27448 -26.654 12.1097 -53.6811 52.5028L-12.1254 80.3078C-0.454564 62.8654 23.1464 58.1865 40.5888 69.8573L68.3939 28.3016ZM190.986 26.7053C169.64 58.6066 126.475 67.164 94.574 45.8188L66.769 87.3745C121.621 124.076 195.84 109.362 232.541 54.5104L190.986 26.7053Z" fill="url(#paint0_linear_7620_15366)"/>
+<defs>
+<linearGradient id="paint0_linear_7620_15366" x1="-129.485" y1="380.684" x2="150.74" y2="-38.1231" gradientUnits="userSpaceOnUse">
+<stop stop-color="#02374A" stop-opacity="0.2"/>
+<stop offset="1" stop-color="#02374A" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

package/dist/images/svg/back-element-sign-03.svg

@@ -0,0 +1,9 @@
+<svg width="301" height="397" viewBox="0 0 301 397" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M184.806 -136.303C192.705 -147.627 208.289 -150.403 219.613 -142.504C230.937 -134.604 233.713 -119.021 225.814 -107.697L184.806 -136.303ZM63.5072 367.932L81.5291 342.097L122.537 370.703L104.516 396.538L63.5072 367.932ZM64.2901 245.333L38.4548 227.311L67.061 186.302L92.8963 204.324L64.2901 245.333ZM139.149 82.9614L190.819 119.005L162.213 160.014L110.542 123.97L139.149 82.9614ZM234.301 56.6725L208.465 38.6506L237.072 -2.35778L262.907 15.6641L234.301 56.6725ZM178.824 -127.728L184.806 -136.303L225.814 -107.697L219.833 -99.122L178.824 -127.728ZM208.465 38.6506C154.336 0.891517 141.065 -73.5988 178.824 -127.728L219.833 -99.122C197.872 -67.6409 205.59 -24.3181 237.072 -2.35778L208.465 38.6506ZM262.907 15.6641C302.768 43.47 312.54 98.3248 284.735 138.186L243.726 109.58C255.733 92.3669 251.513 68.6796 234.301 56.6725L262.907 15.6641ZM190.819 119.005C208.032 131.012 231.719 126.792 243.726 109.58L284.735 138.186C256.929 178.047 202.074 187.819 162.213 160.014L190.819 119.005ZM16.627 104.789C44.4329 64.9281 99.2877 55.1555 139.149 82.9614L110.542 123.97C93.3298 111.963 69.6425 116.183 57.6354 133.395L16.627 104.789ZM38.4548 227.311C-1.40616 199.505 -11.1788 144.65 16.627 104.789L57.6354 133.395C45.6283 150.608 49.8483 174.295 67.061 186.302L38.4548 227.311ZM81.5291 342.097C103.489 310.616 95.7712 267.293 64.2901 245.333L92.8963 204.324C147.026 242.083 160.296 316.574 122.537 370.703L81.5291 342.097Z" fill="url(#paint0_linear_7620_15713)"/>
+<defs>
+<linearGradient id="paint0_linear_7620_15713" x1="294.805" y1="-85.1219" x2="6.50603" y2="328.169" gradientUnits="userSpaceOnUse">
+<stop stop-color="#02374A" stop-opacity="0.2"/>
+<stop offset="1" stop-color="#02374A" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

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

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

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

@@ -1,21 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { RadioFormat } from './RadioProps.types';
 import IconImage from '../IconImage/IconImage';
 // import './Radio.scss'
-const Radio = ({ class: className, format = RadioFormat.Default, validate = false, isValidGroup = false, tooltip, name, label, items, value, disabled = false, help, onChange }) => {
-    const [classNameValue] = React.useState(() => {
-        let value = `e-radio ${format}`;
-        if (className)
-            value += ` ${className}`;
-        if (!validate)
-            value += ' --is-invalid';
-        if (!isValidGroup)
-            value += ' --group-invalid';
-        return value;
-    });
-    return (_jsxs("div", { className: classNameValue, children: [_jsx("label", { htmlFor: name, className: 'sans-serif --medium --bold-weight label', children: label }), _jsx("div", { className: 'e-radio__inner', children: items.map((radio) => {
-                    return (_jsx("div", { className: `radio-item-container ${radio.value === value ? 'active' : ''}`, children: _jsxs("label", { className: 'e-radio-label', children: [radio.iconName !== undefined && radio.iconName !== '' && (_jsx(IconImage, { givenClass: 'radio-icon', iconName: radio.iconName })), _jsx("input", { type: 'radio', className: 'radio-item-input', id: `${name}_${radio.value}`, name: name, onChange: onChange, value: radio.value, checked: radio.value === value, disabled: disabled }), _jsx("label", { className: 'e-radio-label__label sans-serif --medium', htmlFor: `${name}_${radio.value}`, "data-qa": `${name}_${radio.value}`, children: radio.label }), help && _jsx("div", { children: help })] }, radio.value) }, radio.value));
-                }) }), tooltip ?? _jsx("p", { className: 'tooltip-form sans-serif --small', children: tooltip })] }));
+const Radio = (props) => {
+    const optionalClassNames = {
+        small: 'radio--small',
+        narrow: 'radio--narrow',
+        regularBare: 'radio--regular--bare'
+    };
+    const additionalClassNames = Object.keys(optionalClassNames)
+        .filter((attribute) => props[attribute])
+        .map((key) => optionalClassNames[key])
+        .join(' ');
+    const classNames = `e-radio ${props.class} ${!props.validate ? '--is-invalid' : ''} ${!props.isValidGroup ? '--group-invalid' : ''} ${additionalClassNames}`;
+    const TooltipObject = props.tooltip ? _jsx("p", { className: 'tooltip-form sans-serif --small', children: props.tooltip }) : '';
+    return (_jsxs("div", { className: classNames, children: [_jsx("label", { htmlFor: props.name, className: 'radio-group__label', children: props.label }), _jsx("div", { className: 'e-radio__inner', children: props.items?.map((radio) => {
+                    return (_jsx("div", { className: `radio-item-container ${radio.value === props.value ? 'active' : ''}`, children: _jsxs("label", { className: 'e-radio-label', children: [radio.iconName !== undefined && radio.iconName !== '' && (_jsx(IconImage, { givenClass: 'radio-icon', iconName: radio.iconName })), _jsx("input", { type: 'radio', className: 'radio-item-input', id: `${props.name}_${radio.value}`, name: props.name, onChange: props.onChange, value: radio.value, checked: radio.value === props.value, disabled: props.disabled }), _jsx("label", { className: 'e-radio-label__label', htmlFor: `${props.name}_${radio.value}`, "data-qa": `${props.name}_${radio.value}`, children: radio.label }), _jsx("div", { children: props.help })] }, radio.value) }, radio.value));
+                }) }), TooltipObject] }));
 };
 export default Radio;