@axa-fr/design-system-look-and-feel-css 0.2.0-beta.306

package/dist/Form/Checkbox/Checkbox.scss

@@ -0,0 +1,218 @@
+@use "../../common/common" as common;
+
+.af-checkbox {
+  font-family: "Source Sans Pro", arial, sans-serif;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+
+    & > svg {
+      width: 1.75rem;
+      height: 1.75rem;
+      color: common.$color-axa;
+      fill: common.$color-axa;
+    }
+
+    & &-description {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+      line-height: 1.25rem;
+
+      & > span:first-child {
+        line-height: 1.4rem;
+        color: common.$color-gray-900;
+      }
+
+      & > span:not(:first-child) {
+        color: common.$color-gray-700;
+      }
+    }
+  }
+
+  &-select--horizontal &__content {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  &__group-description {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+
+  & ~ &__error {
+    display: flex;
+    margin-left: 3.2rem;
+    align-items: center;
+    gap: 0.5rem;
+    font-family: "Source Sans Pro", arial, sans-serif;
+    line-height: 1.25rem;
+    color: common.$color-red-700;
+
+    & > svg {
+      color: common.$color-red-700;
+      fill: common.$color-red-700;
+    }
+  }
+
+  &-select ~ &__error {
+    margin: 1rem 0 0;
+  }
+
+  & label {
+    display: flex;
+    margin: 0;
+    border-radius: common.$default-border-radius;
+    align-items: center;
+    gap: 0.75rem;
+    cursor: pointer;
+  }
+
+  &-select label {
+    height: 6.4rem;
+    padding: 1rem;
+    align-items: center;
+    box-shadow: 0 0 0 1px var(--box-shadow-color) inset;
+
+    --box-shadow-color: #{common.$color-gray};
+  }
+
+  &-select--horizontal label {
+    position: relative;
+    width: 12rem;
+    height: auto;
+    padding: 1rem;
+    flex-direction: column;
+    justify-content: flex-start;
+    gap: 0;
+    text-align: center;
+
+    & .af-checkbox__icons {
+      position: absolute;
+      top: 1rem;
+      left: 1rem;
+    }
+  }
+
+  & label input[type="checkbox"] {
+    position: absolute;
+    margin-right: 0.5rem;
+    opacity: 0;
+
+    & ~ .af-checkbox__icons {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+
+      & .af-checkbox__checked,
+      & .af-checkbox__unchecked {
+        width: 1.75rem;
+        height: 1.75rem;
+        align-items: center;
+      }
+
+      & .af-checkbox__checked {
+        display: none;
+      }
+
+      & .af-checkbox__unchecked {
+        color: common.$color-gray-700;
+        fill: common.$color-gray-700;
+      }
+    }
+  }
+
+  & label:has(input[type="checkbox"][aria-invalid="true"]) {
+    & .af-checkbox__checked,
+    & .af-checkbox__unchecked {
+      color: common.$color-red-700;
+      fill: common.$color-red-700;
+    }
+  }
+
+  & label:has(input[type="checkbox"]:checked) {
+    & .af-checkbox__checked {
+      display: block;
+      color: common.$color-axa;
+      fill: common.$color-axa;
+    }
+
+    & .af-checkbox__unchecked {
+      display: none;
+    }
+  }
+
+  &-select label:has(input[type="checkbox"]:checked) {
+    background-color: common.$color-blue-2;
+    box-shadow: 0 0 0 2px common.$color-axa inset;
+  }
+
+  & label:has(input[type="checkbox"]:disabled) {
+    cursor: default;
+
+    & .af-checkbox__content > svg,
+    & .af-checkbox__checked,
+    & .af-checkbox__unchecked {
+      color: common.$color-btn-disabled-text;
+      fill: common.$color-btn-disabled-text;
+    }
+  }
+
+  &-select label:has(input[type="checkbox"]:disabled) {
+    color: common.$color-btn-disabled-text;
+    background-color: common.$color-gray-200;
+    box-shadow: 0 0 0 1px var(--box-shadow-color) inset;
+
+    --box-shadow-color: #{common.$color-gray-400};
+  }
+
+  &-select label:has(input[type="checkbox"][aria-invalid="true"]) {
+    --box-shadow-color: #{common.$color-red-700};
+
+    box-shadow: 0 0 0 2px var(--box-shadow-color) inset;
+  }
+
+  & label input[type="checkbox"]:focus-visible ~ .af-checkbox__icons {
+    & .af-checkbox__unchecked,
+    & .af-checkbox__checked {
+      outline: 2px solid common.$color-blue-3;
+      outline-offset: 3px;
+    }
+  }
+
+  & label:hover:not(:has(input[type="checkbox"]:disabled)) {
+    & .af-checkbox__unchecked {
+      color: common.$color-axa;
+      fill: common.$color-axa;
+    }
+  }
+
+  &-select label:hover:not(:has(input[type="checkbox"]:disabled)) {
+    --box-shadow-color: #{common.$color-axa};
+
+    box-shadow: 0 0 0 1px var(--box-shadow-color) inset;
+  }
+
+  &-select {
+    display: flex;
+    margin-top: 1rem;
+    flex-direction: column;
+    gap: 1rem;
+    font-family: common.$font-family-base;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.25rem;
+    color: common.$color-gray-700;
+
+    &--horizontal {
+      flex-direction: row;
+    }
+  }
+}

package/dist/Form/FileUpload/FileUpload.css

@@ -0,0 +1 @@
+.af-form__group--label{color:#333;font-size:1.125rem;font-weight:600}.af-form__file-input{align-items:center;background-color:#fff;border:2px dashed #00008f;border-radius:8px;color:#333;cursor:pointer;display:flex;flex-direction:column;font-weight:400;justify-content:space-between;margin-bottom:.6rem;margin-top:.5rem;padding:1rem 1rem 2rem;position:relative;text-align:center}.af-form__file-input.is-mobile{padding-bottom:1rem}.af-form__file-input:hover{border-color:#5f5f5f}.af-form__file-input--error{border-color:#c91432}.af-form__file-input input{bottom:0;cursor:pointer;left:0;opacity:0;position:absolute;top:0;width:100%}.af-form__file-input-dropdown-text{line-height:5px;padding-top:1rem}.af-form__file-input-help{color:#5f5f5f;font-size:1rem;font-weight:400}.af-form__file-input-icon path{fill:#00008f}.af-form__file-input .af-btn-client{width:50%}.af-form__file-list{display:flex;flex-wrap:wrap;font-size:.9rem;list-style:none;margin-top:1.125rem;padding:0}.af-form__file-title-container{align-items:center;display:flex;gap:.5rem;justify-content:center}.af-form__file-title-container-icon-error path{fill:#c91432}.af-form__file-title-container-icon-success path{fill:#118635}.af-form__file-title{align-items:center;display:flex;gap:.5rem}.af-form__file-title>div{display:flex;flex-direction:column}.af-form__file-name{color:#333;font-size:1.125rem}.af-form__file-size{color:#5f5f5f;font-size:1rem}.af-form__file-error{align-items:center;color:#c91432;display:flex;font-size:1rem;gap:.25rem;margin-bottom:.9rem;margin-top:-.9rem}.af-form__file-error-icon path{fill:#c91432}.af-form__file-line{width:100%}.af-form__file-line-container{align-items:center;background:#fff;border:1px solid #5f5f5f;border-radius:4px;display:flex;justify-content:space-between;margin-bottom:1rem;padding:1rem}.af-form__file-line-container--error{border-color:#c91432}.af-form__file-actions{align-items:baseline;cursor:pointer;display:flex;gap:1rem;justify-content:center}.af-form__file-actions-icon path{fill:#5f5f5f}.is-mobile .af-form__file-input-dropdown-text{display:none}.is-mobile .af-btn-client{width:100%}

package/dist/Form/FileUpload/FileUpload.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Form/FileUpload/FileUpload.scss%23sass","../../../src/Form/FileUpload/FileUpload.scss","../../../src/common/common.scss"],"names":[],"mappings":"AAII,uBAGE,UAAA,CAFA,kBAAA,CCHN,eAEA,CDQI,qBAUE,kBAAA,CAKA,qBEnBQ,CFWR,yBAAA,CACA,iBAAA,CAMA,UAAA,CAEA,cAAA,CAdA,YAAA,CAOA,qBAAA,CAGA,eAAA,CADA,6BAAA,CAPA,mBAAA,CADA,gBAAA,CAGA,sBAAA,CALA,iBAAA,CAYA,iBCHN,CDQM,+BACE,mBCNR,CDSM,2BACE,oBCPR,CDUM,4BACE,oBCRR,CDWM,2BAGE,QAAA,CAIA,cAAA,CAHA,MAAA,CAEA,SAAA,CALA,iBAAA,CACA,KAAA,CAGA,UCPR,CDYM,mCAEE,eAAA,CADA,gBCTR,CDaM,0BAGE,aAAA,CAFA,cAAA,CACA,eCVR,CDeQ,+BACE,YCbV,CDiBM,oCACE,SCfR,CDmBI,oBACE,YAAA,CAGA,cAAA,CACA,eAAA,CACA,eAAA,CAJA,mBAAA,CACA,SCdN,CDoBI,+BAEE,kBAAA,CADA,YAAA,CAGA,SAAA,CADA,sBCjBN,CDsBU,+CACE,YCpBZ,CDyBU,iDACE,YCvBZ,CD6BI,qBAEE,kBAAA,CADA,YAAA,CAEA,SC3BN,CD6BM,yBACE,YAAA,CACA,qBC3BR,CD+BI,oBAEE,UAAA,CADA,kBC5BN,CDgCI,oBAEE,aEzFW,CFwFX,cC7BN,CDiCI,qBAIE,kBAAA,CAGA,aAAA,CANA,YAAA,CAKA,cAAA,CADA,UAAA,CAFA,mBAAA,CADA,iBC1BN,CDkCQ,+BACE,YChCV,CDqCI,oBACE,UCnCN,CDqCM,8BAME,kBAAA,CAEA,eAAA,CAJA,wBAAA,CACA,iBAAA,CAJA,YAAA,CAMA,6BAAA,CALA,kBAAA,CACA,YC9BR,CDqCQ,qCACE,oBCnCV,CDwCI,uBAEE,oBAAA,CAGA,cAAA,CAJA,YAAA,CAGA,QAAA,CADA,sBCpCN,CDyCQ,iCACE,YCvCV,CDkDQ,8CACE,YC/CV,CDqDE,0BACE,UCnDJ","file":"FileUpload.css","sourcesContent":["@use \"../../common/common\" as common;\n\n.af-form {\n  &__group {\n    &--label {\n      font-size: 1.125rem;\n      font-weight: 600;\n      color: common.$color-gray-900;\n    }\n  }\n\n  &__file {\n    &-input {\n      position: relative;\n      display: flex;\n      margin-top: 0.5rem;\n      margin-bottom: 0.6rem;\n      padding: 1rem;\n      padding-bottom: 2rem;\n      border: 2px dashed common.$color-axa;\n      border-radius: 8px;\n      flex-direction: column;\n      align-items: center;\n      justify-content: space-between;\n      font-weight: normal;\n      text-align: center;\n      color: common.$color-gray-900;\n      background-color: common.$color-white;\n      cursor: pointer;\n\n      &.is-mobile {\n        padding-bottom: 1rem;\n      }\n\n      &:hover {\n        border-color: common.$color-gray-700;\n      }\n\n      &--error {\n        border-color: common.$color-red-700;\n      }\n\n      input {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        opacity: 0;\n        cursor: pointer;\n      }\n\n      &-dropdown-text {\n        padding-top: 1rem;\n        line-height: 5px;\n      }\n\n      &-help {\n        font-size: 1rem;\n        font-weight: 400;\n        color: common.$color-gray-700;\n      }\n\n      &-icon {\n        path {\n          fill: common.$color-axa;\n        }\n      }\n\n      .af-btn-client {\n        width: 50%;\n      }\n    }\n\n    &-list {\n      display: flex;\n      margin-top: 1.125rem;\n      padding: 0;\n      flex-wrap: wrap;\n      font-size: 0.9rem;\n      list-style: none;\n    }\n\n    &-title-container {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 0.5rem;\n\n      &-icon {\n        &-error {\n          path {\n            fill: common.$color-red-700;\n          }\n        }\n\n        &-success {\n          path {\n            fill: common.$color-green-600;\n          }\n        }\n      }\n    }\n\n    &-title {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n\n      & > div {\n        display: flex;\n        flex-direction: column;\n      }\n    }\n\n    &-name {\n      font-size: 1.125rem;\n      color: common.$color-gray-900;\n    }\n\n    &-size {\n      font-size: 1rem;\n      color: common.$color-gray-700;\n    }\n\n    &-error {\n      display: flex;\n      margin-top: -0.9rem;\n      margin-bottom: 0.9rem;\n      align-items: center;\n      gap: 0.25rem;\n      font-size: 1rem;\n      color: common.$color-red-700;\n\n      &-icon {\n        path {\n          fill: common.$color-red-700;\n        }\n      }\n    }\n\n    &-line {\n      width: 100%;\n\n      &-container {\n        display: flex;\n        margin-bottom: 1rem;\n        padding: 1rem;\n        border: 1px solid common.$color-gray-700;\n        border-radius: common.$default-border-radius;\n        align-items: center;\n        justify-content: space-between;\n        background: common.$color-white;\n\n        &--error {\n          border-color: common.$color-red-700;\n        }\n      }\n    }\n\n    &-actions {\n      display: flex;\n      align-items: baseline;\n      justify-content: center;\n      gap: 1rem;\n      cursor: pointer;\n\n      &-icon {\n        path {\n          fill: common.$color-gray-700;\n        }\n      }\n    }\n  }\n}\n\n.is-mobile {\n  .af-form {\n    &__file {\n      &-input {\n        &-dropdown-text {\n          display: none;\n        }\n      }\n    }\n  }\n\n  .af-btn-client {\n    width: 100%;\n  }\n}\n","@use \"../../common/common\" as common;\n\n.af-form {\n  &__group {\n    &--label {\n      font-size: 1.125rem;\n      font-weight: 600;\n      color: common.$color-gray-900;\n    }\n  }\n\n  &__file {\n    &-input {\n      position: relative;\n      display: flex;\n      margin-top: 0.5rem;\n      margin-bottom: 0.6rem;\n      padding: 1rem;\n      padding-bottom: 2rem;\n      border: 2px dashed common.$color-axa;\n      border-radius: 8px;\n      flex-direction: column;\n      align-items: center;\n      justify-content: space-between;\n      font-weight: normal;\n      text-align: center;\n      color: common.$color-gray-900;\n      background-color: common.$color-white;\n      cursor: pointer;\n\n      &.is-mobile {\n        padding-bottom: 1rem;\n      }\n\n      &:hover {\n        border-color: common.$color-gray-700;\n      }\n\n      &--error {\n        border-color: common.$color-red-700;\n      }\n\n      input {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        opacity: 0;\n        cursor: pointer;\n      }\n\n      &-dropdown-text {\n        padding-top: 1rem;\n        line-height: 5px;\n      }\n\n      &-help {\n        font-size: 1rem;\n        font-weight: 400;\n        color: common.$color-gray-700;\n      }\n\n      &-icon {\n        path {\n          fill: common.$color-axa;\n        }\n      }\n\n      .af-btn-client {\n        width: 50%;\n      }\n    }\n\n    &-list {\n      display: flex;\n      margin-top: 1.125rem;\n      padding: 0;\n      flex-wrap: wrap;\n      font-size: 0.9rem;\n      list-style: none;\n    }\n\n    &-title-container {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 0.5rem;\n\n      &-icon {\n        &-error {\n          path {\n            fill: common.$color-red-700;\n          }\n        }\n\n        &-success {\n          path {\n            fill: common.$color-green-600;\n          }\n        }\n      }\n    }\n\n    &-title {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n\n      & > div {\n        display: flex;\n        flex-direction: column;\n      }\n    }\n\n    &-name {\n      font-size: 1.125rem;\n      color: common.$color-gray-900;\n    }\n\n    &-size {\n      font-size: 1rem;\n      color: common.$color-gray-700;\n    }\n\n    &-error {\n      display: flex;\n      margin-top: -0.9rem;\n      margin-bottom: 0.9rem;\n      align-items: center;\n      gap: 0.25rem;\n      font-size: 1rem;\n      color: common.$color-red-700;\n\n      &-icon {\n        path {\n          fill: common.$color-red-700;\n        }\n      }\n    }\n\n    &-line {\n      width: 100%;\n\n      &-container {\n        display: flex;\n        margin-bottom: 1rem;\n        padding: 1rem;\n        border: 1px solid common.$color-gray-700;\n        border-radius: common.$default-border-radius;\n        align-items: center;\n        justify-content: space-between;\n        background: common.$color-white;\n\n        &--error {\n          border-color: common.$color-red-700;\n        }\n      }\n    }\n\n    &-actions {\n      display: flex;\n      align-items: baseline;\n      justify-content: center;\n      gap: 1rem;\n      cursor: pointer;\n\n      &-icon {\n        path {\n          fill: common.$color-gray-700;\n        }\n      }\n    }\n  }\n}\n\n.is-mobile {\n  .af-form {\n    &__file {\n      &-input {\n        &-dropdown-text {\n          display: none;\n        }\n      }\n    }\n  }\n\n  .af-btn-client {\n    width: 100%;\n  }\n}\n","$font-family-sans-serif: \"Source Sans Pro\", arial, sans-serif !default;\n$font-family-serif: georgia, times, \"Times New Roman\", serif !default;\n$font-family-base: $font-family-sans-serif !default;\n$font-family-publico-bold: \"Publico Headline Bold\" !default;\n$font-family-publico: \"Publico Headline\" !default;\n// colors\n\n$color-axa: #00008f !default;\n$color-white: #fff !default;\n$color-black: #000 !default;\n$color-red: #ff1721 !default;\n$color-gray: #5f5f5f !default;\n$color-red-700: #c91432 !default;\n$color-blue-1: #000072 !default;\n$color-blue-2: #f8f8ff !default;\n$color-blue-3: #36f !default;\n$color-btn-light: #3333a5 !default;\n$color-btn-business: #c94e14 !default;\n$color-btn-business-dark: #a8391c !default;\n$color-btn-business-light: #df7e65 !default;\n$color-btn-disabled-text: #999 !default;\n$color-btn-disabled-border: #e5e5e5 !default;\n$color-btn-error-text: #a11028 !default;\n$color-btn-error-bg: #fff3f5 !default;\n$color-btn-tertiary-bg: #eef !default;\n$color-btn-tertiary-bg-darker: #e4e4ff !default;\n$color-btn-tertiary-bg-lighter: #f8f8ff !default;\n$color-oceanBlue: #4976ba !default;\n$color-gray-1: #ccc !default;\n$color-gray-200: #f3f3f3;\n$color-gray-300: #e9ecf2;\n$color-gray-400: #e5e5e5;\n$color-gray-500: #999;\n$color-gray-700: #5f5f5f;\n$color-gray-900: #333 !default;\n$color-green-600: #118635 !default;\n$color-border: #f3f3f3 !default;\n$color-focus: #36f !default;\n\n// others\n\n$default-border-radius: 4px !default;\n\n$transition-duration: 0.2s !default;\n\n// spacing\n\n$sizing-u0: 0 !default;\n$sizing-u05: 0.4rem !default;\n$sizing-u1: 0.8rem !default;\n$sizing-u2: 1.6rem !default;\n$sizing-u3: 2.4rem !default;\n$sizing-u4: 3.2rem !default;\n$sizing-u5: 4rem !default;\n$sizing-u6: 4.8rem !default;\n$sizing-u7: 5.6rem !default;\n$sizing-u8: 6.4rem !default;\n$sizing-u9: 7.2rem !default;\n$sizing-u10: 8rem !default;\n$spacing-u0: 0 !default;\n$spacing-u05: 0.4rem !default;\n$spacing-u1: 0.8rem !default;\n$spacing-u2: 1.6rem !default;\n$spacing-u3: 2.4rem !default;\n$spacing-u4: 3.2rem !default;\n$spacing-u5: 4rem !default;\n$spacing-u6: 4.8rem !default;\n$spacing-u7: 5.6rem !default;\n$spacing-u8: 6.4rem !default;\n$spacing-u9: 7.2rem !default;\n$spacing-u10: 8rem !default;\n$spacing-u11: 8.8rem !default;\n$spacing-u12: 9.6rem !default;\n$spacing-u13: 10.4rem !default;\n$spacing-u14: 11.2rem !default;\n$spacing-u15: 12rem !default;\n$spacing-u16: 12.8rem !default;\n$spacing-u17: 13.6rem !default;\n$spacing-u18: 14.4rem !default;\n$spacing-u19: 15.2rem !default;\n$spacing-u20: 16rem !default;\n$screen-size-668: s !default;\n$screen-size-1024: m !default;\n$screen-size-1200: oldl !default;\n$screen-size-1280: l !default;\n$screen-size-1540: oldxl !default;\n$screen-size-1600: xl !default;\n$screen-size-s: 668px !default;\n$screen-size-m: 1024px !default;\n$screen-size-l: 1280px !default;\n$screen-size-xl: 1600px !default;\n$screen-size-oldl: 1200px !default;\n$screen-size-oldxl: 1540px !default;\n\n$error-custom-border: #d18e8e !default;\n$error-custom-bg: #ffbfbf !default;\n\n$color-alertDanger-colorBorder: #c8b282 !default;\n$color-alertDanger-bgColor: #f1d596 !default;\n\n// breakpoints\n\n$breakpoint-xs: 0 !default;\n$breakpoint-sm: 667px !default;\n$breakpoint-md: 1023px !default;\n$breakpoint-lg: 1279px !default;\n$breakpoint-xl: 1599px !default;\n"]}

package/dist/Form/FileUpload/FileUpload.scss

@@ -0,0 +1,191 @@
+@use "../../common/common" as common;
+
+.af-form {
+  &__group {
+    &--label {
+      font-size: 1.125rem;
+      font-weight: 600;
+      color: common.$color-gray-900;
+    }
+  }
+
+  &__file {
+    &-input {
+      position: relative;
+      display: flex;
+      margin-top: 0.5rem;
+      margin-bottom: 0.6rem;
+      padding: 1rem;
+      padding-bottom: 2rem;
+      border: 2px dashed common.$color-axa;
+      border-radius: 8px;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+      font-weight: normal;
+      text-align: center;
+      color: common.$color-gray-900;
+      background-color: common.$color-white;
+      cursor: pointer;
+
+      &.is-mobile {
+        padding-bottom: 1rem;
+      }
+
+      &:hover {
+        border-color: common.$color-gray-700;
+      }
+
+      &--error {
+        border-color: common.$color-red-700;
+      }
+
+      input {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        opacity: 0;
+        cursor: pointer;
+      }
+
+      &-dropdown-text {
+        padding-top: 1rem;
+        line-height: 5px;
+      }
+
+      &-help {
+        font-size: 1rem;
+        font-weight: 400;
+        color: common.$color-gray-700;
+      }
+
+      &-icon {
+        path {
+          fill: common.$color-axa;
+        }
+      }
+
+      .af-btn-client {
+        width: 50%;
+      }
+    }
+
+    &-list {
+      display: flex;
+      margin-top: 1.125rem;
+      padding: 0;
+      flex-wrap: wrap;
+      font-size: 0.9rem;
+      list-style: none;
+    }
+
+    &-title-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5rem;
+
+      &-icon {
+        &-error {
+          path {
+            fill: common.$color-red-700;
+          }
+        }
+
+        &-success {
+          path {
+            fill: common.$color-green-600;
+          }
+        }
+      }
+    }
+
+    &-title {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+
+      & > div {
+        display: flex;
+        flex-direction: column;
+      }
+    }
+
+    &-name {
+      font-size: 1.125rem;
+      color: common.$color-gray-900;
+    }
+
+    &-size {
+      font-size: 1rem;
+      color: common.$color-gray-700;
+    }
+
+    &-error {
+      display: flex;
+      margin-top: -0.9rem;
+      margin-bottom: 0.9rem;
+      align-items: center;
+      gap: 0.25rem;
+      font-size: 1rem;
+      color: common.$color-red-700;
+
+      &-icon {
+        path {
+          fill: common.$color-red-700;
+        }
+      }
+    }
+
+    &-line {
+      width: 100%;
+
+      &-container {
+        display: flex;
+        margin-bottom: 1rem;
+        padding: 1rem;
+        border: 1px solid common.$color-gray-700;
+        border-radius: common.$default-border-radius;
+        align-items: center;
+        justify-content: space-between;
+        background: common.$color-white;
+
+        &--error {
+          border-color: common.$color-red-700;
+        }
+      }
+    }
+
+    &-actions {
+      display: flex;
+      align-items: baseline;
+      justify-content: center;
+      gap: 1rem;
+      cursor: pointer;
+
+      &-icon {
+        path {
+          fill: common.$color-gray-700;
+        }
+      }
+    }
+  }
+}
+
+.is-mobile {
+  .af-form {
+    &__file {
+      &-input {
+        &-dropdown-text {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .af-btn-client {
+    width: 100%;
+  }
+}

package/dist/Form/InputError/InputError.css

@@ -0,0 +1 @@
+.af-input-error{align-items:center;display:flex;gap:.25rem}.af-input-error__icon{color:#c91432;width:1rem;fill:#c91432}.af-input-error__message{color:#c91432;font-family:Source Sans Pro,arial,sans-serif;font-size:1rem}

package/dist/Form/InputError/InputError.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Form/InputError/InputError.scss%23sass","../../../src/Form/InputError/InputError.scss"],"names":[],"mappings":"AAEA,gBCAA,kBAAA,CDCE,YAAA,CAEA,UCDF,CDGE,sBAEE,aAAA,CADA,UAAA,CAEA,YCDJ,CDIE,yBAGE,aAAA,CAFA,4CAAA,CACA,cCDJ","file":"InputError.css","sourcesContent":["@use \"../../common/common\" as common;\n\n.af-input-error {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n\n  &__icon {\n    width: 1rem;\n    color: common.$color-red-700;\n    fill: common.$color-red-700;\n  }\n\n  &__message {\n    font-family: common.$font-family-base;\n    font-size: 1rem;\n    color: common.$color-red-700;\n  }\n}\n","@use \"../../common/common\" as common;\n\n.af-input-error {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n\n  &__icon {\n    width: 1rem;\n    color: common.$color-red-700;\n    fill: common.$color-red-700;\n  }\n\n  &__message {\n    font-family: common.$font-family-base;\n    font-size: 1rem;\n    color: common.$color-red-700;\n  }\n}\n"]}

package/dist/Form/InputError/InputError.scss

@@ -0,0 +1,19 @@
+@use "../../common/common" as common;
+
+.af-input-error {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+
+  &__icon {
+    width: 1rem;
+    color: common.$color-red-700;
+    fill: common.$color-red-700;
+  }
+
+  &__message {
+    font-family: common.$font-family-base;
+    font-size: 1rem;
+    color: common.$color-red-700;
+  }
+}

package/dist/Form/Radio/Radio.css

@@ -0,0 +1 @@
+.af-radio{font-family:Source Sans Pro,arial,sans-serif}.af-radio *{box-sizing:border-box}.af-radio__content{align-items:center;display:flex;gap:1rem;justify-content:center}.af-radio__content>svg{color:#00008f;height:1.75rem;width:1.75rem;fill:#00008f}.af-radio__content .af-radio__content-description{display:flex;flex-direction:column;gap:.25rem;line-height:1.25rem}.af-radio__content .af-radio__content-description>span:first-child{color:#333;font-size:1.125rem;line-height:1.4rem}.af-radio__content .af-radio__content-description>span:not(:first-child){color:#5f5f5f}.af-radio-select--horizontal .af-radio__content{flex-direction:column;gap:.5rem}.af-radio__group-description,.af-radio~.af-radio__error{font-size:1rem;line-height:1.25rem}.af-radio~.af-radio__error{align-items:center;color:#c91432;display:flex;font-family:Source Sans Pro,arial,sans-serif;gap:.5rem;margin-left:3.2rem}.af-radio~.af-radio__error>svg{color:#c91432;height:1rem;width:1rem;fill:#c91432}.af-radio-select~.af-radio__error{margin:1rem 0 0}.af-radio label{align-items:flex-start;border-radius:4px;cursor:pointer;display:flex;gap:.75rem;margin:0}.af-radio-select label{align-items:center;box-shadow:0 0 0 1px var(--box-shadow-color) inset;height:6.4rem;padding:1rem;--box-shadow-color:#5f5f5f}.af-radio[aria-invalid=true] *{color:#c91432;fill:#c91432}.af-radio-select--horizontal label{flex-direction:column;gap:0;height:auto;justify-content:flex-start;padding:1rem;position:relative;text-align:center;width:12rem}.af-radio-select--horizontal label .af-radio__icons{left:1rem;position:absolute;top:1rem}.af-radio-select[aria-invalid=true] label{--box-shadow-color:#c91432;box-shadow:0 0 0 2px var(--box-shadow-color) inset}.af-radio label input[type=radio]{margin-right:.5rem;opacity:0;position:absolute}.af-radio label input[type=radio]~.af-radio__icons{align-items:center;display:flex;gap:.75rem}.af-radio label input[type=radio]~.af-radio__icons .af-radio__checked,.af-radio label input[type=radio]~.af-radio__icons .af-radio__unchecked{align-items:center;height:1.75rem;width:1.75rem}.af-radio label input[type=radio]~.af-radio__icons .af-radio__checked{display:none}.af-radio label input[type=radio]~.af-radio__icons .af-radio__unchecked{color:#5f5f5f;fill:#5f5f5f}.af-radio label:has(input[type=radio]:checked) .af-radio__checked{color:#00008f;display:block;fill:#00008f}.af-radio label:has(input[type=radio]:checked) .af-radio__unchecked{display:none}.af-radio label:has(input[type=radio]:disabled){cursor:default}.af-radio label:has(input[type=radio]:disabled) .af-radio__checked,.af-radio label:has(input[type=radio]:disabled) .af-radio__content>svg,.af-radio label:has(input[type=radio]:disabled) .af-radio__unchecked{color:#999;fill:#999}.af-radio-select[aria-invalid=false] label:has(input[type=radio]:checked){background-color:#f8f8ff;box-shadow:inset 0 0 0 2px #00008f}.af-radio-select[aria-invalid=false] label:has(input[type=radio]:disabled){background-color:#f3f3f3;box-shadow:0 0 0 1px var(--box-shadow-color) inset;color:#999;--box-shadow-color:#e5e5e5}.af-radio label input[type=radio]:focus-visible~.af-radio__icons .af-radio__checked,.af-radio label input[type=radio]:focus-visible~.af-radio__icons .af-radio__unchecked{outline:2px solid #36f;outline-offset:3px}.af-radio label:hover:not(:has(input[type=radio]:disabled)) .af-radio__unchecked{color:#00008f;fill:#00008f}.af-radio-select label:hover:not(:has(input[type=radio]:disabled)){--box-shadow-color:#00008f;box-shadow:0 0 0 1px var(--box-shadow-color) inset}.af-radio-select{color:#5f5f5f;display:flex;flex-direction:column;font-family:Source Sans Pro,arial,sans-serif;font-style:normal;font-weight:400;gap:1rem;line-height:1.25rem;margin-top:1rem}.af-radio-select--horizontal{flex-direction:row}

package/dist/Form/Radio/Radio.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Form/Radio/Radio.scss%23sass","../../../src/Form/Radio/Radio.scss","../../../src/common/common.scss"],"names":[],"mappings":"AAEA,UACE,4CCDF,CDGE,YACE,qBCDJ,CDIE,mBAEE,kBAAA,CADA,YAAA,CAGA,QAAA,CADA,sBCDJ,CDII,uBAGE,aAAA,CADA,cAAA,CADA,aAAA,CAGA,YCFN,CDKI,kDACE,YAAA,CACA,qBAAA,CACA,UAAA,CACA,mBCHN,CDKM,mEAGE,UEGS,CFLT,kBAAA,CACA,kBCFR,CDMM,yEACE,aCJR,CDSE,gDACE,qBAAA,CACA,SCPJ,CDeE,wDAJE,cAAA,CACA,mBCEJ,CDCE,2BAGE,kBAAA,CAKA,aAAA,CAPA,YAAA,CAIA,4CAAA,CADA,SAAA,CAFA,kBCHJ,CDWI,+BAGE,aAAA,CADA,WAAA,CADA,UAAA,CAGA,YCTN,CDaE,kCACE,eCXJ,CDcE,gBAIE,sBAAA,CADA,iBElCoB,CFqCpB,cAAA,CALA,YAAA,CAIA,UAAA,CAHA,QCRJ,CDeE,uBAGE,kBAAA,CACA,kDAAA,CAHA,aAAA,CACA,YAAA,CAIA,0BCdJ,CDkBI,+BACE,aAAA,CACA,YChBN,CDoBE,mCAKE,qBAAA,CAEA,KAAA,CAJA,WAAA,CAGA,0BAAA,CAFA,YAAA,CAHA,iBAAA,CAOA,iBAAA,CANA,WCZJ,CDoBI,oDAGE,SAAA,CAFA,iBAAA,CACA,QCjBN,CDsBE,0CACE,0BAAA,CAEA,kDCrBJ,CDwBE,kCAEE,kBAAA,CACA,SAAA,CAFA,iBCpBJ,CDwBI,mDAEE,kBAAA,CADA,YAAA,CAEA,UCtBN,CDwBM,8IAIE,kBAAA,CADA,cAAA,CADA,aCrBR,CD0BM,sEACE,YCxBR,CD2BM,wEACE,aE7GS,CF8GT,YCzBR,CD+BI,kEAEE,aAAA,CADA,aAAA,CAEA,YC7BN,CDgCI,oEACE,YC9BN,CDkCE,gDACE,cChCJ,CDkCI,+MAGE,UEtIW,CFuIX,SClCN,CDsCE,0EACE,wBAAA,CACA,kCCpCJ,CDuCE,2EAEE,wBErJa,CFsJb,kDAAA,CAFA,UAAA,CAIA,0BCtCJ,CD0CI,0KAEE,sBAAA,CACA,kBCzCN,CD8CI,iFACE,aAAA,CACA,YC5CN,CDgDE,mEACE,0BAAA,CAEA,kDC/CJ,CDkDE,iBASE,aErLa,CF6Kb,YAAA,CAEA,qBAAA,CAEA,4CElNqB,CFmNrB,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,mBAAA,CANA,eCzCJ,CDkDI,6BACE,kBChDN","file":"Radio.css","sourcesContent":["@use \"../../common/common\" as common;\n\n.af-radio {\n  font-family: \"Source Sans Pro\", arial, sans-serif;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  &__content {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 1rem;\n\n    & > svg {\n      width: 1.75rem;\n      height: 1.75rem;\n      color: common.$color-axa;\n      fill: common.$color-axa;\n    }\n\n    & &-description {\n      display: flex;\n      flex-direction: column;\n      gap: 0.25rem;\n      line-height: 1.25rem;\n\n      & > span:first-child {\n        font-size: 1.125rem;\n        line-height: 1.4rem;\n        color: common.$color-gray-900;\n      }\n\n      & > span:not(:first-child) {\n        color: common.$color-gray-700;\n      }\n    }\n  }\n\n  &-select--horizontal &__content {\n    flex-direction: column;\n    gap: 0.5rem;\n  }\n\n  &__group-description {\n    font-size: 1rem;\n    line-height: 1.25rem;\n  }\n\n  & ~ &__error {\n    display: flex;\n    margin-left: 3.2rem;\n    align-items: center;\n    gap: 0.5rem;\n    font-family: \"Source Sans Pro\", arial, sans-serif;\n    font-size: 1rem;\n    line-height: 1.25rem;\n    color: common.$color-red-700;\n\n    & > svg {\n      width: 1rem;\n      height: 1rem;\n      color: common.$color-red-700;\n      fill: common.$color-red-700;\n    }\n  }\n\n  &-select ~ &__error {\n    margin: 1rem 0 0;\n  }\n\n  & label {\n    display: flex;\n    margin: 0;\n    border-radius: common.$default-border-radius;\n    align-items: flex-start;\n    gap: 0.75rem;\n    cursor: pointer;\n  }\n\n  &-select label {\n    height: 6.4rem;\n    padding: 1rem;\n    align-items: center;\n    box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n\n    --box-shadow-color: #{common.$color-gray};\n  }\n\n  &[aria-invalid=\"true\"] {\n    * {\n      color: common.$color-red-700;\n      fill: common.$color-red-700;\n    }\n  }\n\n  &-select--horizontal label {\n    position: relative;\n    width: 12rem;\n    height: auto;\n    padding: 1rem;\n    flex-direction: column;\n    justify-content: flex-start;\n    gap: 0;\n    text-align: center;\n\n    & .af-radio__icons {\n      position: absolute;\n      top: 1rem;\n      left: 1rem;\n    }\n  }\n\n  &-select[aria-invalid=\"true\"] label {\n    --box-shadow-color: #{common.$color-red-700};\n\n    box-shadow: 0 0 0 2px var(--box-shadow-color) inset;\n  }\n\n  & label input[type=\"radio\"] {\n    position: absolute;\n    margin-right: 0.5rem;\n    opacity: 0;\n\n    & ~ .af-radio__icons {\n      display: flex;\n      align-items: center;\n      gap: 0.75rem;\n\n      & .af-radio__checked,\n      & .af-radio__unchecked {\n        width: 1.75rem;\n        height: 1.75rem;\n        align-items: center;\n      }\n\n      & .af-radio__checked {\n        display: none;\n      }\n\n      & .af-radio__unchecked {\n        color: common.$color-gray-700;\n        fill: common.$color-gray-700;\n      }\n    }\n  }\n\n  & label:has(input[type=\"radio\"]:checked) {\n    & .af-radio__checked {\n      display: block;\n      color: common.$color-axa;\n      fill: common.$color-axa;\n    }\n\n    & .af-radio__unchecked {\n      display: none;\n    }\n  }\n\n  & label:has(input[type=\"radio\"]:disabled) {\n    cursor: default;\n\n    & .af-radio__content > svg,\n    & .af-radio__checked,\n    & .af-radio__unchecked {\n      color: common.$color-gray-500;\n      fill: common.$color-gray-500;\n    }\n  }\n\n  &-select[aria-invalid=\"false\"] label:has(input[type=\"radio\"]:checked) {\n    background-color: common.$color-blue-2;\n    box-shadow: 0 0 0 2px common.$color-axa inset;\n  }\n\n  &-select[aria-invalid=\"false\"] label:has(input[type=\"radio\"]:disabled) {\n    color: common.$color-gray-500;\n    background-color: common.$color-gray-200;\n    box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n\n    --box-shadow-color: #{common.$color-gray-400};\n  }\n\n  & label input[type=\"radio\"]:focus-visible ~ .af-radio__icons {\n    & .af-radio__unchecked,\n    & .af-radio__checked {\n      outline: 2px solid common.$color-blue-3;\n      outline-offset: 3px;\n    }\n  }\n\n  & label:hover:not(:has(input[type=\"radio\"]:disabled)) {\n    & .af-radio__unchecked {\n      color: common.$color-axa;\n      fill: common.$color-axa;\n    }\n  }\n\n  &-select label:hover:not(:has(input[type=\"radio\"]:disabled)) {\n    --box-shadow-color: #{common.$color-axa};\n\n    box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n  }\n\n  &-select {\n    display: flex;\n    margin-top: 1rem;\n    flex-direction: column;\n    gap: 1rem;\n    font-family: common.$font-family-base;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1.25rem;\n    color: common.$color-gray-700;\n\n    &--horizontal {\n      flex-direction: row;\n    }\n  }\n}\n","@use \"../../common/common\" as common;\n\n.af-radio {\n  font-family: \"Source Sans Pro\", arial, sans-serif;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  &__content {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 1rem;\n\n    & > svg {\n      width: 1.75rem;\n      height: 1.75rem;\n      color: common.$color-axa;\n      fill: common.$color-axa;\n    }\n\n    & &-description {\n      display: flex;\n      flex-direction: column;\n      gap: 0.25rem;\n      line-height: 1.25rem;\n\n      & > span:first-child {\n        font-size: 1.125rem;\n        line-height: 1.4rem;\n        color: common.$color-gray-900;\n      }\n\n      & > span:not(:first-child) {\n        color: common.$color-gray-700;\n      }\n    }\n  }\n\n  &-select--horizontal &__content {\n    flex-direction: column;\n    gap: 0.5rem;\n  }\n\n  &__group-description {\n    font-size: 1rem;\n    line-height: 1.25rem;\n  }\n\n  & ~ &__error {\n    display: flex;\n    margin-left: 3.2rem;\n    align-items: center;\n    gap: 0.5rem;\n    font-family: \"Source Sans Pro\", arial, sans-serif;\n    font-size: 1rem;\n    line-height: 1.25rem;\n    color: common.$color-red-700;\n\n    & > svg {\n      width: 1rem;\n      height: 1rem;\n      color: common.$color-red-700;\n      fill: common.$color-red-700;\n    }\n  }\n\n  &-select ~ &__error {\n    margin: 1rem 0 0;\n  }\n\n  & label {\n    display: flex;\n    margin: 0;\n    border-radius: common.$default-border-radius;\n    align-items: flex-start;\n    gap: 0.75rem;\n    cursor: pointer;\n  }\n\n  &-select label {\n    height: 6.4rem;\n    padding: 1rem;\n    align-items: center;\n    box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n\n    --box-shadow-color: #{common.$color-gray};\n  }\n\n  &[aria-invalid=\"true\"] {\n    * {\n      color: common.$color-red-700;\n      fill: common.$color-red-700;\n    }\n  }\n\n  &-select--horizontal label {\n    position: relative;\n    width: 12rem;\n    height: auto;\n    padding: 1rem;\n    flex-direction: column;\n    justify-content: flex-start;\n    gap: 0;\n    text-align: center;\n\n    & .af-radio__icons {\n      position: absolute;\n      top: 1rem;\n      left: 1rem;\n    }\n  }\n\n  &-select[aria-invalid=\"true\"] label {\n    --box-shadow-color: #{common.$color-red-700};\n\n    box-shadow: 0 0 0 2px var(--box-shadow-color) inset;\n  }\n\n  & label input[type=\"radio\"] {\n    position: absolute;\n    margin-right: 0.5rem;\n    opacity: 0;\n\n    & ~ .af-radio__icons {\n      display: flex;\n      align-items: center;\n      gap: 0.75rem;\n\n      & .af-radio__checked,\n      & .af-radio__unchecked {\n        width: 1.75rem;\n        height: 1.75rem;\n        align-items: center;\n      }\n\n      & .af-radio__checked {\n        display: none;\n      }\n\n      & .af-radio__unchecked {\n        color: common.$color-gray-700;\n        fill: common.$color-gray-700;\n      }\n    }\n  }\n\n  & label:has(input[type=\"radio\"]:checked) {\n    & .af-radio__checked {\n      display: block;\n      color: common.$color-axa;\n      fill: common.$color-axa;\n    }\n\n    & .af-radio__unchecked {\n      display: none;\n    }\n  }\n\n  & label:has(input[type=\"radio\"]:disabled) {\n    cursor: default;\n\n    & .af-radio__content > svg,\n    & .af-radio__checked,\n    & .af-radio__unchecked {\n      color: common.$color-gray-500;\n      fill: common.$color-gray-500;\n    }\n  }\n\n  &-select[aria-invalid=\"false\"] label:has(input[type=\"radio\"]:checked) {\n    background-color: common.$color-blue-2;\n    box-shadow: 0 0 0 2px common.$color-axa inset;\n  }\n\n  &-select[aria-invalid=\"false\"] label:has(input[type=\"radio\"]:disabled) {\n    color: common.$color-gray-500;\n    background-color: common.$color-gray-200;\n    box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n\n    --box-shadow-color: #{common.$color-gray-400};\n  }\n\n  & label input[type=\"radio\"]:focus-visible ~ .af-radio__icons {\n    & .af-radio__unchecked,\n    & .af-radio__checked {\n      outline: 2px solid common.$color-blue-3;\n      outline-offset: 3px;\n    }\n  }\n\n  & label:hover:not(:has(input[type=\"radio\"]:disabled)) {\n    & .af-radio__unchecked {\n      color: common.$color-axa;\n      fill: common.$color-axa;\n    }\n  }\n\n  &-select label:hover:not(:has(input[type=\"radio\"]:disabled)) {\n    --box-shadow-color: #{common.$color-axa};\n\n    box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n  }\n\n  &-select {\n    display: flex;\n    margin-top: 1rem;\n    flex-direction: column;\n    gap: 1rem;\n    font-family: common.$font-family-base;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1.25rem;\n    color: common.$color-gray-700;\n\n    &--horizontal {\n      flex-direction: row;\n    }\n  }\n}\n","$font-family-sans-serif: \"Source Sans Pro\", arial, sans-serif !default;\n$font-family-serif: georgia, times, \"Times New Roman\", serif !default;\n$font-family-base: $font-family-sans-serif !default;\n$font-family-publico-bold: \"Publico Headline Bold\" !default;\n$font-family-publico: \"Publico Headline\" !default;\n// colors\n\n$color-axa: #00008f !default;\n$color-white: #fff !default;\n$color-black: #000 !default;\n$color-red: #ff1721 !default;\n$color-gray: #5f5f5f !default;\n$color-red-700: #c91432 !default;\n$color-blue-1: #000072 !default;\n$color-blue-2: #f8f8ff !default;\n$color-blue-3: #36f !default;\n$color-btn-light: #3333a5 !default;\n$color-btn-business: #c94e14 !default;\n$color-btn-business-dark: #a8391c !default;\n$color-btn-business-light: #df7e65 !default;\n$color-btn-disabled-text: #999 !default;\n$color-btn-disabled-border: #e5e5e5 !default;\n$color-btn-error-text: #a11028 !default;\n$color-btn-error-bg: #fff3f5 !default;\n$color-btn-tertiary-bg: #eef !default;\n$color-btn-tertiary-bg-darker: #e4e4ff !default;\n$color-btn-tertiary-bg-lighter: #f8f8ff !default;\n$color-oceanBlue: #4976ba !default;\n$color-gray-1: #ccc !default;\n$color-gray-200: #f3f3f3;\n$color-gray-300: #e9ecf2;\n$color-gray-400: #e5e5e5;\n$color-gray-500: #999;\n$color-gray-700: #5f5f5f;\n$color-gray-900: #333 !default;\n$color-green-600: #118635 !default;\n$color-border: #f3f3f3 !default;\n$color-focus: #36f !default;\n\n// others\n\n$default-border-radius: 4px !default;\n\n$transition-duration: 0.2s !default;\n\n// spacing\n\n$sizing-u0: 0 !default;\n$sizing-u05: 0.4rem !default;\n$sizing-u1: 0.8rem !default;\n$sizing-u2: 1.6rem !default;\n$sizing-u3: 2.4rem !default;\n$sizing-u4: 3.2rem !default;\n$sizing-u5: 4rem !default;\n$sizing-u6: 4.8rem !default;\n$sizing-u7: 5.6rem !default;\n$sizing-u8: 6.4rem !default;\n$sizing-u9: 7.2rem !default;\n$sizing-u10: 8rem !default;\n$spacing-u0: 0 !default;\n$spacing-u05: 0.4rem !default;\n$spacing-u1: 0.8rem !default;\n$spacing-u2: 1.6rem !default;\n$spacing-u3: 2.4rem !default;\n$spacing-u4: 3.2rem !default;\n$spacing-u5: 4rem !default;\n$spacing-u6: 4.8rem !default;\n$spacing-u7: 5.6rem !default;\n$spacing-u8: 6.4rem !default;\n$spacing-u9: 7.2rem !default;\n$spacing-u10: 8rem !default;\n$spacing-u11: 8.8rem !default;\n$spacing-u12: 9.6rem !default;\n$spacing-u13: 10.4rem !default;\n$spacing-u14: 11.2rem !default;\n$spacing-u15: 12rem !default;\n$spacing-u16: 12.8rem !default;\n$spacing-u17: 13.6rem !default;\n$spacing-u18: 14.4rem !default;\n$spacing-u19: 15.2rem !default;\n$spacing-u20: 16rem !default;\n$screen-size-668: s !default;\n$screen-size-1024: m !default;\n$screen-size-1200: oldl !default;\n$screen-size-1280: l !default;\n$screen-size-1540: oldxl !default;\n$screen-size-1600: xl !default;\n$screen-size-s: 668px !default;\n$screen-size-m: 1024px !default;\n$screen-size-l: 1280px !default;\n$screen-size-xl: 1600px !default;\n$screen-size-oldl: 1200px !default;\n$screen-size-oldxl: 1540px !default;\n\n$error-custom-border: #d18e8e !default;\n$error-custom-bg: #ffbfbf !default;\n\n$color-alertDanger-colorBorder: #c8b282 !default;\n$color-alertDanger-bgColor: #f1d596 !default;\n\n// breakpoints\n\n$breakpoint-xs: 0 !default;\n$breakpoint-sm: 667px !default;\n$breakpoint-md: 1023px !default;\n$breakpoint-lg: 1279px !default;\n$breakpoint-xl: 1599px !default;\n"]}