@axa-fr/design-system-look-and-feel-css 1.0.0-ci.351 → 1.0.3-alpha.144

package/dist/Grid/Grid-demo-example-form.scss

@@ -0,0 +1,87 @@
+@use "../common/common.scss" as common;
+
+main.example-form {
+  padding-block: 4rem;
+}
+
+.form {
+  --start: 3;
+  --cols: 8;
+  @media (width > #{common.$breakpoint-md}) {
+    --row-gap: calc(64 / var(--font-size-base) * 1rem);
+  }
+
+  &__header {
+    --row-gap: calc(32 / var(--font-size-base) * 1rem);
+  }
+
+  &__fields {
+    --row-gap: 2rem;
+
+    .af-radio__container {
+      --cols: 4;
+
+      .af-radio-select > * {
+        --cols: 2;
+      }
+    }
+
+    .af-checkbox__container {
+      --cols: 6;
+
+      .af-checkbox-select {
+        --row-gap: 1rem;
+
+        & > * {
+          --cols: 3;
+        }
+      }
+    }
+
+    .af-form__input-text {
+      @media (width > #{common.$breakpoint-sm}) {
+        --cols: 5;
+      }
+      @media (width > #{common.$breakpoint-md}) {
+        --cols: 4;
+
+        &[type="email"] {
+          --cols: 5;
+        }
+      }
+      @media (width > #{common.$breakpoint-lg}) {
+        --cols: 3;
+
+        &[type="email"] {
+          --cols: 4;
+        }
+      }
+    }
+  }
+
+  &__actions {
+    > :first-child {
+      --cols: 2;
+
+      @media (width > #{common.$breakpoint-md}) {
+        --cols: 3;
+      }
+
+      @media (width > #{common.$breakpoint-lg}) {
+        --cols: 2;
+      }
+    }
+
+    > :last-child {
+      --cols: 2;
+
+      @media (width > #{common.$breakpoint-sm}) {
+        --cols: 3;
+      }
+
+      @media (width > #{common.$breakpoint-lg}) {
+        --cols: 2;
+      }
+    }
+  }
+}

package/dist/Grid/Grid-demo-example-page.css

@@ -0,0 +1 @@
+main.example-page{padding-block:4rem}@media (width > 1023px){main.example-page{--row-gap:calc(64/var(--font-size-base)*1rem)}}@media (width > 1279px){.af-left-part{--cols:9;--row-gap:calc(16/var(--font-size-base)*1rem)}}@media (width > 1023px){.af-left-part .af-list-part{--row-gap:calc(32/var(--font-size-base)*1rem)}}.af-right-part{--row-gap:calc(16/var(--font-size-base)*1rem)}@media (width > 1279px){.af-right-part{--cols:3}}@media (width > 1023px){.af-right-part .af-contacts-part{--row-gap:calc(32/var(--font-size-base)*1rem)}}@media (width > 667px){.af-right-part .af-contacts-part>.af-card{--cols:4}}@media (width > 1279px){.af-right-part .af-contacts-part>.af-card{--cols:3}}

package/dist/Grid/Grid-demo-example-page.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Grid/Grid-demo-example-page.scss%23sass","../../src/Grid/Grid-demo-example-page.scss"],"names":[],"mappings":"AAEA,kBACE,kBCDF,CDEE,wBAFF,kBAGI,6CCCF,CACF,CDGE,wBADF,cAEI,QAAA,CACA,6CCCF,CACF,CDEI,wBADF,4BAEI,6CCCJ,CACF,CDGA,eCAA,6CACA,CDEE,wBAHF,eAII,QCCF,CACF,CDEI,wBADF,iCAEI,6CCCJ,CACF,CDEM,uBADF,0CAEI,QCCN,CACF,CDCM,wBALF,0CAMI,QCEN,CACF","file":"Grid-demo-example-page.css","sourcesContent":["@use \"../common/common.scss\" as common;\n\nmain.example-page {\n  padding-block: 4rem;\n  @media (width > #{common.$breakpoint-md}) {\n    --row-gap: calc(64 / var(--font-size-base) * 1rem);\n  }\n}\n\n.af-left-part {\n  @media (width > #{common.$breakpoint-lg}) {\n    --cols: 9;\n    --row-gap: calc(16 / var(--font-size-base) * 1rem);\n  }\n\n  .af-list-part {\n    @media (width > #{common.$breakpoint-md}) {\n      --row-gap: calc(32 / var(--font-size-base) * 1rem);\n    }\n  }\n}\n\n.af-right-part {\n  --row-gap: calc(16 / var(--font-size-base) * 1rem);\n\n  @media (width > #{common.$breakpoint-lg}) {\n    --cols: 3;\n  }\n\n  .af-contacts-part {\n    @media (width > #{common.$breakpoint-md}) {\n      --row-gap: calc(32 / var(--font-size-base) * 1rem);\n    }\n\n    > .af-card {\n      @media (width > #{common.$breakpoint-sm}) {\n        --cols: 4;\n      }\n\n      @media (width > #{common.$breakpoint-lg}) {\n        --cols: 3;\n      }\n    }\n  }\n}\n","@use \"../common/common.scss\" as common;\n\nmain.example-page {\n  padding-block: 4rem;\n  @media (width > #{common.$breakpoint-md}) {\n    --row-gap: calc(64 / var(--font-size-base) * 1rem);\n  }\n}\n\n.af-left-part {\n  @media (width > #{common.$breakpoint-lg}) {\n    --cols: 9;\n    --row-gap: calc(16 / var(--font-size-base) * 1rem);\n  }\n\n  .af-list-part {\n    @media (width > #{common.$breakpoint-md}) {\n      --row-gap: calc(32 / var(--font-size-base) * 1rem);\n    }\n  }\n}\n\n.af-right-part {\n  --row-gap: calc(16 / var(--font-size-base) * 1rem);\n\n  @media (width > #{common.$breakpoint-lg}) {\n    --cols: 3;\n  }\n\n  .af-contacts-part {\n    @media (width > #{common.$breakpoint-md}) {\n      --row-gap: calc(32 / var(--font-size-base) * 1rem);\n    }\n\n    > .af-card {\n      @media (width > #{common.$breakpoint-sm}) {\n        --cols: 4;\n      }\n\n      @media (width > #{common.$breakpoint-lg}) {\n        --cols: 3;\n      }\n    }\n  }\n}\n"]}

package/dist/Grid/Grid-demo-example-page.scss

@@ -0,0 +1,45 @@
+@use "../common/common.scss" as common;
+
+main.example-page {
+  padding-block: 4rem;
+  @media (width > #{common.$breakpoint-md}) {
+    --row-gap: calc(64 / var(--font-size-base) * 1rem);
+  }
+}
+
+.af-left-part {
+  @media (width > #{common.$breakpoint-lg}) {
+    --cols: 9;
+    --row-gap: calc(16 / var(--font-size-base) * 1rem);
+  }
+
+  .af-list-part {
+    @media (width > #{common.$breakpoint-md}) {
+      --row-gap: calc(32 / var(--font-size-base) * 1rem);
+    }
+  }
+}
+
+.af-right-part {
+  --row-gap: calc(16 / var(--font-size-base) * 1rem);
+
+  @media (width > #{common.$breakpoint-lg}) {
+    --cols: 3;
+  }
+
+  .af-contacts-part {
+    @media (width > #{common.$breakpoint-md}) {
+      --row-gap: calc(32 / var(--font-size-base) * 1rem);
+    }
+
+    > .af-card {
+      @media (width > #{common.$breakpoint-sm}) {
+        --cols: 4;
+      }
+
+      @media (width > #{common.$breakpoint-lg}) {
+        --cols: 3;
+      }
+    }
+  }
+}

package/dist/Grid/Grid-demo-wireframe.css

@@ -0,0 +1 @@
+#storybook-root:has(>.grid){background:hsla(0,0%,79%,.159)}.box{background-color:#fff}.box,.box-card{outline:1px solid #0003}.box-card{padding:1rem}@media (width > 1023px){.box-card{--cols:4}}@media (width > 1279px){.box-card{--cols:3}}@media (width > 1023px){.box-example-1{--cols:8}}@media (width > 1279px){.box-example-1{--cols:9}}@media (width > 1023px){.box-example-2{--cols:4}}@media (width > 1279px){.box-example-2{--cols:3}}.box-half{height:100px}@media (width > 1023px){.box-half{--cols:4}.box-half:last-child{--cols:12}}@media (width > 1279px){.box-half,.box-half:last-child{--cols:6}}.box-custom{display:grid;grid-template-areas:"title title" "content1 content2" "footer footer"}.box-custom h2{grid-area:title}.box-custom .box{padding:1rem}.box-custom .box-content1{grid-area:content1}.box-custom .box-content2{grid-area:content2}.box-custom footer{grid-area:footer;place-content:center;text-align:center}.box-offset{color:var(--color-primary);display:none;font-size:.7rem;height:50px;place-content:center;position:relative;text-align:center}.box-offset:after,.box-offset:before{display:block}.box-offset-1-1{--start:1;--cols:1;display:block}.box-offset-1-1:before{content:"--start:1;"}.box-offset-1-1:after{content:"--cols:1;"}.box-offset-1-2{--start:1;--cols:2;display:block}.box-offset-1-2:before{content:"--start:1;"}.box-offset-1-2:after{content:"--cols:2;"}.box-offset-1-3{--start:1;--cols:3;display:block}.box-offset-1-3:before{content:"--start:1;"}.box-offset-1-3:after{content:"--cols:3;"}.box-offset-1-4{--start:1;--cols:4;display:block}.box-offset-1-4:before{content:"--start:1;"}.box-offset-1-4:after{content:"--cols:4;"}.box-offset-2-1{--start:2;--cols:1;display:block}.box-offset-2-1:before{content:"--start:2;"}.box-offset-2-1:after{content:"--cols:1;"}.box-offset-2-2{--start:2;--cols:2;display:block}.box-offset-2-2:before{content:"--start:2;"}.box-offset-2-2:after{content:"--cols:2;"}.box-offset-2-3{--start:2;--cols:3;display:block}.box-offset-2-3:before{content:"--start:2;"}.box-offset-2-3:after{content:"--cols:3;"}.box-offset-3-1{--start:3;--cols:1;display:block}.box-offset-3-1:before{content:"--start:3;"}.box-offset-3-1:after{content:"--cols:1;"}.box-offset-3-2{--start:3;--cols:2;display:block}.box-offset-3-2:before{content:"--start:3;"}.box-offset-3-2:after{content:"--cols:2;"}.box-offset-4-1{--start:4;--cols:1;display:block}.box-offset-4-1:before{content:"--start:4;"}.box-offset-4-1:after{content:"--cols:1;"}@media (width > 667px){.box-offset-1-1{--start:1;--cols:1;display:block}.box-offset-1-1:before{content:"--start:1;"}.box-offset-1-1:after{content:"--cols:1;"}.box-offset-1-2{--start:1;--cols:2;display:block}.box-offset-1-2:before{content:"--start:1;"}.box-offset-1-2:after{content:"--cols:2;"}.box-offset-1-3{--start:1;--cols:3;display:block}.box-offset-1-3:before{content:"--start:1;"}.box-offset-1-3:after{content:"--cols:3;"}.box-offset-1-4{--start:1;--cols:4;display:block}.box-offset-1-4:before{content:"--start:1;"}.box-offset-1-4:after{content:"--cols:4;"}.box-offset-1-5{--start:1;--cols:5;display:block}.box-offset-1-5:before{content:"--start:1;"}.box-offset-1-5:after{content:"--cols:5;"}.box-offset-1-6{--start:1;--cols:6;display:block}.box-offset-1-6:before{content:"--start:1;"}.box-offset-1-6:after{content:"--cols:6;"}.box-offset-1-7{--start:1;--cols:7;display:block}.box-offset-1-7:before{content:"--start:1;"}.box-offset-1-7:after{content:"--cols:7;"}.box-offset-1-8{--start:1;--cols:8;display:block}.box-offset-1-8:before{content:"--start:1;"}.box-offset-1-8:after{content:"--cols:8;"}.box-offset-2-1{--start:2;--cols:1;display:block}.box-offset-2-1:before{content:"--start:2;"}.box-offset-2-1:after{content:"--cols:1;"}.box-offset-2-2{--start:2;--cols:2;display:block}.box-offset-2-2:before{content:"--start:2;"}.box-offset-2-2:after{content:"--cols:2;"}.box-offset-2-3{--start:2;--cols:3;display:block}.box-offset-2-3:before{content:"--start:2;"}.box-offset-2-3:after{content:"--cols:3;"}.box-offset-2-4{--start:2;--cols:4;display:block}.box-offset-2-4:before{content:"--start:2;"}.box-offset-2-4:after{content:"--cols:4;"}.box-offset-2-5{--start:2;--cols:5;display:block}.box-offset-2-5:before{content:"--start:2;"}.box-offset-2-5:after{content:"--cols:5;"}.box-offset-2-6{--start:2;--cols:6;display:block}.box-offset-2-6:before{content:"--start:2;"}.box-offset-2-6:after{content:"--cols:6;"}.box-offset-2-7{--start:2;--cols:7;display:block}.box-offset-2-7:before{content:"--start:2;"}.box-offset-2-7:after{content:"--cols:7;"}.box-offset-3-1{--start:3;--cols:1;display:block}.box-offset-3-1:before{content:"--start:3;"}.box-offset-3-1:after{content:"--cols:1;"}.box-offset-3-2{--start:3;--cols:2;display:block}.box-offset-3-2:before{content:"--start:3;"}.box-offset-3-2:after{content:"--cols:2;"}.box-offset-3-3{--start:3;--cols:3;display:block}.box-offset-3-3:before{content:"--start:3;"}.box-offset-3-3:after{content:"--cols:3;"}.box-offset-3-4{--start:3;--cols:4;display:block}.box-offset-3-4:before{content:"--start:3;"}.box-offset-3-4:after{content:"--cols:4;"}.box-offset-3-5{--start:3;--cols:5;display:block}.box-offset-3-5:before{content:"--start:3;"}.box-offset-3-5:after{content:"--cols:5;"}.box-offset-3-6{--start:3;--cols:6;display:block}.box-offset-3-6:before{content:"--start:3;"}.box-offset-3-6:after{content:"--cols:6;"}.box-offset-4-1{--start:4;--cols:1;display:block}.box-offset-4-1:before{content:"--start:4;"}.box-offset-4-1:after{content:"--cols:1;"}.box-offset-4-2{--start:4;--cols:2;display:block}.box-offset-4-2:before{content:"--start:4;"}.box-offset-4-2:after{content:"--cols:2;"}.box-offset-4-3{--start:4;--cols:3;display:block}.box-offset-4-3:before{content:"--start:4;"}.box-offset-4-3:after{content:"--cols:3;"}.box-offset-4-4{--start:4;--cols:4;display:block}.box-offset-4-4:before{content:"--start:4;"}.box-offset-4-4:after{content:"--cols:4;"}.box-offset-4-5{--start:4;--cols:5;display:block}.box-offset-4-5:before{content:"--start:4;"}.box-offset-4-5:after{content:"--cols:5;"}.box-offset-5-1{--start:5;--cols:1;display:block}.box-offset-5-1:before{content:"--start:5;"}.box-offset-5-1:after{content:"--cols:1;"}.box-offset-5-2{--start:5;--cols:2;display:block}.box-offset-5-2:before{content:"--start:5;"}.box-offset-5-2:after{content:"--cols:2;"}.box-offset-5-3{--start:5;--cols:3;display:block}.box-offset-5-3:before{content:"--start:5;"}.box-offset-5-3:after{content:"--cols:3;"}.box-offset-5-4{--start:5;--cols:4;display:block}.box-offset-5-4:before{content:"--start:5;"}.box-offset-5-4:after{content:"--cols:4;"}.box-offset-6-1{--start:6;--cols:1;display:block}.box-offset-6-1:before{content:"--start:6;"}.box-offset-6-1:after{content:"--cols:1;"}.box-offset-6-2{--start:6;--cols:2;display:block}.box-offset-6-2:before{content:"--start:6;"}.box-offset-6-2:after{content:"--cols:2;"}.box-offset-6-3{--start:6;--cols:3;display:block}.box-offset-6-3:before{content:"--start:6;"}.box-offset-6-3:after{content:"--cols:3;"}.box-offset-7-1{--start:7;--cols:1;display:block}.box-offset-7-1:before{content:"--start:7;"}.box-offset-7-1:after{content:"--cols:1;"}.box-offset-7-2{--start:7;--cols:2;display:block}.box-offset-7-2:before{content:"--start:7;"}.box-offset-7-2:after{content:"--cols:2;"}.box-offset-8-1{--start:8;--cols:1;display:block}.box-offset-8-1:before{content:"--start:8;"}.box-offset-8-1:after{content:"--cols:1;"}}@media (width > 1023px){.box-offset-1-1{--start:1;--cols:1;display:block}.box-offset-1-1:before{content:"--start:1;"}.box-offset-1-1:after{content:"--cols:1;"}.box-offset-1-2{--start:1;--cols:2;display:block}.box-offset-1-2:before{content:"--start:1;"}.box-offset-1-2:after{content:"--cols:2;"}.box-offset-1-3{--start:1;--cols:3;display:block}.box-offset-1-3:before{content:"--start:1;"}.box-offset-1-3:after{content:"--cols:3;"}.box-offset-1-4{--start:1;--cols:4;display:block}.box-offset-1-4:before{content:"--start:1;"}.box-offset-1-4:after{content:"--cols:4;"}.box-offset-1-5{--start:1;--cols:5;display:block}.box-offset-1-5:before{content:"--start:1;"}.box-offset-1-5:after{content:"--cols:5;"}.box-offset-1-6{--start:1;--cols:6;display:block}.box-offset-1-6:before{content:"--start:1;"}.box-offset-1-6:after{content:"--cols:6;"}.box-offset-1-7{--start:1;--cols:7;display:block}.box-offset-1-7:before{content:"--start:1;"}.box-offset-1-7:after{content:"--cols:7;"}.box-offset-1-8{--start:1;--cols:8;display:block}.box-offset-1-8:before{content:"--start:1;"}.box-offset-1-8:after{content:"--cols:8;"}.box-offset-1-9{--start:1;--cols:9;display:block}.box-offset-1-9:before{content:"--start:1;"}.box-offset-1-9:after{content:"--cols:9;"}.box-offset-1-10{--start:1;--cols:10;display:block}.box-offset-1-10:before{content:"--start:1;"}.box-offset-1-10:after{content:"--cols:10;"}.box-offset-1-11{--start:1;--cols:11;display:block}.box-offset-1-11:before{content:"--start:1;"}.box-offset-1-11:after{content:"--cols:11;"}.box-offset-1-12{--start:1;--cols:12;display:block}.box-offset-1-12:before{content:"--start:1;"}.box-offset-1-12:after{content:"--cols:12;"}.box-offset-2-1{--start:2;--cols:1;display:block}.box-offset-2-1:before{content:"--start:2;"}.box-offset-2-1:after{content:"--cols:1;"}.box-offset-2-2{--start:2;--cols:2;display:block}.box-offset-2-2:before{content:"--start:2;"}.box-offset-2-2:after{content:"--cols:2;"}.box-offset-2-3{--start:2;--cols:3;display:block}.box-offset-2-3:before{content:"--start:2;"}.box-offset-2-3:after{content:"--cols:3;"}.box-offset-2-4{--start:2;--cols:4;display:block}.box-offset-2-4:before{content:"--start:2;"}.box-offset-2-4:after{content:"--cols:4;"}.box-offset-2-5{--start:2;--cols:5;display:block}.box-offset-2-5:before{content:"--start:2;"}.box-offset-2-5:after{content:"--cols:5;"}.box-offset-2-6{--start:2;--cols:6;display:block}.box-offset-2-6:before{content:"--start:2;"}.box-offset-2-6:after{content:"--cols:6;"}.box-offset-2-7{--start:2;--cols:7;display:block}.box-offset-2-7:before{content:"--start:2;"}.box-offset-2-7:after{content:"--cols:7;"}.box-offset-2-8{--start:2;--cols:8;display:block}.box-offset-2-8:before{content:"--start:2;"}.box-offset-2-8:after{content:"--cols:8;"}.box-offset-2-9{--start:2;--cols:9;display:block}.box-offset-2-9:before{content:"--start:2;"}.box-offset-2-9:after{content:"--cols:9;"}.box-offset-2-10{--start:2;--cols:10;display:block}.box-offset-2-10:before{content:"--start:2;"}.box-offset-2-10:after{content:"--cols:10;"}.box-offset-2-11{--start:2;--cols:11;display:block}.box-offset-2-11:before{content:"--start:2;"}.box-offset-2-11:after{content:"--cols:11;"}.box-offset-3-1{--start:3;--cols:1;display:block}.box-offset-3-1:before{content:"--start:3;"}.box-offset-3-1:after{content:"--cols:1;"}.box-offset-3-2{--start:3;--cols:2;display:block}.box-offset-3-2:before{content:"--start:3;"}.box-offset-3-2:after{content:"--cols:2;"}.box-offset-3-3{--start:3;--cols:3;display:block}.box-offset-3-3:before{content:"--start:3;"}.box-offset-3-3:after{content:"--cols:3;"}.box-offset-3-4{--start:3;--cols:4;display:block}.box-offset-3-4:before{content:"--start:3;"}.box-offset-3-4:after{content:"--cols:4;"}.box-offset-3-5{--start:3;--cols:5;display:block}.box-offset-3-5:before{content:"--start:3;"}.box-offset-3-5:after{content:"--cols:5;"}.box-offset-3-6{--start:3;--cols:6;display:block}.box-offset-3-6:before{content:"--start:3;"}.box-offset-3-6:after{content:"--cols:6;"}.box-offset-3-7{--start:3;--cols:7;display:block}.box-offset-3-7:before{content:"--start:3;"}.box-offset-3-7:after{content:"--cols:7;"}.box-offset-3-8{--start:3;--cols:8;display:block}.box-offset-3-8:before{content:"--start:3;"}.box-offset-3-8:after{content:"--cols:8;"}.box-offset-3-9{--start:3;--cols:9;display:block}.box-offset-3-9:before{content:"--start:3;"}.box-offset-3-9:after{content:"--cols:9;"}.box-offset-3-10{--start:3;--cols:10;display:block}.box-offset-3-10:before{content:"--start:3;"}.box-offset-3-10:after{content:"--cols:10;"}.box-offset-4-1{--start:4;--cols:1;display:block}.box-offset-4-1:before{content:"--start:4;"}.box-offset-4-1:after{content:"--cols:1;"}.box-offset-4-2{--start:4;--cols:2;display:block}.box-offset-4-2:before{content:"--start:4;"}.box-offset-4-2:after{content:"--cols:2;"}.box-offset-4-3{--start:4;--cols:3;display:block}.box-offset-4-3:before{content:"--start:4;"}.box-offset-4-3:after{content:"--cols:3;"}.box-offset-4-4{--start:4;--cols:4;display:block}.box-offset-4-4:before{content:"--start:4;"}.box-offset-4-4:after{content:"--cols:4;"}.box-offset-4-5{--start:4;--cols:5;display:block}.box-offset-4-5:before{content:"--start:4;"}.box-offset-4-5:after{content:"--cols:5;"}.box-offset-4-6{--start:4;--cols:6;display:block}.box-offset-4-6:before{content:"--start:4;"}.box-offset-4-6:after{content:"--cols:6;"}.box-offset-4-7{--start:4;--cols:7;display:block}.box-offset-4-7:before{content:"--start:4;"}.box-offset-4-7:after{content:"--cols:7;"}.box-offset-4-8{--start:4;--cols:8;display:block}.box-offset-4-8:before{content:"--start:4;"}.box-offset-4-8:after{content:"--cols:8;"}.box-offset-4-9{--start:4;--cols:9;display:block}.box-offset-4-9:before{content:"--start:4;"}.box-offset-4-9:after{content:"--cols:9;"}.box-offset-5-1{--start:5;--cols:1;display:block}.box-offset-5-1:before{content:"--start:5;"}.box-offset-5-1:after{content:"--cols:1;"}.box-offset-5-2{--start:5;--cols:2;display:block}.box-offset-5-2:before{content:"--start:5;"}.box-offset-5-2:after{content:"--cols:2;"}.box-offset-5-3{--start:5;--cols:3;display:block}.box-offset-5-3:before{content:"--start:5;"}.box-offset-5-3:after{content:"--cols:3;"}.box-offset-5-4{--start:5;--cols:4;display:block}.box-offset-5-4:before{content:"--start:5;"}.box-offset-5-4:after{content:"--cols:4;"}.box-offset-5-5{--start:5;--cols:5;display:block}.box-offset-5-5:before{content:"--start:5;"}.box-offset-5-5:after{content:"--cols:5;"}.box-offset-5-6{--start:5;--cols:6;display:block}.box-offset-5-6:before{content:"--start:5;"}.box-offset-5-6:after{content:"--cols:6;"}.box-offset-5-7{--start:5;--cols:7;display:block}.box-offset-5-7:before{content:"--start:5;"}.box-offset-5-7:after{content:"--cols:7;"}.box-offset-5-8{--start:5;--cols:8;display:block}.box-offset-5-8:before{content:"--start:5;"}.box-offset-5-8:after{content:"--cols:8;"}.box-offset-6-1{--start:6;--cols:1;display:block}.box-offset-6-1:before{content:"--start:6;"}.box-offset-6-1:after{content:"--cols:1;"}.box-offset-6-2{--start:6;--cols:2;display:block}.box-offset-6-2:before{content:"--start:6;"}.box-offset-6-2:after{content:"--cols:2;"}.box-offset-6-3{--start:6;--cols:3;display:block}.box-offset-6-3:before{content:"--start:6;"}.box-offset-6-3:after{content:"--cols:3;"}.box-offset-6-4{--start:6;--cols:4;display:block}.box-offset-6-4:before{content:"--start:6;"}.box-offset-6-4:after{content:"--cols:4;"}.box-offset-6-5{--start:6;--cols:5;display:block}.box-offset-6-5:before{content:"--start:6;"}.box-offset-6-5:after{content:"--cols:5;"}.box-offset-6-6{--start:6;--cols:6;display:block}.box-offset-6-6:before{content:"--start:6;"}.box-offset-6-6:after{content:"--cols:6;"}.box-offset-6-7{--start:6;--cols:7;display:block}.box-offset-6-7:before{content:"--start:6;"}.box-offset-6-7:after{content:"--cols:7;"}.box-offset-7-1{--start:7;--cols:1;display:block}.box-offset-7-1:before{content:"--start:7;"}.box-offset-7-1:after{content:"--cols:1;"}.box-offset-7-2{--start:7;--cols:2;display:block}.box-offset-7-2:before{content:"--start:7;"}.box-offset-7-2:after{content:"--cols:2;"}.box-offset-7-3{--start:7;--cols:3;display:block}.box-offset-7-3:before{content:"--start:7;"}.box-offset-7-3:after{content:"--cols:3;"}.box-offset-7-4{--start:7;--cols:4;display:block}.box-offset-7-4:before{content:"--start:7;"}.box-offset-7-4:after{content:"--cols:4;"}.box-offset-7-5{--start:7;--cols:5;display:block}.box-offset-7-5:before{content:"--start:7;"}.box-offset-7-5:after{content:"--cols:5;"}.box-offset-7-6{--start:7;--cols:6;display:block}.box-offset-7-6:before{content:"--start:7;"}.box-offset-7-6:after{content:"--cols:6;"}.box-offset-8-1{--start:8;--cols:1;display:block}.box-offset-8-1:before{content:"--start:8;"}.box-offset-8-1:after{content:"--cols:1;"}.box-offset-8-2{--start:8;--cols:2;display:block}.box-offset-8-2:before{content:"--start:8;"}.box-offset-8-2:after{content:"--cols:2;"}.box-offset-8-3{--start:8;--cols:3;display:block}.box-offset-8-3:before{content:"--start:8;"}.box-offset-8-3:after{content:"--cols:3;"}.box-offset-8-4{--start:8;--cols:4;display:block}.box-offset-8-4:before{content:"--start:8;"}.box-offset-8-4:after{content:"--cols:4;"}.box-offset-8-5{--start:8;--cols:5;display:block}.box-offset-8-5:before{content:"--start:8;"}.box-offset-8-5:after{content:"--cols:5;"}.box-offset-9-1{--start:9;--cols:1;display:block}.box-offset-9-1:before{content:"--start:9;"}.box-offset-9-1:after{content:"--cols:1;"}.box-offset-9-2{--start:9;--cols:2;display:block}.box-offset-9-2:before{content:"--start:9;"}.box-offset-9-2:after{content:"--cols:2;"}.box-offset-9-3{--start:9;--cols:3;display:block}.box-offset-9-3:before{content:"--start:9;"}.box-offset-9-3:after{content:"--cols:3;"}.box-offset-9-4{--start:9;--cols:4;display:block}.box-offset-9-4:before{content:"--start:9;"}.box-offset-9-4:after{content:"--cols:4;"}.box-offset-10-1{--start:10;--cols:1;display:block}.box-offset-10-1:before{content:"--start:10;"}.box-offset-10-1:after{content:"--cols:1;"}.box-offset-10-2{--start:10;--cols:2;display:block}.box-offset-10-2:before{content:"--start:10;"}.box-offset-10-2:after{content:"--cols:2;"}.box-offset-10-3{--start:10;--cols:3;display:block}.box-offset-10-3:before{content:"--start:10;"}.box-offset-10-3:after{content:"--cols:3;"}.box-offset-11-1{--start:11;--cols:1;display:block}.box-offset-11-1:before{content:"--start:11;"}.box-offset-11-1:after{content:"--cols:1;"}.box-offset-11-2{--start:11;--cols:2;display:block}.box-offset-11-2:before{content:"--start:11;"}.box-offset-11-2:after{content:"--cols:2;"}.box-offset-12-1{--start:12;--cols:1;display:block}.box-offset-12-1:before{content:"--start:12;"}.box-offset-12-1:after{content:"--cols:1;"}}

package/dist/Grid/Grid-demo-wireframe.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Grid/Grid-demo-wireframe.scss%23sass","../../src/Grid/Grid-demo-wireframe.scss"],"names":[],"mappings":"AAEA,4BACE,8BCDF,CDIA,KACE,qBCAF,CDIA,eCLA,uBAMA,CDDA,UACE,YCAF,CDGE,wBAJF,UCIE,QACA,CACF,CDCE,wBAPF,UCSE,QACF,CACA,CDEE,wBADF,eCGE,QACA,CACF,CDDE,wBCGF,eDFI,QCIJ,CACA,CDAE,wBADF,eCKE,QACA,CACF,CDFE,wBALF,eCUA,QACE,CACF,CDFA,UACE,YCKF,CDHE,wBAHF,UCSE,QACA,CDJE,qBACE,SCMJ,CACF,CDHE,wBAGE,+BCMJ,QACE,CACF,CDFA,YACE,YAAA,CACA,qECKF,CDAE,eACE,eCEJ,CDCE,iBACE,YCCJ,CDEE,0BACE,kBCAJ,CDGE,0BACE,kBCDJ,CDIE,mBACE,gBAAA,CACA,oBAAA,CACA,iBCFJ,CDMA,YAOE,0BAAA,CCTF,YAAA,CDOE,eAAA,CAFA,WAAA,CCHF,oBAAA,CDCE,iBAAA,CAKA,iBCFF,CDKE,qCAEE,aCJJ,CDaM,gBACE,SAAA,CACA,QAAA,CAEA,aCXR,CDaQ,uBCXR,oBACA,CDcQ,sBACE,mBCZV,CDCM,gBACE,SAAA,CACA,QAAA,CAEA,aCCR,CDCQ,uBACE,oBCCV,CDEQ,sBACE,mBCAV,CDXM,gBACE,SAAA,CACA,QAAA,CCcR,aACA,CDXQ,uBACE,oBCaV,CDVQ,sBCYR,mBACA,CDvBM,gBC0BN,SAAA,CDxBQ,QAAA,CAEA,aCyBR,CDvBQ,uBACE,oBCyBV,CDtBQ,sBACE,mBCwBV,CDnCM,gBACE,SAAA,CACA,QAAA,CAEA,aCqCR,CDnCQ,uBACE,oBCqCV,CDlCQ,sBACE,mBCoCV,CD/CM,gBACE,SAAA,CACA,QAAA,CAEA,aCiDR,CD/CQ,uBACE,oBCiDV,CD9CQ,sBACE,mBCgDV,CD3DM,gBACE,SAAA,CACA,QAAA,CAEA,aC6DR,CD3DQ,uBACE,oBC6DV,CD1DQ,sBACE,mBC4DV,CDvEM,gBACE,SAAA,CACA,QAAA,CAEA,aCyER,CDvEQ,uBACE,oBCyEV,CDtEQ,sBACE,mBCwEV,CDnFM,gBACE,SAAA,CACA,QAAA,CAEA,aCqFR,CDnFQ,uBACE,oBCqFV,CDlFQ,sBACE,mBCoFV,CD/FM,gBACE,SAAA,CACA,QAAA,CAEA,aCiGR,CD/FQ,uBACE,oBCiGV,CD9FQ,sBACE,mBCgGV,CDvFA,uBApBM,gBACE,SAAA,CACA,QAAA,CAEA,aC8GN,CD5GM,uBACE,oBC8GR,CD3GM,sBACE,mBC6GR,CDxHI,gBACE,SAAA,CACA,QAAA,CAEA,aCyHN,CDvHM,uBACE,oBCyHR,CDtHM,sBACE,mBCwHR,CDnII,gBACE,SAAA,CACA,QAAA,CAEA,aCoIN,CDlIM,uBACE,oBCoIR,CDjIM,sBACE,mBCmIR,CD9II,gBACE,SAAA,CACA,QAAA,CAEA,aC+IN,CD7IM,uBACE,oBC+IR,CD5IM,sBACE,mBC8IR,CDzJI,gBACE,SAAA,CACA,QAAA,CAEA,aC0JN,CDxJM,uBACE,oBC0JR,CDvJM,sBACE,mBCyJR,CDpKI,gBACE,SAAA,CACA,QAAA,CAEA,aCqKN,CDnKM,uBACE,oBCqKR,CDlKM,sBACE,mBCoKR,CD/KI,gBACE,SAAA,CACA,QAAA,CAEA,aCgLN,CD9KM,uBACE,oBCgLR,CD7KM,sBACE,mBC+KR,CD1LI,gBACE,SAAA,CACA,QAAA,CAEA,aC2LN,CDzLM,uBACE,oBC2LR,CDxLM,sBACE,mBC0LR,CDrMI,gBACE,SAAA,CACA,QAAA,CAEA,aCsMN,CDpMM,uBACE,oBCsMR,CDnMM,sBACE,mBCqMR,CDhNI,gBACE,SAAA,CACA,QAAA,CAEA,aCiNN,CD/MM,uBACE,oBCiNR,CD9MM,sBACE,mBCgNR,CD3NI,gBACE,SAAA,CACA,QAAA,CAEA,aC4NN,CD1NM,uBACE,oBC4NR,CDzNM,sBACE,mBC2NR,CDtOI,gBACE,SAAA,CACA,QAAA,CAEA,aCuON,CDrOM,uBACE,oBCuOR,CDpOM,sBACE,mBCsOR,CDjPI,gBACE,SAAA,CACA,QAAA,CAEA,aCkPN,CDhPM,uBACE,oBCkPR,CD/OM,sBACE,mBCiPR,CD5PI,gBACE,SAAA,CACA,QAAA,CAEA,aC6PN,CD3PM,uBACE,oBC6PR,CD1PM,sBACE,mBC4PR,CDvQI,gBACE,SAAA,CACA,QAAA,CAEA,aCwQN,CDtQM,uBACE,oBCwQR,CDrQM,sBACE,mBCuQR,CDlRI,gBACE,SAAA,CACA,QAAA,CAEA,aCmRN,CDjRM,uBACE,oBCmRR,CDhRM,sBACE,mBCkRR,CD7RI,gBACE,SAAA,CACA,QAAA,CAEA,aC8RN,CD5RM,uBACE,oBC8RR,CD3RM,sBACE,mBC6RR,CDxSI,gBACE,SAAA,CACA,QAAA,CAEA,aCySN,CDvSM,uBACE,oBCySR,CDtSM,sBACE,mBCwSR,CDnTI,gBACE,SAAA,CACA,QAAA,CAEA,aCoTN,CDlTM,uBACE,oBCoTR,CDjTM,sBACE,mBCmTR,CD9TI,gBACE,SAAA,CACA,QAAA,CAEA,aC+TN,CD7TM,uBACE,oBC+TR,CD5TM,sBACE,mBC8TR,CDzUI,gBACE,SAAA,CACA,QAAA,CAEA,aC0UN,CDxUM,uBACE,oBC0UR,CDvUM,sBACE,mBCyUR,CDpVI,gBACE,SAAA,CACA,QAAA,CAEA,aCqVN,CDnVM,uBACE,oBCqVR,CDlVM,sBACE,mBCoVR,CD/VI,gBACE,SAAA,CACA,QAAA,CAEA,aCgWN,CD9VM,uBACE,oBCgWR,CD7VM,sBACE,mBC+VR,CD1WI,gBACE,SAAA,CACA,QAAA,CAEA,aC2WN,CDzWM,uBACE,oBC2WR,CDxWM,sBACE,mBC0WR,CDrXI,gBACE,SAAA,CACA,QAAA,CAEA,aCsXN,CDpXM,uBACE,oBCsXR,CDnXM,sBACE,mBCqXR,CDhYI,gBACE,SAAA,CACA,QAAA,CAEA,aCiYN,CD/XM,uBACE,oBCiYR,CD9XM,sBACE,mBCgYR,CD3YI,gBACE,SAAA,CACA,QAAA,CAEA,aC4YN,CD1YM,uBACE,oBC4YR,CDzYM,sBACE,mBC2YR,CDtZI,gBACE,SAAA,CACA,QAAA,CAEA,aCuZN,CDrZM,uBACE,oBCuZR,CDpZM,sBACE,mBCsZR,CDjaI,gBACE,SAAA,CACA,QAAA,CAEA,aCkaN,CDhaM,uBACE,oBCkaR,CD/ZM,sBACE,mBCiaR,CD5aI,gBACE,SAAA,CACA,QAAA,CAEA,aC6aN,CD3aM,uBACE,oBC6aR,CD1aM,sBACE,mBC4aR,CDvbI,gBACE,SAAA,CACA,QAAA,CAEA,aCwbN,CDtbM,uBACE,oBCwbR,CDrbM,sBACE,mBCubR,CDlcI,gBACE,SAAA,CACA,QAAA,CAEA,aCmcN,CDjcM,uBACE,oBCmcR,CDhcM,sBACE,mBCkcR,CD7cI,gBACE,SAAA,CACA,QAAA,CAEA,aC8cN,CD5cM,uBACE,oBC8cR,CD3cM,sBACE,mBC6cR,CDxdI,gBACE,SAAA,CACA,QAAA,CAEA,aCydN,CDvdM,uBACE,oBCydR,CDtdM,sBACE,mBCwdR,CDneI,gBACE,SAAA,CACA,QAAA,CAEA,aCoeN,CDleM,uBACE,oBCoeR,CDjeM,sBACE,mBCmeR,CD9eI,gBACE,SAAA,CACA,QAAA,CAEA,aC+eN,CD7eM,uBACE,oBC+eR,CD5eM,sBACE,mBC8eR,CACF,CDleA,wBAxBM,gBACE,SAAA,CACA,QAAA,CAEA,aC4fN,CD1fM,uBACE,oBC4fR,CDzfM,sBACE,mBC2fR,CDtgBI,gBACE,SAAA,CACA,QAAA,CAEA,aCugBN,CDrgBM,uBACE,oBCugBR,CDpgBM,sBACE,mBCsgBR,CDjhBI,gBACE,SAAA,CACA,QAAA,CAEA,aCkhBN,CDhhBM,uBACE,oBCkhBR,CD/gBM,sBACE,mBCihBR,CD5hBI,gBACE,SAAA,CACA,QAAA,CAEA,aC6hBN,CD3hBM,uBACE,oBC6hBR,CD1hBM,sBACE,mBC4hBR,CDviBI,gBACE,SAAA,CACA,QAAA,CAEA,aCwiBN,CDtiBM,uBACE,oBCwiBR,CDriBM,sBACE,mBCuiBR,CDljBI,gBACE,SAAA,CACA,QAAA,CAEA,aCmjBN,CDjjBM,uBACE,oBCmjBR,CDhjBM,sBACE,mBCkjBR,CD7jBI,gBACE,SAAA,CACA,QAAA,CAEA,aC8jBN,CD5jBM,uBACE,oBC8jBR,CD3jBM,sBACE,mBC6jBR,CDxkBI,gBACE,SAAA,CACA,QAAA,CAEA,aCykBN,CDvkBM,uBACE,oBCykBR,CDtkBM,sBACE,mBCwkBR,CDnlBI,gBACE,SAAA,CACA,QAAA,CAEA,aColBN,CDllBM,uBACE,oBColBR,CDjlBM,sBACE,mBCmlBR,CD9lBI,iBACE,SAAA,CACA,SAAA,CAEA,aC+lBN,CD7lBM,wBACE,oBC+lBR,CD5lBM,uBACE,oBC8lBR,CDzmBI,iBACE,SAAA,CACA,SAAA,CAEA,aC0mBN,CDxmBM,wBACE,oBC0mBR,CDvmBM,uBACE,oBCymBR,CDpnBI,iBACE,SAAA,CACA,SAAA,CAEA,aCqnBN,CDnnBM,wBACE,oBCqnBR,CDlnBM,uBACE,oBConBR,CD/nBI,gBACE,SAAA,CACA,QAAA,CAEA,aCgoBN,CD9nBM,uBACE,oBCgoBR,CD7nBM,sBACE,mBC+nBR,CD1oBI,gBACE,SAAA,CACA,QAAA,CAEA,aC2oBN,CDzoBM,uBACE,oBC2oBR,CDxoBM,sBACE,mBC0oBR,CDrpBI,gBACE,SAAA,CACA,QAAA,CAEA,aCspBN,CDppBM,uBACE,oBCspBR,CDnpBM,sBACE,mBCqpBR,CDhqBI,gBACE,SAAA,CACA,QAAA,CAEA,aCiqBN,CD/pBM,uBACE,oBCiqBR,CD9pBM,sBACE,mBCgqBR,CD3qBI,gBACE,SAAA,CACA,QAAA,CAEA,aC4qBN,CD1qBM,uBACE,oBC4qBR,CDzqBM,sBACE,mBC2qBR,CDtrBI,gBACE,SAAA,CACA,QAAA,CAEA,aCurBN,CDrrBM,uBACE,oBCurBR,CDprBM,sBACE,mBCsrBR,CDjsBI,gBACE,SAAA,CACA,QAAA,CAEA,aCksBN,CDhsBM,uBACE,oBCksBR,CD/rBM,sBACE,mBCisBR,CD5sBI,gBACE,SAAA,CACA,QAAA,CAEA,aC6sBN,CD3sBM,uBACE,oBC6sBR,CD1sBM,sBACE,mBC4sBR,CDvtBI,gBACE,SAAA,CACA,QAAA,CAEA,aCwtBN,CDttBM,uBACE,oBCwtBR,CDrtBM,sBACE,mBCutBR,CDluBI,iBACE,SAAA,CACA,SAAA,CAEA,aCmuBN,CDjuBM,wBACE,oBCmuBR,CDhuBM,uBACE,oBCkuBR,CD7uBI,iBACE,SAAA,CACA,SAAA,CAEA,aC8uBN,CD5uBM,wBACE,oBC8uBR,CD3uBM,uBACE,oBC6uBR,CDxvBI,gBACE,SAAA,CACA,QAAA,CAEA,aCyvBN,CDvvBM,uBACE,oBCyvBR,CDtvBM,sBACE,mBCwvBR,CDnwBI,gBACE,SAAA,CACA,QAAA,CAEA,aCowBN,CDlwBM,uBACE,oBCowBR,CDjwBM,sBACE,mBCmwBR,CD9wBI,gBACE,SAAA,CACA,QAAA,CAEA,aC+wBN,CD7wBM,uBACE,oBC+wBR,CD5wBM,sBACE,mBC8wBR,CDzxBI,gBACE,SAAA,CACA,QAAA,CAEA,aC0xBN,CDxxBM,uBACE,oBC0xBR,CDvxBM,sBACE,mBCyxBR,CDpyBI,gBACE,SAAA,CACA,QAAA,CAEA,aCqyBN,CDnyBM,uBACE,oBCqyBR,CDlyBM,sBACE,mBCoyBR,CD/yBI,gBACE,SAAA,CACA,QAAA,CAEA,aCgzBN,CD9yBM,uBACE,oBCgzBR,CD7yBM,sBACE,mBC+yBR,CD1zBI,gBACE,SAAA,CACA,QAAA,CAEA,aC2zBN,CDzzBM,uBACE,oBC2zBR,CDxzBM,sBACE,mBC0zBR,CDr0BI,gBACE,SAAA,CACA,QAAA,CAEA,aCs0BN,CDp0BM,uBACE,oBCs0BR,CDn0BM,sBACE,mBCq0BR,CDh1BI,gBACE,SAAA,CACA,QAAA,CAEA,aCi1BN,CD/0BM,uBACE,oBCi1BR,CD90BM,sBACE,mBCg1BR,CD31BI,iBACE,SAAA,CACA,SAAA,CAEA,aC41BN,CD11BM,wBACE,oBC41BR,CDz1BM,uBACE,oBC21BR,CDt2BI,gBACE,SAAA,CACA,QAAA,CAEA,aCu2BN,CDr2BM,uBACE,oBCu2BR,CDp2BM,sBACE,mBCs2BR,CDj3BI,gBACE,SAAA,CACA,QAAA,CAEA,aCk3BN,CDh3BM,uBACE,oBCk3BR,CD/2BM,sBACE,mBCi3BR,CD53BI,gBACE,SAAA,CACA,QAAA,CAEA,aC63BN,CD33BM,uBACE,oBC63BR,CD13BM,sBACE,mBC43BR,CDv4BI,gBACE,SAAA,CACA,QAAA,CAEA,aCw4BN,CDt4BM,uBACE,oBCw4BR,CDr4BM,sBACE,mBCu4BR,CDl5BI,gBACE,SAAA,CACA,QAAA,CAEA,aCm5BN,CDj5BM,uBACE,oBCm5BR,CDh5BM,sBACE,mBCk5BR,CD75BI,gBACE,SAAA,CACA,QAAA,CAEA,aC85BN,CD55BM,uBACE,oBC85BR,CD35BM,sBACE,mBC65BR,CDx6BI,gBACE,SAAA,CACA,QAAA,CAEA,aCy6BN,CDv6BM,uBACE,oBCy6BR,CDt6BM,sBACE,mBCw6BR,CDn7BI,gBACE,SAAA,CACA,QAAA,CAEA,aCo7BN,CDl7BM,uBACE,oBCo7BR,CDj7BM,sBACE,mBCm7BR,CD97BI,gBACE,SAAA,CACA,QAAA,CAEA,aC+7BN,CD77BM,uBACE,oBC+7BR,CD57BM,sBACE,mBC87BR,CDz8BI,gBACE,SAAA,CACA,QAAA,CAEA,aC08BN,CDx8BM,uBACE,oBC08BR,CDv8BM,sBACE,mBCy8BR,CDp9BI,gBACE,SAAA,CACA,QAAA,CAEA,aCq9BN,CDn9BM,uBACE,oBCq9BR,CDl9BM,sBACE,mBCo9BR,CD/9BI,gBACE,SAAA,CACA,QAAA,CAEA,aCg+BN,CD99BM,uBACE,oBCg+BR,CD79BM,sBACE,mBC+9BR,CD1+BI,gBACE,SAAA,CACA,QAAA,CAEA,aC2+BN,CDz+BM,uBACE,oBC2+BR,CDx+BM,sBACE,mBC0+BR,CDr/BI,gBACE,SAAA,CACA,QAAA,CAEA,aCs/BN,CDp/BM,uBACE,oBCs/BR,CDn/BM,sBACE,mBCq/BR,CDhgCI,gBACE,SAAA,CACA,QAAA,CAEA,aCigCN,CD//BM,uBACE,oBCigCR,CD9/BM,sBACE,mBCggCR,CD3gCI,gBACE,SAAA,CACA,QAAA,CAEA,aC4gCN,CD1gCM,uBACE,oBC4gCR,CDzgCM,sBACE,mBC2gCR,CDthCI,gBACE,SAAA,CACA,QAAA,CAEA,aCuhCN,CDrhCM,uBACE,oBCuhCR,CDphCM,sBACE,mBCshCR,CDjiCI,gBACE,SAAA,CACA,QAAA,CAEA,aCkiCN,CDhiCM,uBACE,oBCkiCR,CD/hCM,sBACE,mBCiiCR,CD5iCI,gBACE,SAAA,CACA,QAAA,CAEA,aC6iCN,CD3iCM,uBACE,oBC6iCR,CD1iCM,sBACE,mBC4iCR,CDvjCI,gBACE,SAAA,CACA,QAAA,CAEA,aCwjCN,CDtjCM,uBACE,oBCwjCR,CDrjCM,sBACE,mBCujCR,CDlkCI,gBACE,SAAA,CACA,QAAA,CAEA,aCmkCN,CDjkCM,uBACE,oBCmkCR,CDhkCM,sBACE,mBCkkCR,CD7kCI,gBACE,SAAA,CACA,QAAA,CAEA,aC8kCN,CD5kCM,uBACE,oBC8kCR,CD3kCM,sBACE,mBC6kCR,CDxlCI,gBACE,SAAA,CACA,QAAA,CAEA,aCylCN,CDvlCM,uBACE,oBCylCR,CDtlCM,sBACE,mBCwlCR,CDnmCI,gBACE,SAAA,CACA,QAAA,CAEA,aComCN,CDlmCM,uBACE,oBComCR,CDjmCM,sBACE,mBCmmCR,CD9mCI,gBACE,SAAA,CACA,QAAA,CAEA,aC+mCN,CD7mCM,uBACE,oBC+mCR,CD5mCM,sBACE,mBC8mCR,CDznCI,gBACE,SAAA,CACA,QAAA,CAEA,aC0nCN,CDxnCM,uBACE,oBC0nCR,CDvnCM,sBACE,mBCynCR,CDpoCI,gBACE,SAAA,CACA,QAAA,CAEA,aCqoCN,CDnoCM,uBACE,oBCqoCR,CDloCM,sBACE,mBCooCR,CD/oCI,gBACE,SAAA,CACA,QAAA,CAEA,aCgpCN,CD9oCM,uBACE,oBCgpCR,CD7oCM,sBACE,mBC+oCR,CD1pCI,gBACE,SAAA,CACA,QAAA,CAEA,aC2pCN,CDzpCM,uBACE,oBC2pCR,CDxpCM,sBACE,mBC0pCR,CDrqCI,gBACE,SAAA,CACA,QAAA,CAEA,aCsqCN,CDpqCM,uBACE,oBCsqCR,CDnqCM,sBACE,mBCqqCR,CDhrCI,gBACE,SAAA,CACA,QAAA,CAEA,aCirCN,CD/qCM,uBACE,oBCirCR,CD9qCM,sBACE,mBCgrCR,CD3rCI,gBACE,SAAA,CACA,QAAA,CAEA,aC4rCN,CD1rCM,uBACE,oBC4rCR,CDzrCM,sBACE,mBC2rCR,CDtsCI,gBACE,SAAA,CACA,QAAA,CAEA,aCusCN,CDrsCM,uBACE,oBCusCR,CDpsCM,sBACE,mBCssCR,CDjtCI,gBACE,SAAA,CACA,QAAA,CAEA,aCktCN,CDhtCM,uBACE,oBCktCR,CD/sCM,sBACE,mBCitCR,CD5tCI,gBACE,SAAA,CACA,QAAA,CAEA,aC6tCN,CD3tCM,uBACE,oBC6tCR,CD1tCM,sBACE,mBC4tCR,CDvuCI,gBACE,SAAA,CACA,QAAA,CAEA,aCwuCN,CDtuCM,uBACE,oBCwuCR,CDruCM,sBACE,mBCuuCR,CDlvCI,gBACE,SAAA,CACA,QAAA,CAEA,aCmvCN,CDjvCM,uBACE,oBCmvCR,CDhvCM,sBACE,mBCkvCR,CD7vCI,gBACE,SAAA,CACA,QAAA,CAEA,aC8vCN,CD5vCM,uBACE,oBC8vCR,CD3vCM,sBACE,mBC6vCR,CDxwCI,gBACE,SAAA,CACA,QAAA,CAEA,aCywCN,CDvwCM,uBACE,oBCywCR,CDtwCM,sBACE,mBCwwCR,CDnxCI,iBACE,UAAA,CACA,QAAA,CAEA,aCoxCN,CDlxCM,wBACE,qBCoxCR,CDjxCM,uBACE,mBCmxCR,CD9xCI,iBACE,UAAA,CACA,QAAA,CAEA,aC+xCN,CD7xCM,wBACE,qBC+xCR,CD5xCM,uBACE,mBC8xCR,CDzyCI,iBACE,UAAA,CACA,QAAA,CAEA,aC0yCN,CDxyCM,wBACE,qBC0yCR,CDvyCM,uBACE,mBCyyCR,CDpzCI,iBACE,UAAA,CACA,QAAA,CAEA,aCqzCN,CDnzCM,wBACE,qBCqzCR,CDlzCM,uBACE,mBCozCR,CD/zCI,iBACE,UAAA,CACA,QAAA,CAEA,aCg0CN,CD9zCM,wBACE,qBCg0CR,CD7zCM,uBACE,mBC+zCR,CD10CI,iBACE,UAAA,CACA,QAAA,CAEA,aC20CN,CDz0CM,wBACE,qBC20CR,CDx0CM,uBACE,mBC00CR,CACF","file":"Grid-demo-wireframe.css","sourcesContent":["@use \"../common/common.scss\" as common;\n\n#storybook-root:has(> .grid) {\n  background: hsla(0deg, 0%, 79%, 15.9%);\n}\n\n.box {\n  background-color: white;\n  outline: hsla(0deg, 0%, 0%, 20%) solid 1px;\n}\n\n.box-card {\n  padding: 1rem;\n  outline: hsla(0deg, 0%, 0%, 20%) solid 1px;\n\n  @media (width > #{common.$breakpoint-md}) {\n    --cols: 4;\n  }\n  @media (width > #{common.$breakpoint-lg}) {\n    --cols: 3;\n  }\n}\n\n.box-example-1 {\n  @media (width > #{common.$breakpoint-md}) {\n    --cols: 8;\n  }\n  @media (width > #{common.$breakpoint-lg}) {\n    --cols: 9;\n  }\n}\n\n.box-example-2 {\n  @media (width > #{common.$breakpoint-md}) {\n    --cols: 4;\n  }\n\n  @media (width > #{common.$breakpoint-lg}) {\n    --cols: 3;\n  }\n}\n\n.box-half {\n  height: 100px;\n\n  @media (width > #{common.$breakpoint-md}) {\n    --cols: 4;\n\n    &:last-child {\n      --cols: 12;\n    }\n  }\n\n  @media (width > #{common.$breakpoint-lg}) {\n    --cols: 6;\n\n    &:last-child {\n      --cols: 6;\n    }\n  }\n}\n\n.box-custom {\n  display: grid;\n  grid-template-areas:\n    \"title title\"\n    \"content1 content2\"\n    \"footer footer\";\n\n  h2 {\n    grid-area: title;\n  }\n\n  .box {\n    padding: 1rem;\n  }\n\n  .box-content1 {\n    grid-area: content1;\n  }\n\n  .box-content2 {\n    grid-area: content2;\n  }\n\n  footer {\n    grid-area: footer;\n    place-content: center;\n    text-align: center;\n  }\n}\n\n.box-offset {\n  position: relative;\n  display: none;\n  height: 50px;\n  place-content: center;\n  font-size: 0.7rem;\n  text-align: center;\n  color: var(--color-primary);\n\n  &::before,\n  &::after {\n    display: block;\n  }\n}\n\n@mixin generateStyleBox($max-offset) {\n  @for $i from 1 through $max-offset {\n    $max-cols: $max-offset - $i + 1;\n\n    @for $j from 1 through $max-cols {\n      .box-offset-#{$i}-#{$j} {\n        --start: #{$i};\n        --cols: #{$j};\n\n        display: block;\n\n        &::before {\n          content: \"--start:#{$i};\";\n        }\n\n        &::after {\n          content: \"--cols:#{$j};\";\n        }\n      }\n    }\n  }\n}\n\n@include generateStyleBox(4);\n\n@media (width > #{common.$breakpoint-sm}) {\n  @include generateStyleBox(8);\n}\n\n@media (width > #{common.$breakpoint-md}) {\n  @include generateStyleBox(12);\n}\n","@use \"../common/common.scss\" as common;\n\n#storybook-root:has(> .grid) {\n  background: hsla(0deg, 0%, 79%, 15.9%);\n}\n\n.box {\n  background-color: white;\n  outline: hsla(0deg, 0%, 0%, 20%) solid 1px;\n}\n\n.box-card {\n  padding: 1rem;\n  outline: hsla(0deg, 0%, 0%, 20%) solid 1px;\n\n  @media (width > #{common.$breakpoint-md}) {\n    --cols: 4;\n  }\n  @media (width > #{common.$breakpoint-lg}) {\n    --cols: 3;\n  }\n}\n\n.box-example-1 {\n  @media (width > #{common.$breakpoint-md}) {\n    --cols: 8;\n  }\n  @media (width > #{common.$breakpoint-lg}) {\n    --cols: 9;\n  }\n}\n\n.box-example-2 {\n  @media (width > #{common.$breakpoint-md}) {\n    --cols: 4;\n  }\n\n  @media (width > #{common.$breakpoint-lg}) {\n    --cols: 3;\n  }\n}\n\n.box-half {\n  height: 100px;\n\n  @media (width > #{common.$breakpoint-md}) {\n    --cols: 4;\n\n    &:last-child {\n      --cols: 12;\n    }\n  }\n\n  @media (width > #{common.$breakpoint-lg}) {\n    --cols: 6;\n\n    &:last-child {\n      --cols: 6;\n    }\n  }\n}\n\n.box-custom {\n  display: grid;\n  grid-template-areas:\n    \"title title\"\n    \"content1 content2\"\n    \"footer footer\";\n\n  h2 {\n    grid-area: title;\n  }\n\n  .box {\n    padding: 1rem;\n  }\n\n  .box-content1 {\n    grid-area: content1;\n  }\n\n  .box-content2 {\n    grid-area: content2;\n  }\n\n  footer {\n    grid-area: footer;\n    place-content: center;\n    text-align: center;\n  }\n}\n\n.box-offset {\n  position: relative;\n  display: none;\n  height: 50px;\n  place-content: center;\n  font-size: 0.7rem;\n  text-align: center;\n  color: var(--color-primary);\n\n  &::before,\n  &::after {\n    display: block;\n  }\n}\n\n@mixin generateStyleBox($max-offset) {\n  @for $i from 1 through $max-offset {\n    $max-cols: $max-offset - $i + 1;\n\n    @for $j from 1 through $max-cols {\n      .box-offset-#{$i}-#{$j} {\n        --start: #{$i};\n        --cols: #{$j};\n\n        display: block;\n\n        &::before {\n          content: \"--start:#{$i};\";\n        }\n\n        &::after {\n          content: \"--cols:#{$j};\";\n        }\n      }\n    }\n  }\n}\n\n@include generateStyleBox(4);\n\n@media (width > #{common.$breakpoint-sm}) {\n  @include generateStyleBox(8);\n}\n\n@media (width > #{common.$breakpoint-md}) {\n  @include generateStyleBox(12);\n}\n"]}

package/dist/Grid/Grid-demo-wireframe.scss

@@ -0,0 +1,139 @@
+@use "../common/common.scss" as common;
+
+#storybook-root:has(> .grid) {
+  background: hsla(0deg, 0%, 79%, 15.9%);
+}
+
+.box {
+  background-color: white;
+  outline: hsla(0deg, 0%, 0%, 20%) solid 1px;
+}
+
+.box-card {
+  padding: 1rem;
+  outline: hsla(0deg, 0%, 0%, 20%) solid 1px;
+
+  @media (width > #{common.$breakpoint-md}) {
+    --cols: 4;
+  }
+  @media (width > #{common.$breakpoint-lg}) {
+    --cols: 3;
+  }
+}
+
+.box-example-1 {
+  @media (width > #{common.$breakpoint-md}) {
+    --cols: 8;
+  }
+  @media (width > #{common.$breakpoint-lg}) {
+    --cols: 9;
+  }
+}
+
+.box-example-2 {
+  @media (width > #{common.$breakpoint-md}) {
+    --cols: 4;
+  }
+
+  @media (width > #{common.$breakpoint-lg}) {
+    --cols: 3;
+  }
+}
+
+.box-half {
+  height: 100px;
+
+  @media (width > #{common.$breakpoint-md}) {
+    --cols: 4;
+
+    &:last-child {
+      --cols: 12;
+    }
+  }
+
+  @media (width > #{common.$breakpoint-lg}) {
+    --cols: 6;
+
+    &:last-child {
+      --cols: 6;
+    }
+  }
+}
+
+.box-custom {
+  display: grid;
+  grid-template-areas:
+    "title title"
+    "content1 content2"
+    "footer footer";
+
+  h2 {
+    grid-area: title;
+  }
+
+  .box {
+    padding: 1rem;
+  }
+
+  .box-content1 {
+    grid-area: content1;
+  }
+
+  .box-content2 {
+    grid-area: content2;
+  }
+
+  footer {
+    grid-area: footer;
+    place-content: center;
+    text-align: center;
+  }
+}
+
+.box-offset {
+  position: relative;
+  display: none;
+  height: 50px;
+  place-content: center;
+  font-size: 0.7rem;
+  text-align: center;
+  color: var(--color-primary);
+
+  &::before,
+  &::after {
+    display: block;
+  }
+}
+
+@mixin generateStyleBox($max-offset) {
+  @for $i from 1 through $max-offset {
+    $max-cols: $max-offset - $i + 1;
+
+    @for $j from 1 through $max-cols {
+      .box-offset-#{$i}-#{$j} {
+        --start: #{$i};
+        --cols: #{$j};
+
+        display: block;
+
+        &::before {
+          content: "--start:#{$i};";
+        }
+
+        &::after {
+          content: "--cols:#{$j};";
+        }
+      }
+    }
+  }
+}
+
+@include generateStyleBox(4);
+
+@media (width > #{common.$breakpoint-sm}) {
+  @include generateStyleBox(8);
+}
+
+@media (width > #{common.$breakpoint-md}) {
+  @include generateStyleBox(12);
+}

package/dist/Layout/Header/BurgerMenu/BurgerMenu.css

@@ -0,0 +1 @@
+.af-burger-menu.af-card{display:none}@media (max-width:1278.98px){.af-burger-menu.af-card{border-radius:0 0 .5rem .5rem;position:absolute;width:100%}.af-burger-menu.af-card,.af-burger-menu.af-card>ul{list-style-type:none;padding:0}.af-burger-menu.af-card .af-list__item{padding:0}.af-burger-menu.af-card .af-list__item .af-click-item{box-shadow:none;gap:1rem}.af-burger-menu.af-card .af-list__item .af-click-item>svg{fill:var(--color-axa)}.af-burger-menu.af-card .af-list__item .af-click-item__label{align-items:center;display:flex;flex-direction:row;font-size:1rem;font-weight:400;gap:1rem}.af-burger-menu.af-card .af-list__item .af-click-item__label>svg{fill:var(--color-axa)}.af-burger-menu.af-card.open{display:block}}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Layout/Header/BurgerMenu/BurgerMenu.scss%23sass","../../../../src/Layout/Header/BurgerMenu/BurgerMenu.scss","../../../../src/common/common.scss"],"names":[],"mappings":"AAEA,wBACE,YCDF,CCqMI,6BFrMJ,wBAOI,6BAAA,CCJF,iBAAA,CDEE,UCGF,CDEE,mDAFA,oBAAA,CAFA,SCMF,CDGE,uCACE,SCDJ,CDGI,sDAEE,eAAA,CADA,QCAN,CDGM,0DACE,qBCDR,CDIM,6DAGE,kBAAA,CAFA,YAAA,CACA,kBAAA,CAGA,cAAA,CACA,eAAA,CAFA,QCAR,CDIQ,iEACE,qBCFV,CDQE,6BACE,aCNJ,CACF","file":"BurgerMenu.css","sourcesContent":["@use \"../../../common/common\" as common;\n\n.af-burger-menu.af-card {\n  display: none;\n\n  @include common.media-breakpoint-down(md) {\n    position: absolute;\n    width: 100%;\n    padding: 0;\n    border-radius: 0 0 common.rem(8) common.rem(8);\n    list-style-type: none;\n\n    & > ul {\n      padding: 0;\n      list-style-type: none;\n    }\n\n    .af-list__item {\n      padding: 0;\n\n      .af-click-item {\n        gap: common.rem(16);\n        box-shadow: none;\n\n        & > svg {\n          fill: var(--color-axa);\n        }\n\n        &__label {\n          display: flex;\n          flex-direction: row;\n          align-items: center;\n          gap: common.rem(16);\n          font-size: common.rem(16);\n          font-weight: 400;\n\n          & > svg {\n            fill: var(--color-axa);\n          }\n        }\n      }\n    }\n\n    &.open {\n      display: block;\n    }\n  }\n}\n","@use \"../../../common/common\" as common;\n\n.af-burger-menu.af-card {\n  display: none;\n\n  @include common.media-breakpoint-down(md) {\n    position: absolute;\n    width: 100%;\n    padding: 0;\n    border-radius: 0 0 common.rem(8) common.rem(8);\n    list-style-type: none;\n\n    & > ul {\n      padding: 0;\n      list-style-type: none;\n    }\n\n    .af-list__item {\n      padding: 0;\n\n      .af-click-item {\n        gap: common.rem(16);\n        box-shadow: none;\n\n        & > svg {\n          fill: var(--color-axa);\n        }\n\n        &__label {\n          display: flex;\n          flex-direction: row;\n          align-items: center;\n          gap: common.rem(16);\n          font-size: common.rem(16);\n          font-weight: 400;\n\n          & > svg {\n            fill: var(--color-axa);\n          }\n        }\n      }\n    }\n\n    &.open {\n      display: block;\n    }\n  }\n}\n","@use \"sass:map\";\n@use \"sass:list\";\n\n@forward \"./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$radius-8: 8px !default;\n$radius-100: 100% !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// Grid 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\n// Define the minimum dimensions at which your layout will change,\n// adapting to different screen sizes, for use in media queries.\n\n$grid-breakpoints: (\n  xs: $breakpoint-xs,\n  sm: $breakpoint-sm,\n  md: $breakpoint-md,\n  lg: $breakpoint-lg,\n  xl: $breakpoint-xl,\n);\n\n// Breakpoint viewport sizes and media queries.\n\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n\n//    (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px)\n\n// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n// Name of the next breakpoint, or null for the last breakpoint.\n\n//    >> breakpoint-next(sm)\n//    md\n//    >> breakpoint-next(sm, (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px))\n//    md\n//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n//    md\n@function breakpoint-next(\n  $name,\n  $breakpoints: $grid-breakpoints,\n  $breakpoint-names: map.keys($breakpoints)\n) {\n  $n: list.index($breakpoint-names, $name);\n\n  @return if(\n    $n < list.length($breakpoint-names),\n    list.nth($breakpoint-names, $n + 1),\n    null\n  );\n}\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n\n//    >> breakpoint-min(sm, (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px))\n//    667px\n@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {\n  $min: map.get($breakpoints, $name);\n\n  @return if($min != 0, $min, null);\n}\n\n// Maximum breakpoint width. Null for the largest (last) breakpoint.\n// The maximum value is calculated as the minimum of the next one less 0.02px\n// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\n\n//    >> breakpoint-max(sm, (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px))\n//    1022.98px\n@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {\n  $next: breakpoint-next($name, $breakpoints);\n\n  @return if($next, breakpoint-min($next, $breakpoints) - 0.02px, null);\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {\n  $min: breakpoint-min($name, $breakpoints);\n\n  @if $min {\n    @media (min-width: $min) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {\n  $max: breakpoint-max($name, $breakpoints);\n\n  @if $max {\n    @media (max-width: $max) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n"]}

package/dist/Layout/Header/BurgerMenu/BurgerMenu.scss

@@ -0,0 +1,48 @@
+@use "../../../common/common" as common;
+
+.af-burger-menu.af-card {
+  display: none;
+
+  @include common.media-breakpoint-down(md) {
+    position: absolute;
+    width: 100%;
+    padding: 0;
+    border-radius: 0 0 common.rem(8) common.rem(8);
+    list-style-type: none;
+
+    & > ul {
+      padding: 0;
+      list-style-type: none;
+    }
+
+    .af-list__item {
+      padding: 0;
+
+      .af-click-item {
+        gap: common.rem(16);
+        box-shadow: none;
+
+        & > svg {
+          fill: var(--color-axa);
+        }
+
+        &__label {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          gap: common.rem(16);
+          font-size: common.rem(16);
+          font-weight: 400;
+
+          & > svg {
+            fill: var(--color-axa);
+          }
+        }
+      }
+    }
+
+    &.open {
+      display: block;
+    }
+  }
+}

package/dist/Layout/Header/Header.css

@@ -1 +1 @@
-.af-header{background-color:var(--color-white);position:sticky;top:0;z-index:100}.af-header-container{align-items:center;border-bottom:1px solid var(--color-gray-300);border-top:2px solid var(--color-axa);color:var(--color-axa);display:flex;flex-direction:row;font-family:var(--font-family-sans-serif);font-size:1.25rem;font-weight:600;height:72px;justify-content:space-between;padding:0 1rem;width:100%}.af-header-container .af-btn-client{min-width:auto}.af-header-container .af-btn-client>svg{display:none}.af-logo{align-self:center;height:40px;width:40px}.af-header-left-item>nav{display:none}.af-header-right-item{align-items:center;display:flex;flex-direction:row;gap:var(--spacing-u1);margin:0 var(--spacing-u1)}@media only screen and (width >= 1023px){.af-header-container{border-top:2px solid var(--color-axa);height:80px;padding:0 3.75rem;width:auto}.af-header-container .af-btn-client>svg{display:block}.af-logo{height:56px;width:56px}.af-header-left-item{align-items:center;display:flex;flex-direction:row;gap:1.5rem;height:5rem}.af-header-left-item>nav{display:block}.af-header-right-item{gap:var(--spacing-u2);margin:0}}
+.af-header{background-color:var(--color-white);position:sticky;top:0;z-index:2}.af-header>.af-header-container{align-items:center;border-bottom:1px solid var(--color-gray-300);border-top:2px solid var(--color-axa);color:var(--color-axa);display:flex;flex-direction:row;font-family:var(--font-family-sans-serif);font-size:1.25rem;font-weight:600;height:5rem;justify-content:space-between;padding:0 3.75rem;width:auto}@media (max-width:1278.98px){.af-header>.af-header-container{height:72px;padding:0 1rem;width:100%}}.af-header>.af-header-container>.af-header-left-item{align-items:center;display:flex;flex-direction:row;gap:1.5rem;height:5rem}.af-header>.af-header-container>.af-header-left-item>.af-logo{height:56px;width:56px}@media (max-width:1278.98px){.af-header>.af-header-container>.af-header-left-item>.af-logo{align-self:center;height:40px;width:40px}}.af-header>.af-header-container>.af-header-left-item>nav{display:block}@media (max-width:1278.98px){.af-header>.af-header-container>.af-header-left-item>nav{display:none}}.af-header>.af-header-container>.af-header-right-item{display:flex;flex-direction:row;gap:var(--spacing-u2);margin:0}@media (max-width:1278.98px){.af-header>.af-header-container>.af-header-right-item{display:none}}.af-header>.af-header-container>.af-btn-client{display:none}@media (max-width:1278.98px){.af-header>.af-header-container>.af-btn-client{display:block}}.af-header-overlay{display:none}@media (max-width:1278.98px){.af-header-overlay.open{background:var(--color-gray-900);display:block;inset:0;opacity:.5;position:fixed;z-index:1}}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Layout/Header/Header.scss%23sass","../../../src/Layout/Header/Header.scss"],"names":[],"mappings":"AAEA,WAIE,mCAAA,CAHA,eAAA,CAEA,KAAA,CCHF,WAGA,CDIA,qBAQE,kBAAA,CAFA,6CAAA,CADA,qCAAA,CAQA,sBAAA,CAZA,YAAA,CAMA,kBAAA,CAGA,yCAAA,CACA,iBAAA,CACA,eAAA,CATA,WAAA,CAMA,6BAAA,CALA,cAAA,CCJF,UAYA,CDGE,oCACE,cCDJ,CDGI,wCACE,YCDN,CDMA,SAGE,iBAAA,CCLF,WAAA,CDGE,UCDF,CDMA,yBACE,YCHF,CDMA,sBCAA,kBAAA,CDCE,YAAA,CAEA,kBAAA,CAEA,qBAAA,CCPF,0BAIA,CDMA,yCACE,qBCAA,qCAAA,CDEE,WAAA,CCHJ,iBAAA,CAFA,UAIE,CDKE,wCACE,aCHJ,CDOA,SAEE,WAAA,CADA,UCJF,CDQA,qBAIE,kBAAA,CAHA,YAAA,CAEA,kBAAA,CCLF,UAAA,CAHA,WAIA,CDQE,yBACE,aCNJ,CDUA,sBAEE,qBAAA,CADA,QCPF,CACF","file":"Header.css","sourcesContent":["@use \"../../common/common\" as common;\n\n.af-header {\n  position: sticky;\n  z-index: 100;\n  top: 0;\n  background-color: var(--color-white);\n}\n\n.af-header-container {\n  display: flex;\n  width: 100%;\n  height: 72px;\n  padding: 0 1rem;\n  border-top: 2px solid var(--color-axa);\n  border-bottom: 1px solid var(--color-gray-300);\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  font-family: var(--font-family-sans-serif);\n  font-size: 1.25rem;\n  font-weight: 600;\n  color: var(--color-axa);\n\n  & .af-btn-client {\n    min-width: initial;\n\n    & > svg {\n      display: none;\n    }\n  }\n}\n\n.af-logo {\n  width: 40px;\n  height: 40px;\n  align-self: center;\n}\n\n.af-header-left-item > nav {\n  display: none;\n}\n\n.af-header-right-item {\n  display: flex;\n  margin: 0 var(--spacing-u1);\n  flex-direction: row;\n  align-items: center;\n  gap: var(--spacing-u1);\n}\n\n@media only screen and (width >= #{common.$breakpoint-md}) {\n  .af-header-container {\n    width: auto;\n    height: 80px;\n    padding: 0 3.75rem;\n    border-top: 2px solid var(--color-axa);\n\n    & .af-btn-client > svg {\n      display: block;\n    }\n  }\n\n  .af-logo {\n    width: 56px;\n    height: 56px;\n  }\n\n  .af-header-left-item {\n    display: flex;\n    height: 5rem;\n    flex-direction: row;\n    align-items: center;\n    gap: 1.5rem;\n\n    & > nav {\n      display: block;\n    }\n  }\n\n  .af-header-right-item {\n    margin: 0;\n    gap: var(--spacing-u2);\n  }\n}\n","@use \"../../common/common\" as common;\n\n.af-header {\n  position: sticky;\n  z-index: 100;\n  top: 0;\n  background-color: var(--color-white);\n}\n\n.af-header-container {\n  display: flex;\n  width: 100%;\n  height: 72px;\n  padding: 0 1rem;\n  border-top: 2px solid var(--color-axa);\n  border-bottom: 1px solid var(--color-gray-300);\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  font-family: var(--font-family-sans-serif);\n  font-size: 1.25rem;\n  font-weight: 600;\n  color: var(--color-axa);\n\n  & .af-btn-client {\n    min-width: initial;\n\n    & > svg {\n      display: none;\n    }\n  }\n}\n\n.af-logo {\n  width: 40px;\n  height: 40px;\n  align-self: center;\n}\n\n.af-header-left-item > nav {\n  display: none;\n}\n\n.af-header-right-item {\n  display: flex;\n  margin: 0 var(--spacing-u1);\n  flex-direction: row;\n  align-items: center;\n  gap: var(--spacing-u1);\n}\n\n@media only screen and (width >= #{common.$breakpoint-md}) {\n  .af-header-container {\n    width: auto;\n    height: 80px;\n    padding: 0 3.75rem;\n    border-top: 2px solid var(--color-axa);\n\n    & .af-btn-client > svg {\n      display: block;\n    }\n  }\n\n  .af-logo {\n    width: 56px;\n    height: 56px;\n  }\n\n  .af-header-left-item {\n    display: flex;\n    height: 5rem;\n    flex-direction: row;\n    align-items: center;\n    gap: 1.5rem;\n\n    & > nav {\n      display: block;\n    }\n  }\n\n  .af-header-right-item {\n    margin: 0;\n    gap: var(--spacing-u2);\n  }\n}\n"]}
+{"version":3,"sources":["../../../src/Layout/Header/Header.scss%23sass","../../../src/Layout/Header/Header.scss","../../../src/common/common.scss"],"names":[],"mappings":"AAEA,WAIE,mCAAA,CAHA,eAAA,CAEA,KAAA,CCHF,SAGA,CDGE,gCAQE,kBAAA,CAFA,6CAAA,CADA,qCAAA,CAQA,sBAAA,CAZA,YAAA,CAMA,kBAAA,CAGA,yCAAA,CACA,iBAAA,CACA,eAAA,CATA,WAAA,CAMA,6BAAA,CALA,iBAAA,CAFA,UCUJ,CCmLI,6BF/LF,gCAiBI,WAAA,CACA,cAAA,CAFA,UCEJ,CACF,CDEI,qDAIE,kBAAA,CAHA,YAAA,CAEA,kBAAA,CAEA,UAAA,CAHA,WCGN,CDEM,8DAEE,WAAA,CADA,UCCR,CCiKI,6BFnKE,8DAOI,iBAAA,CADA,WAAA,CADA,UCGR,CACF,CDEM,yDACE,aCAR,CCuJI,6BFnJI,yDACE,YCDR,CACF,CDKI,sDACE,YAAA,CAEA,kBAAA,CACA,qBAAA,CAFA,QCDN,CC4II,6BF7IA,sDAOI,YCFN,CACF,CDKI,+CACE,YCHN,CCoII,6BFlIA,+CAII,aCFN,CACF,CDOA,mBACE,YCJF,CC2HI,6BFpHA,wBAME,gCAAA,CCPJ,aAAA,CDII,OAAA,CAEA,UAAA,CCTN,cAAA,CACE,SAKA,CACF","file":"Header.css","sourcesContent":["@use \"../../common/common\" as common;\n\n.af-header {\n  position: sticky;\n  z-index: 2;\n  top: 0;\n  background-color: var(--color-white);\n\n  & > .af-header-container {\n    display: flex;\n    width: auto;\n    height: common.rem(80);\n    padding: 0 3.75rem;\n    border-top: 2px solid var(--color-axa);\n    border-bottom: 1px solid var(--color-gray-300);\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    font-family: var(--font-family-sans-serif);\n    font-size: 1.25rem;\n    font-weight: 600;\n    color: var(--color-axa);\n\n    @include common.media-breakpoint-down(md) {\n      width: 100%;\n      height: 72px;\n      padding: 0 1rem;\n    }\n\n    & > .af-header-left-item {\n      display: flex;\n      height: 5rem;\n      flex-direction: row;\n      align-items: center;\n      gap: 1.5rem;\n\n      & > .af-logo {\n        width: 56px;\n        height: 56px;\n\n        @include common.media-breakpoint-down(md) {\n          width: 40px;\n          height: 40px;\n          align-self: center;\n        }\n      }\n\n      & > nav {\n        display: block;\n      }\n\n      @include common.media-breakpoint-down(md) {\n        & > nav {\n          display: none;\n        }\n      }\n    }\n\n    & > .af-header-right-item {\n      display: flex;\n      margin: 0;\n      flex-direction: row;\n      gap: var(--spacing-u2);\n\n      @include common.media-breakpoint-down(md) {\n        display: none;\n      }\n    }\n\n    & > .af-btn-client {\n      display: none;\n\n      @include common.media-breakpoint-down(md) {\n        display: block;\n      }\n    }\n  }\n}\n\n.af-header-overlay {\n  display: none;\n\n  @include common.media-breakpoint-down(md) {\n    &.open {\n      position: fixed;\n      z-index: 1;\n      inset: 0;\n      display: block;\n      opacity: 0.5;\n      background: var(--color-gray-900);\n    }\n  }\n}\n","@use \"../../common/common\" as common;\n\n.af-header {\n  position: sticky;\n  z-index: 2;\n  top: 0;\n  background-color: var(--color-white);\n\n  & > .af-header-container {\n    display: flex;\n    width: auto;\n    height: common.rem(80);\n    padding: 0 3.75rem;\n    border-top: 2px solid var(--color-axa);\n    border-bottom: 1px solid var(--color-gray-300);\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    font-family: var(--font-family-sans-serif);\n    font-size: 1.25rem;\n    font-weight: 600;\n    color: var(--color-axa);\n\n    @include common.media-breakpoint-down(md) {\n      width: 100%;\n      height: 72px;\n      padding: 0 1rem;\n    }\n\n    & > .af-header-left-item {\n      display: flex;\n      height: 5rem;\n      flex-direction: row;\n      align-items: center;\n      gap: 1.5rem;\n\n      & > .af-logo {\n        width: 56px;\n        height: 56px;\n\n        @include common.media-breakpoint-down(md) {\n          width: 40px;\n          height: 40px;\n          align-self: center;\n        }\n      }\n\n      & > nav {\n        display: block;\n      }\n\n      @include common.media-breakpoint-down(md) {\n        & > nav {\n          display: none;\n        }\n      }\n    }\n\n    & > .af-header-right-item {\n      display: flex;\n      margin: 0;\n      flex-direction: row;\n      gap: var(--spacing-u2);\n\n      @include common.media-breakpoint-down(md) {\n        display: none;\n      }\n    }\n\n    & > .af-btn-client {\n      display: none;\n\n      @include common.media-breakpoint-down(md) {\n        display: block;\n      }\n    }\n  }\n}\n\n.af-header-overlay {\n  display: none;\n\n  @include common.media-breakpoint-down(md) {\n    &.open {\n      position: fixed;\n      z-index: 1;\n      inset: 0;\n      display: block;\n      opacity: 0.5;\n      background: var(--color-gray-900);\n    }\n  }\n}\n","@use \"sass:map\";\n@use \"sass:list\";\n\n@forward \"./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$radius-8: 8px !default;\n$radius-100: 100% !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// Grid 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\n// Define the minimum dimensions at which your layout will change,\n// adapting to different screen sizes, for use in media queries.\n\n$grid-breakpoints: (\n  xs: $breakpoint-xs,\n  sm: $breakpoint-sm,\n  md: $breakpoint-md,\n  lg: $breakpoint-lg,\n  xl: $breakpoint-xl,\n);\n\n// Breakpoint viewport sizes and media queries.\n\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n\n//    (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px)\n\n// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n// Name of the next breakpoint, or null for the last breakpoint.\n\n//    >> breakpoint-next(sm)\n//    md\n//    >> breakpoint-next(sm, (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px))\n//    md\n//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n//    md\n@function breakpoint-next(\n  $name,\n  $breakpoints: $grid-breakpoints,\n  $breakpoint-names: map.keys($breakpoints)\n) {\n  $n: list.index($breakpoint-names, $name);\n\n  @return if(\n    $n < list.length($breakpoint-names),\n    list.nth($breakpoint-names, $n + 1),\n    null\n  );\n}\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n\n//    >> breakpoint-min(sm, (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px))\n//    667px\n@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {\n  $min: map.get($breakpoints, $name);\n\n  @return if($min != 0, $min, null);\n}\n\n// Maximum breakpoint width. Null for the largest (last) breakpoint.\n// The maximum value is calculated as the minimum of the next one less 0.02px\n// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\n\n//    >> breakpoint-max(sm, (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px))\n//    1022.98px\n@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {\n  $next: breakpoint-next($name, $breakpoints);\n\n  @return if($next, breakpoint-min($next, $breakpoints) - 0.02px, null);\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {\n  $min: breakpoint-min($name, $breakpoints);\n\n  @if $min {\n    @media (min-width: $min) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {\n  $max: breakpoint-max($name, $breakpoints);\n\n  @if $max {\n    @media (max-width: $max) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n"]}

package/dist/Layout/Header/Header.scss

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

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

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