@axa-fr/design-system-look-and-feel-css 1.0.4 → 1.0.5-alpha.243

package/dist/Modal/Modal.css.map

@@ -1 +1 @@
-{"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"]}
+{"version":3,"sources":["../../src/Modal/Modal.scss%23sass","../../src/Modal/Modal.scss"],"names":[],"mappings":"AAEA,UACE,mDAAA,CCDF,uDAAA,CDGE,wDAAA,CACA,yDAAA,CACA,0DAAA,CAGA,WAAA,CACA,6BAAA,CAFA,8BCAF,CDIE,oBAEE,gCAAA,CADA,UCDJ,CDKE,kBAIE,6CAAA,CAHA,YAAA,CAMA,wBAAA,CAFA,0CAAA,CACA,8BAAA,CAJA,mCAAA,CACA,mCCCJ,CDKI,iCAIE,iBAAA,CADA,kBAAA,CADA,kBAAA,CAGA,gBAAA,CAJA,iBCCN,CDMI,wBACE,YAAA,CAMA,UAAA,CALA,qBAAA,CACA,gDAAA,CAGA,kBCLN,CDQM,gCAME,2BAAA,CAHA,sCAAA,CACA,kCAAA,CAFA,eAAA,CAGA,sCAAA,CAJA,QCDR,CDSM,iCAIE,2BAAA,CAFA,mCAAA,CADA,kBAAA,CAEA,uCCNR,CDUM,4BACE,cAAA,CACA,qBCRR,CDaE,gBACE,4BCXJ,CDcE,kBACE,YAAA,CAGA,wBAAA,CADA,wBAAA,CADA,wECVJ,CDcI,iCACE,WCZN,CDgBE,uBAhFF,UCmEE,mDAAA,CDeE,uDAAA,CCbF,wDAAA,CDeE,yDAAA,CACA,4DAAA,CAEA,gBCdF,CDiBI,iCAEE,iBAAA,CADA,eCdN,CACF","file":"Modal.css","sourcesContent":["@use \"../common/common.scss\" as common;\n\n.af-modal {\n  --spacing-modal: calc(16 / var(--font-size-base) * 1rem);\n  --font-size-heading: calc(20 / var(--font-size-base) * 1rem);\n  --font-size-subtitle: calc(16 / var(--font-size-base) * 1rem);\n  --line-height-heading: calc(25 / var(--font-size-base) * 1rem);\n  --line-height-subtitle: calc(20 / var(--font-size-base) * 1rem);\n\n  padding: var(--spacing-modal) 0;\n  border: none;\n  border-radius: var(--radius-8);\n\n  &::backdrop {\n    opacity: 0.4;\n    background: var(--color-gray-900);\n  }\n\n  &__header {\n    display: grid;\n    padding-bottom: var(--spacing-modal);\n    padding-inline: var(--spacing-modal);\n    border-bottom: 1px solid var(--color-gray-400);\n    grid-template-areas: \"headertitle closebtn\";\n    grid-template-columns: 1fr auto;\n    gap: var(--spacing-modal);\n\n    > .af-btn-client {\n      width: fit-content;\n      height: fit-content;\n      grid-area: closebtn;\n      align-items: start;\n      justify-self: end;\n    }\n\n    &-title {\n      display: grid;\n      grid-area: headertitle;\n      grid-template-areas:\n        \"icon title\"\n        \"icon subtitle\";\n      justify-self: start;\n      gap: 0 1rem;\n\n      &-heading {\n        margin: 0;\n        grid-area: title;\n        font-family: var(--font-family-publico);\n        font-size: var(--font-size-heading);\n        line-height: var(--line-height-heading);\n        color: var(--color-gray-900);\n      }\n\n      &-subtitle {\n        grid-area: subtitle;\n        font-size: var(--font-size-subtitle);\n        line-height: var(--line-height-subtitle);\n        color: var(--color-gray-700);\n      }\n\n      svg {\n        grid-area: icon;\n        fill: var(--color-axa);\n      }\n    }\n  }\n\n  &__body {\n    padding: var(--spacing-modal);\n  }\n\n  &__footer {\n    display: flex;\n    padding: var(--spacing-modal) var(--spacing-modal) 0 var(--spacing-modal);\n    justify-content: flex-end;\n    gap: var(--spacing-modal);\n\n    .af-btn-client {\n      flex-grow: 1;\n    }\n  }\n\n  @media (width > #{common.$breakpoint-sm}) {\n    --spacing-modal: calc(24 / var(--font-size-base) * 1rem);\n    --font-size-heading: calc(24 / var(--font-size-base) * 1rem);\n    --font-size-subtitle: calc(18 / var(--font-size-base) * 1rem);\n    --line-height-heading: calc(30 / var(--font-size-base) * 1rem);\n    --line-height-subtitle: calc(22.5 / var(--font-size-base) * 1rem);\n\n    max-width: revert;\n\n    &__footer {\n      .af-btn-client {\n        min-width: 180px;\n        flex-grow: inherit;\n      }\n    }\n  }\n}\n","@use \"../common/common.scss\" as common;\n\n.af-modal {\n  --spacing-modal: calc(16 / var(--font-size-base) * 1rem);\n  --font-size-heading: calc(20 / var(--font-size-base) * 1rem);\n  --font-size-subtitle: calc(16 / var(--font-size-base) * 1rem);\n  --line-height-heading: calc(25 / var(--font-size-base) * 1rem);\n  --line-height-subtitle: calc(20 / var(--font-size-base) * 1rem);\n\n  padding: var(--spacing-modal) 0;\n  border: none;\n  border-radius: var(--radius-8);\n\n  &::backdrop {\n    opacity: 0.4;\n    background: var(--color-gray-900);\n  }\n\n  &__header {\n    display: grid;\n    padding-bottom: var(--spacing-modal);\n    padding-inline: var(--spacing-modal);\n    border-bottom: 1px solid var(--color-gray-400);\n    grid-template-areas: \"headertitle closebtn\";\n    grid-template-columns: 1fr auto;\n    gap: var(--spacing-modal);\n\n    > .af-btn-client {\n      width: fit-content;\n      height: fit-content;\n      grid-area: closebtn;\n      align-items: start;\n      justify-self: end;\n    }\n\n    &-title {\n      display: grid;\n      grid-area: headertitle;\n      grid-template-areas:\n        \"icon title\"\n        \"icon subtitle\";\n      justify-self: start;\n      gap: 0 1rem;\n\n      &-heading {\n        margin: 0;\n        grid-area: title;\n        font-family: var(--font-family-publico);\n        font-size: var(--font-size-heading);\n        line-height: var(--line-height-heading);\n        color: var(--color-gray-900);\n      }\n\n      &-subtitle {\n        grid-area: subtitle;\n        font-size: var(--font-size-subtitle);\n        line-height: var(--line-height-subtitle);\n        color: var(--color-gray-700);\n      }\n\n      svg {\n        grid-area: icon;\n        fill: var(--color-axa);\n      }\n    }\n  }\n\n  &__body {\n    padding: var(--spacing-modal);\n  }\n\n  &__footer {\n    display: flex;\n    padding: var(--spacing-modal) var(--spacing-modal) 0 var(--spacing-modal);\n    justify-content: flex-end;\n    gap: var(--spacing-modal);\n\n    .af-btn-client {\n      flex-grow: 1;\n    }\n  }\n\n  @media (width > #{common.$breakpoint-sm}) {\n    --spacing-modal: calc(24 / var(--font-size-base) * 1rem);\n    --font-size-heading: calc(24 / var(--font-size-base) * 1rem);\n    --font-size-subtitle: calc(18 / var(--font-size-base) * 1rem);\n    --line-height-heading: calc(30 / var(--font-size-base) * 1rem);\n    --line-height-subtitle: calc(22.5 / var(--font-size-base) * 1rem);\n\n    max-width: revert;\n\n    &__footer {\n      .af-btn-client {\n        min-width: 180px;\n        flex-grow: inherit;\n      }\n    }\n  }\n}\n"]}

package/dist/Modal/Modal.scss

@@ -1,129 +1,98 @@
-@use "../common/common" as common;
+@use "../common/common.scss" as common;
 
 .af-modal {
-  position: fixed;
-  width: 100%;
-  margin: 0 auto;
-  padding: 0 0 1.5rem;
+  --spacing-modal: calc(16 / var(--font-size-base) * 1rem);
+  --font-size-heading: calc(20 / var(--font-size-base) * 1rem);
+  --font-size-subtitle: calc(16 / var(--font-size-base) * 1rem);
+  --line-height-heading: calc(25 / var(--font-size-base) * 1rem);
+  --line-height-subtitle: calc(20 / var(--font-size-base) * 1rem);
+
+  padding: var(--spacing-modal) 0;
   border: none;
-  border-radius: 0.5rem;
-  background-color: var(--color-white);
+  border-radius: var(--radius-8);
 
   &::backdrop {
     opacity: 0.4;
     background: var(--color-gray-900);
   }
 
-  &__top {
-    position: sticky;
-    z-index: 5;
-    top: 0;
-    display: flex;
-    padding: 1.5rem;
+  &__header {
+    display: grid;
+    padding-bottom: var(--spacing-modal);
+    padding-inline: var(--spacing-modal);
     border-bottom: 1px solid var(--color-gray-400);
-    align-items: center;
-    gap: 1rem;
-    background-color: var(--color-white);
-
-    &-title {
-      display: flex;
-      width: 100%;
-      margin: 0;
+    grid-template-areas: "headertitle closebtn";
+    grid-template-columns: 1fr auto;
+    gap: var(--spacing-modal);
+
+    > .af-btn-client {
+      width: fit-content;
+      height: fit-content;
+      grid-area: closebtn;
       align-items: start;
-      justify-content: space-between;
-      color: var(--color-gray-900);
+      justify-self: end;
+    }
 
-      &-text {
+    &-title {
+      display: grid;
+      grid-area: headertitle;
+      grid-template-areas:
+        "icon title"
+        "icon subtitle";
+      justify-self: start;
+      gap: 0 1rem;
+
+      &-heading {
+        margin: 0;
+        grid-area: title;
         font-family: var(--font-family-publico);
-        font-size: 1.5rem;
-        line-height: 1.875rem;
+        font-size: var(--font-size-heading);
+        line-height: var(--line-height-heading);
+        color: var(--color-gray-900);
       }
 
       &-subtitle {
-        font-family: var(--font-family-sans-serif);
-        font-size: 1.125rem;
-        font-weight: 400;
-        line-height: 1.406rem;
+        grid-area: subtitle;
+        font-size: var(--font-size-subtitle);
+        line-height: var(--line-height-subtitle);
         color: var(--color-gray-700);
       }
 
-      &-close-btn {
-        all: unset;
-        display: flex;
-        width: 2rem;
-        height: 2rem;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
+      svg {
+        grid-area: icon;
         fill: var(--color-axa);
       }
-
-      :hover {
-        background: none;
-      }
-
-      :focus {
-        border: none;
-        background: none;
-      }
     }
   }
 
-  &__content {
-    z-index: 0;
-    display: flex;
-    margin-top: 2.5rem;
-    padding: 0 1.5rem;
-    flex-direction: column;
-    gap: 2.5rem;
-    font-family: var(--font-family-base);
-    font-size: 1.125rem;
-    font-weight: 400;
+  &__body {
+    padding: var(--spacing-modal);
   }
 
-  &__actions {
+  &__footer {
     display: flex;
-    padding-top: 0;
-    flex-direction: column-reverse;
-    align-items: flex-end;
+    padding: var(--spacing-modal) var(--spacing-modal) 0 var(--spacing-modal);
     justify-content: flex-end;
-    gap: 1rem;
+    gap: var(--spacing-modal);
 
-    // force fullwidth in mobile
-    & * {
-      width: 100%;
+    .af-btn-client {
       flex-grow: 1;
     }
-
-    &--fullWidth {
-      & * {
-        width: 100%;
-        flex-grow: 1;
-      }
-    }
   }
-}
 
-@media only screen and (width >= #{common.$screen-size-m}) {
-  .af-modal {
-    min-width: 48rem;
-    max-width: 72rem;
-    margin: auto;
+  @media (width > #{common.$breakpoint-sm}) {
+    --spacing-modal: calc(24 / var(--font-size-base) * 1rem);
+    --font-size-heading: calc(24 / var(--font-size-base) * 1rem);
+    --font-size-subtitle: calc(18 / var(--font-size-base) * 1rem);
+    --line-height-heading: calc(30 / var(--font-size-base) * 1rem);
+    --line-height-subtitle: calc(22.5 / var(--font-size-base) * 1rem);
 
-    &__actions {
-      flex-direction: row-reverse;
-      justify-content: flex-start;
-
-      & * {
-        width: auto;
-        flex-grow: unset;
-      }
+    max-width: revert;
 
-      &--fullWidth {
-        & * {
-          width: 100%;
-          flex-grow: 1;
-        }
+    &__footer {
+      .af-btn-client {
+        min-width: 180px;
+        flex-grow: inherit;
       }
     }
   }

package/dist/Title/Title.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/common/reboot.scss","../../src/Title/Title.scss","../../src/Title/Title.scss%23sass"],"names":[],"mappings":"AAAA,iBCGA,qBACA,CDEA,KACE,sBAAA,CACA,gBAAA,CACA,6BAAA,CAAA,0BAAA,CAAA,qBAAA,CACA,uCCCF,CDEA,sEAUE,aCCF,CDEA,KAQE,qBAAA,CADA,UAAA,CALA,4CAAA,CACA,cAAA,CACA,eAAA,CACA,eAAA,CAJA,QAAA,CAKA,eCGF,CDEA,sBACE,mBCCF,CDEA,GACE,kBAAA,CACA,QAAA,CACA,gBCCF,CDEA,kBCOA,mBAAA,CDDE,YCEF,CDEA,EAEE,kBAAA,CADA,YCEF,CDEA,sCAEE,eAAA,CAIA,WAAA,CAHA,yBAAA,CACA,wCAAA,CAAA,gCAAA,CACA,qCAAA,CAAA,6BCEF,CDEA,QAEE,iBAAA,CACA,mBCCF,CDEA,iBALE,kBCUF,CDLA,SAGE,YCEF,CDEA,wBAIE,eCCF,CDEA,GACE,eCCF,CDEA,GACE,mBAAA,CACA,aCCF,CDEA,WACE,eCCF,CDEA,SAEE,kBCCF,CDEA,MACE,aCCF,CDEA,QAIE,aAAA,CACA,aAAA,CAHA,iBAAA,CACA,sBCGF,CDEA,IACE,aCCF,CDEA,IACE,SCCF,CDEA,EAGE,wBAAA,CADA,aAAA,CADA,oBCGF,CDEA,QAEE,aAAA,CADA,yBCEF,CDOA,uFAGE,aAAA,CADA,oBCEF,CDEA,+BACE,SCCF,CDEA,kBAIE,sFAAA,CAEA,aCAF,CDGA,IAEE,kBAAA,CADA,YAAA,CAEA,aCAF,CDGA,OACE,eCAF,CDGA,IACE,iBCCF,CDGA,QAHE,qBCKF,CDFA,IAEE,eCAF,CDGA,MACE,wBCAF,CDGA,QAGE,mBAAA,CAEA,aAAA,CAHA,oBAAA,CADA,iBAAA,CAGA,eCCF,CDGA,GACE,kBCAF,CDGA,OACE,eCAF,CDGA,sCAME,mBAAA,CACA,iBAAA,CACA,mBAAA,CAHA,QCGF,CDGA,aAEE,gBCAF,CDGA,cAEE,mBCAF,CDGA,OACE,gBCAF,CDGA,gDAIE,yBAAA,CAAA,iBCAF,CDGA,aACE,kBAAA,CACA,yCCAF,CDGA,4GAIE,cCAF,CDGA,wHAKE,iBAAA,CADA,SCCF,CDGA,uCAEE,qBAAA,CACA,SCAF,CDGA,+EAIE,0BAAA,CAAA,kBCAF,CDGA,SACE,aAAA,CACA,eCAF,CDGA,SAIE,QAAA,CAFA,QAAA,CADA,WAAA,CAEA,SCCF,CDGA,OASE,aAAA,CARA,aAAA,CAKA,gBAAA,CACA,mBAAA,CAHA,mBAAA,CADA,cAAA,CAEA,SAAA,CAGA,kBAAA,CANA,UCOF,CDGA,SACE,sBCAF,CDGA,kFAEE,WCAF,CDGA,cAEE,uBAAA,CAAA,eAAA,CADA,mBCCF,CDGA,yCACE,uBAAA,CAAA,eCAF,CDGA,6BAEE,yBAAA,CAAA,iBAAA,CADA,YCCF,CDGA,OACE,oBCAF,CDGA,QAEE,cAAA,CADA,iBCCF,CDGA,SACE,YCAF,CDGA,SACE,sBCAF,CCvUA,UACE,gBAAA,CAIA,2BAAA,CAFA,YAAA,CACA,iBD0UF,CCvUE,iBAGE,sCAAA,CACA,eAAA,CAFA,+BAAA,CADA,QD4UJ,CCtUE,oBACE,aAAA,CAEA,mCAAA,CACA,kBAAA,CACA,eAAA,CAHA,+BAAA,CAIA,kBDwUJ,CCrUE,gBACE,oBAAA,CAGA,uDAAA,CAFA,aAAA,CACA,YDwUJ,CCpUE,+BACE,cAAA,CACA,kBDsUJ,CCnUE,8BACE,gBAAA,CACA,oBDqUJ,CClUE,+BACE,gBAAA,CAEA,8BDmUJ,CCjUI,gDACE,sBDmUN,CC9TA,yBAEI,+BACE,gBAAA,CACA,oBDgUJ,CC7TE,8BACE,iBAAA,CACA,mBD+TJ,CC5TE,oBACE,cAAA,CACA,mBD8TJ,CACF","file":"Title.css","sourcesContent":["*,\n::after,\n::before {\n  box-sizing: border-box;\n}\n\nhtml {\n  font-family: sans-serif;\n  line-height: 1.15;\n  text-size-adjust: 100%;\n  -webkit-tap-highlight-color: transparent;\n}\n\narticle,\naside,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmain,\nnav,\nsection {\n  display: block;\n}\n\nbody {\n  margin: 0;\n  font-family: \"Source Sans Pro\", Arial, sans-serif;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5;\n  text-align: left;\n  color: #333;\n  background-color: #fff;\n}\n\n[tabindex=\"-1\"]:focus {\n  outline: 0 !important;\n}\n\nhr {\n  box-sizing: content-box;\n  height: 0;\n  overflow: visible;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  margin-top: 0;\n  margin-bottom: 0.5rem;\n}\n\np {\n  margin-top: 0;\n  margin-bottom: 1rem;\n}\n\nabbr[data-original-title],\nabbr[title] {\n  border-bottom: 0;\n  text-decoration: underline;\n  text-decoration: underline dotted;\n  text-decoration-skip-ink: none;\n  cursor: help;\n}\n\naddress {\n  margin-bottom: 1rem;\n  font-style: normal;\n  line-height: inherit;\n}\n\ndl,\nol,\nul {\n  margin-top: 0;\n  margin-bottom: 1rem;\n}\n\nol ol,\nol ul,\nul ol,\nul ul {\n  margin-bottom: 0;\n}\n\ndt {\n  font-weight: 700;\n}\n\ndd {\n  margin-bottom: 0.5rem;\n  margin-left: 0;\n}\n\nblockquote {\n  margin: 0 0 1rem;\n}\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\nsmall {\n  font-size: 80%;\n}\n\nsub,\nsup {\n  position: relative;\n  vertical-align: baseline;\n  font-size: 75%;\n  line-height: 0;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\na {\n  text-decoration: none;\n  color: #00008f;\n  background-color: transparent;\n}\n\na:hover {\n  text-decoration: underline;\n  color: #000043;\n}\n\na:not([href], [tabindex]) {\n  text-decoration: none;\n  color: inherit;\n}\n\na:not([href], [tabindex]):focus,\na:not([href], [tabindex]):hover {\n  text-decoration: none;\n  color: inherit;\n}\n\na:not([href], [tabindex]):focus {\n  outline: 0;\n}\n\ncode,\nkbd,\npre,\nsamp {\n  font-family: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n    \"Courier New\", monospace;\n  font-size: 1em;\n}\n\npre {\n  margin-top: 0;\n  margin-bottom: 1rem;\n  overflow: auto;\n}\n\nfigure {\n  margin: 0 0 1rem;\n}\n\nimg {\n  border-style: none;\n  vertical-align: middle;\n}\n\nsvg {\n  vertical-align: middle;\n  overflow: hidden;\n}\n\ntable {\n  border-collapse: collapse;\n}\n\ncaption {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  caption-side: bottom;\n  text-align: left;\n  color: #6c757d;\n}\n\nth {\n  text-align: inherit;\n}\n\nbutton {\n  border-radius: 0;\n}\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  margin: 0;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\nbutton,\ninput {\n  overflow: visible;\n}\n\nbutton,\nselect {\n  text-transform: none;\n}\n\nselect {\n  word-wrap: normal;\n}\n\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"],\nbutton {\n  appearance: button;\n}\n\nbutton:focus {\n  outline: 1px dotted;\n  outline: 5px auto -webkit-focus-ring-color;\n}\n\n[type=\"button\"]:not(:disabled),\n[type=\"reset\"]:not(:disabled),\n[type=\"submit\"]:not(:disabled),\nbutton:not(:disabled) {\n  cursor: pointer;\n}\n\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner,\nbutton::-moz-focus-inner {\n  padding: 0;\n  border-style: none;\n}\n\ninput[type=\"checkbox\"],\ninput[type=\"radio\"] {\n  box-sizing: border-box;\n  padding: 0;\n}\n\ninput[type=\"date\"],\ninput[type=\"datetime-local\"],\ninput[type=\"month\"],\ninput[type=\"time\"] {\n  appearance: listbox;\n}\n\ntextarea {\n  overflow: auto;\n  resize: vertical;\n}\n\nfieldset {\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n\nlegend {\n  display: block;\n  width: 100%;\n  max-width: 100%;\n  margin-bottom: 0.5rem;\n  padding: 0;\n  font-size: 1.5rem;\n  line-height: inherit;\n  white-space: normal;\n  color: inherit;\n}\n\nprogress {\n  vertical-align: baseline;\n}\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n  height: auto;\n}\n\n[type=\"search\"] {\n  outline-offset: -2px;\n  appearance: none;\n}\n\n[type=\"search\"]::-webkit-search-decoration {\n  appearance: none;\n}\n\n::-webkit-file-upload-button {\n  font: inherit;\n  appearance: button;\n}\n\noutput {\n  display: inline-block;\n}\n\nsummary {\n  display: list-item;\n  cursor: pointer;\n}\n\ntemplate {\n  display: none;\n}\n\n[hidden] {\n  display: none !important;\n}\n","@use \"../common/common\" as common;\n@use \"../common/reboot\";\n\n.af-title {\n  --texts-column: 1;\n\n  display: grid;\n  gap: common.rem(4) common.rem(12);\n  color: var(--color-gray-900);\n\n  &__title {\n    margin: 0;\n    grid-column: var(--texts-column);\n    font-family: var(--font-family-publico);\n    font-weight: 700;\n  }\n\n  &__subtitle {\n    display: block;\n    grid-column: var(--texts-column);\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    grid-column: 1;\n    grid-row: 1/3;\n    box-shadow: 0 0.125rem 0.5rem 0 rgba(var(--color-axa), 0.15);\n  }\n\n  &--xl &__title {\n    font-size: 2rem;\n    line-height: 2.5rem;\n  }\n\n  &--l &__title {\n    font-size: 1.5rem;\n    line-height: 1.875rem;\n  }\n\n  &:has(&__icon) {\n    --texts-column: 2;\n\n    grid-template-columns: auto 1fr;\n\n    .af-title__title {\n      color: var(--color-axa);\n    }\n  }\n}\n\n@media (width <= #{common.$breakpoint-md}) {\n  .af-title {\n    &--xl &__title {\n      font-size: 1.5rem;\n      line-height: 1.875rem;\n    }\n\n    &--l &__title {\n      font-size: 1.25rem;\n      line-height: 1.56rem;\n    }\n\n    &__subtitle {\n      font-size: 1rem;\n      line-height: 1.25rem;\n    }\n  }\n}\n","@use \"../common/common\" as common;\n@use \"../common/reboot\";\n\n.af-title {\n  --texts-column: 1;\n\n  display: grid;\n  gap: common.rem(4) common.rem(12);\n  color: var(--color-gray-900);\n\n  &__title {\n    margin: 0;\n    grid-column: var(--texts-column);\n    font-family: var(--font-family-publico);\n    font-weight: 700;\n  }\n\n  &__subtitle {\n    display: block;\n    grid-column: var(--texts-column);\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    grid-column: 1;\n    grid-row: 1/3;\n    box-shadow: 0 0.125rem 0.5rem 0 rgba(var(--color-axa), 0.15);\n  }\n\n  &--xl &__title {\n    font-size: 2rem;\n    line-height: 2.5rem;\n  }\n\n  &--l &__title {\n    font-size: 1.5rem;\n    line-height: 1.875rem;\n  }\n\n  &:has(&__icon) {\n    --texts-column: 2;\n\n    grid-template-columns: auto 1fr;\n\n    .af-title__title {\n      color: var(--color-axa);\n    }\n  }\n}\n\n@media (width <= #{common.$breakpoint-md}) {\n  .af-title {\n    &--xl &__title {\n      font-size: 1.5rem;\n      line-height: 1.875rem;\n    }\n\n    &--l &__title {\n      font-size: 1.25rem;\n      line-height: 1.56rem;\n    }\n\n    &__subtitle {\n      font-size: 1rem;\n      line-height: 1.25rem;\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../../src/common/reboot.scss","../../src/Title/Title.scss","../../src/Title/Title.scss%23sass"],"names":[],"mappings":"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","file":"Title.css","sourcesContent":["*,\n::after,\n::before {\n  box-sizing: border-box;\n}\n\nhtml {\n  font-family: sans-serif;\n  line-height: 1.15;\n  text-size-adjust: 100%;\n  -webkit-tap-highlight-color: transparent;\n}\n\narticle,\naside,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmain,\nnav,\nsection {\n  display: block;\n}\n\nbody {\n  margin: 0;\n  font-family: \"Source Sans Pro\", Arial, sans-serif;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5;\n  text-align: left;\n  color: #333;\n  background-color: #fff;\n}\n\n[tabindex=\"-1\"]:focus {\n  outline: 0 !important;\n}\n\nhr {\n  box-sizing: content-box;\n  height: 0;\n  overflow: visible;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  margin-top: 0;\n  margin-bottom: 0.5rem;\n}\n\np {\n  margin-top: 0;\n  margin-bottom: 1rem;\n}\n\nabbr[data-original-title],\nabbr[title] {\n  border-bottom: 0;\n  text-decoration: underline;\n  text-decoration: underline dotted;\n  text-decoration-skip-ink: none;\n  cursor: help;\n}\n\naddress {\n  margin-bottom: 1rem;\n  font-style: normal;\n  line-height: inherit;\n}\n\ndl,\nol,\nul {\n  margin-top: 0;\n  margin-bottom: 1rem;\n}\n\nol ol,\nol ul,\nul ol,\nul ul {\n  margin-bottom: 0;\n}\n\ndt {\n  font-weight: 700;\n}\n\ndd {\n  margin-bottom: 0.5rem;\n  margin-left: 0;\n}\n\nblockquote {\n  margin: 0 0 1rem;\n}\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\nsmall {\n  font-size: 80%;\n}\n\nsub,\nsup {\n  position: relative;\n  vertical-align: baseline;\n  font-size: 75%;\n  line-height: 0;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\na {\n  text-decoration: none;\n  color: #00008f;\n  background-color: transparent;\n}\n\na:hover {\n  text-decoration: underline;\n  color: #000043;\n}\n\na:not([href], [tabindex]) {\n  text-decoration: none;\n  color: inherit;\n}\n\na:not([href], [tabindex]):focus,\na:not([href], [tabindex]):hover {\n  text-decoration: none;\n  color: inherit;\n}\n\na:not([href], [tabindex]):focus {\n  outline: 0;\n}\n\ncode,\nkbd,\npre,\nsamp {\n  font-family:\n    SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\",\n    monospace;\n  font-size: 1em;\n}\n\npre {\n  margin-top: 0;\n  margin-bottom: 1rem;\n  overflow: auto;\n}\n\nfigure {\n  margin: 0 0 1rem;\n}\n\nimg {\n  border-style: none;\n  vertical-align: middle;\n}\n\nsvg {\n  vertical-align: middle;\n  overflow: hidden;\n}\n\ntable {\n  border-collapse: collapse;\n}\n\ncaption {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  caption-side: bottom;\n  text-align: left;\n  color: #6c757d;\n}\n\nth {\n  text-align: inherit;\n}\n\nbutton {\n  border-radius: 0;\n}\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  margin: 0;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\nbutton,\ninput {\n  overflow: visible;\n}\n\nbutton,\nselect {\n  text-transform: none;\n}\n\nselect {\n  word-wrap: normal;\n}\n\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"],\nbutton {\n  appearance: button;\n}\n\nbutton:focus {\n  outline: 1px dotted;\n  outline: 5px auto -webkit-focus-ring-color;\n}\n\n[type=\"button\"]:not(:disabled),\n[type=\"reset\"]:not(:disabled),\n[type=\"submit\"]:not(:disabled),\nbutton:not(:disabled) {\n  cursor: pointer;\n}\n\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner,\nbutton::-moz-focus-inner {\n  padding: 0;\n  border-style: none;\n}\n\ninput[type=\"checkbox\"],\ninput[type=\"radio\"] {\n  box-sizing: border-box;\n  padding: 0;\n}\n\ninput[type=\"date\"],\ninput[type=\"datetime-local\"],\ninput[type=\"month\"],\ninput[type=\"time\"] {\n  appearance: listbox;\n}\n\ntextarea {\n  overflow: auto;\n  resize: vertical;\n}\n\nfieldset {\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n\nlegend {\n  display: block;\n  width: 100%;\n  max-width: 100%;\n  margin-bottom: 0.5rem;\n  padding: 0;\n  font-size: 1.5rem;\n  line-height: inherit;\n  white-space: normal;\n  color: inherit;\n}\n\nprogress {\n  vertical-align: baseline;\n}\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n  height: auto;\n}\n\n[type=\"search\"] {\n  outline-offset: -2px;\n  appearance: none;\n}\n\n[type=\"search\"]::-webkit-search-decoration {\n  appearance: none;\n}\n\n::-webkit-file-upload-button {\n  font: inherit;\n  appearance: button;\n}\n\noutput {\n  display: inline-block;\n}\n\nsummary {\n  display: list-item;\n  cursor: pointer;\n}\n\ntemplate {\n  display: none;\n}\n\n[hidden] {\n  display: none !important;\n}\n","@use \"../common/common\" as common;\n@use \"../common/reboot\";\n\n.af-title {\n  --texts-column: 1;\n\n  display: grid;\n  gap: common.rem(4) common.rem(12);\n  color: var(--color-gray-900);\n\n  &__title {\n    margin: 0;\n    grid-column: var(--texts-column);\n    font-family: var(--font-family-publico);\n    font-weight: 700;\n  }\n\n  &__subtitle {\n    display: block;\n    grid-column: var(--texts-column);\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    grid-column: 1;\n    grid-row: 1/3;\n    box-shadow: 0 0.125rem 0.5rem 0 rgba(var(--color-axa), 0.15);\n  }\n\n  &--xl &__title {\n    font-size: 2rem;\n    line-height: 2.5rem;\n  }\n\n  &--l &__title {\n    font-size: 1.5rem;\n    line-height: 1.875rem;\n  }\n\n  &:has(&__icon) {\n    --texts-column: 2;\n\n    grid-template-columns: auto 1fr;\n\n    .af-title__title {\n      color: var(--color-axa);\n    }\n  }\n}\n\n@media (width <= #{common.$breakpoint-md}) {\n  .af-title {\n    &--xl &__title {\n      font-size: 1.5rem;\n      line-height: 1.875rem;\n    }\n\n    &--l &__title {\n      font-size: 1.25rem;\n      line-height: 1.56rem;\n    }\n\n    &__subtitle {\n      font-size: 1rem;\n      line-height: 1.25rem;\n    }\n  }\n}\n","@use \"../common/common\" as common;\n@use \"../common/reboot\";\n\n.af-title {\n  --texts-column: 1;\n\n  display: grid;\n  gap: common.rem(4) common.rem(12);\n  color: var(--color-gray-900);\n\n  &__title {\n    margin: 0;\n    grid-column: var(--texts-column);\n    font-family: var(--font-family-publico);\n    font-weight: 700;\n  }\n\n  &__subtitle {\n    display: block;\n    grid-column: var(--texts-column);\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    grid-column: 1;\n    grid-row: 1/3;\n    box-shadow: 0 0.125rem 0.5rem 0 rgba(var(--color-axa), 0.15);\n  }\n\n  &--xl &__title {\n    font-size: 2rem;\n    line-height: 2.5rem;\n  }\n\n  &--l &__title {\n    font-size: 1.5rem;\n    line-height: 1.875rem;\n  }\n\n  &:has(&__icon) {\n    --texts-column: 2;\n\n    grid-template-columns: auto 1fr;\n\n    .af-title__title {\n      color: var(--color-axa);\n    }\n  }\n}\n\n@media (width <= #{common.$breakpoint-md}) {\n  .af-title {\n    &--xl &__title {\n      font-size: 1.5rem;\n      line-height: 1.875rem;\n    }\n\n    &--l &__title {\n      font-size: 1.25rem;\n      line-height: 1.56rem;\n    }\n\n    &__subtitle {\n      font-size: 1rem;\n      line-height: 1.25rem;\n    }\n  }\n}\n"]}

package/dist/common/common.scss

@@ -1,4 +1,7 @@
-@import "./mixins";
+@use "sass:map";
+@use "sass:list";
+
+@forward "./mixins";
 
 $font-family-sans-serif: "Source Sans Pro", arial, sans-serif !default;
 $font-family-serif: georgia, times, "Times New Roman", serif !default;
@@ -12,10 +15,14 @@ $color-white: #fff !default;
 $color-black: #000 !default;
 $color-red: #ff1721 !default;
 $color-gray: #5f5f5f !default;
+$color-red-600: #d4435b !default;
 $color-red-700: #c91432 !default;
 $color-blue-1: #000072 !default;
 $color-blue-2: #f8f8ff !default;
 $color-blue-3: #36f !default;
+$color-blue-200: #eef !default;
+$color-blue-400: #cccce9 !default;
+$color-blue-800: #00008f !default; // prefer use $color-axa
 $color-btn-light: #3333a5 !default;
 $color-btn-business: #c94e14 !default;
 $color-btn-business-dark: #a8391c !default;
@@ -28,6 +35,7 @@ $color-btn-tertiary-bg-darker: #e4e4ff !default;
 $color-btn-tertiary-bg-lighter: #f8f8ff !default;
 $color-oceanBlue: #4976ba !default;
 $color-gray-1: #ccc !default;
+$color-gray-32: #5c5c5c;
 $color-gray-200: #f3f3f3;
 $color-gray-300: #e9ecf2;
 $color-gray-400: #e5e5e5;
@@ -35,12 +43,16 @@ $color-gray-500: #999;
 $color-gray-700: #5f5f5f;
 $color-gray-900: #333 !default;
 $color-green-600: #118635 !default;
-$color-border: #f3f3f3 !default;
-$color-focus: #36f !default;
+$color-border: #f3f3f3 !default; // prefer use $color-gray-200
+$color-focus: #36f !default; // prefer use $color-blue-3
 
 // others
 
 $default-border-radius: 4px !default;
+$radius-8: 8px !default;
+$radius-12: 12px;
+$radius-32: 32px;
+$radius-100: 100% !default;
 
 $transition-duration: 0.2s !default;
 
@@ -98,11 +110,106 @@ $error-custom-bg: #ffbfbf !default;
 
 $color-alertDanger-colorBorder: #c8b282 !default;
 $color-alertDanger-bgColor: #f1d596 !default;
+$color-orange-100: #fff8f3 !default;
+$color-orange-700: #c94e14 !default;
 
-// breakpoints
+// Grid breakpoints
 
 $breakpoint-xs: 0 !default;
 $breakpoint-sm: 667px !default;
 $breakpoint-md: 1023px !default;
 $breakpoint-lg: 1279px !default;
 $breakpoint-xl: 1599px !default;
+
+// Define the minimum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries.
+
+$grid-breakpoints: (
+  xs: $breakpoint-xs,
+  sm: $breakpoint-sm,
+  md: $breakpoint-md,
+  lg: $breakpoint-lg,
+  xl: $breakpoint-xl,
+);
+
+// Breakpoint viewport sizes and media queries.
+
+// Breakpoints are defined as a map of (name: minimum width), order from small to large:
+
+//    (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px)
+
+// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
+// Name of the next breakpoint, or null for the last breakpoint.
+
+//    >> breakpoint-next(sm)
+//    md
+//    >> breakpoint-next(sm, (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px))
+//    md
+//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
+//    md
+@function breakpoint-next(
+  $name,
+  $breakpoints: $grid-breakpoints,
+  $breakpoint-names: map.keys($breakpoints)
+) {
+  $n: list.index($breakpoint-names, $name);
+
+  @return if(
+    $n < list.length($breakpoint-names),
+    list.nth($breakpoint-names, $n + 1),
+    null
+  );
+}
+
+// Minimum breakpoint width. Null for the smallest (first) breakpoint.
+
+//    >> breakpoint-min(sm, (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px))
+//    667px
+@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
+  $min: map.get($breakpoints, $name);
+
+  @return if($min != 0, $min, null);
+}
+
+// Maximum breakpoint width. Null for the largest (last) breakpoint.
+// The maximum value is calculated as the minimum of the next one less 0.02px
+// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
+// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
+// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
+// See https://bugs.webkit.org/show_bug.cgi?id=178261
+
+//    >> breakpoint-max(sm, (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px))
+//    1022.98px
+@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
+  $next: breakpoint-next($name, $breakpoints);
+
+  @return if($next, breakpoint-min($next, $breakpoints) - 0.02px, null);
+}
+
+// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
+// Makes the @content apply to the given breakpoint and wider.
+@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
+// Makes the @content apply to the given breakpoint and narrower.
+@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
+  $max: breakpoint-max($name, $breakpoints);
+
+  @if $max {
+    @media (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}

package/dist/common/reboot.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/common/reboot.scss%23sass","../../src/common/reboot.scss"],"names":[],"mappings":"AAAA,iBAGE,qBCCF,CDEA,KACE,sBAAA,CACA,gBAAA,CACA,6BAAA,CAAA,0BAAA,CAAA,qBAAA,CACA,uCCCF,CDEA,sEAUE,aCCF,CDEA,KAQE,qBAAA,CADA,UAAA,CALA,4CAAA,CACA,cAAA,CACA,eAAA,CACA,eAAA,CAJA,QAAA,CAKA,eCGF,CDEA,sBACE,mBCCF,CDEA,GACE,kBAAA,CACA,QAAA,CACA,gBCCF,CDEA,kBAOE,mBAAA,CADA,YCEF,CDEA,EAEE,kBAAA,CADA,YCEF,CDEA,sCAEE,eAAA,CAIA,WAAA,CAHA,yBAAA,CACA,wCAAA,CAAA,gCAAA,CACA,qCAAA,CAAA,6BCEF,CDEA,QAEE,iBAAA,CACA,mBCCF,CDEA,iBALE,kBCUF,CDLA,SAGE,YCEF,CDEA,wBAIE,eCCF,CDEA,GACE,eCCF,CDEA,GACE,mBAAA,CACA,aCCF,CDEA,WACE,eCCF,CDEA,SAEE,kBCCF,CDEA,MACE,aCCF,CDEA,QAIE,aAAA,CACA,aAAA,CAHA,iBAAA,CACA,sBCGF,CDEA,IACE,aCCF,CDEA,IACE,SCCF,CDEA,EAGE,wBAAA,CADA,aAAA,CADA,oBCGF,CDEA,QAEE,aAAA,CADA,yBCEF,CDOA,uFAGE,aAAA,CADA,oBCEF,CDEA,+BACE,SCCF,CDEA,kBAIE,sFAAA,CAEA,aCAF,CDGA,IAEE,kBAAA,CCFF,YAAA,CDGE,aCAF,CDGA,OCAA,eACA,CDGA,ICAA,iBAEA,CDGA,QAHE,qBCKF,CDFA,IAEE,eCAF,CDGA,MCAA,wBACA,CDGA,QAGE,mBAAA,CAEA,aAAA,CAHA,oBAAA,CCFF,iBAAA,CDIE,eCCF,CDGA,GCAA,kBACA,CDGA,OCAA,eACA,CDGA,sCAME,mBAAA,CACA,iBAAA,CACA,mBAAA,CAHA,QCGF,CDGA,aAEE,gBCAF,CDGA,cAEE,mBCAF,CDGA,OCAA,gBACA,CDGA,gDAIE,yBAAA,CAAA,iBCAF,CDGA,aCAA,kBAAA,CDEE,yCCAF,CDGA,4GAIE,cCAF,CDGA,wHAKE,iBAAA,CADA,SCCF,CDGA,uCAEE,qBAAA,CACA,SCAF,CDGA,+EAIE,0BAAA,CAAA,kBCAF,CDGA,SCAA,aAAA,CDEE,eCAF,CDGA,SAIE,QAAA,CAFA,QAAA,CCFF,WAAA,CDGE,SCCF,CDGA,OASE,aAAA,CCTF,aAAA,CDME,gBAAA,CACA,mBAAA,CAHA,mBAAA,CADA,cAAA,CAEA,SAAA,CAGA,kBAAA,CANA,UCOF,CDGA,SCAA,sBACA,CDGA,kFAEE,WCAF,CDGA,cAEE,uBAAA,CAAA,eAAA,CCFF,mBAEA,CDGA,yCCAA,uBAAA,CAAA,eACA,CDGA,6BAEE,yBAAA,CAAA,iBAAA,CCFF,YAEA,CDGA,OCAA,oBACA,CDGA,QAEE,cAAA,CCFF,iBAEA,CDGA,SCAA,YACA,CDGA,SCAA,sBACA","file":"reboot.css","sourcesContent":["*,\n::after,\n::before {\n  box-sizing: border-box;\n}\n\nhtml {\n  font-family: sans-serif;\n  line-height: 1.15;\n  text-size-adjust: 100%;\n  -webkit-tap-highlight-color: transparent;\n}\n\narticle,\naside,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmain,\nnav,\nsection {\n  display: block;\n}\n\nbody {\n  margin: 0;\n  font-family: \"Source Sans Pro\", Arial, sans-serif;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5;\n  text-align: left;\n  color: #333;\n  background-color: #fff;\n}\n\n[tabindex=\"-1\"]:focus {\n  outline: 0 !important;\n}\n\nhr {\n  box-sizing: content-box;\n  height: 0;\n  overflow: visible;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  margin-top: 0;\n  margin-bottom: 0.5rem;\n}\n\np {\n  margin-top: 0;\n  margin-bottom: 1rem;\n}\n\nabbr[data-original-title],\nabbr[title] {\n  border-bottom: 0;\n  text-decoration: underline;\n  text-decoration: underline dotted;\n  text-decoration-skip-ink: none;\n  cursor: help;\n}\n\naddress {\n  margin-bottom: 1rem;\n  font-style: normal;\n  line-height: inherit;\n}\n\ndl,\nol,\nul {\n  margin-top: 0;\n  margin-bottom: 1rem;\n}\n\nol ol,\nol ul,\nul ol,\nul ul {\n  margin-bottom: 0;\n}\n\ndt {\n  font-weight: 700;\n}\n\ndd {\n  margin-bottom: 0.5rem;\n  margin-left: 0;\n}\n\nblockquote {\n  margin: 0 0 1rem;\n}\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\nsmall {\n  font-size: 80%;\n}\n\nsub,\nsup {\n  position: relative;\n  vertical-align: baseline;\n  font-size: 75%;\n  line-height: 0;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\na {\n  text-decoration: none;\n  color: #00008f;\n  background-color: transparent;\n}\n\na:hover {\n  text-decoration: underline;\n  color: #000043;\n}\n\na:not([href], [tabindex]) {\n  text-decoration: none;\n  color: inherit;\n}\n\na:not([href], [tabindex]):focus,\na:not([href], [tabindex]):hover {\n  text-decoration: none;\n  color: inherit;\n}\n\na:not([href], [tabindex]):focus {\n  outline: 0;\n}\n\ncode,\nkbd,\npre,\nsamp {\n  font-family: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n    \"Courier New\", monospace;\n  font-size: 1em;\n}\n\npre {\n  margin-top: 0;\n  margin-bottom: 1rem;\n  overflow: auto;\n}\n\nfigure {\n  margin: 0 0 1rem;\n}\n\nimg {\n  border-style: none;\n  vertical-align: middle;\n}\n\nsvg {\n  vertical-align: middle;\n  overflow: hidden;\n}\n\ntable {\n  border-collapse: collapse;\n}\n\ncaption {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  caption-side: bottom;\n  text-align: left;\n  color: #6c757d;\n}\n\nth {\n  text-align: inherit;\n}\n\nbutton {\n  border-radius: 0;\n}\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  margin: 0;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\nbutton,\ninput {\n  overflow: visible;\n}\n\nbutton,\nselect {\n  text-transform: none;\n}\n\nselect {\n  word-wrap: normal;\n}\n\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"],\nbutton {\n  appearance: button;\n}\n\nbutton:focus {\n  outline: 1px dotted;\n  outline: 5px auto -webkit-focus-ring-color;\n}\n\n[type=\"button\"]:not(:disabled),\n[type=\"reset\"]:not(:disabled),\n[type=\"submit\"]:not(:disabled),\nbutton:not(:disabled) {\n  cursor: pointer;\n}\n\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner,\nbutton::-moz-focus-inner {\n  padding: 0;\n  border-style: none;\n}\n\ninput[type=\"checkbox\"],\ninput[type=\"radio\"] {\n  box-sizing: border-box;\n  padding: 0;\n}\n\ninput[type=\"date\"],\ninput[type=\"datetime-local\"],\ninput[type=\"month\"],\ninput[type=\"time\"] {\n  appearance: listbox;\n}\n\ntextarea {\n  overflow: auto;\n  resize: vertical;\n}\n\nfieldset {\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n\nlegend {\n  display: block;\n  width: 100%;\n  max-width: 100%;\n  margin-bottom: 0.5rem;\n  padding: 0;\n  font-size: 1.5rem;\n  line-height: inherit;\n  white-space: normal;\n  color: inherit;\n}\n\nprogress {\n  vertical-align: baseline;\n}\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n  height: auto;\n}\n\n[type=\"search\"] {\n  outline-offset: -2px;\n  appearance: none;\n}\n\n[type=\"search\"]::-webkit-search-decoration {\n  appearance: none;\n}\n\n::-webkit-file-upload-button {\n  font: inherit;\n  appearance: button;\n}\n\noutput {\n  display: inline-block;\n}\n\nsummary {\n  display: list-item;\n  cursor: pointer;\n}\n\ntemplate {\n  display: none;\n}\n\n[hidden] {\n  display: none !important;\n}\n","*,\n::after,\n::before {\n  box-sizing: border-box;\n}\n\nhtml {\n  font-family: sans-serif;\n  line-height: 1.15;\n  text-size-adjust: 100%;\n  -webkit-tap-highlight-color: transparent;\n}\n\narticle,\naside,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmain,\nnav,\nsection {\n  display: block;\n}\n\nbody {\n  margin: 0;\n  font-family: \"Source Sans Pro\", Arial, sans-serif;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5;\n  text-align: left;\n  color: #333;\n  background-color: #fff;\n}\n\n[tabindex=\"-1\"]:focus {\n  outline: 0 !important;\n}\n\nhr {\n  box-sizing: content-box;\n  height: 0;\n  overflow: visible;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  margin-top: 0;\n  margin-bottom: 0.5rem;\n}\n\np {\n  margin-top: 0;\n  margin-bottom: 1rem;\n}\n\nabbr[data-original-title],\nabbr[title] {\n  border-bottom: 0;\n  text-decoration: underline;\n  text-decoration: underline dotted;\n  text-decoration-skip-ink: none;\n  cursor: help;\n}\n\naddress {\n  margin-bottom: 1rem;\n  font-style: normal;\n  line-height: inherit;\n}\n\ndl,\nol,\nul {\n  margin-top: 0;\n  margin-bottom: 1rem;\n}\n\nol ol,\nol ul,\nul ol,\nul ul {\n  margin-bottom: 0;\n}\n\ndt {\n  font-weight: 700;\n}\n\ndd {\n  margin-bottom: 0.5rem;\n  margin-left: 0;\n}\n\nblockquote {\n  margin: 0 0 1rem;\n}\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\nsmall {\n  font-size: 80%;\n}\n\nsub,\nsup {\n  position: relative;\n  vertical-align: baseline;\n  font-size: 75%;\n  line-height: 0;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\na {\n  text-decoration: none;\n  color: #00008f;\n  background-color: transparent;\n}\n\na:hover {\n  text-decoration: underline;\n  color: #000043;\n}\n\na:not([href], [tabindex]) {\n  text-decoration: none;\n  color: inherit;\n}\n\na:not([href], [tabindex]):focus,\na:not([href], [tabindex]):hover {\n  text-decoration: none;\n  color: inherit;\n}\n\na:not([href], [tabindex]):focus {\n  outline: 0;\n}\n\ncode,\nkbd,\npre,\nsamp {\n  font-family: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n    \"Courier New\", monospace;\n  font-size: 1em;\n}\n\npre {\n  margin-top: 0;\n  margin-bottom: 1rem;\n  overflow: auto;\n}\n\nfigure {\n  margin: 0 0 1rem;\n}\n\nimg {\n  border-style: none;\n  vertical-align: middle;\n}\n\nsvg {\n  vertical-align: middle;\n  overflow: hidden;\n}\n\ntable {\n  border-collapse: collapse;\n}\n\ncaption {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  caption-side: bottom;\n  text-align: left;\n  color: #6c757d;\n}\n\nth {\n  text-align: inherit;\n}\n\nbutton {\n  border-radius: 0;\n}\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  margin: 0;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\nbutton,\ninput {\n  overflow: visible;\n}\n\nbutton,\nselect {\n  text-transform: none;\n}\n\nselect {\n  word-wrap: normal;\n}\n\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"],\nbutton {\n  appearance: button;\n}\n\nbutton:focus {\n  outline: 1px dotted;\n  outline: 5px auto -webkit-focus-ring-color;\n}\n\n[type=\"button\"]:not(:disabled),\n[type=\"reset\"]:not(:disabled),\n[type=\"submit\"]:not(:disabled),\nbutton:not(:disabled) {\n  cursor: pointer;\n}\n\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner,\nbutton::-moz-focus-inner {\n  padding: 0;\n  border-style: none;\n}\n\ninput[type=\"checkbox\"],\ninput[type=\"radio\"] {\n  box-sizing: border-box;\n  padding: 0;\n}\n\ninput[type=\"date\"],\ninput[type=\"datetime-local\"],\ninput[type=\"month\"],\ninput[type=\"time\"] {\n  appearance: listbox;\n}\n\ntextarea {\n  overflow: auto;\n  resize: vertical;\n}\n\nfieldset {\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n\nlegend {\n  display: block;\n  width: 100%;\n  max-width: 100%;\n  margin-bottom: 0.5rem;\n  padding: 0;\n  font-size: 1.5rem;\n  line-height: inherit;\n  white-space: normal;\n  color: inherit;\n}\n\nprogress {\n  vertical-align: baseline;\n}\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n  height: auto;\n}\n\n[type=\"search\"] {\n  outline-offset: -2px;\n  appearance: none;\n}\n\n[type=\"search\"]::-webkit-search-decoration {\n  appearance: none;\n}\n\n::-webkit-file-upload-button {\n  font: inherit;\n  appearance: button;\n}\n\noutput {\n  display: inline-block;\n}\n\nsummary {\n  display: list-item;\n  cursor: pointer;\n}\n\ntemplate {\n  display: none;\n}\n\n[hidden] {\n  display: none !important;\n}\n"]}
+{"version":3,"sources":["../../src/common/reboot.scss%23sass","../../src/common/reboot.scss"],"names":[],"mappings":"AAAA,iBAGE,qBCCF,CDEA,KACE,sBAAA,CACA,gBAAA,CACA,6BAAA,CAAA,0BAAA,CAAA,qBAAA,CACA,uCCCF,CDEA,sEAUE,aCCF,CDEA,KAQE,qBAAA,CADA,UAAA,CALA,4CAAA,CACA,cAAA,CACA,eAAA,CACA,eAAA,CAJA,QAAA,CAKA,eCGF,CDEA,sBACE,mBCCF,CDEA,GACE,kBAAA,CACA,QAAA,CACA,gBCCF,CDEA,kBAOE,mBAAA,CADA,YCEF,CDEA,EAEE,kBAAA,CADA,YCEF,CDEA,sCAEE,eAAA,CAIA,WAAA,CAHA,yBAAA,CACA,wCAAA,CAAA,gCAAA,CACA,qCAAA,CAAA,6BCEF,CDEA,QAEE,iBAAA,CACA,mBCCF,CDEA,iBALE,kBCUF,CDLA,SAGE,YCEF,CDEA,wBAIE,eCCF,CDEA,GACE,eCCF,CDEA,GACE,mBAAA,CACA,aCCF,CDEA,WACE,eCCF,CDEA,SAEE,kBCCF,CDEA,MACE,aCCF,CDEA,QAIE,aAAA,CACA,aAAA,CAHA,iBAAA,CACA,sBCGF,CDEA,IACE,aCCF,CDEA,IACE,SCCF,CDEA,EAGE,wBAAA,CADA,aAAA,CADA,oBCGF,CDEA,QAEE,aAAA,CADA,yBCEF,CDOA,uFAGE,aAAA,CADA,oBCEF,CDEA,+BACE,SCCF,CDEA,kBAIE,sFAAA,CAGA,aCDF,CDIA,ICAA,kBAAA,CDCE,YAAA,CAEA,aCDF,CDIA,OACE,eCDF,CDIA,IACE,iBCAF,CDIA,QCLA,qBAMA,CDDA,ICAA,eACA,CDIA,MACE,wBCDF,CDIA,QAGE,mBAAA,CAEA,aAAA,CCLF,oBAAA,CDCE,iBAAA,CAGA,eCAF,CDIA,GACE,kBCDF,CDIA,OACE,eCDF,CDIA,sCAME,mBAAA,CACA,iBAAA,CACA,mBAAA,CAHA,QCEF,CDIA,aCAA,gBACA,CDIA,cCAA,mBACA,CDIA,OACE,gBCDF,CDIA,gDAIE,yBAAA,CAAA,iBCDF,CDIA,aACE,kBAAA,CCDF,yCACA,CDIA,4GAIE,cCDF,CDIA,wHAKE,iBAAA,CADA,SCAF,CDIA,uCCAA,qBAAA,CDGE,SCDF,CDIA,+EAIE,0BAAA,CAAA,kBCDF,CDIA,SACE,aAAA,CCDF,eACA,CDIA,SAIE,QAAA,CCJF,QAAA,CDCE,WAAA,CAEA,SCAF,CDIA,OASE,aAAA,CARA,aAAA,CAKA,gBAAA,CACA,mBAAA,CAHA,mBAAA,CADA,cAAA,CAEA,SAAA,CAGA,kBAAA,CCRF,UAQA,CDIA,SACE,sBCDF,CDIA,kFCAA,WACA,CDIA,cCAA,uBAAA,CAAA,eAAA,CDCE,mBCAF,CDIA,yCACE,uBAAA,CAAA,eCDF,CDIA,6BCAA,yBAAA,CAAA,iBAAA,CDCE,YCAF,CDIA,OACE,oBCDF,CDIA,QCAA,cAAA,CDCE,iBCAF,CDIA,SACE,YCDF,CDIA,SACE,sBCDF","file":"reboot.css","sourcesContent":["*,\n::after,\n::before {\n  box-sizing: border-box;\n}\n\nhtml {\n  font-family: sans-serif;\n  line-height: 1.15;\n  text-size-adjust: 100%;\n  -webkit-tap-highlight-color: transparent;\n}\n\narticle,\naside,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmain,\nnav,\nsection {\n  display: block;\n}\n\nbody {\n  margin: 0;\n  font-family: \"Source Sans Pro\", Arial, sans-serif;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5;\n  text-align: left;\n  color: #333;\n  background-color: #fff;\n}\n\n[tabindex=\"-1\"]:focus {\n  outline: 0 !important;\n}\n\nhr {\n  box-sizing: content-box;\n  height: 0;\n  overflow: visible;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  margin-top: 0;\n  margin-bottom: 0.5rem;\n}\n\np {\n  margin-top: 0;\n  margin-bottom: 1rem;\n}\n\nabbr[data-original-title],\nabbr[title] {\n  border-bottom: 0;\n  text-decoration: underline;\n  text-decoration: underline dotted;\n  text-decoration-skip-ink: none;\n  cursor: help;\n}\n\naddress {\n  margin-bottom: 1rem;\n  font-style: normal;\n  line-height: inherit;\n}\n\ndl,\nol,\nul {\n  margin-top: 0;\n  margin-bottom: 1rem;\n}\n\nol ol,\nol ul,\nul ol,\nul ul {\n  margin-bottom: 0;\n}\n\ndt {\n  font-weight: 700;\n}\n\ndd {\n  margin-bottom: 0.5rem;\n  margin-left: 0;\n}\n\nblockquote {\n  margin: 0 0 1rem;\n}\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\nsmall {\n  font-size: 80%;\n}\n\nsub,\nsup {\n  position: relative;\n  vertical-align: baseline;\n  font-size: 75%;\n  line-height: 0;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\na {\n  text-decoration: none;\n  color: #00008f;\n  background-color: transparent;\n}\n\na:hover {\n  text-decoration: underline;\n  color: #000043;\n}\n\na:not([href], [tabindex]) {\n  text-decoration: none;\n  color: inherit;\n}\n\na:not([href], [tabindex]):focus,\na:not([href], [tabindex]):hover {\n  text-decoration: none;\n  color: inherit;\n}\n\na:not([href], [tabindex]):focus {\n  outline: 0;\n}\n\ncode,\nkbd,\npre,\nsamp {\n  font-family:\n    SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\",\n    monospace;\n  font-size: 1em;\n}\n\npre {\n  margin-top: 0;\n  margin-bottom: 1rem;\n  overflow: auto;\n}\n\nfigure {\n  margin: 0 0 1rem;\n}\n\nimg {\n  border-style: none;\n  vertical-align: middle;\n}\n\nsvg {\n  vertical-align: middle;\n  overflow: hidden;\n}\n\ntable {\n  border-collapse: collapse;\n}\n\ncaption {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  caption-side: bottom;\n  text-align: left;\n  color: #6c757d;\n}\n\nth {\n  text-align: inherit;\n}\n\nbutton {\n  border-radius: 0;\n}\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  margin: 0;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\nbutton,\ninput {\n  overflow: visible;\n}\n\nbutton,\nselect {\n  text-transform: none;\n}\n\nselect {\n  word-wrap: normal;\n}\n\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"],\nbutton {\n  appearance: button;\n}\n\nbutton:focus {\n  outline: 1px dotted;\n  outline: 5px auto -webkit-focus-ring-color;\n}\n\n[type=\"button\"]:not(:disabled),\n[type=\"reset\"]:not(:disabled),\n[type=\"submit\"]:not(:disabled),\nbutton:not(:disabled) {\n  cursor: pointer;\n}\n\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner,\nbutton::-moz-focus-inner {\n  padding: 0;\n  border-style: none;\n}\n\ninput[type=\"checkbox\"],\ninput[type=\"radio\"] {\n  box-sizing: border-box;\n  padding: 0;\n}\n\ninput[type=\"date\"],\ninput[type=\"datetime-local\"],\ninput[type=\"month\"],\ninput[type=\"time\"] {\n  appearance: listbox;\n}\n\ntextarea {\n  overflow: auto;\n  resize: vertical;\n}\n\nfieldset {\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n\nlegend {\n  display: block;\n  width: 100%;\n  max-width: 100%;\n  margin-bottom: 0.5rem;\n  padding: 0;\n  font-size: 1.5rem;\n  line-height: inherit;\n  white-space: normal;\n  color: inherit;\n}\n\nprogress {\n  vertical-align: baseline;\n}\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n  height: auto;\n}\n\n[type=\"search\"] {\n  outline-offset: -2px;\n  appearance: none;\n}\n\n[type=\"search\"]::-webkit-search-decoration {\n  appearance: none;\n}\n\n::-webkit-file-upload-button {\n  font: inherit;\n  appearance: button;\n}\n\noutput {\n  display: inline-block;\n}\n\nsummary {\n  display: list-item;\n  cursor: pointer;\n}\n\ntemplate {\n  display: none;\n}\n\n[hidden] {\n  display: none !important;\n}\n","*,\n::after,\n::before {\n  box-sizing: border-box;\n}\n\nhtml {\n  font-family: sans-serif;\n  line-height: 1.15;\n  text-size-adjust: 100%;\n  -webkit-tap-highlight-color: transparent;\n}\n\narticle,\naside,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmain,\nnav,\nsection {\n  display: block;\n}\n\nbody {\n  margin: 0;\n  font-family: \"Source Sans Pro\", Arial, sans-serif;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5;\n  text-align: left;\n  color: #333;\n  background-color: #fff;\n}\n\n[tabindex=\"-1\"]:focus {\n  outline: 0 !important;\n}\n\nhr {\n  box-sizing: content-box;\n  height: 0;\n  overflow: visible;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  margin-top: 0;\n  margin-bottom: 0.5rem;\n}\n\np {\n  margin-top: 0;\n  margin-bottom: 1rem;\n}\n\nabbr[data-original-title],\nabbr[title] {\n  border-bottom: 0;\n  text-decoration: underline;\n  text-decoration: underline dotted;\n  text-decoration-skip-ink: none;\n  cursor: help;\n}\n\naddress {\n  margin-bottom: 1rem;\n  font-style: normal;\n  line-height: inherit;\n}\n\ndl,\nol,\nul {\n  margin-top: 0;\n  margin-bottom: 1rem;\n}\n\nol ol,\nol ul,\nul ol,\nul ul {\n  margin-bottom: 0;\n}\n\ndt {\n  font-weight: 700;\n}\n\ndd {\n  margin-bottom: 0.5rem;\n  margin-left: 0;\n}\n\nblockquote {\n  margin: 0 0 1rem;\n}\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\nsmall {\n  font-size: 80%;\n}\n\nsub,\nsup {\n  position: relative;\n  vertical-align: baseline;\n  font-size: 75%;\n  line-height: 0;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\na {\n  text-decoration: none;\n  color: #00008f;\n  background-color: transparent;\n}\n\na:hover {\n  text-decoration: underline;\n  color: #000043;\n}\n\na:not([href], [tabindex]) {\n  text-decoration: none;\n  color: inherit;\n}\n\na:not([href], [tabindex]):focus,\na:not([href], [tabindex]):hover {\n  text-decoration: none;\n  color: inherit;\n}\n\na:not([href], [tabindex]):focus {\n  outline: 0;\n}\n\ncode,\nkbd,\npre,\nsamp {\n  font-family:\n    SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\",\n    monospace;\n  font-size: 1em;\n}\n\npre {\n  margin-top: 0;\n  margin-bottom: 1rem;\n  overflow: auto;\n}\n\nfigure {\n  margin: 0 0 1rem;\n}\n\nimg {\n  border-style: none;\n  vertical-align: middle;\n}\n\nsvg {\n  vertical-align: middle;\n  overflow: hidden;\n}\n\ntable {\n  border-collapse: collapse;\n}\n\ncaption {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  caption-side: bottom;\n  text-align: left;\n  color: #6c757d;\n}\n\nth {\n  text-align: inherit;\n}\n\nbutton {\n  border-radius: 0;\n}\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  margin: 0;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\nbutton,\ninput {\n  overflow: visible;\n}\n\nbutton,\nselect {\n  text-transform: none;\n}\n\nselect {\n  word-wrap: normal;\n}\n\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"],\nbutton {\n  appearance: button;\n}\n\nbutton:focus {\n  outline: 1px dotted;\n  outline: 5px auto -webkit-focus-ring-color;\n}\n\n[type=\"button\"]:not(:disabled),\n[type=\"reset\"]:not(:disabled),\n[type=\"submit\"]:not(:disabled),\nbutton:not(:disabled) {\n  cursor: pointer;\n}\n\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner,\nbutton::-moz-focus-inner {\n  padding: 0;\n  border-style: none;\n}\n\ninput[type=\"checkbox\"],\ninput[type=\"radio\"] {\n  box-sizing: border-box;\n  padding: 0;\n}\n\ninput[type=\"date\"],\ninput[type=\"datetime-local\"],\ninput[type=\"month\"],\ninput[type=\"time\"] {\n  appearance: listbox;\n}\n\ntextarea {\n  overflow: auto;\n  resize: vertical;\n}\n\nfieldset {\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n\nlegend {\n  display: block;\n  width: 100%;\n  max-width: 100%;\n  margin-bottom: 0.5rem;\n  padding: 0;\n  font-size: 1.5rem;\n  line-height: inherit;\n  white-space: normal;\n  color: inherit;\n}\n\nprogress {\n  vertical-align: baseline;\n}\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n  height: auto;\n}\n\n[type=\"search\"] {\n  outline-offset: -2px;\n  appearance: none;\n}\n\n[type=\"search\"]::-webkit-search-decoration {\n  appearance: none;\n}\n\n::-webkit-file-upload-button {\n  font: inherit;\n  appearance: button;\n}\n\noutput {\n  display: inline-block;\n}\n\nsummary {\n  display: list-item;\n  cursor: pointer;\n}\n\ntemplate {\n  display: none;\n}\n\n[hidden] {\n  display: none !important;\n}\n"]}

package/dist/common/reboot.scss

@@ -157,8 +157,9 @@ code,
 kbd,
 pre,
 samp {
-  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-    "Courier New", monospace;
+  font-family:
+    SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+    monospace;
   font-size: 1em;
 }
 

package/dist/common/tokens.css

@@ -1 +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;--font-size-base:16;--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}
+: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;--font-size-base:16;--color-white:#fff;--color-black:#000;--color-axa:#00008f;--color-blue-1:#000072;--color-blue-2:#f8f8ff;--color-blue-3:#36f;--color-blue-200:#eef;--color-blue-800:#00008f;--color-blue-400:#cccce9;--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-600:#d4435b;--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-orange-100:#fff8f3;--color-orange-700:#c94e14;--color-gray:#5f5f5f;--color-gray-1:#ccc;--color-gray-32:#5c5c5c;--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;--radius-8:8px;--radius-12:12px;--radius-32:32px;--radius-100:100%;--transition-duration:0.2s}

package/dist/common/tokens.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/common/tokens.scss%23sass","../../src/common/tokens.scss"],"names":[],"mappings":"AAEA,MCAA,yDAAA,CDGE,uDAAA,CACA,mDAAA,CACA,gDAAA,CACA,sCAAA,CACA,mBAAA,CAIA,kBAAA,CACA,kBAAA,CAGA,mBAAA,CACA,sBAAA,CACA,sBAAA,CACA,mBAAA,CACA,0BAAA,CACA,yBAAA,CACA,kBAAA,CACA,4BAAA,CACA,sCAAA,CACA,uCAAA,CAGA,mBAAA,CACA,uBAAA,CACA,8BAAA,CACA,4BAAA,CACA,6BAAA,CACA,yBAAA,CAGA,yCAAA,CACA,qCAAA,CACA,4BAAA,CACA,iCAAA,CACA,kCAAA,CAGA,oBAAA,CACA,mBAAA,CACA,wBAAA,CACA,wBAAA,CACA,wBAAA,CACA,qBAAA,CACA,wBAAA,CACA,qBAAA,CACA,8BAAA,CACA,sBAAA,CAGA,yBAAA,CAIA,aAAA,CACA,mBAAA,CACA,kBAAA,CACA,kBAAA,CACA,kBAAA,CACA,kBAAA,CACA,gBAAA,CACA,kBAAA,CACA,kBAAA,CACA,kBAAA,CACA,kBAAA,CACA,iBAAA,CAIA,oBAAA,CACA,cAAA,CACA,mBAAA,CACA,mBAAA,CACA,mBAAA,CACA,mBAAA,CACA,iBAAA,CACA,mBAAA,CACA,mBAAA,CACA,mBAAA,CACA,mBAAA,CACA,kBAAA,CACA,oBAAA,CACA,oBAAA,CACA,qBAAA,CACA,qBAAA,CACA,mBAAA,CACA,qBAAA,CACA,qBAAA,CACA,qBAAA,CACA,qBAAA,CACA,mBAAA,CAIA,qBAAA,CACA,sBAAA,CACA,sBAAA,CACA,uBAAA,CACA,yBAAA,CACA,0BAAA,CACA,iBAAA,CACA,qBAAA,CACA,sBAAA,CACA,sBAAA,CACA,sBAAA,CAIA,2BAAA,CAIA,0BClBF","file":"tokens.css","sourcesContent":["@use \"./common\" as common;\n\n:root {\n  /* FONTS *******************************************************************/\n  --font-family-sans-serif: #{common.$font-family-sans-serif};\n  --font-family-serif: #{common.$font-family-serif};\n  --font-family-base: #{common.$font-family-base};\n  --font-family-publico-bold: #{common.$font-family-publico-bold};\n  --font-family-publico: #{common.$font-family-publico};\n  --font-size-base: 16;\n\n  /* COLORS *******************************************************************/\n\n  --color-white: #{common.$color-white};\n  --color-black: #{common.$color-black};\n\n  /* blue */\n  --color-axa: #{common.$color-axa};\n  --color-blue-1: #{common.$color-blue-1};\n  --color-blue-2: #{common.$color-blue-2};\n  --color-blue-3: #{common.$color-blue-3};\n  --color-ocean-blue: #{common.$color-oceanBlue};\n  --color-btn-light: #{common.$color-btn-light};\n  --color-focus: #{common.$color-focus};\n  --color-btn-tertiary-bg: #{common.$color-btn-tertiary-bg};\n  --color-btn-tertiary-bg-darker: #{common.$color-btn-tertiary-bg-darker};\n  --color-btn-tertiary-bg-lighter: #{common.$color-btn-tertiary-bg-lighter};\n\n  /* red */\n  --color-red: #{common.$color-red};\n  --color-red-700: #{common.$color-red-700};\n  --color-btn-error-text: #{common.$color-btn-error-text};\n  --color-btn-error-bg: #{common.$color-btn-error-bg};\n  --error-custom-border: #{common.$error-custom-border};\n  --error-custom-bg: #{common.$error-custom-bg};\n\n  /* orange */\n  --color-alert-danger-color-border: #{common.$color-alertDanger-colorBorder};\n  --color-alert-danger-bg-color: #{common.$color-alertDanger-bgColor};\n  --color-btn-business: #{common.$color-btn-business};\n  --color-btn-business-dark: #{common.$color-btn-business-dark};\n  --color-btn-business-light: #{common.$color-btn-business-light};\n\n  /* gray */\n  --color-gray: #{common.$color-gray};\n  --color-gray-1: #{common.$color-gray-1};\n  --color-gray-200: #{common.$color-gray-200};\n  --color-gray-300: #{common.$color-gray-300};\n  --color-gray-400: #{common.$color-gray-400};\n  --color-gray-500: #{common.$color-gray-500};\n  --color-gray-700: #{common.$color-gray-700};\n  --color-gray-900: #{common.$color-gray-900};\n  --color-btn-disabled-text: #{common.$color-btn-disabled-text};\n  --color-border: #{common.$color-border};\n\n  /* green */\n  --color-green-600: #{common.$color-green-600};\n\n  /* SIZING *******************************************************************/\n\n  --sizing-u0: #{common.$sizing-u0};\n  --sizing-u05: #{common.$sizing-u05};\n  --sizing-u1: #{common.$sizing-u1};\n  --sizing-u2: #{common.$sizing-u2};\n  --sizing-u3: #{common.$sizing-u3};\n  --sizing-u4: #{common.$sizing-u4};\n  --sizing-u5: #{common.$sizing-u5};\n  --sizing-u6: #{common.$sizing-u6};\n  --sizing-u7: #{common.$sizing-u7};\n  --sizing-u8: #{common.$sizing-u8};\n  --sizing-u9: #{common.$sizing-u9};\n  --sizing-u10: #{common.$sizing-u10};\n\n  /* SPACING *******************************************************************/\n\n  --spacing-u05: #{common.$spacing-u05};\n  --spacing-u0: #{common.$spacing-u0};\n  --spacing-u1: #{common.$spacing-u1};\n  --spacing-u2: #{common.$spacing-u2};\n  --spacing-u3: #{common.$spacing-u3};\n  --spacing-u4: #{common.$spacing-u4};\n  --spacing-u5: #{common.$spacing-u5};\n  --spacing-u6: #{common.$spacing-u6};\n  --spacing-u7: #{common.$spacing-u7};\n  --spacing-u8: #{common.$spacing-u8};\n  --spacing-u9: #{common.$spacing-u9};\n  --spacing-u10: #{common.$spacing-u10};\n  --spacing-u11: #{common.$spacing-u11};\n  --spacing-u12: #{common.$spacing-u12};\n  --spacing-u13: #{common.$spacing-u13};\n  --spacing-u14: #{common.$spacing-u14};\n  --spacing-u15: #{common.$spacing-u15};\n  --spacing-u16: #{common.$spacing-u16};\n  --spacing-u17: #{common.$spacing-u17};\n  --spacing-u18: #{common.$spacing-u18};\n  --spacing-u19: #{common.$spacing-u19};\n  --spacing-u20: #{common.$spacing-u20};\n\n  /* SCREENS & BREAKPOINTS *******************************************************************/\n\n  --screen-size-s: #{common.$screen-size-s};\n  --screen-size-m: #{common.$screen-size-m};\n  --screen-size-l: #{common.$screen-size-l};\n  --screen-size-xl: #{common.$screen-size-xl};\n  --screen-size-oldl: #{common.$screen-size-oldl};\n  --screen-size-oldxl: #{common.$screen-size-oldxl};\n  --breakpoint-xs: #{common.$breakpoint-xs};\n  --breakpoint-sm: #{common.$breakpoint-sm};\n  --breakpoint-md: #{common.$breakpoint-md};\n  --breakpoint-lg: #{common.$breakpoint-lg};\n  --breakpoint-xl: #{common.$breakpoint-xl};\n\n  /* BORDERS *******************************************************************/\n\n  --default-border-radius: #{common.$default-border-radius};\n\n  /* ANIMATIONS *******************************************************************/\n\n  --transition-duration: #{common.$transition-duration};\n}\n","@use \"./common\" as common;\n\n:root {\n  /* FONTS *******************************************************************/\n  --font-family-sans-serif: #{common.$font-family-sans-serif};\n  --font-family-serif: #{common.$font-family-serif};\n  --font-family-base: #{common.$font-family-base};\n  --font-family-publico-bold: #{common.$font-family-publico-bold};\n  --font-family-publico: #{common.$font-family-publico};\n  --font-size-base: 16;\n\n  /* COLORS *******************************************************************/\n\n  --color-white: #{common.$color-white};\n  --color-black: #{common.$color-black};\n\n  /* blue */\n  --color-axa: #{common.$color-axa};\n  --color-blue-1: #{common.$color-blue-1};\n  --color-blue-2: #{common.$color-blue-2};\n  --color-blue-3: #{common.$color-blue-3};\n  --color-ocean-blue: #{common.$color-oceanBlue};\n  --color-btn-light: #{common.$color-btn-light};\n  --color-focus: #{common.$color-focus};\n  --color-btn-tertiary-bg: #{common.$color-btn-tertiary-bg};\n  --color-btn-tertiary-bg-darker: #{common.$color-btn-tertiary-bg-darker};\n  --color-btn-tertiary-bg-lighter: #{common.$color-btn-tertiary-bg-lighter};\n\n  /* red */\n  --color-red: #{common.$color-red};\n  --color-red-700: #{common.$color-red-700};\n  --color-btn-error-text: #{common.$color-btn-error-text};\n  --color-btn-error-bg: #{common.$color-btn-error-bg};\n  --error-custom-border: #{common.$error-custom-border};\n  --error-custom-bg: #{common.$error-custom-bg};\n\n  /* orange */\n  --color-alert-danger-color-border: #{common.$color-alertDanger-colorBorder};\n  --color-alert-danger-bg-color: #{common.$color-alertDanger-bgColor};\n  --color-btn-business: #{common.$color-btn-business};\n  --color-btn-business-dark: #{common.$color-btn-business-dark};\n  --color-btn-business-light: #{common.$color-btn-business-light};\n\n  /* gray */\n  --color-gray: #{common.$color-gray};\n  --color-gray-1: #{common.$color-gray-1};\n  --color-gray-200: #{common.$color-gray-200};\n  --color-gray-300: #{common.$color-gray-300};\n  --color-gray-400: #{common.$color-gray-400};\n  --color-gray-500: #{common.$color-gray-500};\n  --color-gray-700: #{common.$color-gray-700};\n  --color-gray-900: #{common.$color-gray-900};\n  --color-btn-disabled-text: #{common.$color-btn-disabled-text};\n  --color-border: #{common.$color-border};\n\n  /* green */\n  --color-green-600: #{common.$color-green-600};\n\n  /* SIZING *******************************************************************/\n\n  --sizing-u0: #{common.$sizing-u0};\n  --sizing-u05: #{common.$sizing-u05};\n  --sizing-u1: #{common.$sizing-u1};\n  --sizing-u2: #{common.$sizing-u2};\n  --sizing-u3: #{common.$sizing-u3};\n  --sizing-u4: #{common.$sizing-u4};\n  --sizing-u5: #{common.$sizing-u5};\n  --sizing-u6: #{common.$sizing-u6};\n  --sizing-u7: #{common.$sizing-u7};\n  --sizing-u8: #{common.$sizing-u8};\n  --sizing-u9: #{common.$sizing-u9};\n  --sizing-u10: #{common.$sizing-u10};\n\n  /* SPACING *******************************************************************/\n\n  --spacing-u05: #{common.$spacing-u05};\n  --spacing-u0: #{common.$spacing-u0};\n  --spacing-u1: #{common.$spacing-u1};\n  --spacing-u2: #{common.$spacing-u2};\n  --spacing-u3: #{common.$spacing-u3};\n  --spacing-u4: #{common.$spacing-u4};\n  --spacing-u5: #{common.$spacing-u5};\n  --spacing-u6: #{common.$spacing-u6};\n  --spacing-u7: #{common.$spacing-u7};\n  --spacing-u8: #{common.$spacing-u8};\n  --spacing-u9: #{common.$spacing-u9};\n  --spacing-u10: #{common.$spacing-u10};\n  --spacing-u11: #{common.$spacing-u11};\n  --spacing-u12: #{common.$spacing-u12};\n  --spacing-u13: #{common.$spacing-u13};\n  --spacing-u14: #{common.$spacing-u14};\n  --spacing-u15: #{common.$spacing-u15};\n  --spacing-u16: #{common.$spacing-u16};\n  --spacing-u17: #{common.$spacing-u17};\n  --spacing-u18: #{common.$spacing-u18};\n  --spacing-u19: #{common.$spacing-u19};\n  --spacing-u20: #{common.$spacing-u20};\n\n  /* SCREENS & BREAKPOINTS *******************************************************************/\n\n  --screen-size-s: #{common.$screen-size-s};\n  --screen-size-m: #{common.$screen-size-m};\n  --screen-size-l: #{common.$screen-size-l};\n  --screen-size-xl: #{common.$screen-size-xl};\n  --screen-size-oldl: #{common.$screen-size-oldl};\n  --screen-size-oldxl: #{common.$screen-size-oldxl};\n  --breakpoint-xs: #{common.$breakpoint-xs};\n  --breakpoint-sm: #{common.$breakpoint-sm};\n  --breakpoint-md: #{common.$breakpoint-md};\n  --breakpoint-lg: #{common.$breakpoint-lg};\n  --breakpoint-xl: #{common.$breakpoint-xl};\n\n  /* BORDERS *******************************************************************/\n\n  --default-border-radius: #{common.$default-border-radius};\n\n  /* ANIMATIONS *******************************************************************/\n\n  --transition-duration: #{common.$transition-duration};\n}\n"]}
+{"version":3,"sources":["../../src/common/tokens.scss%23sass","../../src/common/tokens.scss"],"names":[],"mappings":"AAEA,MCAA,yDAAA,CDGE,uDAAA,CACA,mDAAA,CACA,gDAAA,CACA,sCAAA,CACA,mBAAA,CAIA,kBAAA,CACA,kBAAA,CAGA,mBAAA,CACA,sBAAA,CACA,sBAAA,CACA,mBAAA,CACA,qBAAA,CACA,wBAAA,CACA,wBAAA,CACA,0BAAA,CACA,yBAAA,CACA,kBAAA,CACA,4BAAA,CACA,sCAAA,CACA,uCAAA,CAGA,mBAAA,CACA,uBAAA,CACA,uBAAA,CACA,8BAAA,CACA,4BAAA,CACA,6BAAA,CACA,yBAAA,CAGA,yCAAA,CACA,qCAAA,CACA,4BAAA,CACA,iCAAA,CACA,kCAAA,CACA,0BAAA,CACA,0BAAA,CAGA,oBAAA,CACA,mBAAA,CACA,uBAAA,CACA,wBAAA,CACA,wBAAA,CACA,wBAAA,CACA,qBAAA,CACA,wBAAA,CACA,qBAAA,CACA,8BAAA,CACA,sBAAA,CAGA,yBAAA,CAIA,aAAA,CACA,mBAAA,CACA,kBAAA,CACA,kBAAA,CACA,kBAAA,CACA,kBAAA,CACA,gBAAA,CACA,kBAAA,CACA,kBAAA,CACA,kBAAA,CACA,kBAAA,CACA,iBAAA,CAIA,oBAAA,CACA,cAAA,CACA,mBAAA,CACA,mBAAA,CACA,mBAAA,CACA,mBAAA,CACA,iBAAA,CACA,mBAAA,CACA,mBAAA,CACA,mBAAA,CACA,mBAAA,CACA,kBAAA,CACA,oBAAA,CACA,oBAAA,CACA,qBAAA,CACA,qBAAA,CACA,mBAAA,CACA,qBAAA,CACA,qBAAA,CACA,qBAAA,CACA,qBAAA,CACA,mBAAA,CAIA,qBAAA,CACA,sBAAA,CACA,sBAAA,CACA,uBAAA,CACA,yBAAA,CACA,0BAAA,CACA,iBAAA,CACA,qBAAA,CACA,sBAAA,CACA,sBAAA,CACA,sBAAA,CAIA,2BAAA,CACA,cAAA,CACA,gBAAA,CACA,gBAAA,CACA,iBAAA,CAIA,0BClBF","file":"tokens.css","sourcesContent":["@use \"./common\" as common;\n\n:root {\n  /* FONTS *******************************************************************/\n  --font-family-sans-serif: #{common.$font-family-sans-serif};\n  --font-family-serif: #{common.$font-family-serif};\n  --font-family-base: #{common.$font-family-base};\n  --font-family-publico-bold: #{common.$font-family-publico-bold};\n  --font-family-publico: #{common.$font-family-publico};\n  --font-size-base: 16;\n\n  /* COLORS *******************************************************************/\n\n  --color-white: #{common.$color-white};\n  --color-black: #{common.$color-black};\n\n  /* blue */\n  --color-axa: #{common.$color-axa};\n  --color-blue-1: #{common.$color-blue-1};\n  --color-blue-2: #{common.$color-blue-2};\n  --color-blue-3: #{common.$color-blue-3};\n  --color-blue-200: #{common.$color-blue-200};\n  --color-blue-800: #{common.$color-blue-800};\n  --color-blue-400: #{common.$color-blue-400};\n  --color-ocean-blue: #{common.$color-oceanBlue};\n  --color-btn-light: #{common.$color-btn-light};\n  --color-focus: #{common.$color-focus}; /* prefer use --color-blue-3*/\n  --color-btn-tertiary-bg: #{common.$color-btn-tertiary-bg};\n  --color-btn-tertiary-bg-darker: #{common.$color-btn-tertiary-bg-darker};\n  --color-btn-tertiary-bg-lighter: #{common.$color-btn-tertiary-bg-lighter};\n\n  /* red */\n  --color-red: #{common.$color-red};\n  --color-red-600: #{common.$color-red-600};\n  --color-red-700: #{common.$color-red-700};\n  --color-btn-error-text: #{common.$color-btn-error-text};\n  --color-btn-error-bg: #{common.$color-btn-error-bg};\n  --error-custom-border: #{common.$error-custom-border};\n  --error-custom-bg: #{common.$error-custom-bg};\n\n  /* orange */\n  --color-alert-danger-color-border: #{common.$color-alertDanger-colorBorder};\n  --color-alert-danger-bg-color: #{common.$color-alertDanger-bgColor};\n  --color-btn-business: #{common.$color-btn-business};\n  --color-btn-business-dark: #{common.$color-btn-business-dark};\n  --color-btn-business-light: #{common.$color-btn-business-light};\n  --color-orange-100: #{common.$color-orange-100};\n  --color-orange-700: #{common.$color-orange-700};\n\n  /* gray */\n  --color-gray: #{common.$color-gray};\n  --color-gray-1: #{common.$color-gray-1};\n  --color-gray-32: #{common.$color-gray-32};\n  --color-gray-200: #{common.$color-gray-200};\n  --color-gray-300: #{common.$color-gray-300};\n  --color-gray-400: #{common.$color-gray-400};\n  --color-gray-500: #{common.$color-gray-500};\n  --color-gray-700: #{common.$color-gray-700};\n  --color-gray-900: #{common.$color-gray-900};\n  --color-btn-disabled-text: #{common.$color-btn-disabled-text};\n  --color-border: #{common.$color-border}; /* prefer use --color-gray-200*/\n\n  /* green */\n  --color-green-600: #{common.$color-green-600};\n\n  /* SIZING *******************************************************************/\n\n  --sizing-u0: #{common.$sizing-u0};\n  --sizing-u05: #{common.$sizing-u05};\n  --sizing-u1: #{common.$sizing-u1};\n  --sizing-u2: #{common.$sizing-u2};\n  --sizing-u3: #{common.$sizing-u3};\n  --sizing-u4: #{common.$sizing-u4};\n  --sizing-u5: #{common.$sizing-u5};\n  --sizing-u6: #{common.$sizing-u6};\n  --sizing-u7: #{common.$sizing-u7};\n  --sizing-u8: #{common.$sizing-u8};\n  --sizing-u9: #{common.$sizing-u9};\n  --sizing-u10: #{common.$sizing-u10};\n\n  /* SPACING *******************************************************************/\n\n  --spacing-u05: #{common.$spacing-u05};\n  --spacing-u0: #{common.$spacing-u0};\n  --spacing-u1: #{common.$spacing-u1};\n  --spacing-u2: #{common.$spacing-u2};\n  --spacing-u3: #{common.$spacing-u3};\n  --spacing-u4: #{common.$spacing-u4};\n  --spacing-u5: #{common.$spacing-u5};\n  --spacing-u6: #{common.$spacing-u6};\n  --spacing-u7: #{common.$spacing-u7};\n  --spacing-u8: #{common.$spacing-u8};\n  --spacing-u9: #{common.$spacing-u9};\n  --spacing-u10: #{common.$spacing-u10};\n  --spacing-u11: #{common.$spacing-u11};\n  --spacing-u12: #{common.$spacing-u12};\n  --spacing-u13: #{common.$spacing-u13};\n  --spacing-u14: #{common.$spacing-u14};\n  --spacing-u15: #{common.$spacing-u15};\n  --spacing-u16: #{common.$spacing-u16};\n  --spacing-u17: #{common.$spacing-u17};\n  --spacing-u18: #{common.$spacing-u18};\n  --spacing-u19: #{common.$spacing-u19};\n  --spacing-u20: #{common.$spacing-u20};\n\n  /* SCREENS & BREAKPOINTS *******************************************************************/\n\n  --screen-size-s: #{common.$screen-size-s};\n  --screen-size-m: #{common.$screen-size-m};\n  --screen-size-l: #{common.$screen-size-l};\n  --screen-size-xl: #{common.$screen-size-xl};\n  --screen-size-oldl: #{common.$screen-size-oldl};\n  --screen-size-oldxl: #{common.$screen-size-oldxl};\n  --breakpoint-xs: #{common.$breakpoint-xs};\n  --breakpoint-sm: #{common.$breakpoint-sm};\n  --breakpoint-md: #{common.$breakpoint-md};\n  --breakpoint-lg: #{common.$breakpoint-lg};\n  --breakpoint-xl: #{common.$breakpoint-xl};\n\n  /* BORDERS *******************************************************************/\n\n  --default-border-radius: #{common.$default-border-radius};\n  --radius-8: #{common.$radius-8};\n  --radius-12: #{common.$radius-12};\n  --radius-32: #{common.$radius-32};\n  --radius-100: #{common.$radius-100};\n\n  /* ANIMATIONS *******************************************************************/\n\n  --transition-duration: #{common.$transition-duration};\n}\n","@use \"./common\" as common;\n\n:root {\n  /* FONTS *******************************************************************/\n  --font-family-sans-serif: #{common.$font-family-sans-serif};\n  --font-family-serif: #{common.$font-family-serif};\n  --font-family-base: #{common.$font-family-base};\n  --font-family-publico-bold: #{common.$font-family-publico-bold};\n  --font-family-publico: #{common.$font-family-publico};\n  --font-size-base: 16;\n\n  /* COLORS *******************************************************************/\n\n  --color-white: #{common.$color-white};\n  --color-black: #{common.$color-black};\n\n  /* blue */\n  --color-axa: #{common.$color-axa};\n  --color-blue-1: #{common.$color-blue-1};\n  --color-blue-2: #{common.$color-blue-2};\n  --color-blue-3: #{common.$color-blue-3};\n  --color-blue-200: #{common.$color-blue-200};\n  --color-blue-800: #{common.$color-blue-800};\n  --color-blue-400: #{common.$color-blue-400};\n  --color-ocean-blue: #{common.$color-oceanBlue};\n  --color-btn-light: #{common.$color-btn-light};\n  --color-focus: #{common.$color-focus}; // prefer use --color-blue-3\n  --color-btn-tertiary-bg: #{common.$color-btn-tertiary-bg};\n  --color-btn-tertiary-bg-darker: #{common.$color-btn-tertiary-bg-darker};\n  --color-btn-tertiary-bg-lighter: #{common.$color-btn-tertiary-bg-lighter};\n\n  /* red */\n  --color-red: #{common.$color-red};\n  --color-red-600: #{common.$color-red-600};\n  --color-red-700: #{common.$color-red-700};\n  --color-btn-error-text: #{common.$color-btn-error-text};\n  --color-btn-error-bg: #{common.$color-btn-error-bg};\n  --error-custom-border: #{common.$error-custom-border};\n  --error-custom-bg: #{common.$error-custom-bg};\n\n  /* orange */\n  --color-alert-danger-color-border: #{common.$color-alertDanger-colorBorder};\n  --color-alert-danger-bg-color: #{common.$color-alertDanger-bgColor};\n  --color-btn-business: #{common.$color-btn-business};\n  --color-btn-business-dark: #{common.$color-btn-business-dark};\n  --color-btn-business-light: #{common.$color-btn-business-light};\n  --color-orange-100: #{common.$color-orange-100};\n  --color-orange-700: #{common.$color-orange-700};\n\n  /* gray */\n  --color-gray: #{common.$color-gray};\n  --color-gray-1: #{common.$color-gray-1};\n  --color-gray-32: #{common.$color-gray-32};\n  --color-gray-200: #{common.$color-gray-200};\n  --color-gray-300: #{common.$color-gray-300};\n  --color-gray-400: #{common.$color-gray-400};\n  --color-gray-500: #{common.$color-gray-500};\n  --color-gray-700: #{common.$color-gray-700};\n  --color-gray-900: #{common.$color-gray-900};\n  --color-btn-disabled-text: #{common.$color-btn-disabled-text};\n  --color-border: #{common.$color-border}; // prefer use --color-gray-200\n\n  /* green */\n  --color-green-600: #{common.$color-green-600};\n\n  /* SIZING *******************************************************************/\n\n  --sizing-u0: #{common.$sizing-u0};\n  --sizing-u05: #{common.$sizing-u05};\n  --sizing-u1: #{common.$sizing-u1};\n  --sizing-u2: #{common.$sizing-u2};\n  --sizing-u3: #{common.$sizing-u3};\n  --sizing-u4: #{common.$sizing-u4};\n  --sizing-u5: #{common.$sizing-u5};\n  --sizing-u6: #{common.$sizing-u6};\n  --sizing-u7: #{common.$sizing-u7};\n  --sizing-u8: #{common.$sizing-u8};\n  --sizing-u9: #{common.$sizing-u9};\n  --sizing-u10: #{common.$sizing-u10};\n\n  /* SPACING *******************************************************************/\n\n  --spacing-u05: #{common.$spacing-u05};\n  --spacing-u0: #{common.$spacing-u0};\n  --spacing-u1: #{common.$spacing-u1};\n  --spacing-u2: #{common.$spacing-u2};\n  --spacing-u3: #{common.$spacing-u3};\n  --spacing-u4: #{common.$spacing-u4};\n  --spacing-u5: #{common.$spacing-u5};\n  --spacing-u6: #{common.$spacing-u6};\n  --spacing-u7: #{common.$spacing-u7};\n  --spacing-u8: #{common.$spacing-u8};\n  --spacing-u9: #{common.$spacing-u9};\n  --spacing-u10: #{common.$spacing-u10};\n  --spacing-u11: #{common.$spacing-u11};\n  --spacing-u12: #{common.$spacing-u12};\n  --spacing-u13: #{common.$spacing-u13};\n  --spacing-u14: #{common.$spacing-u14};\n  --spacing-u15: #{common.$spacing-u15};\n  --spacing-u16: #{common.$spacing-u16};\n  --spacing-u17: #{common.$spacing-u17};\n  --spacing-u18: #{common.$spacing-u18};\n  --spacing-u19: #{common.$spacing-u19};\n  --spacing-u20: #{common.$spacing-u20};\n\n  /* SCREENS & BREAKPOINTS *******************************************************************/\n\n  --screen-size-s: #{common.$screen-size-s};\n  --screen-size-m: #{common.$screen-size-m};\n  --screen-size-l: #{common.$screen-size-l};\n  --screen-size-xl: #{common.$screen-size-xl};\n  --screen-size-oldl: #{common.$screen-size-oldl};\n  --screen-size-oldxl: #{common.$screen-size-oldxl};\n  --breakpoint-xs: #{common.$breakpoint-xs};\n  --breakpoint-sm: #{common.$breakpoint-sm};\n  --breakpoint-md: #{common.$breakpoint-md};\n  --breakpoint-lg: #{common.$breakpoint-lg};\n  --breakpoint-xl: #{common.$breakpoint-xl};\n\n  /* BORDERS *******************************************************************/\n\n  --default-border-radius: #{common.$default-border-radius};\n  --radius-8: #{common.$radius-8};\n  --radius-12: #{common.$radius-12};\n  --radius-32: #{common.$radius-32};\n  --radius-100: #{common.$radius-100};\n\n  /* ANIMATIONS *******************************************************************/\n\n  --transition-duration: #{common.$transition-duration};\n}\n"]}

package/dist/common/tokens.scss

@@ -19,15 +19,19 @@
   --color-blue-1: #{common.$color-blue-1};
   --color-blue-2: #{common.$color-blue-2};
   --color-blue-3: #{common.$color-blue-3};
+  --color-blue-200: #{common.$color-blue-200};
+  --color-blue-800: #{common.$color-blue-800};
+  --color-blue-400: #{common.$color-blue-400};
   --color-ocean-blue: #{common.$color-oceanBlue};
   --color-btn-light: #{common.$color-btn-light};
-  --color-focus: #{common.$color-focus};
+  --color-focus: #{common.$color-focus}; // prefer use --color-blue-3
   --color-btn-tertiary-bg: #{common.$color-btn-tertiary-bg};
   --color-btn-tertiary-bg-darker: #{common.$color-btn-tertiary-bg-darker};
   --color-btn-tertiary-bg-lighter: #{common.$color-btn-tertiary-bg-lighter};
 
   /* red */
   --color-red: #{common.$color-red};
+  --color-red-600: #{common.$color-red-600};
   --color-red-700: #{common.$color-red-700};
   --color-btn-error-text: #{common.$color-btn-error-text};
   --color-btn-error-bg: #{common.$color-btn-error-bg};
@@ -40,10 +44,13 @@
   --color-btn-business: #{common.$color-btn-business};
   --color-btn-business-dark: #{common.$color-btn-business-dark};
   --color-btn-business-light: #{common.$color-btn-business-light};
+  --color-orange-100: #{common.$color-orange-100};
+  --color-orange-700: #{common.$color-orange-700};
 
   /* gray */
   --color-gray: #{common.$color-gray};
   --color-gray-1: #{common.$color-gray-1};
+  --color-gray-32: #{common.$color-gray-32};
   --color-gray-200: #{common.$color-gray-200};
   --color-gray-300: #{common.$color-gray-300};
   --color-gray-400: #{common.$color-gray-400};
@@ -51,7 +58,7 @@
   --color-gray-700: #{common.$color-gray-700};
   --color-gray-900: #{common.$color-gray-900};
   --color-btn-disabled-text: #{common.$color-btn-disabled-text};
-  --color-border: #{common.$color-border};
+  --color-border: #{common.$color-border}; // prefer use --color-gray-200
 
   /* green */
   --color-green-600: #{common.$color-green-600};
@@ -113,6 +120,10 @@
   /* BORDERS *******************************************************************/
 
   --default-border-radius: #{common.$default-border-radius};
+  --radius-8: #{common.$radius-8};
+  --radius-12: #{common.$radius-12};
+  --radius-32: #{common.$radius-32};
+  --radius-100: #{common.$radius-100};
 
   /* ANIMATIONS *******************************************************************/