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

package/dist/Alert/Alert.css

@@ -1 +1 @@
-.af-alert{background-color:#fff;border-radius:12px;display:flex;flex:1 1;font-family:var(--font-family-base);padding:1rem}.af-alert .af-alert__icon{aspect-ratio:1;flex-shrink:0;margin-right:1rem}.af-alert--information{border:1px solid var(--color-axa)}.af-alert--information .af-alert__icon{color:var(--color-axa);transform:rotate(180deg);fill:var(--color-axa)}.af-alert--information .af-alert__title{color:var(--color-axa)}.af-alert--error{border:1px solid var(--color-red-700)}.af-alert--error .af-alert__icon{color:var(--color-red-700);fill:var(--color-red-700)}.af-alert--error .af-alert__title{color:var(--color-red-700)}.af-alert--neutral{border:1px solid var(--color-gray)}.af-alert--neutral .af-alert__icon{color:var(--color-gray);fill:var(--color-gray)}.af-alert--neutral .af-alert__title{color:var(--color-gray)}.af-alert--warning{border:1px solid var(--color-btn-business)}.af-alert--warning .af-alert__icon{color:var(--color-btn-business);fill:var(--color-btn-business)}.af-alert--warning .af-alert__title{color:var(--color-btn-business)}.af-alert--validation{border:1px solid var(--color-green-600)}.af-alert--validation .af-alert__icon{color:var(--color-green-600);fill:var(--color-green-600)}.af-alert--validation .af-alert__title{color:var(--color-green-600)}.af-alert .af-alert-client__content{width:100%}.af-alert .af-alert-client__content .af-alert__action{display:flex;justify-content:end;text-align:right}.af-alert .af-alert-client__content .af-alert__title{font-weight:600;line-height:1.5rem;padding-bottom:.25rem}.af-alert *{font-size:1.125rem;font-weight:400;margin:0}
+.af-alert{background-color:#fff;border-radius:12px;display:flex;flex:1 1;font-family:var(--font-family-base);padding:1rem}.af-alert .af-alert__icon{aspect-ratio:1;flex-shrink:0;margin-right:1rem}.af-alert--information{border:1px solid var(--color-axa)}.af-alert--information .af-alert__icon{color:var(--color-axa);transform:rotate(180deg);fill:var(--color-axa)}.af-alert--information .af-alert__title{color:var(--color-axa)}.af-alert--error{border:1px solid var(--color-red-700)}.af-alert--error .af-alert__icon{color:var(--color-red-700);fill:var(--color-red-700)}.af-alert--error .af-alert__title{color:var(--color-red-700)}.af-alert--neutral{border:1px solid var(--color-gray)}.af-alert--neutral .af-alert__icon{color:var(--color-gray);fill:var(--color-gray)}.af-alert--neutral .af-alert__title{color:var(--color-gray)}.af-alert--warning{border:1px solid var(--color-btn-business)}.af-alert--warning .af-alert__icon{color:var(--color-btn-business);fill:var(--color-btn-business)}.af-alert--warning .af-alert__title{color:var(--color-btn-business)}.af-alert--validation{border:1px solid var(--color-green-600)}.af-alert--validation .af-alert__icon{color:var(--color-green-600);fill:var(--color-green-600)}.af-alert--validation .af-alert__title{color:var(--color-green-600)}.af-alert .af-alert-client__content{font-size:1.125rem;font-weight:400;line-height:1.40625rem;width:100%}.af-alert .af-alert-client__content .af-alert__action{display:flex;justify-content:end;text-align:right}.af-alert .af-alert-client__content .af-alert__title{font-weight:600;line-height:1.5rem;margin:0;padding-bottom:.25rem}

package/dist/Alert/Alert.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Alert/Alert.scss%23sass","../../src/Alert/Alert.scss"],"names":[],"mappings":"AAAA,UAME,qBAAA,CAHA,kBAAA,CAFA,YAAA,CAGA,QAAA,CACA,mCAAA,CAHA,YCKF,CDCE,0BACE,cAAA,CAEA,aAAA,CADA,iBCEJ,CDEE,uBACE,iCCAJ,CDEI,uCACE,sBAAA,CACA,wBAAA,CACA,qBCAN,CDGI,wCACE,sBCDN,CDKE,iBACE,qCCHJ,CDKI,iCACE,0BAAA,CACA,yBCHN,CDMI,kCACE,0BCJN,CDQE,mBACE,kCCNJ,CDQI,mCACE,uBAAA,CACA,sBCNN,CDSI,oCACE,uBCPN,CDWE,mBACE,0CCTJ,CDWI,mCACE,+BAAA,CACA,8BCTN,CDYI,oCACE,+BCVN,CDcE,sBACE,uCCZJ,CDcI,sCACE,4BAAA,CACA,2BCZN,CDeI,uCACE,4BCbN,CDiBE,oCACE,UCfJ,CDiBI,sDACE,YAAA,CACA,mBAAA,CACA,gBCfN,CDkBI,qDAEE,eAAA,CACA,kBAAA,CAFA,qBCdN,CDoBE,YAEE,kBAAA,CACA,eAAA,CAFA,QChBJ","file":"Alert.css","sourcesContent":[".af-alert {\n  display: flex;\n  padding: 1rem;\n  border-radius: 12px;\n  flex: 1 1 0;\n  font-family: var(--font-family-base);\n  background-color: white;\n\n  .af-alert__icon {\n    aspect-ratio: 1;\n    margin-right: 1rem;\n    flex-shrink: 0;\n  }\n\n  &--information {\n    border: 1px solid var(--color-axa);\n\n    .af-alert__icon {\n      color: var(--color-axa);\n      transform: rotate(180deg);\n      fill: var(--color-axa);\n    }\n\n    .af-alert__title {\n      color: var(--color-axa);\n    }\n  }\n\n  &--error {\n    border: 1px solid var(--color-red-700);\n\n    .af-alert__icon {\n      color: var(--color-red-700);\n      fill: var(--color-red-700);\n    }\n\n    .af-alert__title {\n      color: var(--color-red-700);\n    }\n  }\n\n  &--neutral {\n    border: 1px solid var(--color-gray);\n\n    .af-alert__icon {\n      color: var(--color-gray);\n      fill: var(--color-gray);\n    }\n\n    .af-alert__title {\n      color: var(--color-gray);\n    }\n  }\n\n  &--warning {\n    border: 1px solid var(--color-btn-business);\n\n    .af-alert__icon {\n      color: var(--color-btn-business);\n      fill: var(--color-btn-business);\n    }\n\n    .af-alert__title {\n      color: var(--color-btn-business);\n    }\n  }\n\n  &--validation {\n    border: 1px solid var(--color-green-600);\n\n    .af-alert__icon {\n      color: var(--color-green-600);\n      fill: var(--color-green-600);\n    }\n\n    .af-alert__title {\n      color: var(--color-green-600);\n    }\n  }\n\n  .af-alert-client__content {\n    width: 100%;\n\n    .af-alert__action {\n      display: flex;\n      justify-content: end;\n      text-align: right;\n    }\n\n    .af-alert__title {\n      padding-bottom: 0.25rem;\n      font-weight: 600;\n      line-height: 1.5rem;\n    }\n  }\n\n  * {\n    margin: 0;\n    font-size: 1.125rem;\n    font-weight: 400;\n  }\n}\n",".af-alert {\n  display: flex;\n  padding: 1rem;\n  border-radius: 12px;\n  flex: 1 1 0;\n  font-family: var(--font-family-base);\n  background-color: white;\n\n  .af-alert__icon {\n    aspect-ratio: 1;\n    margin-right: 1rem;\n    flex-shrink: 0;\n  }\n\n  &--information {\n    border: 1px solid var(--color-axa);\n\n    .af-alert__icon {\n      color: var(--color-axa);\n      transform: rotate(180deg);\n      fill: var(--color-axa);\n    }\n\n    .af-alert__title {\n      color: var(--color-axa);\n    }\n  }\n\n  &--error {\n    border: 1px solid var(--color-red-700);\n\n    .af-alert__icon {\n      color: var(--color-red-700);\n      fill: var(--color-red-700);\n    }\n\n    .af-alert__title {\n      color: var(--color-red-700);\n    }\n  }\n\n  &--neutral {\n    border: 1px solid var(--color-gray);\n\n    .af-alert__icon {\n      color: var(--color-gray);\n      fill: var(--color-gray);\n    }\n\n    .af-alert__title {\n      color: var(--color-gray);\n    }\n  }\n\n  &--warning {\n    border: 1px solid var(--color-btn-business);\n\n    .af-alert__icon {\n      color: var(--color-btn-business);\n      fill: var(--color-btn-business);\n    }\n\n    .af-alert__title {\n      color: var(--color-btn-business);\n    }\n  }\n\n  &--validation {\n    border: 1px solid var(--color-green-600);\n\n    .af-alert__icon {\n      color: var(--color-green-600);\n      fill: var(--color-green-600);\n    }\n\n    .af-alert__title {\n      color: var(--color-green-600);\n    }\n  }\n\n  .af-alert-client__content {\n    width: 100%;\n\n    .af-alert__action {\n      display: flex;\n      justify-content: end;\n      text-align: right;\n    }\n\n    .af-alert__title {\n      padding-bottom: 0.25rem;\n      font-weight: 600;\n      line-height: 1.5rem;\n    }\n  }\n\n  * {\n    margin: 0;\n    font-size: 1.125rem;\n    font-weight: 400;\n  }\n}\n"]}
+{"version":3,"sources":["../../src/Alert/Alert.scss%23sass","../../src/Alert/Alert.scss"],"names":[],"mappings":"AAEA,UAME,qBAAA,CAHA,kBAAA,CAFA,YAAA,CAGA,QAAA,CACA,mCAAA,CCLF,YAKA,CDGE,0BACE,cAAA,CAEA,aAAA,CADA,iBCAJ,CDIE,uBACE,iCCFJ,CDII,uCACE,sBAAA,CACA,wBAAA,CACA,qBCFN,CDKI,wCACE,sBCHN,CDOE,iBACE,qCCLJ,CDOI,iCACE,0BAAA,CACA,yBCLN,CDQI,kCACE,0BCNN,CDUE,mBACE,kCCRJ,CDUI,mCACE,uBAAA,CACA,sBCRN,CDWI,oCACE,uBCTN,CDaE,mBACE,0CCXJ,CDaI,mCACE,+BAAA,CACA,8BCXN,CDcI,oCACE,+BCZN,CDgBE,sBACE,uCCdJ,CDgBI,sCACE,4BAAA,CACA,2BCdN,CDiBI,uCACE,4BCfN,CDmBE,oCAEE,kBAAA,CACA,eAAA,CACA,sBAAA,CAHA,UCdJ,CDmBI,sDACE,YAAA,CACA,mBAAA,CACA,gBCjBN,CDoBI,qDAGE,eAAA,CACA,kBAAA,CAHA,QAAA,CACA,qBChBN","file":"Alert.css","sourcesContent":["@use \"../common/common.scss\" as common;\n\n.af-alert {\n  display: flex;\n  padding: 1rem;\n  border-radius: 12px;\n  flex: 1 1 0;\n  font-family: var(--font-family-base);\n  background-color: white;\n\n  .af-alert__icon {\n    aspect-ratio: 1;\n    margin-right: 1rem;\n    flex-shrink: 0;\n  }\n\n  &--information {\n    border: 1px solid var(--color-axa);\n\n    .af-alert__icon {\n      color: var(--color-axa);\n      transform: rotate(180deg);\n      fill: var(--color-axa);\n    }\n\n    .af-alert__title {\n      color: var(--color-axa);\n    }\n  }\n\n  &--error {\n    border: 1px solid var(--color-red-700);\n\n    .af-alert__icon {\n      color: var(--color-red-700);\n      fill: var(--color-red-700);\n    }\n\n    .af-alert__title {\n      color: var(--color-red-700);\n    }\n  }\n\n  &--neutral {\n    border: 1px solid var(--color-gray);\n\n    .af-alert__icon {\n      color: var(--color-gray);\n      fill: var(--color-gray);\n    }\n\n    .af-alert__title {\n      color: var(--color-gray);\n    }\n  }\n\n  &--warning {\n    border: 1px solid var(--color-btn-business);\n\n    .af-alert__icon {\n      color: var(--color-btn-business);\n      fill: var(--color-btn-business);\n    }\n\n    .af-alert__title {\n      color: var(--color-btn-business);\n    }\n  }\n\n  &--validation {\n    border: 1px solid var(--color-green-600);\n\n    .af-alert__icon {\n      color: var(--color-green-600);\n      fill: var(--color-green-600);\n    }\n\n    .af-alert__title {\n      color: var(--color-green-600);\n    }\n  }\n\n  .af-alert-client__content {\n    width: 100%;\n    font-size: common.rem(18);\n    font-weight: 400;\n    line-height: common.rem(22.5);\n\n    .af-alert__action {\n      display: flex;\n      justify-content: end;\n      text-align: right;\n    }\n\n    .af-alert__title {\n      margin: 0;\n      padding-bottom: 0.25rem;\n      font-weight: 600;\n      line-height: 1.5rem;\n    }\n  }\n}\n","@use \"../common/common.scss\" as common;\n\n.af-alert {\n  display: flex;\n  padding: 1rem;\n  border-radius: 12px;\n  flex: 1 1 0;\n  font-family: var(--font-family-base);\n  background-color: white;\n\n  .af-alert__icon {\n    aspect-ratio: 1;\n    margin-right: 1rem;\n    flex-shrink: 0;\n  }\n\n  &--information {\n    border: 1px solid var(--color-axa);\n\n    .af-alert__icon {\n      color: var(--color-axa);\n      transform: rotate(180deg);\n      fill: var(--color-axa);\n    }\n\n    .af-alert__title {\n      color: var(--color-axa);\n    }\n  }\n\n  &--error {\n    border: 1px solid var(--color-red-700);\n\n    .af-alert__icon {\n      color: var(--color-red-700);\n      fill: var(--color-red-700);\n    }\n\n    .af-alert__title {\n      color: var(--color-red-700);\n    }\n  }\n\n  &--neutral {\n    border: 1px solid var(--color-gray);\n\n    .af-alert__icon {\n      color: var(--color-gray);\n      fill: var(--color-gray);\n    }\n\n    .af-alert__title {\n      color: var(--color-gray);\n    }\n  }\n\n  &--warning {\n    border: 1px solid var(--color-btn-business);\n\n    .af-alert__icon {\n      color: var(--color-btn-business);\n      fill: var(--color-btn-business);\n    }\n\n    .af-alert__title {\n      color: var(--color-btn-business);\n    }\n  }\n\n  &--validation {\n    border: 1px solid var(--color-green-600);\n\n    .af-alert__icon {\n      color: var(--color-green-600);\n      fill: var(--color-green-600);\n    }\n\n    .af-alert__title {\n      color: var(--color-green-600);\n    }\n  }\n\n  .af-alert-client__content {\n    width: 100%;\n    font-size: common.rem(18);\n    font-weight: 400;\n    line-height: common.rem(22.5);\n\n    .af-alert__action {\n      display: flex;\n      justify-content: end;\n      text-align: right;\n    }\n\n    .af-alert__title {\n      margin: 0;\n      padding-bottom: 0.25rem;\n      font-weight: 600;\n      line-height: 1.5rem;\n    }\n  }\n}\n"]}

package/dist/Alert/Alert.scss

@@ -1,3 +1,5 @@
+@use "../common/common.scss" as common;
+
 .af-alert {
   display: flex;
   padding: 1rem;
@@ -80,6 +82,9 @@
 
   .af-alert-client__content {
     width: 100%;
+    font-size: common.rem(18);
+    font-weight: 400;
+    line-height: common.rem(22.5);
 
     .af-alert__action {
       display: flex;
@@ -88,15 +93,10 @@
     }
 
     .af-alert__title {
+      margin: 0;
       padding-bottom: 0.25rem;
       font-weight: 600;
       line-height: 1.5rem;
     }
   }
-
-  * {
-    margin: 0;
-    font-size: 1.125rem;
-    font-weight: 400;
-  }
 }

package/dist/Card/Card.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/common/reboot.scss","../../src/Card/Card.scss","../../src/Card/Card.scss%23sass"],"names":[],"mappings":"AAAA,iBAGE,qBCCF,CDEA,KACE,sBAAA,CACA,gBAAA,CACA,6BAAA,CAAA,0BAAA,CAAA,qBAAA,CACA,uCCCF,CDEA,sEAUE,aCCF,CDEA,KAQE,qBAAA,CADA,UAAA,CALA,4CAAA,CACA,cAAA,CACA,eAAA,CACA,eAAA,CAJA,QAAA,CAKA,eCGF,CDEA,sBACE,mBCCF,CDEA,GACE,kBAAA,CACA,QAAA,CACA,gBCCF,CDEA,kBAOE,mBAAA,CADA,YCEF,CDEA,EAEE,kBAAA,CADA,YCEF,CDEA,sCAEE,eAAA,CAIA,WAAA,CAHA,yBAAA,CACA,wCAAA,CAAA,gCAAA,CACA,qCAAA,CAAA,6BCEF,CDEA,QAEE,iBAAA,CACA,mBCCF,CDEA,iBALE,kBCUF,CDLA,SAGE,YCEF,CDEA,wBAIE,eCCF,CDEA,GACE,eCCF,CDEA,GACE,mBAAA,CACA,aCCF,CDEA,WACE,eCCF,CDEA,SAEE,kBCCF,CDEA,MACE,aCCF,CDEA,QAIE,aAAA,CACA,aAAA,CAHA,iBAAA,CACA,sBCGF,CDEA,IACE,aCCF,CDEA,IACE,SCCF,CDEA,EAGE,wBAAA,CADA,aAAA,CADA,oBCGF,CDEA,QAEE,aAAA,CADA,yBCEF,CDOA,uFAGE,aAAA,CADA,oBCEF,CDEA,+BACE,SCCF,CDEA,kBAIE,sFAAA,CAEA,aCAF,CDGA,IAEE,kBAAA,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,CCxUA,SAQE,mCAAA,CANA,sCAAA,CACA,mBAAA,CAMA,qCAAA,CALA,mCAAA,CACA,cAAA,CACA,eAAA,CACA,mBAAA,CANA,YDmVF,CCzUE,qBACE,kBD2UJ,CCxUE,uBACE,mCAAA,CACA,YD0UJ,CCvUE,kCACE,qCDyUJ,CCtUE,gBAIE,sBAAA,CAHA,kBAAA,CACA,eAAA,CACA,kBDyUJ,CCrUE,oBAEE,eAAA,CADA,SDwUJ,CCnUA,eAEE,cAAA,CADA,kBDuUF,CCpUE,sBACE,eDsUJ,CCnUE,qBACE,YDqUJ","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\n.af-card {\n  padding: 1rem;\n  border: 1px solid var(--color-gray-300);\n  border-radius: 0.5rem;\n  font-family: var(--font-family-base);\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.25rem;\n  background-color: var(--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 var(--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: var(--color-axa);\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\n.af-card {\n  padding: 1rem;\n  border: 1px solid var(--color-gray-300);\n  border-radius: 0.5rem;\n  font-family: var(--font-family-base);\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.25rem;\n  background-color: var(--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 var(--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: var(--color-axa);\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"]}
+{"version":3,"sources":["../../src/common/reboot.scss","../../src/Card/Card.scss","../../src/Card/Card.scss%23sass"],"names":[],"mappings":"AAAA,iBAGE,qBCCF,CDEA,KACE,sBAAA,CACA,gBAAA,CACA,6BAAA,CAAA,0BAAA,CAAA,qBAAA,CACA,uCCCF,CDEA,sEAUE,aCCF,CDEA,KAQE,qBAAA,CADA,UAAA,CALA,4CAAA,CACA,cAAA,CACA,eAAA,CACA,eAAA,CAJA,QAAA,CAKA,eCGF,CDEA,sBACE,mBCCF,CDEA,GACE,kBAAA,CACA,QAAA,CACA,gBCCF,CDEA,kBAOE,mBAAA,CADA,YCEF,CDEA,EAEE,kBAAA,CADA,YCEF,CDEA,sCAEE,eAAA,CAIA,WAAA,CAHA,yBAAA,CACA,wCAAA,CAAA,gCAAA,CACA,qCAAA,CAAA,6BCEF,CDEA,QAEE,iBAAA,CACA,mBCCF,CDEA,iBALE,kBCUF,CDLA,SAGE,YCEF,CDEA,wBAIE,eCCF,CDEA,GACE,eCCF,CDEA,GACE,mBAAA,CACA,aCCF,CDEA,WACE,eCCF,CDEA,SAEE,kBCCF,CDEA,MACE,aCCF,CDEA,QAIE,aAAA,CACA,aAAA,CAHA,iBAAA,CACA,sBCGF,CDEA,IACE,aCCF,CDEA,IACE,SCCF,CDEA,EAGE,wBAAA,CADA,aAAA,CADA,oBCGF,CDEA,QAEE,aAAA,CADA,yBCEF,CDOA,uFAGE,aAAA,CADA,oBCEF,CDEA,+BACE,SCCF,CDEA,kBAIE,sFACE,CAEF,aCDF,CDIA,IAEE,kBAAA,CADA,YAAA,CAEA,aCDF,CDIA,OACE,eCDF,CDIA,IACE,iBCAF,CDIA,QAHE,qBCIF,CDDA,IAEE,eCDF,CDIA,MACE,wBCDF,CDIA,QAGE,mBAAA,CAEA,aAAA,CAHA,oBAAA,CADA,iBAAA,CAGA,eCAF,CDIA,GACE,kBCDF,CDIA,OACE,eCDF,CDIA,sCAME,mBAAA,CACA,iBAAA,CACA,mBAAA,CAHA,QCEF,CDIA,aAEE,gBCDF,CDIA,cAEE,mBCDF,CDIA,OACE,gBCDF,CDIA,gDAIE,yBAAA,CAAA,iBCDF,CDIA,aACE,kBAAA,CACA,yCCDF,CDIA,4GAIE,cCDF,CDIA,wHAKE,iBAAA,CADA,SCAF,CDIA,uCAEE,qBAAA,CACA,SCDF,CDIA,+EAIE,0BAAA,CAAA,kBCDF,CDIA,SACE,aAAA,CACA,eCDF,CDIA,SAIE,QAAA,CAFA,QAAA,CADA,WAAA,CAEA,SCAF,CDIA,OASE,aAAA,CARA,aAAA,CAKA,gBAAA,CACA,mBAAA,CAHA,mBAAA,CADA,cAAA,CAEA,SAAA,CAGA,kBAAA,CANA,UCMF,CDIA,SACE,sBCDF,CDIA,kFAEE,WCDF,CDIA,cAEE,uBAAA,CAAA,eAAA,CADA,mBCAF,CDIA,yCACE,uBAAA,CAAA,eCDF,CDIA,6BAEE,yBAAA,CAAA,iBAAA,CADA,YCAF,CDIA,OACE,oBCDF,CDIA,QAEE,cAAA,CADA,iBCAF,CDIA,SACE,YCDF,CDIA,SACE,sBCDF,CCxUA,SAQE,mCAAA,CANA,sCAAA,CACA,mBAAA,CAMA,qCAAA,CALA,mCAAA,CACA,cAAA,CACA,eAAA,CACA,mBAAA,CANA,YDmVF,CCzUE,qBACE,kBD2UJ,CCxUE,uBACE,mCAAA,CACA,YD0UJ,CCvUE,kCACE,qCDyUJ,CCtUE,gBAIE,sBAAA,CAHA,kBAAA,CACA,eAAA,CACA,kBDyUJ,CCrUE,oBAEE,eAAA,CADA,SDwUJ,CCnUA,eAEE,cAAA,CADA,kBDuUF,CCpUE,sBACE,eDsUJ,CCnUE,qBACE,YDqUJ","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:\n    SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\",\n    monospace;\n  font-size: 1em;\n}\n\npre {\n  margin-top: 0;\n  margin-bottom: 1rem;\n  overflow: auto;\n}\n\nfigure {\n  margin: 0 0 1rem;\n}\n\nimg {\n  border-style: none;\n  vertical-align: middle;\n}\n\nsvg {\n  vertical-align: middle;\n  overflow: hidden;\n}\n\ntable {\n  border-collapse: collapse;\n}\n\ncaption {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  caption-side: bottom;\n  text-align: left;\n  color: #6c757d;\n}\n\nth {\n  text-align: inherit;\n}\n\nbutton {\n  border-radius: 0;\n}\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  margin: 0;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\nbutton,\ninput {\n  overflow: visible;\n}\n\nbutton,\nselect {\n  text-transform: none;\n}\n\nselect {\n  word-wrap: normal;\n}\n\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"],\nbutton {\n  appearance: button;\n}\n\nbutton:focus {\n  outline: 1px dotted;\n  outline: 5px auto -webkit-focus-ring-color;\n}\n\n[type=\"button\"]:not(:disabled),\n[type=\"reset\"]:not(:disabled),\n[type=\"submit\"]:not(:disabled),\nbutton:not(:disabled) {\n  cursor: pointer;\n}\n\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner,\nbutton::-moz-focus-inner {\n  padding: 0;\n  border-style: none;\n}\n\ninput[type=\"checkbox\"],\ninput[type=\"radio\"] {\n  box-sizing: border-box;\n  padding: 0;\n}\n\ninput[type=\"date\"],\ninput[type=\"datetime-local\"],\ninput[type=\"month\"],\ninput[type=\"time\"] {\n  appearance: listbox;\n}\n\ntextarea {\n  overflow: auto;\n  resize: vertical;\n}\n\nfieldset {\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n\nlegend {\n  display: block;\n  width: 100%;\n  max-width: 100%;\n  margin-bottom: 0.5rem;\n  padding: 0;\n  font-size: 1.5rem;\n  line-height: inherit;\n  white-space: normal;\n  color: inherit;\n}\n\nprogress {\n  vertical-align: baseline;\n}\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n  height: auto;\n}\n\n[type=\"search\"] {\n  outline-offset: -2px;\n  appearance: none;\n}\n\n[type=\"search\"]::-webkit-search-decoration {\n  appearance: none;\n}\n\n::-webkit-file-upload-button {\n  font: inherit;\n  appearance: button;\n}\n\noutput {\n  display: inline-block;\n}\n\nsummary {\n  display: list-item;\n  cursor: pointer;\n}\n\ntemplate {\n  display: none;\n}\n\n[hidden] {\n  display: none !important;\n}\n","@use \"../common/reboot\";\n\n.af-card {\n  padding: 1rem;\n  border: 1px solid var(--color-gray-300);\n  border-radius: 0.5rem;\n  font-family: var(--font-family-base);\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.25rem;\n  background-color: var(--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 var(--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: var(--color-axa);\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\n.af-card {\n  padding: 1rem;\n  border: 1px solid var(--color-gray-300);\n  border-radius: 0.5rem;\n  font-family: var(--font-family-base);\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.25rem;\n  background-color: var(--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 var(--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: var(--color-axa);\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"]}

package/dist/Form/Checkbox/Checkbox.css

@@ -1 +1 @@
-.af-checkbox{font-family:Source Sans Pro,arial,sans-serif}.af-checkbox *{box-sizing:border-box}.af-checkbox__container{display:flex;flex-direction:column;gap:1rem}.af-checkbox__label{color:var(--color-gray-900);font-size:1.125rem;font-weight:600}.af-checkbox__description{color:var(--color-gray-700);font-size:.875rem;font-weight:400;line-height:1.125rem}@media (width > 1023px){.af-checkbox__description{font-size:1rem;line-height:1.25rem}}.af-checkbox__content{align-items:center;display:flex;gap:1rem;justify-content:center;width:100%}.af-checkbox__content>svg{color:var(--color-axa);height:1.75rem;width:1.75rem;fill:var(--color-axa)}.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:var(--color-gray-900);line-height:1.4rem}.af-checkbox__content .af-checkbox__content-description>span:not(:first-child){color:var(--color-gray-700)}.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:var(--color-red-700);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:var(--color-red-700);width:1rem;fill:var(--color-red-700)}.af-checkbox-select~.af-checkbox__error{margin:1rem 0 0}.af-checkbox label{align-items:center;border-radius:var(--default-border-radius);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:var(--color-gray)}.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:var(--color-gray-700);fill:var(--color-gray-700)}.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:var(--color-red-700);fill:var(--color-red-700)}.af-checkbox label:has(input[type=checkbox]:checked) .af-checkbox__checked{color:var(--color-axa);display:block;fill:var(--color-axa)}.af-checkbox label:has(input[type=checkbox]:checked) .af-checkbox__unchecked{display:none}.af-checkbox-select label:has(input[type=checkbox]:checked){background-color:var(--color-blue-2);box-shadow:0 0 0 2px var(--color-axa) inset}.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:var(--color-btn-disabled-text);fill:var(--color-btn-disabled-text)}.af-checkbox-select label:has(input[type=checkbox]:disabled){background-color:var(--color-gray-200);box-shadow:0 0 0 1px var(--box-shadow-color) inset;color:var(--color-btn-disabled-text);--box-shadow-color:var(--color-gray-400)}.af-checkbox-select label:has(input[type=checkbox][aria-invalid=true]){--box-shadow-color:var(--color-red-700);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 var(--color-blue-3);outline-offset:3px}.af-checkbox label:hover:not(:has(input[type=checkbox]:disabled)) .af-checkbox__unchecked{color:var(--color-axa);fill:var(--color-axa)}.af-checkbox-select label:hover:not(:has(input[type=checkbox]:disabled)){--box-shadow-color:var(--color-axa);box-shadow:0 0 0 1px var(--box-shadow-color) inset}.af-checkbox-select{color:var(--color-gray-700);display:flex;flex-direction:column;font-family:var(--font-family-base);font-style:normal;font-weight:400;gap:1rem;line-height:1.25rem}.af-checkbox-select--horizontal{flex-direction:row}
+.af-checkbox{font-family:Source Sans Pro,arial,sans-serif}.af-checkbox *{box-sizing:border-box}.af-checkbox__container{display:flex;flex-direction:column;gap:1rem}.af-checkbox__label-container{display:flex;flex-direction:column;row-gap:calc(4/var(--font-size-base)*1rem)}.af-checkbox__label{color:var(--color-gray-900);font-size:1.125rem;font-weight:600}.af-checkbox__description{color:var(--color-gray-700);font-size:.875rem;font-weight:400;line-height:1.125rem}@media (width > 1023px){.af-checkbox__description{font-size:1rem;line-height:1.25rem}}.af-checkbox__content{align-items:center;display:flex;gap:1rem;justify-content:center;width:100%}.af-checkbox__content>svg{color:var(--color-axa);height:1.75rem;width:1.75rem;fill:var(--color-axa)}.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:var(--color-gray-900);line-height:1.4rem}.af-checkbox__content .af-checkbox__content-description>span:not(:first-child){color:var(--color-gray-700)}.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:var(--color-red-700);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:var(--color-red-700);width:1rem;fill:var(--color-red-700)}.af-checkbox-select~.af-checkbox__error{margin:1rem 0 0}.af-checkbox label{align-items:center;border-radius:var(--default-border-radius);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:var(--color-gray)}.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-select.subgrid label{width:inherit}.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 svg{background-color:var(--color-white);clip-path:inset(.22rem round 2px)}.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:var(--color-gray-700);fill:var(--color-gray-700)}.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:var(--color-red-700);fill:var(--color-red-700)}.af-checkbox label:has(input[type=checkbox]:checked) .af-checkbox__checked{color:var(--color-axa);display:block;fill:var(--color-axa)}.af-checkbox label:has(input[type=checkbox]:checked) .af-checkbox__unchecked{display:none}.af-checkbox-select label:has(input[type=checkbox]){background-color:var(--color-white)}.af-checkbox-select label:has(input[type=checkbox]:checked){background-color:var(--color-blue-2);box-shadow:0 0 0 2px var(--color-axa) inset}.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:var(--color-btn-disabled-text);fill:var(--color-btn-disabled-text)}.af-checkbox-select label:has(input[type=checkbox]:disabled){background-color:var(--color-gray-200);box-shadow:0 0 0 1px var(--box-shadow-color) inset;color:var(--color-btn-disabled-text);--box-shadow-color:var(--color-gray-400)}.af-checkbox-select label:has(input[type=checkbox][aria-invalid=true]){--box-shadow-color:var(--color-red-700);box-shadow:0 0 0 2px var(--box-shadow-color) inset}.af-checkbox label input[type=checkbox]:focus-visible~.af-checkbox__icons{outline:2px solid var(--color-blue-3);outline-offset:3px}.af-checkbox label:hover:not(:has(input[type=checkbox]:disabled)) .af-checkbox__unchecked{color:var(--color-axa);fill:var(--color-axa)}.af-checkbox-select label:hover:not(:has(input[type=checkbox]:disabled)){--box-shadow-color:var(--color-axa);box-shadow:0 0 0 1px var(--box-shadow-color) inset}.af-checkbox-select{color:var(--color-gray-700);display:flex;flex-direction:column;font-family:var(--font-family-base);font-style:normal;font-weight:400;gap:1rem;line-height:1.25rem}.af-checkbox-select--horizontal{flex-direction:row}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Form/Checkbox/Checkbox.scss%23sass","../../../src/Form/Checkbox/Checkbox.scss"],"names":[],"mappings":"AAEA,aACE,4CCDF,CDGE,eACE,qBCDJ,CDIE,wBACE,YAAA,CACA,qBAAA,CACA,QCFJ,CDKE,oBAGE,2BAAA,CAFA,kBAAA,CACA,eCFJ,CDME,0BAIE,2BAAA,CAHA,iBAAA,CACA,eAAA,CACA,oBCHJ,CDMI,wBANF,0BAOI,cAAA,CACA,mBCHJ,CACF,CDME,sBAGE,kBAAA,CAFA,YAAA,CAIA,QAAA,CADA,sBAAA,CAFA,UCDJ,CDMI,0BAGE,sBAAA,CADA,cAAA,CADA,aAAA,CAGA,qBCJN,CDOI,wDACE,YAAA,CACA,qBAAA,CACA,UAAA,CACA,mBCLN,CDOM,yEAEE,2BAAA,CADA,kBCJR,CDQM,+EACE,2BCNR,CDWE,sDACE,qBAAA,CACA,SCTJ,CDYE,gCACE,cAAA,CACA,mBCVJ,CDaE,iCAGE,kBAAA,CAIA,0BAAA,CANA,YAAA,CAIA,4CAAA,CADA,SAAA,CAEA,mBAAA,CAJA,kBCNJ,CDaI,qCAEE,0BAAA,CADA,UAAA,CAEA,yBCXN,CDeE,wCACE,eCbJ,CDgBE,mBAIE,kBAAA,CADA,0CAAA,CAGA,cAAA,CALA,YAAA,CAIA,UAAA,CAHA,QCVJ,CDiBE,0BAGE,kBAAA,CACA,kDAAA,CAHA,aAAA,CACA,YAAA,CAIA,oCChBJ,CDmBE,sCAKE,qBAAA,CAEA,KAAA,CAJA,WAAA,CAGA,0BAAA,CAFA,YAAA,CAHA,iBAAA,CAOA,iBAAA,CANA,WCXJ,CDmBI,0DAGE,SAAA,CAFA,iBAAA,CACA,QChBN,CDqBE,wCAEE,kBAAA,CACA,SAAA,CAFA,iBCjBJ,CDqBI,4DAEE,kBAAA,CADA,YAAA,CAEA,UCnBN,CDqBM,sKAIE,kBAAA,CADA,cAAA,CADA,aClBR,CDuBM,kFACE,YCrBR,CDwBM,oFACE,2BAAA,CACA,0BCtBR,CD4BI,8KAEE,0BAAA,CACA,yBC3BN,CDgCI,2EAEE,sBAAA,CADA,aAAA,CAEA,qBC9BN,CDiCI,6EACE,YC/BN,CDmCE,4DACE,oCAAA,CACA,2CCjCJ,CDoCE,sDACE,cClCJ,CDoCI,0OAGE,oCAAA,CACA,mCCpCN,CDwCE,6DAEE,sCAAA,CACA,kDAAA,CAFA,oCAAA,CAIA,wCCvCJ,CD0CE,uEACE,uCAAA,CAEA,kDCzCJ,CD6CI,kMAEE,qCAAA,CACA,kBC5CN,CDiDI,0FACE,sBAAA,CACA,qBC/CN,CDmDE,yEACE,mCAAA,CAEA,kDClDJ,CDqDE,oBAQE,2BAAA,CAPA,YAAA,CACA,qBAAA,CAEA,mCAAA,CACA,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,mBClDJ,CDqDI,gCACE,kBCnDN","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  &__container {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n  }\n\n  &__label {\n    font-size: common.rem(18);\n    font-weight: 600;\n    color: var(--color-gray-900);\n  }\n\n  &__description {\n    font-size: common.rem(14);\n    font-weight: 400;\n    line-height: common.rem(18);\n    color: var(--color-gray-700);\n\n    @media (width > #{common.$breakpoint-md}) {\n      font-size: common.rem(16);\n      line-height: common.rem(20);\n    }\n  }\n\n  &__content {\n    display: flex;\n    width: 100%;\n    align-items: center;\n    justify-content: center;\n    gap: 1rem;\n\n    & > svg {\n      width: 1.75rem;\n      height: 1.75rem;\n      color: var(--color-axa);\n      fill: var(--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: var(--color-gray-900);\n      }\n\n      & > span:not(:first-child) {\n        color: var(--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: var(--color-red-700);\n\n    & > svg {\n      width: 1rem;\n      color: var(--color-red-700);\n      fill: var(--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: var(--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: #{var(--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: var(--color-gray-700);\n        fill: var(--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: var(--color-red-700);\n      fill: var(--color-red-700);\n    }\n  }\n\n  & label:has(input[type=\"checkbox\"]:checked) {\n    & .af-checkbox__checked {\n      display: block;\n      color: var(--color-axa);\n      fill: var(--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: var(--color-blue-2);\n    box-shadow: 0 0 0 2px var(--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: var(--color-btn-disabled-text);\n      fill: var(--color-btn-disabled-text);\n    }\n  }\n\n  &-select label:has(input[type=\"checkbox\"]:disabled) {\n    color: var(--color-btn-disabled-text);\n    background-color: var(--color-gray-200);\n    box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n\n    --box-shadow-color: #{var(--color-gray-400)};\n  }\n\n  &-select label:has(input[type=\"checkbox\"][aria-invalid=\"true\"]) {\n    --box-shadow-color: #{var(--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 var(--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: var(--color-axa);\n      fill: var(--color-axa);\n    }\n  }\n\n  &-select label:hover:not(:has(input[type=\"checkbox\"]:disabled)) {\n    --box-shadow-color: var(--color-axa);\n\n    box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n  }\n\n  &-select {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n    font-family: var(--font-family-base);\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1.25rem;\n    color: var(--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  &__container {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n  }\n\n  &__label {\n    font-size: common.rem(18);\n    font-weight: 600;\n    color: var(--color-gray-900);\n  }\n\n  &__description {\n    font-size: common.rem(14);\n    font-weight: 400;\n    line-height: common.rem(18);\n    color: var(--color-gray-700);\n\n    @media (width > #{common.$breakpoint-md}) {\n      font-size: common.rem(16);\n      line-height: common.rem(20);\n    }\n  }\n\n  &__content {\n    display: flex;\n    width: 100%;\n    align-items: center;\n    justify-content: center;\n    gap: 1rem;\n\n    & > svg {\n      width: 1.75rem;\n      height: 1.75rem;\n      color: var(--color-axa);\n      fill: var(--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: var(--color-gray-900);\n      }\n\n      & > span:not(:first-child) {\n        color: var(--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: var(--color-red-700);\n\n    & > svg {\n      width: 1rem;\n      color: var(--color-red-700);\n      fill: var(--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: var(--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: #{var(--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: var(--color-gray-700);\n        fill: var(--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: var(--color-red-700);\n      fill: var(--color-red-700);\n    }\n  }\n\n  & label:has(input[type=\"checkbox\"]:checked) {\n    & .af-checkbox__checked {\n      display: block;\n      color: var(--color-axa);\n      fill: var(--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: var(--color-blue-2);\n    box-shadow: 0 0 0 2px var(--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: var(--color-btn-disabled-text);\n      fill: var(--color-btn-disabled-text);\n    }\n  }\n\n  &-select label:has(input[type=\"checkbox\"]:disabled) {\n    color: var(--color-btn-disabled-text);\n    background-color: var(--color-gray-200);\n    box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n\n    --box-shadow-color: #{var(--color-gray-400)};\n  }\n\n  &-select label:has(input[type=\"checkbox\"][aria-invalid=\"true\"]) {\n    --box-shadow-color: #{var(--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 var(--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: var(--color-axa);\n      fill: var(--color-axa);\n    }\n  }\n\n  &-select label:hover:not(:has(input[type=\"checkbox\"]:disabled)) {\n    --box-shadow-color: var(--color-axa);\n\n    box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n  }\n\n  &-select {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n    font-family: var(--font-family-base);\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1.25rem;\n    color: var(--color-gray-700);\n\n    &--horizontal {\n      flex-direction: row;\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../../../src/Form/Checkbox/Checkbox.scss%23sass","../../../src/Form/Checkbox/Checkbox.scss"],"names":[],"mappings":"AAEA,aACE,4CCDF,CDGE,eACE,qBCDJ,CDIE,wBACE,YAAA,CACA,qBAAA,CACA,QCFJ,CDKE,8BACE,YAAA,CACA,qBAAA,CACA,0CCHJ,CDME,oBAGE,2BAAA,CAFA,kBAAA,CACA,eCHJ,CDOE,0BAIE,2BAAA,CAHA,iBAAA,CACA,eAAA,CACA,oBCJJ,CDOI,wBANF,0BAOI,cAAA,CACA,mBCJJ,CACF,CDOE,sBAGE,kBAAA,CAFA,YAAA,CAIA,QAAA,CADA,sBAAA,CAFA,UCFJ,CDOI,0BAGE,sBAAA,CADA,cAAA,CADA,aAAA,CAGA,qBCLN,CDQI,wDACE,YAAA,CACA,qBAAA,CACA,UAAA,CACA,mBCNN,CDQM,yEAEE,2BAAA,CADA,kBCLR,CDSM,+EACE,2BCPR,CDYE,sDACE,qBAAA,CACA,SCVJ,CDaE,gCACE,cAAA,CACA,mBCXJ,CDcE,iCAGE,kBAAA,CAIA,0BAAA,CANA,YAAA,CAIA,4CAAA,CADA,SAAA,CAEA,mBAAA,CAJA,kBCPJ,CDcI,qCAEE,0BAAA,CADA,UAAA,CAEA,yBCZN,CDgBE,wCACE,eCdJ,CDiBE,mBAIE,kBAAA,CADA,0CAAA,CAGA,cAAA,CALA,YAAA,CAIA,UAAA,CAHA,QCXJ,CDkBE,0BAGE,kBAAA,CACA,kDAAA,CAHA,aAAA,CACA,YAAA,CAIA,oCCjBJ,CDoBE,sCAKE,qBAAA,CAEA,KAAA,CAJA,WAAA,CAGA,0BAAA,CAFA,YAAA,CAHA,iBAAA,CAOA,iBAAA,CANA,WCZJ,CDoBI,0DAGE,SAAA,CAFA,iBAAA,CACA,QCjBN,CDsBE,kCACE,aCpBJ,CDuBE,wCAEE,kBAAA,CACA,SAAA,CAFA,iBCnBJ,CDuBI,4DAEE,kBAAA,CADA,YAAA,CAEA,UCrBN,CDuBM,gEACE,mCAAA,CAEA,iCCrBR,CDwBM,sKAIE,kBAAA,CADA,cAAA,CADA,aCrBR,CD0BM,kFACE,YCxBR,CD2BM,oFACE,2BAAA,CACA,0BCzBR,CD+BI,8KAEE,0BAAA,CACA,yBC9BN,CDmCI,2EAEE,sBAAA,CADA,aAAA,CAEA,qBCjCN,CDoCI,6EACE,YClCN,CDsCE,oDACE,mCCpCJ,CDuCE,4DACE,oCAAA,CACA,2CCrCJ,CDwCE,sDACE,cCtCJ,CDwCI,0OAGE,oCAAA,CACA,mCCxCN,CD4CE,6DAEE,sCAAA,CACA,kDAAA,CAFA,oCAAA,CAIA,wCC3CJ,CD8CE,uEACE,uCAAA,CAEA,kDC7CJ,CDgDE,0EACE,qCAAA,CACA,kBC9CJ,CDkDI,0FACE,sBAAA,CACA,qBChDN,CDoDE,yEACE,mCAAA,CAEA,kDCnDJ,CDsDE,oBAQE,2BAAA,CAPA,YAAA,CACA,qBAAA,CAEA,mCAAA,CACA,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,mBCnDJ,CDsDI,gCACE,kBCpDN","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  &__container {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n  }\n\n  &__label-container {\n    display: flex;\n    flex-direction: column;\n    row-gap: calc(4 / var(--font-size-base) * 1rem);\n  }\n\n  &__label {\n    font-size: common.rem(18);\n    font-weight: 600;\n    color: var(--color-gray-900);\n  }\n\n  &__description {\n    font-size: common.rem(14);\n    font-weight: 400;\n    line-height: common.rem(18);\n    color: var(--color-gray-700);\n\n    @media (width > #{common.$breakpoint-md}) {\n      font-size: common.rem(16);\n      line-height: common.rem(20);\n    }\n  }\n\n  &__content {\n    display: flex;\n    width: 100%;\n    align-items: center;\n    justify-content: center;\n    gap: 1rem;\n\n    & > svg {\n      width: 1.75rem;\n      height: 1.75rem;\n      color: var(--color-axa);\n      fill: var(--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: var(--color-gray-900);\n      }\n\n      & > span:not(:first-child) {\n        color: var(--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: var(--color-red-700);\n\n    & > svg {\n      width: 1rem;\n      color: var(--color-red-700);\n      fill: var(--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: var(--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: #{var(--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  &-select.subgrid label {\n    width: inherit;\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      & svg {\n        background-color: var(--color-white);\n        -webkit-clip-path: inset(0.22rem round 2px);\n        clip-path: inset(0.22rem round 2px);\n      }\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: var(--color-gray-700);\n        fill: var(--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: var(--color-red-700);\n      fill: var(--color-red-700);\n    }\n  }\n\n  & label:has(input[type=\"checkbox\"]:checked) {\n    & .af-checkbox__checked {\n      display: block;\n      color: var(--color-axa);\n      fill: var(--color-axa);\n    }\n\n    & .af-checkbox__unchecked {\n      display: none;\n    }\n  }\n\n  &-select label:has(input[type=\"checkbox\"]) {\n    background-color: var(--color-white);\n  }\n\n  &-select label:has(input[type=\"checkbox\"]:checked) {\n    background-color: var(--color-blue-2);\n    box-shadow: 0 0 0 2px var(--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: var(--color-btn-disabled-text);\n      fill: var(--color-btn-disabled-text);\n    }\n  }\n\n  &-select label:has(input[type=\"checkbox\"]:disabled) {\n    color: var(--color-btn-disabled-text);\n    background-color: var(--color-gray-200);\n    box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n\n    --box-shadow-color: #{var(--color-gray-400)};\n  }\n\n  &-select label:has(input[type=\"checkbox\"][aria-invalid=\"true\"]) {\n    --box-shadow-color: #{var(--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    outline: 2px solid var(--color-blue-3);\n    outline-offset: 3px;\n  }\n\n  & label:hover:not(:has(input[type=\"checkbox\"]:disabled)) {\n    & .af-checkbox__unchecked {\n      color: var(--color-axa);\n      fill: var(--color-axa);\n    }\n  }\n\n  &-select label:hover:not(:has(input[type=\"checkbox\"]:disabled)) {\n    --box-shadow-color: var(--color-axa);\n\n    box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n  }\n\n  &-select {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n    font-family: var(--font-family-base);\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1.25rem;\n    color: var(--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  &__container {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n  }\n\n  &__label-container {\n    display: flex;\n    flex-direction: column;\n    row-gap: calc(4 / var(--font-size-base) * 1rem);\n  }\n\n  &__label {\n    font-size: common.rem(18);\n    font-weight: 600;\n    color: var(--color-gray-900);\n  }\n\n  &__description {\n    font-size: common.rem(14);\n    font-weight: 400;\n    line-height: common.rem(18);\n    color: var(--color-gray-700);\n\n    @media (width > #{common.$breakpoint-md}) {\n      font-size: common.rem(16);\n      line-height: common.rem(20);\n    }\n  }\n\n  &__content {\n    display: flex;\n    width: 100%;\n    align-items: center;\n    justify-content: center;\n    gap: 1rem;\n\n    & > svg {\n      width: 1.75rem;\n      height: 1.75rem;\n      color: var(--color-axa);\n      fill: var(--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: var(--color-gray-900);\n      }\n\n      & > span:not(:first-child) {\n        color: var(--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: var(--color-red-700);\n\n    & > svg {\n      width: 1rem;\n      color: var(--color-red-700);\n      fill: var(--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: var(--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: #{var(--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  &-select.subgrid label {\n    width: inherit;\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      & svg {\n        background-color: var(--color-white);\n        -webkit-clip-path: inset(0.22rem round 2px);\n        clip-path: inset(0.22rem round 2px);\n      }\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: var(--color-gray-700);\n        fill: var(--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: var(--color-red-700);\n      fill: var(--color-red-700);\n    }\n  }\n\n  & label:has(input[type=\"checkbox\"]:checked) {\n    & .af-checkbox__checked {\n      display: block;\n      color: var(--color-axa);\n      fill: var(--color-axa);\n    }\n\n    & .af-checkbox__unchecked {\n      display: none;\n    }\n  }\n\n  &-select label:has(input[type=\"checkbox\"]) {\n    background-color: var(--color-white);\n  }\n\n  &-select label:has(input[type=\"checkbox\"]:checked) {\n    background-color: var(--color-blue-2);\n    box-shadow: 0 0 0 2px var(--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: var(--color-btn-disabled-text);\n      fill: var(--color-btn-disabled-text);\n    }\n  }\n\n  &-select label:has(input[type=\"checkbox\"]:disabled) {\n    color: var(--color-btn-disabled-text);\n    background-color: var(--color-gray-200);\n    box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n\n    --box-shadow-color: #{var(--color-gray-400)};\n  }\n\n  &-select label:has(input[type=\"checkbox\"][aria-invalid=\"true\"]) {\n    --box-shadow-color: #{var(--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    outline: 2px solid var(--color-blue-3);\n    outline-offset: 3px;\n  }\n\n  & label:hover:not(:has(input[type=\"checkbox\"]:disabled)) {\n    & .af-checkbox__unchecked {\n      color: var(--color-axa);\n      fill: var(--color-axa);\n    }\n  }\n\n  &-select label:hover:not(:has(input[type=\"checkbox\"]:disabled)) {\n    --box-shadow-color: var(--color-axa);\n\n    box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n  }\n\n  &-select {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n    font-family: var(--font-family-base);\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1.25rem;\n    color: var(--color-gray-700);\n\n    &--horizontal {\n      flex-direction: row;\n    }\n  }\n}\n"]}

package/dist/Form/Checkbox/Checkbox.scss

@@ -13,6 +13,12 @@
     gap: 1rem;
   }
 
+  &__label-container {
+    display: flex;
+    flex-direction: column;
+    row-gap: calc(4 / var(--font-size-base) * 1rem);
+  }
+
   &__label {
     font-size: common.rem(18);
     font-weight: 600;
@@ -127,6 +133,10 @@
     }
   }
 
+  &-select.subgrid label {
+    width: inherit;
+  }
+
   & label input[type="checkbox"] {
     position: absolute;
     margin-right: 0.5rem;
@@ -137,6 +147,12 @@
       align-items: center;
       gap: 0.75rem;
 
+      & svg {
+        background-color: var(--color-white);
+        -webkit-clip-path: inset(0.22rem round 2px);
+        clip-path: inset(0.22rem round 2px);
+      }
+
       & .af-checkbox__checked,
       & .af-checkbox__unchecked {
         width: 1.75rem;
@@ -175,6 +191,10 @@
     }
   }
 
+  &-select label:has(input[type="checkbox"]) {
+    background-color: var(--color-white);
+  }
+
   &-select label:has(input[type="checkbox"]:checked) {
     background-color: var(--color-blue-2);
     box-shadow: 0 0 0 2px var(--color-axa) inset;
@@ -206,11 +226,8 @@
   }
 
   & label input[type="checkbox"]:focus-visible ~ .af-checkbox__icons {
-    & .af-checkbox__unchecked,
-    & .af-checkbox__checked {
-      outline: 2px solid var(--color-blue-3);
-      outline-offset: 3px;
-    }
+    outline: 2px solid var(--color-blue-3);
+    outline-offset: 3px;
   }
 
   & label:hover:not(:has(input[type="checkbox"]:disabled)) {

package/dist/Form/FileUpload/FileUpload.css

@@ -1 +1 @@
-.af-form__group--label{color:var(--color-gray-900);font-size:1.125rem;font-weight:600}.af-form__file-input{align-items:center;background-color:var(--color-white);border:2px dashed var(--color-axa);border-radius:8px;color:var(--color-gray-900);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:var(--color-gray-700)}.af-form__file-input--error{border-color:var(--color-red-700)}.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:var(--color-gray-700);font-size:1rem;font-weight:400}.af-form__file-input-icon path{fill:var(--color-axa)}.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:var(--color-red-700)}.af-form__file-title-container-icon-success path{fill:var(--color-green-600)}.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:var(--color-gray-900);font-size:1.125rem}.af-form__file-size{color:var(--color-gray-700);font-size:1rem}.af-form__file-error{align-items:center;color:var(--color-red-700);display:flex;font-size:1rem;gap:.25rem;margin-bottom:.9rem;margin-top:-.9rem}.af-form__file-error-icon path{fill:var(--color-red-700)}.af-form__file-line{width:100%}.af-form__file-line-container{align-items:center;background:var(--color-white);border:1px solid var(--color-gray-700);border-radius:var(--default-border-radius);display:flex;justify-content:space-between;margin-bottom:1rem;padding:1rem}.af-form__file-line-container--error{border-color:var(--color-red-700)}.af-form__file-actions{align-items:baseline;cursor:pointer;display:flex;gap:1rem;justify-content:center}.af-form__file-actions-icon path{fill:var(--color-gray-700)}.is-mobile .af-form__file-input-dropdown-text{display:none}.is-mobile .af-btn-client{width:100%}
+.af-form__file-upload{--row-gap:calc(32/var(--font-size-base)*1rem)}.af-form__group--label{color:var(--color-gray-900);font-size:1.125rem;font-weight:600}.af-form__files-list-label{margin-top:2rem}.af-form__file-input{align-items:center;background-color:var(--color-white);border:2px dashed var(--color-axa);border-radius:8px;color:var(--color-gray-900);cursor:pointer;display:flex;flex-direction:column;font-weight:400;justify-content:space-between;padding:2rem;position:relative;text-align:center}.af-form__file-input.is-mobile{padding-bottom:1rem}.af-form__file-input:hover{border-color:var(--color-gray-700)}.af-form__file-input--error{border-color:var(--color-red-700)}.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:var(--color-gray-700);font-size:1rem;font-weight:400}.af-form__file-input-icon path{fill:var(--color-axa)}.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:var(--color-red-700)}.af-form__file-title-container-icon-success path{fill:var(--color-green-600)}.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:var(--color-gray-900);font-size:1.125rem}.af-form__file-size{color:var(--color-gray-700);font-size:1rem}.af-form__file-error{align-items:center;color:var(--color-red-700);display:flex;font-size:1rem;gap:.25rem;margin-bottom:.9rem;margin-top:-.9rem}.af-form__file-error-icon path{fill:var(--color-red-700)}.af-form__file-line{width:100%}.af-form__file-line-container{align-items:center;background:var(--color-white);border:1px solid var(--color-gray-700);border-radius:var(--default-border-radius);display:flex;justify-content:space-between;margin-bottom:1rem;padding:1rem}.af-form__file-line-container--error{border-color:var(--color-red-700)}.af-form__file-actions{align-items:baseline;cursor:pointer;display:flex;gap:1rem;justify-content:center}.is-mobile .af-form__file-input-dropdown-text{display:none}.is-mobile .af-btn-client{width:100%}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Form/FileUpload/FileUpload.scss%23sass","../../../src/Form/FileUpload/FileUpload.scss"],"names":[],"mappings":"AAII,uBAGE,2BAAA,CAFA,kBAAA,CCHN,eAEA,CDQI,qBAUE,kBAAA,CAKA,mCAAA,CARA,kCAAA,CACA,iBAAA,CAMA,2BAAA,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,kCCPR,CDUM,4BACE,iCCRR,CDWM,2BAGE,QAAA,CAIA,cAAA,CAHA,MAAA,CAEA,SAAA,CALA,iBAAA,CACA,KAAA,CAGA,UCPR,CDYM,mCAEE,eAAA,CADA,gBCTR,CDaM,0BAGE,2BAAA,CAFA,cAAA,CACA,eCVR,CDeQ,+BACE,qBCbV,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,yBCpBZ,CDyBU,iDACE,2BCvBZ,CD6BI,qBAEE,kBAAA,CADA,YAAA,CAEA,SC3BN,CD6BM,yBACE,YAAA,CACA,qBC3BR,CD+BI,oBAEE,2BAAA,CADA,kBC5BN,CDgCI,oBAEE,2BAAA,CADA,cC7BN,CDiCI,qBAIE,kBAAA,CAGA,0BAAA,CANA,YAAA,CAKA,cAAA,CADA,UAAA,CAFA,mBAAA,CADA,iBC1BN,CDkCQ,+BACE,yBChCV,CDqCI,oBACE,UCnCN,CDqCM,8BAME,kBAAA,CAEA,6BAAA,CAJA,sCAAA,CACA,0CAAA,CAJA,YAAA,CAMA,6BAAA,CALA,kBAAA,CACA,YC9BR,CDqCQ,qCACE,iCCnCV,CDwCI,uBAEE,oBAAA,CAGA,cAAA,CAJA,YAAA,CAGA,QAAA,CADA,sBCpCN,CDyCQ,iCACE,0BCvCV,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: common.rem(18);\n      font-weight: 600;\n      color: var(--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 var(--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: var(--color-gray-900);\n      background-color: var(--color-white);\n      cursor: pointer;\n\n      &.is-mobile {\n        padding-bottom: 1rem;\n      }\n\n      &:hover {\n        border-color: var(--color-gray-700);\n      }\n\n      &--error {\n        border-color: var(--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: var(--color-gray-700);\n      }\n\n      &-icon {\n        path {\n          fill: var(--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: var(--color-red-700);\n          }\n        }\n\n        &-success {\n          path {\n            fill: var(--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: var(--color-gray-900);\n    }\n\n    &-size {\n      font-size: 1rem;\n      color: var(--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: var(--color-red-700);\n\n      &-icon {\n        path {\n          fill: var(--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 var(--color-gray-700);\n        border-radius: var(--default-border-radius);\n        align-items: center;\n        justify-content: space-between;\n        background: var(--color-white);\n\n        &--error {\n          border-color: var(--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: var(--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: common.rem(18);\n      font-weight: 600;\n      color: var(--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 var(--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: var(--color-gray-900);\n      background-color: var(--color-white);\n      cursor: pointer;\n\n      &.is-mobile {\n        padding-bottom: 1rem;\n      }\n\n      &:hover {\n        border-color: var(--color-gray-700);\n      }\n\n      &--error {\n        border-color: var(--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: var(--color-gray-700);\n      }\n\n      &-icon {\n        path {\n          fill: var(--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: var(--color-red-700);\n          }\n        }\n\n        &-success {\n          path {\n            fill: var(--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: var(--color-gray-900);\n    }\n\n    &-size {\n      font-size: 1rem;\n      color: var(--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: var(--color-red-700);\n\n      &-icon {\n        path {\n          fill: var(--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 var(--color-gray-700);\n        border-radius: var(--default-border-radius);\n        align-items: center;\n        justify-content: space-between;\n        background: var(--color-white);\n\n        &--error {\n          border-color: var(--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: var(--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"]}
+{"version":3,"sources":["../../../src/Form/FileUpload/FileUpload.scss%23sass","../../../src/Form/FileUpload/FileUpload.scss"],"names":[],"mappings":"AAGE,sBACE,6CCFJ,CDMI,uBAGE,2BAAA,CAFA,kBAAA,CACA,eCHN,CDQE,2BACE,eCNJ,CDUI,qBAOE,kBAAA,CAKA,mCAAA,CARA,kCAAA,CACA,iBAAA,CAMA,2BAAA,CAEA,cAAA,CAXA,YAAA,CAIA,qBAAA,CAGA,eAAA,CADA,6BAAA,CALA,YAAA,CAFA,iBAAA,CASA,iBCLN,CDUM,+BACE,mBCRR,CDWM,2BACE,kCCTR,CDYM,4BACE,iCCVR,CDaM,2BAGE,QAAA,CAIA,cAAA,CAHA,MAAA,CAEA,SAAA,CALA,iBAAA,CACA,KAAA,CAGA,UCTR,CDcM,mCAEE,eAAA,CADA,gBCXR,CDeM,0BAGE,2BAAA,CAFA,cAAA,CACA,eCZR,CDiBQ,+BACE,qBCfV,CDmBM,oCACE,SCjBR,CDqBI,oBACE,YAAA,CAGA,cAAA,CACA,eAAA,CACA,eAAA,CAJA,mBAAA,CACA,SChBN,CDsBI,+BAEE,kBAAA,CADA,YAAA,CAGA,SAAA,CADA,sBCnBN,CDwBU,+CACE,yBCtBZ,CD2BU,iDACE,2BCzBZ,CD+BI,qBAEE,kBAAA,CADA,YAAA,CAEA,SC7BN,CD+BM,yBACE,YAAA,CACA,qBC7BR,CDiCI,oBAEE,2BAAA,CADA,kBC9BN,CDkCI,oBAEE,2BAAA,CADA,cC/BN,CDmCI,qBAIE,kBAAA,CAGA,0BAAA,CANA,YAAA,CAKA,cAAA,CADA,UAAA,CAFA,mBAAA,CADA,iBC5BN,CDoCQ,+BACE,yBClCV,CDuCI,oBACE,UCrCN,CDuCM,8BAME,kBAAA,CAEA,6BAAA,CAJA,sCAAA,CACA,0CAAA,CAJA,YAAA,CAMA,6BAAA,CALA,kBAAA,CACA,YChCR,CDuCQ,qCACE,iCCrCV,CD0CI,uBAEE,oBAAA,CAGA,cAAA,CAJA,YAAA,CAGA,QAAA,CADA,sBCtCN,CDiDQ,8CACE,YC9CV,CDoDE,0BACE,UClDJ","file":"FileUpload.css","sourcesContent":["@use \"../../common/common\" as common;\n\n.af-form {\n  &__file-upload {\n    --row-gap: calc(32 / var(--font-size-base) * 1rem);\n  }\n\n  &__group {\n    &--label {\n      font-size: common.rem(18);\n      font-weight: 600;\n      color: var(--color-gray-900);\n    }\n  }\n\n  &__files-list-label {\n    margin-top: common.rem(32);\n  }\n\n  &__file {\n    &-input {\n      position: relative;\n      display: flex;\n      padding: 2rem;\n      border: 2px dashed var(--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: var(--color-gray-900);\n      background-color: var(--color-white);\n      cursor: pointer;\n\n      &.is-mobile {\n        padding-bottom: 1rem;\n      }\n\n      &:hover {\n        border-color: var(--color-gray-700);\n      }\n\n      &--error {\n        border-color: var(--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: var(--color-gray-700);\n      }\n\n      &-icon {\n        path {\n          fill: var(--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: var(--color-red-700);\n          }\n        }\n\n        &-success {\n          path {\n            fill: var(--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: var(--color-gray-900);\n    }\n\n    &-size {\n      font-size: 1rem;\n      color: var(--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: var(--color-red-700);\n\n      &-icon {\n        path {\n          fill: var(--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 var(--color-gray-700);\n        border-radius: var(--default-border-radius);\n        align-items: center;\n        justify-content: space-between;\n        background: var(--color-white);\n\n        &--error {\n          border-color: var(--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  }\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  &__file-upload {\n    --row-gap: calc(32 / var(--font-size-base) * 1rem);\n  }\n\n  &__group {\n    &--label {\n      font-size: common.rem(18);\n      font-weight: 600;\n      color: var(--color-gray-900);\n    }\n  }\n\n  &__files-list-label {\n    margin-top: common.rem(32);\n  }\n\n  &__file {\n    &-input {\n      position: relative;\n      display: flex;\n      padding: 2rem;\n      border: 2px dashed var(--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: var(--color-gray-900);\n      background-color: var(--color-white);\n      cursor: pointer;\n\n      &.is-mobile {\n        padding-bottom: 1rem;\n      }\n\n      &:hover {\n        border-color: var(--color-gray-700);\n      }\n\n      &--error {\n        border-color: var(--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: var(--color-gray-700);\n      }\n\n      &-icon {\n        path {\n          fill: var(--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: var(--color-red-700);\n          }\n        }\n\n        &-success {\n          path {\n            fill: var(--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: var(--color-gray-900);\n    }\n\n    &-size {\n      font-size: 1rem;\n      color: var(--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: var(--color-red-700);\n\n      &-icon {\n        path {\n          fill: var(--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 var(--color-gray-700);\n        border-radius: var(--default-border-radius);\n        align-items: center;\n        justify-content: space-between;\n        background: var(--color-white);\n\n        &--error {\n          border-color: var(--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  }\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"]}

package/dist/Form/FileUpload/FileUpload.scss

@@ -1,6 +1,10 @@
 @use "../../common/common" as common;
 
 .af-form {
+  &__file-upload {
+    --row-gap: calc(32 / var(--font-size-base) * 1rem);
+  }
+
   &__group {
     &--label {
       font-size: common.rem(18);
@@ -9,14 +13,15 @@
     }
   }
 
+  &__files-list-label {
+    margin-top: common.rem(32);
+  }
+
   &__file {
     &-input {
       position: relative;
       display: flex;
-      margin-top: 0.5rem;
-      margin-bottom: 0.6rem;
-      padding: 1rem;
-      padding-bottom: 2rem;
+      padding: 2rem;
       border: 2px dashed var(--color-axa);
       border-radius: 8px;
       flex-direction: column;
@@ -164,12 +169,6 @@
       justify-content: center;
       gap: 1rem;
       cursor: pointer;
-
-      &-icon {
-        path {
-          fill: var(--color-gray-700);
-        }
-      }
     }
   }
 }

package/dist/Form/InputError/InputError.css

@@ -1 +1 @@
-.af-input-error{align-items:center;display:flex;gap:.25rem}.af-input-error__icon{color:var(--color-red-700);width:1rem;fill:var(--color-red-700)}.af-input-error__message{color:var(--color-red-700);font-family:var(--font-family-base);font-size:1rem}
+.af-input-error{display:flex;gap:.25rem}.af-input-error__icon{color:var(--color-red-700);flex-shrink:0;width:1rem;fill:var(--color-red-700)}.af-input-error__message{color:var(--color-red-700);font-family:var(--font-family-base);font-size:1rem}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Form/InputError/InputError.scss%23sass","../../../src/Form/InputError/InputError.scss"],"names":[],"mappings":"AAAA,gBAEE,kBAAA,CADA,YAAA,CAEA,UCCF,CDCE,sBAEE,0BAAA,CADA,UAAA,CAEA,yBCCJ,CDEE,yBAGE,0BAAA,CAFA,mCAAA,CACA,cCCJ","file":"InputError.css","sourcesContent":[".af-input-error {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n\n  &__icon {\n    width: 1rem;\n    color: var(--color-red-700);\n    fill: var(--color-red-700);\n  }\n\n  &__message {\n    font-family: var(--font-family-base);\n    font-size: 1rem;\n    color: var(--color-red-700);\n  }\n}\n",".af-input-error {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n\n  &__icon {\n    width: 1rem;\n    color: var(--color-red-700);\n    fill: var(--color-red-700);\n  }\n\n  &__message {\n    font-family: var(--font-family-base);\n    font-size: 1rem;\n    color: var(--color-red-700);\n  }\n}\n"]}
+{"version":3,"sources":["../../../src/Form/InputError/InputError.scss%23sass","../../../src/Form/InputError/InputError.scss"],"names":[],"mappings":"AAAA,gBACE,YAAA,CACA,UCCF,CDCE,sBAGE,0BAAA,CADA,aAAA,CADA,UAAA,CAGA,yBCCJ,CDEE,yBAGE,0BAAA,CAFA,mCAAA,CACA,cCCJ","file":"InputError.css","sourcesContent":[".af-input-error {\n  display: flex;\n  gap: 0.25rem;\n\n  &__icon {\n    width: 1rem;\n    flex-shrink: 0;\n    color: var(--color-red-700);\n    fill: var(--color-red-700);\n  }\n\n  &__message {\n    font-family: var(--font-family-base);\n    font-size: 1rem;\n    color: var(--color-red-700);\n  }\n}\n",".af-input-error {\n  display: flex;\n  gap: 0.25rem;\n\n  &__icon {\n    width: 1rem;\n    flex-shrink: 0;\n    color: var(--color-red-700);\n    fill: var(--color-red-700);\n  }\n\n  &__message {\n    font-family: var(--font-family-base);\n    font-size: 1rem;\n    color: var(--color-red-700);\n  }\n}\n"]}

package/dist/Form/InputError/InputError.scss

@@ -1,10 +1,10 @@
 .af-input-error {
   display: flex;
-  align-items: center;
   gap: 0.25rem;
 
   &__icon {
     width: 1rem;
+    flex-shrink: 0;
     color: var(--color-red-700);
     fill: var(--color-red-700);
   }

package/dist/Form/Radio/Radio.css

@@ -1 +1 @@
-.af-radio{font-family:Source Sans Pro,arial,sans-serif}.af-radio *{box-sizing:border-box}.af-radio__container{display:flex;flex-direction:column;gap:1rem}.af-radio__label{color:var(--color-gray-900);font-size:1.125rem;font-weight:600}.af-radio__content{align-items:center;display:flex;gap:1rem;justify-content:center}.af-radio__content>svg{color:var(--color-axa);height:1.75rem;width:1.75rem;fill:var(--color-axa)}.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:var(--color-gray-900);font-size:1.125rem;line-height:1.4rem}.af-radio__content .af-radio__content-description>span:not(:first-child){color:var(--color-gray-700)}.af-radio-select--horizontal .af-radio__content{flex-direction:column;gap:.5rem}.af-radio__group-description{font-size:1rem;line-height:1.25rem}.af-radio~.af-input-error{gap:.5rem}.af-radio~.af-input-error__message{line-height:1.25rem}.af-radio label{align-items:flex-start;border-radius:var(--default-border-radius);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:var(--color-gray)}.af-radio[aria-invalid=true] :not(.af-radio__content *){color:var(--color-red-700);fill:var(--color-red-700)}.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:var(--color-red-700);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:var(--color-gray-700);fill:var(--color-gray-700)}.af-radio label:has(input[type=radio]:checked) .af-radio__checked{color:var(--color-axa);display:block;fill:var(--color-axa)}.af-radio label:has(input[type=radio]:checked) .af-radio__unchecked{display:none}.af-radio-select[aria-invalid=false] label:hover{--box-shadow-color:var(--color-axa);box-shadow:0 0 0 1px var(--box-shadow-color) inset}.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:var(--color-gray-500);fill:var(--color-gray-500)}.af-radio-select[aria-invalid=false] label:has(input[type=radio]:checked){background-color:var(--color-blue-2);box-shadow:0 0 0 2px var(--color-axa) inset}.af-radio-select[aria-invalid=false] label:has(input[type=radio]:disabled){background-color:var(--color-gray-200);box-shadow:0 0 0 1px var(--box-shadow-color) inset;color:var(--color-gray-500);--box-shadow-color:var(--color-gray-400)}.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 var(--color-blue-3);outline-offset:3px}.af-radio label:hover:not(:has(input[type=radio]:disabled)) .af-radio__unchecked{color:var(--color-axa);fill:var(--color-axa)}.af-radio-select{color:var(--color-gray-700);display:flex;flex-direction:column;font-family:var(--font-family-base);font-style:normal;font-weight:400;gap:1rem;line-height:1.25rem}.af-radio-select--horizontal{flex-direction:row}
+.af-radio{font-family:Source Sans Pro,arial,sans-serif}.af-radio *{box-sizing:border-box}.af-radio__container{display:flex;flex-direction:column;gap:1rem}.af-radio__label-container{display:flex;flex-direction:column;row-gap:calc(4/var(--font-size-base)*1rem)}.af-radio__label{color:var(--color-gray-900);font-size:1.125rem;font-weight:600}.af-radio__description{color:var(--color-gray-700);font-size:.875rem;font-weight:400;line-height:1.125rem}@media (width > 1023px){.af-radio__description{font-size:1rem;line-height:1.25rem}}.af-radio__content{align-items:center;display:flex;gap:1rem;justify-content:center}.af-radio__content>svg{color:var(--color-axa);height:1.75rem;width:1.75rem;fill:var(--color-axa)}.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:var(--color-gray-900);font-size:1.125rem;line-height:1.4rem}.af-radio__content .af-radio__content-description>span:not(:first-child){color:var(--color-gray-700)}.af-radio-select--horizontal .af-radio__content{flex-direction:column;gap:.5rem}.af-radio__group-description{font-size:1rem;line-height:1.25rem}.af-radio~.af-input-error{gap:.5rem}.af-radio~.af-input-error__message{line-height:1.25rem}.af-radio label{align-items:flex-start;border-radius:var(--default-border-radius);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:var(--color-gray)}.af-radio[aria-invalid=true] :not(.af-radio__content *){color:var(--color-red-700);fill:var(--color-red-700)}.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.subgrid label{width:inherit}.af-radio-select[aria-invalid=true] label{--box-shadow-color:var(--color-red-700);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 svg{background-color:var(--color-white);clip-path:circle(.72rem at 50% 50%)}.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:var(--color-gray-700);fill:var(--color-gray-700)}.af-radio label:has(input[type=radio]:checked) .af-radio__checked{color:var(--color-axa);display:block;fill:var(--color-axa)}.af-radio label:has(input[type=radio]:checked) .af-radio__unchecked{display:none}.af-radio-select[aria-invalid=false] label:hover{--box-shadow-color:var(--color-axa);box-shadow:0 0 0 1px var(--box-shadow-color) inset}.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:var(--color-gray-500);fill:var(--color-gray-500)}.af-radio-select[aria-invalid=false] label:has(input[type=radio]){background-color:var(--color-white)}.af-radio-select[aria-invalid=false] label:has(input[type=radio]:checked){background-color:var(--color-blue-2);box-shadow:0 0 0 2px var(--color-axa) inset}.af-radio-select[aria-invalid=false] label:has(input[type=radio]:disabled){background-color:var(--color-gray-200);box-shadow:0 0 0 1px var(--box-shadow-color) inset;color:var(--color-gray-500);--box-shadow-color:var(--color-gray-400)}.af-radio label input[type=radio]:focus-visible~.af-radio__icons{outline:2px solid var(--color-blue-3);outline-offset:3px}.af-radio label:hover:not(:has(input[type=radio]:disabled)) .af-radio__unchecked{color:var(--color-axa);fill:var(--color-axa)}.af-radio-select{color:var(--color-gray-700);display:flex;flex-direction:column;font-family:var(--font-family-base);font-style:normal;font-weight:400;gap:1rem;line-height:1.25rem}.af-radio-select--horizontal{flex-flow:row wrap}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Form/Radio/Radio.scss%23sass","../../../src/Form/Radio/Radio.scss"],"names":[],"mappings":"AAEA,UACE,4CCDF,CDGE,YACE,qBCDJ,CDIE,qBACE,YAAA,CACA,qBAAA,CACA,QCFJ,CDKE,iBAGE,2BAAA,CAFA,kBAAA,CACA,eCFJ,CDME,mBAEE,kBAAA,CADA,YAAA,CAGA,QAAA,CADA,sBCHJ,CDMI,uBAGE,sBAAA,CADA,cAAA,CADA,aAAA,CAGA,qBCJN,CDOI,kDACE,YAAA,CACA,qBAAA,CACA,UAAA,CACA,mBCLN,CDOM,mEAGE,2BAAA,CAFA,kBAAA,CACA,kBCJR,CDQM,yEACE,2BCNR,CDWE,gDACE,qBAAA,CACA,SCTJ,CDYE,6BACE,cAAA,CACA,mBCVJ,CDaE,0BACE,SCXJ,CDaI,mCACE,mBCXN,CDeE,gBAIE,sBAAA,CADA,0CAAA,CAGA,cAAA,CALA,YAAA,CAIA,UAAA,CAHA,QCTJ,CDgBE,uBAGE,kBAAA,CACA,kDAAA,CAHA,aAAA,CACA,YAAA,CAIA,oCCfJ,CDmBI,wDACE,0BAAA,CACA,yBCjBN,CDqBE,mCAKE,qBAAA,CAEA,KAAA,CAJA,WAAA,CAGA,0BAAA,CAFA,YAAA,CAHA,iBAAA,CAOA,iBAAA,CANA,WCbJ,CDqBI,oDAGE,SAAA,CAFA,iBAAA,CACA,QClBN,CDuBE,0CACE,uCAAA,CAEA,kDCtBJ,CDyBE,kCAEE,kBAAA,CACA,SAAA,CAFA,iBCrBJ,CDyBI,mDAEE,kBAAA,CADA,YAAA,CAEA,UCvBN,CDyBM,8IAIE,kBAAA,CADA,cAAA,CADA,aCtBR,CD2BM,sEACE,YCzBR,CD4BM,wEACE,2BAAA,CACA,0BC1BR,CDgCI,kEAEE,sBAAA,CADA,aAAA,CAEA,qBC9BN,CDiCI,oEACE,YC/BN,CDmCE,iDACE,mCAAA,CAEA,kDClCJ,CDqCE,gDACE,cCnCJ,CDqCI,+MAGE,2BAAA,CACA,0BCrCN,CDyCE,0EACE,oCAAA,CACA,2CCvCJ,CD0CE,2EAEE,sCAAA,CACA,kDAAA,CAFA,2BAAA,CAIA,wCCzCJ,CD6CI,0KAEE,qCAAA,CACA,kBC5CN,CDiDI,iFACE,sBAAA,CACA,qBC/CN,CDmDE,iBAQE,2BAAA,CAPA,YAAA,CACA,qBAAA,CAEA,mCAAA,CACA,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,mBChDJ,CDmDI,6BACE,kBCjDN","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  &__container {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n  }\n\n  &__label {\n    font-size: common.rem(18);\n    font-weight: 600;\n    color: var(--color-gray-900);\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: var(--color-axa);\n      fill: var(--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: var(--color-gray-900);\n      }\n\n      & > span:not(:first-child) {\n        color: var(--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  & ~ .af-input-error {\n    gap: 0.5rem;\n\n    &__message {\n      line-height: 1.25rem;\n    }\n  }\n\n  & label {\n    display: flex;\n    margin: 0;\n    border-radius: var(--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: var(--color-gray);\n  }\n\n  &[aria-invalid=\"true\"] {\n    *:not(.af-radio__content *) {\n      color: var(--color-red-700);\n      fill: var(--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: var(--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: var(--color-gray-700);\n        fill: var(--color-gray-700);\n      }\n    }\n  }\n\n  & label:has(input[type=\"radio\"]:checked) {\n    & .af-radio__checked {\n      display: block;\n      color: var(--color-axa);\n      fill: var(--color-axa);\n    }\n\n    & .af-radio__unchecked {\n      display: none;\n    }\n  }\n\n  &-select[aria-invalid=\"false\"] label:hover {\n    --box-shadow-color: var(--color-axa);\n\n    box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\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: var(--color-gray-500);\n      fill: var(--color-gray-500);\n    }\n  }\n\n  &-select[aria-invalid=\"false\"] label:has(input[type=\"radio\"]:checked) {\n    background-color: var(--color-blue-2);\n    box-shadow: 0 0 0 2px var(--color-axa) inset;\n  }\n\n  &-select[aria-invalid=\"false\"] label:has(input[type=\"radio\"]:disabled) {\n    color: var(--color-gray-500);\n    background-color: var(--color-gray-200);\n    box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n\n    --box-shadow-color: var(--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 var(--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: var(--color-axa);\n      fill: var(--color-axa);\n    }\n  }\n\n  &-select {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n    font-family: var(--font-family-base);\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1.25rem;\n    color: var(--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  &__container {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n  }\n\n  &__label {\n    font-size: common.rem(18);\n    font-weight: 600;\n    color: var(--color-gray-900);\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: var(--color-axa);\n      fill: var(--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: var(--color-gray-900);\n      }\n\n      & > span:not(:first-child) {\n        color: var(--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  & ~ .af-input-error {\n    gap: 0.5rem;\n\n    &__message {\n      line-height: 1.25rem;\n    }\n  }\n\n  & label {\n    display: flex;\n    margin: 0;\n    border-radius: var(--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: var(--color-gray);\n  }\n\n  &[aria-invalid=\"true\"] {\n    *:not(.af-radio__content *) {\n      color: var(--color-red-700);\n      fill: var(--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: var(--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: var(--color-gray-700);\n        fill: var(--color-gray-700);\n      }\n    }\n  }\n\n  & label:has(input[type=\"radio\"]:checked) {\n    & .af-radio__checked {\n      display: block;\n      color: var(--color-axa);\n      fill: var(--color-axa);\n    }\n\n    & .af-radio__unchecked {\n      display: none;\n    }\n  }\n\n  &-select[aria-invalid=\"false\"] label:hover {\n    --box-shadow-color: var(--color-axa);\n\n    box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\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: var(--color-gray-500);\n      fill: var(--color-gray-500);\n    }\n  }\n\n  &-select[aria-invalid=\"false\"] label:has(input[type=\"radio\"]:checked) {\n    background-color: var(--color-blue-2);\n    box-shadow: 0 0 0 2px var(--color-axa) inset;\n  }\n\n  &-select[aria-invalid=\"false\"] label:has(input[type=\"radio\"]:disabled) {\n    color: var(--color-gray-500);\n    background-color: var(--color-gray-200);\n    box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n\n    --box-shadow-color: var(--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 var(--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: var(--color-axa);\n      fill: var(--color-axa);\n    }\n  }\n\n  &-select {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n    font-family: var(--font-family-base);\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1.25rem;\n    color: var(--color-gray-700);\n\n    &--horizontal {\n      flex-direction: row;\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../../../src/Form/Radio/Radio.scss%23sass","../../../src/Form/Radio/Radio.scss"],"names":[],"mappings":"AAEA,UACE,4CCDF,CDGE,YACE,qBCDJ,CDIE,qBACE,YAAA,CACA,qBAAA,CACA,QCFJ,CDKE,2BACE,YAAA,CACA,qBAAA,CACA,0CCHJ,CDME,iBAGE,2BAAA,CAFA,kBAAA,CACA,eCHJ,CDOE,uBAIE,2BAAA,CAHA,iBAAA,CACA,eAAA,CACA,oBCJJ,CDOI,wBANF,uBAOI,cAAA,CACA,mBCJJ,CACF,CDOE,mBAEE,kBAAA,CADA,YAAA,CAGA,QAAA,CADA,sBCJJ,CDOI,uBAGE,sBAAA,CADA,cAAA,CADA,aAAA,CAGA,qBCLN,CDQI,kDACE,YAAA,CACA,qBAAA,CACA,UAAA,CACA,mBCNN,CDQM,mEAGE,2BAAA,CAFA,kBAAA,CACA,kBCLR,CDSM,yEACE,2BCPR,CDYE,gDACE,qBAAA,CACA,SCVJ,CDaE,6BACE,cAAA,CACA,mBCXJ,CDcE,0BACE,SCZJ,CDcI,mCACE,mBCZN,CDgBE,gBAIE,sBAAA,CADA,0CAAA,CAGA,cAAA,CALA,YAAA,CAIA,UAAA,CAHA,QCVJ,CDiBE,uBAGE,kBAAA,CACA,kDAAA,CAHA,aAAA,CACA,YAAA,CAIA,oCChBJ,CDoBI,wDACE,0BAAA,CACA,yBClBN,CDsBE,mCAKE,qBAAA,CAEA,KAAA,CAJA,WAAA,CAGA,0BAAA,CAFA,YAAA,CAHA,iBAAA,CAOA,iBAAA,CANA,WCdJ,CDsBI,oDAGE,SAAA,CAFA,iBAAA,CACA,QCnBN,CDwBE,+BACE,aCtBJ,CDyBE,0CACE,uCAAA,CAEA,kDCxBJ,CD2BE,kCAEE,kBAAA,CACA,SAAA,CAFA,iBCvBJ,CD2BI,mDAEE,kBAAA,CADA,YAAA,CAEA,UCzBN,CD2BM,uDACE,mCAAA,CAEA,mCCzBR,CD4BM,8IAIE,kBAAA,CADA,cAAA,CADA,aCzBR,CD8BM,sEACE,YC5BR,CD+BM,wEACE,2BAAA,CACA,0BC7BR,CDmCI,kEAEE,sBAAA,CADA,aAAA,CAEA,qBCjCN,CDoCI,oEACE,YClCN,CDsCE,iDACE,mCAAA,CAEA,kDCrCJ,CDwCE,gDACE,cCtCJ,CDwCI,+MAGE,2BAAA,CACA,0BCxCN,CD4CE,kEACE,mCC1CJ,CD6CE,0EACE,oCAAA,CACA,2CC3CJ,CD8CE,2EAEE,sCAAA,CACA,kDAAA,CAFA,2BAAA,CAIA,wCC7CJ,CDgDE,iEACE,qCAAA,CACA,kBC9CJ,CDkDI,iFACE,sBAAA,CACA,qBChDN,CDoDE,iBAQE,2BAAA,CAPA,YAAA,CACA,qBAAA,CAEA,mCAAA,CACA,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,mBCjDJ,CDoDI,6BACE,kBClDN","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  &__container {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n  }\n\n  &__label-container {\n    display: flex;\n    flex-direction: column;\n    row-gap: calc(4 / var(--font-size-base) * 1rem);\n  }\n\n  &__label {\n    font-size: common.rem(18);\n    font-weight: 600;\n    color: var(--color-gray-900);\n  }\n\n  &__description {\n    font-size: common.rem(14);\n    font-weight: 400;\n    line-height: common.rem(18);\n    color: var(--color-gray-700);\n\n    @media (width > #{common.$breakpoint-md}) {\n      font-size: common.rem(16);\n      line-height: common.rem(20);\n    }\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: var(--color-axa);\n      fill: var(--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: var(--color-gray-900);\n      }\n\n      & > span:not(:first-child) {\n        color: var(--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  & ~ .af-input-error {\n    gap: 0.5rem;\n\n    &__message {\n      line-height: 1.25rem;\n    }\n  }\n\n  & label {\n    display: flex;\n    margin: 0;\n    border-radius: var(--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: var(--color-gray);\n  }\n\n  &[aria-invalid=\"true\"] {\n    *:not(.af-radio__content *) {\n      color: var(--color-red-700);\n      fill: var(--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.subgrid label {\n    width: inherit;\n  }\n\n  &-select[aria-invalid=\"true\"] label {\n    --box-shadow-color: var(--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      & svg {\n        background-color: var(--color-white);\n        -webkit-clip-path: circle(0.72rem at 50% 50%);\n        clip-path: circle(0.72rem at 50% 50%);\n      }\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: var(--color-gray-700);\n        fill: var(--color-gray-700);\n      }\n    }\n  }\n\n  & label:has(input[type=\"radio\"]:checked) {\n    & .af-radio__checked {\n      display: block;\n      color: var(--color-axa);\n      fill: var(--color-axa);\n    }\n\n    & .af-radio__unchecked {\n      display: none;\n    }\n  }\n\n  &-select[aria-invalid=\"false\"] label:hover {\n    --box-shadow-color: var(--color-axa);\n\n    box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\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: var(--color-gray-500);\n      fill: var(--color-gray-500);\n    }\n  }\n\n  &-select[aria-invalid=\"false\"] label:has(input[type=\"radio\"]) {\n    background-color: var(--color-white);\n  }\n\n  &-select[aria-invalid=\"false\"] label:has(input[type=\"radio\"]:checked) {\n    background-color: var(--color-blue-2);\n    box-shadow: 0 0 0 2px var(--color-axa) inset;\n  }\n\n  &-select[aria-invalid=\"false\"] label:has(input[type=\"radio\"]:disabled) {\n    color: var(--color-gray-500);\n    background-color: var(--color-gray-200);\n    box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n\n    --box-shadow-color: var(--color-gray-400);\n  }\n\n  & label input[type=\"radio\"]:focus-visible ~ .af-radio__icons {\n    outline: 2px solid var(--color-blue-3);\n    outline-offset: 3px;\n  }\n\n  & label:hover:not(:has(input[type=\"radio\"]:disabled)) {\n    & .af-radio__unchecked {\n      color: var(--color-axa);\n      fill: var(--color-axa);\n    }\n  }\n\n  &-select {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n    font-family: var(--font-family-base);\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1.25rem;\n    color: var(--color-gray-700);\n\n    &--horizontal {\n      flex-flow: row wrap;\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  &__container {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n  }\n\n  &__label-container {\n    display: flex;\n    flex-direction: column;\n    row-gap: calc(4 / var(--font-size-base) * 1rem);\n  }\n\n  &__label {\n    font-size: common.rem(18);\n    font-weight: 600;\n    color: var(--color-gray-900);\n  }\n\n  &__description {\n    font-size: common.rem(14);\n    font-weight: 400;\n    line-height: common.rem(18);\n    color: var(--color-gray-700);\n\n    @media (width > #{common.$breakpoint-md}) {\n      font-size: common.rem(16);\n      line-height: common.rem(20);\n    }\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: var(--color-axa);\n      fill: var(--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: var(--color-gray-900);\n      }\n\n      & > span:not(:first-child) {\n        color: var(--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  & ~ .af-input-error {\n    gap: 0.5rem;\n\n    &__message {\n      line-height: 1.25rem;\n    }\n  }\n\n  & label {\n    display: flex;\n    margin: 0;\n    border-radius: var(--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: var(--color-gray);\n  }\n\n  &[aria-invalid=\"true\"] {\n    *:not(.af-radio__content *) {\n      color: var(--color-red-700);\n      fill: var(--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.subgrid label {\n    width: inherit;\n  }\n\n  &-select[aria-invalid=\"true\"] label {\n    --box-shadow-color: var(--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      & svg {\n        background-color: var(--color-white);\n        -webkit-clip-path: circle(0.72rem at 50% 50%);\n        clip-path: circle(0.72rem at 50% 50%);\n      }\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: var(--color-gray-700);\n        fill: var(--color-gray-700);\n      }\n    }\n  }\n\n  & label:has(input[type=\"radio\"]:checked) {\n    & .af-radio__checked {\n      display: block;\n      color: var(--color-axa);\n      fill: var(--color-axa);\n    }\n\n    & .af-radio__unchecked {\n      display: none;\n    }\n  }\n\n  &-select[aria-invalid=\"false\"] label:hover {\n    --box-shadow-color: var(--color-axa);\n\n    box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\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: var(--color-gray-500);\n      fill: var(--color-gray-500);\n    }\n  }\n\n  &-select[aria-invalid=\"false\"] label:has(input[type=\"radio\"]) {\n    background-color: var(--color-white);\n  }\n\n  &-select[aria-invalid=\"false\"] label:has(input[type=\"radio\"]:checked) {\n    background-color: var(--color-blue-2);\n    box-shadow: 0 0 0 2px var(--color-axa) inset;\n  }\n\n  &-select[aria-invalid=\"false\"] label:has(input[type=\"radio\"]:disabled) {\n    color: var(--color-gray-500);\n    background-color: var(--color-gray-200);\n    box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n\n    --box-shadow-color: var(--color-gray-400);\n  }\n\n  & label input[type=\"radio\"]:focus-visible ~ .af-radio__icons {\n    outline: 2px solid var(--color-blue-3);\n    outline-offset: 3px;\n  }\n\n  & label:hover:not(:has(input[type=\"radio\"]:disabled)) {\n    & .af-radio__unchecked {\n      color: var(--color-axa);\n      fill: var(--color-axa);\n    }\n  }\n\n  &-select {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n    font-family: var(--font-family-base);\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1.25rem;\n    color: var(--color-gray-700);\n\n    &--horizontal {\n      flex-flow: row wrap;\n    }\n  }\n}\n"]}

package/dist/Form/Radio/Radio.scss

@@ -13,12 +13,30 @@
     gap: 1rem;
   }
 
+  &__label-container {
+    display: flex;
+    flex-direction: column;
+    row-gap: calc(4 / var(--font-size-base) * 1rem);
+  }
+
   &__label {
     font-size: common.rem(18);
     font-weight: 600;
     color: var(--color-gray-900);
   }
 
+  &__description {
+    font-size: common.rem(14);
+    font-weight: 400;
+    line-height: common.rem(18);
+    color: var(--color-gray-700);
+
+    @media (width > #{common.$breakpoint-md}) {
+      font-size: common.rem(16);
+      line-height: common.rem(20);
+    }
+  }
+
   &__content {
     display: flex;
     align-items: center;
@@ -110,6 +128,10 @@
     }
   }
 
+  &-select.subgrid label {
+    width: inherit;
+  }
+
   &-select[aria-invalid="true"] label {
     --box-shadow-color: var(--color-red-700);
 
@@ -126,6 +148,12 @@
       align-items: center;
       gap: 0.75rem;
 
+      & svg {
+        background-color: var(--color-white);
+        -webkit-clip-path: circle(0.72rem at 50% 50%);
+        clip-path: circle(0.72rem at 50% 50%);
+      }
+
       & .af-radio__checked,
       & .af-radio__unchecked {
         width: 1.75rem;
@@ -173,6 +201,10 @@
     }
   }
 
+  &-select[aria-invalid="false"] label:has(input[type="radio"]) {
+    background-color: var(--color-white);
+  }
+
   &-select[aria-invalid="false"] label:has(input[type="radio"]:checked) {
     background-color: var(--color-blue-2);
     box-shadow: 0 0 0 2px var(--color-axa) inset;
@@ -187,11 +219,8 @@
   }
 
   & label input[type="radio"]:focus-visible ~ .af-radio__icons {
-    & .af-radio__unchecked,
-    & .af-radio__checked {
-      outline: 2px solid var(--color-blue-3);
-      outline-offset: 3px;
-    }
+    outline: 2px solid var(--color-blue-3);
+    outline-offset: 3px;
   }
 
   & label:hover:not(:has(input[type="radio"]:disabled)) {
@@ -212,7 +241,7 @@
     color: var(--color-gray-700);
 
     &--horizontal {
-      flex-direction: row;
+      flex-flow: row wrap;
     }
   }
 }