@npm_leadtech/legal-lib-components 5.45.2 → 5.46.1

package/dist/css/styles.css

@@ -83,7 +83,9 @@
 html {
   --font-sans: "Inter", sans-serif;
   --font-serif: "Lora", serif;
-  --global-border-radius: 4px;
+  --s-border-radius: 0.25rem;
+  --m-border-radius: 0.5rem;
+  --l-border-radius: 1rem;
   --box-shadow-small: 0 0.125rem 0.375rem 0 rgba(var(--primary-main-dark-1-rgb), 0.25);
   --box-shadow-medium: 0 0.25rem 0.5rem 0 rgba(var(--primary-main-dark-1-rgb), 0.2);
   --box-shadow-menu: 0 0.25rem 0.5rem -0.5rem rgba(var(--primary-main-dark-1-rgb), 0.2);
@@ -782,7 +784,7 @@ html[data-theme=lawdistrict] .e-button.--primary-3 {
   padding: 0.5rem 1rem;
   align-items: center;
   align-self: center;
-  border-radius: var(--global-border-radius);
+  border-radius: var(--s-border-radius);
   text-align: center;
   text-decoration: none;
   cursor: pointer;
@@ -895,7 +897,7 @@ html[data-theme=lawdistrict] .e-button.--primary-3 {
 .e-button.--secondary-icon {
   display: flex;
   justify-content: center;
-  border-radius: var(--global-border-radius);
+  border-radius: var(--s-border-radius);
   border: 2px solid var(--neutral-neutral-2);
   background-color: var(--neutral-neutral-5);
 }
@@ -962,7 +964,7 @@ html[data-theme=lawdistrict] .e-button.--primary-3 {
   font-size: 14px;
   font-weight: bold;
   justify-content: center;
-  border-radius: var(--global-border-radius);
+  border-radius: var(--s-border-radius);
   border: 2px solid var(--neutral-neutral-2);
   background-color: var(--neutral-neutral-6);
 }
@@ -1001,9 +1003,6 @@ html[data-theme=lawdistrict] .e-button.--primary-3 {
 .button--tertiary-1:hover {
   background-color: var(--button-tertiary-hover);
 }
-.button--small {
-  line-height: 1;
-}
 .button--tertiary-2 {
   background-color: transparent;
   border: 1px solid var(--neutral-neutral-3);
@@ -1029,7 +1028,7 @@ html[data-theme=lawdistrict] .e-button.--primary-3 {
 }
 .button-icon {
   background: none;
-  border-radius: var(--global-border-radius);
+  border-radius: var(--s-border-radius);
   border: 1px solid var(--neutral-neutral-4);
   display: inline-flex;
   padding: 0.1875rem;
@@ -1124,11 +1123,11 @@ html[data-theme=lawdistrict] .e-button.--primary-3 {
   background-color: #f0f0f0;
   border-bottom: 1px solid #aeaeae;
   border-top-left-radius: 0.3rem;
-  padding: 8px 0;
+  padding: 0.5rem 0;
   position: relative;
 }
 .react-datepicker__header--time {
-  padding-bottom: 8px;
+  padding-bottom: 0.5rem;
   padding-left: 5px;
   padding-right: 5px;
 }
@@ -1198,7 +1197,7 @@ h2.react-datepicker__current-month {
   margin-right: auto;
 }
 .react-datepicker__navigation--years-previous {
-  top: 4px;
+  top: 0.25rem;
 }
 .react-datepicker__navigation--years-upcoming {
   top: -4px;
@@ -1456,8 +1455,8 @@ h2.react-datepicker__current-month {
   transform: translateX(-50%);
   background-color: #333;
   color: #fff;
-  padding: 4px;
-  border-radius: 4px;
+  padding: 0.25rem;
+  border-radius: var(--s-border-radius);
   white-space: nowrap;
   visibility: hidden;
   opacity: 0;
@@ -1554,8 +1553,8 @@ h2.react-datepicker__current-month {
   transform: translateX(-50%);
   background-color: #333;
   color: #fff;
-  padding: 4px;
-  border-radius: 4px;
+  padding: 0.25rem;
+  border-radius: var(--s-border-radius);
   white-space: nowrap;
   visibility: hidden;
   opacity: 0;
@@ -1776,7 +1775,7 @@ h2.react-datepicker__current-month {
 .e-radio.default .e-radio__inner {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: var(--global-gap);
 }
 .e-radio.default .e-radio__inner .radio-item-container .e-radio-label {
   display: flex;
@@ -1789,7 +1788,7 @@ h2.react-datepicker__current-month {
 .e-radio.default .e-radio__inner .radio-item-container .e-radio-label input[type=radio]:after {
   width: 16px;
   height: 16px;
-  border-radius: 16px;
+  border-radius: var(--l-border-radius);
   top: -4px;
   left: -2px;
   position: relative;
@@ -1832,15 +1831,15 @@ h2.react-datepicker__current-month {
     margin-top: 1rem;
     border: 1px solid var(--neutral-neutral-3);
     background: var(--neutral-neutral-6);
-    border-radius: var(--global-border-radius);
+    border-radius: var(--s-border-radius);
     transition: all 0.3s ease;
   }
   .e-radio.--tabs .e-radio__inner .e-radio-label {
     width: 100%;
     display: flex;
     border-right: 1px solid var(--neutral-neutral-3);
-    border-top-left-radius: var(--global-border-radius);
-    border-bottom-left-radius: var(--global-border-radius);
+    border-top-left-radius: var(--s-border-radius);
+    border-bottom-left-radius: var(--s-border-radius);
   }
   .e-radio.--tabs .e-radio__inner .e-radio-label:last-child {
     border-right: none;
@@ -1890,15 +1889,15 @@ h2.react-datepicker__current-month {
     margin-top: 1rem;
     border: 1px solid var(--neutral-neutral-3);
     background: var(--neutral-neutral-6);
-    border-radius: var(--global-border-radius);
+    border-radius: var(--s-border-radius);
     transition: all 0.3s ease;
   }
   .e-radio.--tabs:not(.--icons) .e-radio__inner .e-radio-label {
     width: 100%;
     display: flex;
     border-right: 1px solid var(--neutral-neutral-3);
-    border-top-left-radius: var(--global-border-radius);
-    border-bottom-left-radius: var(--global-border-radius);
+    border-top-left-radius: var(--s-border-radius);
+    border-bottom-left-radius: var(--s-border-radius);
   }
   .e-radio.--tabs:not(.--icons) .e-radio__inner .e-radio-label:last-child {
     border-right: none;
@@ -1943,7 +1942,7 @@ h2.react-datepicker__current-month {
   .e-radio.--icons .e-radio__inner {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: var(--global-gap);
   }
   .e-radio.--icons .e-radio__inner .radio-item-container .e-radio-label {
     display: flex;
@@ -1956,7 +1955,7 @@ h2.react-datepicker__current-month {
   .e-radio.--icons .e-radio__inner .radio-item-container .e-radio-label input[type=radio]:after {
     width: 16px;
     height: 16px;
-    border-radius: 16px;
+    border-radius: var(--l-border-radius);
     top: -4px;
     left: -2px;
     position: relative;
@@ -2001,7 +2000,7 @@ h2.react-datepicker__current-month {
     min-width: 80px;
     min-height: 3.5rem;
     margin-bottom: 0.5rem;
-    border-radius: var(--global-border-radius);
+    border-radius: var(--s-border-radius);
     border-color: var(--neutral-neutral-4);
     cursor: pointer;
   }
@@ -2059,7 +2058,7 @@ h2.react-datepicker__current-month {
 }
 .tippy-box {
   background-color: var(--others-white);
-  border-radius: var(--global-border-radius);
+  border-radius: var(--s-border-radius);
   font-size: 16px;
   line-height: 1.4;
   white-space: normal;
@@ -2122,7 +2121,7 @@ h2.react-datepicker__current-month {
   appearance: none;
   color: var(--neutral-neutral-1);
   background-color: var(--neutral-neutral-6);
-  border-radius: var(--global-border-radius);
+  border-radius: var(--s-border-radius);
   padding: 0.75rem 0 0.75rem 0.75rem;
   font-size: 0.875rem;
   height: 40px;
@@ -2260,7 +2259,7 @@ h2.react-datepicker__current-month {
   text-decoration: underline;
 }
 .tooltip-menu__item {
-  border-radius: var(--global-border-radius);
+  border-radius: var(--s-border-radius);
   border: 1px solid var(--neutral-neutral-4);
   display: flex;
   padding: 0.1875rem;

package/dist/images/svg/benefit-bckground-l.svg

@@ -0,0 +1,15 @@
+<svg width="1192" height="466" viewBox="0 0 1192 466" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_8137_9144)">
+<rect width="1192" height="466" fill="#F3F7FA"/>
+<path d="M1055.81 -136.303C1063.7 -147.627 1079.29 -150.403 1090.61 -142.504C1101.94 -134.604 1104.71 -119.021 1096.81 -107.697L1055.81 -136.303ZM934.507 367.932L952.529 342.097L993.537 370.703L975.516 396.538L934.507 367.932ZM935.29 245.333L909.455 227.311L938.061 186.302L963.896 204.324L935.29 245.333ZM1010.15 82.9614L1061.82 119.005L1033.21 160.014L981.542 123.97L1010.15 82.9614ZM1105.3 56.6725L1079.47 38.6506L1108.07 -2.35778L1133.91 15.6641L1105.3 56.6725ZM1049.82 -127.728L1055.81 -136.303L1096.81 -107.697L1090.83 -99.122L1049.82 -127.728ZM1079.47 38.6506C1025.34 0.891513 1012.07 -73.5988 1049.82 -127.728L1090.83 -99.122C1068.87 -67.6409 1076.59 -24.3181 1108.07 -2.35778L1079.47 38.6506ZM1133.91 15.6641C1173.77 43.47 1183.54 98.3248 1155.73 138.186L1114.73 109.58C1126.73 92.3669 1122.51 68.6796 1105.3 56.6725L1133.91 15.6641ZM1061.82 119.005C1079.03 131.012 1102.72 126.792 1114.73 109.58L1155.73 138.186C1127.93 178.047 1073.07 187.819 1033.21 160.014L1061.82 119.005ZM887.627 104.789C915.433 64.9281 970.288 55.1555 1010.15 82.9614L981.542 123.97C964.33 111.963 940.642 116.183 928.635 133.395L887.627 104.789ZM909.455 227.311C869.594 199.505 859.821 144.65 887.627 104.789L928.635 133.395C916.628 150.608 920.848 174.295 938.061 186.302L909.455 227.311ZM952.529 342.097C974.489 310.616 966.771 267.293 935.29 245.333L963.896 204.324C1018.03 242.083 1031.3 316.574 993.537 370.703L952.529 342.097Z" fill="url(#paint0_linear_8137_9144)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_8137_9144" x1="1165.81" y1="-85.1219" x2="877.506" y2="328.169" gradientUnits="userSpaceOnUse">
+<stop stop-color="#02374A" stop-opacity="0.2"/>
+<stop offset="1" stop-color="#02374A" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_8137_9144">
+<rect width="1192" height="466" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -0,0 +1,15 @@
+<svg width="720" height="804" viewBox="0 0 720 804" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_8137_9145)">
+<rect width="720" height="804" fill="#F3F7FA"/>
+<path d="M715.806 320.697C723.705 309.373 739.289 306.597 750.613 314.496C761.937 322.396 764.713 337.979 756.814 349.303L715.806 320.697ZM594.507 824.932L612.529 799.097L653.537 827.703L635.516 853.538L594.507 824.932ZM595.29 702.333L569.455 684.311L598.061 643.302L623.896 661.324L595.29 702.333ZM670.149 539.961L721.819 576.005L693.213 617.014L641.542 580.97L670.149 539.961ZM765.301 513.672L739.465 495.651L768.072 454.642L793.907 472.664L765.301 513.672ZM709.824 329.272L715.806 320.697L756.814 349.303L750.833 357.878L709.824 329.272ZM739.465 495.651C685.336 457.892 672.065 383.401 709.824 329.272L750.833 357.878C728.872 389.359 736.59 432.682 768.072 454.642L739.465 495.651ZM793.907 472.664C833.768 500.47 843.54 555.325 815.735 595.186L774.726 566.58C786.733 549.367 782.513 525.68 765.301 513.672L793.907 472.664ZM721.819 576.005C739.032 588.012 762.719 583.792 774.726 566.58L815.735 595.186C787.929 635.047 733.074 644.819 693.213 617.014L721.819 576.005ZM547.627 561.789C575.433 521.928 630.288 512.156 670.149 539.961L641.542 580.97C624.33 568.963 600.642 573.183 588.635 590.395L547.627 561.789ZM569.455 684.311C529.594 656.505 519.821 601.65 547.627 561.789L588.635 590.395C576.628 607.608 580.848 631.295 598.061 643.302L569.455 684.311ZM612.529 799.097C634.489 767.616 626.771 724.293 595.29 702.333L623.896 661.324C678.026 699.083 691.296 773.574 653.537 827.703L612.529 799.097Z" fill="url(#paint0_linear_8137_9145)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_8137_9145" x1="825.805" y1="371.878" x2="537.506" y2="785.169" gradientUnits="userSpaceOnUse">
+<stop stop-color="#02374A" stop-opacity="0.2"/>
+<stop offset="1" stop-color="#02374A" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_8137_9145">
+<rect width="720" height="804" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/images/svg/benefit-bckground-s.svg

@@ -0,0 +1,15 @@
+<svg width="327" height="1050" viewBox="0 0 327 1050" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_8137_9146)">
+<rect width="327" height="1050" fill="#F3F7FA"/>
+<path d="M318.806 400.696C326.705 389.372 342.289 386.596 353.613 394.495C364.937 402.395 367.713 417.978 359.814 429.303L318.806 400.696ZM197.507 904.931L215.529 879.096L256.537 907.702L238.516 933.537L197.507 904.931ZM198.29 782.332L172.455 764.31L201.061 723.301L226.896 741.323L198.29 782.332ZM273.149 619.96L324.819 656.004L296.213 697.013L244.542 660.969L273.149 619.96ZM368.301 593.672L342.465 575.65L371.072 534.641L396.907 552.663L368.301 593.672ZM312.824 409.271L318.806 400.696L359.814 429.303L353.833 437.877L312.824 409.271ZM342.465 575.65C288.336 537.891 275.065 463.4 312.824 409.271L353.833 437.877C331.872 469.358 339.59 512.681 371.072 534.641L342.465 575.65ZM396.907 552.663C436.768 580.469 446.54 635.324 418.735 675.185L377.726 646.579C389.733 629.366 385.513 605.679 368.301 593.672L396.907 552.663ZM324.819 656.004C342.032 668.011 365.719 663.791 377.726 646.579L418.735 675.185C390.929 715.046 336.074 724.818 296.213 697.013L324.819 656.004ZM150.627 641.788C178.433 601.927 233.288 592.155 273.149 619.96L244.542 660.969C227.33 648.962 203.642 653.182 191.635 670.394L150.627 641.788ZM172.455 764.31C132.594 736.504 122.821 681.649 150.627 641.788L191.635 670.394C179.628 687.607 183.848 711.294 201.061 723.301L172.455 764.31ZM215.529 879.096C237.489 847.615 229.771 804.292 198.29 782.332L226.896 741.323C281.026 779.082 294.296 853.573 256.537 907.702L215.529 879.096Z" fill="url(#paint0_linear_8137_9146)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_8137_9146" x1="428.805" y1="451.877" x2="140.506" y2="865.168" gradientUnits="userSpaceOnUse">
+<stop stop-color="#02374A" stop-opacity="0.2"/>
+<stop offset="1" stop-color="#02374A" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_8137_9146">
+<rect width="327" height="1050" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -18,7 +18,7 @@ export const AddButtonStyled = styled.div `
     &__inner {
       display: inline-block;
       color: var(--primary-main);
-      border-radius: var(--global-border-radius);
+      border-radius: var(--s-border-radius);
       transition: all 0.3s ease;
       font-weight: bold;
 
@@ -28,7 +28,7 @@ export const AddButtonStyled = styled.div `
         align-items: center;
         position: relative;
         border: 1px solid var(--primary-main);
-        border-radius: 4px;
+        border-radius: var(--s-border-radius);
         cursor: pointer;
         padding: 0.75rem 1rem;
         margin-right: 1rem;

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

@@ -19,7 +19,7 @@ export const AddButtonStyled = styled.div`
     &__inner {
       display: inline-block;
       color: var(--primary-main);
-      border-radius: var(--global-border-radius);
+      border-radius: var(--s-border-radius);
       transition: all 0.3s ease;
       font-weight: bold;
 
@@ -29,7 +29,7 @@ export const AddButtonStyled = styled.div`
         align-items: center;
         position: relative;
         border: 1px solid var(--primary-main);
-        border-radius: 4px;
+        border-radius: var(--s-border-radius);
         cursor: pointer;
         padding: 0.75rem 1rem;
         margin-right: 1rem;

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

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 export const BaseBoxStyled = styled.div `
   display: block;
   padding: 1rem;
-  border-radius: 4px;
+  border-radius: var(--s-border-radius);
   border: 1px solid;
 
   &.base-box {

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

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 export const BaseBoxStyled = styled.div`
   display: block;
   padding: 1rem;
-  border-radius: 4px;
+  border-radius: var(--s-border-radius);
   border: 1px solid;
 
   &.base-box {

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

@@ -8,9 +8,9 @@ export const BenefitRatafiaCardStyled = styled.div `
   align-self: stretch;
 
   padding: 1.5rem;
-  gap: 1rem;
+  gap: var(--global-gap);
 
-  border-radius: 4px;
+  border-radius: var(--s-border-radius);
   background: rgba(255, 255, 255, 0.8);
   box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
 
@@ -28,7 +28,7 @@ export const BenefitRatafiaCardStyled = styled.div `
       padding: 0.25rem;
       gap: 0.625rem;
 
-      border-radius: 4px;
+      border-radius: var(--s-border-radius);
       background: rgba(255, 255, 255, 0.8);
       box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
 

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

@@ -9,9 +9,9 @@ export const BenefitRatafiaCardStyled = styled.div`
   align-self: stretch;
 
   padding: 1.5rem;
-  gap: 1rem;
+  gap: var(--global-gap);
 
-  border-radius: 4px;
+  border-radius: var(--s-border-radius);
   background: rgba(255, 255, 255, 0.8);
   box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
 
@@ -29,7 +29,7 @@ export const BenefitRatafiaCardStyled = styled.div`
       padding: 0.25rem;
       gap: 0.625rem;
 
-      border-radius: 4px;
+      border-radius: var(--s-border-radius);
       background: rgba(255, 255, 255, 0.8);
       box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
 

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

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 export const BillCardStyled = styled.div `
   background-color: var(--neutral-neutral-6);
   border: 1px solid var(--neutral-neutral-4);
-  border-radius: var(--global-border-radius);
+  border-radius: var(--s-border-radius);
   display: flex;
   flex-direction: column;
   padding: 1rem 1rem;

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

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 export const BillCardStyled = styled.div`
   background-color: var(--neutral-neutral-6);
   border: 1px solid var(--neutral-neutral-4);
-  border-radius: var(--global-border-radius);
+  border-radius: var(--s-border-radius);
   display: flex;
   flex-direction: column;
   padding: 1rem 1rem;

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

@@ -4,7 +4,7 @@ export const BottomOverlayMenuStyled = styled.div `
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  padding: 16px 24px;
+  padding: 1rem 1.5rem;
   background-color: var(--others-white);
   box-shadow: 0 2px 6px 0 var(--primary-main-dark-1);
   color: black;

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

@@ -5,7 +5,7 @@ export const BottomOverlayMenuStyled = styled.div`
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  padding: 16px 24px;
+  padding: 1rem 1.5rem;
   background-color: var(--others-white);
   box-shadow: 0 2px 6px 0 var(--primary-main-dark-1);
   color: black;

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

@@ -15,7 +15,7 @@ html[data-theme='lawdistrict'] {
   padding: 0.5rem 1rem;
   align-items: center;
   align-self: center;
-  border-radius: var(--global-border-radius);
+  border-radius: var(--s-border-radius);
   text-align: center;
   text-decoration: none;
   cursor: pointer;
@@ -146,7 +146,7 @@ html[data-theme='lawdistrict'] {
     &-icon {
       display: flex;
       justify-content: center;
-      border-radius: var(--global-border-radius);
+      border-radius: var(--s-border-radius);
       border: 2px solid var(--neutral-neutral-2);
       background-color: var(--neutral-neutral-5);
 
@@ -233,7 +233,7 @@ html[data-theme='lawdistrict'] {
   font-size: 14px;
   font-weight: bold;
   justify-content: center;
-  border-radius: var(--global-border-radius);
+  border-radius: var(--s-border-radius);
   border: 2px solid var(--neutral-neutral-2);
   background-color: var(--neutral-neutral-6);
 
@@ -282,10 +282,6 @@ html[data-theme='lawdistrict'] {
   }
 }
 
-.button--small {
-  line-height: 1;
-}
-
 .button--tertiary-2 {
   background-color: transparent;
   border: 1px solid get-color(neutral, neutral-3);

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

@@ -3,7 +3,7 @@
 
 .button-icon {
   background: none;
-  border-radius: var(--global-border-radius);
+  border-radius: var(--s-border-radius);
   border: 1px solid var(--neutral-neutral-4);
   display: inline-flex;
   padding: 0.1875rem;

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

@@ -48,7 +48,7 @@ export const CardPaneStyled = styled.div `
         padding-right: 0;
         @media (min-width: #{$xxs}) and (max-width: #{$sm}) {
           text-align: left;
-          margin-top: 16px;
+          margin-top: 1rem;
         }
         .pane--title {
           font-size: 0.75rem;

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

@@ -49,7 +49,7 @@ export const CardPaneStyled = styled.div`
         padding-right: 0;
         @media (min-width: #{$xxs}) and (max-width: #{$sm}) {
           text-align: left;
-          margin-top: 16px;
+          margin-top: 1rem;
         }
         .pane--title {
           font-size: 0.75rem;

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

@@ -47,7 +47,7 @@ export const CheckboxStyled = styled.div `
         top: 0;
         height: 1.5rem;
         width: 1.5rem;
-        border-radius: var(--global-border-radius);
+        border-radius: var(--s-border-radius);
       }
 
       &:after {
@@ -98,7 +98,7 @@ export const CheckboxStyled = styled.div `
         &:before {
           background-color: var(--primary-main-light-5);
           border: 1.5px solid var(--primary-main);
-          border-radius: var(--global-border-radius);
+          border-radius: var(--s-border-radius);
         }
       }
     }

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

@@ -48,7 +48,7 @@ export const CheckboxStyled = styled.div`
         top: 0;
         height: 1.5rem;
         width: 1.5rem;
-        border-radius: var(--global-border-radius);
+        border-radius: var(--s-border-radius);
       }
 
       &:after {
@@ -99,7 +99,7 @@ export const CheckboxStyled = styled.div`
         &:before {
           background-color: var(--primary-main-light-5);
           border: 1.5px solid var(--primary-main);
-          border-radius: var(--global-border-radius);
+          border-radius: var(--s-border-radius);
         }
       }
     }

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

@@ -7,7 +7,7 @@ export const ContactCardStyled = styled.div `
     align-items: center;
     background-color: white;
     box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
-    border-radius: 0.25rem;
+    border-radius: var(--s-border-radius);
     min-width: 12.5rem;
     height: 7.875rem;
     flex-shrink: 0;

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

@@ -8,7 +8,7 @@ export const ContactCardStyled = styled.div`
     align-items: center;
     background-color: white;
     box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
-    border-radius: 0.25rem;
+    border-radius: var(--s-border-radius);
     min-width: 12.5rem;
     height: 7.875rem;
     flex-shrink: 0;

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

@@ -31,7 +31,7 @@ export const DatePickerCustomStyled = styled.div `
 
     .react-datepicker__input-container input {
       color: var(--neutral-main);
-      border-radius: 4px;
+      border-radius: var(--s-border-radius);
       font-size: 1rem;
       background-color: var(--neutral-neutral-4);
       height: 40px;

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

@@ -32,7 +32,7 @@ export const DatePickerCustomStyled = styled.div`
 
     .react-datepicker__input-container input {
       color: var(--neutral-main);
-      border-radius: 4px;
+      border-radius: var(--s-border-radius);
       font-size: 1rem;
       background-color: var(--neutral-neutral-4);
       height: 40px;

package/dist/src/components/atoms/DatePickerCustom/DatepickerPlugin.scss

@@ -61,11 +61,11 @@
   background-color: #f0f0f0;
   border-bottom: 1px solid #aeaeae;
   border-top-left-radius: 0.3rem;
-  padding: 8px 0;
+  padding: 0.5rem 0;
   position: relative;
 }
 .react-datepicker__header--time {
-  padding-bottom: 8px;
+  padding-bottom: 0.5rem;
   padding-left: 5px;
   padding-right: 5px;
 }
@@ -140,7 +140,7 @@ h2.react-datepicker__current-month {
   margin-right: auto;
 }
 .react-datepicker__navigation--years-previous {
-  top: 4px;
+  top: 0.25rem;
 }
 .react-datepicker__navigation--years-upcoming {
   top: -4px;
@@ -445,8 +445,8 @@ h2.react-datepicker__current-month {
   transform: translateX(-50%);
   background-color: #333;
   color: #fff;
-  padding: 4px;
-  border-radius: 4px;
+  padding: 0.25rem;
+  border-radius: var(--s-border-radius);
   white-space: nowrap;
   visibility: hidden;
   opacity: 0;
@@ -613,8 +613,8 @@ h2.react-datepicker__current-month {
   transform: translateX(-50%);
   background-color: #333;
   color: #fff;
-  padding: 4px;
-  border-radius: 4px;
+  padding: 0.25rem;
+  border-radius: var(--s-border-radius);
   white-space: nowrap;
   visibility: hidden;
   opacity: 0;