@axa-fr/design-system-look-and-feel-css 1.0.5-ci.18 → 1.0.5-ci.19

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-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 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 .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}

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,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,wCAEE,kBAAA,CACA,SAAA,CAFA,iBClBJ,CDsBI,4DAEE,kBAAA,CADA,YAAA,CAEA,UCpBN,CDsBM,sKAIE,kBAAA,CADA,cAAA,CADA,aCnBR,CDwBM,kFACE,YCtBR,CDyBM,oFACE,2BAAA,CACA,0BCvBR,CD6BI,8KAEE,0BAAA,CACA,yBC5BN,CDiCI,2EAEE,sBAAA,CADA,aAAA,CAEA,qBC/BN,CDkCI,6EACE,YChCN,CDoCE,4DACE,oCAAA,CACA,2CClCJ,CDqCE,sDACE,cCnCJ,CDqCI,0OAGE,oCAAA,CACA,mCCrCN,CDyCE,6DAEE,sCAAA,CACA,kDAAA,CAFA,oCAAA,CAIA,wCCxCJ,CD2CE,uEACE,uCAAA,CAEA,kDC1CJ,CD8CI,kMAEE,qCAAA,CACA,kBC7CN,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  & 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-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  & 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,sKAIE,kBAAA,CADA,cAAA,CADA,aCpBR,CDyBM,kFACE,YCvBR,CD0BM,oFACE,2BAAA,CACA,0BCxBR,CD8BI,8KAEE,0BAAA,CACA,yBC7BN,CDkCI,2EAEE,sBAAA,CADA,aAAA,CAEA,qBChCN,CDmCI,6EACE,YCjCN,CDqCE,4DACE,oCAAA,CACA,2CCnCJ,CDsCE,sDACE,cCpCJ,CDsCI,0OAGE,oCAAA,CACA,mCCtCN,CD0CE,6DAEE,sCAAA,CACA,kDAAA,CAFA,oCAAA,CAIA,wCCzCJ,CD4CE,uEACE,uCAAA,CAEA,kDC3CJ,CD+CI,kMAEE,qCAAA,CACA,kBC9CN,CDmDI,0FACE,sBAAA,CACA,qBCjDN,CDqDE,yEACE,mCAAA,CAEA,kDCpDJ,CDuDE,oBAQE,2BAAA,CAPA,YAAA,CACA,qBAAA,CAEA,mCAAA,CACA,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,mBCpDJ,CDuDI,gCACE,kBCrDN","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      & .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-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      & .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"]}

package/dist/Form/Checkbox/Checkbox.scss

@@ -133,6 +133,10 @@
     }
   }
 
+  &-select.subgrid label {
+    width: inherit;
+  }
+
   & label input[type="checkbox"] {
     position: absolute;
     margin-right: 0.5rem;

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-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[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 .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}

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,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,0CACE,uCAAA,CAEA,kDCvBJ,CD0BE,kCAEE,kBAAA,CACA,SAAA,CAFA,iBCtBJ,CD0BI,mDAEE,kBAAA,CADA,YAAA,CAEA,UCxBN,CD0BM,8IAIE,kBAAA,CADA,cAAA,CADA,aCvBR,CD4BM,sEACE,YC1BR,CD6BM,wEACE,2BAAA,CACA,0BC3BR,CDiCI,kEAEE,sBAAA,CADA,aAAA,CAEA,qBC/BN,CDkCI,oEACE,YChCN,CDoCE,iDACE,mCAAA,CAEA,kDCnCJ,CDsCE,gDACE,cCpCJ,CDsCI,+MAGE,2BAAA,CACA,0BCtCN,CD0CE,0EACE,oCAAA,CACA,2CCxCJ,CD2CE,2EAEE,sCAAA,CACA,kDAAA,CAFA,2BAAA,CAIA,wCC1CJ,CD8CI,0KAEE,qCAAA,CACA,kBC7CN,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[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-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[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,8IAIE,kBAAA,CADA,cAAA,CADA,aCxBR,CD6BM,sEACE,YC3BR,CD8BM,wEACE,2BAAA,CACA,0BC5BR,CDkCI,kEAEE,sBAAA,CADA,aAAA,CAEA,qBChCN,CDmCI,oEACE,YCjCN,CDqCE,iDACE,mCAAA,CAEA,kDCpCJ,CDuCE,gDACE,cCrCJ,CDuCI,+MAGE,2BAAA,CACA,0BCvCN,CD2CE,0EACE,oCAAA,CACA,2CCzCJ,CD4CE,2EAEE,sCAAA,CACA,kDAAA,CAFA,2BAAA,CAIA,wCC3CJ,CD+CI,0KAEE,qCAAA,CACA,kBC9CN,CDmDI,iFACE,sBAAA,CACA,qBCjDN,CDqDE,iBAQE,2BAAA,CAPA,YAAA,CACA,qBAAA,CAEA,mCAAA,CACA,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,mBClDJ,CDqDI,6BACE,kBCnDN","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      & .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-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      & .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"]}

package/dist/Form/Radio/Radio.scss

@@ -128,6 +128,10 @@
     }
   }
 
+  &-select.subgrid label {
+    width: inherit;
+  }
+
   &-select[aria-invalid="true"] label {
     --box-shadow-color: var(--color-red-700);
 

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

@@ -1 +1 @@
-main.example-form{padding-block:4rem}.form{--start:3;--cols:8}@media (width > 1023px){.form{--row-gap:calc(64/var(--font-size-base)*1rem)}}.form__header{--row-gap:calc(32/var(--font-size-base)*1rem)}.form__fields{--row-gap:2rem}@media (width > 667px){.form__fields .af-form__input-text{--cols:5}}@media (width > 1023px){.form__fields .af-form__input-text{--cols:4}.form__fields .af-form__input-text[type=email]{--cols:5}}@media (width > 1279px){.form__fields .af-form__input-text{--cols:3}.form__fields .af-form__input-text[type=email]{--cols:4}}.form__actions>:first-child{--cols:2}@media (width > 1023px){.form__actions>:first-child{--cols:3}}@media (width > 1279px){.form__actions>:first-child{--cols:2}}.form__actions>:last-child{--cols:2}@media (width > 667px){.form__actions>:last-child{--cols:3}}@media (width > 1279px){.form__actions>:last-child{--cols:2}}
+main.example-form{padding-block:4rem}.form{--start:3;--cols:8}@media (width > 1023px){.form{--row-gap:calc(64/var(--font-size-base)*1rem)}}.form__header{--row-gap:calc(32/var(--font-size-base)*1rem)}.form__fields{--row-gap:2rem}.form__fields .af-radio__container{--cols:4}.form__fields .af-radio__container .af-radio-select>*{--cols:2}.form__fields .af-checkbox__container{--cols:6}.form__fields .af-checkbox__container .af-checkbox-select{--row-gap:1rem}.form__fields .af-checkbox__container .af-checkbox-select>*{--cols:3}@media (width > 667px){.form__fields .af-form__input-text{--cols:5}}@media (width > 1023px){.form__fields .af-form__input-text{--cols:4}.form__fields .af-form__input-text[type=email]{--cols:5}}@media (width > 1279px){.form__fields .af-form__input-text{--cols:3}.form__fields .af-form__input-text[type=email]{--cols:4}}.form__actions>:first-child{--cols:2}@media (width > 1023px){.form__actions>:first-child{--cols:3}}@media (width > 1279px){.form__actions>:first-child{--cols:2}}.form__actions>:last-child{--cols:2}@media (width > 667px){.form__actions>:last-child{--cols:3}}@media (width > 1279px){.form__actions>:last-child{--cols:2}}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Grid/Grid-demo-example-form.scss%23sass","../../src/Grid/Grid-demo-example-form.scss"],"names":[],"mappings":"AAEA,kBACE,kBCDF,CDIA,MACE,SAAA,CCDF,QACA,CDEE,wBAHF,MAII,6CCCF,CACF,CDCE,cACE,6CCCJ,CDEE,cACE,cCAJ,CDGM,uBADF,mCAEI,QCAN,CACF,CDCM,wBAJF,mCAKI,QCEN,CDAM,+CACE,QCER,CACF,CDAM,wBAXF,mCAYI,QCGN,CDDM,+CACE,QCGR,CACF,CDGI,4BACE,QCDN,CDGM,wBAHF,4BAII,QCAN,CACF,CDEM,wBAPF,4BAQI,QCCN,CACF,CDEI,2BACE,QCAN,CDEM,uBAHF,2BAII,QCCN,CACF,CDCM,wBAPF,2BAQI,QCEN,CACF","file":"Grid-demo-example-form.css","sourcesContent":["@use \"../common/common.scss\" as common;\n\nmain.example-form {\n  padding-block: 4rem;\n}\n\n.form {\n  --start: 3;\n  --cols: 8;\n  @media (width > #{common.$breakpoint-md}) {\n    --row-gap: calc(64 / var(--font-size-base) * 1rem);\n  }\n\n  &__header {\n    --row-gap: calc(32 / var(--font-size-base) * 1rem);\n  }\n\n  &__fields {\n    --row-gap: 2rem;\n\n    .af-form__input-text {\n      @media (width > #{common.$breakpoint-sm}) {\n        --cols: 5;\n      }\n      @media (width > #{common.$breakpoint-md}) {\n        --cols: 4;\n\n        &[type=\"email\"] {\n          --cols: 5;\n        }\n      }\n      @media (width > #{common.$breakpoint-lg}) {\n        --cols: 3;\n\n        &[type=\"email\"] {\n          --cols: 4;\n        }\n      }\n    }\n  }\n\n  &__actions {\n    > :first-child {\n      --cols: 2;\n\n      @media (width > #{common.$breakpoint-md}) {\n        --cols: 3;\n      }\n\n      @media (width > #{common.$breakpoint-lg}) {\n        --cols: 2;\n      }\n    }\n\n    > :last-child {\n      --cols: 2;\n\n      @media (width > #{common.$breakpoint-sm}) {\n        --cols: 3;\n      }\n\n      @media (width > #{common.$breakpoint-lg}) {\n        --cols: 2;\n      }\n    }\n  }\n}\n","@use \"../common/common.scss\" as common;\n\nmain.example-form {\n  padding-block: 4rem;\n}\n\n.form {\n  --start: 3;\n  --cols: 8;\n  @media (width > #{common.$breakpoint-md}) {\n    --row-gap: calc(64 / var(--font-size-base) * 1rem);\n  }\n\n  &__header {\n    --row-gap: calc(32 / var(--font-size-base) * 1rem);\n  }\n\n  &__fields {\n    --row-gap: 2rem;\n\n    .af-form__input-text {\n      @media (width > #{common.$breakpoint-sm}) {\n        --cols: 5;\n      }\n      @media (width > #{common.$breakpoint-md}) {\n        --cols: 4;\n\n        &[type=\"email\"] {\n          --cols: 5;\n        }\n      }\n      @media (width > #{common.$breakpoint-lg}) {\n        --cols: 3;\n\n        &[type=\"email\"] {\n          --cols: 4;\n        }\n      }\n    }\n  }\n\n  &__actions {\n    > :first-child {\n      --cols: 2;\n\n      @media (width > #{common.$breakpoint-md}) {\n        --cols: 3;\n      }\n\n      @media (width > #{common.$breakpoint-lg}) {\n        --cols: 2;\n      }\n    }\n\n    > :last-child {\n      --cols: 2;\n\n      @media (width > #{common.$breakpoint-sm}) {\n        --cols: 3;\n      }\n\n      @media (width > #{common.$breakpoint-lg}) {\n        --cols: 2;\n      }\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../../src/Grid/Grid-demo-example-form.scss%23sass","../../src/Grid/Grid-demo-example-form.scss"],"names":[],"mappings":"AAEA,kBACE,kBCDF,CDIA,MACE,SAAA,CCDF,QACA,CDEE,wBAHF,MAII,6CCCF,CACF,CDCE,cACE,6CCCJ,CDEE,cACE,cCAJ,CDEI,mCACE,QCAN,CDEM,sDACE,QCAR,CDII,sCACE,QCFN,CDIM,0DACE,cCFR,CDIQ,4DACE,QCFV,CDQM,uBADF,mCAEI,QCLN,CACF,CDMM,wBAJF,mCAKI,QCHN,CDKM,+CACE,QCHR,CACF,CDKM,wBAXF,mCAYI,QCFN,CDIM,+CACE,QCFR,CACF,CDQI,4BACE,QCNN,CDQM,wBAHF,4BAII,QCLN,CACF,CDOM,wBAPF,4BAQI,QCJN,CACF,CDOI,2BACE,QCLN,CDOM,uBAHF,2BAII,QCJN,CACF,CDMM,wBAPF,2BAQI,QCHN,CACF","file":"Grid-demo-example-form.css","sourcesContent":["@use \"../common/common.scss\" as common;\n\nmain.example-form {\n  padding-block: 4rem;\n}\n\n.form {\n  --start: 3;\n  --cols: 8;\n  @media (width > #{common.$breakpoint-md}) {\n    --row-gap: calc(64 / var(--font-size-base) * 1rem);\n  }\n\n  &__header {\n    --row-gap: calc(32 / var(--font-size-base) * 1rem);\n  }\n\n  &__fields {\n    --row-gap: 2rem;\n\n    .af-radio__container {\n      --cols: 4;\n\n      .af-radio-select > * {\n        --cols: 2;\n      }\n    }\n\n    .af-checkbox__container {\n      --cols: 6;\n\n      .af-checkbox-select {\n        --row-gap: 1rem;\n\n        & > * {\n          --cols: 3;\n        }\n      }\n    }\n\n    .af-form__input-text {\n      @media (width > #{common.$breakpoint-sm}) {\n        --cols: 5;\n      }\n      @media (width > #{common.$breakpoint-md}) {\n        --cols: 4;\n\n        &[type=\"email\"] {\n          --cols: 5;\n        }\n      }\n      @media (width > #{common.$breakpoint-lg}) {\n        --cols: 3;\n\n        &[type=\"email\"] {\n          --cols: 4;\n        }\n      }\n    }\n  }\n\n  &__actions {\n    > :first-child {\n      --cols: 2;\n\n      @media (width > #{common.$breakpoint-md}) {\n        --cols: 3;\n      }\n\n      @media (width > #{common.$breakpoint-lg}) {\n        --cols: 2;\n      }\n    }\n\n    > :last-child {\n      --cols: 2;\n\n      @media (width > #{common.$breakpoint-sm}) {\n        --cols: 3;\n      }\n\n      @media (width > #{common.$breakpoint-lg}) {\n        --cols: 2;\n      }\n    }\n  }\n}\n","@use \"../common/common.scss\" as common;\n\nmain.example-form {\n  padding-block: 4rem;\n}\n\n.form {\n  --start: 3;\n  --cols: 8;\n  @media (width > #{common.$breakpoint-md}) {\n    --row-gap: calc(64 / var(--font-size-base) * 1rem);\n  }\n\n  &__header {\n    --row-gap: calc(32 / var(--font-size-base) * 1rem);\n  }\n\n  &__fields {\n    --row-gap: 2rem;\n\n    .af-radio__container {\n      --cols: 4;\n\n      .af-radio-select > * {\n        --cols: 2;\n      }\n    }\n\n    .af-checkbox__container {\n      --cols: 6;\n\n      .af-checkbox-select {\n        --row-gap: 1rem;\n\n        & > * {\n          --cols: 3;\n        }\n      }\n    }\n\n    .af-form__input-text {\n      @media (width > #{common.$breakpoint-sm}) {\n        --cols: 5;\n      }\n      @media (width > #{common.$breakpoint-md}) {\n        --cols: 4;\n\n        &[type=\"email\"] {\n          --cols: 5;\n        }\n      }\n      @media (width > #{common.$breakpoint-lg}) {\n        --cols: 3;\n\n        &[type=\"email\"] {\n          --cols: 4;\n        }\n      }\n    }\n  }\n\n  &__actions {\n    > :first-child {\n      --cols: 2;\n\n      @media (width > #{common.$breakpoint-md}) {\n        --cols: 3;\n      }\n\n      @media (width > #{common.$breakpoint-lg}) {\n        --cols: 2;\n      }\n    }\n\n    > :last-child {\n      --cols: 2;\n\n      @media (width > #{common.$breakpoint-sm}) {\n        --cols: 3;\n      }\n\n      @media (width > #{common.$breakpoint-lg}) {\n        --cols: 2;\n      }\n    }\n  }\n}\n"]}

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

@@ -18,6 +18,26 @@ main.example-form {
   &__fields {
     --row-gap: 2rem;
 
+    .af-radio__container {
+      --cols: 4;
+
+      .af-radio-select > * {
+        --cols: 2;
+      }
+    }
+
+    .af-checkbox__container {
+      --cols: 6;
+
+      .af-checkbox-select {
+        --row-gap: 1rem;
+
+        & > * {
+          --cols: 3;
+        }
+      }
+    }
+
     .af-form__input-text {
       @media (width > #{common.$breakpoint-sm}) {
         --cols: 5;