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

package/dist/Button/Button.scss

@@ -0,0 +1,148 @@
+@use "../common/common" as common;
+
+.af-btn-client {
+  display: flex;
+  min-height: 3.5rem;
+  padding: 0.8rem 1.2rem;
+  border: 0;
+  border-radius: 8px;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  font-family: common.$font-family-base;
+  font-weight: 600;
+  color: common.$color-white;
+  background-color: common.$color-axa;
+  transition-duration: common.$transition-duration;
+  transition-property: width, height, border, color, background-color, outline,
+    box-shadow;
+  transition-timing-function: linear;
+  cursor: pointer;
+
+  &:hover {
+    color: common.$color-white;
+    background-color: common.$color-blue-1;
+  }
+
+  &:active,
+  &:focus {
+    color: common.$color-white;
+    background-color: common.$color-btn-light;
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid common.$color-blue-3;
+    outline-offset: 3px;
+  }
+
+  & > svg {
+    aspect-ratio: 1;
+  }
+
+  &--ghost {
+    min-width: auto;
+    min-height: auto;
+    padding: 0;
+    gap: 0.25rem;
+    color: common.$color-axa;
+    background-color: transparent;
+
+    &:hover {
+      color: common.$color-blue-1;
+      background-color: transparent;
+    }
+
+    &:focus,
+    &:active {
+      color: common.$color-btn-light;
+      background-color: transparent;
+    }
+  }
+
+  &--primary-business {
+    background-color: common.$color-btn-business;
+
+    &:hover {
+      background-color: common.$color-btn-business-dark;
+    }
+
+    &:focus {
+      background-color: common.$color-btn-business-light;
+    }
+  }
+
+  &--tertiary {
+    color: common.$color-axa;
+    background-color: common.$color-btn-tertiary-bg;
+
+    &:hover {
+      color: common.$color-axa;
+      background-color: common.$color-btn-tertiary-bg-darker;
+    }
+
+    &:focus,
+    &:active {
+      color: common.$color-axa;
+      background-color: common.$color-btn-tertiary-bg-lighter;
+    }
+  }
+
+  &--secondary {
+    color: common.$color-axa;
+    background-color: common.$color-white;
+    box-shadow: 0 0 0 1px common.$color-axa inset;
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: common.$color-blue-1;
+      background-color: common.$color-white;
+      box-shadow: 0 0 0 2px common.$color-blue-1 inset;
+    }
+
+    &:active {
+      background-color: common.$color-blue-2;
+    }
+  }
+
+  &--secondary-error {
+    color: common.$color-red-700;
+    background-color: common.$color-white;
+    box-shadow: 0 0 0 1px common.$color-red-700 inset;
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: common.$color-btn-error-text;
+      background-color: common.$color-white;
+      box-shadow: 0 0 0 2px common.$color-btn-error-text inset;
+    }
+
+    &:active {
+      background-color: common.$color-btn-error-bg;
+    }
+  }
+
+  &__wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+  }
+
+  &:disabled,
+  &[aria-disabled="true"] {
+    color: common.$color-btn-disabled-text;
+    background-color: common.$color-gray-300;
+    box-shadow: none;
+    cursor: not-allowed;
+
+    &:hover,
+    &:focus {
+      border-color: transparent;
+      color: common.$color-btn-disabled-text;
+      background-color: common.$color-gray-300;
+    }
+  }
+}

package/dist/Card/Card.css

@@ -0,0 +1 @@
+*,:after,:before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{background-color:#fff;color:#333;font-family:Source Sans Pro,Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.5;margin:0;text-align:left}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:initial;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-bottom:.5rem;margin-top:0}p{margin-bottom:1rem;margin-top:0}abbr[data-original-title],abbr[title]{border-bottom:0;cursor:help;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{font-style:normal;line-height:inherit}address,dl,ol,ul{margin-bottom:1rem}dl,ol,ul{margin-top:0}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}a{background-color:initial;color:#00008f;text-decoration:none}a:hover{color:#000043;text-decoration:underline}a:not([href],[tabindex]),a:not([href],[tabindex]):focus,a:not([href],[tabindex]):hover{color:inherit;text-decoration:none}a:not([href],[tabindex]):focus{outline:0}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}pre{margin-bottom:1rem;margin-top:0;overflow:auto}figure{margin:0 0 1rem}img{border-style:none}img,svg{vertical-align:middle}svg{overflow:hidden}table{border-collapse:collapse}caption{caption-side:bottom;color:#6c757d;padding-bottom:.5rem;padding-top:.5rem;text-align:left}th{text-align:inherit}button{border-radius:0}button,input,optgroup,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}button,input{overflow:visible}button,select{text-transform:none}select{word-wrap:normal}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;appearance:button}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox;appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{border:0;margin:0;min-width:0;padding:0}legend{color:inherit;display:block;font-size:1.5rem;line-height:inherit;margin-bottom:.5rem;max-width:100%;padding:0;white-space:normal;width:100%}progress{vertical-align:initial}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:none;appearance:none;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;appearance:button;font:inherit}output{display:inline-block}summary{cursor:pointer;display:list-item}template{display:none}[hidden]{display:none!important}.af-card{align-self:start;background-color:#fff;border:1px solid #e9ecf2;border-radius:.5rem;box-shadow:0 .25rem .5rem 0 #10184114;font-family:Source Sans Pro,arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.25rem;padding:1rem}.af-card>:last-child{margin-block-end:0}.af-card:focus-visible{border:2px solid #36f;outline:none}.af-card--elevation-2:not(:focus){box-shadow:0 .25rem .5rem 0 #10184129}.af-card__title{color:#00008f;font-size:1.125rem;font-weight:600;line-height:1.4rem}.af-card--large{width:100%}.af-card--accordion{box-shadow:none;padding:0}button.af-card{cursor:pointer;text-align:initial}button.af-card:active{box-shadow:none}button.af-card:focus{outline:none}

package/dist/Card/Card.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/common/reboot.scss","../../src/Card/Card.scss","../../src/Card/Card.scss%23sass","../../src/common/common.scss"],"names":[],"mappings":"AAAA,iBCGA,qBACA,CDEA,KACE,sBAAA,CACA,gBAAA,CACA,6BAAA,CAAA,0BAAA,CAAA,qBAAA,CACA,uCCCF,CDEA,sEAUE,aCCF,CDEA,KAQE,qBAAA,CADA,UAAA,CALA,4CAAA,CACA,cAAA,CACA,eAAA,CACA,eAAA,CAJA,QAAA,CAKA,eCGF,CDEA,sBACE,mBCCF,CDEA,GACE,kBAAA,CCCF,QAAA,CDCE,gBCCF,CDEA,kBAOE,mBAAA,CADA,YCEF,CDEA,EAEE,kBAAA,CADA,YCEF,CDEA,sCAEE,eAAA,CAIA,WAAA,CAHA,yBAAA,CACA,wCAAA,CAAA,gCAAA,CACA,qCAAA,CAAA,6BCEF,CDEA,QAEE,iBAAA,CACA,mBCCF,CDEA,iBALE,kBCUF,CDLA,SAGE,YCEF,CDEA,wBAIE,eCCF,CDEA,GACE,eCCF,CDEA,GACE,mBAAA,CACA,aCCF,CDEA,WACE,eCCF,CDEA,SAEE,kBCCF,CDEA,MACE,aCCF,CDEA,QAIE,aAAA,CACA,aAAA,CAHA,iBAAA,CACA,sBCGF,CDEA,IACE,aCCF,CDEA,IACE,SCCF,CDEA,EAGE,wBAAA,CADA,aAAA,CADA,oBCGF,CDEA,QAEE,aAAA,CADA,yBCEF,CDOA,uFAGE,aAAA,CADA,oBCEF,CDEA,+BACE,SCCF,CDEA,kBAIE,sFAAA,CAEA,aCAF,CDGA,IAEE,kBAAA,CADA,YAAA,CAEA,aCAF,CDGA,OACE,eCAF,CDGA,IACE,iBCCF,CDGA,QAHE,qBCKF,CDFA,IAEE,eCAF,CDGA,MACE,wBCAF,CDGA,QAGE,mBAAA,CAEA,aAAA,CAHA,oBAAA,CADA,iBAAA,CAGA,eCCF,CDGA,GACE,kBCAF,CDGA,OACE,eCAF,CDGA,sCAME,mBAAA,CACA,iBAAA,CACA,mBAAA,CAHA,QCGF,CDGA,aAEE,gBCAF,CDGA,cAEE,mBCAF,CDGA,OACE,gBCAF,CDGA,gDAIE,yBAAA,CAAA,iBCAF,CDGA,aACE,kBAAA,CACA,yCCAF,CDGA,4GAIE,cCAF,CDGA,wHAKE,iBAAA,CADA,SCCF,CDGA,uCAEE,qBAAA,CACA,SCAF,CDGA,+EAIE,0BAAA,CAAA,kBCAF,CDGA,SACE,aAAA,CACA,eCAF,CDGA,SAIE,QAAA,CAFA,QAAA,CADA,WAAA,CAEA,SCCF,CDGA,OASE,aAAA,CARA,aAAA,CAKA,gBAAA,CACA,mBAAA,CAHA,mBAAA,CADA,cAAA,CAEA,SAAA,CAGA,kBAAA,CANA,UCOF,CDGA,SACE,sBCAF,CDGA,kFAEE,WCAF,CDGA,cAEE,uBAAA,CAAA,eAAA,CADA,mBCCF,CDGA,yCACE,uBAAA,CAAA,eCAF,CDGA,6BAEE,yBAAA,CAAA,iBAAA,CADA,YCCF,CDGA,OACE,oBCAF,CDGA,QAEE,cAAA,CADA,iBCCF,CDGA,SACE,YCAF,CDGA,SACE,sBCAF,CCvUA,SAIE,gBAAA,CAKA,qBCFY,CDLZ,wBAAA,CACA,mBAAA,CAOA,qCAAA,CALA,4CCNuB,CDOvB,cAAA,CACA,eAAA,CACA,mBAAA,CAPA,YDmVF,CCxUE,qBACE,kBD0UJ,CCvUE,uBACE,qBAAA,CACA,YDyUJ,CCtUE,kCACE,qCDwUJ,CCrUE,gBAIE,aCvBQ,CDoBR,kBAAA,CACA,eAAA,CACA,kBDwUJ,CCpUE,gBACE,UDsUJ,CCnUE,oBAEE,eAAA,CADA,SDsUJ,CCjUA,eAEE,cAAA,CADA,kBDqUF,CClUE,sBACE,eDoUJ,CCjUE,qBACE,YDmUJ","file":"Card.css","sourcesContent":["*,\n::after,\n::before {\n  box-sizing: border-box;\n}\n\nhtml {\n  font-family: sans-serif;\n  line-height: 1.15;\n  text-size-adjust: 100%;\n  -webkit-tap-highlight-color: transparent;\n}\n\narticle,\naside,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmain,\nnav,\nsection {\n  display: block;\n}\n\nbody {\n  margin: 0;\n  font-family: \"Source Sans Pro\", Arial, sans-serif;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5;\n  text-align: left;\n  color: #333;\n  background-color: #fff;\n}\n\n[tabindex=\"-1\"]:focus {\n  outline: 0 !important;\n}\n\nhr {\n  box-sizing: content-box;\n  height: 0;\n  overflow: visible;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  margin-top: 0;\n  margin-bottom: 0.5rem;\n}\n\np {\n  margin-top: 0;\n  margin-bottom: 1rem;\n}\n\nabbr[data-original-title],\nabbr[title] {\n  border-bottom: 0;\n  text-decoration: underline;\n  text-decoration: underline dotted;\n  text-decoration-skip-ink: none;\n  cursor: help;\n}\n\naddress {\n  margin-bottom: 1rem;\n  font-style: normal;\n  line-height: inherit;\n}\n\ndl,\nol,\nul {\n  margin-top: 0;\n  margin-bottom: 1rem;\n}\n\nol ol,\nol ul,\nul ol,\nul ul {\n  margin-bottom: 0;\n}\n\ndt {\n  font-weight: 700;\n}\n\ndd {\n  margin-bottom: 0.5rem;\n  margin-left: 0;\n}\n\nblockquote {\n  margin: 0 0 1rem;\n}\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\nsmall {\n  font-size: 80%;\n}\n\nsub,\nsup {\n  position: relative;\n  vertical-align: baseline;\n  font-size: 75%;\n  line-height: 0;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\na {\n  text-decoration: none;\n  color: #00008f;\n  background-color: transparent;\n}\n\na:hover {\n  text-decoration: underline;\n  color: #000043;\n}\n\na:not([href], [tabindex]) {\n  text-decoration: none;\n  color: inherit;\n}\n\na:not([href], [tabindex]):focus,\na:not([href], [tabindex]):hover {\n  text-decoration: none;\n  color: inherit;\n}\n\na:not([href], [tabindex]):focus {\n  outline: 0;\n}\n\ncode,\nkbd,\npre,\nsamp {\n  font-family: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n    \"Courier New\", monospace;\n  font-size: 1em;\n}\n\npre {\n  margin-top: 0;\n  margin-bottom: 1rem;\n  overflow: auto;\n}\n\nfigure {\n  margin: 0 0 1rem;\n}\n\nimg {\n  border-style: none;\n  vertical-align: middle;\n}\n\nsvg {\n  vertical-align: middle;\n  overflow: hidden;\n}\n\ntable {\n  border-collapse: collapse;\n}\n\ncaption {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  caption-side: bottom;\n  text-align: left;\n  color: #6c757d;\n}\n\nth {\n  text-align: inherit;\n}\n\nbutton {\n  border-radius: 0;\n}\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  margin: 0;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\nbutton,\ninput {\n  overflow: visible;\n}\n\nbutton,\nselect {\n  text-transform: none;\n}\n\nselect {\n  word-wrap: normal;\n}\n\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"],\nbutton {\n  appearance: button;\n}\n\nbutton:focus {\n  outline: 1px dotted;\n  outline: 5px auto -webkit-focus-ring-color;\n}\n\n[type=\"button\"]:not(:disabled),\n[type=\"reset\"]:not(:disabled),\n[type=\"submit\"]:not(:disabled),\nbutton:not(:disabled) {\n  cursor: pointer;\n}\n\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner,\nbutton::-moz-focus-inner {\n  padding: 0;\n  border-style: none;\n}\n\ninput[type=\"checkbox\"],\ninput[type=\"radio\"] {\n  box-sizing: border-box;\n  padding: 0;\n}\n\ninput[type=\"date\"],\ninput[type=\"datetime-local\"],\ninput[type=\"month\"],\ninput[type=\"time\"] {\n  appearance: listbox;\n}\n\ntextarea {\n  overflow: auto;\n  resize: vertical;\n}\n\nfieldset {\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n\nlegend {\n  display: block;\n  width: 100%;\n  max-width: 100%;\n  margin-bottom: 0.5rem;\n  padding: 0;\n  font-size: 1.5rem;\n  line-height: inherit;\n  white-space: normal;\n  color: inherit;\n}\n\nprogress {\n  vertical-align: baseline;\n}\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n  height: auto;\n}\n\n[type=\"search\"] {\n  outline-offset: -2px;\n  appearance: none;\n}\n\n[type=\"search\"]::-webkit-search-decoration {\n  appearance: none;\n}\n\n::-webkit-file-upload-button {\n  font: inherit;\n  appearance: button;\n}\n\noutput {\n  display: inline-block;\n}\n\nsummary {\n  display: list-item;\n  cursor: pointer;\n}\n\ntemplate {\n  display: none;\n}\n\n[hidden] {\n  display: none !important;\n}\n","@use \"../common/reboot\";\n@use \"../common/common\" as common;\n\n.af-card {\n  padding: 1rem;\n  border: 1px solid common.$color-gray-300;\n  border-radius: 0.5rem;\n  align-self: start;\n  font-family: common.$font-family-base;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.25rem;\n  background-color: common.$color-white;\n  box-shadow: 0 0.25rem 0.5rem 0 hsla(230deg, 60%, 16%, 8%);\n\n  > *:last-child {\n    margin-block-end: 0;\n  }\n\n  &:focus-visible {\n    border: 2px solid common.$color-focus;\n    outline: none;\n  }\n\n  &--elevation-2:not(:focus) {\n    box-shadow: 0 0.25rem 0.5rem 0 hsla(230deg, 60%, 16%, 16%);\n  }\n\n  &__title {\n    font-size: 1.125rem;\n    font-weight: 600;\n    line-height: 1.4rem;\n    color: common.$color-axa;\n  }\n\n  &--large {\n    width: 100%;\n  }\n\n  &--accordion {\n    padding: 0;\n    box-shadow: none;\n  }\n}\n\nbutton.af-card {\n  text-align: initial;\n  cursor: pointer;\n\n  &:active {\n    box-shadow: none;\n  }\n\n  &:focus {\n    outline: none;\n  }\n}\n","@use \"../common/reboot\";\n@use \"../common/common\" as common;\n\n.af-card {\n  padding: 1rem;\n  border: 1px solid common.$color-gray-300;\n  border-radius: 0.5rem;\n  align-self: start;\n  font-family: common.$font-family-base;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.25rem;\n  background-color: common.$color-white;\n  box-shadow: 0 0.25rem 0.5rem 0 hsla(230deg, 60%, 16%, 8%);\n\n  > *:last-child {\n    margin-block-end: 0;\n  }\n\n  &:focus-visible {\n    border: 2px solid common.$color-focus;\n    outline: none;\n  }\n\n  &--elevation-2:not(:focus) {\n    box-shadow: 0 0.25rem 0.5rem 0 hsla(230deg, 60%, 16%, 16%);\n  }\n\n  &__title {\n    font-size: 1.125rem;\n    font-weight: 600;\n    line-height: 1.4rem;\n    color: common.$color-axa;\n  }\n\n  &--large {\n    width: 100%;\n  }\n\n  &--accordion {\n    padding: 0;\n    box-shadow: none;\n  }\n}\n\nbutton.af-card {\n  text-align: initial;\n  cursor: pointer;\n\n  &:active {\n    box-shadow: none;\n  }\n\n  &:focus {\n    outline: none;\n  }\n}\n","@import \"./mixins\";\n\n$font-family-sans-serif: \"Source Sans Pro\", arial, sans-serif !default;\n$font-family-serif: georgia, times, \"Times New Roman\", serif !default;\n$font-family-base: $font-family-sans-serif !default;\n$font-family-publico-bold: \"Publico Headline Bold\" !default;\n$font-family-publico: \"Publico Headline\" !default;\n// colors\n\n$color-axa: #00008f !default;\n$color-white: #fff !default;\n$color-black: #000 !default;\n$color-red: #ff1721 !default;\n$color-gray: #5f5f5f !default;\n$color-red-700: #c91432 !default;\n$color-blue-1: #000072 !default;\n$color-blue-2: #f8f8ff !default;\n$color-blue-3: #36f !default;\n$color-btn-light: #3333a5 !default;\n$color-btn-business: #c94e14 !default;\n$color-btn-business-dark: #a8391c !default;\n$color-btn-business-light: #df7e65 !default;\n$color-btn-disabled-text: #999 !default;\n$color-btn-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/Card/Card.scss

@@ -0,0 +1,57 @@
+@use "../common/reboot";
+@use "../common/common" as common;
+
+.af-card {
+  padding: 1rem;
+  border: 1px solid common.$color-gray-300;
+  border-radius: 0.5rem;
+  align-self: start;
+  font-family: common.$font-family-base;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  background-color: common.$color-white;
+  box-shadow: 0 0.25rem 0.5rem 0 hsla(230deg, 60%, 16%, 8%);
+
+  > *:last-child {
+    margin-block-end: 0;
+  }
+
+  &:focus-visible {
+    border: 2px solid common.$color-focus;
+    outline: none;
+  }
+
+  &--elevation-2:not(:focus) {
+    box-shadow: 0 0.25rem 0.5rem 0 hsla(230deg, 60%, 16%, 16%);
+  }
+
+  &__title {
+    font-size: 1.125rem;
+    font-weight: 600;
+    line-height: 1.4rem;
+    color: common.$color-axa;
+  }
+
+  &--large {
+    width: 100%;
+  }
+
+  &--accordion {
+    padding: 0;
+    box-shadow: none;
+  }
+}
+
+button.af-card {
+  text-align: initial;
+  cursor: pointer;
+
+  &:active {
+    box-shadow: none;
+  }
+
+  &:focus {
+    outline: none;
+  }
+}

package/dist/Form/Checkbox/Checkbox.css

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

package/dist/Form/Checkbox/Checkbox.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Form/Checkbox/Checkbox.scss%23sass","../../../src/Form/Checkbox/Checkbox.scss","../../../src/common/common.scss"],"names":[],"mappings":"AAEA,aACE,4CCDF,CDGE,eACE,qBCDJ,CDIE,sBAEE,kBAAA,CADA,YAAA,CAGA,QAAA,CADA,sBCDJ,CDII,0BAGE,aAAA,CADA,cAAA,CADA,aAAA,CAGA,YCFN,CDKI,wDACE,YAAA,CACA,qBAAA,CACA,UAAA,CACA,mBCHN,CDKM,yEAEE,UAAA,CADA,kBCFR,CDMM,+EACE,aCJR,CDSE,sDACE,qBAAA,CACA,SCPJ,CDUE,gCACE,cAAA,CACA,mBCRJ,CDWE,iCAGE,kBAAA,CAIA,aAAA,CANA,YAAA,CAIA,4CAAA,CADA,SAAA,CAEA,mBAAA,CAJA,kBCJJ,CDWI,qCACE,aAAA,CACA,YCTN,CDaE,wCACE,eCXJ,CDcE,mBAIE,kBAAA,CADA,iBAAA,CAGA,cAAA,CALA,YAAA,CAIA,UAAA,CAHA,QCRJ,CDeE,0BAGE,kBAAA,CACA,kDAAA,CAHA,aAAA,CACA,YAAA,CAIA,0BCdJ,CDiBE,sCAKE,qBAAA,CAEA,KAAA,CAJA,WAAA,CAGA,0BAAA,CAFA,YAAA,CAHA,iBAAA,CAOA,iBAAA,CANA,WCTJ,CDiBI,0DAGE,SAAA,CAFA,iBAAA,CACA,QCdN,CDmBE,wCAEE,kBAAA,CACA,SAAA,CAFA,iBCfJ,CDmBI,4DAEE,kBAAA,CADA,YAAA,CAEA,UCjBN,CDmBM,sKAIE,kBAAA,CADA,cAAA,CADA,aChBR,CDqBM,kFACE,YCnBR,CDsBM,oFACE,aAAA,CACA,YCpBR,CD0BI,8KAEE,aAAA,CACA,YCzBN,CD8BI,2EAEE,aAAA,CADA,aAAA,CAEA,YC5BN,CD+BI,6EACE,YC7BN,CDiCE,4DACE,wBAAA,CACA,kCC/BJ,CDkCE,sDACE,cChCJ,CDkCI,0OAGE,UAAA,CACA,SClCN,CDsCE,6DAEE,wBAAA,CACA,kDAAA,CAFA,UAAA,CAIA,0BCrCJ,CDwCE,uEACE,0BAAA,CAEA,kDCvCJ,CD2CI,kMAEE,sBAAA,CACA,kBC1CN,CD+CI,0FACE,aEtLM,CFuLN,YC7CN,CDiDE,yEACE,0BAAA,CAEA,kDChDJ,CDmDE,oBASE,aEhLa,CFwKb,YAAA,CAEA,qBAAA,CAEA,4CE7MqB,CF8MrB,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,mBAAA,CANA,eC1CJ,CDmDI,gCACE,kBCjDN","file":"Checkbox.css","sourcesContent":["@use \"../../common/common\" as common;\n\n.af-checkbox {\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        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    line-height: 1.25rem;\n    color: common.$color-red-700;\n\n    & > svg {\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: center;\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  &-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-checkbox__icons {\n      position: absolute;\n      top: 1rem;\n      left: 1rem;\n    }\n  }\n\n  & label input[type=\"checkbox\"] {\n    position: absolute;\n    margin-right: 0.5rem;\n    opacity: 0;\n\n    & ~ .af-checkbox__icons {\n      display: flex;\n      align-items: center;\n      gap: 0.75rem;\n\n      & .af-checkbox__checked,\n      & .af-checkbox__unchecked {\n        width: 1.75rem;\n        height: 1.75rem;\n        align-items: center;\n      }\n\n      & .af-checkbox__checked {\n        display: none;\n      }\n\n      & .af-checkbox__unchecked {\n        color: common.$color-gray-700;\n        fill: common.$color-gray-700;\n      }\n    }\n  }\n\n  & label:has(input[type=\"checkbox\"][aria-invalid=\"true\"]) {\n    & .af-checkbox__checked,\n    & .af-checkbox__unchecked {\n      color: common.$color-red-700;\n      fill: common.$color-red-700;\n    }\n  }\n\n  & label:has(input[type=\"checkbox\"]:checked) {\n    & .af-checkbox__checked {\n      display: block;\n      color: common.$color-axa;\n      fill: common.$color-axa;\n    }\n\n    & .af-checkbox__unchecked {\n      display: none;\n    }\n  }\n\n  &-select label:has(input[type=\"checkbox\"]:checked) {\n    background-color: common.$color-blue-2;\n    box-shadow: 0 0 0 2px common.$color-axa inset;\n  }\n\n  & label:has(input[type=\"checkbox\"]:disabled) {\n    cursor: default;\n\n    & .af-checkbox__content > svg,\n    & .af-checkbox__checked,\n    & .af-checkbox__unchecked {\n      color: common.$color-btn-disabled-text;\n      fill: common.$color-btn-disabled-text;\n    }\n  }\n\n  &-select label:has(input[type=\"checkbox\"]:disabled) {\n    color: common.$color-btn-disabled-text;\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  &-select label:has(input[type=\"checkbox\"][aria-invalid=\"true\"]) {\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=\"checkbox\"]:focus-visible ~ .af-checkbox__icons {\n    & .af-checkbox__unchecked,\n    & .af-checkbox__checked {\n      outline: 2px solid common.$color-blue-3;\n      outline-offset: 3px;\n    }\n  }\n\n  & label:hover:not(:has(input[type=\"checkbox\"]:disabled)) {\n    & .af-checkbox__unchecked {\n      color: common.$color-axa;\n      fill: common.$color-axa;\n    }\n  }\n\n  &-select label:hover:not(:has(input[type=\"checkbox\"]: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-checkbox {\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        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    line-height: 1.25rem;\n    color: common.$color-red-700;\n\n    & > svg {\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: center;\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  &-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-checkbox__icons {\n      position: absolute;\n      top: 1rem;\n      left: 1rem;\n    }\n  }\n\n  & label input[type=\"checkbox\"] {\n    position: absolute;\n    margin-right: 0.5rem;\n    opacity: 0;\n\n    & ~ .af-checkbox__icons {\n      display: flex;\n      align-items: center;\n      gap: 0.75rem;\n\n      & .af-checkbox__checked,\n      & .af-checkbox__unchecked {\n        width: 1.75rem;\n        height: 1.75rem;\n        align-items: center;\n      }\n\n      & .af-checkbox__checked {\n        display: none;\n      }\n\n      & .af-checkbox__unchecked {\n        color: common.$color-gray-700;\n        fill: common.$color-gray-700;\n      }\n    }\n  }\n\n  & label:has(input[type=\"checkbox\"][aria-invalid=\"true\"]) {\n    & .af-checkbox__checked,\n    & .af-checkbox__unchecked {\n      color: common.$color-red-700;\n      fill: common.$color-red-700;\n    }\n  }\n\n  & label:has(input[type=\"checkbox\"]:checked) {\n    & .af-checkbox__checked {\n      display: block;\n      color: common.$color-axa;\n      fill: common.$color-axa;\n    }\n\n    & .af-checkbox__unchecked {\n      display: none;\n    }\n  }\n\n  &-select label:has(input[type=\"checkbox\"]:checked) {\n    background-color: common.$color-blue-2;\n    box-shadow: 0 0 0 2px common.$color-axa inset;\n  }\n\n  & label:has(input[type=\"checkbox\"]:disabled) {\n    cursor: default;\n\n    & .af-checkbox__content > svg,\n    & .af-checkbox__checked,\n    & .af-checkbox__unchecked {\n      color: common.$color-btn-disabled-text;\n      fill: common.$color-btn-disabled-text;\n    }\n  }\n\n  &-select label:has(input[type=\"checkbox\"]:disabled) {\n    color: common.$color-btn-disabled-text;\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  &-select label:has(input[type=\"checkbox\"][aria-invalid=\"true\"]) {\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=\"checkbox\"]:focus-visible ~ .af-checkbox__icons {\n    & .af-checkbox__unchecked,\n    & .af-checkbox__checked {\n      outline: 2px solid common.$color-blue-3;\n      outline-offset: 3px;\n    }\n  }\n\n  & label:hover:not(:has(input[type=\"checkbox\"]:disabled)) {\n    & .af-checkbox__unchecked {\n      color: common.$color-axa;\n      fill: common.$color-axa;\n    }\n  }\n\n  &-select label:hover:not(:has(input[type=\"checkbox\"]: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","@import \"./mixins\";\n\n$font-family-sans-serif: \"Source Sans Pro\", arial, sans-serif !default;\n$font-family-serif: georgia, times, \"Times New Roman\", serif !default;\n$font-family-base: $font-family-sans-serif !default;\n$font-family-publico-bold: \"Publico Headline Bold\" !default;\n$font-family-publico: \"Publico Headline\" !default;\n// colors\n\n$color-axa: #00008f !default;\n$color-white: #fff !default;\n$color-black: #000 !default;\n$color-red: #ff1721 !default;\n$color-gray: #5f5f5f !default;\n$color-red-700: #c91432 !default;\n$color-blue-1: #000072 !default;\n$color-blue-2: #f8f8ff !default;\n$color-blue-3: #36f !default;\n$color-btn-light: #3333a5 !default;\n$color-btn-business: #c94e14 !default;\n$color-btn-business-dark: #a8391c !default;\n$color-btn-business-light: #df7e65 !default;\n$color-btn-disabled-text: #999 !default;\n$color-btn-disabled-border: #e5e5e5 !default;\n$color-btn-error-text: #a11028 !default;\n$color-btn-error-bg: #fff3f5 !default;\n$color-btn-tertiary-bg: #eef !default;\n$color-btn-tertiary-bg-darker: #e4e4ff !default;\n$color-btn-tertiary-bg-lighter: #f8f8ff !default;\n$color-oceanBlue: #4976ba !default;\n$color-gray-1: #ccc !default;\n$color-gray-200: #f3f3f3;\n$color-gray-300: #e9ecf2;\n$color-gray-400: #e5e5e5;\n$color-gray-500: #999;\n$color-gray-700: #5f5f5f;\n$color-gray-900: #333 !default;\n$color-green-600: #118635 !default;\n$color-border: #f3f3f3 !default;\n$color-focus: #36f !default;\n\n// others\n\n$default-border-radius: 4px !default;\n\n$transition-duration: 0.2s !default;\n\n// spacing\n\n$sizing-u0: 0 !default;\n$sizing-u05: 0.4rem !default;\n$sizing-u1: 0.8rem !default;\n$sizing-u2: 1.6rem !default;\n$sizing-u3: 2.4rem !default;\n$sizing-u4: 3.2rem !default;\n$sizing-u5: 4rem !default;\n$sizing-u6: 4.8rem !default;\n$sizing-u7: 5.6rem !default;\n$sizing-u8: 6.4rem !default;\n$sizing-u9: 7.2rem !default;\n$sizing-u10: 8rem !default;\n$spacing-u0: 0 !default;\n$spacing-u05: 0.4rem !default;\n$spacing-u1: 0.8rem !default;\n$spacing-u2: 1.6rem !default;\n$spacing-u3: 2.4rem !default;\n$spacing-u4: 3.2rem !default;\n$spacing-u5: 4rem !default;\n$spacing-u6: 4.8rem !default;\n$spacing-u7: 5.6rem !default;\n$spacing-u8: 6.4rem !default;\n$spacing-u9: 7.2rem !default;\n$spacing-u10: 8rem !default;\n$spacing-u11: 8.8rem !default;\n$spacing-u12: 9.6rem !default;\n$spacing-u13: 10.4rem !default;\n$spacing-u14: 11.2rem !default;\n$spacing-u15: 12rem !default;\n$spacing-u16: 12.8rem !default;\n$spacing-u17: 13.6rem !default;\n$spacing-u18: 14.4rem !default;\n$spacing-u19: 15.2rem !default;\n$spacing-u20: 16rem !default;\n$screen-size-668: s !default;\n$screen-size-1024: m !default;\n$screen-size-1200: oldl !default;\n$screen-size-1280: l !default;\n$screen-size-1540: oldxl !default;\n$screen-size-1600: xl !default;\n$screen-size-s: 668px !default;\n$screen-size-m: 1024px !default;\n$screen-size-l: 1280px !default;\n$screen-size-xl: 1600px !default;\n$screen-size-oldl: 1200px !default;\n$screen-size-oldxl: 1540px !default;\n\n$error-custom-border: #d18e8e !default;\n$error-custom-bg: #ffbfbf !default;\n\n$color-alertDanger-colorBorder: #c8b282 !default;\n$color-alertDanger-bgColor: #f1d596 !default;\n\n// breakpoints\n\n$breakpoint-xs: 0 !default;\n$breakpoint-sm: 667px !default;\n$breakpoint-md: 1023px !default;\n$breakpoint-lg: 1279px !default;\n$breakpoint-xl: 1599px !default;\n"]}

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