@axa-fr/design-system-look-and-feel-css 0.3.0-ci.288 → 0.3.0-ci.289

package/dist/Loader/Loader.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Loader/Loader.scss%23sass","../../src/Loader/Loader.scss"],"names":[],"mappings":"AAGE,sBAQE,kBAAA,CAEA,iCAAA,CALA,wBAAA,CACA,iBAAA,CADA,wBAAA,CCNJ,0BAAA,CDEI,YAAA,CAMA,qBAAA,CAEA,sBAAA,CANA,WCKJ,CDMA,gBACE,GCHF,sBACE,CACF,GACE,uBACA,CACF","file":"Loader.css","sourcesContent":["@use \"../common/common\" as common;\n\n.af-loader {\n  &__container {\n    display: flex;\n    container-type: inline-size;\n    margin: auto;\n    border: 1px solid common.$color-gray-200;\n    border-top: 1px solid common.$color-axa;\n    border-radius: 50%;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    animation: spin 2s linear infinite;\n  }\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n","@use \"../common/common\" as common;\n\n.af-loader {\n  &__container {\n    display: flex;\n    container-type: inline-size;\n    margin: auto;\n    border: 1px solid common.$color-gray-200;\n    border-top: 1px solid common.$color-axa;\n    border-radius: 50%;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    animation: spin 2s linear infinite;\n  }\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n"]}
+{"version":3,"sources":["../../src/Loader/Loader.scss%23sass","../../src/Loader/Loader.scss"],"names":[],"mappings":"AACE,sBAQE,kBAAA,CAEA,iCAAA,CANA,0CAAA,CACA,sCAAA,CACA,iBAAA,CADA,iCAAA,CAHA,0BAAA,CADA,YAAA,CAMA,qBAAA,CAEA,sBAAA,CANA,WCOJ,CDIA,gBACE,GCDF,sBACE,CDIA,GCFA,uBACA,CACF","file":"Loader.css","sourcesContent":[".af-loader {\n  &__container {\n    display: flex;\n    container-type: inline-size;\n    margin: auto;\n    border: 1px solid var(--color-gray-200);\n    border-top: 1px solid var(--color-axa);\n    border-radius: 50%;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    animation: spin 2s linear infinite;\n  }\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n",".af-loader {\n  &__container {\n    display: flex;\n    container-type: inline-size;\n    margin: auto;\n    border: 1px solid var(--color-gray-200);\n    border-top: 1px solid var(--color-axa);\n    border-radius: 50%;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    animation: spin 2s linear infinite;\n  }\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n"]}

package/dist/Loader/Loader.scss

@@ -1,12 +1,10 @@
-@use "../common/common" as common;
-
 .af-loader {
   &__container {
     display: flex;
     container-type: inline-size;
     margin: auto;
-    border: 1px solid common.$color-gray-200;
-    border-top: 1px solid common.$color-axa;
+    border: 1px solid var(--color-gray-200);
+    border-top: 1px solid var(--color-axa);
     border-radius: 50%;
     flex-direction: column;
     align-items: center;

package/dist/Modal/Modal.css

@@ -1 +1 @@
-.af-modal{background-color:#fff;border:none;border-radius:.5rem;margin:0 auto;padding:0 0 1.5rem;position:fixed;width:100%}.af-modal::backdrop{background:#333;opacity:.4}.af-modal__top{align-items:center;background-color:#fff;border-bottom:1px solid #e5e5e5;display:flex;gap:1rem;padding:1.5rem;position:sticky;top:0;z-index:5}.af-modal__top-title{align-items:start;color:#333;display:flex;justify-content:space-between;margin:0;width:100%}.af-modal__top-title-text{font-family:Publico Headline;font-size:1.5rem;line-height:1.875rem}.af-modal__top-title-subtitle{color:#5f5f5f;font-family:Source Sans Pro,arial,sans-serif;font-size:1.125rem;font-weight:400;line-height:1.406rem}.af-modal__top-title-close-btn{all:unset;align-items:center;cursor:pointer;display:flex;height:2rem;justify-content:center;width:2rem;fill:#00008f}.af-modal__top-title :hover{background:none}.af-modal__top-title :focus{background:none;border:none}.af-modal__content{display:flex;flex-direction:column;font-family:Source Sans Pro,arial,sans-serif;font-size:1.125rem;font-weight:400;gap:2.5rem;margin-top:2.5rem;padding:0 1.5rem;z-index:0}.af-modal__actions{align-items:flex-end;display:flex;flex-direction:column-reverse;gap:1rem;justify-content:flex-end;padding-top:0}.af-modal__actions *,.af-modal__actions--fullWidth *{flex-grow:1;width:100%}@media only screen and (width >= 1024px){.af-modal{margin:auto;max-width:72rem;min-width:48rem}.af-modal__actions{flex-direction:row-reverse;justify-content:flex-start}.af-modal__actions *{flex-grow:unset;width:auto}.af-modal__actions--fullWidth *{flex-grow:1;width:100%}}
+.af-modal{background-color:var(--color-white);border:none;border-radius:.5rem;margin:0 auto;padding:0 0 1.5rem;position:fixed;width:100%}.af-modal::backdrop{background:var(--color-gray-900);opacity:.4}.af-modal__top{align-items:center;background-color:var(--color-white);border-bottom:1px solid var(--color-gray-400);display:flex;gap:1rem;padding:1.5rem;position:sticky;top:0;z-index:5}.af-modal__top-title{align-items:start;color:var(--color-gray-900);display:flex;justify-content:space-between;margin:0;width:100%}.af-modal__top-title-text{font-family:var(--font-family-publico);font-size:1.5rem;line-height:1.875rem}.af-modal__top-title-subtitle{color:var(--color-gray-700);font-family:var(--font-family-sans-serif);font-size:1.125rem;font-weight:400;line-height:1.406rem}.af-modal__top-title-close-btn{all:unset;align-items:center;cursor:pointer;display:flex;height:2rem;justify-content:center;width:2rem;fill:var(--color-axa)}.af-modal__top-title :hover{background:none}.af-modal__top-title :focus{background:none;border:none}.af-modal__content{display:flex;flex-direction:column;font-family:var(--font-family-base);font-size:1.125rem;font-weight:400;gap:2.5rem;margin-top:2.5rem;padding:0 1.5rem;z-index:0}.af-modal__actions{align-items:flex-end;display:flex;flex-direction:column-reverse;gap:1rem;justify-content:flex-end;padding-top:0}.af-modal__actions *,.af-modal__actions--fullWidth *{flex-grow:1;width:100%}@media only screen and (width >= 1024px){.af-modal{margin:auto;max-width:72rem;min-width:48rem}.af-modal__actions{flex-direction:row-reverse;justify-content:flex-start}.af-modal__actions *{flex-grow:unset;width:auto}.af-modal__actions--fullWidth *{flex-grow:1;width:100%}}

package/dist/Modal/Modal.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Modal/Modal.scss%23sass","../../src/Modal/Modal.scss","../../src/common/common.scss"],"names":[],"mappings":"AAEA,UAOE,qBAAA,CAFA,WAAA,CACA,mBAAA,CAHA,aAAA,CACA,kBAAA,CAHA,cAAA,CCDF,UAMA,CDGE,oBAEE,eAAA,CADA,UCAJ,CDIE,eAOE,kBAAA,CAEA,qBAAA,CAHA,+BAAA,CAFA,YAAA,CAIA,QAAA,CAHA,cAAA,CAJA,eAAA,CAEA,KAAA,CADA,SCKJ,CDII,qBAIE,iBAAA,CAEA,UAAA,CALA,YAAA,CAIA,6BAAA,CAFA,QAAA,CADA,UCEN,CDIM,0BACE,4BAAA,CACA,gBAAA,CACA,oBCFR,CDKM,8BAKE,aAAA,CAJA,4CExCiB,CFyCjB,kBAAA,CACA,eAAA,CACA,oBCFR,CDMM,+BACE,SAAA,CAIA,kBAAA,CAEA,cAAA,CALA,YAAA,CAEA,WAAA,CAEA,sBAAA,CAHA,UAAA,CAKA,YCJR,CDOM,4BACE,eCLR,CDQM,4BAEE,eAAA,CADA,WCLR,CDWE,mBAEE,YAAA,CAGA,qBAAA,CAEA,4CAAA,CACA,kBAAA,CACA,eAAA,CAHA,UAAA,CAHA,iBAAA,CACA,gBAAA,CAHA,SCDJ,CDYE,mBAIE,oBAAA,CAHA,YAAA,CAEA,6BAAA,CAGA,QAAA,CADA,wBAAA,CAHA,aCLJ,CDkBM,qDAEE,WAAA,CADA,UCXR,CDkBA,yCACE,UAGE,WAAA,CADA,eAAA,CADA,eCbF,CDiBE,mBACE,0BAAA,CACA,0BCfJ,CDiBI,qBAEE,eAAA,CADA,UCdN,CACF,gCAEA,WAAA,CDiBU,UChBR,CACF","file":"Modal.css","sourcesContent":["@use \"../common/common\" as common;\n\n.af-modal {\n  position: fixed;\n  width: 100%;\n  margin: 0 auto;\n  padding: 0 0 1.5rem;\n  border: none;\n  border-radius: 0.5rem;\n  background-color: common.$color-white;\n\n  &::backdrop {\n    opacity: 0.4;\n    background: common.$color-gray-900;\n  }\n\n  &__top {\n    position: sticky;\n    z-index: 5;\n    top: 0;\n    display: flex;\n    padding: 1.5rem;\n    border-bottom: 1px solid common.$color-gray-400;\n    align-items: center;\n    gap: 1rem;\n    background-color: common.$color-white;\n\n    &-title {\n      display: flex;\n      width: 100%;\n      margin: 0;\n      align-items: start;\n      justify-content: space-between;\n      color: common.$color-gray-900;\n\n      &-text {\n        font-family: common.$font-family-publico;\n        font-size: 1.5rem;\n        line-height: 1.875rem;\n      }\n\n      &-subtitle {\n        font-family: common.$font-family-sans-serif;\n        font-size: 1.125rem;\n        font-weight: 400;\n        line-height: 1.406rem;\n        color: common.$color-gray-700;\n      }\n\n      &-close-btn {\n        all: unset;\n        display: flex;\n        width: 2rem;\n        height: 2rem;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        fill: common.$color-axa;\n      }\n\n      :hover {\n        background: none;\n      }\n\n      :focus {\n        border: none;\n        background: none;\n      }\n    }\n  }\n\n  &__content {\n    z-index: 0;\n    display: flex;\n    margin-top: 2.5rem;\n    padding: 0 1.5rem;\n    flex-direction: column;\n    gap: 2.5rem;\n    font-family: common.$font-family-base;\n    font-size: 1.125rem;\n    font-weight: 400;\n  }\n\n  &__actions {\n    display: flex;\n    padding-top: 0;\n    flex-direction: column-reverse;\n    align-items: flex-end;\n    justify-content: flex-end;\n    gap: 1rem;\n\n    /* force fullwidth in mobile*/\n    & * {\n      width: 100%;\n      flex-grow: 1;\n    }\n\n    &--fullWidth {\n      & * {\n        width: 100%;\n        flex-grow: 1;\n      }\n    }\n  }\n}\n\n@media only screen and (width >= #{common.$screen-size-m}) {\n  .af-modal {\n    min-width: 48rem;\n    max-width: 72rem;\n    margin: auto;\n\n    &__actions {\n      flex-direction: row-reverse;\n      justify-content: flex-start;\n\n      & * {\n        width: auto;\n        flex-grow: unset;\n      }\n\n      &--fullWidth {\n        & * {\n          width: 100%;\n          flex-grow: 1;\n        }\n      }\n    }\n  }\n}\n","@use \"../common/common\" as common;\n\n.af-modal {\n  position: fixed;\n  width: 100%;\n  margin: 0 auto;\n  padding: 0 0 1.5rem;\n  border: none;\n  border-radius: 0.5rem;\n  background-color: common.$color-white;\n\n  &::backdrop {\n    opacity: 0.4;\n    background: common.$color-gray-900;\n  }\n\n  &__top {\n    position: sticky;\n    z-index: 5;\n    top: 0;\n    display: flex;\n    padding: 1.5rem;\n    border-bottom: 1px solid common.$color-gray-400;\n    align-items: center;\n    gap: 1rem;\n    background-color: common.$color-white;\n\n    &-title {\n      display: flex;\n      width: 100%;\n      margin: 0;\n      align-items: start;\n      justify-content: space-between;\n      color: common.$color-gray-900;\n\n      &-text {\n        font-family: common.$font-family-publico;\n        font-size: 1.5rem;\n        line-height: 1.875rem;\n      }\n\n      &-subtitle {\n        font-family: common.$font-family-sans-serif;\n        font-size: 1.125rem;\n        font-weight: 400;\n        line-height: 1.406rem;\n        color: common.$color-gray-700;\n      }\n\n      &-close-btn {\n        all: unset;\n        display: flex;\n        width: 2rem;\n        height: 2rem;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        fill: common.$color-axa;\n      }\n\n      :hover {\n        background: none;\n      }\n\n      :focus {\n        border: none;\n        background: none;\n      }\n    }\n  }\n\n  &__content {\n    z-index: 0;\n    display: flex;\n    margin-top: 2.5rem;\n    padding: 0 1.5rem;\n    flex-direction: column;\n    gap: 2.5rem;\n    font-family: common.$font-family-base;\n    font-size: 1.125rem;\n    font-weight: 400;\n  }\n\n  &__actions {\n    display: flex;\n    padding-top: 0;\n    flex-direction: column-reverse;\n    align-items: flex-end;\n    justify-content: flex-end;\n    gap: 1rem;\n\n    // force fullwidth in mobile\n    & * {\n      width: 100%;\n      flex-grow: 1;\n    }\n\n    &--fullWidth {\n      & * {\n        width: 100%;\n        flex-grow: 1;\n      }\n    }\n  }\n}\n\n@media only screen and (width >= #{common.$screen-size-m}) {\n  .af-modal {\n    min-width: 48rem;\n    max-width: 72rem;\n    margin: auto;\n\n    &__actions {\n      flex-direction: row-reverse;\n      justify-content: flex-start;\n\n      & * {\n        width: auto;\n        flex-grow: unset;\n      }\n\n      &--fullWidth {\n        & * {\n          width: 100%;\n          flex-grow: 1;\n        }\n      }\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-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"]}
+{"version":3,"sources":["../../src/Modal/Modal.scss%23sass","../../src/Modal/Modal.scss"],"names":[],"mappings":"AAEA,UAOE,mCAAA,CAFA,WAAA,CACA,mBAAA,CAHA,aAAA,CACA,kBAAA,CAHA,cAAA,CCDF,UAMA,CDGE,oBAEE,gCAAA,CADA,UCAJ,CDIE,eAOE,kBAAA,CAEA,mCAAA,CAHA,6CAAA,CAFA,YAAA,CAIA,QAAA,CAHA,cAAA,CAJA,eAAA,CAEA,KAAA,CADA,SCKJ,CDII,qBAIE,iBAAA,CAEA,2BAAA,CALA,YAAA,CAIA,6BAAA,CAFA,QAAA,CADA,UCEN,CDIM,0BACE,sCAAA,CACA,gBAAA,CACA,oBCFR,CDKM,8BAKE,2BAAA,CAJA,yCAAA,CACA,kBAAA,CACA,eAAA,CACA,oBCFR,CDMM,+BACE,SAAA,CAIA,kBAAA,CAEA,cAAA,CALA,YAAA,CAEA,WAAA,CAEA,sBAAA,CAHA,UAAA,CAKA,qBCJR,CDOM,4BACE,eCLR,CDQM,4BAEE,eAAA,CADA,WCLR,CDWE,mBAEE,YAAA,CAGA,qBAAA,CAEA,mCAAA,CACA,kBAAA,CACA,eAAA,CAHA,UAAA,CAHA,iBAAA,CACA,gBAAA,CAHA,SCDJ,CDYE,mBAIE,oBAAA,CAHA,YAAA,CAEA,6BAAA,CAGA,QAAA,CADA,wBAAA,CAHA,aCLJ,CDkBM,qDAEE,WAAA,CADA,UCXR,CDkBA,yCACE,UAGE,WAAA,CADA,eAAA,CADA,eCbF,CDiBE,mBACE,0BAAA,CACA,0BCfJ,CDiBI,qBAEE,eAAA,CADA,UCdN,CACF,gCAEA,WAAA,CDiBU,UChBR,CACF","file":"Modal.css","sourcesContent":["@use \"../common/common\" as common;\n\n.af-modal {\n  position: fixed;\n  width: 100%;\n  margin: 0 auto;\n  padding: 0 0 1.5rem;\n  border: none;\n  border-radius: 0.5rem;\n  background-color: var(--color-white);\n\n  &::backdrop {\n    opacity: 0.4;\n    background: var(--color-gray-900);\n  }\n\n  &__top {\n    position: sticky;\n    z-index: 5;\n    top: 0;\n    display: flex;\n    padding: 1.5rem;\n    border-bottom: 1px solid var(--color-gray-400);\n    align-items: center;\n    gap: 1rem;\n    background-color: var(--color-white);\n\n    &-title {\n      display: flex;\n      width: 100%;\n      margin: 0;\n      align-items: start;\n      justify-content: space-between;\n      color: var(--color-gray-900);\n\n      &-text {\n        font-family: var(--font-family-publico);\n        font-size: 1.5rem;\n        line-height: 1.875rem;\n      }\n\n      &-subtitle {\n        font-family: var(--font-family-sans-serif);\n        font-size: 1.125rem;\n        font-weight: 400;\n        line-height: 1.406rem;\n        color: var(--color-gray-700);\n      }\n\n      &-close-btn {\n        all: unset;\n        display: flex;\n        width: 2rem;\n        height: 2rem;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        fill: var(--color-axa);\n      }\n\n      :hover {\n        background: none;\n      }\n\n      :focus {\n        border: none;\n        background: none;\n      }\n    }\n  }\n\n  &__content {\n    z-index: 0;\n    display: flex;\n    margin-top: 2.5rem;\n    padding: 0 1.5rem;\n    flex-direction: column;\n    gap: 2.5rem;\n    font-family: var(--font-family-base);\n    font-size: 1.125rem;\n    font-weight: 400;\n  }\n\n  &__actions {\n    display: flex;\n    padding-top: 0;\n    flex-direction: column-reverse;\n    align-items: flex-end;\n    justify-content: flex-end;\n    gap: 1rem;\n\n    /* force fullwidth in mobile*/\n    & * {\n      width: 100%;\n      flex-grow: 1;\n    }\n\n    &--fullWidth {\n      & * {\n        width: 100%;\n        flex-grow: 1;\n      }\n    }\n  }\n}\n\n@media only screen and (width >= #{common.$screen-size-m}) {\n  .af-modal {\n    min-width: 48rem;\n    max-width: 72rem;\n    margin: auto;\n\n    &__actions {\n      flex-direction: row-reverse;\n      justify-content: flex-start;\n\n      & * {\n        width: auto;\n        flex-grow: unset;\n      }\n\n      &--fullWidth {\n        & * {\n          width: 100%;\n          flex-grow: 1;\n        }\n      }\n    }\n  }\n}\n","@use \"../common/common\" as common;\n\n.af-modal {\n  position: fixed;\n  width: 100%;\n  margin: 0 auto;\n  padding: 0 0 1.5rem;\n  border: none;\n  border-radius: 0.5rem;\n  background-color: var(--color-white);\n\n  &::backdrop {\n    opacity: 0.4;\n    background: var(--color-gray-900);\n  }\n\n  &__top {\n    position: sticky;\n    z-index: 5;\n    top: 0;\n    display: flex;\n    padding: 1.5rem;\n    border-bottom: 1px solid var(--color-gray-400);\n    align-items: center;\n    gap: 1rem;\n    background-color: var(--color-white);\n\n    &-title {\n      display: flex;\n      width: 100%;\n      margin: 0;\n      align-items: start;\n      justify-content: space-between;\n      color: var(--color-gray-900);\n\n      &-text {\n        font-family: var(--font-family-publico);\n        font-size: 1.5rem;\n        line-height: 1.875rem;\n      }\n\n      &-subtitle {\n        font-family: var(--font-family-sans-serif);\n        font-size: 1.125rem;\n        font-weight: 400;\n        line-height: 1.406rem;\n        color: var(--color-gray-700);\n      }\n\n      &-close-btn {\n        all: unset;\n        display: flex;\n        width: 2rem;\n        height: 2rem;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        fill: var(--color-axa);\n      }\n\n      :hover {\n        background: none;\n      }\n\n      :focus {\n        border: none;\n        background: none;\n      }\n    }\n  }\n\n  &__content {\n    z-index: 0;\n    display: flex;\n    margin-top: 2.5rem;\n    padding: 0 1.5rem;\n    flex-direction: column;\n    gap: 2.5rem;\n    font-family: var(--font-family-base);\n    font-size: 1.125rem;\n    font-weight: 400;\n  }\n\n  &__actions {\n    display: flex;\n    padding-top: 0;\n    flex-direction: column-reverse;\n    align-items: flex-end;\n    justify-content: flex-end;\n    gap: 1rem;\n\n    // force fullwidth in mobile\n    & * {\n      width: 100%;\n      flex-grow: 1;\n    }\n\n    &--fullWidth {\n      & * {\n        width: 100%;\n        flex-grow: 1;\n      }\n    }\n  }\n}\n\n@media only screen and (width >= #{common.$screen-size-m}) {\n  .af-modal {\n    min-width: 48rem;\n    max-width: 72rem;\n    margin: auto;\n\n    &__actions {\n      flex-direction: row-reverse;\n      justify-content: flex-start;\n\n      & * {\n        width: auto;\n        flex-grow: unset;\n      }\n\n      &--fullWidth {\n        & * {\n          width: 100%;\n          flex-grow: 1;\n        }\n      }\n    }\n  }\n}\n"]}

package/dist/Modal/Modal.scss

@@ -7,11 +7,11 @@
   padding: 0 0 1.5rem;
   border: none;
   border-radius: 0.5rem;
-  background-color: common.$color-white;
+  background-color: var(--color-white);
 
   &::backdrop {
     opacity: 0.4;
-    background: common.$color-gray-900;
+    background: var(--color-gray-900);
   }
 
   &__top {
@@ -20,10 +20,10 @@
     top: 0;
     display: flex;
     padding: 1.5rem;
-    border-bottom: 1px solid common.$color-gray-400;
+    border-bottom: 1px solid var(--color-gray-400);
     align-items: center;
     gap: 1rem;
-    background-color: common.$color-white;
+    background-color: var(--color-white);
 
     &-title {
       display: flex;
@@ -31,20 +31,20 @@
       margin: 0;
       align-items: start;
       justify-content: space-between;
-      color: common.$color-gray-900;
+      color: var(--color-gray-900);
 
       &-text {
-        font-family: common.$font-family-publico;
+        font-family: var(--font-family-publico);
         font-size: 1.5rem;
         line-height: 1.875rem;
       }
 
       &-subtitle {
-        font-family: common.$font-family-sans-serif;
+        font-family: var(--font-family-sans-serif);
         font-size: 1.125rem;
         font-weight: 400;
         line-height: 1.406rem;
-        color: common.$color-gray-700;
+        color: var(--color-gray-700);
       }
 
       &-close-btn {
@@ -55,7 +55,7 @@
         align-items: center;
         justify-content: center;
         cursor: pointer;
-        fill: common.$color-axa;
+        fill: var(--color-axa);
       }
 
       :hover {
@@ -76,7 +76,7 @@
     padding: 0 1.5rem;
     flex-direction: column;
     gap: 2.5rem;
-    font-family: common.$font-family-base;
+    font-family: var(--font-family-base);
     font-size: 1.125rem;
     font-weight: 400;
   }

package/dist/Pagination/Pagination.css

@@ -1 +1 @@
-.af-container-pagination>div{border:1px solid #f3f3f3;border-radius:41px;display:flex;padding:.5rem}
+.af-container-pagination>div{border:1px solid var(--color-border);border-radius:41px;display:flex;padding:.5rem}

package/dist/Pagination/Pagination.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Pagination/Pagination.scss%23sass","../../src/Pagination/Pagination.scss"],"names":[],"mappings":"AAEA,6BAGE,wBAAA,CACA,kBAAA,CAHA,YAAA,CCDF,aAGA","file":"Pagination.css","sourcesContent":["@use \"../common/common\" as common;\n\n.af-container-pagination > div {\n  display: flex;\n  padding: 0.5rem;\n  border: 1px solid common.$color-border;\n  border-radius: 41px;\n}\n","@use \"../common/common\" as common;\n\n.af-container-pagination > div {\n  display: flex;\n  padding: 0.5rem;\n  border: 1px solid common.$color-border;\n  border-radius: 41px;\n}\n"]}
+{"version":3,"sources":["../../src/Pagination/Pagination.scss%23sass","../../src/Pagination/Pagination.scss"],"names":[],"mappings":"AAAA,6BAGE,oCAAA,CACA,kBAAA,CAHA,YAAA,CACA,aCGF","file":"Pagination.css","sourcesContent":[".af-container-pagination > div {\n  display: flex;\n  padding: 0.5rem;\n  border: 1px solid var(--color-border);\n  border-radius: 41px;\n}\n",".af-container-pagination > div {\n  display: flex;\n  padding: 0.5rem;\n  border: 1px solid var(--color-border);\n  border-radius: 41px;\n}\n"]}

package/dist/Pagination/Pagination.scss

@@ -1,8 +1,6 @@
-@use "../common/common" as common;
-
 .af-container-pagination > div {
   display: flex;
   padding: 0.5rem;
-  border: 1px solid common.$color-border;
+  border: 1px solid var(--color-border);
   border-radius: 41px;
 }

package/dist/Pagination/PaginationDesktop.css

@@ -1 +1 @@
-.af-pagination-desktop ul{display:flex;gap:.5rem;justify-content:center;list-style-type:none;margin:0;padding:0}.af-pagination-desktop ul li{align-items:center;border-radius:50%;color:#00008f;display:flex;height:3rem;justify-content:center;width:3rem}.af-pagination-desktop ul li button{all:unset;cursor:pointer}.af-pagination-desktop ul li button:focus-visible{outline:1px solid #00008f}.af-pagination-desktop ul li[aria-current]{background:#00008f;color:#fff}.af-pagination-desktop .first{margin:0 3rem 0 0}.af-pagination-desktop .first li:last-child:before{content:"...";padding:2rem}.af-pagination-desktop .between{margin:0 2rem}.af-pagination-desktop .between li:first-child:after,.af-pagination-desktop .between li:last-child:before{content:"...";padding:2rem}.af-pagination-desktop .last{margin:0 0 0 3rem}.af-pagination-desktop .last li:first-child:after{content:"...";padding:2rem}
+.af-pagination-desktop ul{display:flex;gap:.5rem;justify-content:center;list-style-type:none;margin:0;padding:0}.af-pagination-desktop ul li{align-items:center;border-radius:50%;color:var(--color-axa);display:flex;height:3rem;justify-content:center;width:3rem}.af-pagination-desktop ul li button{all:unset;cursor:pointer}.af-pagination-desktop ul li button:focus-visible{outline:1px solid var(--color-axa)}.af-pagination-desktop ul li[aria-current]{background:var(--color-axa);color:var(--color-white)}.af-pagination-desktop .first{margin:0 3rem 0 0}.af-pagination-desktop .first li:last-child:before{content:"...";padding:2rem}.af-pagination-desktop .between{margin:0 2rem}.af-pagination-desktop .between li:first-child:after,.af-pagination-desktop .between li:last-child:before{content:"...";padding:2rem}.af-pagination-desktop .last{margin:0 0 0 3rem}.af-pagination-desktop .last li:first-child:after{content:"...";padding:2rem}

package/dist/Pagination/PaginationDesktop.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Pagination/PaginationDesktop.scss%23sass","../../src/Pagination/PaginationDesktop.scss"],"names":[],"mappings":"AAGE,0BACE,YAAA,CAIA,SAAA,CADA,sBAAA,CAEA,oBAAA,CCPJ,QAAA,CDII,SCCJ,CDII,6BAKE,kBAAA,CADA,iBAAA,CAGA,aAAA,CANA,YAAA,CAEA,WAAA,CAGA,sBAAA,CAJA,UCGN,CDIM,oCACE,SAAA,CACA,cCFR,CDIQ,kDACE,yBCFV,CDOI,2CAEE,kBAAA,CADA,UCJN,CDSE,8BACE,iBCPJ,CDSI,mDAEE,aAAA,CADA,YCNN,CDWE,gCACE,aCTJ,CDgBI,0GAEE,aAAA,CADA,YCTN,CDcE,6BACE,iBCZJ,CDcI,kDAEE,aAAA,CADA,YCXN","file":"PaginationDesktop.css","sourcesContent":["@use \"../common/common\" as common;\n\n.af-pagination-desktop {\n  ul {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    justify-content: center;\n    gap: 0.5rem;\n    list-style-type: none;\n\n    li {\n      display: flex;\n      width: 3rem;\n      height: 3rem;\n      border-radius: 50%;\n      align-items: center;\n      justify-content: center;\n      color: common.$color-axa;\n\n      button {\n        all: unset;\n        cursor: pointer;\n\n        &:focus-visible {\n          outline: 1px solid common.$color-axa;\n        }\n      }\n    }\n\n    li[aria-current] {\n      color: common.$color-white;\n      background: common.$color-axa;\n    }\n  }\n\n  .first {\n    margin: 0 3rem 0 0;\n\n    li:last-child::before {\n      padding: 2rem;\n      content: \"...\";\n    }\n  }\n\n  .between {\n    margin: 0 2rem;\n\n    li:first-child::after {\n      padding: 2rem;\n      content: \"...\";\n    }\n\n    li:last-child::before {\n      padding: 2rem;\n      content: \"...\";\n    }\n  }\n\n  .last {\n    margin: 0 0 0 3rem;\n\n    li:first-child::after {\n      padding: 2rem;\n      content: \"...\";\n    }\n  }\n}\n","@use \"../common/common\" as common;\n\n.af-pagination-desktop {\n  ul {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    justify-content: center;\n    gap: 0.5rem;\n    list-style-type: none;\n\n    li {\n      display: flex;\n      width: 3rem;\n      height: 3rem;\n      border-radius: 50%;\n      align-items: center;\n      justify-content: center;\n      color: common.$color-axa;\n\n      button {\n        all: unset;\n        cursor: pointer;\n\n        &:focus-visible {\n          outline: 1px solid common.$color-axa;\n        }\n      }\n    }\n\n    li[aria-current] {\n      color: common.$color-white;\n      background: common.$color-axa;\n    }\n  }\n\n  .first {\n    margin: 0 3rem 0 0;\n\n    li:last-child::before {\n      padding: 2rem;\n      content: \"...\";\n    }\n  }\n\n  .between {\n    margin: 0 2rem;\n\n    li:first-child::after {\n      padding: 2rem;\n      content: \"...\";\n    }\n\n    li:last-child::before {\n      padding: 2rem;\n      content: \"...\";\n    }\n  }\n\n  .last {\n    margin: 0 0 0 3rem;\n\n    li:first-child::after {\n      padding: 2rem;\n      content: \"...\";\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../../src/Pagination/PaginationDesktop.scss%23sass","../../src/Pagination/PaginationDesktop.scss"],"names":[],"mappings":"AACE,0BACE,YAAA,CAIA,SAAA,CADA,sBAAA,CAEA,oBAAA,CAJA,QAAA,CACA,SCGJ,CDEI,6BAKE,kBAAA,CADA,iBAAA,CAGA,sBAAA,CANA,YAAA,CAEA,WAAA,CAGA,sBAAA,CAJA,UCKN,CDEM,oCACE,SAAA,CACA,cCAR,CDEQ,kDACE,kCCAV,CDKI,2CAEE,2BAAA,CADA,wBCFN,CDOE,8BACE,iBCLJ,CDOI,mDAEE,aAAA,CADA,YCJN,CDSE,gCACE,aCPJ,CDcI,0GAEE,aAAA,CADA,YCPN,CDYE,6BACE,iBCVJ,CDYI,kDAEE,aAAA,CADA,YCTN","file":"PaginationDesktop.css","sourcesContent":[".af-pagination-desktop {\n  ul {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    justify-content: center;\n    gap: 0.5rem;\n    list-style-type: none;\n\n    li {\n      display: flex;\n      width: 3rem;\n      height: 3rem;\n      border-radius: 50%;\n      align-items: center;\n      justify-content: center;\n      color: var(--color-axa);\n\n      button {\n        all: unset;\n        cursor: pointer;\n\n        &:focus-visible {\n          outline: 1px solid var(--color-axa);\n        }\n      }\n    }\n\n    li[aria-current] {\n      color: var(--color-white);\n      background: var(--color-axa);\n    }\n  }\n\n  .first {\n    margin: 0 3rem 0 0;\n\n    li:last-child::before {\n      padding: 2rem;\n      content: \"...\";\n    }\n  }\n\n  .between {\n    margin: 0 2rem;\n\n    li:first-child::after {\n      padding: 2rem;\n      content: \"...\";\n    }\n\n    li:last-child::before {\n      padding: 2rem;\n      content: \"...\";\n    }\n  }\n\n  .last {\n    margin: 0 0 0 3rem;\n\n    li:first-child::after {\n      padding: 2rem;\n      content: \"...\";\n    }\n  }\n}\n",".af-pagination-desktop {\n  ul {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    justify-content: center;\n    gap: 0.5rem;\n    list-style-type: none;\n\n    li {\n      display: flex;\n      width: 3rem;\n      height: 3rem;\n      border-radius: 50%;\n      align-items: center;\n      justify-content: center;\n      color: var(--color-axa);\n\n      button {\n        all: unset;\n        cursor: pointer;\n\n        &:focus-visible {\n          outline: 1px solid var(--color-axa);\n        }\n      }\n    }\n\n    li[aria-current] {\n      color: var(--color-white);\n      background: var(--color-axa);\n    }\n  }\n\n  .first {\n    margin: 0 3rem 0 0;\n\n    li:last-child::before {\n      padding: 2rem;\n      content: \"...\";\n    }\n  }\n\n  .between {\n    margin: 0 2rem;\n\n    li:first-child::after {\n      padding: 2rem;\n      content: \"...\";\n    }\n\n    li:last-child::before {\n      padding: 2rem;\n      content: \"...\";\n    }\n  }\n\n  .last {\n    margin: 0 0 0 3rem;\n\n    li:first-child::after {\n      padding: 2rem;\n      content: \"...\";\n    }\n  }\n}\n"]}

package/dist/Pagination/PaginationDesktop.scss

@@ -1,5 +1,3 @@
-@use "../common/common" as common;
-
 .af-pagination-desktop {
   ul {
     display: flex;
@@ -16,21 +14,21 @@
       border-radius: 50%;
       align-items: center;
       justify-content: center;
-      color: common.$color-axa;
+      color: var(--color-axa);
 
       button {
         all: unset;
         cursor: pointer;
 
         &:focus-visible {
-          outline: 1px solid common.$color-axa;
+          outline: 1px solid var(--color-axa);
         }
       }
     }
 
     li[aria-current] {
-      color: common.$color-white;
-      background: common.$color-axa;
+      color: var(--color-white);
+      background: var(--color-axa);
     }
   }
 

package/dist/Pagination/PaginationMobile.css

@@ -1 +1 @@
-.af-pagination-mobile{align-items:center;font-size:1rem;font-weight:600;line-height:1.2rem}.af-pagination-mobile>span{color:#5f5f5f}.af-pagination-mobile button{background:none;border:none;cursor:pointer;outline:none}.af-pagination-mobile button:focus-visible{outline:1px solid #00008f}.af-pagination-mobile button .arrow{color:#00008f}.af-pagination-mobile button:disabled{pointer-events:none}.af-pagination-mobile button:disabled .arrow{color:#e5e5e5}
+.af-pagination-mobile{align-items:center;font-size:1rem;font-weight:600;line-height:1.2rem}.af-pagination-mobile>span{color:var(--color-gray)}.af-pagination-mobile button{background:none;border:none;cursor:pointer;outline:none}.af-pagination-mobile button:focus-visible{outline:1px solid var(--color-axa)}.af-pagination-mobile button .arrow{color:var(--color-axa)}.af-pagination-mobile button:disabled{pointer-events:none}.af-pagination-mobile button:disabled .arrow{color:var(--color-gray-400)}

package/dist/Pagination/PaginationMobile.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Pagination/PaginationMobile.scss%23sass","../../src/Pagination/PaginationMobile.scss"],"names":[],"mappings":"AAEA,sBACE,kBAAA,CCDF,cAAA,CDGE,eAAA,CACA,kBCDF,CDGE,2BACE,aCDJ,CDIE,6BAEE,eAAA,CADA,WAAA,CAGA,cAAA,CADA,YCDJ,CDII,2CACE,yBCFN,CDKI,oCACE,aCHN,CDMI,sCACE,mBCJN,CDMM,6CACE,aCJR","file":"PaginationMobile.css","sourcesContent":["@use \"../common/common\" as common;\n\n.af-pagination-mobile {\n  align-items: center;\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: 1.2rem;\n\n  > span {\n    color: common.$color-gray;\n  }\n\n  button {\n    border: none;\n    background: none;\n    outline: none;\n    cursor: pointer;\n\n    &:focus-visible {\n      outline: 1px solid common.$color-axa;\n    }\n\n    .arrow {\n      color: common.$color-axa;\n    }\n\n    &:disabled {\n      pointer-events: none;\n\n      .arrow {\n        color: common.$color-gray-400;\n      }\n    }\n  }\n}\n","@use \"../common/common\" as common;\n\n.af-pagination-mobile {\n  align-items: center;\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: 1.2rem;\n\n  > span {\n    color: common.$color-gray;\n  }\n\n  button {\n    border: none;\n    background: none;\n    outline: none;\n    cursor: pointer;\n\n    &:focus-visible {\n      outline: 1px solid common.$color-axa;\n    }\n\n    .arrow {\n      color: common.$color-axa;\n    }\n\n    &:disabled {\n      pointer-events: none;\n\n      .arrow {\n        color: common.$color-gray-400;\n      }\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../../src/Pagination/PaginationMobile.scss%23sass","../../src/Pagination/PaginationMobile.scss"],"names":[],"mappings":"AAAA,sBACE,kBAAA,CACA,cAAA,CACA,eAAA,CACA,kBCCF,CDCE,2BACE,uBCCJ,CDEE,6BAEE,eAAA,CADA,WAAA,CAGA,cAAA,CADA,YCCJ,CDEI,2CACE,kCCAN,CDGI,oCACE,sBCDN,CDII,sCACE,mBCFN,CDIM,6CACE,2BCFR","file":"PaginationMobile.css","sourcesContent":[".af-pagination-mobile {\n  align-items: center;\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: 1.2rem;\n\n  > span {\n    color: var(--color-gray);\n  }\n\n  button {\n    border: none;\n    background: none;\n    outline: none;\n    cursor: pointer;\n\n    &:focus-visible {\n      outline: 1px solid var(--color-axa);\n    }\n\n    .arrow {\n      color: var(--color-axa);\n    }\n\n    &:disabled {\n      pointer-events: none;\n\n      .arrow {\n        color: var(--color-gray-400);\n      }\n    }\n  }\n}\n",".af-pagination-mobile {\n  align-items: center;\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: 1.2rem;\n\n  > span {\n    color: var(--color-gray);\n  }\n\n  button {\n    border: none;\n    background: none;\n    outline: none;\n    cursor: pointer;\n\n    &:focus-visible {\n      outline: 1px solid var(--color-axa);\n    }\n\n    .arrow {\n      color: var(--color-axa);\n    }\n\n    &:disabled {\n      pointer-events: none;\n\n      .arrow {\n        color: var(--color-gray-400);\n      }\n    }\n  }\n}\n"]}

package/dist/Pagination/PaginationMobile.scss

@@ -1,5 +1,3 @@
-@use "../common/common" as common;
-
 .af-pagination-mobile {
   align-items: center;
   font-size: 1rem;
@@ -7,7 +5,7 @@
   line-height: 1.2rem;
 
   > span {
-    color: common.$color-gray;
+    color: var(--color-gray);
   }
 
   button {
@@ -17,18 +15,18 @@
     cursor: pointer;
 
     &:focus-visible {
-      outline: 1px solid common.$color-axa;
+      outline: 1px solid var(--color-axa);
     }
 
     .arrow {
-      color: common.$color-axa;
+      color: var(--color-axa);
     }
 
     &:disabled {
       pointer-events: none;
 
       .arrow {
-        color: common.$color-gray-400;
+        color: var(--color-gray-400);
       }
     }
   }

package/dist/Stepper/Stepper.css

@@ -1 +1 @@
-.af-stepper-client{background-color:initial;display:flex;flex-direction:column;width:100%}.af-stepper-client__title{color:#333;font-family:Publico Headline Bold,Source Sans Pro,arial,sans-serif;font-size:2rem;font-weight:700;line-height:2.5rem;margin-bottom:.5rem;text-align:left}.af-stepper-client__subtitle{color:#5f5f5f;font-family:Source Sans Pro,arial,sans-serif;font-size:1.125rem;font-weight:400;line-height:1.406rem;margin-bottom:1.5rem;text-align:left}.af-stepper-client__content{align-items:flex-end;display:flex;gap:1rem}.af-stepper-client__progressbar{background-color:#e5e5e5;border-radius:4px;height:.375rem;width:100%}.af-stepper-client__progress{background-color:#00008f;border-radius:4px;height:100%;height:.375rem;text-align:left;transition:.75s ease-out,background-color .75s;width:50%}
+.af-stepper-client{background-color:initial;display:flex;flex-direction:column;width:100%}.af-stepper-client__title{color:var(--color-gray-900);font-family:var(--font-family-publico-bold),var(--font-family-base);font-size:2rem;font-weight:700;line-height:2.5rem;margin-bottom:.5rem;text-align:left}.af-stepper-client__subtitle{color:var(--color-gray-700);font-family:var(--font-family-sans-serif);font-size:1.125rem;font-weight:400;line-height:1.406rem;margin-bottom:1.5rem;text-align:left}.af-stepper-client__content{align-items:flex-end;display:flex;gap:1rem}.af-stepper-client__progressbar{background-color:var(--color-gray-400);border-radius:var(--default-border-radius);height:.375rem;width:100%}.af-stepper-client__progress{background-color:var(--color-axa);border-radius:var(--default-border-radius);height:100%;height:.375rem;text-align:left;transition:.75s ease-out,background-color .75s;width:50%}

package/dist/Stepper/Stepper.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Stepper/Stepper.scss%23sass","../../src/Stepper/Stepper.scss","../../src/common/common.scss"],"names":[],"mappings":"AAEA,mBAIE,wBAAA,CAHA,YAAA,CAEA,qBAAA,CCHF,UAGA,CDGE,0BAOE,UAAA,CALA,kEAAA,CACA,cAAA,CACA,eAAA,CACA,kBAAA,CAJA,mBAAA,CAKA,eCAJ,CDIE,6BAOE,aAAA,CALA,4CElBqB,CFmBrB,kBAAA,CACA,eAAA,CACA,oBAAA,CAJA,oBAAA,CAKA,eCDJ,CDKE,4BAEE,oBAAA,CADA,YAAA,CAEA,QCHJ,CDME,gCAIE,wBENa,CFKb,iBAAA,CADA,cAAA,CADA,UCDJ,CDOE,6BAME,wBAAA,CAFA,iBAAA,CAFA,WAAA,CACA,cAAA,CAEA,eAAA,CAEA,8CACE,CAPF,SCCJ","file":"Stepper.css","sourcesContent":["@use \"../common/common\" as common;\n\n.af-stepper-client {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  background-color: transparent;\n\n  &__title {\n    margin-bottom: 0.5rem;\n    font-family: common.$font-family-publico-bold, common.$font-family-base;\n    font-size: 2rem;\n    font-weight: 700;\n    line-height: 2.5rem;\n    text-align: left;\n    color: common.$color-gray-900;\n  }\n\n  &__subtitle {\n    margin-bottom: 1.5rem;\n    font-family: common.$font-family-sans-serif;\n    font-size: 1.125rem;\n    font-weight: 400;\n    line-height: 1.406rem;\n    text-align: left;\n    color: common.$color-gray-700;\n  }\n\n  &__content {\n    display: flex;\n    align-items: flex-end;\n    gap: 1rem;\n  }\n\n  &__progressbar {\n    width: 100%;\n    height: 0.375rem;\n    border-radius: common.$default-border-radius;\n    background-color: common.$color-gray-400;\n  }\n\n  &__progress {\n    width: 50%;\n    height: 100%;\n    height: 0.375rem;\n    border-radius: common.$default-border-radius;\n    text-align: left;\n    background-color: common.$color-axa;\n    transition:\n      0.75s ease-out,\n      background-color 0.75s;\n  }\n}\n","@use \"../common/common\" as common;\n\n.af-stepper-client {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  background-color: transparent;\n\n  &__title {\n    margin-bottom: 0.5rem;\n    font-family: common.$font-family-publico-bold, common.$font-family-base;\n    font-size: 2rem;\n    font-weight: 700;\n    line-height: 2.5rem;\n    text-align: left;\n    color: common.$color-gray-900;\n  }\n\n  &__subtitle {\n    margin-bottom: 1.5rem;\n    font-family: common.$font-family-sans-serif;\n    font-size: 1.125rem;\n    font-weight: 400;\n    line-height: 1.406rem;\n    text-align: left;\n    color: common.$color-gray-700;\n  }\n\n  &__content {\n    display: flex;\n    align-items: flex-end;\n    gap: 1rem;\n  }\n\n  &__progressbar {\n    width: 100%;\n    height: 0.375rem;\n    border-radius: common.$default-border-radius;\n    background-color: common.$color-gray-400;\n  }\n\n  &__progress {\n    width: 50%;\n    height: 100%;\n    height: 0.375rem;\n    border-radius: common.$default-border-radius;\n    text-align: left;\n    background-color: common.$color-axa;\n    transition:\n      0.75s ease-out,\n      background-color 0.75s;\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-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"]}
+{"version":3,"sources":["../../src/Stepper/Stepper.scss%23sass","../../src/Stepper/Stepper.scss"],"names":[],"mappings":"AAAA,mBAIE,wBAAA,CAHA,YAAA,CAEA,qBAAA,CADA,UCGF,CDCE,0BAOE,2BAAA,CALA,mEAAA,CACA,cAAA,CACA,eAAA,CACA,kBAAA,CAJA,mBAAA,CAKA,eCEJ,CDEE,6BAOE,2BAAA,CALA,yCAAA,CACA,kBAAA,CACA,eAAA,CACA,oBAAA,CAJA,oBAAA,CAKA,eCCJ,CDGE,4BAEE,oBAAA,CADA,YAAA,CAEA,QCDJ,CDIE,gCAIE,sCAAA,CADA,0CAAA,CADA,cAAA,CADA,UCCJ,CDKE,6BAME,iCAAA,CAFA,0CAAA,CAFA,WAAA,CACA,cAAA,CAEA,eAAA,CAEA,8CACE,CAPF,SCGJ","file":"Stepper.css","sourcesContent":[".af-stepper-client {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  background-color: transparent;\n\n  &__title {\n    margin-bottom: 0.5rem;\n    font-family: var(--font-family-publico-bold), var(--font-family-base);\n    font-size: 2rem;\n    font-weight: 700;\n    line-height: 2.5rem;\n    text-align: left;\n    color: var(--color-gray-900);\n  }\n\n  &__subtitle {\n    margin-bottom: 1.5rem;\n    font-family: var(--font-family-sans-serif);\n    font-size: 1.125rem;\n    font-weight: 400;\n    line-height: 1.406rem;\n    text-align: left;\n    color: var(--color-gray-700);\n  }\n\n  &__content {\n    display: flex;\n    align-items: flex-end;\n    gap: 1rem;\n  }\n\n  &__progressbar {\n    width: 100%;\n    height: 0.375rem;\n    border-radius: var(--default-border-radius);\n    background-color: var(--color-gray-400);\n  }\n\n  &__progress {\n    width: 50%;\n    height: 100%;\n    height: 0.375rem;\n    border-radius: var(--default-border-radius);\n    text-align: left;\n    background-color: var(--color-axa);\n    transition:\n      0.75s ease-out,\n      background-color 0.75s;\n  }\n}\n",".af-stepper-client {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  background-color: transparent;\n\n  &__title {\n    margin-bottom: 0.5rem;\n    font-family: var(--font-family-publico-bold), var(--font-family-base);\n    font-size: 2rem;\n    font-weight: 700;\n    line-height: 2.5rem;\n    text-align: left;\n    color: var(--color-gray-900);\n  }\n\n  &__subtitle {\n    margin-bottom: 1.5rem;\n    font-family: var(--font-family-sans-serif);\n    font-size: 1.125rem;\n    font-weight: 400;\n    line-height: 1.406rem;\n    text-align: left;\n    color: var(--color-gray-700);\n  }\n\n  &__content {\n    display: flex;\n    align-items: flex-end;\n    gap: 1rem;\n  }\n\n  &__progressbar {\n    width: 100%;\n    height: 0.375rem;\n    border-radius: var(--default-border-radius);\n    background-color: var(--color-gray-400);\n  }\n\n  &__progress {\n    width: 50%;\n    height: 100%;\n    height: 0.375rem;\n    border-radius: var(--default-border-radius);\n    text-align: left;\n    background-color: var(--color-axa);\n    transition:\n      0.75s ease-out,\n      background-color 0.75s;\n  }\n}\n"]}

package/dist/Stepper/Stepper.scss

@@ -1,5 +1,3 @@
-@use "../common/common" as common;
-
 .af-stepper-client {
   display: flex;
   width: 100%;
@@ -8,22 +6,22 @@
 
   &__title {
     margin-bottom: 0.5rem;
-    font-family: common.$font-family-publico-bold, common.$font-family-base;
+    font-family: var(--font-family-publico-bold), var(--font-family-base);
     font-size: 2rem;
     font-weight: 700;
     line-height: 2.5rem;
     text-align: left;
-    color: common.$color-gray-900;
+    color: var(--color-gray-900);
   }
 
   &__subtitle {
     margin-bottom: 1.5rem;
-    font-family: common.$font-family-sans-serif;
+    font-family: var(--font-family-sans-serif);
     font-size: 1.125rem;
     font-weight: 400;
     line-height: 1.406rem;
     text-align: left;
-    color: common.$color-gray-700;
+    color: var(--color-gray-700);
   }
 
   &__content {
@@ -35,17 +33,17 @@
   &__progressbar {
     width: 100%;
     height: 0.375rem;
-    border-radius: common.$default-border-radius;
-    background-color: common.$color-gray-400;
+    border-radius: var(--default-border-radius);
+    background-color: var(--color-gray-400);
   }
 
   &__progress {
     width: 50%;
     height: 100%;
     height: 0.375rem;
-    border-radius: common.$default-border-radius;
+    border-radius: var(--default-border-radius);
     text-align: left;
-    background-color: common.$color-axa;
+    background-color: var(--color-axa);
     transition:
       0.75s ease-out,
       background-color 0.75s;

package/dist/Tabs/Tabs.css

@@ -1 +1 @@
-.af-tabs-client{display:flex;flex-direction:column;font-family:Source Sans Pro,arial,sans-serif;margin:0;padding:0;width:100%}.af-tabs-client>[role=tablist]{box-shadow:inset 0 -2px 0 0 #e9ecf2;display:flex;margin-bottom:.8rem;width:100%}.af-tabs-client [role=tab]{all:unset;cursor:pointer;font-size:1.25rem;line-height:1.6rem;padding:1rem;position:relative;text-align:center}.af-tabs-client [role=tab]>span{display:block;height:100%;width:100%}.af-tabs-client [role=tab][aria-selected=true]{border-bottom:4px solid #00008f;color:#00008f;font-weight:600}.af-tabs-client--center>[role=tablist]{justify-content:center}.af-tabs-client--center [role=tab]{flex-grow:1;width:100%}.af-tabs-client [role=tab]:focus{outline:unset}.af-tabs-client [role=tab]:focus-visible{outline:2px solid #36f;outline-offset:3px}.af-tabs-client>[role=tabpanel][aria-hidden=true]{display:none}
+.af-tabs-client{display:flex;flex-direction:column;font-family:Source Sans Pro,arial,sans-serif;margin:0;padding:0;width:100%}.af-tabs-client>[role=tablist]{box-shadow:inset 0 -2px 0 0 var(--color-gray-300);display:flex;margin-bottom:var(--spacing-u1);width:100%}.af-tabs-client [role=tab]{all:unset;cursor:pointer;font-size:1.25rem;line-height:var(--sizing-u2);padding:1rem;position:relative;text-align:center}.af-tabs-client [role=tab]>span{display:block;height:100%;width:100%}.af-tabs-client [role=tab][aria-selected=true]{border-bottom:4px solid var(--color-axa);color:var(--color-axa);font-weight:600}.af-tabs-client--center>[role=tablist]{justify-content:center}.af-tabs-client--center [role=tab]{flex-grow:1;width:100%}.af-tabs-client [role=tab]:focus{outline:unset}.af-tabs-client [role=tab]:focus-visible{outline:2px solid var(--color-blue-3);outline-offset:3px}.af-tabs-client>[role=tabpanel][aria-hidden=true]{display:none}

package/dist/Tabs/Tabs.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tabs/Tabs.scss%23sass","../../src/Tabs/Tabs.scss","../../src/common/common.scss"],"names":[],"mappings":"AAEA,gBACE,YAAA,CAIA,qBAAA,CACA,4CAAA,CAHA,QAAA,CACA,SAAA,CCJF,UAKA,CDGE,+BAIE,mCAAA,CAHA,YAAA,CAEA,mBEiDS,CFlDT,UCCJ,CDIE,2BACE,SAAA,CAMA,cAAA,CAHA,iBAAA,CACA,kBAAA,CAFA,YAAA,CADA,iBAAA,CAIA,iBCDJ,CDII,gCACE,aAAA,CAEA,WAAA,CADA,UCDN,CDKI,+CACE,+BAAA,CAEA,aE1BM,CFyBN,eCFN,CDQI,uCACE,sBCNN,CDSI,mCAEE,WAAA,CADA,UCNN,CDWE,iCACE,aCTJ,CDYE,yCACE,sBAAA,CACA,kBCVJ,CDaE,kDACE,YCXJ","file":"Tabs.css","sourcesContent":["@use \"../common/common\" as common;\n\n.af-tabs-client {\n  display: flex;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  flex-direction: column;\n  font-family: \"Source Sans Pro\", arial, sans-serif;\n\n  & > [role=\"tablist\"] {\n    display: flex;\n    width: 100%;\n    margin-bottom: common.$spacing-u1;\n    box-shadow: inset 0 -2px 0 0 common.$color-gray-300;\n  }\n\n  & [role=\"tab\"] {\n    all: unset;\n    position: relative;\n    padding: 1rem;\n    font-size: 1.25rem;\n    line-height: common.$sizing-u2;\n    text-align: center;\n    cursor: pointer;\n\n    & > span {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n\n    &[aria-selected=\"true\"] {\n      border-bottom: 4px solid common.$color-axa;\n      font-weight: 600;\n      color: common.$color-axa;\n    }\n  }\n\n  &--center {\n    & > [role=\"tablist\"] {\n      justify-content: center;\n    }\n\n    & [role=\"tab\"] {\n      width: 100%;\n      flex-grow: 1;\n    }\n  }\n\n  & [role=\"tab\"]:focus {\n    outline: unset;\n  }\n\n  & [role=\"tab\"]:focus-visible {\n    outline: 2px solid common.$color-blue-3;\n    outline-offset: 3px;\n  }\n\n  & > [role=\"tabpanel\"][aria-hidden=\"true\"] {\n    display: none;\n  }\n}\n","@use \"../common/common\" as common;\n\n.af-tabs-client {\n  display: flex;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  flex-direction: column;\n  font-family: \"Source Sans Pro\", arial, sans-serif;\n\n  & > [role=\"tablist\"] {\n    display: flex;\n    width: 100%;\n    margin-bottom: common.$spacing-u1;\n    box-shadow: inset 0 -2px 0 0 common.$color-gray-300;\n  }\n\n  & [role=\"tab\"] {\n    all: unset;\n    position: relative;\n    padding: 1rem;\n    font-size: 1.25rem;\n    line-height: common.$sizing-u2;\n    text-align: center;\n    cursor: pointer;\n\n    & > span {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n\n    &[aria-selected=\"true\"] {\n      border-bottom: 4px solid common.$color-axa;\n      font-weight: 600;\n      color: common.$color-axa;\n    }\n  }\n\n  &--center {\n    & > [role=\"tablist\"] {\n      justify-content: center;\n    }\n\n    & [role=\"tab\"] {\n      width: 100%;\n      flex-grow: 1;\n    }\n  }\n\n  & [role=\"tab\"]:focus {\n    outline: unset;\n  }\n\n  & [role=\"tab\"]:focus-visible {\n    outline: 2px solid common.$color-blue-3;\n    outline-offset: 3px;\n  }\n\n  & > [role=\"tabpanel\"][aria-hidden=\"true\"] {\n    display: none;\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-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"]}
+{"version":3,"sources":["../../src/Tabs/Tabs.scss%23sass","../../src/Tabs/Tabs.scss"],"names":[],"mappings":"AAAA,gBACE,YAAA,CAIA,qBAAA,CACA,4CAAA,CAHA,QAAA,CACA,SAAA,CAFA,UCKF,CDCE,+BAIE,iDAAA,CAHA,YAAA,CAEA,+BAAA,CADA,UCGJ,CDEE,2BACE,SAAA,CAMA,cAAA,CAHA,iBAAA,CACA,4BAAA,CAFA,YAAA,CADA,iBAAA,CAIA,iBCCJ,CDEI,gCACE,aAAA,CAEA,WAAA,CADA,UCCN,CDGI,+CACE,wCAAA,CAEA,sBAAA,CADA,eCAN,CDMI,uCACE,sBCJN,CDOI,mCAEE,WAAA,CADA,UCJN,CDSE,iCACE,aCPJ,CDUE,yCACE,qCAAA,CACA,kBCRJ,CDWE,kDACE,YCTJ","file":"Tabs.css","sourcesContent":[".af-tabs-client {\n  display: flex;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  flex-direction: column;\n  font-family: \"Source Sans Pro\", arial, sans-serif;\n\n  & > [role=\"tablist\"] {\n    display: flex;\n    width: 100%;\n    margin-bottom: var(--spacing-u1);\n    box-shadow: inset 0 -2px 0 0 var(--color-gray-300);\n  }\n\n  & [role=\"tab\"] {\n    all: unset;\n    position: relative;\n    padding: 1rem;\n    font-size: 1.25rem;\n    line-height: var(--sizing-u2);\n    text-align: center;\n    cursor: pointer;\n\n    & > span {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n\n    &[aria-selected=\"true\"] {\n      border-bottom: 4px solid var(--color-axa);\n      font-weight: 600;\n      color: var(--color-axa);\n    }\n  }\n\n  &--center {\n    & > [role=\"tablist\"] {\n      justify-content: center;\n    }\n\n    & [role=\"tab\"] {\n      width: 100%;\n      flex-grow: 1;\n    }\n  }\n\n  & [role=\"tab\"]:focus {\n    outline: unset;\n  }\n\n  & [role=\"tab\"]:focus-visible {\n    outline: 2px solid var(--color-blue-3);\n    outline-offset: 3px;\n  }\n\n  & > [role=\"tabpanel\"][aria-hidden=\"true\"] {\n    display: none;\n  }\n}\n",".af-tabs-client {\n  display: flex;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  flex-direction: column;\n  font-family: \"Source Sans Pro\", arial, sans-serif;\n\n  & > [role=\"tablist\"] {\n    display: flex;\n    width: 100%;\n    margin-bottom: var(--spacing-u1);\n    box-shadow: inset 0 -2px 0 0 var(--color-gray-300);\n  }\n\n  & [role=\"tab\"] {\n    all: unset;\n    position: relative;\n    padding: 1rem;\n    font-size: 1.25rem;\n    line-height: var(--sizing-u2);\n    text-align: center;\n    cursor: pointer;\n\n    & > span {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n\n    &[aria-selected=\"true\"] {\n      border-bottom: 4px solid var(--color-axa);\n      font-weight: 600;\n      color: var(--color-axa);\n    }\n  }\n\n  &--center {\n    & > [role=\"tablist\"] {\n      justify-content: center;\n    }\n\n    & [role=\"tab\"] {\n      width: 100%;\n      flex-grow: 1;\n    }\n  }\n\n  & [role=\"tab\"]:focus {\n    outline: unset;\n  }\n\n  & [role=\"tab\"]:focus-visible {\n    outline: 2px solid var(--color-blue-3);\n    outline-offset: 3px;\n  }\n\n  & > [role=\"tabpanel\"][aria-hidden=\"true\"] {\n    display: none;\n  }\n}\n"]}

package/dist/Tabs/Tabs.scss

@@ -1,5 +1,3 @@
-@use "../common/common" as common;
-
 .af-tabs-client {
   display: flex;
   width: 100%;
@@ -11,8 +9,8 @@
   & > [role="tablist"] {
     display: flex;
     width: 100%;
-    margin-bottom: common.$spacing-u1;
-    box-shadow: inset 0 -2px 0 0 common.$color-gray-300;
+    margin-bottom: var(--spacing-u1);
+    box-shadow: inset 0 -2px 0 0 var(--color-gray-300);
   }
 
   & [role="tab"] {
@@ -20,7 +18,7 @@
     position: relative;
     padding: 1rem;
     font-size: 1.25rem;
-    line-height: common.$sizing-u2;
+    line-height: var(--sizing-u2);
     text-align: center;
     cursor: pointer;
 
@@ -31,9 +29,9 @@
     }
 
     &[aria-selected="true"] {
-      border-bottom: 4px solid common.$color-axa;
+      border-bottom: 4px solid var(--color-axa);
       font-weight: 600;
-      color: common.$color-axa;
+      color: var(--color-axa);
     }
   }
 
@@ -53,7 +51,7 @@
   }
 
   & [role="tab"]:focus-visible {
-    outline: 2px solid common.$color-blue-3;
+    outline: 2px solid var(--color-blue-3);
     outline-offset: 3px;
   }
 

package/dist/Tag/Tag.css

@@ -1 +1 @@
-.af-tag{align-items:center;background-color:#fff;border:1px solid #5f5f5f;border-radius:.25rem;color:#5f5f5f;cursor:default;display:inline-flex;font-family:Source Sans Pro,arial,sans-serif;gap:.625rem;justify-content:center;padding:.125rem .5rem}.af-tag span{font-size:1rem;font-weight:600;line-height:1.25rem}.af-tag--success{border-color:#118635;color:#118635}.af-tag--error{border-color:#c91432;color:#c91432}.af-tag--warning{border-color:#c94e14;color:#c94e14}.af-tag--info{border-color:#00008f;color:#00008f}@media (width <= 667px){.af-tag span{font-size:.875rem;line-height:1.094rem}}
+.af-tag{align-items:center;background-color:var(--color-white);border:1px solid var(--color-gray);border-radius:.25rem;color:var(--color-gray);cursor:default;display:inline-flex;font-family:var(--font-family-base);gap:.625rem;justify-content:center;padding:.125rem .5rem}.af-tag span{font-size:1rem;font-weight:600;line-height:1.25rem}.af-tag--success{border-color:var(--color-green-600);color:var(--color-green-600)}.af-tag--error{border-color:var(--color-red-700);color:var(--color-red-700)}.af-tag--warning{border-color:var(--color-btn-business);color:var(--color-btn-business)}.af-tag--info{border-color:var(--color-axa);color:var(--color-axa)}@media (width <= 667px){.af-tag span{font-size:.875rem;line-height:1.094rem}}

package/dist/Tag/Tag.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tag/Tag.scss%23sass","../../src/common/common.scss","../../src/Tag/Tag.scss"],"names":[],"mappings":"AAEA,QAKE,kBAAA,CAKA,qBAAA,CAPA,wBAAA,CACA,oBAAA,CAKA,aCEW,CDAX,cAAA,CAVA,mBAAA,CAOA,4CCRuB,CDOvB,WAAA,CADA,sBAAA,CENF,qBAUA,CFGE,aACE,cAAA,CACA,eAAA,CACA,mBEDJ,CFIE,iBACE,oBAAA,CACA,aEFJ,CFKE,eACE,oBAAA,CACA,aEHJ,CFME,iBACE,oBAAA,CACA,aEJJ,CFOE,cACE,oBAAA,CACA,aELJ,CFQE,wBACE,aENF,iBAAA,CFQI,oBENJ,CACF","file":"Tag.css","sourcesContent":["@use \"../common/common\" as common;\n\n.af-tag {\n  display: inline-flex;\n  padding: 0.125rem 0.5rem;\n  border: 1px solid common.$color-gray;\n  border-radius: 0.25rem;\n  align-items: center;\n  justify-content: center;\n  gap: 0.625rem;\n  font-family: common.$font-family-base;\n  color: common.$color-gray;\n  background-color: common.$color-white;\n  cursor: default;\n\n  span {\n    font-size: 1rem;\n    font-weight: 600;\n    line-height: 1.25rem;\n  }\n\n  &--success {\n    border-color: common.$color-green-600;\n    color: common.$color-green-600;\n  }\n\n  &--error {\n    border-color: common.$color-red-700;\n    color: common.$color-red-700;\n  }\n\n  &--warning {\n    border-color: common.$color-btn-business;\n    color: common.$color-btn-business;\n  }\n\n  &--info {\n    border-color: common.$color-axa;\n    color: common.$color-axa;\n  }\n\n  @media (width <= 667px) {\n    span {\n      font-size: 0.875rem;\n      line-height: 1.094rem;\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-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-tag {\n  display: inline-flex;\n  padding: 0.125rem 0.5rem;\n  border: 1px solid common.$color-gray;\n  border-radius: 0.25rem;\n  align-items: center;\n  justify-content: center;\n  gap: 0.625rem;\n  font-family: common.$font-family-base;\n  color: common.$color-gray;\n  background-color: common.$color-white;\n  cursor: default;\n\n  span {\n    font-size: 1rem;\n    font-weight: 600;\n    line-height: 1.25rem;\n  }\n\n  &--success {\n    border-color: common.$color-green-600;\n    color: common.$color-green-600;\n  }\n\n  &--error {\n    border-color: common.$color-red-700;\n    color: common.$color-red-700;\n  }\n\n  &--warning {\n    border-color: common.$color-btn-business;\n    color: common.$color-btn-business;\n  }\n\n  &--info {\n    border-color: common.$color-axa;\n    color: common.$color-axa;\n  }\n\n  @media (width <= 667px) {\n    span {\n      font-size: 0.875rem;\n      line-height: 1.094rem;\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../../src/Tag/Tag.scss%23sass","../../src/Tag/Tag.scss"],"names":[],"mappings":"AAEA,QAKE,kBAAA,CAKA,mCAAA,CAPA,kCAAA,CACA,oBAAA,CAKA,uBAAA,CAEA,cAAA,CAVA,mBAAA,CAOA,mCAAA,CADA,WAAA,CADA,sBAAA,CCNF,qBAUA,CDGE,aACE,cAAA,CACA,eAAA,CACA,mBCDJ,CDIE,iBACE,mCAAA,CACA,4BCFJ,CDKE,eACE,iCAAA,CACA,0BCHJ,CDME,iBACE,sCAAA,CACA,+BCJJ,CDOE,cACE,6BAAA,CACA,sBCLJ,CDQE,wBACE,aCNF,iBAAA,CDQI,oBCNJ,CACF","file":"Tag.css","sourcesContent":["@use \"../common/common\" as common;\n\n.af-tag {\n  display: inline-flex;\n  padding: 0.125rem 0.5rem;\n  border: 1px solid var(--color-gray);\n  border-radius: 0.25rem;\n  align-items: center;\n  justify-content: center;\n  gap: 0.625rem;\n  font-family: var(--font-family-base);\n  color: var(--color-gray);\n  background-color: var(--color-white);\n  cursor: default;\n\n  span {\n    font-size: 1rem;\n    font-weight: 600;\n    line-height: 1.25rem;\n  }\n\n  &--success {\n    border-color: var(--color-green-600);\n    color: var(--color-green-600);\n  }\n\n  &--error {\n    border-color: var(--color-red-700);\n    color: var(--color-red-700);\n  }\n\n  &--warning {\n    border-color: var(--color-btn-business);\n    color: var(--color-btn-business);\n  }\n\n  &--info {\n    border-color: var(--color-axa);\n    color: var(--color-axa);\n  }\n\n  @media (width <= 667px) {\n    span {\n      font-size: 0.875rem;\n      line-height: 1.094rem;\n    }\n  }\n}\n","@use \"../common/common\" as common;\n\n.af-tag {\n  display: inline-flex;\n  padding: 0.125rem 0.5rem;\n  border: 1px solid var(--color-gray);\n  border-radius: 0.25rem;\n  align-items: center;\n  justify-content: center;\n  gap: 0.625rem;\n  font-family: var(--font-family-base);\n  color: var(--color-gray);\n  background-color: var(--color-white);\n  cursor: default;\n\n  span {\n    font-size: 1rem;\n    font-weight: 600;\n    line-height: 1.25rem;\n  }\n\n  &--success {\n    border-color: var(--color-green-600);\n    color: var(--color-green-600);\n  }\n\n  &--error {\n    border-color: var(--color-red-700);\n    color: var(--color-red-700);\n  }\n\n  &--warning {\n    border-color: var(--color-btn-business);\n    color: var(--color-btn-business);\n  }\n\n  &--info {\n    border-color: var(--color-axa);\n    color: var(--color-axa);\n  }\n\n  @media (width <= 667px) {\n    span {\n      font-size: 0.875rem;\n      line-height: 1.094rem;\n    }\n  }\n}\n"]}

package/dist/Tag/Tag.scss

@@ -3,14 +3,14 @@
 .af-tag {
   display: inline-flex;
   padding: 0.125rem 0.5rem;
-  border: 1px solid common.$color-gray;
+  border: 1px solid var(--color-gray);
   border-radius: 0.25rem;
   align-items: center;
   justify-content: center;
   gap: 0.625rem;
-  font-family: common.$font-family-base;
-  color: common.$color-gray;
-  background-color: common.$color-white;
+  font-family: var(--font-family-base);
+  color: var(--color-gray);
+  background-color: var(--color-white);
   cursor: default;
 
   span {
@@ -20,23 +20,23 @@
   }
 
   &--success {
-    border-color: common.$color-green-600;
-    color: common.$color-green-600;
+    border-color: var(--color-green-600);
+    color: var(--color-green-600);
   }
 
   &--error {
-    border-color: common.$color-red-700;
-    color: common.$color-red-700;
+    border-color: var(--color-red-700);
+    color: var(--color-red-700);
   }
 
   &--warning {
-    border-color: common.$color-btn-business;
-    color: common.$color-btn-business;
+    border-color: var(--color-btn-business);
+    color: var(--color-btn-business);
   }
 
   &--info {
-    border-color: common.$color-axa;
-    color: common.$color-axa;
+    border-color: var(--color-axa);
+    color: var(--color-axa);
   }
 
   @media (width <= 667px) {

package/dist/Title/Title.css

@@ -1 +1 @@
-.af-title{color:#333;gap:.25rem}.af-title__title{font-family:Publico Headline;font-weight:700;margin:0}.af-title__subtitle{display:block;font-family:Source Sans Pro,arial,sans-serif;font-size:1.125rem;font-weight:400;line-height:1.4rem}.af-title__icon{border-radius:.75rem;box-shadow:0 .125rem .5rem 0 #00008f26}.af-title__text-container{display:grid;gap:.25rem}.af-title:has(.af-title__icon){display:flex;gap:.75rem}.af-title:has(.af-title__icon) .af-title__title{color:#00008f}.af-title--xl h1.af-title__title{font-size:2rem;line-height:2.5rem}.af-title--l h1.af-title__title{font-size:1.5rem;line-height:1.875rem}@media (width <= 1023px){.af-title--xl h1.af-title__title{font-size:1.5rem;line-height:1.875rem}.af-title--l h1.af-title__title{font-size:1.25rem;line-height:1.56rem}.af-title span.af-title__subtitle{font-size:1rem;line-height:1.25rem}}
+.af-title{color:var(--color-gray-900);gap:.25rem}.af-title__title{font-family:var(--font-family-publico);font-weight:700;margin:0}.af-title__subtitle{display:block;font-family:var(--font-family-base);font-size:1.125rem;font-weight:400;line-height:1.4rem}.af-title__icon{border-radius:.75rem;box-shadow:0 .125rem .5rem 0 rgba(var(--color-axa),.15)}.af-title__text-container{display:grid;gap:.25rem}.af-title:has(.af-title__icon){display:flex;gap:.75rem}.af-title:has(.af-title__icon) .af-title__title{color:var(--color-axa)}.af-title--xl h1.af-title__title{font-size:2rem;line-height:2.5rem}.af-title--l h1.af-title__title{font-size:1.5rem;line-height:1.875rem}@media (width <= 1023px){.af-title--xl h1.af-title__title{font-size:1.5rem;line-height:1.875rem}.af-title--l h1.af-title__title{font-size:1.25rem;line-height:1.56rem}.af-title span.af-title__subtitle{font-size:1rem;line-height:1.25rem}}

package/dist/Title/Title.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Title/Title.scss%23sass","../../src/Title/Title.scss","../../src/common/common.scss"],"names":[],"mappings":"AAEA,UCAA,UAAA,CDCE,UCAF,CDGE,iBAEE,4BAAA,CACA,eAAA,CAFA,QCCJ,CDIE,oBACE,aAAA,CACA,4CEZqB,CFarB,kBAAA,CACA,eAAA,CACA,kBCFJ,CDKE,gBACE,oBAAA,CACA,sCCHJ,CDME,0BACE,YAAA,CACA,UCJJ,CDOE,+BACE,YAAA,CACA,UCLJ,CDOI,gDACE,aCLN,CDUI,iCACE,cAAA,CACA,kBCRN,CDaI,gCACE,gBAAA,CACA,oBCXN,CDgBA,yBAGM,iCACE,gBAAA,CACA,oBCfN,CDoBI,gCClBJ,iBAAA,CDoBM,mBClBN,CDsBE,kCACE,cAAA,CCpBJ,mBACF,CACA","file":"Title.css","sourcesContent":["@use \"../common/common\" as common;\n\n.af-title {\n  gap: 0.25rem;\n  color: common.$color-gray-900;\n\n  &__title {\n    margin: 0;\n    font-family: common.$font-family-publico;\n    font-weight: 700;\n  }\n\n  &__subtitle {\n    display: block;\n    font-family: common.$font-family-base;\n    font-size: 1.125rem;\n    font-weight: 400;\n    line-height: 1.4rem;\n  }\n\n  &__icon {\n    border-radius: 0.75rem;\n    box-shadow: 0 0.125rem 0.5rem 0 rgba(common.$color-axa, 0.15);\n  }\n\n  &__text-container {\n    display: grid;\n    gap: 0.25rem;\n  }\n\n  &:has(&__icon) {\n    display: flex;\n    gap: 0.75rem;\n\n    .af-title__title {\n      color: common.$color-axa;\n    }\n  }\n\n  &--xl {\n    h1.af-title__title {\n      font-size: 2rem;\n      line-height: 2.5rem;\n    }\n  }\n\n  &--l {\n    h1.af-title__title {\n      font-size: 1.5rem;\n      line-height: 1.875rem;\n    }\n  }\n}\n\n@media (width <= #{common.$breakpoint-md}) {\n  .af-title {\n    &--xl {\n      h1.af-title__title {\n        font-size: 1.5rem;\n        line-height: 1.875rem;\n      }\n    }\n\n    &--l {\n      h1.af-title__title {\n        font-size: 1.25rem;\n        line-height: 1.56rem;\n      }\n    }\n\n    span.af-title__subtitle {\n      font-size: 1rem;\n      line-height: 1.25rem;\n    }\n  }\n}\n","@use \"../common/common\" as common;\n\n.af-title {\n  gap: 0.25rem;\n  color: common.$color-gray-900;\n\n  &__title {\n    margin: 0;\n    font-family: common.$font-family-publico;\n    font-weight: 700;\n  }\n\n  &__subtitle {\n    display: block;\n    font-family: common.$font-family-base;\n    font-size: 1.125rem;\n    font-weight: 400;\n    line-height: 1.4rem;\n  }\n\n  &__icon {\n    border-radius: 0.75rem;\n    box-shadow: 0 0.125rem 0.5rem 0 rgba(common.$color-axa, 0.15);\n  }\n\n  &__text-container {\n    display: grid;\n    gap: 0.25rem;\n  }\n\n  &:has(&__icon) {\n    display: flex;\n    gap: 0.75rem;\n\n    .af-title__title {\n      color: common.$color-axa;\n    }\n  }\n\n  &--xl {\n    h1.af-title__title {\n      font-size: 2rem;\n      line-height: 2.5rem;\n    }\n  }\n\n  &--l {\n    h1.af-title__title {\n      font-size: 1.5rem;\n      line-height: 1.875rem;\n    }\n  }\n}\n\n@media (width <= #{common.$breakpoint-md}) {\n  .af-title {\n    &--xl {\n      h1.af-title__title {\n        font-size: 1.5rem;\n        line-height: 1.875rem;\n      }\n    }\n\n    &--l {\n      h1.af-title__title {\n        font-size: 1.25rem;\n        line-height: 1.56rem;\n      }\n    }\n\n    span.af-title__subtitle {\n      font-size: 1rem;\n      line-height: 1.25rem;\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-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"]}
+{"version":3,"sources":["../../src/Title/Title.scss%23sass","../../src/Title/Title.scss"],"names":[],"mappings":"AAEA,UCAA,2BAAA,CDCE,UCAF,CDGE,iBAEE,sCAAA,CACA,eAAA,CAFA,QCCJ,CDIE,oBACE,aAAA,CACA,mCAAA,CACA,kBAAA,CACA,eAAA,CACA,kBCFJ,CDKE,gBACE,oBAAA,CACA,uDCHJ,CDME,0BACE,YAAA,CACA,UCJJ,CDOE,+BACE,YAAA,CACA,UCLJ,CDOI,gDACE,sBCLN,CDUI,iCACE,cAAA,CACA,kBCRN,CDaI,gCACE,gBAAA,CACA,oBCXN,CDgBA,yBAGM,iCACE,gBAAA,CACA,oBCfN,CDoBI,gCClBJ,iBAAA,CDoBM,mBClBN,CDsBE,kCACE,cAAA,CCpBJ,mBACF,CACA","file":"Title.css","sourcesContent":["@use \"../common/common\" as common;\n\n.af-title {\n  gap: 0.25rem;\n  color: var(--color-gray-900);\n\n  &__title {\n    margin: 0;\n    font-family: var(--font-family-publico);\n    font-weight: 700;\n  }\n\n  &__subtitle {\n    display: block;\n    font-family: var(--font-family-base);\n    font-size: 1.125rem;\n    font-weight: 400;\n    line-height: 1.4rem;\n  }\n\n  &__icon {\n    border-radius: 0.75rem;\n    box-shadow: 0 0.125rem 0.5rem 0 rgba(var(--color-axa), 0.15);\n  }\n\n  &__text-container {\n    display: grid;\n    gap: 0.25rem;\n  }\n\n  &:has(&__icon) {\n    display: flex;\n    gap: 0.75rem;\n\n    .af-title__title {\n      color: var(--color-axa);\n    }\n  }\n\n  &--xl {\n    h1.af-title__title {\n      font-size: 2rem;\n      line-height: 2.5rem;\n    }\n  }\n\n  &--l {\n    h1.af-title__title {\n      font-size: 1.5rem;\n      line-height: 1.875rem;\n    }\n  }\n}\n\n@media (width <= #{common.$breakpoint-md}) {\n  .af-title {\n    &--xl {\n      h1.af-title__title {\n        font-size: 1.5rem;\n        line-height: 1.875rem;\n      }\n    }\n\n    &--l {\n      h1.af-title__title {\n        font-size: 1.25rem;\n        line-height: 1.56rem;\n      }\n    }\n\n    span.af-title__subtitle {\n      font-size: 1rem;\n      line-height: 1.25rem;\n    }\n  }\n}\n","@use \"../common/common\" as common;\n\n.af-title {\n  gap: 0.25rem;\n  color: var(--color-gray-900);\n\n  &__title {\n    margin: 0;\n    font-family: var(--font-family-publico);\n    font-weight: 700;\n  }\n\n  &__subtitle {\n    display: block;\n    font-family: var(--font-family-base);\n    font-size: 1.125rem;\n    font-weight: 400;\n    line-height: 1.4rem;\n  }\n\n  &__icon {\n    border-radius: 0.75rem;\n    box-shadow: 0 0.125rem 0.5rem 0 rgba(var(--color-axa), 0.15);\n  }\n\n  &__text-container {\n    display: grid;\n    gap: 0.25rem;\n  }\n\n  &:has(&__icon) {\n    display: flex;\n    gap: 0.75rem;\n\n    .af-title__title {\n      color: var(--color-axa);\n    }\n  }\n\n  &--xl {\n    h1.af-title__title {\n      font-size: 2rem;\n      line-height: 2.5rem;\n    }\n  }\n\n  &--l {\n    h1.af-title__title {\n      font-size: 1.5rem;\n      line-height: 1.875rem;\n    }\n  }\n}\n\n@media (width <= #{common.$breakpoint-md}) {\n  .af-title {\n    &--xl {\n      h1.af-title__title {\n        font-size: 1.5rem;\n        line-height: 1.875rem;\n      }\n    }\n\n    &--l {\n      h1.af-title__title {\n        font-size: 1.25rem;\n        line-height: 1.56rem;\n      }\n    }\n\n    span.af-title__subtitle {\n      font-size: 1rem;\n      line-height: 1.25rem;\n    }\n  }\n}\n"]}

package/dist/Title/Title.scss

@@ -2,17 +2,17 @@
 
 .af-title {
   gap: 0.25rem;
-  color: common.$color-gray-900;
+  color: var(--color-gray-900);
 
   &__title {
     margin: 0;
-    font-family: common.$font-family-publico;
+    font-family: var(--font-family-publico);
     font-weight: 700;
   }
 
   &__subtitle {
     display: block;
-    font-family: common.$font-family-base;
+    font-family: var(--font-family-base);
     font-size: 1.125rem;
     font-weight: 400;
     line-height: 1.4rem;
@@ -20,7 +20,7 @@
 
   &__icon {
     border-radius: 0.75rem;
-    box-shadow: 0 0.125rem 0.5rem 0 rgba(common.$color-axa, 0.15);
+    box-shadow: 0 0.125rem 0.5rem 0 rgba(var(--color-axa), 0.15);
   }
 
   &__text-container {
@@ -33,7 +33,7 @@
     gap: 0.75rem;
 
     .af-title__title {
-      color: common.$color-axa;
+      color: var(--color-axa);
     }
   }
 

package/dist/common/tokens.css

@@ -0,0 +1 @@
+:root{--font-family-sans-serif:Source Sans Pro,arial,sans-serif;--font-family-serif:georgia,times,Times New Roman,serif;--font-family-base:Source Sans Pro,arial,sans-serif;--font-family-publico-bold:Publico Headline Bold;--font-family-publico:Publico Headline;--color-white:#fff;--color-black:#000;--color-axa:#00008f;--color-blue-1:#000072;--color-blue-2:#f8f8ff;--color-blue-3:#36f;--color-ocean-blue:#4976ba;--color-btn-light:#3333a5;--color-focus:#36f;--color-btn-tertiary-bg:#eef;--color-btn-tertiary-bg-darker:#e4e4ff;--color-btn-tertiary-bg-lighter:#f8f8ff;--color-red:#ff1721;--color-red-700:#c91432;--color-btn-error-text:#a11028;--color-btn-error-bg:#fff3f5;--error-custom-border:#d18e8e;--error-custom-bg:#ffbfbf;--color-alert-danger-color-border:#c8b282;--color-alert-danger-bg-color:#f1d596;--color-btn-business:#c94e14;--color-btn-business-dark:#a8391c;--color-btn-business-light:#df7e65;--color-gray:#5f5f5f;--color-gray-1:#ccc;--color-gray-200:#f3f3f3;--color-gray-300:#e9ecf2;--color-gray-400:#e5e5e5;--color-gray-500:#999;--color-gray-700:#5f5f5f;--color-gray-900:#333;--color-btn-disabled-text:#999;--color-border:#f3f3f3;--color-green-600:#118635;--sizing-u0:0;--sizing-u05:0.4rem;--sizing-u1:0.8rem;--sizing-u2:1.6rem;--sizing-u3:2.4rem;--sizing-u4:3.2rem;--sizing-u5:4rem;--sizing-u6:4.8rem;--sizing-u7:5.6rem;--sizing-u8:6.4rem;--sizing-u9:7.2rem;--sizing-u10:8rem;--spacing-u05:0.4rem;--spacing-u0:0;--spacing-u1:0.8rem;--spacing-u2:1.6rem;--spacing-u3:2.4rem;--spacing-u4:3.2rem;--spacing-u5:4rem;--spacing-u6:4.8rem;--spacing-u7:5.6rem;--spacing-u8:6.4rem;--spacing-u9:7.2rem;--spacing-u10:8rem;--spacing-u11:8.8rem;--spacing-u12:9.6rem;--spacing-u13:10.4rem;--spacing-u14:11.2rem;--spacing-u15:12rem;--spacing-u16:12.8rem;--spacing-u17:13.6rem;--spacing-u18:14.4rem;--spacing-u19:15.2rem;--spacing-u20:16rem;--screen-size-s:668px;--screen-size-m:1024px;--screen-size-l:1280px;--screen-size-xl:1600px;--screen-size-oldl:1200px;--screen-size-oldxl:1540px;--breakpoint-xs:0;--breakpoint-sm:667px;--breakpoint-md:1023px;--breakpoint-lg:1279px;--breakpoint-xl:1599px;--default-border-radius:4px;--transition-duration:0.2s}