npm - @npm_leadtech/legal-lib-components - Versions diffs - 5.43.1 → 5.43.3 - Mend

@npm_leadtech/legal-lib-components 5.43.1 → 5.43.3

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.

Files changed (201) hide show

package/dist/css/styles.css CHANGED Viewed

@@ -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;
@@ -2259,7 +2258,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/src/components/atoms/AddButton/AddButton.styled.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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;
@@ -80,7 +80,6 @@ export const CardPaneStyled = styled.div `
       }
       &.pane--title--button {
         cursor: pointer;
-        color: var(--primary-main);
       }
     }
     &--description {

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

@@ -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;
@@ -81,7 +81,6 @@ export const CardPaneStyled = styled.div`
       }
       &.pane--title--button {
         cursor: pointer;
-        color: var(--primary-main);
       }
     }
     &--description {

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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;