@axa-fr/design-system-look-and-feel-css 0.1.1

package/dist/Form/Select/Select.scss

@@ -0,0 +1,116 @@
+@use "../../common/common" as common;
+@use "../../common/grid";
+@use "../../common/reboot";
+
+.af-form {
+  &__select {
+    &-label {
+      margin-bottom: 0.5rem;
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: common.$color-gray-900;
+    }
+
+    &-single-value {
+      color: common.$color-gray-900;
+
+      &-disabled {
+        color: common.$color-gray-500;
+      }
+    }
+
+    &-error {
+      display: flex;
+      margin-top: 0.5rem;
+      gap: 0.5rem;
+      color: common.$color-red-700;
+
+      &-icon {
+        path {
+          fill: common.$color-red-700;
+        }
+      }
+    }
+  }
+
+  &__input-select {
+    min-height: unset !important;
+    font-size: 1rem;
+    color: common.$color-gray-700;
+
+    &-container {
+      padding: 0.75rem 1rem;
+      border: 1px solid common.$color-gray-700;
+      border-radius: common.$default-border-radius;
+      color: common.$color-gray-700;
+      background-color: common.$color-white;
+
+      &-error {
+        border-width: 2px;
+        border-color: common.$color-red-700;
+
+        &:hover,
+        &:active {
+          box-shadow: 0 0 0 1px common.$color-red-700 inset !important;
+        }
+      }
+
+      &:hover,
+      &:active {
+        box-shadow: 0 0 0 2px common.$color-axa inset;
+      }
+
+      &-focused,
+      &:focus-visible {
+        box-shadow: 0 0 0 2px common.$color-axa inset;
+        outline: 2px solid common.$color-focus;
+        outline-offset: 3px;
+      }
+
+      &-disabled {
+        border-color: common.$color-gray-400;
+        background-color: common.$color-gray-200;
+      }
+
+      &-icon {
+        &-disabled {
+          path {
+            fill: common.$color-gray-500;
+          }
+        }
+      }
+    }
+
+    &-menu {
+      margin-top: 0.4rem;
+      margin-left: -1rem;
+      background-color: common.$color-white;
+      box-shadow: 0 4px 16px -2px #00008f40;
+
+      &-options {
+        padding: 0.75rem 1rem;
+        border: 1px solid transparent;
+        font-weight: 400;
+        color: common.$color-gray-900;
+        box-shadow: none;
+
+        &-selected {
+          font-weight: 600;
+          color: common.$color-axa;
+        }
+
+        &-focused {
+          border: 1px solid common.$color-axa;
+        }
+
+        &:nth-child(odd) {
+          background-color: common.$color-blue-2;
+        }
+
+        &:nth-child(even) {
+          background-color: common.$color-white;
+        }
+      }
+    }
+  }
+}

package/dist/Form/Text/Text.css

@@ -0,0 +1 @@
+.af-form__input-container{align-items:flex-start;display:flex;flex-direction:column}.af-form__input-label{color:#333;font-size:1rem;font-weight:600;line-height:1.25rem}@media (width > 1023px){.af-form__input-label{font-size:1.125rem;line-height:1.5rem}}.af-form__input-description{color:#5f5f5f;font-size:.875rem;font-weight:400;line-height:1.125rem}@media (width > 1023px){.af-form__input-description{font-size:1rem;line-height:1.25rem}}.af-form__input-helper{color:#5f5f5f;font-size:.875rem;line-height:1.125rem;margin-top:.2rem}@media (width > 1023px){.af-form__input-helper{font-size:1rem;line-height:1.25rem}}.af-form__input-more{fill:#00008f}.af-form__input-more svg{height:1.25rem;width:1.25rem}.af-form__input-text{border:1px solid #5f5f5f;border-radius:4px;color:#333;font-size:1rem;line-height:1.25rem;margin-top:.5rem;padding:1rem 2.5rem 1rem 1rem}@media (width > 1023px){.af-form__input-text{font-size:1.125rem;line-height:1.5rem}}.af-form__input-text--error{border:2px solid #c91432}.af-form__input-text:enabled:active,.af-form__input-text:enabled:focus{border:1px solid #00008f;outline:none}.af-form__input-text:not(:disabled,:focus,:active,.af-form__input-text--error):hover{border:2px solid #00008f;outline:none}

package/dist/Form/Text/Text.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Form/Text/Text.scss%23sass","../../../src/Form/Text/Text.scss"],"names":[],"mappings":"AAGE,0BAGE,sBAAA,CAFA,YAAA,CCFJ,qBAEA,CDKE,sBAIE,UAAA,CAHA,cAAA,CACA,eAAA,CACA,mBCFJ,CDKI,wBANF,sBAOI,kBAAA,CACA,kBCFJ,CACF,CDKE,4BAIE,aAAA,CAHA,iBAAA,CACA,eAAA,CACA,oBCFJ,CDKI,wBANF,4BAOI,cAAA,CACA,mBCFJ,CACF,CDKE,uBAIE,aAAA,CAFA,iBAAA,CACA,oBAAA,CAFA,gBCAJ,CDKI,wBANF,uBAOI,cAAA,CACA,mBCFJ,CACF,CDKE,qBACE,YCHJ,CDKI,yBAEE,cAAA,CADA,aCFN,CDOE,qBAGE,wBAAA,CACA,iBAAA,CAGA,UAAA,CAFA,cAAA,CACA,mBAAA,CALA,gBAAA,CACA,6BCAJ,CDOI,wBATF,qBAUI,kBAAA,CACA,kBCJJ,CACF,CDMI,4BACE,wBCJN,CDQM,uEAEE,wBAAA,CACA,YCPR,CDWI,qFACE,wBAAA,CACA,YCTN","file":"Text.css","sourcesContent":["@use \"../../common/common\" as common;\n\n.af-form {\n  &__input-container {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  &__input-label {\n    font-size: common.rem(16);\n    font-weight: 600;\n    line-height: common.rem(20);\n    color: common.$color-gray-900;\n\n    @media (width > #{common.$breakpoint-md}) {\n      font-size: common.rem(18);\n      line-height: common.rem(24);\n    }\n  }\n\n  &__input-description {\n    font-size: common.rem(14);\n    font-weight: 400;\n    line-height: common.rem(18);\n    color: common.$color-gray-700;\n\n    @media (width > #{common.$breakpoint-md}) {\n      font-size: common.rem(16);\n      line-height: common.rem(20);\n    }\n  }\n\n  &__input-helper {\n    margin-top: 0.2rem;\n    font-size: common.rem(14);\n    line-height: common.rem(18);\n    color: common.$color-gray-700;\n\n    @media (width > #{common.$breakpoint-md}) {\n      font-size: common.rem(16);\n      line-height: common.rem(20);\n    }\n  }\n\n  &__input-more {\n    fill: common.$color-axa;\n\n    svg {\n      width: 1.25rem;\n      height: 1.25rem;\n    }\n  }\n\n  &__input-text {\n    margin-top: 0.5rem;\n    padding: 1rem 2.5rem 1rem 1rem;\n    border: 1px solid common.$color-gray;\n    border-radius: common.$default-border-radius;\n    font-size: common.rem(16);\n    line-height: common.rem(20);\n    color: common.$color-gray-900;\n\n    @media (width > #{common.$breakpoint-md}) {\n      font-size: common.rem(18);\n      line-height: common.rem(24);\n    }\n\n    &--error {\n      border: 2px solid common.$color-red-700;\n    }\n\n    &:enabled {\n      &:focus,\n      &:active {\n        border: 1px solid common.$color-axa;\n        outline: none;\n      }\n    }\n\n    &:not(:disabled, :focus, :active, &--error):hover {\n      border: 2px solid common.$color-axa;\n      outline: none;\n    }\n  }\n}\n","@use \"../../common/common\" as common;\n\n.af-form {\n  &__input-container {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  &__input-label {\n    font-size: common.rem(16);\n    font-weight: 600;\n    line-height: common.rem(20);\n    color: common.$color-gray-900;\n\n    @media (width > #{common.$breakpoint-md}) {\n      font-size: common.rem(18);\n      line-height: common.rem(24);\n    }\n  }\n\n  &__input-description {\n    font-size: common.rem(14);\n    font-weight: 400;\n    line-height: common.rem(18);\n    color: common.$color-gray-700;\n\n    @media (width > #{common.$breakpoint-md}) {\n      font-size: common.rem(16);\n      line-height: common.rem(20);\n    }\n  }\n\n  &__input-helper {\n    margin-top: 0.2rem;\n    font-size: common.rem(14);\n    line-height: common.rem(18);\n    color: common.$color-gray-700;\n\n    @media (width > #{common.$breakpoint-md}) {\n      font-size: common.rem(16);\n      line-height: common.rem(20);\n    }\n  }\n\n  &__input-more {\n    fill: common.$color-axa;\n\n    svg {\n      width: 1.25rem;\n      height: 1.25rem;\n    }\n  }\n\n  &__input-text {\n    margin-top: 0.5rem;\n    padding: 1rem 2.5rem 1rem 1rem;\n    border: 1px solid common.$color-gray;\n    border-radius: common.$default-border-radius;\n    font-size: common.rem(16);\n    line-height: common.rem(20);\n    color: common.$color-gray-900;\n\n    @media (width > #{common.$breakpoint-md}) {\n      font-size: common.rem(18);\n      line-height: common.rem(24);\n    }\n\n    &--error {\n      border: 2px solid common.$color-red-700;\n    }\n\n    &:enabled {\n      &:focus,\n      &:active {\n        border: 1px solid common.$color-axa;\n        outline: none;\n      }\n    }\n\n    &:not(:disabled, :focus, :active, &--error):hover {\n      border: 2px solid common.$color-axa;\n      outline: none;\n    }\n  }\n}\n"]}

package/dist/Form/Text/Text.scss

@@ -0,0 +1,86 @@
+@use "../../common/common" as common;
+
+.af-form {
+  &__input-container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  &__input-label {
+    font-size: common.rem(16);
+    font-weight: 600;
+    line-height: common.rem(20);
+    color: common.$color-gray-900;
+
+    @media (width > #{common.$breakpoint-md}) {
+      font-size: common.rem(18);
+      line-height: common.rem(24);
+    }
+  }
+
+  &__input-description {
+    font-size: common.rem(14);
+    font-weight: 400;
+    line-height: common.rem(18);
+    color: common.$color-gray-700;
+
+    @media (width > #{common.$breakpoint-md}) {
+      font-size: common.rem(16);
+      line-height: common.rem(20);
+    }
+  }
+
+  &__input-helper {
+    margin-top: 0.2rem;
+    font-size: common.rem(14);
+    line-height: common.rem(18);
+    color: common.$color-gray-700;
+
+    @media (width > #{common.$breakpoint-md}) {
+      font-size: common.rem(16);
+      line-height: common.rem(20);
+    }
+  }
+
+  &__input-more {
+    fill: common.$color-axa;
+
+    svg {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+  }
+
+  &__input-text {
+    margin-top: 0.5rem;
+    padding: 1rem 2.5rem 1rem 1rem;
+    border: 1px solid common.$color-gray;
+    border-radius: common.$default-border-radius;
+    font-size: common.rem(16);
+    line-height: common.rem(20);
+    color: common.$color-gray-900;
+
+    @media (width > #{common.$breakpoint-md}) {
+      font-size: common.rem(18);
+      line-height: common.rem(24);
+    }
+
+    &--error {
+      border: 2px solid common.$color-red-700;
+    }
+
+    &:enabled {
+      &:focus,
+      &:active {
+        border: 1px solid common.$color-axa;
+        outline: none;
+      }
+    }
+
+    &:not(:disabled, :focus, :active, &--error):hover {
+      border: 2px solid common.$color-axa;
+      outline: none;
+    }
+  }
+}

package/dist/Form/core/FormCore.scss

@@ -0,0 +1 @@
+@use "../../common/common" as common;

package/dist/IconBg/IconBg.css

@@ -0,0 +1 @@
+.af-icon-bg{background-color:#fff;border-radius:.75rem;display:grid;height:min-content;padding:.75rem;width:min-content}.af-icon-bg svg{height:2rem;width:2rem;fill:#00008f}.af-icon-bg--secondary{background-color:#00008f}.af-icon-bg--secondary svg{fill:#fff}.af-icon-bg--disabled{background-color:#f3f3f3}.af-icon-bg--disabled svg{fill:#999}@media (width <= 667px){.af-icon-bg{padding:.5rem}}

package/dist/IconBg/IconBg.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/IconBg/IconBg.scss%23sass","../../src/IconBg/IconBg.scss"],"names":[],"mappings":"AAEA,YAME,qBAAA,CADA,oBAAA,CAJA,YAAA,CAEA,kBAAA,CACA,cAAA,CCJF,iBAKA,CDGE,gBAEE,WAAA,CADA,UAAA,CAEA,YCDJ,CDIE,uBACE,wBCFJ,CDII,2BACE,SCFN,CDME,sBACE,wBCJJ,CDMI,0BACE,SCJN,CDSA,wBACE,YACE,aCNF,CACF","file":"IconBg.css","sourcesContent":["@use \"../common/common\" as common;\n\n.af-icon-bg {\n  display: grid;\n  width: min-content;\n  height: min-content;\n  padding: 0.75rem;\n  border-radius: 0.75rem;\n  background-color: common.$color-white;\n\n  svg {\n    width: 2rem;\n    height: 2rem;\n    fill: common.$color-axa;\n  }\n\n  &--secondary {\n    background-color: common.$color-axa;\n\n    svg {\n      fill: common.$color-white;\n    }\n  }\n\n  &--disabled {\n    background-color: common.$color-gray-200;\n\n    svg {\n      fill: common.$color-gray-500;\n    }\n  }\n}\n\n@media (width <= #{common.$breakpoint-sm}) {\n  .af-icon-bg {\n    padding: 0.5rem;\n  }\n}\n","@use \"../common/common\" as common;\n\n.af-icon-bg {\n  display: grid;\n  width: min-content;\n  height: min-content;\n  padding: 0.75rem;\n  border-radius: 0.75rem;\n  background-color: common.$color-white;\n\n  svg {\n    width: 2rem;\n    height: 2rem;\n    fill: common.$color-axa;\n  }\n\n  &--secondary {\n    background-color: common.$color-axa;\n\n    svg {\n      fill: common.$color-white;\n    }\n  }\n\n  &--disabled {\n    background-color: common.$color-gray-200;\n\n    svg {\n      fill: common.$color-gray-500;\n    }\n  }\n}\n\n@media (width <= #{common.$breakpoint-sm}) {\n  .af-icon-bg {\n    padding: 0.5rem;\n  }\n}\n"]}

package/dist/IconBg/IconBg.scss

@@ -0,0 +1,38 @@
+@use "../common/common" as common;
+
+.af-icon-bg {
+  display: grid;
+  width: min-content;
+  height: min-content;
+  padding: 0.75rem;
+  border-radius: 0.75rem;
+  background-color: common.$color-white;
+
+  svg {
+    width: 2rem;
+    height: 2rem;
+    fill: common.$color-axa;
+  }
+
+  &--secondary {
+    background-color: common.$color-axa;
+
+    svg {
+      fill: common.$color-white;
+    }
+  }
+
+  &--disabled {
+    background-color: common.$color-gray-200;
+
+    svg {
+      fill: common.$color-gray-500;
+    }
+  }
+}
+
+@media (width <= #{common.$breakpoint-sm}) {
+  .af-icon-bg {
+    padding: 0.5rem;
+  }
+}

package/dist/Layout/Footer/Footer.css

@@ -0,0 +1 @@
+.af-footer{background-color:#4976ba;color:#fff;display:flex;flex-direction:column;justify-content:space-around;text-transform:uppercase;z-index:100}.af-footer__menuLinks{background:#0000;height:0;overflow:hidden;padding:0;transition:background 0s,padding 0s}.af-footer__menuLinks--display{height:auto;padding:0 2rem;transition:background .25s,padding 125ms}.af-footer__iconTrigger{align-self:center;justify-content:center;transform:rotate3d(var(--rotate-x,0),0,0,180deg)!important;transition:transform .25s ease-in-out!important}.af-footer__iconTrigger--display{--rotate-x:1}.af-footer__linkItem{color:#fff;display:block;padding:1.2rem 2.4rem;text-decoration:none}.af-footer__linkItem:hover{color:#000072}.af-footer__footerMenuIcons{border:1px solid #fff3;border-width:1px 0;display:flex;flex-direction:row;gap:2.4rem;justify-content:center;padding:1.6rem .8rem}.af-footer__menuIconLinks{align-self:center;color:#fff;fill:#fff}.af-footer__menuIconLinks:hover{color:#000072;fill:#000072}.af-footer__menuAboutTrigger{all:unset;box-sizing:border-box;display:flex;justify-content:space-between;padding:1.6rem 3.2rem;width:100%}.af-footer__menuAboutTriggerText{color:#fff;font-weight:700}.af-footer__footerBottom{padding:.8rem}.af-footer__textCopyright{font-size:.875rem}.af-footer__icon{align-self:center;height:16px;width:16px;fill:#fff}@media only screen and (width >= 1024px){.af-footer__menuLinks{background:#0000;display:flex;flex-direction:row;height:auto;justify-content:space-between;padding:1.2rem 0}.af-footer__menuLinks :first-child{border-left:unset}.af-footer__linkItem{align-self:center;border-left:1px solid #fff3;color:#fff;padding:0 1.6rem}.af-footer__footerMenuIcons{border:none;gap:1.6rem;padding:1.6rem 3.2rem 1.6rem .8rem}.af-footer__footerTop{margin:0 auto;max-width:128rem;width:100%}.af-footer__footerTop,.af-footer__menuTop{display:flex;flex-direction:row;justify-content:space-between}.af-footer__menuTop{padding:.8rem;text-decoration:none}.af-footer__menuAboutTrigger{display:none;padding:1.6rem 1.6rem 1.6rem 3.2rem}.af-footer__footerBottom{border-top:1px solid #fff3;padding:0;text-align:right}.af-footer__footerBottomWidth{margin:0 auto;max-width:128rem;width:100%}.af-footer__textCopyright{display:flex;justify-content:flex-end;padding:.8rem 3.2rem .8rem 0}}

package/dist/Layout/Footer/Footer.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Layout/Footer/Footer.scss%23sass","../../../src/common/common.scss","../../../src/Layout/Footer/Footer.scss"],"names":[],"mappings":"AAEA,WAOE,wBCoBgB,CDrBhB,UAAA,CENF,YAAA,CFGE,qBAAA,CACA,4BAAA,CACA,wBAAA,CAJA,WEKF,CFGE,sBAIE,gBAAA,CAHA,QAAA,CAEA,eAAA,CADA,SAAA,CAGA,mCEDJ,CFKI,+BACE,WAAA,CACA,cAAA,CACA,wCEHN,CFSE,wBACE,iBAAA,CACA,sBAAA,CACA,0DAAA,CACA,+CEPJ,CFSI,iCACE,YEPN,CFWE,qBAIE,UClCU,CD+BV,aAAA,CACA,qBAAA,CACA,oBERJ,CFWI,2BACE,aETN,CFaE,4BAIE,sBAAA,CAAA,kBAAA,CAHA,YAAA,CAIA,kBAAA,CAEA,UAAA,CADA,sBAAA,CAJA,oBENJ,CFcE,0BACE,iBAAA,CACA,UCrDU,CDsDV,SEZJ,CFcI,gCACE,aAAA,CACA,YEZN,CFgBE,6BACE,SAAA,CAEA,qBAAA,CADA,YAAA,CAIA,6BAAA,CADA,qBAAA,CADA,UEZJ,CFiBE,iCAEE,UAAA,CADA,eEdJ,CFkBE,yBACE,aEhBJ,CFmBE,0BACE,iBEjBJ,CFoBE,iBAGE,iBAAA,CADA,WAAA,CADA,UAAA,CAGA,SElBJ,CFsBA,yCAEI,sBAME,gBAAA,CE1BJ,YAAA,CFwBI,kBAAA,CAFA,WAAA,CElBJ,6BAAA,CAFA,gBAIA,CFsBI,mCEpBJ,iBACA,CFwBE,qBAGE,iBAAA,CADA,2BAAA,CAEA,UAAA,CAHA,gBEnBJ,CACF,4BAEA,WAAA,CACE,UAAA,CFsBI,kCErBJ,CF2BE,sBAIE,aAAA,CADA,gBAAA,CADA,UErBJ,CF4BE,0CARE,YAAA,CAIA,kBAAA,CACA,6BElBJ,CFqBE,oBAEE,aAAA,CAGA,oBE1BJ,CF6BE,6BACE,YAAA,CACA,mCE3BJ,CF+BE,yBAEE,0BAAA,CADA,SAAA,CAEA,gBE7BJ,CFgCE,8BAGE,aAAA,CADA,gBAAA,CADA,UE5BJ,CFiCE,0BACE,YAAA,CAEA,wBAAA,CADA,4BE9BJ,CACF","file":"Footer.css","sourcesContent":["@use \"../../common/common\" as common;\n\n.af-footer {\n  z-index: 100;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  text-transform: uppercase;\n  color: common.$color-white;\n  background-color: common.$color-oceanBlue;\n\n  &__menuLinks {\n    height: 0;\n    padding: 0;\n    overflow: hidden;\n    background: transparent;\n    transition:\n      background 0ms,\n      padding 0ms;\n\n    &--display {\n      height: auto;\n      padding: 0 2rem;\n      transition:\n        background 250ms,\n        padding 125ms;\n    }\n  }\n\n  &__iconTrigger {\n    align-self: center;\n    justify-content: center;\n    transform: rotate3d(var(--rotate-x, 0), 0, 0, 180deg) !important;\n    transition: transform 250ms ease-in-out !important;\n\n    &--display {\n      --rotate-x: 1;\n    }\n  }\n\n  &__linkItem {\n    display: block;\n    padding: 1.2rem common.$spacing-u3;\n    text-decoration: none;\n    color: common.$color-white;\n\n    &:hover {\n      color: common.$color-blue-1;\n    }\n  }\n\n  &__footerMenuIcons {\n    display: flex;\n    padding: common.$spacing-u2 common.$spacing-u1;\n    border: 1px solid rgba(255, 255, 255, 20%);\n    border-width: 1px 0;\n    flex-direction: row;\n    justify-content: center;\n    gap: common.$spacing-u3;\n  }\n\n  &__menuIconLinks {\n    align-self: center;\n    color: common.$color-white;\n    fill: common.$color-white;\n\n    &:hover {\n      color: common.$color-blue-1;\n      fill: common.$color-blue-1;\n    }\n  }\n\n  &__menuAboutTrigger {\n    all: unset;\n    display: flex;\n    box-sizing: border-box;\n    width: 100%;\n    padding: common.$spacing-u2 common.$spacing-u4;\n    justify-content: space-between;\n  }\n\n  &__menuAboutTriggerText {\n    font-weight: bold;\n    color: common.$color-white;\n  }\n\n  &__footerBottom {\n    padding: common.$spacing-u1;\n  }\n\n  &__textCopyright {\n    font-size: 0.875rem;\n  }\n\n  &__icon {\n    width: 16px;\n    height: 16px;\n    align-self: center;\n    fill: common.$color-white;\n  }\n}\n\n@media only screen and (width >= #{common.$screen-size-m}) {\n  .af-footer {\n    &__menuLinks {\n      display: flex;\n      height: auto;\n      padding: 1.2rem 0;\n      flex-direction: row;\n      justify-content: space-between;\n      background: transparent;\n\n      & :first-child {\n        border-left: unset;\n      }\n    }\n\n    &__linkItem {\n      padding: 0 common.$spacing-u2;\n      border-left: 1px solid rgba(255, 255, 255, 20%);\n      align-self: center;\n      color: common.$color-white;\n    }\n\n    &__footerMenuIcons {\n      padding: common.$spacing-u2 common.$spacing-u4 common.$spacing-u2\n        common.$spacing-u1;\n      border: none;\n      gap: common.$spacing-u2;\n    }\n\n    &__footerTop {\n      display: flex;\n      width: 100%;\n      max-width: 128rem;\n      margin: 0 auto;\n      flex-direction: row;\n      justify-content: space-between;\n    }\n\n    &__menuTop {\n      display: flex;\n      padding: common.$spacing-u1;\n      flex-direction: row;\n      justify-content: space-between;\n      text-decoration: none;\n    }\n\n    &__menuAboutTrigger {\n      display: none;\n      padding: common.$spacing-u2 common.$spacing-u2 common.$spacing-u2\n        common.$spacing-u4;\n    }\n\n    &__footerBottom {\n      padding: 0;\n      border-top: 1px solid rgba(255, 255, 255, 20%);\n      text-align: right;\n    }\n\n    &__footerBottomWidth {\n      width: 100%;\n      max-width: 128rem;\n      margin: 0 auto;\n    }\n\n    &__textCopyright {\n      display: flex;\n      padding: common.$spacing-u1 common.$spacing-u4 common.$spacing-u1 0;\n      justify-content: flex-end;\n    }\n  }\n}\n","@import \"./mixins\";\n\n$font-family-sans-serif: \"Source Sans Pro\", arial, sans-serif !default;\n$font-family-serif: georgia, times, \"Times New Roman\", serif !default;\n$font-family-base: $font-family-sans-serif !default;\n$font-family-publico-bold: \"Publico Headline Bold\" !default;\n$font-family-publico: \"Publico Headline\" !default;\n// colors\n\n$color-axa: #00008f !default;\n$color-white: #fff !default;\n$color-black: #000 !default;\n$color-red: #ff1721 !default;\n$color-gray: #5f5f5f !default;\n$color-red-700: #c91432 !default;\n$color-blue-1: #000072 !default;\n$color-blue-2: #f8f8ff !default;\n$color-blue-3: #36f !default;\n$color-btn-light: #3333a5 !default;\n$color-btn-business: #c94e14 !default;\n$color-btn-business-dark: #a8391c !default;\n$color-btn-business-light: #df7e65 !default;\n$color-btn-disabled-text: #999 !default;\n$color-btn-disabled-border: #e5e5e5 !default;\n$color-btn-error-text: #a11028 !default;\n$color-btn-error-bg: #fff3f5 !default;\n$color-btn-tertiary-bg: #eef !default;\n$color-btn-tertiary-bg-darker: #e4e4ff !default;\n$color-btn-tertiary-bg-lighter: #f8f8ff !default;\n$color-oceanBlue: #4976ba !default;\n$color-gray-1: #ccc !default;\n$color-gray-200: #f3f3f3;\n$color-gray-300: #e9ecf2;\n$color-gray-400: #e5e5e5;\n$color-gray-500: #999;\n$color-gray-700: #5f5f5f;\n$color-gray-900: #333 !default;\n$color-green-600: #118635 !default;\n$color-border: #f3f3f3 !default;\n$color-focus: #36f !default;\n\n// others\n\n$default-border-radius: 4px !default;\n\n$transition-duration: 0.2s !default;\n\n// spacing\n\n$sizing-u0: 0 !default;\n$sizing-u05: 0.4rem !default;\n$sizing-u1: 0.8rem !default;\n$sizing-u2: 1.6rem !default;\n$sizing-u3: 2.4rem !default;\n$sizing-u4: 3.2rem !default;\n$sizing-u5: 4rem !default;\n$sizing-u6: 4.8rem !default;\n$sizing-u7: 5.6rem !default;\n$sizing-u8: 6.4rem !default;\n$sizing-u9: 7.2rem !default;\n$sizing-u10: 8rem !default;\n$spacing-u0: 0 !default;\n$spacing-u05: 0.4rem !default;\n$spacing-u1: 0.8rem !default;\n$spacing-u2: 1.6rem !default;\n$spacing-u3: 2.4rem !default;\n$spacing-u4: 3.2rem !default;\n$spacing-u5: 4rem !default;\n$spacing-u6: 4.8rem !default;\n$spacing-u7: 5.6rem !default;\n$spacing-u8: 6.4rem !default;\n$spacing-u9: 7.2rem !default;\n$spacing-u10: 8rem !default;\n$spacing-u11: 8.8rem !default;\n$spacing-u12: 9.6rem !default;\n$spacing-u13: 10.4rem !default;\n$spacing-u14: 11.2rem !default;\n$spacing-u15: 12rem !default;\n$spacing-u16: 12.8rem !default;\n$spacing-u17: 13.6rem !default;\n$spacing-u18: 14.4rem !default;\n$spacing-u19: 15.2rem !default;\n$spacing-u20: 16rem !default;\n$screen-size-668: s !default;\n$screen-size-1024: m !default;\n$screen-size-1200: oldl !default;\n$screen-size-1280: l !default;\n$screen-size-1540: oldxl !default;\n$screen-size-1600: xl !default;\n$screen-size-s: 668px !default;\n$screen-size-m: 1024px !default;\n$screen-size-l: 1280px !default;\n$screen-size-xl: 1600px !default;\n$screen-size-oldl: 1200px !default;\n$screen-size-oldxl: 1540px !default;\n\n$error-custom-border: #d18e8e !default;\n$error-custom-bg: #ffbfbf !default;\n\n$color-alertDanger-colorBorder: #c8b282 !default;\n$color-alertDanger-bgColor: #f1d596 !default;\n\n// breakpoints\n\n$breakpoint-xs: 0 !default;\n$breakpoint-sm: 667px !default;\n$breakpoint-md: 1023px !default;\n$breakpoint-lg: 1279px !default;\n$breakpoint-xl: 1599px !default;\n","@use \"../../common/common\" as common;\n\n.af-footer {\n  z-index: 100;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  text-transform: uppercase;\n  color: common.$color-white;\n  background-color: common.$color-oceanBlue;\n\n  &__menuLinks {\n    height: 0;\n    padding: 0;\n    overflow: hidden;\n    background: transparent;\n    transition:\n      background 0ms,\n      padding 0ms;\n\n    &--display {\n      height: auto;\n      padding: 0 2rem;\n      transition:\n        background 250ms,\n        padding 125ms;\n    }\n  }\n\n  &__iconTrigger {\n    align-self: center;\n    justify-content: center;\n    transform: rotate3d(var(--rotate-x, 0), 0, 0, 180deg) !important;\n    transition: transform 250ms ease-in-out !important;\n\n    &--display {\n      --rotate-x: 1;\n    }\n  }\n\n  &__linkItem {\n    display: block;\n    padding: 1.2rem common.$spacing-u3;\n    text-decoration: none;\n    color: common.$color-white;\n\n    &:hover {\n      color: common.$color-blue-1;\n    }\n  }\n\n  &__footerMenuIcons {\n    display: flex;\n    padding: common.$spacing-u2 common.$spacing-u1;\n    border: 1px solid rgba(255, 255, 255, 20%);\n    border-width: 1px 0;\n    flex-direction: row;\n    justify-content: center;\n    gap: common.$spacing-u3;\n  }\n\n  &__menuIconLinks {\n    align-self: center;\n    color: common.$color-white;\n    fill: common.$color-white;\n\n    &:hover {\n      color: common.$color-blue-1;\n      fill: common.$color-blue-1;\n    }\n  }\n\n  &__menuAboutTrigger {\n    all: unset;\n    display: flex;\n    box-sizing: border-box;\n    width: 100%;\n    padding: common.$spacing-u2 common.$spacing-u4;\n    justify-content: space-between;\n  }\n\n  &__menuAboutTriggerText {\n    font-weight: bold;\n    color: common.$color-white;\n  }\n\n  &__footerBottom {\n    padding: common.$spacing-u1;\n  }\n\n  &__textCopyright {\n    font-size: 0.875rem;\n  }\n\n  &__icon {\n    width: 16px;\n    height: 16px;\n    align-self: center;\n    fill: common.$color-white;\n  }\n}\n\n@media only screen and (width >= #{common.$screen-size-m}) {\n  .af-footer {\n    &__menuLinks {\n      display: flex;\n      height: auto;\n      padding: 1.2rem 0;\n      flex-direction: row;\n      justify-content: space-between;\n      background: transparent;\n\n      & :first-child {\n        border-left: unset;\n      }\n    }\n\n    &__linkItem {\n      padding: 0 common.$spacing-u2;\n      border-left: 1px solid rgba(255, 255, 255, 20%);\n      align-self: center;\n      color: common.$color-white;\n    }\n\n    &__footerMenuIcons {\n      padding: common.$spacing-u2 common.$spacing-u4 common.$spacing-u2\n        common.$spacing-u1;\n      border: none;\n      gap: common.$spacing-u2;\n    }\n\n    &__footerTop {\n      display: flex;\n      width: 100%;\n      max-width: 128rem;\n      margin: 0 auto;\n      flex-direction: row;\n      justify-content: space-between;\n    }\n\n    &__menuTop {\n      display: flex;\n      padding: common.$spacing-u1;\n      flex-direction: row;\n      justify-content: space-between;\n      text-decoration: none;\n    }\n\n    &__menuAboutTrigger {\n      display: none;\n      padding: common.$spacing-u2 common.$spacing-u2 common.$spacing-u2\n        common.$spacing-u4;\n    }\n\n    &__footerBottom {\n      padding: 0;\n      border-top: 1px solid rgba(255, 255, 255, 20%);\n      text-align: right;\n    }\n\n    &__footerBottomWidth {\n      width: 100%;\n      max-width: 128rem;\n      margin: 0 auto;\n    }\n\n    &__textCopyright {\n      display: flex;\n      padding: common.$spacing-u1 common.$spacing-u4 common.$spacing-u1 0;\n      justify-content: flex-end;\n    }\n  }\n}\n"]}

package/dist/Layout/Footer/Footer.scss

@@ -0,0 +1,173 @@
+@use "../../common/common" as common;
+
+.af-footer {
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  text-transform: uppercase;
+  color: common.$color-white;
+  background-color: common.$color-oceanBlue;
+
+  &__menuLinks {
+    height: 0;
+    padding: 0;
+    overflow: hidden;
+    background: transparent;
+    transition:
+      background 0ms,
+      padding 0ms;
+
+    &--display {
+      height: auto;
+      padding: 0 2rem;
+      transition:
+        background 250ms,
+        padding 125ms;
+    }
+  }
+
+  &__iconTrigger {
+    align-self: center;
+    justify-content: center;
+    transform: rotate3d(var(--rotate-x, 0), 0, 0, 180deg) !important;
+    transition: transform 250ms ease-in-out !important;
+
+    &--display {
+      --rotate-x: 1;
+    }
+  }
+
+  &__linkItem {
+    display: block;
+    padding: 1.2rem common.$spacing-u3;
+    text-decoration: none;
+    color: common.$color-white;
+
+    &:hover {
+      color: common.$color-blue-1;
+    }
+  }
+
+  &__footerMenuIcons {
+    display: flex;
+    padding: common.$spacing-u2 common.$spacing-u1;
+    border: 1px solid rgba(255, 255, 255, 20%);
+    border-width: 1px 0;
+    flex-direction: row;
+    justify-content: center;
+    gap: common.$spacing-u3;
+  }
+
+  &__menuIconLinks {
+    align-self: center;
+    color: common.$color-white;
+    fill: common.$color-white;
+
+    &:hover {
+      color: common.$color-blue-1;
+      fill: common.$color-blue-1;
+    }
+  }
+
+  &__menuAboutTrigger {
+    all: unset;
+    display: flex;
+    box-sizing: border-box;
+    width: 100%;
+    padding: common.$spacing-u2 common.$spacing-u4;
+    justify-content: space-between;
+  }
+
+  &__menuAboutTriggerText {
+    font-weight: bold;
+    color: common.$color-white;
+  }
+
+  &__footerBottom {
+    padding: common.$spacing-u1;
+  }
+
+  &__textCopyright {
+    font-size: 0.875rem;
+  }
+
+  &__icon {
+    width: 16px;
+    height: 16px;
+    align-self: center;
+    fill: common.$color-white;
+  }
+}
+
+@media only screen and (width >= #{common.$screen-size-m}) {
+  .af-footer {
+    &__menuLinks {
+      display: flex;
+      height: auto;
+      padding: 1.2rem 0;
+      flex-direction: row;
+      justify-content: space-between;
+      background: transparent;
+
+      & :first-child {
+        border-left: unset;
+      }
+    }
+
+    &__linkItem {
+      padding: 0 common.$spacing-u2;
+      border-left: 1px solid rgba(255, 255, 255, 20%);
+      align-self: center;
+      color: common.$color-white;
+    }
+
+    &__footerMenuIcons {
+      padding: common.$spacing-u2 common.$spacing-u4 common.$spacing-u2
+        common.$spacing-u1;
+      border: none;
+      gap: common.$spacing-u2;
+    }
+
+    &__footerTop {
+      display: flex;
+      width: 100%;
+      max-width: 128rem;
+      margin: 0 auto;
+      flex-direction: row;
+      justify-content: space-between;
+    }
+
+    &__menuTop {
+      display: flex;
+      padding: common.$spacing-u1;
+      flex-direction: row;
+      justify-content: space-between;
+      text-decoration: none;
+    }
+
+    &__menuAboutTrigger {
+      display: none;
+      padding: common.$spacing-u2 common.$spacing-u2 common.$spacing-u2
+        common.$spacing-u4;
+    }
+
+    &__footerBottom {
+      padding: 0;
+      border-top: 1px solid rgba(255, 255, 255, 20%);
+      text-align: right;
+    }
+
+    &__footerBottomWidth {
+      width: 100%;
+      max-width: 128rem;
+      margin: 0 auto;
+    }
+
+    &__textCopyright {
+      display: flex;
+      padding: common.$spacing-u1 common.$spacing-u4 common.$spacing-u1 0;
+      justify-content: flex-end;
+    }
+  }
+}

package/dist/Layout/Header/Header.css

@@ -0,0 +1 @@
+.af-header{background-color:#fff;position:sticky;top:0;z-index:100}.af-header-container{align-items:center;border-bottom:1px solid #e9ecf2;border-top:2px solid #00008f;color:#00008f;display:flex;flex-direction:row;font-family:Source Sans Pro,arial,sans-serif;font-size:1.25rem;font-weight:600;height:72px;justify-content:space-between;padding:0 1rem;width:100%}.af-header-container .af-btn-client{min-width:auto}.af-header-container .af-btn-client>svg{display:none}.af-logo{align-self:center;height:40px;width:40px}.af-header-left-item>nav{display:none}.af-header-right-item{align-items:center;display:flex;flex-direction:row;gap:.8rem;margin:0 .8rem}@media only screen and (width >= 1023px){.af-header-container{border-top:2px solid #00008f;height:80px;padding:0 3.75rem;width:auto}.af-header-container .af-btn-client>svg{display:block}.af-logo{height:56px;width:56px}.af-header-left-item{align-items:center;display:flex;flex-direction:row;gap:1.5rem;height:5rem}.af-header-left-item>nav{display:block}.af-header-right-item{gap:1.6rem;margin:0}}

package/dist/Layout/Header/Header.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Layout/Header/Header.scss%23sass","../../../src/Layout/Header/Header.scss","../../../src/common/common.scss"],"names":[],"mappings":"AAEA,WAIE,qBAAA,CAHA,eAAA,CAEA,KAAA,CCHF,WAGA,CDIA,qBAQE,kBAAA,CAFA,+BAAA,CADA,4BAAA,CAQA,aAAA,CAZA,YAAA,CAMA,kBAAA,CAGA,4CEjBuB,CFkBvB,iBAAA,CACA,eAAA,CATA,WAAA,CAMA,6BAAA,CALA,cAAA,CCJF,UAYA,CDGE,oCACE,cCDJ,CDGI,wCACE,YCDN,CDMA,SAGE,iBAAA,CCLF,WAAA,CDGE,UCDF,CDMA,yBACE,YCHF,CDMA,sBCAA,kBAAA,CDCE,YAAA,CAEA,kBAAA,CAEA,SAAA,CCPF,cAIA,CDMA,yCACE,qBCAA,4BAAA,CDEE,WAAA,CCHJ,iBAAA,CAFA,UAIE,CDKE,wCACE,aCHJ,CDOA,SAEE,WAAA,CADA,UCJF,CDQA,qBAIE,kBAAA,CAHA,YAAA,CAEA,kBAAA,CCLF,UAAA,CAHA,WAIA,CDQE,yBACE,aCNJ,CDUA,sBAEE,UElBS,CFiBT,QCPF,CACF","file":"Header.css","sourcesContent":["@use \"../../common/common\" as common;\n\n.af-header {\n  position: sticky;\n  z-index: 100;\n  top: 0;\n  background-color: common.$color-white;\n}\n\n.af-header-container {\n  display: flex;\n  width: 100%;\n  height: 72px;\n  padding: 0 1rem;\n  border-top: 2px solid common.$color-axa;\n  border-bottom: 1px solid common.$color-gray-300;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  font-family: common.$font-family-sans-serif;\n  font-size: 1.25rem;\n  font-weight: 600;\n  color: common.$color-axa;\n\n  & .af-btn-client {\n    min-width: initial;\n\n    & > svg {\n      display: none;\n    }\n  }\n}\n\n.af-logo {\n  width: 40px;\n  height: 40px;\n  align-self: center;\n}\n\n.af-header-left-item > nav {\n  display: none;\n}\n\n.af-header-right-item {\n  display: flex;\n  margin: 0 common.$spacing-u1;\n  flex-direction: row;\n  align-items: center;\n  gap: common.$spacing-u1;\n}\n\n@media only screen and (width >= #{common.$breakpoint-md}) {\n  .af-header-container {\n    width: auto;\n    height: 80px;\n    padding: 0 3.75rem;\n    border-top: 2px solid common.$color-axa;\n\n    & .af-btn-client > svg {\n      display: block;\n    }\n  }\n\n  .af-logo {\n    width: 56px;\n    height: 56px;\n  }\n\n  .af-header-left-item {\n    display: flex;\n    height: 5rem;\n    flex-direction: row;\n    align-items: center;\n    gap: 1.5rem;\n\n    & > nav {\n      display: block;\n    }\n  }\n\n  .af-header-right-item {\n    margin: 0;\n    gap: common.$spacing-u2;\n  }\n}\n","@use \"../../common/common\" as common;\n\n.af-header {\n  position: sticky;\n  z-index: 100;\n  top: 0;\n  background-color: common.$color-white;\n}\n\n.af-header-container {\n  display: flex;\n  width: 100%;\n  height: 72px;\n  padding: 0 1rem;\n  border-top: 2px solid common.$color-axa;\n  border-bottom: 1px solid common.$color-gray-300;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  font-family: common.$font-family-sans-serif;\n  font-size: 1.25rem;\n  font-weight: 600;\n  color: common.$color-axa;\n\n  & .af-btn-client {\n    min-width: initial;\n\n    & > svg {\n      display: none;\n    }\n  }\n}\n\n.af-logo {\n  width: 40px;\n  height: 40px;\n  align-self: center;\n}\n\n.af-header-left-item > nav {\n  display: none;\n}\n\n.af-header-right-item {\n  display: flex;\n  margin: 0 common.$spacing-u1;\n  flex-direction: row;\n  align-items: center;\n  gap: common.$spacing-u1;\n}\n\n@media only screen and (width >= #{common.$breakpoint-md}) {\n  .af-header-container {\n    width: auto;\n    height: 80px;\n    padding: 0 3.75rem;\n    border-top: 2px solid common.$color-axa;\n\n    & .af-btn-client > svg {\n      display: block;\n    }\n  }\n\n  .af-logo {\n    width: 56px;\n    height: 56px;\n  }\n\n  .af-header-left-item {\n    display: flex;\n    height: 5rem;\n    flex-direction: row;\n    align-items: center;\n    gap: 1.5rem;\n\n    & > nav {\n      display: block;\n    }\n  }\n\n  .af-header-right-item {\n    margin: 0;\n    gap: common.$spacing-u2;\n  }\n}\n","@import \"./mixins\";\n\n$font-family-sans-serif: \"Source Sans Pro\", arial, sans-serif !default;\n$font-family-serif: georgia, times, \"Times New Roman\", serif !default;\n$font-family-base: $font-family-sans-serif !default;\n$font-family-publico-bold: \"Publico Headline Bold\" !default;\n$font-family-publico: \"Publico Headline\" !default;\n// colors\n\n$color-axa: #00008f !default;\n$color-white: #fff !default;\n$color-black: #000 !default;\n$color-red: #ff1721 !default;\n$color-gray: #5f5f5f !default;\n$color-red-700: #c91432 !default;\n$color-blue-1: #000072 !default;\n$color-blue-2: #f8f8ff !default;\n$color-blue-3: #36f !default;\n$color-btn-light: #3333a5 !default;\n$color-btn-business: #c94e14 !default;\n$color-btn-business-dark: #a8391c !default;\n$color-btn-business-light: #df7e65 !default;\n$color-btn-disabled-text: #999 !default;\n$color-btn-disabled-border: #e5e5e5 !default;\n$color-btn-error-text: #a11028 !default;\n$color-btn-error-bg: #fff3f5 !default;\n$color-btn-tertiary-bg: #eef !default;\n$color-btn-tertiary-bg-darker: #e4e4ff !default;\n$color-btn-tertiary-bg-lighter: #f8f8ff !default;\n$color-oceanBlue: #4976ba !default;\n$color-gray-1: #ccc !default;\n$color-gray-200: #f3f3f3;\n$color-gray-300: #e9ecf2;\n$color-gray-400: #e5e5e5;\n$color-gray-500: #999;\n$color-gray-700: #5f5f5f;\n$color-gray-900: #333 !default;\n$color-green-600: #118635 !default;\n$color-border: #f3f3f3 !default;\n$color-focus: #36f !default;\n\n// others\n\n$default-border-radius: 4px !default;\n\n$transition-duration: 0.2s !default;\n\n// spacing\n\n$sizing-u0: 0 !default;\n$sizing-u05: 0.4rem !default;\n$sizing-u1: 0.8rem !default;\n$sizing-u2: 1.6rem !default;\n$sizing-u3: 2.4rem !default;\n$sizing-u4: 3.2rem !default;\n$sizing-u5: 4rem !default;\n$sizing-u6: 4.8rem !default;\n$sizing-u7: 5.6rem !default;\n$sizing-u8: 6.4rem !default;\n$sizing-u9: 7.2rem !default;\n$sizing-u10: 8rem !default;\n$spacing-u0: 0 !default;\n$spacing-u05: 0.4rem !default;\n$spacing-u1: 0.8rem !default;\n$spacing-u2: 1.6rem !default;\n$spacing-u3: 2.4rem !default;\n$spacing-u4: 3.2rem !default;\n$spacing-u5: 4rem !default;\n$spacing-u6: 4.8rem !default;\n$spacing-u7: 5.6rem !default;\n$spacing-u8: 6.4rem !default;\n$spacing-u9: 7.2rem !default;\n$spacing-u10: 8rem !default;\n$spacing-u11: 8.8rem !default;\n$spacing-u12: 9.6rem !default;\n$spacing-u13: 10.4rem !default;\n$spacing-u14: 11.2rem !default;\n$spacing-u15: 12rem !default;\n$spacing-u16: 12.8rem !default;\n$spacing-u17: 13.6rem !default;\n$spacing-u18: 14.4rem !default;\n$spacing-u19: 15.2rem !default;\n$spacing-u20: 16rem !default;\n$screen-size-668: s !default;\n$screen-size-1024: m !default;\n$screen-size-1200: oldl !default;\n$screen-size-1280: l !default;\n$screen-size-1540: oldxl !default;\n$screen-size-1600: xl !default;\n$screen-size-s: 668px !default;\n$screen-size-m: 1024px !default;\n$screen-size-l: 1280px !default;\n$screen-size-xl: 1600px !default;\n$screen-size-oldl: 1200px !default;\n$screen-size-oldxl: 1540px !default;\n\n$error-custom-border: #d18e8e !default;\n$error-custom-bg: #ffbfbf !default;\n\n$color-alertDanger-colorBorder: #c8b282 !default;\n$color-alertDanger-bgColor: #f1d596 !default;\n\n// breakpoints\n\n$breakpoint-xs: 0 !default;\n$breakpoint-sm: 667px !default;\n$breakpoint-md: 1023px !default;\n$breakpoint-lg: 1279px !default;\n$breakpoint-xl: 1599px !default;\n"]}

package/dist/Layout/Header/Header.scss

@@ -0,0 +1,85 @@
+@use "../../common/common" as common;
+
+.af-header {
+  position: sticky;
+  z-index: 100;
+  top: 0;
+  background-color: common.$color-white;
+}
+
+.af-header-container {
+  display: flex;
+  width: 100%;
+  height: 72px;
+  padding: 0 1rem;
+  border-top: 2px solid common.$color-axa;
+  border-bottom: 1px solid common.$color-gray-300;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  font-family: common.$font-family-sans-serif;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: common.$color-axa;
+
+  & .af-btn-client {
+    min-width: initial;
+
+    & > svg {
+      display: none;
+    }
+  }
+}
+
+.af-logo {
+  width: 40px;
+  height: 40px;
+  align-self: center;
+}
+
+.af-header-left-item > nav {
+  display: none;
+}
+
+.af-header-right-item {
+  display: flex;
+  margin: 0 common.$spacing-u1;
+  flex-direction: row;
+  align-items: center;
+  gap: common.$spacing-u1;
+}
+
+@media only screen and (width >= #{common.$breakpoint-md}) {
+  .af-header-container {
+    width: auto;
+    height: 80px;
+    padding: 0 3.75rem;
+    border-top: 2px solid common.$color-axa;
+
+    & .af-btn-client > svg {
+      display: block;
+    }
+  }
+
+  .af-logo {
+    width: 56px;
+    height: 56px;
+  }
+
+  .af-header-left-item {
+    display: flex;
+    height: 5rem;
+    flex-direction: row;
+    align-items: center;
+    gap: 1.5rem;
+
+    & > nav {
+      display: block;
+    }
+  }
+
+  .af-header-right-item {
+    margin: 0;
+    gap: common.$spacing-u2;
+  }
+}

package/dist/Layout/Header/NavBar/NavBar.css

@@ -0,0 +1 @@
+.af-navbar-container{align-items:center;display:flex;flex-direction:row;gap:1.6rem;height:5rem;list-style-type:none;margin:0;padding:0}.af-navbar-item{cursor:pointer;height:100%}.af-navbar-item__link{box-sizing:border-box;color:#333;display:inline-block;font-family:Source Sans Pro,arial,sans-serif;font-size:1.125rem;font-weight:400;height:100%;line-height:1.4rem;min-width:8.4rem;padding:1.625rem 1.5rem;text-align:center;text-decoration:none}.af-navbar-item__link--active,.af-navbar-item__link:focus{border-bottom:4px solid #00008f;color:#00008f;font-weight:600;line-height:1.6rem;outline:none;text-decoration:none}.af-navbar-item__link:not(:focus,--active):hover{border-bottom:2px solid #e9ecf2;color:#333;font-weight:400;line-height:1.4rem;text-decoration:none}

package/dist/Layout/Header/NavBar/NavBar.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Layout/Header/NavBar/NavBar.scss%23sass","../../../../src/Layout/Header/NavBar/NavBar.scss","../../../../src/common/common.scss"],"names":[],"mappings":"AAEA,qBAME,kBAAA,CALA,YAAA,CAIA,kBAAA,CAEA,UAAA,CCPF,WAAA,CDQE,oBAAA,CALA,QAAA,CACA,SCGF,CDIA,gBCAA,cAAA,CDCE,WCAF,CDGE,sBAEE,qBAAA,CAUA,UAAA,CAXA,oBAAA,CAKA,4CErBqB,CFsBrB,kBAAA,CACA,eAAA,CAJA,WAAA,CAKA,kBAAA,CANA,gBAAA,CAEA,uBAAA,CAKA,iBAAA,CACA,oBCAJ,CDGI,0DAEE,+BAAA,CAIA,aAAA,CAHA,eAAA,CACA,kBAAA,CAGA,YAAA,CAFA,oBCAN,CDKI,iDACE,+BAAA,CAIA,UAAA,CAHA,eAAA,CACA,kBAAA,CACA,oBCFN","file":"NavBar.css","sourcesContent":["@use \"../../../common/common\" as common;\n\n.af-navbar-container {\n  display: flex;\n  height: 5rem;\n  margin: 0;\n  padding: 0;\n  flex-direction: row;\n  align-items: center;\n  gap: 1.6rem;\n  list-style-type: none;\n}\n\n.af-navbar-item {\n  height: 100%;\n  cursor: pointer;\n\n  &__link {\n    display: inline-block;\n    box-sizing: border-box;\n    min-width: 8.4rem;\n    height: 100%;\n    padding: 1.625rem 1.5rem;\n    font-family: common.$font-family-base;\n    font-size: 1.125rem;\n    font-weight: 400;\n    line-height: 1.4rem;\n    text-align: center;\n    text-decoration: none;\n    color: common.$color-gray-900;\n\n    &:focus,\n    &--active {\n      border-bottom: 4px solid common.$color-axa;\n      font-weight: 600;\n      line-height: 1.6rem;\n      text-decoration: none;\n      color: common.$color-axa;\n      outline: none;\n    }\n\n    &:not(:focus, --active):hover {\n      border-bottom: 2px solid common.$color-gray-300;\n      font-weight: 400;\n      line-height: 1.4rem;\n      text-decoration: none;\n      color: common.$color-gray-900;\n    }\n  }\n}\n","@use \"../../../common/common\" as common;\n\n.af-navbar-container {\n  display: flex;\n  height: 5rem;\n  margin: 0;\n  padding: 0;\n  flex-direction: row;\n  align-items: center;\n  gap: 1.6rem;\n  list-style-type: none;\n}\n\n.af-navbar-item {\n  height: 100%;\n  cursor: pointer;\n\n  &__link {\n    display: inline-block;\n    box-sizing: border-box;\n    min-width: 8.4rem;\n    height: 100%;\n    padding: 1.625rem 1.5rem;\n    font-family: common.$font-family-base;\n    font-size: 1.125rem;\n    font-weight: 400;\n    line-height: 1.4rem;\n    text-align: center;\n    text-decoration: none;\n    color: common.$color-gray-900;\n\n    &:focus,\n    &--active {\n      border-bottom: 4px solid common.$color-axa;\n      font-weight: 600;\n      line-height: 1.6rem;\n      text-decoration: none;\n      color: common.$color-axa;\n      outline: none;\n    }\n\n    &:not(:focus, --active):hover {\n      border-bottom: 2px solid common.$color-gray-300;\n      font-weight: 400;\n      line-height: 1.4rem;\n      text-decoration: none;\n      color: common.$color-gray-900;\n    }\n  }\n}\n","@import \"./mixins\";\n\n$font-family-sans-serif: \"Source Sans Pro\", arial, sans-serif !default;\n$font-family-serif: georgia, times, \"Times New Roman\", serif !default;\n$font-family-base: $font-family-sans-serif !default;\n$font-family-publico-bold: \"Publico Headline Bold\" !default;\n$font-family-publico: \"Publico Headline\" !default;\n// colors\n\n$color-axa: #00008f !default;\n$color-white: #fff !default;\n$color-black: #000 !default;\n$color-red: #ff1721 !default;\n$color-gray: #5f5f5f !default;\n$color-red-700: #c91432 !default;\n$color-blue-1: #000072 !default;\n$color-blue-2: #f8f8ff !default;\n$color-blue-3: #36f !default;\n$color-btn-light: #3333a5 !default;\n$color-btn-business: #c94e14 !default;\n$color-btn-business-dark: #a8391c !default;\n$color-btn-business-light: #df7e65 !default;\n$color-btn-disabled-text: #999 !default;\n$color-btn-disabled-border: #e5e5e5 !default;\n$color-btn-error-text: #a11028 !default;\n$color-btn-error-bg: #fff3f5 !default;\n$color-btn-tertiary-bg: #eef !default;\n$color-btn-tertiary-bg-darker: #e4e4ff !default;\n$color-btn-tertiary-bg-lighter: #f8f8ff !default;\n$color-oceanBlue: #4976ba !default;\n$color-gray-1: #ccc !default;\n$color-gray-200: #f3f3f3;\n$color-gray-300: #e9ecf2;\n$color-gray-400: #e5e5e5;\n$color-gray-500: #999;\n$color-gray-700: #5f5f5f;\n$color-gray-900: #333 !default;\n$color-green-600: #118635 !default;\n$color-border: #f3f3f3 !default;\n$color-focus: #36f !default;\n\n// others\n\n$default-border-radius: 4px !default;\n\n$transition-duration: 0.2s !default;\n\n// spacing\n\n$sizing-u0: 0 !default;\n$sizing-u05: 0.4rem !default;\n$sizing-u1: 0.8rem !default;\n$sizing-u2: 1.6rem !default;\n$sizing-u3: 2.4rem !default;\n$sizing-u4: 3.2rem !default;\n$sizing-u5: 4rem !default;\n$sizing-u6: 4.8rem !default;\n$sizing-u7: 5.6rem !default;\n$sizing-u8: 6.4rem !default;\n$sizing-u9: 7.2rem !default;\n$sizing-u10: 8rem !default;\n$spacing-u0: 0 !default;\n$spacing-u05: 0.4rem !default;\n$spacing-u1: 0.8rem !default;\n$spacing-u2: 1.6rem !default;\n$spacing-u3: 2.4rem !default;\n$spacing-u4: 3.2rem !default;\n$spacing-u5: 4rem !default;\n$spacing-u6: 4.8rem !default;\n$spacing-u7: 5.6rem !default;\n$spacing-u8: 6.4rem !default;\n$spacing-u9: 7.2rem !default;\n$spacing-u10: 8rem !default;\n$spacing-u11: 8.8rem !default;\n$spacing-u12: 9.6rem !default;\n$spacing-u13: 10.4rem !default;\n$spacing-u14: 11.2rem !default;\n$spacing-u15: 12rem !default;\n$spacing-u16: 12.8rem !default;\n$spacing-u17: 13.6rem !default;\n$spacing-u18: 14.4rem !default;\n$spacing-u19: 15.2rem !default;\n$spacing-u20: 16rem !default;\n$screen-size-668: s !default;\n$screen-size-1024: m !default;\n$screen-size-1200: oldl !default;\n$screen-size-1280: l !default;\n$screen-size-1540: oldxl !default;\n$screen-size-1600: xl !default;\n$screen-size-s: 668px !default;\n$screen-size-m: 1024px !default;\n$screen-size-l: 1280px !default;\n$screen-size-xl: 1600px !default;\n$screen-size-oldl: 1200px !default;\n$screen-size-oldxl: 1540px !default;\n\n$error-custom-border: #d18e8e !default;\n$error-custom-bg: #ffbfbf !default;\n\n$color-alertDanger-colorBorder: #c8b282 !default;\n$color-alertDanger-bgColor: #f1d596 !default;\n\n// breakpoints\n\n$breakpoint-xs: 0 !default;\n$breakpoint-sm: 667px !default;\n$breakpoint-md: 1023px !default;\n$breakpoint-lg: 1279px !default;\n$breakpoint-xl: 1599px !default;\n"]}

package/dist/Layout/Header/NavBar/NavBar.scss

@@ -0,0 +1,50 @@
+@use "../../../common/common" as common;
+
+.af-navbar-container {
+  display: flex;
+  height: 5rem;
+  margin: 0;
+  padding: 0;
+  flex-direction: row;
+  align-items: center;
+  gap: 1.6rem;
+  list-style-type: none;
+}
+
+.af-navbar-item {
+  height: 100%;
+  cursor: pointer;
+
+  &__link {
+    display: inline-block;
+    box-sizing: border-box;
+    min-width: 8.4rem;
+    height: 100%;
+    padding: 1.625rem 1.5rem;
+    font-family: common.$font-family-base;
+    font-size: 1.125rem;
+    font-weight: 400;
+    line-height: 1.4rem;
+    text-align: center;
+    text-decoration: none;
+    color: common.$color-gray-900;
+
+    &:focus,
+    &--active {
+      border-bottom: 4px solid common.$color-axa;
+      font-weight: 600;
+      line-height: 1.6rem;
+      text-decoration: none;
+      color: common.$color-axa;
+      outline: none;
+    }
+
+    &:not(:focus, --active):hover {
+      border-bottom: 2px solid common.$color-gray-300;
+      font-weight: 400;
+      line-height: 1.4rem;
+      text-decoration: none;
+      color: common.$color-gray-900;
+    }
+  }
+}

package/dist/Layout/Header/PreviousLink/PreviousLink.css

@@ -0,0 +1 @@
+af-header-previous-link-container .af-header-previous-link-container{align-items:center;display:flex;gap:.25rem;padding-top:1rem}.af-header-previous-link{align-items:center;cursor:pointer;display:flex;flex-direction:row;gap:.5rem;text-decoration:none}.af-header-previous-link__icon{height:1rem;width:1rem;fill:#5f5f5f}.af-header-previous-link__text{color:#5f5f5f;font-family:Source Sans Pro,arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.25rem;text-align:center}.af-header-previous-link:focus{outline:none}.af-header-previous-link:focus,.af-header-previous-link:hover{color:#5f5f5f;text-decoration:none}@media only screen and (width >= 1023px){.af-header-previous-link-container{padding:1.5rem 0 0 7.5rem}}

package/dist/Layout/Header/PreviousLink/PreviousLink.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Layout/Header/PreviousLink/PreviousLink.scss%23sass","../../../../src/Layout/Header/PreviousLink/PreviousLink.scss"],"names":[],"mappings":"AAEA,qEAGE,kBAAA,CAFA,YAAA,CAGA,UAAA,CCJF,gBAGA,CDIA,yBAGE,kBAAA,CAGA,cAAA,CALA,YAAA,CCDF,kBAAA,CDIE,SAAA,CACA,oBCAF,CDGE,+BAEE,WAAA,CADA,UAAA,CAEA,YCDJ,CDIE,+BAME,aAAA,CALA,4CAAA,CACA,cAAA,CACA,eAAA,CACA,mBAAA,CACA,iBCDJ,CDKE,+BACE,YCHJ,CDME,8DAGE,aAAA,CADA,oBCJJ,CDSA,yCACE,mCACE,yBCNF,CACF","file":"PreviousLink.css","sourcesContent":["@use \"../../../common/common\" as common;\n\naf-header-previous-link-container .af-header-previous-link-container {\n  display: flex;\n  padding-top: 1rem;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.af-header-previous-link {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 0.5rem;\n  text-decoration: none;\n  cursor: pointer;\n\n  &__icon {\n    width: 1rem;\n    height: 1rem;\n    fill: common.$color-gray-700;\n  }\n\n  &__text {\n    font-family: common.$font-family-sans-serif;\n    font-size: 1rem;\n    font-weight: normal;\n    line-height: 1.25rem;\n    text-align: center;\n    color: common.$color-gray-700;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus,\n  &:hover {\n    text-decoration: none;\n    color: common.$color-gray-700;\n  }\n}\n\n@media only screen and (width >= #{common.$breakpoint-md}) {\n  .af-header-previous-link-container {\n    padding: 1.5rem 0 0 7.5rem;\n  }\n}\n","@use \"../../../common/common\" as common;\n\naf-header-previous-link-container .af-header-previous-link-container {\n  display: flex;\n  padding-top: 1rem;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.af-header-previous-link {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 0.5rem;\n  text-decoration: none;\n  cursor: pointer;\n\n  &__icon {\n    width: 1rem;\n    height: 1rem;\n    fill: common.$color-gray-700;\n  }\n\n  &__text {\n    font-family: common.$font-family-sans-serif;\n    font-size: 1rem;\n    font-weight: normal;\n    line-height: 1.25rem;\n    text-align: center;\n    color: common.$color-gray-700;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus,\n  &:hover {\n    text-decoration: none;\n    color: common.$color-gray-700;\n  }\n}\n\n@media only screen and (width >= #{common.$breakpoint-md}) {\n  .af-header-previous-link-container {\n    padding: 1.5rem 0 0 7.5rem;\n  }\n}\n"]}