@npm_leadtech/legal-lib-components 5.39.12 → 5.40.1

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/jumbo-bckground-l.svg

@@ -0,0 +1,20 @@
+<svg width="1024" height="504" viewBox="0 0 1024 504" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_8073_6075)">
+<rect width="1024" height="504" fill="#F3F7FA"/>
+<path d="M1084 571C1084 584.807 1072.81 596 1059 596C1045.19 596 1034 584.807 1034 571H1084ZM895 67V98.5H845V67H895ZM964.5 168H996V218H964.5V168ZM996 344H933V294H996V344ZM933 420H964.5V470H933V420ZM1084 539.5V571H1034V539.5H1084ZM964.5 420C1030.5 420 1084 473.502 1084 539.5H1034C1034 501.116 1002.88 470 964.5 470V420ZM895 382C895 402.987 912.013 420 933 420V470C884.399 470 845 430.601 845 382L895 382ZM933 344C912.013 344 895 361.013 895 382L845 382C845 333.399 884.399 294 933 294V344ZM1084 256C1084 304.601 1044.6 344 996 344V294C1016.99 294 1034 276.987 1034 256H1084ZM996 168C1044.6 168 1084 207.399 1084 256H1034C1034 235.013 1016.99 218 996 218V168ZM895 98.5C895 136.884 926.116 168 964.5 168V218C898.502 218 845 164.498 845 98.5H895Z" fill="url(#paint0_linear_8073_6075)"/>
+<path d="M-303.778 310.488C-311.456 321.964 -308.378 337.491 -296.902 345.169C-285.427 352.847 -269.9 349.769 -262.222 338.293L-303.778 310.488ZM120.481 13.2684L102.498 40.1453L144.053 67.9503L162.037 41.0734L120.481 13.2684ZM7.24905 59.0281L-18.2343 41.9772L-46.0394 83.5329L-20.556 100.584L7.24905 59.0281ZM-116.108 188.253L-65.1414 222.355L-37.3364 180.8L-88.3031 146.698L-116.108 188.253ZM-107.405 285.52L-132.888 268.469L-160.693 310.025L-135.21 327.076L-107.405 285.52ZM-297.498 301.103L-303.778 310.488L-262.222 338.293L-255.942 328.908L-297.498 301.103ZM-132.888 268.469C-187.356 232.025 -261.054 246.635 -297.498 301.103L-255.942 328.908C-234.854 297.391 -192.21 288.937 -160.693 310.025L-132.888 268.469ZM-135.21 327.076C-94.8171 354.103 -40.1623 343.268 -13.1351 302.875L-54.6909 275.069C-66.3617 292.512 -89.9626 297.191 -107.405 285.52L-135.21 327.076ZM-65.1414 222.355C-47.699 234.026 -43.0201 257.627 -54.6909 275.069L-13.1351 302.875C13.892 262.481 3.05668 207.827 -37.3364 180.8L-65.1414 222.355ZM-140.309 66.1783C-167.336 106.571 -156.501 161.226 -116.108 188.253L-88.3031 146.698C-105.746 135.027 -110.424 111.426 -98.7536 93.9834L-140.309 66.1783ZM-18.2343 41.9772C-58.6273 14.9501 -113.282 25.7853 -140.309 66.1783L-98.7536 93.9834C-87.0828 76.5409 -63.4818 71.8621 -46.0394 83.5329L-18.2343 41.9772ZM102.498 40.1453C81.4098 71.6618 38.7656 80.1159 7.24905 59.0281L-20.556 100.584C33.9111 137.028 107.609 122.417 144.053 67.9503L102.498 40.1453Z" fill="url(#paint1_linear_8073_6075)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_8073_6075" x1="964.5" y1="570.911" x2="964.5" y2="67.0001" gradientUnits="userSpaceOnUse">
+<stop stop-color="#02374A" stop-opacity="0.2"/>
+<stop offset="1" stop-color="#02374A" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_8073_6075" x1="-216.81" y1="393.894" x2="63.4148" y2="-24.9138" gradientUnits="userSpaceOnUse">
+<stop stop-color="#02374A" stop-opacity="0.2"/>
+<stop offset="1" stop-color="#02374A" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_8073_6075">
+<rect width="1024" height="504" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/images/svg/jumbo-bckground-m.svg

@@ -0,0 +1,15 @@
+<svg width="768" height="464" viewBox="0 0 768 464" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_8073_6076)">
+<rect width="768" height="464" fill="#F3F7FA"/>
+<path d="M832 539C832 552.807 820.807 564 807 564C793.193 564 782 552.807 782 539H832ZM643 35V66.5H593V35H643ZM712.5 136H744V186H712.5V136ZM744 312H681V262H744V312ZM681 388H712.5V438H681V388ZM832 507.5V539H782V507.5H832ZM712.5 388C778.498 388 832 441.502 832 507.5H782C782 469.116 750.884 438 712.5 438V388ZM643 350C643 370.987 660.013 388 681 388V438C632.399 438 593 398.601 593 350L643 350ZM681 312C660.013 312 643 329.013 643 350L593 350C593 301.399 632.399 262 681 262V312ZM832 224C832 272.601 792.601 312 744 312V262C764.987 262 782 244.987 782 224H832ZM744 136C792.601 136 832 175.399 832 224H782C782 203.013 764.987 186 744 186V136ZM643 66.5C643 104.884 674.116 136 712.5 136V186C646.502 186 593 132.498 593 66.5H643Z" fill="url(#paint0_linear_8073_6076)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_8073_6076" x1="712.5" y1="538.911" x2="712.5" y2="35.0001" gradientUnits="userSpaceOnUse">
+<stop stop-color="#02374A" stop-opacity="0.2"/>
+<stop offset="1" stop-color="#02374A" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_8073_6076">
+<rect width="768" height="464" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/images/svg/jumbo-bckground-xxl.svg

@@ -0,0 +1,20 @@
+<svg width="1440" height="504" viewBox="0 0 1440 504" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_8073_6040)">
+<rect width="1440" height="504" fill="#F3F7FA"/>
+<path d="M1423 575C1423 588.807 1411.81 600 1398 600C1384.19 600 1373 588.807 1373 575H1423ZM1234 71V102.5H1184V71H1234ZM1303.5 172H1335V222H1303.5V172ZM1335 348H1272V298H1335V348ZM1272 424H1303.5V474H1272V424ZM1423 543.5V575H1373V543.5H1423ZM1303.5 424C1369.5 424 1423 477.502 1423 543.5H1373C1373 505.116 1341.88 474 1303.5 474V424ZM1234 386C1234 406.987 1251.01 424 1272 424V474C1223.4 474 1184 434.601 1184 386L1234 386ZM1272 348C1251.01 348 1234 365.013 1234 386L1184 386C1184 337.399 1223.4 298 1272 298V348ZM1423 260C1423 308.601 1383.6 348 1335 348V298C1355.99 298 1373 280.987 1373 260H1423ZM1335 172C1383.6 172 1423 211.399 1423 260H1373C1373 239.013 1355.99 222 1335 222V172ZM1234 102.5C1234 140.884 1265.12 172 1303.5 172V222C1237.5 222 1184 168.498 1184 102.5H1234Z" fill="url(#paint0_linear_8073_6040)"/>
+<path d="M-217.15 307.813C-224.828 319.288 -221.75 334.815 -210.274 342.493C-198.799 350.171 -183.272 347.093 -175.594 335.618L-217.15 307.813ZM208.503 11.5252L190.986 37.7053L232.541 65.5104L250.058 39.3303L208.503 11.5252ZM94.574 56.8188L68.3939 39.3016L40.5888 80.8573L66.769 98.3745L94.574 56.8188ZM-29.4799 185.578L22.8803 220.612L50.6854 179.056L-1.67484 144.022L-29.4799 185.578ZM-19.3833 283.777L-45.5635 266.26L-73.3685 307.815L-47.1884 325.333L-19.3833 283.777ZM-211.336 299.124L-217.15 307.813L-175.594 335.618L-169.78 326.929L-211.336 299.124ZM-45.5635 266.26C-100.415 229.558 -174.634 244.272 -211.336 299.124L-169.78 326.929C-148.435 295.027 -105.27 286.47 -73.3685 307.815L-45.5635 266.26ZM-47.1884 325.333C-6.79535 352.36 47.8595 341.524 74.8866 301.131L33.3308 273.326C21.6601 290.769 -1.9409 295.448 -19.3833 283.777L-47.1884 325.333ZM22.8803 220.612C40.3228 232.283 45.0016 255.884 33.3308 273.326L74.8866 301.131C101.914 260.738 91.0784 206.083 50.6854 179.056L22.8803 220.612ZM-53.6811 63.5028C-80.7082 103.896 -69.8729 158.551 -29.4799 185.578L-1.67484 144.022C-19.1173 132.351 -23.7961 108.75 -12.1254 91.3078L-53.6811 63.5028ZM68.3939 39.3016C28.0008 12.2745 -26.654 23.1097 -53.6811 63.5028L-12.1254 91.3078C-0.454562 73.8654 23.1464 69.1865 40.5888 80.8573L68.3939 39.3016ZM190.986 37.7053C169.64 69.6066 126.475 78.164 94.574 56.8188L66.769 98.3745C121.621 135.076 195.84 120.362 232.541 65.5104L190.986 37.7053Z" fill="url(#paint1_linear_8073_6040)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_8073_6040" x1="1303.5" y1="574.911" x2="1303.5" y2="71.0001" gradientUnits="userSpaceOnUse">
+<stop stop-color="#02374A" stop-opacity="0.2"/>
+<stop offset="1" stop-color="#02374A" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_8073_6040" x1="-129.485" y1="391.684" x2="150.74" y2="-27.1231" gradientUnits="userSpaceOnUse">
+<stop stop-color="#02374A" stop-opacity="0.2"/>
+<stop offset="1" stop-color="#02374A" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_8073_6040">
+<rect width="1440" height="504" fill="white"/>
+</clipPath>
+</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;