@npm_leadtech/legal-lib-components 5.40.2 → 5.42.0

package/dist/css/styles.css

@@ -1768,194 +1768,61 @@ h2.react-datepicker__current-month {
   height: 1em;
   vertical-align: -0.125em;
 }
-.e-radio label:first-child:not(.e-radio-label) {
-  font-weight: bold;
+.e-radio .label {
+  color: var(--neutral-neutral-1);
+  margin-bottom: 1rem;
+  display: block;
 }
-.e-radio .radio-item-container {
-  width: 100%;
+.e-radio.default .e-radio__inner {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }
-@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%;
-  }
+.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.--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%;
+  .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.--tabs .e-radio__inner {
     display: flex;
@@ -2072,6 +1939,52 @@ 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;
 }
@@ -2118,10 +2031,6 @@ 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,
@@ -2140,9 +2049,6 @@ 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;
@@ -2151,20 +2057,6 @@ 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/src/components/atoms/Radio/Radio.d.ts

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

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

@@ -1,20 +1,21 @@
 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 = (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] }));
+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 })] }));
 };
 export default Radio;

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

@@ -1,110 +1,63 @@
 @import '../../../globalStyles/variables.scss';
 @import '../../../globalStyles/mediaqueries.scss';
 
-@mixin regularStyles {
+@mixin defaultStyles {
   .e-radio__inner {
     display: flex;
-    flex-flow: row wrap;
-    width: 100%;
-    margin-left: 1.5rem;
-
-    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%;
-    }
-  }
+    flex-direction: column;
+    gap: 1rem;
+    .radio-item-container {
+      .e-radio-label {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
 
-  input {
-    position: absolute;
-    left: -9999px;
+        .radio-item-input {
+          visibility: hidden;
+        }
 
-    &:not(:checked):hover + label {
-      &:before {
-        background-color: var(--primary-main-light-5);
-      }
-    }
+        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;
+        }
 
-    &:checked:hover + label {
-      &:before {
-        background-color: var(--primary-main);
+        .e-radio-label__label {
+          cursor: pointer;
+        }
       }
-    }
 
-    &:checked + label {
-      color: var(--primary-main);
-      text-shadow:
-        -0.02ex 0 get-color(primary),
-        0.02ex 0 var(--primary-main);
-
-      &: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;
+      &.active {
+        .e-radio-label {
+          input[type='radio']:after {
+            border: 5px solid var(--primary-main);
+          }
+          .e-radio-label__label {
+            color: var(--primary-main);
+          }
+        }
       }
 
-      &: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;
+      &:hover {
+        .e-radio-label {
+          input[type='radio']:after {
+            background-color: var(--primary-main-light-5);
+          }
+        }
       }
     }
 
-    + label {
-      cursor: pointer;
-      font-size: 16px;
-
-      &: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;
-      }
-
-      &: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%;
-      }
+    @include portrait-tablets {
+      gap: 0.5rem;
     }
   }
 }
@@ -178,62 +131,69 @@
 }
 
 @mixin iconStyles {
-  .radio-icon {
-    display: none;
+  .e-radio__inner {
+    display: flex;
+    flex-flow: row wrap;
+    margin-top: 1.5rem;
   }
-  @include portrait-tablets {
-    .e-radio__inner {
-      display: flex;
-      flex-flow: row wrap;
-      margin-top: 1.5rem;
-    }
 
-    .radio-item-container {
-      display: flex;
-      width: 47%;
-      border: 1px solid black;
-      min-width: 80px;
-      min-height: 3.5rem;
-      margin-bottom: 0.5rem;
-      border-radius: var(--global-border-radius);
-      border-color: var(--neutral-neutral-4);
-      cursor: pointer;
-    }
+  .radio-item-container {
+    display: flex;
+    width: 47%;
+    border: 1px solid black;
+    min-width: 80px;
+    min-height: 3.5rem;
+    margin-bottom: 0.5rem;
+    border-radius: var(--global-border-radius);
+    border-color: var(--neutral-neutral-4);
+    cursor: pointer;
+  }
 
-    .radio-item-container:not(:nth-child(2n + 0)) {
-      margin-right: 0.5rem;
-    }
+  .radio-item-container:not(:nth-child(2n + 0)) {
+    margin-right: 0.5rem;
+  }
 
-    .radio-item-input {
-      position: absolute;
-      visibility: hidden;
-    }
+  .radio-item-input {
+    position: absolute;
+    visibility: hidden;
+  }
 
-    .radio-item-container.active {
-      border: 2px solid var(--primary-main-dark-1);
-      background-color: var(--neutral-neutral-5);
-    }
+  .radio-item-container.active {
+    border: 2px solid var(--primary-main-dark-1);
+    background-color: var(--neutral-neutral-5);
+  }
 
-    .radio-item-container:hover {
-      background-color: var(--neutral-neutral-5);
-      font-weight: bold;
-    }
+  .radio-item-container:hover {
+    background-color: var(--neutral-neutral-5);
+    font-weight: bold;
+  }
 
-    .e-radio-label {
-      display: flex;
-      align-items: center;
-      padding: 0.25rem 1rem;
-      width: 100%;
-    }
+  .e-radio-label {
+    display: flex;
+    align-items: center;
+    padding: 0.25rem 1rem;
+    width: 100%;
+  }
 
-    .radio-icon {
-      display: block;
-      margin-right: 1rem;
-    }
+  .radio-icon {
+    display: block;
+    margin-right: 1rem;
   }
 }
 
 .e-radio {
+  .label {
+    color: var(--neutral-neutral-1);
+    margin-bottom: 1rem;
+    display: block;
+  }
+
+  &.default {
+    @include defaultStyles;
+  }
+
+  // por aqui
+
   label:first-child:not(.e-radio-label) {
     font-weight: bold;
   }
@@ -242,17 +202,6 @@
     width: 100%;
   }
 
-  &.--regular {
-    @media (max-width: #{$xs}) {
-      @include regularStyles;
-    }
-    &:not(.--icons) {
-      @media (min-width: #{$xs}) {
-        @include regularStyles;
-      }
-    }
-  }
-
   &.--tabs {
     @media (max-width: #{$xs}) {
       @include tabsStyles;
@@ -265,21 +214,19 @@
   }
 
   &.--icons {
-    @include iconStyles;
+    @include mobile {
+      @include defaultStyles();
+    }
+    .radio-icon {
+      display: none;
+    }
+    @include portrait-tablets {
+      @include iconStyles;
+    }
   }
 
   &.--is-invalid,
   &.--group-invalid {
-    &.--regular {
-      input {
-        & + label {
-          &:before {
-            border-color: var(--error-main);
-          }
-        }
-      }
-    }
-
     &.--tabs,
     &.--group-invalid {
       .e-radio__inner {
@@ -301,10 +248,6 @@
   }
 }
 
-.radio-group__label {
-  color: var(--neutral-neutral-1);
-}
-
 .e-radio.radio--small.--tabs {
   input + label {
     font-size: 0.875rem;
@@ -316,24 +259,3 @@
     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-label,
-  .e-radio-label__label {
-    display: block;
-    margin-bottom: 0.75rem;
-  }
-}

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

@@ -1,35 +1,39 @@
-import React, { type FC } from 'react'
+import React from 'react'
 
+import { RadioFormat, type RadioProps } from './RadioProps.types'
 import IconImage from '../IconImage/IconImage'
-import { type RadioProps } from './RadioProps.types'
 // import './Radio.scss'
 
-const Radio: FC<RadioProps> = (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 ? <p className='tooltip-form sans-serif --small'>{props.tooltip}</p> : ''
-
+const Radio: React.FC<RadioProps> = ({
+  class: className,
+  format = RadioFormat.Default,
+  validate = false,
+  isValidGroup = false,
+  tooltip,
+  name,
+  label,
+  items,
+  value,
+  disabled = false,
+  help,
+  onChange
+}) => {
+  const [classNameValue] = React.useState<string>(() => {
+    let value = `e-radio ${format}`
+    if (className) value += ` ${className}`
+    if (!validate) value += ' --is-invalid'
+    if (!isValidGroup) value += ' --group-invalid'
+    return value
+  })
   return (
-    <div className={classNames}>
-      <label htmlFor={props.name} className='radio-group__label'>
-        {props.label}
+    <div className={classNameValue}>
+      <label htmlFor={name} className='sans-serif --medium --bold-weight label'>
+        {label}
       </label>
       <div className={'e-radio__inner'}>
-        {props.items?.map((radio) => {
+        {items.map((radio) => {
           return (
-            <div className={`radio-item-container ${radio.value === props.value ? 'active' : ''}`} key={radio.value}>
+            <div className={`radio-item-container ${radio.value === value ? 'active' : ''}`} key={radio.value}>
               <label className='e-radio-label' key={radio.value}>
                 {radio.iconName !== undefined && radio.iconName !== '' && (
                   <IconImage givenClass='radio-icon' iconName={radio.iconName} />
@@ -37,27 +41,27 @@ const Radio: FC<RadioProps> = (props) => {
                 <input
                   type='radio'
                   className='radio-item-input'
-                  id={`${props.name}_${radio.value}`}
-                  name={props.name}
-                  onChange={props.onChange}
+                  id={`${name}_${radio.value}`}
+                  name={name}
+                  onChange={onChange}
                   value={radio.value}
-                  checked={radio.value === props.value}
-                  disabled={props.disabled}
+                  checked={radio.value === value}
+                  disabled={disabled}
                 />
                 <label
-                  className='e-radio-label__label'
-                  htmlFor={`${props.name}_${radio.value}`}
-                  data-qa={`${props.name}_${radio.value}`}
+                  className='e-radio-label__label sans-serif --medium'
+                  htmlFor={`${name}_${radio.value}`}
+                  data-qa={`${name}_${radio.value}`}
                 >
                   {radio.label}
                 </label>
-                <div>{props.help}</div>
+                {help && <div>{help}</div>}
               </label>
             </div>
           )
         })}
       </div>
-      {TooltipObject}
+      {tooltip ?? <p className='tooltip-form sans-serif --small'>{tooltip}</p>}
     </div>
   )
 }

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

@@ -1,18 +1,24 @@
 export interface RadioProps {
     id?: string;
-    name?: string;
+    name: string;
     class?: string;
+    format?: RadioFormat;
     value?: string;
     tooltip?: string;
-    label?: string;
+    label: string;
     help?: string;
     validate?: boolean;
     isValidGroup?: boolean;
     disabled?: boolean;
-    items?: {
+    items: {
         value: string;
         label: string;
         iconName?: string;
     }[];
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
+export declare enum RadioFormat {
+    Default = "default",
+    Tabs = "--tabs",
+    Icons = "--icons"
+}

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

@@ -1 +1,6 @@
-export {};
+export var RadioFormat;
+(function (RadioFormat) {
+    RadioFormat["Default"] = "default";
+    RadioFormat["Tabs"] = "--tabs";
+    RadioFormat["Icons"] = "--icons";
+})(RadioFormat || (RadioFormat = {}));

package/dist/src/components/atoms/Radio/RadioProps.types.ts

@@ -1,14 +1,21 @@
 export interface RadioProps {
   id?: string
-  name?: string
+  name: string
   class?: string
+  format?: RadioFormat
   value?: string
   tooltip?: string
-  label?: string
+  label: string
   help?: string
   validate?: boolean
   isValidGroup?: boolean
   disabled?: boolean
-  items?: { value: string; label: string; iconName?: string }[]
+  items: { value: string; label: string; iconName?: string }[]
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
 }
+
+export enum RadioFormat {
+  Default = 'default',
+  Tabs = '--tabs',
+  Icons = '--icons'
+}

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

@@ -1,2 +1,2 @@
 export { default as Radio } from './Radio';
-export { type RadioProps } from './RadioProps.types';
+export * from './RadioProps.types';

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

@@ -1 +1,2 @@
 export { default as Radio } from './Radio';
+export * from './RadioProps.types';

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

@@ -1,2 +1,2 @@
 export { default as Radio } from './Radio'
-export { type RadioProps } from './RadioProps.types'
+export * from './RadioProps.types'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npm_leadtech/legal-lib-components",
-  "version": "5.40.2",
+  "version": "5.42.0",
   "license": "ISC",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",