@npm_leadtech/legal-lib-components 7.81.0 → 7.82.52

package/dist/css/styles.css

@@ -93,19 +93,6 @@ html {
   --box-shadow-container: 0px 2px 6px 0px rgba(var(--primary-main-dark-1-rgb), 0.25);
   --global-gap: 1rem;
 }
-html[data-theme=primaryblue] {
-  --font-sans: "Poppins", sans-serif;
-  --font-serif: "Poppins", serif;
-  --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);
-  --box-shadow-tippy-box: 0 0.25rem 0.5rem 0.25rem rgba(var(--primary-main-dark-1-rgb), 0.2);
-  --box-shadow-container: 0px 2px 6px 0px rgba(var(--primary-main-dark-1-rgb), 0.25);
-  --global-gap: 1rem;
-}
 *,
 *::before,
 *::after {
@@ -241,6 +228,8 @@ html {
   --snackbar-success-border: #34b2a7;
   --snackbar-reminder-bg: #f2bd6a;
   --snackbar-reminder-border: #cd9a4c;
+}
+html {
   --primary-main-light-6: #eff7f5;
   --primary-main-light-5: #e4f8f3;
   --primary-main-light-4: #c0f7e8;
@@ -275,10 +264,8 @@ html {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
-  --font-main: "Inter", sans-serif;
-  --font-secondary: "Lora", serif;
 }
-html[data-theme=secondaryorange] {
+html[data-theme=districtlaws] {
   --primary-main-light-6: #fff5ee;
   --primary-main-light-5: #ffe1cc;
   --primary-main-light-4: #ffc59b;
@@ -313,10 +300,8 @@ html[data-theme=secondaryorange] {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
-  --font-main: "Inter", sans-serif;
-  --font-secondary: "Lora", serif;
 }
-html[data-theme=secondaryblue] {
+html[data-theme=lawdistricts] {
   --primary-main-light-6: #f9f9ff;
   --primary-main-light-5: #eceeff;
   --primary-main-light-4: #c3c9ff;
@@ -351,10 +336,8 @@ html[data-theme=secondaryblue] {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
-  --font-main: "Inter", sans-serif;
-  --font-secondary: "Lora", serif;
 }
-html[data-theme=primarygreen] {
+html[data-theme=lawdistrict] {
   --primary-main-light-6: #eff7f5;
   --primary-main-light-5: #e4f8f3;
   --primary-main-light-4: #c0f7e8;
@@ -389,26 +372,24 @@ html[data-theme=primarygreen] {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
-  --font-main: "Inter", sans-serif;
-  --font-secondary: "Lora", serif;
 }
-html[data-theme=primarygreen] .document-status.--in-progress {
+html[data-theme=lawdistrict] .document-status.--in-progress {
   background-color: var(--secondary-main-light-4);
   border-color: var(--secondary-main-dark-1);
   color: var(--secondary-main-dark-2);
 }
-html[data-theme=primarygreen] .document-status.--in-progress svg g > g {
+html[data-theme=lawdistrict] .document-status.--in-progress svg g > g {
   fill: var(--secondary-main-dark-2);
 }
-html[data-theme=primarygreen] .document-status.--is-new {
+html[data-theme=lawdistrict] .document-status.--is-new {
   background-color: var(--secondary-main-dark-2);
   border-color: var(--secondary-main);
   color: var(--secondary-main-light-4);
 }
-html[data-theme=primarygreen] .document-status.--is-new .icon {
+html[data-theme=lawdistrict] .document-status.--is-new .icon {
   margin-right: 1.4rem;
 }
-html[data-theme=secondarypurple] {
+html[data-theme=lawsdistrict] {
   --primary-main-light-6: #f9f5ff;
   --primary-main-light-5: #e3d1ff;
   --primary-main-light-4: #b68aff;
@@ -443,10 +424,8 @@ html[data-theme=secondarypurple] {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
-  --font-main: "Inter", sans-serif;
-  --font-secondary: "Lora", serif;
 }
-html[data-theme=secondarygreen] {
+html[data-theme=lawdistrictinfo] {
   --primary-main-light-6: #f1fff7;
   --primary-main-light-5: #d5ffe6;
   --primary-main-light-4: #6affa5;
@@ -481,10 +460,8 @@ html[data-theme=secondarygreen] {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
-  --font-main: "Inter", sans-serif;
-  --font-secondary: "Lora", serif;
 }
-html[data-theme=secondarybrown] {
+html[data-theme=uslawdistrict] {
   --primary-main-light-6: #fffbf2;
   --primary-main-light-5: #fff6e5;
   --primary-main-light-4: #ffe6b7;
@@ -519,10 +496,8 @@ html[data-theme=secondarybrown] {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
-  --font-main: "Inter", sans-serif;
-  --font-secondary: "Lora", serif;
 }
-html[data-theme=secondaryyellow] {
+html[data-theme=lawdistrictonline] {
   --primary-main-light-6: #f9ffea;
   --primary-main-light-5: #f0ffc4;
   --primary-main-light-4: #e6ff9f;
@@ -557,63 +532,6 @@ html[data-theme=secondaryyellow] {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
-  --font-main: "Inter", sans-serif;
-  --font-secondary: "Lora", serif;
-}
-html[data-theme=primaryblue] {
-  --button: #1039f5;
-  --button-secondary: #1039f5;
-  --button-hover: #3970ff;
-  --button-tertiary: #3970ff;
-  --button-2: #07144b;
-  --button-4: #07144b;
-  --button-2-hover: #163399;
-  --button-4-hover: #163399;
-  --snackbar-success-color: #163399;
-  --button-4-color: #e9f5ff;
-  --button-secondary-hover: #d7ecff;
-  --feeback-success: #d7ecff;
-  --button-tertiary-hover: #b7daff;
-  --snackbar-success-bg: #8bc1ff;
-  --snackbar-success-border: #5e99ff;
-  --snackbar-reminder-bg: #f98116;
-  --snackbar-reminder-border: #ea660c;
-  --primary-main-light-6: #e9f5ff;
-  --primary-main-light-5: #d7ecff;
-  --primary-main-light-4: #b7daff;
-  --primary-main-light-3: #8bc1ff;
-  --primary-main-light-2: #5e99ff;
-  --primary-main-light-1: #1039f5;
-  --primary-main: #3970ff;
-  --primary-main-dark-1: #163399;
-  --primary-main-dark-1-rgb:
-    2,
-    55,
-    74;
-  --primary-main-dark-2: #07144b;
-  --secondary-main-light-5: #fff6ed;
-  --secondary-main-light-4: #fff0d5;
-  --secondary-main-light-3: #fedcaa;
-  --secondary-main-light-2: #fdc374;
-  --secondary-main-light-1: #fb9e3c;
-  --secondary-main: #f98116;
-  --secondary-main-dark-1: #ea660c;
-  --secondary-main-dark-2: #d3530d;
-  --neutral-main: #1f2532;
-  --neutral-neutral-1: #2f3a4b;
-  --neutral-neutral-2: #496080;
-  --neutral-neutral-3: #b5babd;
-  --neutral-neutral-4: #d2d9e5;
-  --neutral-neutral-5: #ebeef3;
-  --neutral-neutral-6: #f5f7fa;
-  --error-main: #d63737;
-  --error-error-2: #f09d9e;
-  --error-error-3: #ffecef;
-  --others-white: #ffffff;
-  --others-disabled: #6b7280;
-  --others-black: #000;
-  --font-main: "Poppins", sans-serif;
-  --font-secondary: "Poppins", sans-serif;
 }
 body {
   min-height: calc(100vh - 3.25rem);
@@ -740,17 +658,17 @@ body {
   background:
     radial-gradient(
       90.31% 103.09% at 74.2% -62.04%,
-      var(--primary-main-dark-2) 0%,
-      var(--primary-main-dark-1) 100%),
+      rgba(7, 128, 128, 0.3) 0%,
+      #062f3c 100%),
     radial-gradient(
       80.63% 44.37% at 73.54% 70.76%,
-      var(--primary-main) 0%,
-      var(--primary-main-dark-2) 100%),
+      #078080 0%,
+      #052a37 100%),
     radial-gradient(
       92.19% 33.51% at 0% 0%,
-      var(--primary-main) 0%,
-      var(--primary-main-dark-1) 100%),
-    var(--primary-main-dark-2);
+      #078080 0%,
+      #042b39 100%),
+    #032a38;
   background-blend-mode:
     lighten,
     lighten,
@@ -859,7 +777,7 @@ body {
 .serif.--normal-weight {
   font-weight: normal;
 }
-html[data-theme=primarygreen] .e-button.--primary-3 {
+html[data-theme=lawdistrict] .e-button.--primary-3 {
   color: var(--neutral-main);
 }
 .e-button {
@@ -919,7 +837,7 @@ html[data-theme=primarygreen] .e-button.--primary-3 {
   border: 2px solid var(--button);
   color: var(--others-white);
   font-weight: bold;
-  max-height: 100%;
+  height: 100%;
 }
 .e-button.--primary-1:hover {
   background-color: var(--button-hover);
@@ -1852,7 +1770,7 @@ h2.react-datepicker__current-month {
 .e-radio .label {
   color: var(--neutral-neutral-1);
   display: block;
-  margin: 1rem 0;
+  margin-bottom: 1rem;
 }
 .e-radio.default .e-radio__inner {
   display: flex;
@@ -1921,9 +1839,6 @@ h2.react-datepicker__current-month {
     padding: 16px 15px;
   }
 }
-.e-radio.tabs {
-  margin-top: 1rem;
-}
 .e-radio.tabs .e-radio__inner {
   display: flex;
 }
@@ -1937,7 +1852,7 @@ h2.react-datepicker__current-month {
   display: flex;
   height: 42px;
   justify-content: center;
-  min-width: 80px;
+  width: 80px;
 }
 .e-radio.tabs .e-radio__inner .radio-item-container:hover {
   background: var(--neutral-neutral-4);
@@ -2116,9 +2031,6 @@ h2.react-datepicker__current-month {
   margin-bottom: 1rem;
   position: relative;
 }
-.e-text .e-text-input__short {
-  width: 50%;
-}
 .e-text input {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -2157,9 +2069,6 @@ h2.react-datepicker__current-month {
   color: var(--neutral-neutral-1);
   font-weight: bold;
 }
-.e-text .e-text__inner {
-  grid-row: 1;
-}
 .e-text .form-group__label-icon {
   color: var(--neutral-neutral-1);
   font-weight: bold;
@@ -2201,10 +2110,9 @@ h2.react-datepicker__current-month {
 .e-text--is-invalid .e-text__error {
   display: flex;
   align-content: center;
-  color: var(--error-main);
-  align-items: center;
-  height: fit-content;
+  bottom: -5.5rem;
   margin-top: 0.5rem;
+  color: var(--error-main);
 }
 .e-text--is-invalid .e-text__error-icon {
   display: flex;
@@ -2243,37 +2151,6 @@ h2.react-datepicker__current-month {
   outline: none;
   background-color: var(--neutral-neutral-6);
 }
-.e-text--has-prefix {
-  width: 100%;
-  display: grid;
-  grid-template-columns: 1fr;
-}
-@media (min-width: 575px) {
-  .e-text--has-prefix {
-    width: 50%;
-  }
-}
-.e-text--has-prefix .tooltip-form {
-  grid-row: 3;
-}
-.e-text--has-prefix .has-currency-prefix {
-  padding-left: 2rem;
-  grid-column: 1;
-  grid-row: 2;
-  align-self: center;
-}
-.e-text--has-prefix .has-currency-suffix {
-  padding-right: 2rem;
-  grid-column: 1;
-  grid-row: 2;
-  align-self: center;
-}
-.e-text--has-prefix .has-percent-suffix {
-  padding-left: 0.75rem;
-  grid-column: 1;
-  grid-row: 2;
-  align-self: center;
-}
 .e-text .input-icon {
   position: absolute;
   transform: translate(-15%, -65%);
@@ -2285,33 +2162,9 @@ h2.react-datepicker__current-month {
   position: absolute;
   right: 0px;
   bottom: 6px;
-  top: 2.5rem;
-  height: fit-content;
   background: none;
   border: none;
 }
-.e-text .input-icon-currency-suffix {
-  grid-column: 1;
-  grid-row: 2;
-  align-self: center;
-  margin-left: calc(100% - 30px);
-  width: fit-content;
-}
-.e-text .input-icon-currency-prefix {
-  grid-column: 1;
-  grid-row: 2;
-  align-self: center;
-  z-index: 1;
-  padding-left: 0.87rem;
-  width: fit-content;
-}
-.e-text .input-icon-percent-suffix {
-  grid-column: 1;
-  grid-row: 2;
-  align-self: center;
-  margin-left: calc(100% - 30px);
-  width: fit-content;
-}
 .e-text .formgroup--input__button {
   align-self: flex-start;
   font-size: 0.75rem;

package/dist/images/componentsSvg/RatafiaIcon24px.d.ts

@@ -0,0 +1,6 @@
+import { type FC } from 'react';
+interface RatafiaIcon24pxProps {
+    className: string;
+}
+export declare const RatafiaIcon24px: FC<RatafiaIcon24pxProps>;
+export {};

package/dist/images/componentsSvg/RatafiaIcon24px.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const RatafiaIcon24px = ({ className }) => (_jsx("svg", { width: '17', height: '16', viewBox: '0 0 17 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: _jsx("g", { id: 'Icon/Symbol/AI_24px', children: _jsx("path", { id: 'path', fillRule: 'evenodd', clipRule: 'evenodd', d: 'M13.6732 1.14034C13.4454 0.509208 12.5528 0.509208 12.3251 1.14034L11.9922 2.06282C11.9198 2.26336 11.7619 2.42127 11.5614 2.49363L10.6389 2.82651C10.0078 3.05426 10.0078 3.94684 10.6389 4.17458L11.5614 4.50746C11.7619 4.57982 11.9198 4.73773 11.9922 4.93827L12.3251 5.86075C12.5528 6.49189 13.4454 6.49188 13.6732 5.86075L14.006 4.93827C14.0784 4.73773 14.2363 4.57982 14.4369 4.50746L15.3593 4.17458C15.9905 3.94684 15.9905 3.05426 15.3593 2.82651L14.4369 2.49363C14.2363 2.42127 14.0784 2.26336 14.006 2.06282L13.6732 1.14034ZM8.53354 4.24146C8.07805 2.97919 6.29289 2.97919 5.8374 4.24146L5.07821 6.34533C4.93348 6.74641 4.61768 7.06222 4.21659 7.20695L2.11272 7.96613C0.850447 8.42162 0.850449 10.2068 2.11272 10.6623L4.21659 11.4215C4.61768 11.5662 4.93348 11.882 5.07821 12.2831L5.8374 14.387C6.29289 15.6492 8.07805 15.6492 8.53354 14.387L9.29272 12.2831C9.43745 11.882 9.75326 11.5662 10.1543 11.4215L12.2582 10.6623C13.5205 10.2068 13.5205 8.42162 12.2582 7.96613L10.1543 7.20695C9.75326 7.06222 9.43745 6.74641 9.29272 6.34533L8.53354 4.24146Z', fill: '#078080' }) }) }));

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

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

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BenefitRatafiaCardStyled } from './BenefitRatafiaCard.styled';
+export const BenefitRatafiaCard = ({ title, image, description }) => {
+    return (_jsxs(BenefitRatafiaCardStyled, { className: 'benefit-ratafia-card', children: [image !== null && _jsx("div", { className: 'benefit-ratafia-card__icon', children: image }), _jsxs("div", { className: 'benefit-ratafia-card__content', children: [_jsx("h3", { className: 'sans-serif --big --bold-weight benefit-ratafia-card__content__title', children: title }), _jsx("p", { className: 'sans-serif --medium benefit-ratafia-card__content__description', children: description })] })] }));
+};
+export default BenefitRatafiaCard;

package/dist/src/components/atoms/{ContactInformationHeader/ContactInformationHeader.styled.d.ts → BenefitRatafiaCard/BenefitRatafiaCard.styled.d.ts}

@@ -1 +1 @@
-export declare const ContactInformationStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const BenefitRatafiaCardStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/src/components/atoms/{BenefitCard/BenefitCardStyled.styled.js → BenefitRatafiaCard/BenefitRatafiaCard.styled.js}

@@ -1,6 +1,6 @@
 import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
-export const BenefitCardStyled = styled.div `
+export const BenefitRatafiaCardStyled = styled.div `
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -12,10 +12,7 @@ export const BenefitCardStyled = styled.div `
 
   border-radius: var(--s-border-radius);
   background: rgba(255, 255, 255, 0.8);
-
-  &.has-shadow {
-    box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
-  }
+  box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
 
   @media ${device['landscape-tablets']} {
     flex-direction: row;
@@ -24,7 +21,7 @@ export const BenefitCardStyled = styled.div `
     flex-direction: column;
   }
 
-  .benefit-card {
+  .benefit-ratafia-card {
     &__icon {
       display: flex;
       align-items: flex-start;
@@ -33,9 +30,11 @@ export const BenefitCardStyled = styled.div `
 
       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);
 
-      &.has-shadow {
-        box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
+      img {
+        min-width: 32px;
+        min-height: 32px;
       }
     }
     &__content {

package/dist/src/components/atoms/{BenefitCard/BenefitCardStyled.styled.ts → BenefitRatafiaCard/BenefitRatafiaCard.styled.ts}

@@ -1,7 +1,7 @@
 import { device } from '../../../globalStyles/breakpoints'
 import styled from 'styled-components'
 
-export const BenefitCardStyled = styled.div`
+export const BenefitRatafiaCardStyled = styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -13,10 +13,7 @@ export const BenefitCardStyled = styled.div`
 
   border-radius: var(--s-border-radius);
   background: rgba(255, 255, 255, 0.8);
-
-  &.has-shadow {
-    box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
-  }
+  box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
 
   @media ${device['landscape-tablets']} {
     flex-direction: row;
@@ -25,7 +22,7 @@ export const BenefitCardStyled = styled.div`
     flex-direction: column;
   }
 
-  .benefit-card {
+  .benefit-ratafia-card {
     &__icon {
       display: flex;
       align-items: flex-start;
@@ -34,9 +31,11 @@ export const BenefitCardStyled = styled.div`
 
       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);
 
-      &.has-shadow {
-        box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
+      img {
+        min-width: 32px;
+        min-height: 32px;
       }
     }
     &__content {

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

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import { type BenefitRatafiaCardProps } from './BenefitRatafiaCardProps.types'
+import { BenefitRatafiaCardStyled } from './BenefitRatafiaCard.styled'
+
+export const BenefitRatafiaCard: React.FC<BenefitRatafiaCardProps> = ({ title, image, description }) => {
+  return (
+    <BenefitRatafiaCardStyled className='benefit-ratafia-card'>
+      {image !== null && <div className='benefit-ratafia-card__icon'>{image}</div>}
+      <div className='benefit-ratafia-card__content'>
+        <h3 className='sans-serif --big --bold-weight benefit-ratafia-card__content__title'>{title}</h3>
+        <p className='sans-serif --medium benefit-ratafia-card__content__description'>{description}</p>
+      </div>
+    </BenefitRatafiaCardStyled>
+  )
+}
+
+export default BenefitRatafiaCard

package/dist/src/components/atoms/BenefitRatafiaCard/BenefitRatafiaCardProps.types.d.ts

@@ -0,0 +1,6 @@
+export interface BenefitRatafiaCardProps {
+    id: string;
+    title: string;
+    image?: React.ReactNode;
+    description: string;
+}

package/dist/src/components/atoms/BenefitRatafiaCard/BenefitRatafiaCardProps.types.ts

@@ -0,0 +1,6 @@
+export interface BenefitRatafiaCardProps {
+  id: string
+  title: string
+  image?: React.ReactNode
+  description: string
+}

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

@@ -0,0 +1,2 @@
+export { default as BenefitRatafiaCard } from './BenefitRatafiaCard';
+export { type BenefitRatafiaCardProps } from './BenefitRatafiaCardProps.types';

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

@@ -0,0 +1 @@
+export { default as BenefitRatafiaCard } from './BenefitRatafiaCard';

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

@@ -0,0 +1,2 @@
+export { default as BenefitRatafiaCard } from './BenefitRatafiaCard'
+export { type BenefitRatafiaCardProps } from './BenefitRatafiaCardProps.types'

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

@@ -1,7 +1,7 @@
 @import '../../../globalStyles/variables.scss';
 @import '../../../globalStyles/mediaqueries.scss';
 
-html[data-theme='primarygreen'] {
+html[data-theme='lawdistrict'] {
   .e-button {
     &.--primary {
       &-3 {
@@ -73,7 +73,7 @@ html[data-theme='primarygreen'] {
       border: 2px solid var(--button);
       color: get-color(others, white);
       font-weight: bold;
-      max-height: 100%;
+      height: 100%;
 
       &:hover {
         background-color: var(--button-hover);

package/dist/src/components/atoms/Button/ButtonProps.types.d.ts

@@ -1,4 +1,3 @@
-export type Colors = 'primary' | 'primary2' | 'primary3' | 'primary4' | 'secondary' | 'secondary2' | 'secondary3' | 'secondary4' | 'secondaryIcon' | 'secondaryIconBold' | 'secondaryIconDark' | 'tertiary' | 'tertiary2' | 'styleless' | 'transparent';
 export interface ButtonProps {
     label: string;
     dataQa: string;
@@ -9,7 +8,7 @@ export interface ButtonProps {
     noLinkNoFunc?: boolean;
     onClick?: (functionParameters?: any) => void;
     functionParameters?: any;
-    color?: Colors;
+    color?: 'primary' | 'primary2' | 'primary3' | 'primary4' | 'secondary' | 'secondary2' | 'secondary3' | 'secondary4' | 'secondaryIcon' | 'secondaryIconBold' | 'secondaryIconDark' | 'tertiary' | 'tertiary2' | 'styleless' | 'transparent';
     error?: boolean;
     disabled?: boolean;
     fluid?: boolean;

package/dist/src/components/atoms/Button/ButtonProps.types.js

@@ -1,2 +1 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 export {};

package/dist/src/components/atoms/Button/ButtonProps.types.ts

@@ -1,21 +1,4 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-
-export type Colors =
-  | 'primary'
-  | 'primary2'
-  | 'primary3'
-  | 'primary4'
-  | 'secondary'
-  | 'secondary2'
-  | 'secondary3'
-  | 'secondary4'
-  | 'secondaryIcon'
-  | 'secondaryIconBold'
-  | 'secondaryIconDark'
-  | 'tertiary'
-  | 'tertiary2'
-  | 'styleless'
-  | 'transparent'
 export interface ButtonProps {
   label: string
   dataQa: string
@@ -26,7 +9,22 @@ export interface ButtonProps {
   noLinkNoFunc?: boolean
   onClick?: (functionParameters?: any) => void
   functionParameters?: any
-  color?: Colors
+  color?:
+    | 'primary'
+    | 'primary2'
+    | 'primary3'
+    | 'primary4'
+    | 'secondary'
+    | 'secondary2'
+    | 'secondary3'
+    | 'secondary4'
+    | 'secondaryIcon'
+    | 'secondaryIconBold'
+    | 'secondaryIconDark'
+    | 'tertiary'
+    | 'tertiary2'
+    | 'styleless'
+    | 'transparent'
   error?: boolean
   disabled?: boolean
   fluid?: boolean

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

@@ -80,7 +80,7 @@ export const CardPaneStyled = styled.div `
       }
       &.pane--title--button {
         cursor: pointer;
-        color: --neutral-neutral-2;
+        color: var(--primary-main);
       }
     }
     &--description {
@@ -93,12 +93,10 @@ export const CardPaneStyled = styled.div `
 
       &--active {
         color: var(--primary-main);
-        font-weight: 700;
       }
 
       &--inactive {
         color: var(--error-main);
-        font-weight: 700;
       }
     }
 
@@ -108,10 +106,16 @@ export const CardPaneStyled = styled.div `
   }
   .marker {
     display: inline-block;
-    margin-left: 0px;
+    margin-left: -10px;
+    @-moz-document url-prefix() {
+      margin-left: 0px;
+    }
+    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+      margin-left: 0px;
+    }
   }
   .position {
-    margin-left: 0px;
+    margin-left: 2px;
     @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
       margin-left: 15px;
     }