@axa-fr/design-system-apollo-css 1.0.5-alpha.285 → 1.0.5-alpha.290

package/dist/Divider/DividerLF.css

@@ -1 +1 @@
-.af-divider{border:0;border-top:1px solid var(--divider-border-color);margin:0;--divider-border-color:var(--color-gray-300)}
+.af-divider{border:0;border-top:1px solid var(--divider-border-color);margin:0;--divider-border-color:var(--color-blue-400)}

package/dist/Divider/DividerLF.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Divider/DividerCommon.scss","../../src/Divider/DividerLF.scss","../../src/Divider/DividerLF.scss%23sass"],"names":[],"mappings":"AAAA,YCEA,QAAA,CDCE,gDAAA,CAFA,QAAA,CEEA,4CDCF","file":"DividerLF.css","sourcesContent":[".af-divider {\n  margin: 0;\n  border: 0;\n  border-top: 1px solid var(--divider-border-color);\n}\n","@use \"./DividerCommon\";\n\n.af-divider {\n  --divider-border-color: var(--color-gray-300);\n}\n","@use \"./DividerCommon\";\n\n.af-divider {\n  --divider-border-color: var(--color-gray-300);\n}\n"]}
+{"version":3,"sources":["../../src/Divider/DividerCommon.scss","../../src/Divider/DividerLF.scss","../../src/Divider/DividerLF.scss%23sass"],"names":[],"mappings":"AAAA,YCEA,QAAA,CDCE,gDAAA,CAFA,QAAA,CEEA,4CDCF","file":"DividerLF.css","sourcesContent":[".af-divider {\n  margin: 0;\n  border: 0;\n  border-top: 1px solid var(--divider-border-color);\n}\n","@use \"./DividerCommon\";\n\n.af-divider {\n  --divider-border-color: var(--color-blue-400);\n}\n","@use \"./DividerCommon\";\n\n.af-divider {\n  --divider-border-color: var(--color-blue-400);\n}\n"]}

package/dist/Divider/DividerLF.scss

@@ -1,5 +1,5 @@
 @use "./DividerCommon";
 
 .af-divider {
-  --divider-border-color: var(--color-gray-300);
+  --divider-border-color: var(--color-blue-400);
 }

package/dist/Form/Checkbox/CardCheckbox/CardCheckboxApollo.css

@@ -0,0 +1 @@
+.af-card-checkbox__container{display:flex;flex-direction:column;gap:1rem}.af-card-checkbox__legend{color:var(--card-checkbox-color);display:grid;font-size:calc(18/var(--font-size-base)*1rem);font-weight:600;margin-block-end:calc(4/var(--font-size-base)*1rem);row-gap:calc(4/var(--font-size-base)*1rem)}.af-card-checkbox__legend>p{margin:0}.af-card-checkbox__description{color:var(--card-checkbox-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400;line-height:calc(16/var(--font-size-base)*1rem)}@media (width > 667px){.af-card-checkbox__description{font-size:calc(18/var(--font-size-base)*1rem);line-height:calc(18/var(--font-size-base)*1rem)}}.af-card-checkbox__choices{display:flex;flex-direction:column;row-gap:calc(8/var(--font-size-base)*1rem)}.af-card-checkbox-group{align-items:stretch;display:flex;font-family:var(--card-checkbox-font-family);font-style:normal;font-weight:400;gap:1rem;line-height:calc(20/var(--font-size-base)*1rem);list-style:none;margin:0;padding:0}.af-card-checkbox-group--horizontal{flex-direction:var(--card-checkbox-flex-direction)}.af-card-checkbox-group--horizontal .af-card-checkbox-label{align-items:var(--card-checkbox-align-items);flex-direction:var(--card-checkbox-flex-direction)}.af-card-checkbox-group--horizontal .af-card-checkbox-label .af-card-checkbox-content{flex-direction:var(--card-checkbox-flex-direction)}.af-card-checkbox-group--horizontal .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{align-items:var(--card-checkbox-align-item);flex-direction:var(--card-checkbox-flex-direction);text-align:left}.af-card-checkbox-group--vertical{flex-direction:var(--card-checkbox-flex-direction)}.af-card-checkbox-group--vertical>*{flex-basis:0;flex-grow:1}.af-card-checkbox-group--vertical .af-card-checkbox-label{align-items:var(--card-checkbox-align-items);flex-direction:var(--card-checkbox-flex-direction);height:100%;justify-content:var(--card-checkbox-justify-content)}.af-card-checkbox-group--vertical .af-card-checkbox-label .af-card-checkbox-content{flex:1 1;flex-direction:var(--card-checkbox-flex-direction);width:100%}.af-card-checkbox-group--vertical .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{align-items:var(--card-checkbox-align-item);flex-direction:var(--card-checkbox-flex-direction);text-align:center}.af-card-checkbox-group .af-card-checkbox-label{align-self:stretch;border:1px solid var(--card-checkbox-border-color);border-radius:var(--card-checkbox-border-radius);cursor:pointer;display:flex;flex:1 1;gap:calc(12/var(--font-size-base)*1rem);padding:1rem}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content{align-items:center;display:flex;gap:calc(4/var(--font-size-base)*1rem)}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{display:flex;font-size:1rem;justify-content:center;line-height:calc(20/var(--font-size-base)*1rem)}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:first-child{color:var(--card-checkbox-label-text-color);font-size:calc(18/var(--font-size-base)*1rem);font-weight:400}@media (width < 667px){.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:first-child{font-size:calc(16/var(--font-size-base)*1rem);font-weight:400}}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:not(:first-child){color:var(--card-checkbox-label-text-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400}@media (width < 667px){.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:not(:first-child){font-size:calc(14/var(--font-size-base)*1rem);font-weight:400}}.af-card-checkbox-group .af-card-checkbox-label [aria-invalid=true],.af-card-checkbox-group .af-card-checkbox-label:focus-visible,.af-card-checkbox-group .af-card-checkbox-label:focus-within,.af-card-checkbox-group .af-card-checkbox-label:has(input:checked),.af-card-checkbox-group .af-card-checkbox-label:hover{outline:1px solid var(--card-checkbox-outline-color)}.af-card-checkbox-group .af-card-checkbox-label:has(input:checked) .af-card-checkbox-content-description>span:first-child{font-weight:600}.af-card-checkbox__label-container{--font-size-base:calc(16/var(--font-size-base)*1rem)}.af-card-checkbox__legend{--card-checkbox-color:var(--neutral-100)}.af-card-checkbox__legend [aria-hidden]{display:none}.af-card-checkbox__description{--card-checkbox-color:var(--neutral-80)}.af-card-checkbox-group--horizontal{--card-checkbox-flex-direction:column}.af-card-checkbox-group--horizontal .af-card-checkbox-label{--card-checkbox-flex-direction:row}.af-card-checkbox-group--horizontal .af-card-checkbox-label .af-card-checkbox-content{--card-checkbox-flex-direction:row;--card-checkbox-margin-left:calc(12/var(--font-size-base)*1rem)}.af-card-checkbox-group--horizontal .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{--card-checkbox-flex-direction:column;--card-checkbox-align-item:flex-start}.af-card-checkbox-group--horizontal .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:first-child{--card-checkbox-label-text-color:var(--axa-blue-100)}.af-card-checkbox-group--vertical{--card-checkbox-flex-direction:row}.af-card-checkbox-group--vertical .af-card-checkbox-label{--card-checkbox-flex-direction:column-reverse}.af-card-checkbox-group--vertical .af-card-checkbox-label .af-card-checkbox-content{--card-checkbox-flex-direction:column;--card-checkbox-margin-left:calc(2/var(--font-size-base)*1rem)}.af-card-checkbox-group--vertical .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{--card-checkbox-flex-direction:column;--card-checkbox-align-item:center}.af-card-checkbox-group .af-card-checkbox-label{--card-checkbox-border-color:var(--axa-blue-65);--card-checkbox-border-radius:calc(8/var(--font-size-base)*1rem);--card-checkbox-align-items:center;--card-checkbox-outline-color:var(--card-checkbox-border-color)}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:first-child{--card-checkbox-label-text-color:var(--axa-blue-100)}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:not(:first-child){--card-checkbox-label-text-color:var(--neutral-80)}.af-card-checkbox-group .af-card-checkbox-label[aria-invalid=true]{--card-checkbox-background-color:var(--axa-red-4);--card-checkbox-border-color:var(--red-alert-100)}.af-card-checkbox-group .af-card-checkbox-label[aria-invalid=true] .af-card-checkbox-content-description>span:first-child{--card-checkbox-label-text-color:var(--neutral-80)}.af-card-checkbox-group .af-card-checkbox-label:hover{--card-checkbox-border-color:var(--axa-blue-100);--card-checkbox-background-color:var(--white)}.af-card-checkbox-group .af-card-checkbox-label:hover .af-card-checkbox-content-description>span:first-child{--card-checkbox-label-text-color:var(--axa-blue-100)}.af-card-checkbox-group .af-card-checkbox-label:has(input:checked){--card-checkbox-border-color:var(--axa-blue-100);--card-checkbox-background-color:var(--axa-blue-4)}.af-card-checkbox-group .af-card-checkbox-label:has(input:checked) .af-card-checkbox-content-description>span:first-child{--card-checkbox-label-text-color:var(--axa-blue-100)}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxCommon.scss","../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxApollo.scss","../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxApollo.scss%23sass"],"names":[],"mappings":"AAGE,6BCFF,YAAA,CDII,qBAAA,CCFJ,QACA,CDKE,0BAME,gCAAA,CALA,YAAA,CAGA,6CAAA,CACA,eAAA,CAHA,mDAAA,CACA,0CCAJ,CDKI,4BACE,QCHN,CDOE,+BAIE,gCAAA,CAHA,6CAAA,CACA,eAAA,CACA,+CCJJ,CDOI,uBANF,+BAOI,6CAAA,CACA,+CCJJ,CACF,CDOE,2BACE,YAAA,CACA,qBAAA,CACA,0CCLJ,CDQE,wBAIE,mBAAA,CAHA,YAAA,CAKA,4CAAA,CACA,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,+CAAA,CACA,eAAA,CARA,QAAA,CACA,SCCJ,CDQI,oCACE,kDCNN,CDQM,4DAEE,4CAAA,CADA,kDCLR,CDQQ,sFACE,kDCNV,CDQU,4HAEE,2CAAA,CADA,kDAAA,CAEA,eCNZ,CDYI,kCACE,kDCVN,CDYM,oCACE,YAAA,CACA,WCVR,CDaM,0DAGE,4CAAA,CADA,kDAAA,CADA,WAAA,CAGA,oDCXR,CDaQ,oFAEE,QAAA,CACA,kDAAA,CAFA,UCTV,CDaU,0HAEE,2CAAA,CADA,kDAAA,CAEA,iBCXZ,CDiBI,gDAME,kBAAA,CAHA,kDAAA,CACA,gDAAA,CAIA,cAAA,CAPA,YAAA,CAIA,QAAA,CAEA,uCAAA,CALA,YCTN,CDiBM,0EAEE,kBAAA,CADA,YAAA,CAEA,sCCfR,CDiBQ,gHACE,YAAA,CAEA,cAAA,CADA,sBAAA,CAEA,+CCfV,CDiBU,iIAGE,2CAAA,CClBZ,6CAAA,CDiBY,eCdZ,CDiBY,uBALF,iIAMI,6CAAA,CACA,eCdZ,CACF,CDiBU,uIAGE,2CAAA,CAFA,6CAAA,CACA,eCdZ,CDiBY,uBALF,uIAMI,6CAAA,CACA,eCdZ,CACF,CDmBM,wTAKE,oDCpBR,CDwBQ,0HACE,eCtBV,CChIE,mCACE,oDDmIJ,CChIE,0BACE,wCDkIJ,CChII,wCACE,YDkIN,CC9HE,+BACE,uCDgIJ,CC5HI,oCACE,qCD8HN,CC5HM,4DACE,kCD8HR,CC5HQ,sFACE,kCAAA,CACA,+DD8HV,CC5HU,4HACE,qCAAA,CACA,qCD8HZ,CC5HY,6IACE,oDD8Hd,CCvHI,kCACE,kCDyHN,CCvHM,0DACE,6CDyHR,CCvHQ,oFACE,qCAAA,CACA,8DDyHV,CCvHU,0HACE,qCAAA,CACA,iCDyHZ,CCnHI,gDACE,+CAAA,CACA,gEAAA,CACA,kCAAA,CACA,+DDqHN,CClHQ,iIACE,oDDoHV,CCjHQ,uIACE,kDDmHV,CC/GM,mEACE,iDAAA,CACA,iDDiHR,CC/GQ,0HACE,kDDiHV,CC7GM,sDACE,gDAAA,CACA,6CD+GR,CC7GQ,6GACE,oDD+GV,CC3GM,mEACE,gDAAA,CACA,kDD6GR,CC3GQ,0HACE,oDD6GV","file":"CardCheckboxApollo.css","sourcesContent":["@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-card-checkbox {\n  &__container {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n  }\n\n  &__legend {\n    display: grid;\n    margin-block-end: calc(4 / var(--font-size-base) * 1rem);\n    row-gap: calc(4 / var(--font-size-base) * 1rem);\n    font-size: calc(18 / var(--font-size-base) * 1rem);\n    font-weight: 600;\n    color: var(--card-checkbox-color);\n\n    & > p {\n      margin: 0;\n    }\n  }\n\n  &__description {\n    font-size: calc(16 / var(--font-size-base) * 1rem);\n    font-weight: 400;\n    line-height: calc(16 / var(--font-size-base) * 1rem);\n    color: var(--card-checkbox-color);\n\n    @media (width > #{breakpoints.$breakpoint-sm}) {\n      font-size: calc(18 / var(--font-size-base) * 1rem);\n      line-height: calc(18 / var(--font-size-base) * 1rem);\n    }\n  }\n\n  &__choices {\n    display: flex;\n    flex-direction: column;\n    row-gap: calc(8 / var(--font-size-base) * 1rem);\n  }\n\n  &-group {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    align-items: stretch;\n    gap: 1rem;\n    font-family: var(--card-checkbox-font-family);\n    font-style: normal;\n    font-weight: 400;\n    line-height: calc(20 / var(--font-size-base) * 1rem);\n    list-style: none;\n\n    &--horizontal {\n      flex-direction: var(--card-checkbox-flex-direction);\n\n      .af-card-checkbox-label {\n        flex-direction: var(--card-checkbox-flex-direction);\n        align-items: var(--card-checkbox-align-items);\n\n        .af-card-checkbox-content {\n          flex-direction: var(--card-checkbox-flex-direction);\n\n          .af-card-checkbox-content-description {\n            flex-direction: var(--card-checkbox-flex-direction);\n            align-items: var(--card-checkbox-align-item);\n            text-align: left;\n          }\n        }\n      }\n    }\n\n    &--vertical {\n      flex-direction: var(--card-checkbox-flex-direction);\n\n      > * {\n        flex-basis: 0;\n        flex-grow: 1;\n      }\n\n      .af-card-checkbox-label {\n        height: 100%;\n        flex-direction: var(--card-checkbox-flex-direction);\n        align-items: var(--card-checkbox-align-items);\n        justify-content: var(--card-checkbox-justify-content);\n\n        .af-card-checkbox-content {\n          width: 100%;\n          flex: 1;\n          flex-direction: var(--card-checkbox-flex-direction);\n\n          .af-card-checkbox-content-description {\n            flex-direction: var(--card-checkbox-flex-direction);\n            align-items: var(--card-checkbox-align-item);\n            text-align: center;\n          }\n        }\n      }\n    }\n\n    .af-card-checkbox-label {\n      display: flex;\n      padding: 1rem;\n      border: 1px solid var(--card-checkbox-border-color);\n      border-radius: var(--card-checkbox-border-radius);\n      flex: 1;\n      align-self: stretch;\n      gap: calc(12 / var(--font-size-base) * 1rem);\n      cursor: pointer;\n\n      .af-card-checkbox-content {\n        display: flex;\n        align-items: center;\n        gap: calc(4 / var(--font-size-base) * 1rem);\n\n        .af-card-checkbox-content-description {\n          display: flex;\n          justify-content: center;\n          font-size: 1rem;\n          line-height: calc(20 / var(--font-size-base) * 1rem);\n\n          & > span:first-child {\n            font-size: calc(18 / var(--font-size-base) * 1rem);\n            font-weight: 400;\n            color: var(--card-checkbox-label-text-color);\n\n            @media (width < #{breakpoints.$breakpoint-sm}) {\n              font-size: calc(16 / var(--font-size-base) * 1rem);\n              font-weight: 400;\n            }\n          }\n\n          & > span:not(:first-child) {\n            font-size: calc(16 / var(--font-size-base) * 1rem);\n            font-weight: 400;\n            color: var(--card-checkbox-label-text-color);\n\n            @media (width < #{breakpoints.$breakpoint-sm}) {\n              font-size: calc(14 / var(--font-size-base) * 1rem);\n              font-weight: 400;\n            }\n          }\n        }\n      }\n\n      &:hover,\n      &:focus-visible,\n      &:focus-within,\n      &:has(input:checked),\n      [aria-invalid=\"true\"] {\n        outline: 1px solid var(--card-checkbox-outline-color);\n      }\n\n      &:has(input:checked) {\n        .af-card-checkbox-content-description > span:first-child {\n          font-weight: 600;\n        }\n      }\n    }\n  }\n}\n","@use \"CardCheckboxCommon\";\n@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-card-checkbox {\n  &__label-container {\n    --font-size-base: calc(16 / var(--font-size-base) * 1rem);\n  }\n\n  &__legend {\n    --card-checkbox-color: var(--neutral-100);\n\n    [aria-hidden] {\n      display: none;\n    }\n  }\n\n  &__description {\n    --card-checkbox-color: var(--neutral-80);\n  }\n\n  &-group {\n    &--horizontal {\n      --card-checkbox-flex-direction: column;\n\n      .af-card-checkbox-label {\n        --card-checkbox-flex-direction: row;\n\n        .af-card-checkbox-content {\n          --card-checkbox-flex-direction: row;\n          --card-checkbox-margin-left: calc(12 / var(--font-size-base) * 1rem);\n\n          .af-card-checkbox-content-description {\n            --card-checkbox-flex-direction: column;\n            --card-checkbox-align-item: flex-start;\n\n            & > span:first-child {\n              --card-checkbox-label-text-color: var(--axa-blue-100);\n            }\n          }\n        }\n      }\n    }\n\n    &--vertical {\n      --card-checkbox-flex-direction: row;\n\n      .af-card-checkbox-label {\n        --card-checkbox-flex-direction: column-reverse;\n\n        .af-card-checkbox-content {\n          --card-checkbox-flex-direction: column;\n          --card-checkbox-margin-left: calc(2 / var(--font-size-base) * 1rem);\n\n          .af-card-checkbox-content-description {\n            --card-checkbox-flex-direction: column;\n            --card-checkbox-align-item: center;\n          }\n        }\n      }\n    }\n\n    .af-card-checkbox-label {\n      --card-checkbox-border-color: var(--axa-blue-65);\n      --card-checkbox-border-radius: calc(8 / var(--font-size-base) * 1rem);\n      --card-checkbox-align-items: center;\n      --card-checkbox-outline-color: var(--card-checkbox-border-color);\n\n      .af-card-checkbox-content .af-card-checkbox-content-description > span {\n        &:first-child {\n          --card-checkbox-label-text-color: var(--axa-blue-100);\n        }\n\n        &:not(:first-child) {\n          --card-checkbox-label-text-color: var(--neutral-80);\n        }\n      }\n\n      &[aria-invalid=\"true\"] {\n        --card-checkbox-background-color: var(--axa-red-4);\n        --card-checkbox-border-color: var(--red-alert-100);\n\n        .af-card-checkbox-content-description > span:first-child {\n          --card-checkbox-label-text-color: var(--neutral-80);\n        }\n      }\n\n      &:hover {\n        --card-checkbox-border-color: var(--axa-blue-100);\n        --card-checkbox-background-color: var(--white);\n\n        .af-card-checkbox-content-description > span:first-child {\n          --card-checkbox-label-text-color: var(--axa-blue-100);\n        }\n      }\n\n      &:has(input:checked) {\n        --card-checkbox-border-color: var(--axa-blue-100);\n        --card-checkbox-background-color: var(--axa-blue-4);\n\n        .af-card-checkbox-content-description > span:first-child {\n          --card-checkbox-label-text-color: var(--axa-blue-100);\n        }\n      }\n    }\n  }\n}\n","@use \"CardCheckboxCommon\";\n@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-card-checkbox {\n  &__label-container {\n    --font-size-base: calc(16 / var(--font-size-base) * 1rem);\n  }\n\n  &__legend {\n    --card-checkbox-color: var(--neutral-100);\n\n    [aria-hidden] {\n      display: none;\n    }\n  }\n\n  &__description {\n    --card-checkbox-color: var(--neutral-80);\n  }\n\n  &-group {\n    &--horizontal {\n      --card-checkbox-flex-direction: column;\n\n      .af-card-checkbox-label {\n        --card-checkbox-flex-direction: row;\n\n        .af-card-checkbox-content {\n          --card-checkbox-flex-direction: row;\n          --card-checkbox-margin-left: calc(12 / var(--font-size-base) * 1rem);\n\n          .af-card-checkbox-content-description {\n            --card-checkbox-flex-direction: column;\n            --card-checkbox-align-item: flex-start;\n\n            & > span:first-child {\n              --card-checkbox-label-text-color: var(--axa-blue-100);\n            }\n          }\n        }\n      }\n    }\n\n    &--vertical {\n      --card-checkbox-flex-direction: row;\n\n      .af-card-checkbox-label {\n        --card-checkbox-flex-direction: column-reverse;\n\n        .af-card-checkbox-content {\n          --card-checkbox-flex-direction: column;\n          --card-checkbox-margin-left: calc(2 / var(--font-size-base) * 1rem);\n\n          .af-card-checkbox-content-description {\n            --card-checkbox-flex-direction: column;\n            --card-checkbox-align-item: center;\n          }\n        }\n      }\n    }\n\n    .af-card-checkbox-label {\n      --card-checkbox-border-color: var(--axa-blue-65);\n      --card-checkbox-border-radius: calc(8 / var(--font-size-base) * 1rem);\n      --card-checkbox-align-items: center;\n      --card-checkbox-outline-color: var(--card-checkbox-border-color);\n\n      .af-card-checkbox-content .af-card-checkbox-content-description > span {\n        &:first-child {\n          --card-checkbox-label-text-color: var(--axa-blue-100);\n        }\n\n        &:not(:first-child) {\n          --card-checkbox-label-text-color: var(--neutral-80);\n        }\n      }\n\n      &[aria-invalid=\"true\"] {\n        --card-checkbox-background-color: var(--axa-red-4);\n        --card-checkbox-border-color: var(--red-alert-100);\n\n        .af-card-checkbox-content-description > span:first-child {\n          --card-checkbox-label-text-color: var(--neutral-80);\n        }\n      }\n\n      &:hover {\n        --card-checkbox-border-color: var(--axa-blue-100);\n        --card-checkbox-background-color: var(--white);\n\n        .af-card-checkbox-content-description > span:first-child {\n          --card-checkbox-label-text-color: var(--axa-blue-100);\n        }\n      }\n\n      &:has(input:checked) {\n        --card-checkbox-border-color: var(--axa-blue-100);\n        --card-checkbox-background-color: var(--axa-blue-4);\n\n        .af-card-checkbox-content-description > span:first-child {\n          --card-checkbox-label-text-color: var(--axa-blue-100);\n        }\n      }\n    }\n  }\n}\n"]}

package/dist/Form/Checkbox/CardCheckbox/CardCheckboxApollo.scss

@@ -0,0 +1,106 @@
+@use "CardCheckboxCommon";
+@use "../../../common/breakpoints" as breakpoints;
+
+.af-card-checkbox {
+  &__label-container {
+    --font-size-base: calc(16 / var(--font-size-base) * 1rem);
+  }
+
+  &__legend {
+    --card-checkbox-color: var(--neutral-100);
+
+    [aria-hidden] {
+      display: none;
+    }
+  }
+
+  &__description {
+    --card-checkbox-color: var(--neutral-80);
+  }
+
+  &-group {
+    &--horizontal {
+      --card-checkbox-flex-direction: column;
+
+      .af-card-checkbox-label {
+        --card-checkbox-flex-direction: row;
+
+        .af-card-checkbox-content {
+          --card-checkbox-flex-direction: row;
+          --card-checkbox-margin-left: calc(12 / var(--font-size-base) * 1rem);
+
+          .af-card-checkbox-content-description {
+            --card-checkbox-flex-direction: column;
+            --card-checkbox-align-item: flex-start;
+
+            & > span:first-child {
+              --card-checkbox-label-text-color: var(--axa-blue-100);
+            }
+          }
+        }
+      }
+    }
+
+    &--vertical {
+      --card-checkbox-flex-direction: row;
+
+      .af-card-checkbox-label {
+        --card-checkbox-flex-direction: column-reverse;
+
+        .af-card-checkbox-content {
+          --card-checkbox-flex-direction: column;
+          --card-checkbox-margin-left: calc(2 / var(--font-size-base) * 1rem);
+
+          .af-card-checkbox-content-description {
+            --card-checkbox-flex-direction: column;
+            --card-checkbox-align-item: center;
+          }
+        }
+      }
+    }
+
+    .af-card-checkbox-label {
+      --card-checkbox-border-color: var(--axa-blue-65);
+      --card-checkbox-border-radius: calc(8 / var(--font-size-base) * 1rem);
+      --card-checkbox-align-items: center;
+      --card-checkbox-outline-color: var(--card-checkbox-border-color);
+
+      .af-card-checkbox-content .af-card-checkbox-content-description > span {
+        &:first-child {
+          --card-checkbox-label-text-color: var(--axa-blue-100);
+        }
+
+        &:not(:first-child) {
+          --card-checkbox-label-text-color: var(--neutral-80);
+        }
+      }
+
+      &[aria-invalid="true"] {
+        --card-checkbox-background-color: var(--axa-red-4);
+        --card-checkbox-border-color: var(--red-alert-100);
+
+        .af-card-checkbox-content-description > span:first-child {
+          --card-checkbox-label-text-color: var(--neutral-80);
+        }
+      }
+
+      &:hover {
+        --card-checkbox-border-color: var(--axa-blue-100);
+        --card-checkbox-background-color: var(--white);
+
+        .af-card-checkbox-content-description > span:first-child {
+          --card-checkbox-label-text-color: var(--axa-blue-100);
+        }
+      }
+
+      &:has(input:checked) {
+        --card-checkbox-border-color: var(--axa-blue-100);
+        --card-checkbox-background-color: var(--axa-blue-4);
+
+        .af-card-checkbox-content-description > span:first-child {
+          --card-checkbox-label-text-color: var(--axa-blue-100);
+        }
+      }
+    }
+  }
+}

package/dist/Form/Checkbox/CardCheckbox/CardCheckboxCommon.css

@@ -0,0 +1 @@
+.af-card-checkbox__container{display:flex;flex-direction:column;gap:1rem}.af-card-checkbox__legend{color:var(--card-checkbox-color);display:grid;font-size:calc(18/var(--font-size-base)*1rem);font-weight:600;margin-block-end:calc(4/var(--font-size-base)*1rem);row-gap:calc(4/var(--font-size-base)*1rem)}.af-card-checkbox__legend>p{margin:0}.af-card-checkbox__description{color:var(--card-checkbox-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400;line-height:calc(16/var(--font-size-base)*1rem)}@media (width > 667px){.af-card-checkbox__description{font-size:calc(18/var(--font-size-base)*1rem);line-height:calc(18/var(--font-size-base)*1rem)}}.af-card-checkbox__choices{display:flex;flex-direction:column;row-gap:calc(8/var(--font-size-base)*1rem)}.af-card-checkbox-group{align-items:stretch;display:flex;font-family:var(--card-checkbox-font-family);font-style:normal;font-weight:400;gap:1rem;line-height:calc(20/var(--font-size-base)*1rem);list-style:none;margin:0;padding:0}.af-card-checkbox-group--horizontal{flex-direction:var(--card-checkbox-flex-direction)}.af-card-checkbox-group--horizontal .af-card-checkbox-label{align-items:var(--card-checkbox-align-items);flex-direction:var(--card-checkbox-flex-direction)}.af-card-checkbox-group--horizontal .af-card-checkbox-label .af-card-checkbox-content{flex-direction:var(--card-checkbox-flex-direction)}.af-card-checkbox-group--horizontal .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{align-items:var(--card-checkbox-align-item);flex-direction:var(--card-checkbox-flex-direction);text-align:left}.af-card-checkbox-group--vertical{flex-direction:var(--card-checkbox-flex-direction)}.af-card-checkbox-group--vertical>*{flex-basis:0;flex-grow:1}.af-card-checkbox-group--vertical .af-card-checkbox-label{align-items:var(--card-checkbox-align-items);flex-direction:var(--card-checkbox-flex-direction);height:100%;justify-content:var(--card-checkbox-justify-content)}.af-card-checkbox-group--vertical .af-card-checkbox-label .af-card-checkbox-content{flex:1 1;flex-direction:var(--card-checkbox-flex-direction);width:100%}.af-card-checkbox-group--vertical .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{align-items:var(--card-checkbox-align-item);flex-direction:var(--card-checkbox-flex-direction);text-align:center}.af-card-checkbox-group .af-card-checkbox-label{align-self:stretch;border:1px solid var(--card-checkbox-border-color);border-radius:var(--card-checkbox-border-radius);cursor:pointer;display:flex;flex:1 1;gap:calc(12/var(--font-size-base)*1rem);padding:1rem}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content{align-items:center;display:flex;gap:calc(4/var(--font-size-base)*1rem)}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{display:flex;font-size:1rem;justify-content:center;line-height:calc(20/var(--font-size-base)*1rem)}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:first-child{color:var(--card-checkbox-label-text-color);font-size:calc(18/var(--font-size-base)*1rem);font-weight:400}@media (width < 667px){.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:first-child{font-size:calc(16/var(--font-size-base)*1rem);font-weight:400}}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:not(:first-child){color:var(--card-checkbox-label-text-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400}@media (width < 667px){.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:not(:first-child){font-size:calc(14/var(--font-size-base)*1rem);font-weight:400}}.af-card-checkbox-group .af-card-checkbox-label [aria-invalid=true],.af-card-checkbox-group .af-card-checkbox-label:focus-visible,.af-card-checkbox-group .af-card-checkbox-label:focus-within,.af-card-checkbox-group .af-card-checkbox-label:has(input:checked),.af-card-checkbox-group .af-card-checkbox-label:hover{outline:1px solid var(--card-checkbox-outline-color)}.af-card-checkbox-group .af-card-checkbox-label:has(input:checked) .af-card-checkbox-content-description>span:first-child{font-weight:600}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxCommon.scss%23sass","../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxCommon.scss"],"names":[],"mappings":"AAGE,6BACE,YAAA,CCFJ,qBAAA,CDII,QCFJ,CDKE,0BAME,gCAAA,CALA,YAAA,CAGA,6CAAA,CACA,eAAA,CAHA,mDAAA,CACA,0CCAJ,CDKI,4BACE,QCHN,CDOE,+BAIE,gCAAA,CAHA,6CAAA,CACA,eAAA,CACA,+CCJJ,CDOI,uBANF,+BAOI,6CAAA,CACA,+CCJJ,CACF,CDOE,2BACE,YAAA,CACA,qBAAA,CACA,0CCLJ,CDQE,wBAIE,mBAAA,CAHA,YAAA,CAKA,4CAAA,CACA,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,+CAAA,CACA,eAAA,CARA,QAAA,CACA,SCCJ,CDQI,oCACE,kDCNN,CDQM,4DAEE,4CAAA,CADA,kDCLR,CDQQ,sFACE,kDCNV,CDQU,4HAEE,2CAAA,CADA,kDAAA,CAEA,eCNZ,CDYI,kCACE,kDCVN,CDYM,oCACE,YAAA,CACA,WCVR,CDaM,0DAGE,4CAAA,CADA,kDAAA,CADA,WAAA,CAGA,oDCXR,CDaQ,oFAEE,QAAA,CACA,kDAAA,CAFA,UCTV,CDaU,0HAEE,2CAAA,CADA,kDAAA,CAEA,iBCXZ,CDiBI,gDAME,kBAAA,CAHA,kDAAA,CACA,gDAAA,CAIA,cAAA,CAPA,YAAA,CAIA,QAAA,CAEA,uCAAA,CALA,YCTN,CDiBM,0EAEE,kBAAA,CADA,YAAA,CAEA,sCCfR,CDiBQ,gHACE,YAAA,CAEA,cAAA,CADA,sBAAA,CAEA,+CCfV,CDiBU,iIAGE,2CAAA,CAFA,6CAAA,CACA,eCdZ,CDiBY,uBALF,iIAMI,6CAAA,CACA,eCdZ,CACF,CDiBU,uIAGE,2CAAA,CAFA,6CAAA,CACA,eCdZ,CDiBY,uBALF,uIAMI,6CAAA,CACA,eCdZ,CACF,CDmBM,wTAKE,oDCpBR,CDwBQ,0HACE,eCtBV","file":"CardCheckboxCommon.css","sourcesContent":["@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-card-checkbox {\n  &__container {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n  }\n\n  &__legend {\n    display: grid;\n    margin-block-end: calc(4 / var(--font-size-base) * 1rem);\n    row-gap: calc(4 / var(--font-size-base) * 1rem);\n    font-size: calc(18 / var(--font-size-base) * 1rem);\n    font-weight: 600;\n    color: var(--card-checkbox-color);\n\n    & > p {\n      margin: 0;\n    }\n  }\n\n  &__description {\n    font-size: calc(16 / var(--font-size-base) * 1rem);\n    font-weight: 400;\n    line-height: calc(16 / var(--font-size-base) * 1rem);\n    color: var(--card-checkbox-color);\n\n    @media (width > #{breakpoints.$breakpoint-sm}) {\n      font-size: calc(18 / var(--font-size-base) * 1rem);\n      line-height: calc(18 / var(--font-size-base) * 1rem);\n    }\n  }\n\n  &__choices {\n    display: flex;\n    flex-direction: column;\n    row-gap: calc(8 / var(--font-size-base) * 1rem);\n  }\n\n  &-group {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    align-items: stretch;\n    gap: 1rem;\n    font-family: var(--card-checkbox-font-family);\n    font-style: normal;\n    font-weight: 400;\n    line-height: calc(20 / var(--font-size-base) * 1rem);\n    list-style: none;\n\n    &--horizontal {\n      flex-direction: var(--card-checkbox-flex-direction);\n\n      .af-card-checkbox-label {\n        flex-direction: var(--card-checkbox-flex-direction);\n        align-items: var(--card-checkbox-align-items);\n\n        .af-card-checkbox-content {\n          flex-direction: var(--card-checkbox-flex-direction);\n\n          .af-card-checkbox-content-description {\n            flex-direction: var(--card-checkbox-flex-direction);\n            align-items: var(--card-checkbox-align-item);\n            text-align: left;\n          }\n        }\n      }\n    }\n\n    &--vertical {\n      flex-direction: var(--card-checkbox-flex-direction);\n\n      > * {\n        flex-basis: 0;\n        flex-grow: 1;\n      }\n\n      .af-card-checkbox-label {\n        height: 100%;\n        flex-direction: var(--card-checkbox-flex-direction);\n        align-items: var(--card-checkbox-align-items);\n        justify-content: var(--card-checkbox-justify-content);\n\n        .af-card-checkbox-content {\n          width: 100%;\n          flex: 1;\n          flex-direction: var(--card-checkbox-flex-direction);\n\n          .af-card-checkbox-content-description {\n            flex-direction: var(--card-checkbox-flex-direction);\n            align-items: var(--card-checkbox-align-item);\n            text-align: center;\n          }\n        }\n      }\n    }\n\n    .af-card-checkbox-label {\n      display: flex;\n      padding: 1rem;\n      border: 1px solid var(--card-checkbox-border-color);\n      border-radius: var(--card-checkbox-border-radius);\n      flex: 1;\n      align-self: stretch;\n      gap: calc(12 / var(--font-size-base) * 1rem);\n      cursor: pointer;\n\n      .af-card-checkbox-content {\n        display: flex;\n        align-items: center;\n        gap: calc(4 / var(--font-size-base) * 1rem);\n\n        .af-card-checkbox-content-description {\n          display: flex;\n          justify-content: center;\n          font-size: 1rem;\n          line-height: calc(20 / var(--font-size-base) * 1rem);\n\n          & > span:first-child {\n            font-size: calc(18 / var(--font-size-base) * 1rem);\n            font-weight: 400;\n            color: var(--card-checkbox-label-text-color);\n\n            @media (width < #{breakpoints.$breakpoint-sm}) {\n              font-size: calc(16 / var(--font-size-base) * 1rem);\n              font-weight: 400;\n            }\n          }\n\n          & > span:not(:first-child) {\n            font-size: calc(16 / var(--font-size-base) * 1rem);\n            font-weight: 400;\n            color: var(--card-checkbox-label-text-color);\n\n            @media (width < #{breakpoints.$breakpoint-sm}) {\n              font-size: calc(14 / var(--font-size-base) * 1rem);\n              font-weight: 400;\n            }\n          }\n        }\n      }\n\n      &:hover,\n      &:focus-visible,\n      &:focus-within,\n      &:has(input:checked),\n      [aria-invalid=\"true\"] {\n        outline: 1px solid var(--card-checkbox-outline-color);\n      }\n\n      &:has(input:checked) {\n        .af-card-checkbox-content-description > span:first-child {\n          font-weight: 600;\n        }\n      }\n    }\n  }\n}\n","@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-card-checkbox {\n  &__container {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n  }\n\n  &__legend {\n    display: grid;\n    margin-block-end: calc(4 / var(--font-size-base) * 1rem);\n    row-gap: calc(4 / var(--font-size-base) * 1rem);\n    font-size: calc(18 / var(--font-size-base) * 1rem);\n    font-weight: 600;\n    color: var(--card-checkbox-color);\n\n    & > p {\n      margin: 0;\n    }\n  }\n\n  &__description {\n    font-size: calc(16 / var(--font-size-base) * 1rem);\n    font-weight: 400;\n    line-height: calc(16 / var(--font-size-base) * 1rem);\n    color: var(--card-checkbox-color);\n\n    @media (width > #{breakpoints.$breakpoint-sm}) {\n      font-size: calc(18 / var(--font-size-base) * 1rem);\n      line-height: calc(18 / var(--font-size-base) * 1rem);\n    }\n  }\n\n  &__choices {\n    display: flex;\n    flex-direction: column;\n    row-gap: calc(8 / var(--font-size-base) * 1rem);\n  }\n\n  &-group {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    align-items: stretch;\n    gap: 1rem;\n    font-family: var(--card-checkbox-font-family);\n    font-style: normal;\n    font-weight: 400;\n    line-height: calc(20 / var(--font-size-base) * 1rem);\n    list-style: none;\n\n    &--horizontal {\n      flex-direction: var(--card-checkbox-flex-direction);\n\n      .af-card-checkbox-label {\n        flex-direction: var(--card-checkbox-flex-direction);\n        align-items: var(--card-checkbox-align-items);\n\n        .af-card-checkbox-content {\n          flex-direction: var(--card-checkbox-flex-direction);\n\n          .af-card-checkbox-content-description {\n            flex-direction: var(--card-checkbox-flex-direction);\n            align-items: var(--card-checkbox-align-item);\n            text-align: left;\n          }\n        }\n      }\n    }\n\n    &--vertical {\n      flex-direction: var(--card-checkbox-flex-direction);\n\n      > * {\n        flex-basis: 0;\n        flex-grow: 1;\n      }\n\n      .af-card-checkbox-label {\n        height: 100%;\n        flex-direction: var(--card-checkbox-flex-direction);\n        align-items: var(--card-checkbox-align-items);\n        justify-content: var(--card-checkbox-justify-content);\n\n        .af-card-checkbox-content {\n          width: 100%;\n          flex: 1;\n          flex-direction: var(--card-checkbox-flex-direction);\n\n          .af-card-checkbox-content-description {\n            flex-direction: var(--card-checkbox-flex-direction);\n            align-items: var(--card-checkbox-align-item);\n            text-align: center;\n          }\n        }\n      }\n    }\n\n    .af-card-checkbox-label {\n      display: flex;\n      padding: 1rem;\n      border: 1px solid var(--card-checkbox-border-color);\n      border-radius: var(--card-checkbox-border-radius);\n      flex: 1;\n      align-self: stretch;\n      gap: calc(12 / var(--font-size-base) * 1rem);\n      cursor: pointer;\n\n      .af-card-checkbox-content {\n        display: flex;\n        align-items: center;\n        gap: calc(4 / var(--font-size-base) * 1rem);\n\n        .af-card-checkbox-content-description {\n          display: flex;\n          justify-content: center;\n          font-size: 1rem;\n          line-height: calc(20 / var(--font-size-base) * 1rem);\n\n          & > span:first-child {\n            font-size: calc(18 / var(--font-size-base) * 1rem);\n            font-weight: 400;\n            color: var(--card-checkbox-label-text-color);\n\n            @media (width < #{breakpoints.$breakpoint-sm}) {\n              font-size: calc(16 / var(--font-size-base) * 1rem);\n              font-weight: 400;\n            }\n          }\n\n          & > span:not(:first-child) {\n            font-size: calc(16 / var(--font-size-base) * 1rem);\n            font-weight: 400;\n            color: var(--card-checkbox-label-text-color);\n\n            @media (width < #{breakpoints.$breakpoint-sm}) {\n              font-size: calc(14 / var(--font-size-base) * 1rem);\n              font-weight: 400;\n            }\n          }\n        }\n      }\n\n      &:hover,\n      &:focus-visible,\n      &:focus-within,\n      &:has(input:checked),\n      [aria-invalid=\"true\"] {\n        outline: 1px solid var(--card-checkbox-outline-color);\n      }\n\n      &:has(input:checked) {\n        .af-card-checkbox-content-description > span:first-child {\n          font-weight: 600;\n        }\n      }\n    }\n  }\n}\n"]}

package/dist/Form/Checkbox/{CheckboxCard/CheckboxCardCommon.scss → CardCheckbox/CardCheckboxCommon.scss}

@@ -1,30 +1,30 @@
 @use "../../../common/breakpoints" as breakpoints;
 
-.af-checkbox-card {
+.af-card-checkbox {
   &__container {
     display: flex;
     flex-direction: column;
     gap: 1rem;
   }
 
-  &__label-container {
-    display: flex;
-    flex-direction: column;
-    row-gap: calc(4 / var(--font-size-base) * 1rem);
-  }
-
   &__legend {
+    display: grid;
+    margin-block-end: calc(4 / var(--font-size-base) * 1rem);
+    row-gap: calc(4 / var(--font-size-base) * 1rem);
     font-size: calc(18 / var(--font-size-base) * 1rem);
     font-weight: 600;
-    color: var(--checkbox-card-color);
+    color: var(--card-checkbox-color);
+
+    & > p {
+      margin: 0;
+    }
   }
 
   &__description {
-    margin: 0;
     font-size: calc(16 / var(--font-size-base) * 1rem);
     font-weight: 400;
     line-height: calc(16 / var(--font-size-base) * 1rem);
-    color: var(--checkbox-card-color);
+    color: var(--card-checkbox-color);
 
     @media (width > #{breakpoints.$breakpoint-sm}) {
       font-size: calc(18 / var(--font-size-base) * 1rem);
@@ -44,25 +44,25 @@
     padding: 0;
     align-items: stretch;
     gap: 1rem;
-    font-family: var(--checkbox-card-font-family);
+    font-family: var(--card-checkbox-font-family);
     font-style: normal;
     font-weight: 400;
     line-height: calc(20 / var(--font-size-base) * 1rem);
     list-style: none;
 
     &--horizontal {
-      flex-direction: var(--checkbox-card-flex-direction);
+      flex-direction: var(--card-checkbox-flex-direction);
 
-      .af-checkbox-card-label {
-        flex-direction: var(--checkbox-card-flex-direction);
-        align-items: var(--checkbox-card-align-items);
+      .af-card-checkbox-label {
+        flex-direction: var(--card-checkbox-flex-direction);
+        align-items: var(--card-checkbox-align-items);
 
-        .af-checkbox-card-content {
-          flex-direction: var(--checkbox-card-flex-direction);
+        .af-card-checkbox-content {
+          flex-direction: var(--card-checkbox-flex-direction);
 
-          .af-checkbox-card-content-description {
-            flex-direction: var(--checkbox-card-flex-direction);
-            align-items: var(--checkbox-card-align-item);
+          .af-card-checkbox-content-description {
+            flex-direction: var(--card-checkbox-flex-direction);
+            align-items: var(--card-checkbox-align-item);
             text-align: left;
           }
         }
@@ -70,55 +70,49 @@
     }
 
     &--vertical {
-      flex-direction: var(--checkbox-card-flex-direction);
+      flex-direction: var(--card-checkbox-flex-direction);
 
       > * {
         flex-basis: 0;
         flex-grow: 1;
       }
 
-      .af-checkbox-card-label {
+      .af-card-checkbox-label {
         height: 100%;
-        flex-direction: var(--checkbox-card-flex-direction);
-        align-items: var(--checkbox-card-align-items);
-        justify-content: var(--checkbox-card-justify-content);
+        flex-direction: var(--card-checkbox-flex-direction);
+        align-items: var(--card-checkbox-align-items);
+        justify-content: var(--card-checkbox-justify-content);
 
-        .af-checkbox-card-content {
+        .af-card-checkbox-content {
           width: 100%;
           flex: 1;
-          flex-direction: var(--checkbox-card-flex-direction);
+          flex-direction: var(--card-checkbox-flex-direction);
 
-          .af-checkbox-card-content-description {
-            flex-direction: var(--checkbox-card-flex-direction);
-            align-items: var(--checkbox-card-align-item);
+          .af-card-checkbox-content-description {
+            flex-direction: var(--card-checkbox-flex-direction);
+            align-items: var(--card-checkbox-align-item);
             text-align: center;
           }
         }
       }
     }
 
-    .af-checkbox-card-label[aria-invalid="true"] {
-      border: solid var(--checkbox-card-border);
-      background-color: var(--checkbox-card-background-color);
-      box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;
-    }
-
-    .af-checkbox-card-label {
+    .af-card-checkbox-label {
       display: flex;
       padding: 1rem;
-      border: solid var(--checkbox-card-border);
-      border-radius: var(--checkbox-card-border-radius);
+      border: 1px solid var(--card-checkbox-border-color);
+      border-radius: var(--card-checkbox-border-radius);
       flex: 1;
       align-self: stretch;
       gap: calc(12 / var(--font-size-base) * 1rem);
       cursor: pointer;
 
-      .af-checkbox-card-content {
+      .af-card-checkbox-content {
         display: flex;
         align-items: center;
         gap: calc(4 / var(--font-size-base) * 1rem);
 
-        .af-checkbox-card-content-description {
+        .af-card-checkbox-content-description {
           display: flex;
           justify-content: center;
           font-size: 1rem;
@@ -127,7 +121,7 @@
           & > span:first-child {
             font-size: calc(18 / var(--font-size-base) * 1rem);
             font-weight: 400;
-            color: var(--checkbox-card-label-text-color);
+            color: var(--card-checkbox-label-text-color);
 
             @media (width < #{breakpoints.$breakpoint-sm}) {
               font-size: calc(16 / var(--font-size-base) * 1rem);
@@ -138,7 +132,7 @@
           & > span:not(:first-child) {
             font-size: calc(16 / var(--font-size-base) * 1rem);
             font-weight: 400;
-            color: var(--checkbox-card-label-text-color);
+            color: var(--card-checkbox-label-text-color);
 
             @media (width < #{breakpoints.$breakpoint-sm}) {
               font-size: calc(14 / var(--font-size-base) * 1rem);
@@ -148,17 +142,16 @@
         }
       }
 
-      &:hover {
-        border: solid var(--checkbox-card-border);
-        box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;
+      &:hover,
+      &:focus-visible,
+      &:focus-within,
+      &:has(input:checked),
+      [aria-invalid="true"] {
+        outline: 1px solid var(--card-checkbox-outline-color);
       }
 
       &:has(input:checked) {
-        border: solid var(--checkbox-card-border);
-        background-color: var(--checkbox-card-background-color);
-        box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;
-
-        .af-checkbox-card-content-description > span:first-child {
+        .af-card-checkbox-content-description > span:first-child {
           font-weight: 600;
         }
       }

package/dist/Form/Checkbox/CardCheckbox/CardCheckboxLF.css

@@ -0,0 +1 @@
+.af-card-checkbox__container{display:flex;flex-direction:column;gap:1rem}.af-card-checkbox__legend{color:var(--card-checkbox-color);display:grid;font-size:calc(18/var(--font-size-base)*1rem);font-weight:600;margin-block-end:calc(4/var(--font-size-base)*1rem);row-gap:calc(4/var(--font-size-base)*1rem)}.af-card-checkbox__legend>p{margin:0}.af-card-checkbox__description{color:var(--card-checkbox-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400;line-height:calc(16/var(--font-size-base)*1rem)}@media (width > 667px){.af-card-checkbox__description{font-size:calc(18/var(--font-size-base)*1rem);line-height:calc(18/var(--font-size-base)*1rem)}}.af-card-checkbox__choices{display:flex;flex-direction:column;row-gap:calc(8/var(--font-size-base)*1rem)}.af-card-checkbox-group{align-items:stretch;display:flex;font-family:var(--card-checkbox-font-family);font-style:normal;font-weight:400;gap:1rem;line-height:calc(20/var(--font-size-base)*1rem);list-style:none;margin:0;padding:0}.af-card-checkbox-group--horizontal{flex-direction:var(--card-checkbox-flex-direction)}.af-card-checkbox-group--horizontal .af-card-checkbox-label{align-items:var(--card-checkbox-align-items);flex-direction:var(--card-checkbox-flex-direction)}.af-card-checkbox-group--horizontal .af-card-checkbox-label .af-card-checkbox-content{flex-direction:var(--card-checkbox-flex-direction)}.af-card-checkbox-group--horizontal .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{align-items:var(--card-checkbox-align-item);flex-direction:var(--card-checkbox-flex-direction);text-align:left}.af-card-checkbox-group--vertical{flex-direction:var(--card-checkbox-flex-direction)}.af-card-checkbox-group--vertical>*{flex-basis:0;flex-grow:1}.af-card-checkbox-group--vertical .af-card-checkbox-label{align-items:var(--card-checkbox-align-items);flex-direction:var(--card-checkbox-flex-direction);height:100%;justify-content:var(--card-checkbox-justify-content)}.af-card-checkbox-group--vertical .af-card-checkbox-label .af-card-checkbox-content{flex:1 1;flex-direction:var(--card-checkbox-flex-direction);width:100%}.af-card-checkbox-group--vertical .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{align-items:var(--card-checkbox-align-item);flex-direction:var(--card-checkbox-flex-direction);text-align:center}.af-card-checkbox-group .af-card-checkbox-label{align-self:stretch;border:1px solid var(--card-checkbox-border-color);border-radius:var(--card-checkbox-border-radius);cursor:pointer;display:flex;flex:1 1;gap:calc(12/var(--font-size-base)*1rem);padding:1rem}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content{align-items:center;display:flex;gap:calc(4/var(--font-size-base)*1rem)}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{display:flex;font-size:1rem;justify-content:center;line-height:calc(20/var(--font-size-base)*1rem)}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:first-child{color:var(--card-checkbox-label-text-color);font-size:calc(18/var(--font-size-base)*1rem);font-weight:400}@media (width < 667px){.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:first-child{font-size:calc(16/var(--font-size-base)*1rem);font-weight:400}}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:not(:first-child){color:var(--card-checkbox-label-text-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400}@media (width < 667px){.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:not(:first-child){font-size:calc(14/var(--font-size-base)*1rem);font-weight:400}}.af-card-checkbox-group .af-card-checkbox-label [aria-invalid=true],.af-card-checkbox-group .af-card-checkbox-label:focus-visible,.af-card-checkbox-group .af-card-checkbox-label:focus-within,.af-card-checkbox-group .af-card-checkbox-label:has(input:checked),.af-card-checkbox-group .af-card-checkbox-label:hover{outline:1px solid var(--card-checkbox-outline-color)}.af-card-checkbox-group .af-card-checkbox-label:has(input:checked) .af-card-checkbox-content-description>span:first-child{font-weight:600}.af-card-checkbox__label-container{--font-size-base:calc(16/var(--font-size-base)*1rem)}.af-card-checkbox__legend{--card-checkbox-color:var(--color-gray-900)}.af-card-checkbox__description{--card-checkbox-color:var(--color-gray-700)}.af-card-checkbox-group--horizontal{--card-checkbox-flex-direction:column}.af-card-checkbox-group--horizontal .af-card-checkbox-label{--card-checkbox-flex-direction:row;--card-checkbox-align-items:center}.af-card-checkbox-group--horizontal .af-card-checkbox-label .af-card-checkbox-content{--card-checkbox-flex-direction:row;--card-checkbox-margin-left:calc(12/var(--font-size-base)*1rem)}.af-card-checkbox-group--horizontal .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{--card-checkbox-flex-direction:column;--card-checkbox-align-item:flex-start}.af-card-checkbox-group--vertical{--card-checkbox-flex-direction:row}.af-card-checkbox-group--vertical .af-card-checkbox-label{--card-checkbox-flex-direction:row;--card-checkbox-align-items:flex-start;--card-checkbox-justify-content:flex-start}.af-card-checkbox-group--vertical .af-card-checkbox-label .af-checkbox{position:absolute}.af-card-checkbox-group--vertical .af-card-checkbox-label .af-card-checkbox-content{--card-checkbox-flex-direction:column;--card-checkbox-margin-left:calc(2/var(--font-size-base)*1rem)}.af-card-checkbox-group--vertical .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{--card-checkbox-flex-direction:column;--card-checkbox-align-item:center}.af-card-checkbox-group .af-card-checkbox-label{--card-checkbox-border-color:var(--color-gray-700);--card-checkbox-border-radius:calc(6/var(--font-size-base)*1rem);--card-checkbox-outline-color:var(--card-checkbox-border-color)}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content-description>span:first-child{--card-checkbox-label-text-color:var(--color-gray-900)}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content-description>span:not(:first-child){--card-checkbox-label-text-color:var(--color-gray-700)}.af-card-checkbox-group .af-card-checkbox-label:focus-visible,.af-card-checkbox-group .af-card-checkbox-label:focus-within,.af-card-checkbox-group .af-card-checkbox-label:has(input:checked),.af-card-checkbox-group .af-card-checkbox-label:hover{--card-checkbox-border-color:var(--color-axa)}.af-card-checkbox-group .af-card-checkbox-label[aria-invalid=true]{--card-checkbox-background-color:var(--color-white);--card-checkbox-border-color:var(--color-red-700)}.af-card-checkbox-group .af-card-checkbox-label:has(input:checked){--card-checkbox-border-color:var(--color-axa);--card-checkbox-background-color:var(--color-blue-2)}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxCommon.scss","../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxLF.scss","../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxLF.scss%23sass"],"names":[],"mappings":"AAGE,6BACE,YAAA,CCFJ,qBAAA,CDII,QCFJ,CDKE,0BAME,gCAAA,CALA,YAAA,CAGA,6CAAA,CACA,eAAA,CAHA,mDAAA,CACA,0CCAJ,CDKI,4BACE,QCHN,CDOE,+BAIE,gCAAA,CAHA,6CAAA,CACA,eAAA,CACA,+CCJJ,CDOI,uBANF,+BAOI,6CAAA,CACA,+CCJJ,CACF,CDOE,2BACE,YAAA,CACA,qBAAA,CACA,0CCLJ,CDQE,wBAIE,mBAAA,CAHA,YAAA,CAKA,4CAAA,CACA,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,+CAAA,CACA,eAAA,CARA,QAAA,CACA,SCCJ,CDQI,oCACE,kDCNN,CDQM,4DAEE,4CAAA,CADA,kDCLR,CDQQ,sFACE,kDCNV,CDQU,4HAEE,2CAAA,CADA,kDAAA,CAEA,eCNZ,CDYI,kCACE,kDCVN,CDYM,oCACE,YAAA,CACA,WCVR,CDaM,0DAGE,4CAAA,CADA,kDAAA,CADA,WAAA,CAGA,oDCXR,CDaQ,oFAEE,QAAA,CACA,kDAAA,CAFA,UCTV,CDaU,0HAEE,2CAAA,CADA,kDAAA,CAEA,iBCXZ,CDiBI,gDAME,kBAAA,CAHA,kDAAA,CACA,gDAAA,CAIA,cAAA,CAPA,YAAA,CAIA,QAAA,CAEA,uCAAA,CALA,YCTN,CDiBM,0EAEE,kBAAA,CADA,YAAA,CAEA,sCCfR,CDiBQ,gHACE,YAAA,CAEA,cAAA,CADA,sBAAA,CAEA,+CCfV,CDiBU,iIAGE,2CAAA,CAFA,6CAAA,CACA,eCdZ,CDiBY,uBALF,iIAMI,6CAAA,CACA,eCdZ,CACF,CDiBU,uIAGE,2CAAA,CAFA,6CAAA,CACA,eCdZ,CDiBY,uBALF,uIAMI,6CAAA,CACA,eCdZ,CACF,CDmBM,wTAKE,oDCpBR,CDwBQ,0HACE,eCtBV,CCjIE,mCACE,oDDoIJ,CCjIE,0BACE,2CDmIJ,CChIE,+BACE,2CDkIJ,CC9HI,oCACE,qCDgIN,CC9HM,4DACE,kCAAA,CACA,kCDgIR,CC9HQ,sFACE,kCAAA,CACA,+DDgIV,CC9HU,4HACE,qCAAA,CACA,qCDgIZ,CC1HI,kCACE,kCD4HN,CC1HM,0DACE,kCAAA,CACA,sCAAA,CACA,0CD4HR,CC1HQ,uEACE,iBD4HV,CCzHQ,oFACE,qCAAA,CACA,8DD2HV,CCzHU,0HACE,qCAAA,CACA,iCD2HZ,CCrHI,gDACE,kDAAA,CACA,gEAAA,CACA,+DDuHN,CCpHQ,uGACE,sDDsHV,CCnHQ,6GACE,sDDqHV,CCjHM,oPAIE,6CDgHR,CC7GM,mEACE,mDAAA,CACA,iDD+GR,CC5GM,mEACE,6CAAA,CACA,oDD8GR","file":"CardCheckboxLF.css","sourcesContent":["@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-card-checkbox {\n  &__container {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n  }\n\n  &__legend {\n    display: grid;\n    margin-block-end: calc(4 / var(--font-size-base) * 1rem);\n    row-gap: calc(4 / var(--font-size-base) * 1rem);\n    font-size: calc(18 / var(--font-size-base) * 1rem);\n    font-weight: 600;\n    color: var(--card-checkbox-color);\n\n    & > p {\n      margin: 0;\n    }\n  }\n\n  &__description {\n    font-size: calc(16 / var(--font-size-base) * 1rem);\n    font-weight: 400;\n    line-height: calc(16 / var(--font-size-base) * 1rem);\n    color: var(--card-checkbox-color);\n\n    @media (width > #{breakpoints.$breakpoint-sm}) {\n      font-size: calc(18 / var(--font-size-base) * 1rem);\n      line-height: calc(18 / var(--font-size-base) * 1rem);\n    }\n  }\n\n  &__choices {\n    display: flex;\n    flex-direction: column;\n    row-gap: calc(8 / var(--font-size-base) * 1rem);\n  }\n\n  &-group {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    align-items: stretch;\n    gap: 1rem;\n    font-family: var(--card-checkbox-font-family);\n    font-style: normal;\n    font-weight: 400;\n    line-height: calc(20 / var(--font-size-base) * 1rem);\n    list-style: none;\n\n    &--horizontal {\n      flex-direction: var(--card-checkbox-flex-direction);\n\n      .af-card-checkbox-label {\n        flex-direction: var(--card-checkbox-flex-direction);\n        align-items: var(--card-checkbox-align-items);\n\n        .af-card-checkbox-content {\n          flex-direction: var(--card-checkbox-flex-direction);\n\n          .af-card-checkbox-content-description {\n            flex-direction: var(--card-checkbox-flex-direction);\n            align-items: var(--card-checkbox-align-item);\n            text-align: left;\n          }\n        }\n      }\n    }\n\n    &--vertical {\n      flex-direction: var(--card-checkbox-flex-direction);\n\n      > * {\n        flex-basis: 0;\n        flex-grow: 1;\n      }\n\n      .af-card-checkbox-label {\n        height: 100%;\n        flex-direction: var(--card-checkbox-flex-direction);\n        align-items: var(--card-checkbox-align-items);\n        justify-content: var(--card-checkbox-justify-content);\n\n        .af-card-checkbox-content {\n          width: 100%;\n          flex: 1;\n          flex-direction: var(--card-checkbox-flex-direction);\n\n          .af-card-checkbox-content-description {\n            flex-direction: var(--card-checkbox-flex-direction);\n            align-items: var(--card-checkbox-align-item);\n            text-align: center;\n          }\n        }\n      }\n    }\n\n    .af-card-checkbox-label {\n      display: flex;\n      padding: 1rem;\n      border: 1px solid var(--card-checkbox-border-color);\n      border-radius: var(--card-checkbox-border-radius);\n      flex: 1;\n      align-self: stretch;\n      gap: calc(12 / var(--font-size-base) * 1rem);\n      cursor: pointer;\n\n      .af-card-checkbox-content {\n        display: flex;\n        align-items: center;\n        gap: calc(4 / var(--font-size-base) * 1rem);\n\n        .af-card-checkbox-content-description {\n          display: flex;\n          justify-content: center;\n          font-size: 1rem;\n          line-height: calc(20 / var(--font-size-base) * 1rem);\n\n          & > span:first-child {\n            font-size: calc(18 / var(--font-size-base) * 1rem);\n            font-weight: 400;\n            color: var(--card-checkbox-label-text-color);\n\n            @media (width < #{breakpoints.$breakpoint-sm}) {\n              font-size: calc(16 / var(--font-size-base) * 1rem);\n              font-weight: 400;\n            }\n          }\n\n          & > span:not(:first-child) {\n            font-size: calc(16 / var(--font-size-base) * 1rem);\n            font-weight: 400;\n            color: var(--card-checkbox-label-text-color);\n\n            @media (width < #{breakpoints.$breakpoint-sm}) {\n              font-size: calc(14 / var(--font-size-base) * 1rem);\n              font-weight: 400;\n            }\n          }\n        }\n      }\n\n      &:hover,\n      &:focus-visible,\n      &:focus-within,\n      &:has(input:checked),\n      [aria-invalid=\"true\"] {\n        outline: 1px solid var(--card-checkbox-outline-color);\n      }\n\n      &:has(input:checked) {\n        .af-card-checkbox-content-description > span:first-child {\n          font-weight: 600;\n        }\n      }\n    }\n  }\n}\n","@use \"CardCheckboxCommon\";\n\n.af-card-checkbox {\n  &__label-container {\n    --font-size-base: calc(16 / var(--font-size-base) * 1rem);\n  }\n\n  &__legend {\n    --card-checkbox-color: var(--color-gray-900);\n  }\n\n  &__description {\n    --card-checkbox-color: var(--color-gray-700);\n  }\n\n  &-group {\n    &--horizontal {\n      --card-checkbox-flex-direction: column;\n\n      .af-card-checkbox-label {\n        --card-checkbox-flex-direction: row;\n        --card-checkbox-align-items: center;\n\n        .af-card-checkbox-content {\n          --card-checkbox-flex-direction: row;\n          --card-checkbox-margin-left: calc(12 / var(--font-size-base) * 1rem);\n\n          .af-card-checkbox-content-description {\n            --card-checkbox-flex-direction: column;\n            --card-checkbox-align-item: flex-start;\n          }\n        }\n      }\n    }\n\n    &--vertical {\n      --card-checkbox-flex-direction: row;\n\n      .af-card-checkbox-label {\n        --card-checkbox-flex-direction: row;\n        --card-checkbox-align-items: flex-start;\n        --card-checkbox-justify-content: flex-start;\n\n        .af-checkbox {\n          position: absolute;\n        }\n\n        .af-card-checkbox-content {\n          --card-checkbox-flex-direction: column;\n          --card-checkbox-margin-left: calc(2 / var(--font-size-base) * 1rem);\n\n          .af-card-checkbox-content-description {\n            --card-checkbox-flex-direction: column;\n            --card-checkbox-align-item: center;\n          }\n        }\n      }\n    }\n\n    .af-card-checkbox-label {\n      --card-checkbox-border-color: var(--color-gray-700);\n      --card-checkbox-border-radius: calc(6 / var(--font-size-base) * 1rem);\n      --card-checkbox-outline-color: var(--card-checkbox-border-color);\n\n      .af-card-checkbox-content-description > span {\n        &:first-child {\n          --card-checkbox-label-text-color: var(--color-gray-900);\n        }\n\n        &:not(:first-child) {\n          --card-checkbox-label-text-color: var(--color-gray-700);\n        }\n      }\n\n      &:hover,\n      &:focus-visible,\n      &:focus-within,\n      &:has(input:checked) {\n        --card-checkbox-border-color: var(--color-axa);\n      }\n\n      &[aria-invalid=\"true\"] {\n        --card-checkbox-background-color: var(--color-white);\n        --card-checkbox-border-color: var(--color-red-700);\n      }\n\n      &:has(input:checked) {\n        --card-checkbox-border-color: var(--color-axa);\n        --card-checkbox-background-color: var(--color-blue-2);\n      }\n    }\n  }\n}\n","@use \"CardCheckboxCommon\";\n\n.af-card-checkbox {\n  &__label-container {\n    --font-size-base: calc(16 / var(--font-size-base) * 1rem);\n  }\n\n  &__legend {\n    --card-checkbox-color: var(--color-gray-900);\n  }\n\n  &__description {\n    --card-checkbox-color: var(--color-gray-700);\n  }\n\n  &-group {\n    &--horizontal {\n      --card-checkbox-flex-direction: column;\n\n      .af-card-checkbox-label {\n        --card-checkbox-flex-direction: row;\n        --card-checkbox-align-items: center;\n\n        .af-card-checkbox-content {\n          --card-checkbox-flex-direction: row;\n          --card-checkbox-margin-left: calc(12 / var(--font-size-base) * 1rem);\n\n          .af-card-checkbox-content-description {\n            --card-checkbox-flex-direction: column;\n            --card-checkbox-align-item: flex-start;\n          }\n        }\n      }\n    }\n\n    &--vertical {\n      --card-checkbox-flex-direction: row;\n\n      .af-card-checkbox-label {\n        --card-checkbox-flex-direction: row;\n        --card-checkbox-align-items: flex-start;\n        --card-checkbox-justify-content: flex-start;\n\n        .af-checkbox {\n          position: absolute;\n        }\n\n        .af-card-checkbox-content {\n          --card-checkbox-flex-direction: column;\n          --card-checkbox-margin-left: calc(2 / var(--font-size-base) * 1rem);\n\n          .af-card-checkbox-content-description {\n            --card-checkbox-flex-direction: column;\n            --card-checkbox-align-item: center;\n          }\n        }\n      }\n    }\n\n    .af-card-checkbox-label {\n      --card-checkbox-border-color: var(--color-gray-700);\n      --card-checkbox-border-radius: calc(6 / var(--font-size-base) * 1rem);\n      --card-checkbox-outline-color: var(--card-checkbox-border-color);\n\n      .af-card-checkbox-content-description > span {\n        &:first-child {\n          --card-checkbox-label-text-color: var(--color-gray-900);\n        }\n\n        &:not(:first-child) {\n          --card-checkbox-label-text-color: var(--color-gray-700);\n        }\n      }\n\n      &:hover,\n      &:focus-visible,\n      &:focus-within,\n      &:has(input:checked) {\n        --card-checkbox-border-color: var(--color-axa);\n      }\n\n      &[aria-invalid=\"true\"] {\n        --card-checkbox-background-color: var(--color-white);\n        --card-checkbox-border-color: var(--color-red-700);\n      }\n\n      &:has(input:checked) {\n        --card-checkbox-border-color: var(--color-axa);\n        --card-checkbox-background-color: var(--color-blue-2);\n      }\n    }\n  }\n}\n"]}

package/dist/Form/Checkbox/CardCheckbox/CardCheckboxLF.scss

@@ -0,0 +1,93 @@
+@use "CardCheckboxCommon";
+
+.af-card-checkbox {
+  &__label-container {
+    --font-size-base: calc(16 / var(--font-size-base) * 1rem);
+  }
+
+  &__legend {
+    --card-checkbox-color: var(--color-gray-900);
+  }
+
+  &__description {
+    --card-checkbox-color: var(--color-gray-700);
+  }
+
+  &-group {
+    &--horizontal {
+      --card-checkbox-flex-direction: column;
+
+      .af-card-checkbox-label {
+        --card-checkbox-flex-direction: row;
+        --card-checkbox-align-items: center;
+
+        .af-card-checkbox-content {
+          --card-checkbox-flex-direction: row;
+          --card-checkbox-margin-left: calc(12 / var(--font-size-base) * 1rem);
+
+          .af-card-checkbox-content-description {
+            --card-checkbox-flex-direction: column;
+            --card-checkbox-align-item: flex-start;
+          }
+        }
+      }
+    }
+
+    &--vertical {
+      --card-checkbox-flex-direction: row;
+
+      .af-card-checkbox-label {
+        --card-checkbox-flex-direction: row;
+        --card-checkbox-align-items: flex-start;
+        --card-checkbox-justify-content: flex-start;
+
+        .af-checkbox {
+          position: absolute;
+        }
+
+        .af-card-checkbox-content {
+          --card-checkbox-flex-direction: column;
+          --card-checkbox-margin-left: calc(2 / var(--font-size-base) * 1rem);
+
+          .af-card-checkbox-content-description {
+            --card-checkbox-flex-direction: column;
+            --card-checkbox-align-item: center;
+          }
+        }
+      }
+    }
+
+    .af-card-checkbox-label {
+      --card-checkbox-border-color: var(--color-gray-700);
+      --card-checkbox-border-radius: calc(6 / var(--font-size-base) * 1rem);
+      --card-checkbox-outline-color: var(--card-checkbox-border-color);
+
+      .af-card-checkbox-content-description > span {
+        &:first-child {
+          --card-checkbox-label-text-color: var(--color-gray-900);
+        }
+
+        &:not(:first-child) {
+          --card-checkbox-label-text-color: var(--color-gray-700);
+        }
+      }
+
+      &:hover,
+      &:focus-visible,
+      &:focus-within,
+      &:has(input:checked) {
+        --card-checkbox-border-color: var(--color-axa);
+      }
+
+      &[aria-invalid="true"] {
+        --card-checkbox-background-color: var(--color-white);
+        --card-checkbox-border-color: var(--color-red-700);
+      }
+
+      &:has(input:checked) {
+        --card-checkbox-border-color: var(--color-axa);
+        --card-checkbox-background-color: var(--color-blue-2);
+      }
+    }
+  }
+}

package/dist/Form/Checkbox/Checkbox/CheckboxApollo.css

@@ -1 +1 @@
-.af-checkbox__icons{align-items:center;background-color:var(--checkbox-background-color);border:solid var(--checkbox-border);border-radius:var(--checkbox-border-radius);display:flex;gap:calc(12/var(--font-size-base)*1rem);height:calc(24/var(--font-size-base)*1rem);max-width:calc(24/var(--font-size-base)*1rem);min-width:calc(24/var(--font-size-base)*1rem)}.af-checkbox__icons .af-checkbox__checked{display:none}.af-checkbox input[type=checkbox]{cursor:pointer;height:calc(24/var(--font-size-base)*1rem);margin:0;opacity:0;position:absolute;width:calc(24/var(--font-size-base)*1rem)}.af-checkbox input[type=checkbox]:checked~.af-checkbox__icons{box-shadow:0 0 0 1px var(--checkbox-box-shadow-color) inset}.af-checkbox input[type=checkbox]:checked~.af-checkbox__icons .af-checkbox__checked{display:block;fill:var(--checkbox-check-fill)}.af-checkbox input[type=checkbox]:hover~.af-checkbox__icons{border:solid var(--checkbox-border);box-shadow:0 0 0 1px var(--checkbox-box-shadow-color) inset}.af-checkbox__icons{--checkbox-border-radius:calc(6/var(--font-size-base)*1rem);--checkbox-border:1px var(--axa-blue-65)}.af-checkbox input[type=checkbox][aria-invalid=true]~.af-checkbox__icons{--checkbox-border:1px var(--red-alert-100);--checkbox-background-color:var(--white)}.af-checkbox input[type=checkbox]:checked~.af-checkbox__icons,.af-checkbox input[type=checkbox]:hover~.af-checkbox__icons{--checkbox-border:1px var(--axa-blue-100);--checkbox-box-shadow-color:var(--axa-blue-100)}.af-checkbox input[type=checkbox]:checked~.af-checkbox__icons{--checkbox-background-color:var(--axa-blue-100)}.af-checkbox input[type=checkbox]:checked~.af-checkbox__icons .af-checkbox__checked{--checkbox-check-fill:var(--white)}
+.af-checkbox{align-items:center;background-color:var(--checkbox-background-color);border:var(--checkbox-border-width,1px) solid var(--checkbox-border-color);border-radius:var(--checkbox-border-radius);display:flex;height:calc(24/var(--font-size-base)*1rem);position:relative;width:calc(24/var(--font-size-base)*1rem)}.af-checkbox svg{display:none;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);fill:var(--checkbox-check-fill)}.af-checkbox:focus-within,.af-checkbox:has(:checked),.af-checkbox:hover{outline:1px solid var(--checkbox-outline-color)}.af-checkbox input[type=checkbox]{height:calc(24/var(--font-size-base)*1rem);margin:0;opacity:0;position:absolute;width:calc(24/var(--font-size-base)*1rem)}.af-checkbox input[type=checkbox]:checked+svg{display:block}.af-checkbox{--checkbox-border-radius:calc(6/var(--font-size-base)*1rem);--checkbox-border-color:var(--axa-blue-65);--checkbox-outline-color:var(--checkbox-border-color);--checkbox-check-fill:var(--white)}.af-checkbox:focus-within,.af-checkbox:has(:checked),.af-checkbox:hover{--checkbox-border-color:var(--axa-blue-100)}.af-checkbox:has(:checked){--checkbox-background-color:var(--axa-blue-100)}.af-checkbox:has([aria-invalid=true]){--checkbox-border-color:var(--red-alert-100)}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Form/Checkbox/Checkbox/CheckboxCommon.scss","../../../../src/Form/Checkbox/Checkbox/CheckboxApollo.scss","../../../../src/Form/Checkbox/Checkbox/CheckboxApollo.scss%23sass"],"names":[],"mappings":"AACE,oBAOE,kBAAA,CAEA,iDAAA,CAJA,mCAAA,CACA,2CAAA,CALA,YAAA,CAOA,uCAAA,CAJA,0CAAA,CADA,6CAAA,CCFJ,6CAQA,CDEI,0CACE,YCAN,CDIE,kCAME,cAAA,CAHA,0CAAA,CACA,QAAA,CACA,SAAA,CAJA,iBAAA,CACA,yCCEJ,CDKM,8DACE,2DCHR,CDKQ,oFACE,aAAA,CACA,+BCHV,CDSM,4DACE,mCAAA,CACA,2DCPR,CC7BE,oBDgCF,2DAAA,CC9BI,wCDgCJ,CC3BM,yEACE,0CAAA,CACA,wCD6BR,CCjBM,0HANE,yCAAA,CACA,+CD+BR,CC1BM,8DAGE,+CDuBR,CCrBQ,oFACE,kCDuBV","file":"CheckboxApollo.css","sourcesContent":[".af-checkbox {\n  &__icons {\n    display: flex;\n    min-width: calc(24 / var(--font-size-base) * 1rem);\n    max-width: calc(24 / var(--font-size-base) * 1rem);\n    height: calc(24 / var(--font-size-base) * 1rem);\n    border: solid var(--checkbox-border);\n    border-radius: var(--checkbox-border-radius);\n    align-items: center;\n    gap: calc(12 / var(--font-size-base) * 1rem);\n    background-color: var(--checkbox-background-color);\n\n    .af-checkbox__checked {\n      display: none;\n    }\n  }\n\n  input[type=\"checkbox\"] {\n    position: absolute;\n    width: calc(24 / var(--font-size-base) * 1rem);\n    height: calc(24 / var(--font-size-base) * 1rem);\n    margin: 0;\n    opacity: 0;\n    cursor: pointer;\n\n    &:checked {\n      ~ .af-checkbox__icons {\n        box-shadow: 0 0 0 1px var(--checkbox-box-shadow-color) inset;\n\n        & .af-checkbox__checked {\n          display: block;\n          fill: var(--checkbox-check-fill);\n        }\n      }\n    }\n\n    &:hover {\n      ~ .af-checkbox__icons {\n        border: solid var(--checkbox-border);\n        box-shadow: 0 0 0 1px var(--checkbox-box-shadow-color) inset;\n      }\n    }\n  }\n}\n","@use \"CheckboxCommon\";\n\n.af-checkbox {\n  &__icons {\n    --checkbox-border-radius: calc(6 / var(--font-size-base) * 1rem);\n    --checkbox-border: 1px var(--axa-blue-65);\n  }\n\n  input[type=\"checkbox\"] {\n    &[aria-invalid=\"true\"] {\n      ~ .af-checkbox__icons {\n        --checkbox-border: 1px var(--red-alert-100);\n        --checkbox-background-color: var(--white);\n      }\n    }\n\n    &:hover {\n      ~ .af-checkbox__icons {\n        --checkbox-border: 1px var(--axa-blue-100);\n        --checkbox-box-shadow-color: var(--axa-blue-100);\n      }\n    }\n\n    &:checked {\n      ~ .af-checkbox__icons {\n        --checkbox-border: 1px var(--axa-blue-100);\n        --checkbox-box-shadow-color: var(--axa-blue-100);\n        --checkbox-background-color: var(--axa-blue-100);\n\n        & .af-checkbox__checked {\n          --checkbox-check-fill: var(--white);\n        }\n      }\n    }\n  }\n}\n","@use \"CheckboxCommon\";\n\n.af-checkbox {\n  &__icons {\n    --checkbox-border-radius: calc(6 / var(--font-size-base) * 1rem);\n    --checkbox-border: 1px var(--axa-blue-65);\n  }\n\n  input[type=\"checkbox\"] {\n    &[aria-invalid=\"true\"] {\n      ~ .af-checkbox__icons {\n        --checkbox-border: 1px var(--red-alert-100);\n        --checkbox-background-color: var(--white);\n      }\n    }\n\n    &:hover {\n      ~ .af-checkbox__icons {\n        --checkbox-border: 1px var(--axa-blue-100);\n        --checkbox-box-shadow-color: var(--axa-blue-100);\n      }\n    }\n\n    &:checked {\n      ~ .af-checkbox__icons {\n        --checkbox-border: 1px var(--axa-blue-100);\n        --checkbox-box-shadow-color: var(--axa-blue-100);\n        --checkbox-background-color: var(--axa-blue-100);\n\n        & .af-checkbox__checked {\n          --checkbox-check-fill: var(--white);\n        }\n      }\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/Form/Checkbox/Checkbox/CheckboxCommon.scss","../../../../src/Form/Checkbox/Checkbox/CheckboxApollo.scss","../../../../src/Form/Checkbox/Checkbox/CheckboxApollo.scss%23sass"],"names":[],"mappings":"AAAA,aAOE,kBAAA,CACA,iDAAA,CAHA,0EAAA,CACA,2CAAA,CCJF,YAAA,CDEE,0CAAA,CAHA,iBAAA,CAEA,yCCMF,CDCE,iBAIE,YAAA,CADA,QAAA,CAFA,iBAAA,CACA,OAAA,CAGA,8BAAA,CACA,+BCCJ,CDEE,wEAGE,+CCFJ,CDKE,kCAGE,0CAAA,CACA,QAAA,CACA,SAAA,CAJA,iBAAA,CACA,yCCAJ,CDKI,8CACE,aCHN,CC5BA,aACE,2DAAA,CACA,0CAAA,CACA,qDAAA,CACA,kCD+BF,CC7BE,wEAGE,2CD6BJ,CC1BE,2BACE,+CD4BJ,CCzBE,sCACE,4CD2BJ","file":"CheckboxApollo.css","sourcesContent":[".af-checkbox {\n  position: relative;\n  display: flex;\n  width: calc(24 / var(--font-size-base) * 1rem);\n  height: calc(24 / var(--font-size-base) * 1rem);\n  border: var(--checkbox-border-width, 1px) solid var(--checkbox-border-color);\n  border-radius: var(--checkbox-border-radius);\n  align-items: center;\n  background-color: var(--checkbox-background-color);\n\n  svg {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    display: none;\n    transform: translate(-50%, -50%);\n    fill: var(--checkbox-check-fill);\n  }\n\n  &:hover,\n  &:focus-within,\n  &:has(:checked) {\n    outline: 1px solid var(--checkbox-outline-color);\n  }\n\n  input[type=\"checkbox\"] {\n    position: absolute;\n    width: calc(24 / var(--font-size-base) * 1rem);\n    height: calc(24 / var(--font-size-base) * 1rem);\n    margin: 0;\n    opacity: 0;\n\n    &:checked + svg {\n      display: block;\n    }\n  }\n}\n","@use \"CheckboxCommon\";\n\n.af-checkbox {\n  --checkbox-border-radius: calc(6 / var(--font-size-base) * 1rem);\n  --checkbox-border-color: var(--axa-blue-65);\n  --checkbox-outline-color: var(--checkbox-border-color);\n  --checkbox-check-fill: var(--white);\n\n  &:hover,\n  &:focus-within,\n  &:has(:checked) {\n    --checkbox-border-color: var(--axa-blue-100);\n  }\n\n  &:has(:checked) {\n    --checkbox-background-color: var(--axa-blue-100);\n  }\n\n  &:has([aria-invalid=\"true\"]) {\n    --checkbox-border-color: var(--red-alert-100);\n  }\n}\n","@use \"CheckboxCommon\";\n\n.af-checkbox {\n  --checkbox-border-radius: calc(6 / var(--font-size-base) * 1rem);\n  --checkbox-border-color: var(--axa-blue-65);\n  --checkbox-outline-color: var(--checkbox-border-color);\n  --checkbox-check-fill: var(--white);\n\n  &:hover,\n  &:focus-within,\n  &:has(:checked) {\n    --checkbox-border-color: var(--axa-blue-100);\n  }\n\n  &:has(:checked) {\n    --checkbox-background-color: var(--axa-blue-100);\n  }\n\n  &:has([aria-invalid=\"true\"]) {\n    --checkbox-border-color: var(--red-alert-100);\n  }\n}\n"]}

package/dist/Form/Checkbox/Checkbox/CheckboxApollo.scss

@@ -1,36 +1,22 @@
 @use "CheckboxCommon";
 
 .af-checkbox {
-  &__icons {
-    --checkbox-border-radius: calc(6 / var(--font-size-base) * 1rem);
-    --checkbox-border: 1px var(--axa-blue-65);
-  }
-
-  input[type="checkbox"] {
-    &[aria-invalid="true"] {
-      ~ .af-checkbox__icons {
-        --checkbox-border: 1px var(--red-alert-100);
-        --checkbox-background-color: var(--white);
-      }
-    }
+  --checkbox-border-radius: calc(6 / var(--font-size-base) * 1rem);
+  --checkbox-border-color: var(--axa-blue-65);
+  --checkbox-outline-color: var(--checkbox-border-color);
+  --checkbox-check-fill: var(--white);
 
-    &:hover {
-      ~ .af-checkbox__icons {
-        --checkbox-border: 1px var(--axa-blue-100);
-        --checkbox-box-shadow-color: var(--axa-blue-100);
-      }
-    }
+  &:hover,
+  &:focus-within,
+  &:has(:checked) {
+    --checkbox-border-color: var(--axa-blue-100);
+  }
 
-    &:checked {
-      ~ .af-checkbox__icons {
-        --checkbox-border: 1px var(--axa-blue-100);
-        --checkbox-box-shadow-color: var(--axa-blue-100);
-        --checkbox-background-color: var(--axa-blue-100);
+  &:has(:checked) {
+    --checkbox-background-color: var(--axa-blue-100);
+  }
 
-        & .af-checkbox__checked {
-          --checkbox-check-fill: var(--white);
-        }
-      }
-    }
+  &:has([aria-invalid="true"]) {
+    --checkbox-border-color: var(--red-alert-100);
   }
 }

package/dist/Form/Checkbox/Checkbox/CheckboxCommon.css

@@ -1 +1 @@
-.af-checkbox__icons{align-items:center;background-color:var(--checkbox-background-color);border:solid var(--checkbox-border);border-radius:var(--checkbox-border-radius);display:flex;gap:calc(12/var(--font-size-base)*1rem);height:calc(24/var(--font-size-base)*1rem);max-width:calc(24/var(--font-size-base)*1rem);min-width:calc(24/var(--font-size-base)*1rem)}.af-checkbox__icons .af-checkbox__checked{display:none}.af-checkbox input[type=checkbox]{cursor:pointer;height:calc(24/var(--font-size-base)*1rem);margin:0;opacity:0;position:absolute;width:calc(24/var(--font-size-base)*1rem)}.af-checkbox input[type=checkbox]:checked~.af-checkbox__icons{box-shadow:0 0 0 1px var(--checkbox-box-shadow-color) inset}.af-checkbox input[type=checkbox]:checked~.af-checkbox__icons .af-checkbox__checked{display:block;fill:var(--checkbox-check-fill)}.af-checkbox input[type=checkbox]:hover~.af-checkbox__icons{border:solid var(--checkbox-border);box-shadow:0 0 0 1px var(--checkbox-box-shadow-color) inset}
+.af-checkbox{align-items:center;background-color:var(--checkbox-background-color);border:var(--checkbox-border-width,1px) solid var(--checkbox-border-color);border-radius:var(--checkbox-border-radius);display:flex;height:calc(24/var(--font-size-base)*1rem);position:relative;width:calc(24/var(--font-size-base)*1rem)}.af-checkbox svg{display:none;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);fill:var(--checkbox-check-fill)}.af-checkbox:focus-within,.af-checkbox:has(:checked),.af-checkbox:hover{outline:1px solid var(--checkbox-outline-color)}.af-checkbox input[type=checkbox]{height:calc(24/var(--font-size-base)*1rem);margin:0;opacity:0;position:absolute;width:calc(24/var(--font-size-base)*1rem)}.af-checkbox input[type=checkbox]:checked+svg{display:block}