@axa-fr/design-system-slash-css 0.2.0-beta.278

package/dist/List/ClickList/ClickList.client.scss

@@ -0,0 +1,228 @@
+@use "../../common/reboot";
+@use "../../common/common.client.scss" as common;
+
+.af-card--click-list {
+  padding: 0;
+
+  .af-list__separator {
+    width: calc(100% - 2rem);
+    margin: auto;
+  }
+
+  .af-list__item {
+    padding: 0;
+
+    .af-list-item {
+      &__content {
+        display: inherit;
+        align-items: inherit;
+        gap: 12px;
+      }
+
+      &-content {
+        &__icon svg {
+          width: 1.4rem;
+          height: 1.4rem;
+          fill: common.$color-axa;
+        }
+
+        &__label {
+          text-align: left;
+        }
+
+        &-label {
+          &__title {
+            margin: 0;
+            font-size: 1rem;
+            font-weight: 600;
+            line-height: 1.4rem;
+            color: common.$color-gray-900;
+          }
+
+          &__subtitle {
+            margin: 0;
+            font-size: 1rem;
+            font-weight: 400;
+            line-height: 1.4rem;
+            color: common.$color-gray-700;
+          }
+
+          &__secondary {
+            margin: 0;
+            font-size: 0.875rem;
+            font-weight: 400;
+            line-height: 1.1rem;
+            color: common.$color-gray-700;
+          }
+        }
+      }
+
+      &__action {
+        margin-left: auto;
+
+        svg {
+          width: 1.4rem;
+          height: 1.4rem;
+          fill: common.$color-axa;
+        }
+      }
+    }
+  }
+
+  &.af-card--large .af-list-item {
+    &-content__label {
+      font-size: 1.125rem;
+      font-weight: 600;
+      line-height: 1.4rem;
+    }
+
+    &-content-label {
+      &__title {
+        font-size: 1.125rem;
+        line-height: 1.4rem;
+      }
+
+      &__subtitle {
+        font-size: 1.125rem;
+        line-height: 1.4rem;
+      }
+    }
+  }
+
+  .af-list__item .af-list-item__button {
+    display: flex;
+    width: 100%;
+    padding: 1rem;
+    border: none;
+    border-radius: 4px;
+    align-items: center;
+    gap: 0.5rem;
+    color: inherit;
+    background: none;
+    cursor: pointer;
+
+    &:disabled {
+      cursor: default;
+
+      .af-list-item {
+        &-content {
+          &__icon svg {
+            fill: common.$color-gray-500;
+          }
+
+          &__label {
+            color: common.$color-gray-500;
+          }
+
+          &-label__title,
+          &-label__subtitle,
+          &-label__secondary {
+            color: common.$color-gray-500;
+          }
+        }
+
+        &__action svg {
+          fill: common.$color-gray-500;
+        }
+      }
+    }
+
+    &:enabled {
+      &:hover {
+        box-shadow: 0 4px 8px 0 hsla(230deg, 60%, 16%, 8%);
+      }
+
+      &:active {
+        box-shadow: 0 2px 8px 0 hsla(0deg, 0%, 0%, 15%) inset;
+        outline: none;
+      }
+
+      &:focus {
+        outline: none;
+      }
+
+      &:focus-visible {
+        border: 2px solid common.$color-focus;
+        outline: none;
+      }
+    }
+  }
+}
+
+@media (width <= #{common.$breakpoint-sm}) {
+  .af-card--click-list {
+    .af-list-item-content {
+      &__label {
+        font-size: 0.875rem;
+        line-height: 1.1rem;
+      }
+
+      &-label {
+        &__title,
+        &__subtitle {
+          font-size: 0.875rem;
+          line-height: 1.25rem;
+        }
+      }
+    }
+
+    &.af-card--large .af-list-item-content {
+      &__label {
+        font-size: 1rem;
+        font-weight: 600;
+        line-height: 1.25rem;
+      }
+
+      &-label {
+        &__title,
+        &__subtitle {
+          font-size: 1rem;
+          line-height: 1.25rem;
+        }
+      }
+    }
+
+    .af-list-item__button {
+      &:enabled {
+        box-shadow: none;
+
+        &:hover {
+          box-shadow: none;
+
+          .af-list-item {
+            &__label {
+              color: common.$color-axa;
+            }
+
+            &-label__title,
+            &-label__subtitle,
+            &-label__secondary {
+              color: common.$color-axa;
+            }
+          }
+        }
+
+        &:active {
+          box-shadow: none;
+
+          .af-list-item {
+            &__label {
+              color: common.$color-blue-1;
+            }
+
+            &-label__title,
+            &-label__subtitle,
+            &-label__secondary {
+              color: common.$color-blue-1;
+            }
+          }
+        }
+
+        &:focus-visible {
+          border: none;
+          border: 1px solid common.$color-focus;
+        }
+      }
+    }
+  }
+}

package/dist/List/ContentTabList/ContentTabList.client.css

@@ -0,0 +1 @@
+.af-card--content-tab-list{padding:.5rem 1.5rem}.af-card--content-tab-list .af-list{display:flex;flex-direction:column;justify-content:center}.af-card--content-tab-list .af-list__item{align-items:center;display:flex;flex-direction:row;gap:2.5rem;justify-content:space-between}.af-card--content-tab-list .af-list__item span{display:block;margin:0}.af-card--content-tab-list .af-list__item .af-list-item__additional-data-container,.af-card--content-tab-list .af-list__item .af-list-item__left-container,.af-card--content-tab-list .af-list__item .af-list-item__right-container{all:inherit;padding:0}.af-card--content-tab-list .af-list__item .af-list-item__additional-data-container{grid-area:content-tab__additional-data-container}.af-card--content-tab-list .af-list__item .af-list-item__additional-data-container .af-tag{grid-area:content-tab__tag}.af-card--content-tab-list .af-list__item .af-list-item__label{color:#333;grid-area:content-tab__label}.af-card--content-tab-list .af-list__item .af-list-item-label__title{font-size:1.125rem;font-weight:600;line-height:1.4rem}.af-card--content-tab-list .af-list__item .af-list-item-label__subtitle{color:#5f5f5f;font-size:1rem;font-weight:400;line-height:1.25rem}.af-card--content-tab-list .af-list__item .af-list-item__date{color:#5f5f5f;font-size:1.125rem;font-weight:600;grid-area:content-tab__date;line-height:1.4rem}.af-card--content-tab-list .af-list__item .af-list-item__value{color:#118635;font-size:1.125rem;font-weight:600;justify-self:end;line-height:1.4rem;text-align:right}.af-card--content-tab-list .af-list__item .af-list-item__button-container{margin:0 .625rem}.af-card--content-tab-list .af-list__item .af-list-item__button-container svg{height:1.25rem;width:1.25rem;fill:#00008f}.af-card--content-tab-list .af-list__item:not(:has(.af-list-item__value)) .af-tag{margin:0 1.34rem}@media (width <= 667px){.af-card--content-tab-list{padding:.25rem 1rem}.af-card--content-tab-list .af-list__item{gap:1.5rem;padding:.75rem 0}.af-card--content-tab-list .af-list__item .af-list-item__left-container{align-items:start;display:grid;gap:.25rem;grid-template:"content-tab__additional-data-container" "content-tab__label";justify-content:start}.af-card--content-tab-list .af-list__item .af-list-item__right-container{gap:1.5rem}.af-card--content-tab-list .af-list__item .af-list-item__additional-data-container{align-items:center;display:block}.af-card--content-tab-list .af-list__item .af-list-item__additional-data-container:has(.af-list-item__date):has(.af-tag){display:grid;gap:.75rem;grid-template:"content-tab__tag content-tab__date"}.af-card--content-tab-list .af-list__item .af-list-item__additional-data-container .af-tag{margin:0}.af-card--content-tab-list .af-list__item .af-list-item-label__title{font-size:1rem;line-height:1.25rem}.af-card--content-tab-list .af-list__item .af-list-item-label__subtitle{font-size:.875rem;line-height:1.1rem}.af-card--content-tab-list .af-list__item .af-list-item__date,.af-card--content-tab-list .af-list__item .af-list-item__value{font-size:1rem;line-height:1.25rem}.af-card--content-tab-list .af-list__item .af-list-item__button-container{margin:0}.af-card--content-tab-list .af-list__item .af-list-item__button-container button{font-size:0;gap:0;padding:0}.af-card--content-tab-list .af-list__item:has(.af-list-item__value){align-items:start}}

package/dist/List/ContentTabList/ContentTabList.client.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/List/ContentTabList/ContentTabList.client.scss%23sass","../../../src/List/ContentTabList/ContentTabList.client.scss","../../../src/common/common.client.scss"],"names":[],"mappings":"AAEA,2BACE,oBCDF,CDGE,oCACE,YAAA,CACA,qBAAA,CACA,sBCDJ,CDIE,0CAGE,kBAAA,CAFA,YAAA,CACA,kBAAA,CAGA,UAAA,CADA,6BCDJ,CDII,+CACE,aAAA,CACA,QCFN,CDMM,oOAGE,WAAA,CACA,SCNR,CDSM,mFACE,gDCPR,CDSQ,2FACE,0BCPV,CDWM,+DAEE,UAAA,CADA,4BCRR,CDYM,qEACE,kBAAA,CACA,eAAA,CACA,kBCVR,CDaM,wEAIE,aAAA,CAHA,cAAA,CACA,eAAA,CACA,mBCVR,CDcM,8DAKE,aE7BS,CF0BT,kBAAA,CACA,eAAA,CAFA,2BAAA,CAGA,kBCXR,CDeM,+DAME,aAAA,CAJA,kBAAA,CACA,eAAA,CAFA,gBAAA,CAGA,kBAAA,CACA,gBCZR,CDgBM,0EACE,gBCdR,CDgBQ,8EAEE,cAAA,CADA,aAAA,CAEA,YCdV,CDoBM,kFACE,gBClBR,CDwBA,wBACE,2BACE,mBCrBF,CDuBE,0CAEE,UAAA,CADA,gBCpBJ,CDwBM,wEAKE,iBAAA,CAJA,YAAA,CAMA,UAAA,CALA,2EAAA,CAIA,qBCvBR,CD2BM,yEACE,UCzBR,CD4BM,mFCzBR,kBAAA,CADE,aAEA,CACF,yHACE,YAAA,CD6BU,UAAA,CADA,kDCzBV,CD6BQ,2FACE,QC3BV,CD+BM,qEACE,cAAA,CACA,mBC7BR,CDgCM,wEACE,iBAAA,CACA,kBC9BR,CDsCM,6HACE,cAAA,CACA,mBChCR,CDmCM,0EACE,QCjCR,CDmCQ,iFAGE,WAAA,CADA,KAAA,CADA,SC/BV,CDsCI,oEACE,iBCpCN,CACF","file":"ContentTabList.client.css","sourcesContent":["@use \"../../common/common.client.scss\" as common;\n\n.af-card--content-tab-list {\n  padding: 0.5rem 1.5rem;\n\n  .af-list {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  .af-list__item {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    gap: 2.5rem;\n\n    span {\n      display: block;\n      margin: 0;\n    }\n\n    .af-list-item {\n      &__left-container,\n      &__right-container,\n      &__additional-data-container {\n        all: inherit;\n        padding: 0;\n      }\n\n      &__additional-data-container {\n        grid-area: content-tab__additional-data-container;\n\n        .af-tag {\n          grid-area: content-tab__tag;\n        }\n      }\n\n      &__label {\n        grid-area: content-tab__label;\n        color: common.$color-gray-900;\n      }\n\n      &-label__title {\n        font-size: 1.125rem;\n        font-weight: 600;\n        line-height: 1.4rem;\n      }\n\n      &-label__subtitle {\n        font-size: 1rem;\n        font-weight: 400;\n        line-height: 1.25rem;\n        color: common.$color-gray-700;\n      }\n\n      &__date {\n        grid-area: content-tab__date;\n        font-size: 1.125rem;\n        font-weight: 600;\n        line-height: 1.4rem;\n        color: common.$color-gray-700;\n      }\n\n      &__value {\n        justify-self: end;\n        font-size: 1.125rem;\n        font-weight: 600;\n        line-height: 1.4rem;\n        text-align: right;\n        color: common.$color-green-600;\n      }\n\n      &__button-container {\n        margin: 0 0.625rem;\n\n        svg {\n          width: 1.25rem;\n          height: 1.25rem;\n          fill: common.$color-axa;\n        }\n      }\n    }\n\n    &:not(:has(.af-list-item__value)) {\n      .af-tag {\n        margin: 0 1.34rem;\n      }\n    }\n  }\n}\n\n@media (width <= #{common.$breakpoint-sm}) {\n  .af-card--content-tab-list {\n    padding: 0.25rem 1rem;\n\n    .af-list__item {\n      padding: 0.75rem 0;\n      gap: 1.5rem;\n\n      .af-list-item {\n        &__left-container {\n          display: grid;\n          grid-template:\n            \"content-tab__additional-data-container\"\n            \"content-tab__label\";\n          align-items: start;\n          justify-content: start;\n          gap: 0.25rem;\n        }\n\n        &__right-container {\n          gap: 1.5rem;\n        }\n\n        &__additional-data-container {\n          display: block;\n          align-items: center;\n\n          &:has(.af-list-item__date):has(.af-tag) {\n            display: grid;\n            grid-template: \"content-tab__tag content-tab__date\";\n            gap: 0.75rem;\n          }\n\n          .af-tag {\n            margin: 0;\n          }\n        }\n\n        &-label__title {\n          font-size: 1rem;\n          line-height: 1.25rem;\n        }\n\n        &-label__subtitle {\n          font-size: 0.875rem;\n          line-height: 1.1rem;\n        }\n\n        &__date {\n          font-size: 1rem;\n          line-height: 1.25rem;\n        }\n\n        &__value {\n          font-size: 1rem;\n          line-height: 1.25rem;\n        }\n\n        &__button-container {\n          margin: 0;\n\n          button {\n            padding: 0;\n            gap: 0;\n            font-size: 0;\n          }\n        }\n      }\n\n      &:has(.af-list-item__value) {\n        align-items: start;\n      }\n    }\n  }\n}\n","@use \"../../common/common.client.scss\" as common;\n\n.af-card--content-tab-list {\n  padding: 0.5rem 1.5rem;\n\n  .af-list {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  .af-list__item {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    gap: 2.5rem;\n\n    span {\n      display: block;\n      margin: 0;\n    }\n\n    .af-list-item {\n      &__left-container,\n      &__right-container,\n      &__additional-data-container {\n        all: inherit;\n        padding: 0;\n      }\n\n      &__additional-data-container {\n        grid-area: content-tab__additional-data-container;\n\n        .af-tag {\n          grid-area: content-tab__tag;\n        }\n      }\n\n      &__label {\n        grid-area: content-tab__label;\n        color: common.$color-gray-900;\n      }\n\n      &-label__title {\n        font-size: 1.125rem;\n        font-weight: 600;\n        line-height: 1.4rem;\n      }\n\n      &-label__subtitle {\n        font-size: 1rem;\n        font-weight: 400;\n        line-height: 1.25rem;\n        color: common.$color-gray-700;\n      }\n\n      &__date {\n        grid-area: content-tab__date;\n        font-size: 1.125rem;\n        font-weight: 600;\n        line-height: 1.4rem;\n        color: common.$color-gray-700;\n      }\n\n      &__value {\n        justify-self: end;\n        font-size: 1.125rem;\n        font-weight: 600;\n        line-height: 1.4rem;\n        text-align: right;\n        color: common.$color-green-600;\n      }\n\n      &__button-container {\n        margin: 0 0.625rem;\n\n        svg {\n          width: 1.25rem;\n          height: 1.25rem;\n          fill: common.$color-axa;\n        }\n      }\n    }\n\n    &:not(:has(.af-list-item__value)) {\n      .af-tag {\n        margin: 0 1.34rem;\n      }\n    }\n  }\n}\n\n@media (width <= #{common.$breakpoint-sm}) {\n  .af-card--content-tab-list {\n    padding: 0.25rem 1rem;\n\n    .af-list__item {\n      padding: 0.75rem 0;\n      gap: 1.5rem;\n\n      .af-list-item {\n        &__left-container {\n          display: grid;\n          grid-template:\n            \"content-tab__additional-data-container\"\n            \"content-tab__label\";\n          align-items: start;\n          justify-content: start;\n          gap: 0.25rem;\n        }\n\n        &__right-container {\n          gap: 1.5rem;\n        }\n\n        &__additional-data-container {\n          display: block;\n          align-items: center;\n\n          &:has(.af-list-item__date):has(.af-tag) {\n            display: grid;\n            grid-template: \"content-tab__tag content-tab__date\";\n            gap: 0.75rem;\n          }\n\n          .af-tag {\n            margin: 0;\n          }\n        }\n\n        &-label__title {\n          font-size: 1rem;\n          line-height: 1.25rem;\n        }\n\n        &-label__subtitle {\n          font-size: 0.875rem;\n          line-height: 1.1rem;\n        }\n\n        &__date {\n          font-size: 1rem;\n          line-height: 1.25rem;\n        }\n\n        &__value {\n          font-size: 1rem;\n          line-height: 1.25rem;\n        }\n\n        &__button-container {\n          margin: 0;\n\n          button {\n            padding: 0;\n            gap: 0;\n            font-size: 0;\n          }\n        }\n      }\n\n      &:has(.af-list-item__value) {\n        align-items: start;\n      }\n    }\n  }\n}\n","$font-family-sans-serif: \"Source Sans Pro\", arial, sans-serif !default;\n$font-family-serif: georgia, times, \"Times New Roman\", serif !default;\n$font-family-base: $font-family-sans-serif !default;\n$font-family-publico-bold: \"Publico Headline Bold\" !default;\n$font-family-publico: \"Publico Headline\" !default;\n// colors\n\n$color-axa: #00008f !default;\n$color-white: #fff !default;\n$color-black: #000 !default;\n$color-red: #ff1721 !default;\n$color-gray: #5f5f5f !default;\n$color-blue-1: #000072 !default;\n$color-blue-2: #f8f8ff !default;\n$color-blue-3: #36f !default;\n$color-btn-light: #3333a5 !default;\n$color-btn-business: #c94e14 !default;\n$color-btn-business-dark: #a8391c !default;\n$color-btn-business-light: #df7e65 !default;\n$color-btn-disabled-text: #999 !default;\n$color-btn-disabled-border: #e5e5e5 !default;\n$color-btn-error: #c91432 !default;\n$color-btn-error-text: #a11028 !default;\n$color-btn-error-bg: #fff3f5 !default;\n$color-btn-tertiary-bg: #eef !default;\n$color-btn-tertiary-bg-darker: #e4e4ff !default;\n$color-btn-tertiary-bg-lighter: #f8f8ff !default;\n$color-oceanBlue: #4976ba !default;\n$color-gray-1: #ccc !default;\n$color-gray-200: #f3f3f3;\n$color-gray-300: #e9ecf2;\n$color-gray-400: #e5e5e5;\n$color-gray-500: #999;\n$color-gray-700: #5f5f5f;\n$color-gray-900: #333 !default;\n$color-green-600: #118635 !default;\n$color-border: #f3f3f3 !default;\n$color-focus: #36f !default;\n\n// others\n\n$component-border-radius: 8px !default;\n\n$transition-duration: 0.2s !default;\n\n// spacing\n\n$sizing-u0: 0 !default;\n$sizing-u05: 0.4rem !default;\n$sizing-u1: 0.8rem !default;\n$sizing-u2: 1.6rem !default;\n$sizing-u3: 2.4rem !default;\n$sizing-u4: 3.2rem !default;\n$sizing-u5: 4rem !default;\n$sizing-u6: 4.8rem !default;\n$sizing-u7: 5.6rem !default;\n$sizing-u8: 6.4rem !default;\n$sizing-u9: 7.2rem !default;\n$sizing-u10: 8rem !default;\n$spacing-u0: 0 !default;\n$spacing-u05: 0.4rem !default;\n$spacing-u1: 0.8rem !default;\n$spacing-u2: 1.6rem !default;\n$spacing-u3: 2.4rem !default;\n$spacing-u4: 3.2rem !default;\n$spacing-u5: 4rem !default;\n$spacing-u6: 4.8rem !default;\n$spacing-u7: 5.6rem !default;\n$spacing-u8: 6.4rem !default;\n$spacing-u9: 7.2rem !default;\n$spacing-u10: 8rem !default;\n$spacing-u11: 8.8rem !default;\n$spacing-u12: 9.6rem !default;\n$spacing-u13: 10.4rem !default;\n$spacing-u14: 11.2rem !default;\n$spacing-u15: 12rem !default;\n$spacing-u16: 12.8rem !default;\n$spacing-u17: 13.6rem !default;\n$spacing-u18: 14.4rem !default;\n$spacing-u19: 15.2rem !default;\n$spacing-u20: 16rem !default;\n$screen-size-668: s !default;\n$screen-size-1024: m !default;\n$screen-size-1200: oldl !default;\n$screen-size-1280: l !default;\n$screen-size-1540: oldxl !default;\n$screen-size-1600: xl !default;\n$screen-size-s: 668px !default;\n$screen-size-m: 1024px !default;\n$screen-size-l: 1280px !default;\n$screen-size-xl: 1600px !default;\n$screen-size-oldl: 1200px !default;\n$screen-size-oldxl: 1540px !default;\n\n$error-custom-border: #d18e8e !default;\n$error-custom-bg: #ffbfbf !default;\n\n$color-alertDanger-colorBorder: #c8b282 !default;\n$color-alertDanger-bgColor: #f1d596 !default;\n\n// breakpoints\n\n$breakpoint-xs: 0 !default;\n$breakpoint-sm: 667px !default;\n$breakpoint-md: 1023px !default;\n$breakpoint-lg: 1279px !default;\n$breakpoint-xl: 1599px !default;\n"]}

package/dist/List/ContentTabList/ContentTabList.client.scss

@@ -0,0 +1,168 @@
+@use "../../common/common.client.scss" as common;
+
+.af-card--content-tab-list {
+  padding: 0.5rem 1.5rem;
+
+  .af-list {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .af-list__item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 2.5rem;
+
+    span {
+      display: block;
+      margin: 0;
+    }
+
+    .af-list-item {
+      &__left-container,
+      &__right-container,
+      &__additional-data-container {
+        all: inherit;
+        padding: 0;
+      }
+
+      &__additional-data-container {
+        grid-area: content-tab__additional-data-container;
+
+        .af-tag {
+          grid-area: content-tab__tag;
+        }
+      }
+
+      &__label {
+        grid-area: content-tab__label;
+        color: common.$color-gray-900;
+      }
+
+      &-label__title {
+        font-size: 1.125rem;
+        font-weight: 600;
+        line-height: 1.4rem;
+      }
+
+      &-label__subtitle {
+        font-size: 1rem;
+        font-weight: 400;
+        line-height: 1.25rem;
+        color: common.$color-gray-700;
+      }
+
+      &__date {
+        grid-area: content-tab__date;
+        font-size: 1.125rem;
+        font-weight: 600;
+        line-height: 1.4rem;
+        color: common.$color-gray-700;
+      }
+
+      &__value {
+        justify-self: end;
+        font-size: 1.125rem;
+        font-weight: 600;
+        line-height: 1.4rem;
+        text-align: right;
+        color: common.$color-green-600;
+      }
+
+      &__button-container {
+        margin: 0 0.625rem;
+
+        svg {
+          width: 1.25rem;
+          height: 1.25rem;
+          fill: common.$color-axa;
+        }
+      }
+    }
+
+    &:not(:has(.af-list-item__value)) {
+      .af-tag {
+        margin: 0 1.34rem;
+      }
+    }
+  }
+}
+
+@media (width <= #{common.$breakpoint-sm}) {
+  .af-card--content-tab-list {
+    padding: 0.25rem 1rem;
+
+    .af-list__item {
+      padding: 0.75rem 0;
+      gap: 1.5rem;
+
+      .af-list-item {
+        &__left-container {
+          display: grid;
+          grid-template:
+            "content-tab__additional-data-container"
+            "content-tab__label";
+          align-items: start;
+          justify-content: start;
+          gap: 0.25rem;
+        }
+
+        &__right-container {
+          gap: 1.5rem;
+        }
+
+        &__additional-data-container {
+          display: block;
+          align-items: center;
+
+          &:has(.af-list-item__date):has(.af-tag) {
+            display: grid;
+            grid-template: "content-tab__tag content-tab__date";
+            gap: 0.75rem;
+          }
+
+          .af-tag {
+            margin: 0;
+          }
+        }
+
+        &-label__title {
+          font-size: 1rem;
+          line-height: 1.25rem;
+        }
+
+        &-label__subtitle {
+          font-size: 0.875rem;
+          line-height: 1.1rem;
+        }
+
+        &__date {
+          font-size: 1rem;
+          line-height: 1.25rem;
+        }
+
+        &__value {
+          font-size: 1rem;
+          line-height: 1.25rem;
+        }
+
+        &__button-container {
+          margin: 0;
+
+          button {
+            padding: 0;
+            gap: 0;
+            font-size: 0;
+          }
+        }
+      }
+
+      &:has(.af-list-item__value) {
+        align-items: start;
+      }
+    }
+  }
+}

package/dist/List/List.css

@@ -0,0 +1 @@
+.af-card--list{box-shadow:none;padding:0 1rem}.af-card--large{width:100%}.af-list{flex-direction:column;list-style-type:none;padding:0}.af-list__item{padding:1rem 0}.af-list__separator{border:1px solid #e9ecf2;margin:0}

package/dist/List/List.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/List/List.scss%23sass","../../src/List/List.scss"],"names":[],"mappings":"AAGE,eCDF,eAAA,CDEI,cCDJ,CDKE,gBACE,UCHJ,CDOA,SAEE,qBAAA,CCJF,oBAAA,CDGE,SCFF,CDME,eACE,cCJJ,CDOE,oBAEE,wBAAA,CADA,QCJJ","file":"List.css","sourcesContent":["@use \"../common/common.client.scss\" as common;\n\n.af-card {\n  &--list {\n    padding: 0 1rem;\n    box-shadow: none;\n  }\n\n  &--large {\n    width: 100%;\n  }\n}\n\n.af-list {\n  padding: 0;\n  flex-direction: column;\n  list-style-type: none;\n\n  &__item {\n    padding: 1rem 0;\n  }\n\n  &__separator {\n    margin: 0;\n    border: 1px solid common.$color-gray-300;\n  }\n}\n","@use \"../common/common.client.scss\" as common;\n\n.af-card {\n  &--list {\n    padding: 0 1rem;\n    box-shadow: none;\n  }\n\n  &--large {\n    width: 100%;\n  }\n}\n\n.af-list {\n  padding: 0;\n  flex-direction: column;\n  list-style-type: none;\n\n  &__item {\n    padding: 1rem 0;\n  }\n\n  &__separator {\n    margin: 0;\n    border: 1px solid common.$color-gray-300;\n  }\n}\n"]}

package/dist/List/List.scss

@@ -0,0 +1,27 @@
+@use "../common/common.client.scss" as common;
+
+.af-card {
+  &--list {
+    padding: 0 1rem;
+    box-shadow: none;
+  }
+
+  &--large {
+    width: 100%;
+  }
+}
+
+.af-list {
+  padding: 0;
+  flex-direction: column;
+  list-style-type: none;
+
+  &__item {
+    padding: 1rem 0;
+  }
+
+  &__separator {
+    margin: 0;
+    border: 1px solid common.$color-gray-300;
+  }
+}

package/dist/Loader/Loader.client.css

@@ -0,0 +1 @@
+.af-loader__container{align-items:center;animation:spin 2s linear infinite;border:1px solid #f3f3f3;border-radius:50%;border-top-color:#00008f;container-type:inline-size;display:flex;flex-direction:column;justify-content:center;margin:auto}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}

package/dist/Loader/Loader.client.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Loader/Loader.client.scss%23sass","../../src/Loader/Loader.client.scss"],"names":[],"mappings":"AAGE,sBAQE,kBAAA,CAEA,iCAAA,CALA,wBAAA,CACA,iBAAA,CADA,wBAAA,CCNJ,0BAAA,CDEI,YAAA,CAMA,qBAAA,CAEA,sBAAA,CANA,WCKJ,CDMA,gBACE,GCHF,sBACE,CACF,GACE,uBACA,CACF","file":"Loader.client.css","sourcesContent":["@use \"../common/common.client.scss\" as common;\n\n.af-loader {\n  &__container {\n    display: flex;\n    container-type: inline-size;\n    margin: auto;\n    border: 1px solid common.$color-gray-200;\n    border-top: 1px solid common.$color-axa;\n    border-radius: 50%;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    animation: spin 2s linear infinite;\n  }\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n","@use \"../common/common.client.scss\" as common;\n\n.af-loader {\n  &__container {\n    display: flex;\n    container-type: inline-size;\n    margin: auto;\n    border: 1px solid common.$color-gray-200;\n    border-top: 1px solid common.$color-axa;\n    border-radius: 50%;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    animation: spin 2s linear infinite;\n  }\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n"]}

package/dist/Loader/Loader.client.scss

@@ -0,0 +1,26 @@
+@use "../common/common.client.scss" as common;
+
+.af-loader {
+  &__container {
+    display: flex;
+    container-type: inline-size;
+    margin: auto;
+    border: 1px solid common.$color-gray-200;
+    border-top: 1px solid common.$color-axa;
+    border-radius: 50%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    animation: spin 2s linear infinite;
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/dist/Modal/Modal.agent.css

@@ -0,0 +1 @@
+.container{margin-left:auto;margin-right:auto;padding-left:15px;padding-right:15px;width:100%}@media (width >= 576px){.container{max-width:540px}}@media (width >= 768px){.container{max-width:720px}}@media (width >= 992px){.container{max-width:960px}}@media (width >= 1200px){.container{max-width:1440px}}.container-fluid{margin-left:auto;margin-right:auto;padding-left:15px;padding-right:15px;width:100%}.row{display:flex;flex-wrap:wrap;margin-left:-15px;margin-right:-15px}.no-gutters{margin-left:0;margin-right:0}.col,.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-auto,.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-auto,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-auto,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-auto,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto{padding-left:15px;padding-right:15px;position:relative;width:100%}.col{flex-basis:0;flex-grow:1;max-width:100%}.col-auto{flex:0 0 auto;max-width:100%;width:auto}.col-1{flex:0 0 8.3333%;max-width:8.3333%}.col-2{flex:0 0 16.6667%;max-width:16.6667%}.col-3{flex:0 0 25%;max-width:25%}.col-4{flex:0 0 33.3333%;max-width:33.3333%}.col-5{flex:0 0 41.6667%;max-width:41.6667%}.col-6{flex:0 0 50%;max-width:50%}.col-7{flex:0 0 58.3333%;max-width:58.3333%}.col-8{flex:0 0 66.6667%;max-width:66.6667%}.col-9{flex:0 0 75%;max-width:75%}.col-10{flex:0 0 83.3333%;max-width:83.3333%}.col-11{flex:0 0 91.6667%;max-width:91.6667%}.col-12{flex:0 0 100%;max-width:100%}.no-gutters>.col,.no-gutters>[class*=col-]{padding-left:0;padding-right:0}.order-first{order:-1}.order-last{order:13}.order-0{order:0}.order-1{order:1}.order-2{order:2}.order-3{order:3}.order-4{order:4}.order-5{order:5}.order-6{order:6}.order-7{order:7}.order-8{order:8}.order-9{order:9}.order-10{order:10}.order-11{order:11}.order-12{order:12}.offset-1{margin-left:8.3333%}.offset-2{margin-left:16.6667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.3333%}.offset-5{margin-left:41.6667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.3333%}.offset-8{margin-left:66.6667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.3333%}.offset-11{margin-left:91.6667%}@media (width >= 576px){.col-sm{flex-basis:0;flex-grow:1;max-width:100%}.col-sm-auto{flex:0 0 auto;max-width:100%;width:auto}.col-sm-1{flex:0 0 8.3333%;max-width:8.3333%}.col-sm-2{flex:0 0 16.6667%;max-width:16.6667%}.col-sm-3{flex:0 0 25%;max-width:25%}.col-sm-4{flex:0 0 33.3333%;max-width:33.3333%}.col-sm-5{flex:0 0 41.6667%;max-width:41.6667%}.col-sm-6{flex:0 0 50%;max-width:50%}.col-sm-7{flex:0 0 58.3333%;max-width:58.3333%}.col-sm-8{flex:0 0 66.6667%;max-width:66.6667%}.col-sm-9{flex:0 0 75%;max-width:75%}.col-sm-10{flex:0 0 83.3333%;max-width:83.3333%}.col-sm-11{flex:0 0 91.6667%;max-width:91.6667%}.col-sm-12{flex:0 0 100%;max-width:100%}.order-sm-first{order:-1}.order-sm-last{order:13}.order-sm-0{order:0}.order-sm-1{order:1}.order-sm-2{order:2}.order-sm-3{order:3}.order-sm-4{order:4}.order-sm-5{order:5}.order-sm-6{order:6}.order-sm-7{order:7}.order-sm-8{order:8}.order-sm-9{order:9}.order-sm-10{order:10}.order-sm-11{order:11}.order-sm-12{order:12}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.3333%}.offset-sm-2{margin-left:16.6667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.3333%}.offset-sm-5{margin-left:41.6667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.3333%}.offset-sm-8{margin-left:66.6667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.3333%}.offset-sm-11{margin-left:91.6667%}}@media (width >= 768px){.col-md{flex-basis:0;flex-grow:1;max-width:100%}.col-md-auto{flex:0 0 auto;max-width:100%;width:auto}.col-md-1{flex:0 0 8.3333%;max-width:8.3333%}.col-md-2{flex:0 0 16.6667%;max-width:16.6667%}.col-md-3{flex:0 0 25%;max-width:25%}.col-md-4{flex:0 0 33.3333%;max-width:33.3333%}.col-md-5{flex:0 0 41.6667%;max-width:41.6667%}.col-md-6{flex:0 0 50%;max-width:50%}.col-md-7{flex:0 0 58.3333%;max-width:58.3333%}.col-md-8{flex:0 0 66.6667%;max-width:66.6667%}.col-md-9{flex:0 0 75%;max-width:75%}.col-md-10{flex:0 0 83.3333%;max-width:83.3333%}.col-md-11{flex:0 0 91.6667%;max-width:91.6667%}.col-md-12{flex:0 0 100%;max-width:100%}.order-md-first{order:-1}.order-md-last{order:13}.order-md-0{order:0}.order-md-1{order:1}.order-md-2{order:2}.order-md-3{order:3}.order-md-4{order:4}.order-md-5{order:5}.order-md-6{order:6}.order-md-7{order:7}.order-md-8{order:8}.order-md-9{order:9}.order-md-10{order:10}.order-md-11{order:11}.order-md-12{order:12}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.3333%}.offset-md-2{margin-left:16.6667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.3333%}.offset-md-5{margin-left:41.6667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.3333%}.offset-md-8{margin-left:66.6667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.3333%}.offset-md-11{margin-left:91.6667%}}@media (width >= 992px){.col-lg{flex-basis:0;flex-grow:1;max-width:100%}.col-lg-auto{flex:0 0 auto;max-width:100%;width:auto}.col-lg-1{flex:0 0 8.3333%;max-width:8.3333%}.col-lg-2{flex:0 0 16.6667%;max-width:16.6667%}.col-lg-3{flex:0 0 25%;max-width:25%}.col-lg-4{flex:0 0 33.3333%;max-width:33.3333%}.col-lg-5{flex:0 0 41.6667%;max-width:41.6667%}.col-lg-6{flex:0 0 50%;max-width:50%}.col-lg-7{flex:0 0 58.3333%;max-width:58.3333%}.col-lg-8{flex:0 0 66.6667%;max-width:66.6667%}.col-lg-9{flex:0 0 75%;max-width:75%}.col-lg-10{flex:0 0 83.3333%;max-width:83.3333%}.col-lg-11{flex:0 0 91.6667%;max-width:91.6667%}.col-lg-12{flex:0 0 100%;max-width:100%}.order-lg-first{order:-1}.order-lg-last{order:13}.order-lg-0{order:0}.order-lg-1{order:1}.order-lg-2{order:2}.order-lg-3{order:3}.order-lg-4{order:4}.order-lg-5{order:5}.order-lg-6{order:6}.order-lg-7{order:7}.order-lg-8{order:8}.order-lg-9{order:9}.order-lg-10{order:10}.order-lg-11{order:11}.order-lg-12{order:12}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.3333%}.offset-lg-2{margin-left:16.6667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.3333%}.offset-lg-5{margin-left:41.6667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.3333%}.offset-lg-8{margin-left:66.6667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.3333%}.offset-lg-11{margin-left:91.6667%}}@media (width >= 1200px){.col-xl{flex-basis:0;flex-grow:1;max-width:100%}.col-xl-auto{flex:0 0 auto;max-width:100%;width:auto}.col-xl-1{flex:0 0 8.3333%;max-width:8.3333%}.col-xl-2{flex:0 0 16.6667%;max-width:16.6667%}.col-xl-3{flex:0 0 25%;max-width:25%}.col-xl-4{flex:0 0 33.3333%;max-width:33.3333%}.col-xl-5{flex:0 0 41.6667%;max-width:41.6667%}.col-xl-6{flex:0 0 50%;max-width:50%}.col-xl-7{flex:0 0 58.3333%;max-width:58.3333%}.col-xl-8{flex:0 0 66.6667%;max-width:66.6667%}.col-xl-9{flex:0 0 75%;max-width:75%}.col-xl-10{flex:0 0 83.3333%;max-width:83.3333%}.col-xl-11{flex:0 0 91.6667%;max-width:91.6667%}.col-xl-12{flex:0 0 100%;max-width:100%}.order-xl-first{order:-1}.order-xl-last{order:13}.order-xl-0{order:0}.order-xl-1{order:1}.order-xl-2{order:2}.order-xl-3{order:3}.order-xl-4{order:4}.order-xl-5{order:5}.order-xl-6{order:6}.order-xl-7{order:7}.order-xl-8{order:8}.order-xl-9{order:9}.order-xl-10{order:10}.order-xl-11{order:11}.order-xl-12{order:12}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.3333%}.offset-xl-2{margin-left:16.6667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.3333%}.offset-xl-5{margin-left:41.6667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.3333%}.offset-xl-8{margin-left:66.6667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.3333%}.offset-xl-11{margin-left:91.6667%}}*,:after,:before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{background-color:#fff;color:#333;font-family:Source Sans Pro,Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.5;margin:0;text-align:left}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:initial;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-bottom:.5rem;margin-top:0}p{margin-bottom:1rem;margin-top:0}abbr[data-original-title],abbr[title]{border-bottom:0;cursor:help;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{font-style:normal;line-height:inherit}address,dl,ol,ul{margin-bottom:1rem}dl,ol,ul{margin-top:0}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}a{background-color:initial;color:#00008f;text-decoration:none}a:hover{color:#000043;text-decoration:underline}a:not([href],[tabindex]),a:not([href],[tabindex]):focus,a:not([href],[tabindex]):hover{color:inherit;text-decoration:none}a:not([href],[tabindex]):focus{outline:0}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}pre{margin-bottom:1rem;margin-top:0;overflow:auto}figure{margin:0 0 1rem}img{border-style:none}img,svg{vertical-align:middle}svg{overflow:hidden}table{border-collapse:collapse}caption{caption-side:bottom;color:#6c757d;padding-bottom:.5rem;padding-top:.5rem;text-align:left}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button,input,optgroup,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}button,input{overflow:visible}button,select{text-transform:none}select{word-wrap:normal}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;appearance:button}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox;appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{border:0;margin:0;min-width:0;padding:0}legend{color:inherit;display:block;font-size:1.5rem;line-height:inherit;margin-bottom:.5rem;max-width:100%;padding:0;white-space:normal;width:100%}progress{vertical-align:initial}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:none;appearance:none;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;appearance:button;font:inherit}output{display:inline-block}summary{cursor:pointer;display:list-item}template{display:none}[hidden]{display:none!important}.af-modal{animation:appeardialog .3s cubic-bezier(.65,.05,.36,1);border:1px solid #333;padding:0}.af-modal::backdrop{animation:fademodal .1s linear;background:#3032c19e}.af-modal--lg{max-width:50rem}.af-modal--sm{max-width:18.75rem}.af-modal__content{background-clip:padding-box;background-color:#fff}.af-modal__header{align-items:center;border-bottom:1px solid #eceeef;display:flex;justify-content:space-between;padding:.9375rem}.af-modal__header-title{font-weight:inherit;margin-bottom:0}.af-modal__header-close-btn{background:none;border:none;box-shadow:none;font-size:1rem;line-height:1rem;padding:.5rem}.af-modal__header-close-btn:hover{background-color:#eceeef}.af-modal__header-close-btn .glyphicon-close{width:1.0625rem}.af-modal__body{flex:1 1 auto;padding:.9375rem;position:relative;-webkit-box-flex:1}.af-modal__footer{align-items:center;border-top:1px solid #eceeef;display:flex;justify-content:flex-end;padding:.9375rem}.af-modal__footer>.af-btn:not(:last-child){margin-right:.25rem}.af-modal__footer>.af-btn:not(:first-child){margin-left:.25rem}@media (min-width:576px){.af-modal{margin:1.875rem auto;max-width:31.25rem}.af-modal--sm{max-width:18.75rem}}@media (min-width:992px){.af-modal--lg{margin:1.875rem auto;max-width:50rem}}@keyframes appeardialog{0%{opacity:0;top:-100%}to{opacity:1;top:0}}@keyframes fademodal{0%{opacity:0}to{opacity:1}}