@npm_leadtech/legal-lib-components 5.42.6 → 5.42.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1770,8 +1770,8 @@ h2.react-datepicker__current-month {
1770
1770
  }
1771
1771
  .e-radio .label {
1772
1772
  color: var(--neutral-neutral-1);
1773
- margin-bottom: 1rem;
1774
1773
  display: block;
1774
+ margin-bottom: 1rem;
1775
1775
  }
1776
1776
  .e-radio.default .e-radio__inner {
1777
1777
  display: flex;
@@ -1779,26 +1779,23 @@ h2.react-datepicker__current-month {
1779
1779
  gap: 1rem;
1780
1780
  }
1781
1781
  .e-radio.default .e-radio__inner .radio-item-container .e-radio-label {
1782
- display: flex;
1783
1782
  align-items: center;
1783
+ display: flex;
1784
1784
  gap: 0.5rem;
1785
1785
  }
1786
- .e-radio.default .e-radio__inner .radio-item-container .e-radio-label .radio-item-input {
1787
- visibility: hidden;
1788
- }
1789
1786
  .e-radio.default .e-radio__inner .radio-item-container .e-radio-label input[type=radio]:after {
1790
- width: 16px;
1791
- height: 16px;
1792
- border-radius: 16px;
1793
- top: -4px;
1794
- left: -2px;
1795
- position: relative;
1796
1787
  background-color: var(--others-white);
1788
+ border: 1px solid var(--neutral-neutral-1);
1789
+ border-radius: 16px;
1797
1790
  content: "";
1791
+ cursor: pointer;
1798
1792
  display: inline-block;
1793
+ height: 16px;
1794
+ left: -2px;
1795
+ position: relative;
1796
+ top: -4px;
1799
1797
  visibility: visible;
1800
- border: 1px solid var(--neutral-neutral-1);
1801
- cursor: pointer;
1798
+ width: 16px;
1802
1799
  }
1803
1800
  .e-radio.default .e-radio__inner .radio-item-container .e-radio-label .e-radio-label__label {
1804
1801
  cursor: pointer;
@@ -1817,246 +1814,120 @@ h2.react-datepicker__current-month {
1817
1814
  gap: 0.5rem;
1818
1815
  }
1819
1816
  }
1820
- .e-radio label:first-child:not(.e-radio-label) {
1821
- font-weight: bold;
1817
+ .e-radio.icons .e-radio__inner {
1818
+ display: flex;
1819
+ flex-wrap: wrap;
1820
+ gap: 0.5rem;
1821
+ width: 100%;
1822
1822
  }
1823
- .e-radio .radio-item-container {
1823
+ .e-radio.icons .e-radio__inner .radio-item-container {
1824
1824
  width: 100%;
1825
1825
  }
1826
- @media (max-width: 575px) {
1827
- .e-radio.--tabs .e-radio__inner {
1828
- display: flex;
1829
- flex-flow: row nowrap;
1830
- margin-bottom: 2rem;
1831
- width: 10rem;
1832
- margin-top: 1rem;
1833
- border: 1px solid var(--neutral-neutral-3);
1834
- background: var(--neutral-neutral-6);
1835
- border-radius: var(--global-border-radius);
1836
- transition: all 0.3s ease;
1837
- }
1838
- .e-radio.--tabs .e-radio__inner .e-radio-label {
1839
- width: 100%;
1840
- display: flex;
1841
- border-right: 1px solid var(--neutral-neutral-3);
1842
- border-top-left-radius: var(--global-border-radius);
1843
- border-bottom-left-radius: var(--global-border-radius);
1844
- }
1845
- .e-radio.--tabs .e-radio__inner .e-radio-label:last-child {
1846
- border-right: none;
1847
- }
1848
- .e-radio.--tabs input {
1849
- position: absolute;
1850
- left: -9999px;
1851
- }
1852
- .e-radio.--tabs input + label {
1853
- cursor: pointer;
1854
- font-size: 14px;
1855
- transition: all 0.3s ease;
1856
- }
1857
- .e-radio.--tabs input + label:hover {
1858
- background: var(--neutral-neutral-4);
1859
- }
1860
- .e-radio.--tabs input:checked + label {
1861
- font-weight: bold;
1862
- color: var(--others-white);
1863
- width: 100%;
1864
- cursor: pointer;
1865
- transition: all 0.3s ease;
1866
- background-color: var(--primary-main);
1867
- text-align: center;
1868
- padding: 10px;
1869
- }
1870
- .e-radio.--tabs input:checked + label:hover {
1871
- background-color: var(--primary-main);
1872
- }
1873
- .e-radio.--tabs input:not(:checked) + label {
1874
- text-align: center;
1875
- width: 100%;
1876
- color: var(--neutral-neutral-1);
1877
- font-weight: bold;
1878
- padding: 10px;
1879
- }
1880
- .e-radio.--tabs input:hover:not(:checked) + label {
1881
- width: 100%;
1882
- }
1826
+ .e-radio.icons .e-radio__inner .radio-item-container .e-radio-label {
1827
+ align-items: center;
1828
+ background: var(--others-white);
1829
+ border: 1px solid var(--neutral-neutral-4);
1830
+ border-radius: 4px;
1831
+ cursor: pointer;
1832
+ display: flex;
1833
+ gap: 16px;
1834
+ padding: 8px 15px;
1883
1835
  }
1884
- @media (min-width: 575px) {
1885
- .e-radio.--tabs:not(.--icons) .e-radio__inner {
1886
- display: flex;
1887
- flex-flow: row nowrap;
1888
- margin-bottom: 2rem;
1889
- width: 10rem;
1890
- margin-top: 1rem;
1891
- border: 1px solid var(--neutral-neutral-3);
1892
- background: var(--neutral-neutral-6);
1893
- border-radius: var(--global-border-radius);
1894
- transition: all 0.3s ease;
1895
- }
1896
- .e-radio.--tabs:not(.--icons) .e-radio__inner .e-radio-label {
1897
- width: 100%;
1898
- display: flex;
1899
- border-right: 1px solid var(--neutral-neutral-3);
1900
- border-top-left-radius: var(--global-border-radius);
1901
- border-bottom-left-radius: var(--global-border-radius);
1902
- }
1903
- .e-radio.--tabs:not(.--icons) .e-radio__inner .e-radio-label:last-child {
1904
- border-right: none;
1905
- }
1906
- .e-radio.--tabs:not(.--icons) input {
1907
- position: absolute;
1908
- left: -9999px;
1909
- }
1910
- .e-radio.--tabs:not(.--icons) input + label {
1911
- cursor: pointer;
1912
- font-size: 14px;
1913
- transition: all 0.3s ease;
1914
- }
1915
- .e-radio.--tabs:not(.--icons) input + label:hover {
1916
- background: var(--neutral-neutral-4);
1917
- }
1918
- .e-radio.--tabs:not(.--icons) input:checked + label {
1919
- font-weight: bold;
1920
- color: var(--others-white);
1921
- width: 100%;
1922
- cursor: pointer;
1923
- transition: all 0.3s ease;
1924
- background-color: var(--primary-main);
1925
- text-align: center;
1926
- padding: 10px;
1927
- }
1928
- .e-radio.--tabs:not(.--icons) input:checked + label:hover {
1929
- background-color: var(--primary-main);
1930
- }
1931
- .e-radio.--tabs:not(.--icons) input:not(:checked) + label {
1932
- text-align: center;
1933
- width: 100%;
1934
- color: var(--neutral-neutral-1);
1935
- font-weight: bold;
1936
- padding: 10px;
1937
- }
1938
- .e-radio.--tabs:not(.--icons) input:hover:not(:checked) + label {
1939
- width: 100%;
1940
- }
1836
+ .e-radio.icons .e-radio__inner .radio-item-container .e-radio-label:hover {
1837
+ background: var(--neutral-neutral-5);
1941
1838
  }
1942
- @media (max-width: 575px) {
1943
- .e-radio.--icons .e-radio__inner {
1944
- display: flex;
1945
- flex-direction: column;
1946
- gap: 1rem;
1947
- }
1948
- .e-radio.--icons .e-radio__inner .radio-item-container .e-radio-label {
1949
- display: flex;
1950
- align-items: center;
1951
- gap: 0.5rem;
1952
- }
1953
- .e-radio.--icons .e-radio__inner .radio-item-container .e-radio-label .radio-item-input {
1954
- visibility: hidden;
1955
- }
1956
- .e-radio.--icons .e-radio__inner .radio-item-container .e-radio-label input[type=radio]:after {
1957
- width: 16px;
1958
- height: 16px;
1959
- border-radius: 16px;
1960
- top: -4px;
1961
- left: -2px;
1962
- position: relative;
1963
- background-color: var(--others-white);
1964
- content: "";
1965
- display: inline-block;
1966
- visibility: visible;
1967
- border: 1px solid var(--neutral-neutral-1);
1968
- cursor: pointer;
1969
- }
1970
- .e-radio.--icons .e-radio__inner .radio-item-container .e-radio-label .e-radio-label__label {
1971
- cursor: pointer;
1972
- }
1973
- .e-radio.--icons .e-radio__inner .radio-item-container.active .e-radio-label input[type=radio]:after {
1974
- border: 5px solid var(--primary-main);
1975
- }
1976
- .e-radio.--icons .e-radio__inner .radio-item-container.active .e-radio-label .e-radio-label__label {
1977
- color: var(--primary-main);
1978
- }
1979
- .e-radio.--icons .e-radio__inner .radio-item-container:hover .e-radio-label input[type=radio]:after {
1980
- background-color: var(--primary-main-light-5);
1981
- }
1839
+ .e-radio.icons .e-radio__inner .radio-item-container .e-radio-label .radio-icon {
1840
+ height: 24px;
1841
+ padding: 1px;
1842
+ width: 24px;
1982
1843
  }
1983
- @media (max-width: 575px) and (min-width: 575px) {
1984
- .e-radio.--icons .e-radio__inner {
1985
- gap: 0.5rem;
1986
- }
1844
+ .e-radio.icons .e-radio__inner .radio-item-container .e-radio-label .radio-item-input {
1845
+ position: absolute;
1846
+ visibility: hidden;
1987
1847
  }
1988
- .e-radio.--icons .radio-icon {
1989
- display: none;
1848
+ .e-radio.icons .e-radio__inner .radio-item-container .e-radio-label .e-radio-label__label {
1849
+ font-size: 14px;
1850
+ }
1851
+ .e-radio.icons .e-radio__inner .radio-item-container.active .e-radio-label {
1852
+ background: var(--neutral-neutral-5);
1853
+ border: 2px solid var(--primary-main-dark-2);
1854
+ }
1855
+ .e-radio.icons .e-radio__inner .radio-item-container.active .e-radio-label .e-radio-label__label {
1856
+ font-weight: bold;
1990
1857
  }
1991
1858
  @media (min-width: 575px) {
1992
- .e-radio.--icons .e-radio__inner {
1993
- display: flex;
1994
- flex-flow: row wrap;
1995
- margin-top: 1.5rem;
1996
- }
1997
- .e-radio.--icons .radio-item-container {
1998
- display: flex;
1999
- width: 47%;
2000
- border: 1px solid black;
2001
- min-width: 80px;
2002
- min-height: 3.5rem;
2003
- margin-bottom: 0.5rem;
2004
- border-radius: var(--global-border-radius);
2005
- border-color: var(--neutral-neutral-4);
2006
- cursor: pointer;
2007
- }
2008
- .e-radio.--icons .radio-item-container:not(:nth-child(2n+0)) {
2009
- margin-right: 0.5rem;
2010
- }
2011
- .e-radio.--icons .radio-item-input {
2012
- position: absolute;
2013
- visibility: hidden;
2014
- }
2015
- .e-radio.--icons .radio-item-container.active {
2016
- border: 2px solid var(--primary-main-dark-1);
2017
- background-color: var(--neutral-neutral-5);
2018
- }
2019
- .e-radio.--icons .radio-item-container:hover {
2020
- background-color: var(--neutral-neutral-5);
2021
- font-weight: bold;
2022
- }
2023
- .e-radio.--icons .e-radio-label {
2024
- display: flex;
2025
- align-items: center;
2026
- padding: 0.25rem 1rem;
2027
- width: 100%;
1859
+ .e-radio.icons .e-radio__inner .radio-item-container {
1860
+ max-width: 960px;
2028
1861
  }
2029
- .e-radio.--icons .radio-icon {
2030
- display: block;
2031
- margin-right: 1rem;
1862
+ .e-radio.icons .e-radio__inner .radio-item-container .e-radio-label {
1863
+ padding: 16px 15px;
2032
1864
  }
2033
1865
  }
2034
- .e-radio.--is-invalid.--tabs .e-radio__inner,
1866
+ .e-radio.tabs .e-radio__inner {
1867
+ display: flex;
1868
+ }
1869
+ .e-radio.tabs .e-radio__inner .radio-item-container {
1870
+ align-items: center;
1871
+ background: var(--neutral-neutral-6);
1872
+ border: 1px solid var(--neutral-neutral-3);
1873
+ border-left-width: 0;
1874
+ border-right-width: 0;
1875
+ cursor: pointer;
1876
+ display: flex;
1877
+ height: 42px;
1878
+ justify-content: center;
1879
+ width: 80px;
1880
+ }
1881
+ .e-radio.tabs .e-radio__inner .radio-item-container:hover {
1882
+ background: var(--neutral-neutral-4);
1883
+ }
1884
+ .e-radio.tabs .e-radio__inner .radio-item-container.active {
1885
+ background: var(--primary-main);
1886
+ color: var(--others-white);
1887
+ }
1888
+ .e-radio.tabs .e-radio__inner .radio-item-container.active .e-radio-label .e-radio-label__label {
1889
+ font-weight: bold;
1890
+ }
1891
+ .e-radio.tabs .e-radio__inner .radio-item-container .e-radio-label .radio-item-input {
1892
+ position: absolute;
1893
+ visibility: hidden;
1894
+ }
1895
+ .e-radio.tabs .e-radio__inner .radio-item-container .e-radio-label .e-radio-label__label {
1896
+ cursor: pointer;
1897
+ font-size: 14px;
1898
+ }
1899
+ .e-radio.tabs .e-radio__inner :first-child {
1900
+ border-radius: 4px 0 0 4px;
1901
+ border-left-width: 1px;
1902
+ }
1903
+ .e-radio.tabs .e-radio__inner :last-child {
1904
+ border-radius: 0 4px 4px 0;
1905
+ border-right-width: 1px;
1906
+ }
1907
+ .e-radio.tabs .e-radio__inner :not(:first-child) {
1908
+ border-left-width: 1px;
1909
+ }
1910
+ .e-radio label:first-child:not(.e-radio-label) {
1911
+ font-weight: bold;
1912
+ }
1913
+ .e-radio.--is-invalid.tabs .e-radio__inner,
2035
1914
  .e-radio.--is-invalid.--group-invalid .e-radio__inner,
2036
- .e-radio.--group-invalid.--tabs .e-radio__inner,
1915
+ .e-radio.--group-invalid.tabs .e-radio__inner,
2037
1916
  .e-radio.--group-invalid.--group-invalid .e-radio__inner {
2038
1917
  border: 1px solid var(--error-main);
2039
1918
  }
2040
- .e-radio.--is-invalid.--tabs .e-radio__inner label label,
1919
+ .e-radio.--is-invalid.tabs .e-radio__inner label label,
2041
1920
  .e-radio.--is-invalid.--group-invalid .e-radio__inner label label,
2042
- .e-radio.--group-invalid.--tabs .e-radio__inner label label,
1921
+ .e-radio.--group-invalid.tabs .e-radio__inner label label,
2043
1922
  .e-radio.--group-invalid.--group-invalid .e-radio__inner label label {
2044
1923
  border-right: 1px solid var(--error-main);
2045
1924
  }
2046
- .e-radio.--is-invalid.--tabs .e-radio__inner label:last-child label,
1925
+ .e-radio.--is-invalid.tabs .e-radio__inner label:last-child label,
2047
1926
  .e-radio.--is-invalid.--group-invalid .e-radio__inner label:last-child label,
2048
- .e-radio.--group-invalid.--tabs .e-radio__inner label:last-child label,
1927
+ .e-radio.--group-invalid.tabs .e-radio__inner label:last-child label,
2049
1928
  .e-radio.--group-invalid.--group-invalid .e-radio__inner label:last-child label {
2050
1929
  border-right: none;
2051
1930
  }
2052
- .e-radio.radio--small.--tabs input + label {
2053
- font-size: 0.875rem;
2054
- padding: 0.75rem;
2055
- }
2056
- .e-radio.radio--small.--tabs .e-radio__inner {
2057
- margin-top: 0;
2058
- margin-bottom: 0;
2059
- }
2060
1931
  .tippy-box {
2061
1932
  background-color: var(--others-white);
2062
1933
  border-radius: var(--global-border-radius);
@@ -80,7 +80,6 @@ export const CardPaneStyled = styled.div `
80
80
  }
81
81
  &.pane--title--button {
82
82
  cursor: pointer;
83
- color: var(--primary-main);
84
83
  }
85
84
  }
86
85
  &--description {
@@ -81,7 +81,6 @@ export const CardPaneStyled = styled.div`
81
81
  }
82
82
  &.pane--title--button {
83
83
  cursor: pointer;
84
- color: var(--primary-main);
85
84
  }
86
85
  }
87
86
  &--description {
@@ -1,4 +1,4 @@
1
- import { type FC } from 'react';
1
+ import React from 'react';
2
2
  import { type IconImageProps } from './IconImageProps.types';
3
- declare const IconImage: FC<IconImageProps>;
3
+ declare const IconImage: React.FC<IconImageProps>;
4
4
  export default IconImage;
@@ -1,9 +1,5 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  const IconImage = ({ iconName, baseSrcUrl = undefined, givenClass, iconFormat = 'svg' }) => {
3
- if (baseSrcUrl === undefined) {
4
- baseSrcUrl = `${process.env.ASSETS_URL}/`;
5
- }
6
- const iconUrl = `${baseSrcUrl}${iconName}.${iconFormat}`;
7
- return _jsx("img", { className: givenClass, src: iconUrl, alt: '', role: 'img' });
3
+ return (_jsx("img", { className: givenClass, src: `${baseSrcUrl ?? process.env.ASSETS_URL + '/'}${iconName}.${iconFormat}`, alt: '', role: 'img' }));
8
4
  };
9
5
  export default IconImage;
@@ -1,14 +1,16 @@
1
- import React, { type FC } from 'react'
1
+ import React from 'react'
2
2
 
3
3
  import { type IconImageProps } from './IconImageProps.types'
4
4
 
5
- const IconImage: FC<IconImageProps> = ({ iconName, baseSrcUrl = undefined, givenClass, iconFormat = 'svg' }) => {
6
- if (baseSrcUrl === undefined) {
7
- baseSrcUrl = `${process.env.ASSETS_URL}/`
8
- }
9
- const iconUrl = `${baseSrcUrl}${iconName}.${iconFormat}`
10
-
11
- return <img className={givenClass} src={iconUrl} alt='' role='img' />
5
+ const IconImage: React.FC<IconImageProps> = ({ iconName, baseSrcUrl = undefined, givenClass, iconFormat = 'svg' }) => {
6
+ return (
7
+ <img
8
+ className={givenClass}
9
+ src={`${baseSrcUrl ?? process.env.ASSETS_URL + '/'}${iconName}.${iconFormat}`}
10
+ alt=''
11
+ role='img'
12
+ />
13
+ )
12
14
  }
13
15
 
14
16
  export default IconImage
@@ -8,27 +8,23 @@
8
8
  gap: 1rem;
9
9
  .radio-item-container {
10
10
  .e-radio-label {
11
- display: flex;
12
11
  align-items: center;
12
+ display: flex;
13
13
  gap: 0.5rem;
14
14
 
15
- .radio-item-input {
16
- visibility: hidden;
17
- }
18
-
19
15
  input[type='radio']:after {
20
- width: 16px;
21
- height: 16px;
22
- border-radius: 16px;
23
- top: -4px;
24
- left: -2px;
25
- position: relative;
26
16
  background-color: var(--others-white);
17
+ border: 1px solid var(--neutral-neutral-1);
18
+ border-radius: 16px;
27
19
  content: '';
20
+ cursor: pointer;
28
21
  display: inline-block;
22
+ height: 16px;
23
+ left: -2px;
24
+ position: relative;
25
+ top: -4px;
29
26
  visibility: visible;
30
- border: 1px solid var(--neutral-neutral-1);
31
- cursor: pointer;
27
+ width: 16px;
32
28
  }
33
29
 
34
30
  .e-radio-label__label {
@@ -65,67 +61,53 @@
65
61
  @mixin tabsStyles {
66
62
  .e-radio__inner {
67
63
  display: flex;
68
- flex-flow: row nowrap;
69
- margin-bottom: 2rem;
70
- width: 10rem;
71
- margin-top: 1rem;
72
- border: 1px solid var(--neutral-neutral-3);
73
- background: var(--neutral-neutral-6);
74
- border-radius: var(--global-border-radius);
75
- transition: all 0.3s ease;
76
-
77
- .e-radio-label {
78
- width: 100%;
79
- display: flex;
80
- border-right: 1px solid var(--neutral-neutral-3);
81
- border-top-left-radius: var(--global-border-radius);
82
- border-bottom-left-radius: var(--global-border-radius);
83
-
84
- &:last-child {
85
- border-right: none;
86
- }
87
- }
88
- }
89
-
90
- input {
91
- position: absolute;
92
- left: -9999px;
93
-
94
- + label {
64
+ .radio-item-container {
65
+ align-items: center;
66
+ background: var(--neutral-neutral-6);
67
+ border: 1px solid var(--neutral-neutral-3);
68
+ border-left-width: 0;
69
+ border-right-width: 0;
95
70
  cursor: pointer;
96
- font-size: 14px;
97
- transition: all 0.3s ease;
71
+ display: flex;
72
+ height: 42px;
73
+ justify-content: center;
74
+ width: 80px;
98
75
 
99
76
  &:hover {
100
77
  background: var(--neutral-neutral-4);
101
78
  }
102
- }
103
79
 
104
- &:checked + label {
105
- font-weight: bold;
106
- color: var(--others-white);
107
- width: 100%;
108
- cursor: pointer;
109
- transition: all 0.3s ease;
110
- background-color: var(--primary-main);
111
- text-align: center;
112
- padding: 10px;
80
+ &.active {
81
+ background: var(--primary-main);
82
+ color: var(--others-white);
83
+ .e-radio-label {
84
+ .e-radio-label__label {
85
+ font-weight: bold;
86
+ }
87
+ }
88
+ }
113
89
 
114
- &:hover {
115
- background-color: var(--primary-main);
90
+ .e-radio-label {
91
+ .radio-item-input {
92
+ position: absolute;
93
+ visibility: hidden;
94
+ }
95
+ .e-radio-label__label {
96
+ cursor: pointer;
97
+ font-size: 14px;
98
+ }
116
99
  }
117
100
  }
118
-
119
- &:not(:checked) + label {
120
- text-align: center;
121
- width: 100%;
122
- color: var(--neutral-neutral-1);
123
- font-weight: bold;
124
- padding: 10px;
101
+ :first-child {
102
+ border-radius: 4px 0 0 4px;
103
+ border-left-width: 1px;
125
104
  }
126
-
127
- &:hover:not(:checked) + label {
128
- width: 100%;
105
+ :last-child {
106
+ border-radius: 0 4px 4px 0;
107
+ border-right-width: 1px;
108
+ }
109
+ :not(:first-child) {
110
+ border-left-width: 1px;
129
111
  }
130
112
  }
131
113
  }
@@ -133,101 +115,90 @@
133
115
  @mixin iconStyles {
134
116
  .e-radio__inner {
135
117
  display: flex;
136
- flex-flow: row wrap;
137
- margin-top: 1.5rem;
138
- }
118
+ flex-wrap: wrap;
119
+ gap: 0.5rem;
120
+ width: 100%;
121
+ .radio-item-container {
122
+ width: 100%;
123
+ .e-radio-label {
124
+ align-items: center;
125
+ background: var(--others-white);
126
+ border: 1px solid var(--neutral-neutral-4);
127
+ border-radius: 4px;
128
+ cursor: pointer;
129
+ display: flex;
130
+ gap: 16px;
131
+ padding: 8px 15px;
139
132
 
140
- .radio-item-container {
141
- display: flex;
142
- width: 47%;
143
- border: 1px solid black;
144
- min-width: 80px;
145
- min-height: 3.5rem;
146
- margin-bottom: 0.5rem;
147
- border-radius: var(--global-border-radius);
148
- border-color: var(--neutral-neutral-4);
149
- cursor: pointer;
150
- }
133
+ &:hover {
134
+ background: var(--neutral-neutral-5);
135
+ }
151
136
 
152
- .radio-item-container:not(:nth-child(2n + 0)) {
153
- margin-right: 0.5rem;
154
- }
137
+ .radio-icon {
138
+ height: 24px;
139
+ padding: 1px;
140
+ width: 24px;
141
+ }
155
142
 
156
- .radio-item-input {
157
- position: absolute;
158
- visibility: hidden;
159
- }
143
+ .radio-item-input {
144
+ position: absolute;
145
+ visibility: hidden;
146
+ }
160
147
 
161
- .radio-item-container.active {
162
- border: 2px solid var(--primary-main-dark-1);
163
- background-color: var(--neutral-neutral-5);
164
- }
148
+ .e-radio-label__label {
149
+ font-size: 14px;
150
+ }
151
+ }
165
152
 
166
- .radio-item-container:hover {
167
- background-color: var(--neutral-neutral-5);
168
- font-weight: bold;
169
- }
153
+ &.active {
154
+ .e-radio-label {
155
+ background: var(--neutral-neutral-5);
156
+ border: 2px solid var(--primary-main-dark-2);
170
157
 
171
- .e-radio-label {
172
- display: flex;
173
- align-items: center;
174
- padding: 0.25rem 1rem;
175
- width: 100%;
176
- }
158
+ .e-radio-label__label {
159
+ font-weight: bold;
160
+ }
161
+ }
162
+ }
163
+ }
177
164
 
178
- .radio-icon {
179
- display: block;
180
- margin-right: 1rem;
165
+ @include portrait-tablets {
166
+ .radio-item-container {
167
+ max-width: $md;
168
+ .e-radio-label {
169
+ padding: 16px 15px;
170
+ }
171
+ }
172
+ }
181
173
  }
182
174
  }
183
175
 
184
176
  .e-radio {
185
177
  .label {
186
178
  color: var(--neutral-neutral-1);
187
- margin-bottom: 1rem;
188
179
  display: block;
180
+ margin-bottom: 1rem;
189
181
  }
190
182
 
191
183
  &.default {
192
184
  @include defaultStyles;
193
185
  }
194
186
 
195
- // por aqui
196
-
197
- label:first-child:not(.e-radio-label) {
198
- font-weight: bold;
187
+ &.icons {
188
+ @include iconStyles;
199
189
  }
200
190
 
201
- .radio-item-container {
202
- width: 100%;
191
+ &.tabs {
192
+ @include tabsStyles;
203
193
  }
204
194
 
205
- &.--tabs {
206
- @media (max-width: #{$xs}) {
207
- @include tabsStyles;
208
- }
209
- &:not(.--icons) {
210
- @media (min-width: #{$xs}) {
211
- @include tabsStyles;
212
- }
213
- }
214
- }
215
-
216
- &.--icons {
217
- @include mobile {
218
- @include defaultStyles();
219
- }
220
- .radio-icon {
221
- display: none;
222
- }
223
- @include portrait-tablets {
224
- @include iconStyles;
225
- }
195
+ label:first-child:not(.e-radio-label) {
196
+ font-weight: bold;
226
197
  }
227
198
 
228
199
  &.--is-invalid,
229
200
  &.--group-invalid {
230
- &.--tabs,
201
+ &.tabs,
231
202
  &.--group-invalid {
232
203
  .e-radio__inner {
233
204
  border: 1px solid var(--error-main);
@@ -247,15 +218,3 @@
247
218
  }
248
219
  }
249
220
  }
250
-
251
- .e-radio.radio--small.--tabs {
252
- input + label {
253
- font-size: 0.875rem;
254
- padding: 0.75rem;
255
- }
256
-
257
- .e-radio__inner {
258
- margin-top: 0;
259
- margin-bottom: 0;
260
- }
261
- }
@@ -30,7 +30,7 @@ const Radio: React.FC<RadioProps> = ({
30
30
  <label htmlFor={name} className='sans-serif --medium --bold-weight label'>
31
31
  {label}
32
32
  </label>
33
- <div className={'e-radio__inner'}>
33
+ <div className='e-radio__inner'>
34
34
  {items.map((radio) => {
35
35
  return (
36
36
  <div className={`radio-item-container ${radio.value === value ? 'active' : ''}`} key={radio.value}>
@@ -19,6 +19,6 @@ export interface RadioProps {
19
19
  }
20
20
  export declare enum RadioFormat {
21
21
  Default = "default",
22
- Tabs = "--tabs",
23
- Icons = "--icons"
22
+ Tabs = "tabs",
23
+ Icons = "icons"
24
24
  }
@@ -1,6 +1,6 @@
1
1
  export var RadioFormat;
2
2
  (function (RadioFormat) {
3
3
  RadioFormat["Default"] = "default";
4
- RadioFormat["Tabs"] = "--tabs";
5
- RadioFormat["Icons"] = "--icons";
4
+ RadioFormat["Tabs"] = "tabs";
5
+ RadioFormat["Icons"] = "icons";
6
6
  })(RadioFormat || (RadioFormat = {}));
@@ -16,6 +16,6 @@ export interface RadioProps {
16
16
 
17
17
  export enum RadioFormat {
18
18
  Default = 'default',
19
- Tabs = '--tabs',
20
- Icons = '--icons'
19
+ Tabs = 'tabs',
20
+ Icons = 'icons'
21
21
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@npm_leadtech/legal-lib-components",
3
- "version": "5.42.6",
3
+ "version": "5.42.8",
4
4
  "license": "ISC",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",