@cyrilld/zestds 0.1.0 → 1.0.0

package/dist/index.css

@@ -367,12 +367,82 @@
   --zds-color-featured-icon-fg-error: var(--zds-color-error-600);
   --zds-color-featured-icon-fg-warning: var(--zds-color-warning-600);
   --zds-color-featured-icon-fg-success: var(--zds-color-success-600);
-  --zds-color-toggle-border: var(--zds-color-gray-300);
-  --zds-color-toggle-slim-border-pressed: var(--zds-color-bg-brand-solid);
-  --zds-color-toggle-slim-border-pressed-hover: var(--zds-color-bg-brand-solid-hover);
-  --zds-color-tooltip-supporting-text: var(--zds-color-gray-300);
+  --zds-color-toggle-bg: var(--zds-color-navy-20);
+  --zds-color-toggle-bg-pressed: var(--zds-color-brand-500);
+  --zds-color-toggle-border: var(--zds-color-navy-70);
+  --zds-color-toggle-bg-hover: var(--zds-color-navy-30);
+  --zds-color-toggle-border-pressed-hover: var(--zds-color-brand-700);
+  --zds-shadow-toggle-knob: 0 4px 6px 0 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.06);
   --zds-color-slider-handle-bg: var(--zds-color-white);
   --zds-color-slider-handle-border: var(--zds-color-brand-600);
+  --zds-color-button-secondary-border: var(--zds-color-border-primary);
+  --zds-color-button-secondary-bg: var(--zds-color-navy-20);
+  --zds-color-button-secondary-bg-hover: var(--zds-color-navy-30);
+  --zds-color-button-secondary-white-bg-hover: var(--zds-color-navy-20);
+  --zds-color-button-tertiary-bg-hover: var(--zds-color-navy-20);
+  --zds-color-button-close-on-dark-bg-hover: rgb(255 255 255 / 0.2);
+  --zds-color-badge-brand-border: var(--zds-color-brand-200);
+  --zds-color-badge-error-border: var(--zds-color-error-200);
+  --zds-color-badge-warning-border: var(--zds-color-warning-200);
+  --zds-color-badge-success-border: var(--zds-color-success-200);
+  --zds-color-badge-navy-bg: var(--zds-color-navy-10);
+  --zds-color-badge-navy-piece: var(--zds-color-navy-80);
+  --zds-color-badge-gray-bg: var(--zds-color-utility-gray-50);
+  --zds-color-badge-gray-border: var(--zds-color-utility-gray-200);
+  --zds-color-badge-gray-piece: var(--zds-color-utility-gray-600);
+  --zds-color-badge-gray-text: var(--zds-color-utility-gray-700);
+  --zds-color-badge-horizon-bg: var(--zds-color-utility-horizon-50);
+  --zds-color-badge-horizon-border: var(--zds-color-utility-horizon-100);
+  --zds-color-badge-horizon-piece: var(--zds-color-utility-horizon-600);
+  --zds-color-badge-horizon-text: var(--zds-color-utility-horizon-700);
+  --zds-color-badge-turquoise-bg: var(--zds-color-utility-turquoise-50);
+  --zds-color-badge-turquoise-border: var(--zds-color-utility-turquoise-200);
+  --zds-color-badge-turquoise-piece: var(--zds-color-utility-turquoise-700);
+  --zds-color-badge-turquoise-text: var(--zds-color-utility-turquoise-800);
+  --zds-color-badge-violet-bg: var(--zds-color-utility-violet-50);
+  --zds-color-badge-violet-border: var(--zds-color-utility-violet-200);
+  --zds-color-badge-violet-piece: var(--zds-color-utility-violet-600);
+  --zds-color-badge-violet-text: var(--zds-color-utility-violet-700);
+  --zds-color-badge-fuschia-bg: var(--zds-color-utility-fuschia-50);
+  --zds-color-badge-fuschia-border: var(--zds-color-utility-fuschia-100);
+  --zds-color-badge-fuschia-piece: var(--zds-color-utility-fuschia-600);
+  --zds-color-badge-fuschia-text: var(--zds-color-utility-fuschia-700);
+  --zds-color-badge-rose-bg: var(--zds-color-utility-rose-50);
+  --zds-color-badge-rose-border: var(--zds-color-utility-rose-200);
+  --zds-color-badge-rose-piece: var(--zds-color-utility-rose-600);
+  --zds-color-badge-rose-text: var(--zds-color-utility-rose-700);
+  --zds-color-badge-lime-bg: var(--zds-color-utility-lime-50);
+  --zds-color-badge-lime-border: var(--zds-color-utility-lime-300);
+  --zds-color-badge-lime-piece: var(--zds-color-utility-lime-800);
+  --zds-color-badge-lime-text: var(--zds-color-utility-lime-900);
+  --zds-color-badge-yellow-bg: var(--zds-color-utility-yellow-50);
+  --zds-color-badge-yellow-border: var(--zds-color-utility-yellow-300);
+  --zds-color-badge-yellow-piece: var(--zds-color-utility-yellow-800);
+  --zds-color-badge-yellow-text: var(--zds-color-utility-yellow-900);
+  --zds-color-badge-navy-close-hover-bg: var(--zds-color-navy-30);
+  --zds-color-badge-gray-close-hover-bg: var(--zds-color-utility-gray-100);
+  --zds-color-badge-horizon-close-hover-bg: var(--zds-color-utility-horizon-100);
+  --zds-color-badge-turquoise-close-hover-bg: var(--zds-color-utility-turquoise-100);
+  --zds-color-badge-violet-close-hover-bg: var(--zds-color-utility-violet-100);
+  --zds-color-badge-fuschia-close-hover-bg: var(--zds-color-utility-fuschia-100);
+  --zds-color-badge-rose-close-hover-bg: var(--zds-color-utility-rose-100);
+  --zds-color-badge-lime-close-hover-bg: var(--zds-color-utility-lime-100);
+  --zds-color-badge-yellow-close-hover-bg: var(--zds-color-utility-yellow-100);
+  --zds-color-avatar-bg: var(--zds-color-navy-20);
+  --zds-color-avatar-mask: var(--zds-color-navy-100);
+  --zds-color-avatar-photo-ring: rgb(0 0 0 / 0.16);
+  --zds-color-avatar-inner-ring: var(--zds-color-white);
+  --zds-color-avatar-group-ring: var(--zds-color-white);
+  --zds-color-avatar-status-offline: var(--zds-color-navy-70);
+  --zds-color-avatar-status-sensitive-bg: var(--zds-color-error-500);
+  --zds-color-avatar-add-bg-hover: var(--zds-color-navy-20);
+  --zds-color-checkbox-border: var(--zds-color-navy-70);
+  --zds-color-checkbox-bg-checked: var(--zds-color-brand-500);
+  --zds-color-checkbox-bg-hover: var(--zds-color-navy-20);
+  --zds-color-checkbox-bg-disabled: var(--zds-color-navy-20);
+  --zds-color-tooltip-bg: var(--zds-color-navy-100);
+  --zds-color-tooltip-supporting-text: var(--zds-color-navy-20);
+  --zds-shadow-tooltip-filter: drop-shadow(0px 12px 8px rgb(0 0 0 / 0.08)) drop-shadow(0px 4px 3px rgb(0 0 0 / 0.03));
   --zds-font-family-body:
     "Averta",
     -apple-system,
@@ -478,8 +548,18 @@
     0px 3px 3px -1.5px rgba(0, 0, 0, 0.04);
   --zds-shadow-2xl: 0px 24px 48px -12px rgba(0, 0, 0, 0.18), 0px 4px 4px -2px rgba(0, 0, 0, 0.04);
   --zds-shadow-3xl: 0px 32px 64px -12px rgba(0, 0, 0, 0.14), 0px 5px 5px -2.5px rgba(0, 0, 0, 0.04);
-  --zds-shadow-skeuomorphic: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset, 0px -2px 0px 0px rgba(0, 0, 0, 0.05) inset;
+  --zds-color-shadow-skeuomorphic-outline: rgb(0 0 0 / 0.18);
+  --zds-color-shadow-skeuomorphic-bottom: rgb(0 0 0 / 0.05);
+  --zds-shadow-skeuomorphic: 0px 0px 0px 1px var(--zds-color-shadow-skeuomorphic-outline) inset, 0px -2px 0px 0px var(--zds-color-shadow-skeuomorphic-bottom) inset;
   --zds-shadow-xs-skeuomorphic: var(--zds-shadow-skeuomorphic), var(--zds-shadow-xs);
+  --zds-color-button-bevel-from: rgb(255 255 255 / 0.12);
+  --zds-color-button-bevel-to: rgb(255 255 255 / 0);
+  --zds-gradient-button-bevel:
+    linear-gradient(
+      
+      180deg,
+      var(--zds-color-button-bevel-from) 0%,
+      var(--zds-color-button-bevel-to) 100% );
   --zds-transition-fast: 0.15s ease;
 }
 
@@ -690,4 +770,1417 @@ body {
 ::after {
   text-underline-offset: 0.18em;
 }
+
+/* src/components/base/Spinner/Spinner.css */
+.zds-spinner {
+  display: inline-flex;
+  flex: none;
+  width: var(--zds-spinner-size, 20px);
+  height: var(--zds-spinner-size, 20px);
+  color: inherit;
+}
+.zds-spinner--sm {
+  --zds-spinner-size: 20px;
+}
+.zds-spinner--md {
+  --zds-spinner-size: 24px;
+}
+.zds-spinner__svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  animation: zds-spinner-rotation 0.7s linear infinite;
+}
+.zds-spinner__track {
+  opacity: 0.3;
+}
+.zds-spinner__label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+@keyframes zds-spinner-rotation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .zds-spinner__svg {
+    animation-duration: 2s;
+  }
+}
+
+/* src/components/base/Button/Button.css */
+.zds-button {
+  --zds-button-height: 40px;
+  --zds-button-padding-y: 10px;
+  --zds-button-padding-x: 14px;
+  --zds-button-gap: var(--zds-space-xs);
+  --zds-button-icon: 20px;
+  --zds-button-font: var(--zds-text-body-sm);
+  --zds-button-line: var(--zds-text-body-sm-line-height);
+  --zds-button-radius: var(--zds-radius-md);
+  --zds-button-ring: 0 0 0 0 transparent, 0 0 0 0 transparent;
+  --zds-button-relief: 0 0 0 0 transparent;
+  box-shadow: var(--zds-button-ring), var(--zds-button-relief);
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--zds-button-gap);
+  box-sizing: border-box;
+  min-height: var(--zds-button-height);
+  padding: var(--zds-button-padding-y) var(--zds-button-padding-x);
+  border: 0;
+  border-radius: var(--zds-button-radius);
+  background: transparent;
+  font-family: inherit;
+  font-size: var(--zds-button-font);
+  line-height: var(--zds-button-line);
+  font-weight: var(--zds-font-weight-semibold);
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    background-color var(--zds-transition-fast),
+    color var(--zds-transition-fast),
+    box-shadow var(--zds-transition-fast);
+}
+.zds-button--primary::before,
+.zds-button--primary-destructive::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  padding: 2px;
+  border-radius: inherit;
+  background: var(--zds-gradient-button-bevel);
+  pointer-events: none;
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
+.zds-button__label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding-inline: var(--zds-space-xxs);
+}
+.zds-button__icon {
+  display: inline-flex;
+  flex: none;
+  width: var(--zds-button-icon);
+  height: var(--zds-button-icon);
+}
+.zds-button--loading .zds-button__icon {
+  width: 20px;
+  height: 20px;
+}
+.zds-button__icon > svg,
+.zds-button__icon > img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.zds-button:focus-visible,
+.zds-button[data-zds-demo=focus] {
+  outline: none;
+  --zds-button-ring: 0 0 0 2px var(--zds-color-bg-primary), 0 0 0 4px var(--zds-color-focus-ring);
+}
+.zds-button:disabled,
+.zds-button[aria-disabled=true] {
+  opacity: 0.5;
+  cursor: default;
+}
+.zds-button--loading[aria-disabled=true]:not(:disabled) {
+  opacity: 1;
+}
+.zds-button--xs {
+  --zds-button-height: 32px;
+  --zds-button-padding-y: var(--zds-space-sm);
+  --zds-button-padding-x: 10px;
+  --zds-button-icon: 16px;
+}
+.zds-button--sm {
+  --zds-button-height: 36px;
+  --zds-button-padding-y: var(--zds-space-md);
+  --zds-button-padding-x: var(--zds-space-lg);
+}
+.zds-button--md {
+  --zds-button-height: 40px;
+  --zds-button-padding-y: 10px;
+  --zds-button-padding-x: 14px;
+}
+.zds-button--lg {
+  --zds-button-height: 44px;
+  --zds-button-padding-y: 10px;
+  --zds-button-padding-x: var(--zds-space-xl);
+  --zds-button-gap: var(--zds-space-sm);
+  --zds-button-font: var(--zds-text-body-md);
+  --zds-button-line: var(--zds-text-body-md-line-height);
+}
+.zds-button--xl {
+  --zds-button-height: 48px;
+  --zds-button-padding-y: var(--zds-space-lg);
+  --zds-button-padding-x: 18px;
+  --zds-button-gap: var(--zds-space-sm);
+  --zds-button-font: var(--zds-text-body-md);
+  --zds-button-line: var(--zds-text-body-md-line-height);
+}
+.zds-button--icon-only {
+  width: var(--zds-button-height);
+  min-width: var(--zds-button-height);
+  padding: 0;
+}
+.zds-button--primary {
+  background: var(--zds-color-bg-brand-solid);
+  color: var(--zds-color-text-primary-on-brand);
+  --zds-button-relief: var(--zds-shadow-xs-skeuomorphic);
+}
+.zds-button--primary:hover:not(:disabled):not([aria-disabled=true]) {
+  background: var(--zds-color-bg-brand-solid-hover);
+}
+.zds-button--secondary-gray {
+  background: var(--zds-color-button-secondary-bg);
+  color: var(--zds-color-text-primary);
+  --zds-button-relief:
+    var(--zds-shadow-skeuomorphic),
+    inset 0 0 0 1px var(--zds-color-button-secondary-border),
+    var(--zds-shadow-xs);
+}
+.zds-button--secondary-gray:hover:not(:disabled):not([aria-disabled=true]) {
+  background: var(--zds-color-button-secondary-bg-hover);
+}
+.zds-button--secondary-white {
+  background: var(--zds-color-bg-primary);
+  color: var(--zds-color-text-primary);
+  --zds-button-relief:
+    var(--zds-shadow-skeuomorphic),
+    inset 0 0 0 1px var(--zds-color-button-secondary-border),
+    var(--zds-shadow-xs);
+}
+.zds-button--secondary-white:hover:not(:disabled):not([aria-disabled=true]) {
+  background: var(--zds-color-button-secondary-white-bg-hover);
+}
+.zds-button--tertiary-color {
+  color: var(--zds-color-fg-brand-primary);
+}
+.zds-button--tertiary-color:hover:not(:disabled):not([aria-disabled=true]) {
+  background: var(--zds-color-bg-brand-primary);
+  color: var(--zds-color-text-brand-secondary);
+}
+.zds-button--tertiary-gray {
+  color: var(--zds-color-text-primary);
+}
+.zds-button--tertiary-gray:hover:not(:disabled):not([aria-disabled=true]) {
+  background: var(--zds-color-button-tertiary-bg-hover);
+}
+.zds-button--link-color,
+.zds-button--link-gray,
+.zds-button--link-destructive {
+  --zds-button-radius: var(--zds-radius-xs);
+  min-height: 0;
+  padding: 0;
+}
+.zds-button--link-color .zds-button__label,
+.zds-button--link-gray .zds-button__label,
+.zds-button--link-destructive .zds-button__label {
+  padding-inline: 0;
+}
+.zds-button--link-color {
+  color: var(--zds-color-fg-brand-primary);
+}
+.zds-button--link-color:hover:not(:disabled):not([aria-disabled=true]) {
+  color: var(--zds-color-text-brand-secondary);
+  text-decoration: underline;
+  text-decoration-color: var(--zds-color-fg-brand-secondary);
+}
+.zds-button--link-gray {
+  color: var(--zds-color-text-primary);
+}
+.zds-button--link-gray:hover:not(:disabled):not([aria-disabled=true]) {
+  text-decoration: underline;
+  text-decoration-color: currentColor;
+}
+.zds-button--primary-destructive {
+  background: var(--zds-color-bg-error-solid);
+  color: var(--zds-color-text-primary-on-brand);
+  --zds-button-relief: var(--zds-shadow-xs-skeuomorphic);
+}
+.zds-button--primary-destructive:hover:not(:disabled):not([aria-disabled=true]) {
+  background: var(--zds-color-bg-error-solid-hover);
+}
+.zds-button--secondary-destructive {
+  background: var(--zds-color-bg-primary);
+  color: var(--zds-color-fg-error-primary);
+  --zds-button-relief:
+    var(--zds-shadow-skeuomorphic),
+    inset 0 0 0 1px var(--zds-color-border-error-subtle),
+    var(--zds-shadow-xs);
+}
+.zds-button--secondary-destructive:hover:not(:disabled):not([aria-disabled=true]) {
+  background: var(--zds-color-bg-error-primary);
+  color: var(--zds-color-text-error-primary);
+}
+.zds-button--tertiary-destructive {
+  color: var(--zds-color-fg-error-primary);
+}
+.zds-button--tertiary-destructive:hover:not(:disabled):not([aria-disabled=true]) {
+  background: var(--zds-color-bg-error-primary);
+  color: var(--zds-color-text-error-primary);
+}
+.zds-button--link-destructive {
+  color: var(--zds-color-fg-error-primary);
+}
+.zds-button--link-destructive:hover:not(:disabled):not([aria-disabled=true]) {
+  color: var(--zds-color-text-error-primary);
+  text-decoration: underline;
+  text-decoration-color: var(--zds-color-fg-error-secondary);
+}
+.zds-button--primary.zds-button--loading {
+  background: var(--zds-color-bg-brand-solid-hover);
+}
+.zds-button--primary-destructive.zds-button--loading {
+  background: var(--zds-color-bg-error-solid-hover);
+}
+.zds-button--primary-destructive:focus-visible,
+.zds-button--secondary-destructive:focus-visible,
+.zds-button--tertiary-destructive:focus-visible,
+.zds-button--link-destructive:focus-visible,
+.zds-button--primary-destructive[data-zds-demo=focus],
+.zds-button--secondary-destructive[data-zds-demo=focus],
+.zds-button--tertiary-destructive[data-zds-demo=focus],
+.zds-button--link-destructive[data-zds-demo=focus] {
+  --zds-button-ring: 0 0 0 2px var(--zds-color-bg-primary), 0 0 0 4px var(--zds-color-focus-ring-error);
+}
+
+/* src/components/base/CloseButton/CloseButton.css */
+.zds-close-button {
+  --zds-close-button-size: 40px;
+  --zds-close-button-icon: 20px;
+  --zds-close-button-ring: 0 0 0 0 transparent, 0 0 0 0 transparent;
+  box-shadow: var(--zds-close-button-ring);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--zds-close-button-size);
+  height: var(--zds-close-button-size);
+  padding: 0;
+  border: 0;
+  border-radius: var(--zds-radius-md);
+  background: transparent;
+  color: var(--zds-color-text-secondary);
+  cursor: pointer;
+  transition: background-color var(--zds-transition-fast), box-shadow var(--zds-transition-fast);
+}
+.zds-close-button__icon {
+  display: inline-flex;
+  flex: none;
+  width: var(--zds-close-button-icon);
+  height: var(--zds-close-button-icon);
+}
+.zds-close-button__icon > svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.zds-close-button:hover {
+  background: var(--zds-color-button-tertiary-bg-hover);
+}
+.zds-close-button:focus-visible {
+  outline: none;
+  --zds-close-button-ring: 0 0 0 2px var(--zds-color-bg-primary), 0 0 0 4px var(--zds-color-focus-ring);
+}
+.zds-close-button--sm {
+  --zds-close-button-size: 36px;
+  --zds-close-button-icon: 20px;
+}
+.zds-close-button--md {
+  --zds-close-button-size: 40px;
+  --zds-close-button-icon: 20px;
+}
+.zds-close-button--lg {
+  --zds-close-button-size: 44px;
+  --zds-close-button-icon: 24px;
+}
+.zds-close-button--on-dark {
+  color: var(--zds-color-text-white);
+}
+.zds-close-button--on-dark:hover {
+  background: var(--zds-color-button-close-on-dark-bg-hover);
+}
+
+/* src/components/base/UtilityButton/UtilityButton.css */
+.zds-utility-button {
+  --zds-utility-button-size: 32px;
+  --zds-utility-button-icon: 20px;
+  --zds-utility-button-ring: 0 0 0 0 transparent, 0 0 0 0 transparent;
+  --zds-utility-button-relief: 0 0 0 0 transparent;
+  box-shadow: var(--zds-utility-button-ring), var(--zds-utility-button-relief);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--zds-utility-button-size);
+  height: var(--zds-utility-button-size);
+  padding: 0;
+  border: 0;
+  border-radius: var(--zds-radius-sm);
+  background: transparent;
+  color: var(--zds-color-text-primary);
+  cursor: pointer;
+  transition: background-color var(--zds-transition-fast), box-shadow var(--zds-transition-fast);
+}
+.zds-utility-button__icon {
+  display: inline-flex;
+  flex: none;
+  width: var(--zds-utility-button-icon);
+  height: var(--zds-utility-button-icon);
+}
+.zds-utility-button__icon > svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.zds-utility-button:focus-visible {
+  outline: none;
+  --zds-utility-button-ring: 0 0 0 2px var(--zds-color-bg-primary), 0 0 0 4px var(--zds-color-focus-ring);
+}
+.zds-utility-button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.zds-utility-button--xs {
+  --zds-utility-button-size: 28px;
+  --zds-utility-button-icon: 16px;
+}
+.zds-utility-button--sm {
+  --zds-utility-button-size: 32px;
+  --zds-utility-button-icon: 20px;
+}
+.zds-utility-button--secondary {
+  background: var(--zds-color-bg-primary);
+  --zds-utility-button-relief:
+    var(--zds-shadow-skeuomorphic),
+    inset 0 0 0 1px var(--zds-color-button-secondary-border),
+    var(--zds-shadow-xs);
+}
+.zds-utility-button--secondary:hover:not(:disabled) {
+  background: var(--zds-color-button-secondary-white-bg-hover);
+}
+.zds-utility-button--tertiary:hover:not(:disabled) {
+  background: var(--zds-color-button-tertiary-bg-hover);
+}
+
+/* src/components/base/Badge/Badge.css */
+.zds-badge {
+  --zds-badge-height: 24px;
+  --zds-badge-font: var(--zds-text-body-sm);
+  --zds-badge-line: var(--zds-text-body-sm-line-height);
+  --zds-badge-pad-label: 8px;
+  --zds-badge-pad-dot: 8px;
+  --zds-badge-pad-icon: 6px;
+  --zds-badge-pad-close: 4px;
+  --zds-badge-gap-dot: var(--zds-space-sm);
+  --zds-badge-gap-icon: var(--zds-space-xs);
+  --zds-badge-gap-close: var(--zds-space-xxs);
+  --zds-badge-radius: var(--zds-radius-sm);
+  --zds-badge-bg: transparent;
+  --zds-badge-border: transparent;
+  --zds-badge-text: inherit;
+  --zds-badge-piece: currentColor;
+  --zds-badge-close-hover-bg: transparent;
+  --zds-badge-close-hover-fg: currentColor;
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: var(--zds-badge-height);
+  padding-block: 0;
+  padding-inline: var(--zds-badge-pad-label);
+  border: 1px solid var(--zds-badge-border);
+  border-radius: var(--zds-badge-radius);
+  background: var(--zds-badge-bg);
+  color: var(--zds-badge-text);
+  font-family: var(--zds-font-family-body);
+  font-size: var(--zds-badge-font);
+  font-weight: var(--zds-font-weight-semibold);
+  line-height: var(--zds-badge-line);
+  white-space: nowrap;
+  vertical-align: middle;
+}
+.zds-badge--sm {
+  --zds-badge-height: 22px;
+  --zds-badge-font: var(--zds-text-caption-md);
+  --zds-badge-line: var(--zds-text-caption-md-line-height);
+  --zds-badge-gap-dot: var(--zds-space-xs);
+  --zds-badge-gap-icon: var(--zds-space-xxs);
+  --zds-badge-pad-close: 3px;
+}
+.zds-badge--md {
+  --zds-badge-height: 24px;
+  --zds-badge-pad-close: var(--zds-space-xs);
+}
+.zds-badge--lg {
+  --zds-badge-height: 28px;
+  --zds-badge-pad-close: var(--zds-space-sm);
+}
+.zds-badge--pill {
+  --zds-badge-radius: var(--zds-radius-full);
+  --zds-badge-pad-label: var(--zds-space-md);
+  --zds-badge-pad-dot: var(--zds-space-sm);
+  --zds-badge-pad-icon: var(--zds-space-sm);
+}
+.zds-badge--pill.zds-badge--md {
+  --zds-badge-pad-label: 10px;
+  --zds-badge-pad-dot: var(--zds-space-md);
+  --zds-badge-pad-icon: var(--zds-space-md);
+}
+.zds-badge--pill.zds-badge--lg {
+  --zds-badge-pad-label: var(--zds-space-lg);
+  --zds-badge-pad-dot: 10px;
+  --zds-badge-pad-icon: 10px;
+}
+.zds-badge--badge,
+.zds-badge--modern {
+  --zds-badge-radius: var(--zds-radius-sm);
+  --zds-badge-pad-label: var(--zds-space-sm);
+  --zds-badge-pad-dot: var(--zds-space-sm);
+  --zds-badge-pad-icon: var(--zds-space-sm);
+}
+.zds-badge--badge.zds-badge--md,
+.zds-badge--modern.zds-badge--md {
+  --zds-badge-pad-label: var(--zds-space-md);
+  --zds-badge-pad-dot: var(--zds-space-md);
+  --zds-badge-pad-icon: var(--zds-space-sm);
+}
+.zds-badge--badge.zds-badge--lg,
+.zds-badge--modern.zds-badge--lg {
+  --zds-badge-radius: var(--zds-radius-md);
+  --zds-badge-pad-label: 10px;
+  --zds-badge-pad-dot: 10px;
+  --zds-badge-pad-icon: var(--zds-space-md);
+}
+.zds-badge--lead-dot {
+  padding-inline-start: var(--zds-badge-pad-dot);
+}
+.zds-badge--lead-icon {
+  padding-inline-start: var(--zds-badge-pad-icon);
+}
+.zds-badge--trail-icon {
+  padding-inline-end: var(--zds-badge-pad-icon);
+}
+.zds-badge--trail-close {
+  padding-inline-end: var(--zds-badge-pad-close);
+}
+.zds-badge--badge.zds-badge--sm.zds-badge--lead-icon,
+.zds-badge--modern.zds-badge--sm.zds-badge--lead-icon {
+  padding-inline-end: var(--zds-space-md);
+}
+.zds-badge--badge.zds-badge--sm.zds-badge--trail-icon,
+.zds-badge--modern.zds-badge--sm.zds-badge--trail-icon {
+  padding-inline-start: var(--zds-space-md);
+}
+.zds-badge__dot {
+  flex: none;
+  box-sizing: border-box;
+  width: 8px;
+  height: 8px;
+  margin-inline-end: var(--zds-badge-gap-dot);
+  border-radius: var(--zds-radius-full);
+  border: 1px solid transparent;
+  background: var(--zds-badge-piece);
+  background-clip: content-box;
+}
+.zds-badge__icon {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+  color: var(--zds-badge-piece);
+}
+.zds-badge__icon--leading {
+  margin-inline-end: var(--zds-badge-gap-icon);
+}
+.zds-badge__icon--trailing {
+  margin-inline-start: var(--zds-badge-gap-icon);
+}
+.zds-badge__icon > svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.zds-badge__close {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 16px;
+  height: 16px;
+  margin-inline-start: var(--zds-badge-gap-close);
+  padding: var(--zds-space-xxs);
+  border: 0;
+  border-radius: 3px;
+  background: transparent;
+  color: var(--zds-badge-piece);
+  cursor: pointer;
+  transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
+}
+.zds-badge--pill .zds-badge__close {
+  border-radius: var(--zds-radius-full);
+}
+.zds-badge__close > svg {
+  display: block;
+  width: 12px;
+  height: 12px;
+}
+.zds-badge__close:hover {
+  background: var(--zds-badge-close-hover-bg);
+  color: var(--zds-badge-close-hover-fg);
+}
+.zds-badge__close:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--zds-color-bg-primary), 0 0 0 4px var(--zds-color-focus-ring);
+}
+@media (prefers-reduced-motion: reduce) {
+  .zds-badge__close {
+    transition: none;
+  }
+}
+.zds-badge--brand {
+  --zds-badge-bg: var(--zds-color-bg-brand-primary);
+  --zds-badge-border: var(--zds-color-badge-brand-border);
+  --zds-badge-piece: var(--zds-color-fg-brand-primary);
+  --zds-badge-text: var(--zds-color-text-brand-secondary);
+  --zds-badge-close-hover-bg: var(--zds-color-bg-brand-secondary);
+  --zds-badge-close-hover-fg: var(--zds-color-text-brand-secondary);
+}
+.zds-badge--error {
+  --zds-badge-bg: var(--zds-color-bg-error-primary);
+  --zds-badge-border: var(--zds-color-badge-error-border);
+  --zds-badge-piece: var(--zds-color-fg-error-primary);
+  --zds-badge-text: var(--zds-color-text-error-primary);
+  --zds-badge-close-hover-bg: var(--zds-color-bg-error-secondary);
+  --zds-badge-close-hover-fg: var(--zds-color-text-error-primary);
+}
+.zds-badge--warning {
+  --zds-badge-bg: var(--zds-color-bg-warning-primary);
+  --zds-badge-border: var(--zds-color-badge-warning-border);
+  --zds-badge-piece: var(--zds-color-fg-warning-primary);
+  --zds-badge-text: var(--zds-color-text-warning-primary);
+  --zds-badge-close-hover-bg: var(--zds-color-bg-warning-secondary);
+  --zds-badge-close-hover-fg: var(--zds-color-text-warning-primary);
+}
+.zds-badge--success {
+  --zds-badge-bg: var(--zds-color-bg-success-primary);
+  --zds-badge-border: var(--zds-color-badge-success-border);
+  --zds-badge-piece: var(--zds-color-fg-success-primary);
+  --zds-badge-text: var(--zds-color-text-success-primary);
+  --zds-badge-close-hover-bg: var(--zds-color-bg-success-secondary);
+  --zds-badge-close-hover-fg: var(--zds-color-text-success-primary);
+}
+.zds-badge--navy {
+  --zds-badge-bg: var(--zds-color-badge-navy-bg);
+  --zds-badge-border: var(--zds-color-border-primary);
+  --zds-badge-piece: var(--zds-color-badge-navy-piece);
+  --zds-badge-text: var(--zds-color-text-primary);
+  --zds-badge-close-hover-bg: var(--zds-color-badge-navy-close-hover-bg);
+  --zds-badge-close-hover-fg: var(--zds-color-text-primary);
+}
+.zds-badge--gray {
+  --zds-badge-bg: var(--zds-color-badge-gray-bg);
+  --zds-badge-border: var(--zds-color-badge-gray-border);
+  --zds-badge-piece: var(--zds-color-badge-gray-piece);
+  --zds-badge-text: var(--zds-color-badge-gray-text);
+  --zds-badge-close-hover-bg: var(--zds-color-badge-gray-close-hover-bg);
+  --zds-badge-close-hover-fg: var(--zds-color-badge-gray-text);
+}
+.zds-badge--horizon {
+  --zds-badge-bg: var(--zds-color-badge-horizon-bg);
+  --zds-badge-border: var(--zds-color-badge-horizon-border);
+  --zds-badge-piece: var(--zds-color-badge-horizon-piece);
+  --zds-badge-text: var(--zds-color-badge-horizon-text);
+  --zds-badge-close-hover-bg: var(--zds-color-badge-horizon-close-hover-bg);
+  --zds-badge-close-hover-fg: var(--zds-color-badge-horizon-text);
+}
+.zds-badge--turquoise {
+  --zds-badge-bg: var(--zds-color-badge-turquoise-bg);
+  --zds-badge-border: var(--zds-color-badge-turquoise-border);
+  --zds-badge-piece: var(--zds-color-badge-turquoise-piece);
+  --zds-badge-text: var(--zds-color-badge-turquoise-text);
+  --zds-badge-close-hover-bg: var(--zds-color-badge-turquoise-close-hover-bg);
+  --zds-badge-close-hover-fg: var(--zds-color-badge-turquoise-text);
+}
+.zds-badge--violet {
+  --zds-badge-bg: var(--zds-color-badge-violet-bg);
+  --zds-badge-border: var(--zds-color-badge-violet-border);
+  --zds-badge-piece: var(--zds-color-badge-violet-piece);
+  --zds-badge-text: var(--zds-color-badge-violet-text);
+  --zds-badge-close-hover-bg: var(--zds-color-badge-violet-close-hover-bg);
+  --zds-badge-close-hover-fg: var(--zds-color-badge-violet-text);
+}
+.zds-badge--fuschia {
+  --zds-badge-bg: var(--zds-color-badge-fuschia-bg);
+  --zds-badge-border: var(--zds-color-badge-fuschia-border);
+  --zds-badge-piece: var(--zds-color-badge-fuschia-piece);
+  --zds-badge-text: var(--zds-color-badge-fuschia-text);
+  --zds-badge-close-hover-bg: var(--zds-color-badge-fuschia-close-hover-bg);
+  --zds-badge-close-hover-fg: var(--zds-color-badge-fuschia-text);
+}
+.zds-badge--rose {
+  --zds-badge-bg: var(--zds-color-badge-rose-bg);
+  --zds-badge-border: var(--zds-color-badge-rose-border);
+  --zds-badge-piece: var(--zds-color-badge-rose-piece);
+  --zds-badge-text: var(--zds-color-badge-rose-text);
+  --zds-badge-close-hover-bg: var(--zds-color-badge-rose-close-hover-bg);
+  --zds-badge-close-hover-fg: var(--zds-color-badge-rose-text);
+}
+.zds-badge--lime {
+  --zds-badge-bg: var(--zds-color-badge-lime-bg);
+  --zds-badge-border: var(--zds-color-badge-lime-border);
+  --zds-badge-piece: var(--zds-color-badge-lime-piece);
+  --zds-badge-text: var(--zds-color-badge-lime-text);
+  --zds-badge-close-hover-bg: var(--zds-color-badge-lime-close-hover-bg);
+  --zds-badge-close-hover-fg: var(--zds-color-badge-lime-text);
+}
+.zds-badge--yellow {
+  --zds-badge-bg: var(--zds-color-badge-yellow-bg);
+  --zds-badge-border: var(--zds-color-badge-yellow-border);
+  --zds-badge-piece: var(--zds-color-badge-yellow-piece);
+  --zds-badge-text: var(--zds-color-badge-yellow-text);
+  --zds-badge-close-hover-bg: var(--zds-color-badge-yellow-close-hover-bg);
+  --zds-badge-close-hover-fg: var(--zds-color-badge-yellow-text);
+}
+.zds-badge--modern {
+  --zds-badge-bg: var(--zds-color-bg-primary);
+  --zds-badge-border: var(--zds-color-border-primary);
+  --zds-badge-text: var(--zds-color-text-tertiary);
+  box-shadow: var(--zds-shadow-xs);
+}
+
+/* src/components/base/Tooltip/Tooltip.css */
+.zds-tooltip-ancre {
+  position: relative;
+  display: inline-flex;
+}
+.zds-tooltip {
+  --zds-tooltip-ecart: 4px;
+  --zds-tooltip-debord: 6px;
+  --zds-tooltip-marge: calc(var(--zds-tooltip-ecart) + var(--zds-tooltip-debord));
+  --zds-tooltip-retrait: 12px;
+  --zds-tooltip-centre-fleche: calc(var(--zds-tooltip-retrait) + 8px);
+  position: absolute;
+  z-index: 60;
+  width: max-content;
+  filter: var(--zds-shadow-tooltip-filter);
+  pointer-events: none;
+  user-select: none;
+}
+.zds-tooltip__contenu {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  box-sizing: border-box;
+  border-radius: var(--zds-radius-md);
+  background: var(--zds-color-tooltip-bg);
+  padding: var(--zds-space-md) var(--zds-space-lg);
+}
+.zds-tooltip__titre {
+  font-family: var(--zds-font-family-body);
+  font-size: var(--zds-text-caption-md);
+  font-weight: var(--zds-font-weight-semibold);
+  line-height: var(--zds-text-caption-md-line-height);
+  color: var(--zds-color-text-white);
+}
+.zds-tooltip__soutien {
+  font-family: var(--zds-font-family-body);
+  font-size: var(--zds-text-caption-md);
+  font-weight: var(--zds-font-weight-normal);
+  line-height: var(--zds-text-caption-md-line-height);
+  color: var(--zds-color-tooltip-supporting-text);
+}
+.zds-tooltip:not([data-zds-avec-soutien]) .zds-tooltip__titre {
+  text-align: center;
+  white-space: nowrap;
+}
+.zds-tooltip[data-zds-avec-soutien] .zds-tooltip__contenu {
+  width: 320px;
+  padding: var(--zds-space-lg);
+  gap: var(--zds-space-xs);
+}
+.zds-tooltip--top {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: var(--zds-tooltip-marge);
+}
+.zds-tooltip--top-right {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(calc(var(--zds-tooltip-centre-fleche) * -1));
+  margin-bottom: var(--zds-tooltip-marge);
+}
+.zds-tooltip--top-left {
+  bottom: 100%;
+  right: 50%;
+  transform: translateX(var(--zds-tooltip-centre-fleche));
+  margin-bottom: var(--zds-tooltip-marge);
+}
+.zds-tooltip--bottom {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: var(--zds-tooltip-marge);
+}
+.zds-tooltip--left {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-right: var(--zds-tooltip-marge);
+}
+.zds-tooltip--right {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: var(--zds-tooltip-marge);
+}
+.zds-tooltip__fleche {
+  --zds-tooltip-recouvrement: 2.5147px;
+  --zds-tooltip-recouvrement-tourne: 6.2574px;
+  position: absolute;
+  display: block;
+  line-height: 0;
+  color: var(--zds-color-tooltip-bg);
+}
+.zds-tooltip--top .zds-tooltip__fleche,
+.zds-tooltip--top-right .zds-tooltip__fleche,
+.zds-tooltip--top-left .zds-tooltip__fleche {
+  top: 100%;
+}
+.zds-tooltip--top .zds-tooltip__fleche {
+  left: 50%;
+  transform: translateX(-50%) translateY(calc(var(--zds-tooltip-recouvrement) * -1));
+}
+.zds-tooltip--top-right .zds-tooltip__fleche {
+  left: var(--zds-tooltip-retrait);
+  transform: translateY(calc(var(--zds-tooltip-recouvrement) * -1));
+}
+.zds-tooltip--top-left .zds-tooltip__fleche {
+  right: var(--zds-tooltip-retrait);
+  transform: translateY(calc(var(--zds-tooltip-recouvrement) * -1));
+}
+.zds-tooltip--bottom .zds-tooltip__fleche {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(var(--zds-tooltip-recouvrement)) rotate(180deg);
+}
+.zds-tooltip--left .zds-tooltip__fleche {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%) translateX(calc(var(--zds-tooltip-recouvrement-tourne) * -1)) rotate(-90deg);
+}
+.zds-tooltip--right .zds-tooltip__fleche {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%) translateX(var(--zds-tooltip-recouvrement-tourne)) rotate(90deg);
+}
+.zds-tooltip-aide {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: none;
+  border-radius: var(--zds-radius-full);
+  background: none;
+  color: var(--zds-color-text-tertiary);
+  cursor: pointer;
+}
+.zds-tooltip-aide > svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.zds-tooltip-aide:hover,
+.zds-tooltip-aide:focus-visible {
+  color: var(--zds-color-text-tertiary-hover);
+}
+.zds-tooltip-aide:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--zds-color-bg-primary), 0 0 0 4px var(--zds-color-focus-ring);
+}
+
+/* src/components/base/Avatar/Avatar.css */
+.zds-avatar {
+  --zds-avatar-size: 40px;
+  --zds-avatar-font: var(--zds-text-body-md);
+  --zds-avatar-line: var(--zds-text-body-md-line-height);
+  --zds-avatar-status: 14px;
+  --zds-avatar-inner: 1.5px;
+  --zds-avatar-ring: 1px;
+  --zds-avatar-border-line: 0.75px;
+  --zds-avatar-border-pad: 1px;
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  width: var(--zds-avatar-size);
+  height: var(--zds-avatar-size);
+  border-radius: var(--zds-radius-full);
+  isolation: isolate;
+  flex: none;
+}
+.zds-avatar__media {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: inherit;
+}
+.zds-avatar--xs {
+  --zds-avatar-border-line: 0.5px;
+  --zds-avatar-border-pad: 1px;
+  --zds-avatar-size: 24px;
+  --zds-avatar-status: 10px;
+  --zds-avatar-font: var(--zds-text-caption-md);
+  --zds-avatar-line: var(--zds-text-caption-md-line-height);
+  --zds-avatar-inner: 0.5px;
+  --zds-avatar-ring: 0.5px;
+}
+.zds-avatar--sm {
+  --zds-avatar-border-line: 0.5px;
+  --zds-avatar-border-pad: 1px;
+  --zds-avatar-size: 32px;
+  --zds-avatar-status: 12px;
+  --zds-avatar-font: var(--zds-text-body-sm);
+  --zds-avatar-line: var(--zds-text-body-sm-line-height);
+}
+.zds-avatar--md {
+  --zds-avatar-border-line: 0.75px;
+  --zds-avatar-border-pad: 1px;
+  --zds-avatar-size: 40px;
+  --zds-avatar-status: 14px;
+  --zds-avatar-font: var(--zds-text-body-md);
+  --zds-avatar-line: var(--zds-text-body-md-line-height);
+}
+.zds-avatar--lg {
+  --zds-avatar-border-line: 0.75px;
+  --zds-avatar-border-pad: 1.5px;
+  --zds-avatar-size: 48px;
+  --zds-avatar-status: 16px;
+  --zds-avatar-font: var(--zds-text-heading-sm);
+  --zds-avatar-line: var(--zds-text-heading-sm-line-height);
+}
+.zds-avatar--xl {
+  --zds-avatar-border-line: 1px;
+  --zds-avatar-border-pad: 2px;
+  --zds-avatar-size: 56px;
+  --zds-avatar-status: 18px;
+  --zds-avatar-font: var(--zds-text-heading-md);
+  --zds-avatar-line: var(--zds-text-heading-md-line-height);
+}
+.zds-avatar--2xl {
+  --zds-avatar-border-line: 1px;
+  --zds-avatar-border-pad: 2px;
+  --zds-avatar-size: 64px;
+  --zds-avatar-status: 20px;
+  --zds-avatar-font: var(--zds-text-heading-lg);
+  --zds-avatar-line: var(--zds-text-heading-lg-line-height);
+}
+.zds-avatar--photo .zds-avatar__media {
+  box-shadow: inset 0 0 0 0.5px var(--zds-color-avatar-photo-ring), inset 0 0 0 var(--zds-avatar-inner) var(--zds-color-avatar-inner-ring);
+}
+.zds-avatar__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+}
+.zds-avatar--placeholder .zds-avatar__media {
+  background: var(--zds-color-avatar-bg);
+  box-shadow: inset 0 0 0 var(--zds-avatar-ring) var(--zds-color-border-primary);
+}
+.zds-avatar__initials {
+  font-family: var(--zds-font-family-body);
+  font-size: var(--zds-avatar-font);
+  font-weight: var(--zds-font-weight-semibold);
+  line-height: var(--zds-avatar-line);
+  color: var(--zds-color-text-tertiary);
+  white-space: nowrap;
+  user-select: none;
+}
+.zds-avatar__icon {
+  width: 60%;
+  height: 60%;
+  color: var(--zds-color-text-tertiary);
+}
+.zds-avatar__icon > svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.zds-avatar__mask {
+  width: 100%;
+  height: 47.5%;
+  color: var(--zds-color-avatar-mask);
+}
+.zds-avatar__mask > svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.zds-avatar--border {
+  padding: var(--zds-avatar-border-pad);
+  background: var(--zds-color-bg-primary);
+  box-shadow: inset 0 0 0 var(--zds-avatar-border-line) var(--zds-color-border-primary), var(--zds-shadow-xs);
+}
+.zds-avatar__status {
+  position: absolute;
+  box-sizing: border-box;
+  border: 1.5px solid var(--zds-color-avatar-inner-ring);
+  border-radius: var(--zds-radius-full);
+}
+.zds-avatar__status--online,
+.zds-avatar__status--offline {
+  width: calc(var(--zds-avatar-status) * 0.75);
+  height: calc(var(--zds-avatar-status) * 0.75);
+  right: calc(var(--zds-avatar-status) * 0.125 - 2px);
+  bottom: calc(var(--zds-avatar-status) * 0.125 - 2px);
+}
+.zds-avatar__status--online {
+  background-color: var(--zds-color-fg-success-primary);
+}
+.zds-avatar__status--offline {
+  background-color: var(--zds-color-avatar-status-offline);
+}
+.zds-avatar__status--sensitive-comment {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--zds-avatar-status);
+  height: var(--zds-avatar-status);
+  right: -2px;
+  bottom: -2px;
+  background-color: var(--zds-color-avatar-status-sensitive-bg);
+  color: var(--zds-color-text-white);
+}
+.zds-avatar__status--sensitive-comment > svg {
+  display: block;
+  width: 62.5%;
+  height: 62.5%;
+}
+@media (prefers-reduced-motion: reduce) {
+  .zds-avatar-add {
+    transition: none;
+  }
+}
+.zds-avatar-group {
+  --zds-avatar-group-overlap: -12px;
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--zds-space-md);
+}
+.zds-avatar-group--xs {
+  --zds-avatar-group-overlap: -4px;
+}
+.zds-avatar-group--sm {
+  --zds-avatar-group-overlap: -8px;
+}
+.zds-avatar-group--md {
+  --zds-avatar-group-overlap: -12px;
+}
+.zds-avatar-group__avatars {
+  display: inline-flex;
+  align-items: flex-start;
+}
+.zds-avatar-group__slot {
+  display: inline-flex;
+  border-radius: var(--zds-radius-full);
+}
+.zds-avatar-group__avatars > * {
+  box-shadow: 0 0 0 1.5px var(--zds-color-avatar-group-ring);
+}
+.zds-avatar-group__avatars > * + * {
+  margin-inline-start: var(--zds-avatar-group-overlap);
+}
+.zds-avatar-add {
+  --zds-avatar-add-size: 40px;
+  --zds-avatar-add-icon: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--zds-avatar-add-size);
+  height: var(--zds-avatar-add-size);
+  padding: var(--zds-space-xs);
+  border: 1px dashed var(--zds-color-border-primary);
+  border-radius: var(--zds-radius-full);
+  background: var(--zds-color-bg-primary);
+  color: var(--zds-color-text-tertiary);
+  cursor: pointer;
+  transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
+}
+.zds-avatar-add--xs {
+  --zds-avatar-add-size: 24px;
+  --zds-avatar-add-icon: 16px;
+}
+.zds-avatar-add--sm {
+  --zds-avatar-add-size: 32px;
+  --zds-avatar-add-icon: 16px;
+}
+.zds-avatar-add--md {
+  --zds-avatar-add-size: 40px;
+  --zds-avatar-add-icon: 20px;
+}
+.zds-avatar-add > svg {
+  display: block;
+  width: var(--zds-avatar-add-icon);
+  height: var(--zds-avatar-add-icon);
+}
+.zds-avatar-add:hover:not(:disabled) {
+  background: var(--zds-color-avatar-add-bg-hover);
+  color: var(--zds-color-text-primary);
+}
+.zds-avatar-add:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--zds-color-bg-primary), 0 0 0 4px var(--zds-color-focus-ring);
+}
+.zds-avatar-add:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.zds-avatar-label-group {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--zds-space-md);
+}
+.zds-avatar-label-group__text {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  min-width: 0;
+}
+.zds-avatar-label-group {
+  --zds-avatar-label-name: var(--zds-text-body-sm);
+  --zds-avatar-label-name-line: var(--zds-text-body-sm-line-height);
+  --zds-avatar-label-support: var(--zds-text-body-sm);
+  --zds-avatar-label-support-line: var(--zds-text-body-sm-line-height);
+}
+.zds-avatar-label-group--sm {
+  --zds-avatar-label-support: var(--zds-text-caption-md);
+  --zds-avatar-label-support-line: var(--zds-text-caption-md-line-height);
+}
+.zds-avatar-label-group--lg {
+  --zds-avatar-label-name: var(--zds-text-body-md);
+  --zds-avatar-label-name-line: var(--zds-text-body-md-line-height);
+  --zds-avatar-label-support: var(--zds-text-body-md);
+  --zds-avatar-label-support-line: var(--zds-text-body-md-line-height);
+}
+.zds-avatar-label-group__name {
+  font-family: var(--zds-font-family-body);
+  font-size: var(--zds-avatar-label-name);
+  font-weight: var(--zds-font-weight-semibold);
+  line-height: var(--zds-avatar-label-name-line);
+  color: var(--zds-color-text-primary);
+}
+.zds-avatar-label-group__support {
+  font-family: var(--zds-font-family-body);
+  font-size: var(--zds-avatar-label-support);
+  font-weight: var(--zds-font-weight-normal);
+  line-height: var(--zds-avatar-label-support-line);
+  color: var(--zds-color-text-secondary);
+}
+.zds-avatar-label-group__name,
+.zds-avatar-label-group__support {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* src/components/base/Checkbox/Checkbox.css */
+.zds-checkbox {
+  display: flex;
+  align-items: flex-start;
+}
+.zds-checkbox--sm {
+  --zds-checkbox-boite: 16px;
+  --zds-checkbox-rayon: var(--zds-radius-xs);
+  --zds-checkbox-corps: var(--zds-text-body-sm);
+  --zds-checkbox-interligne: var(--zds-text-body-sm-line-height);
+  gap: var(--zds-space-md);
+}
+.zds-checkbox--md {
+  --zds-checkbox-boite: 20px;
+  --zds-checkbox-rayon: var(--zds-radius-sm);
+  --zds-checkbox-corps: var(--zds-text-body-md);
+  --zds-checkbox-interligne: var(--zds-text-body-md-line-height);
+  gap: var(--zds-space-lg);
+}
+.zds-checkbox__controle {
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  padding-top: var(--zds-space-xxs);
+}
+.zds-checkbox__entree {
+  appearance: none;
+  margin: 0;
+  width: var(--zds-checkbox-boite);
+  height: var(--zds-checkbox-boite);
+  border: 1px solid var(--zds-color-checkbox-border);
+  border-radius: var(--zds-checkbox-rayon);
+  background: var(--zds-color-bg-primary);
+  cursor: pointer;
+}
+.zds-checkbox--radio .zds-checkbox__entree {
+  border-radius: var(--zds-radius-full);
+}
+.zds-checkbox__marque {
+  position: absolute;
+  top: var(--zds-space-xxs);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--zds-checkbox-boite);
+  height: var(--zds-checkbox-boite);
+  color: var(--zds-color-fg-white);
+  opacity: 0;
+  pointer-events: none;
+}
+.zds-checkbox__marque > svg {
+  display: block;
+}
+.zds-checkbox--sm .zds-checkbox__marque > svg {
+  width: 75%;
+  height: 75%;
+  stroke-width: 3.3332;
+}
+.zds-checkbox--md .zds-checkbox__marque > svg {
+  width: 70%;
+  height: 70%;
+  stroke-width: 3.4286;
+}
+.zds-checkbox--radio .zds-checkbox__marque::before {
+  content: "";
+  display: block;
+  border-radius: var(--zds-radius-full);
+  background: currentColor;
+}
+.zds-checkbox--radio.zds-checkbox--sm .zds-checkbox__marque::before {
+  width: 37.5%;
+  height: 37.5%;
+}
+.zds-checkbox--radio.zds-checkbox--md .zds-checkbox__marque::before {
+  width: 40%;
+  height: 40%;
+}
+.zds-checkbox__entree:checked,
+.zds-checkbox__entree:indeterminate {
+  border-color: var(--zds-color-checkbox-bg-checked);
+  background: var(--zds-color-checkbox-bg-checked);
+}
+.zds-checkbox__entree:checked + .zds-checkbox__marque,
+.zds-checkbox__entree:indeterminate + .zds-checkbox__marque {
+  opacity: 1;
+}
+.zds-checkbox__entree:hover:not(:disabled) {
+  background: var(--zds-color-checkbox-bg-hover);
+}
+.zds-checkbox__entree:checked:hover:not(:disabled),
+.zds-checkbox__entree:indeterminate:hover:not(:disabled) {
+  border-color: var(--zds-color-bg-brand-solid);
+  background: var(--zds-color-bg-brand-solid);
+}
+.zds-checkbox__entree:focus-visible,
+.zds-checkbox__entree[data-zds-demo=focus] {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--zds-color-bg-primary), 0 0 0 4px var(--zds-color-focus-ring);
+}
+.zds-checkbox:has(.zds-checkbox__entree:disabled) {
+  opacity: 0.5;
+}
+.zds-checkbox__entree:disabled {
+  background: var(--zds-color-checkbox-bg-disabled);
+  cursor: not-allowed;
+}
+.zds-checkbox__entree:disabled:checked,
+.zds-checkbox__entree:disabled:indeterminate {
+  background: var(--zds-color-checkbox-bg-checked);
+}
+.zds-checkbox:has(.zds-checkbox__entree:disabled) .zds-checkbox__libelle {
+  cursor: not-allowed;
+}
+.zds-checkbox__textes {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  align-items: flex-start;
+  min-width: 0;
+  font-family: var(--zds-font-family-body);
+  font-size: var(--zds-checkbox-corps);
+  font-weight: var(--zds-font-weight-normal);
+  line-height: var(--zds-checkbox-interligne);
+}
+.zds-checkbox--md .zds-checkbox__textes {
+  gap: var(--zds-space-xxs);
+}
+.zds-checkbox__libelle {
+  color: var(--zds-color-text-primary);
+  cursor: pointer;
+}
+.zds-checkbox__aide {
+  color: var(--zds-color-text-secondary);
+}
+
+/* src/components/base/Toggle/Toggle.css */
+.zds-toggle {
+  display: flex;
+  align-items: flex-start;
+}
+.zds-toggle--sm {
+  --zds-toggle-piste-l: 36px;
+  --zds-toggle-piste-h: 20px;
+  --zds-toggle-bouton: 16px;
+  --zds-toggle-corps: var(--zds-text-body-sm);
+  --zds-toggle-interligne: var(--zds-text-body-sm-line-height);
+  gap: var(--zds-space-md);
+}
+.zds-toggle--md {
+  --zds-toggle-piste-l: 44px;
+  --zds-toggle-piste-h: 24px;
+  --zds-toggle-bouton: 20px;
+  --zds-toggle-corps: var(--zds-text-body-md);
+  --zds-toggle-interligne: var(--zds-text-body-md-line-height);
+  gap: var(--zds-space-lg);
+}
+.zds-toggle--default {
+  --zds-toggle-retrait: var(--zds-space-xxs);
+  --zds-toggle-trait: 0.5px;
+}
+.zds-toggle--slim {
+  --zds-toggle-retrait: 0px;
+  --zds-toggle-trait: 1px;
+}
+.zds-toggle--slim.zds-toggle--sm {
+  --zds-toggle-piste-l: 32px;
+  --zds-toggle-piste-h: 16px;
+}
+.zds-toggle--slim.zds-toggle--md {
+  --zds-toggle-piste-l: 40px;
+  --zds-toggle-piste-h: 20px;
+}
+.zds-toggle__controle {
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+}
+.zds-toggle__piste {
+  appearance: none;
+  box-sizing: border-box;
+  margin: 0;
+  width: var(--zds-toggle-piste-l);
+  height: var(--zds-toggle-piste-h);
+  border: var(--zds-toggle-trait) solid var(--zds-color-toggle-border);
+  border-radius: var(--zds-radius-full);
+  background: var(--zds-color-toggle-bg);
+  cursor: pointer;
+  transition: background-color var(--zds-transition-fast), border-color var(--zds-transition-fast);
+}
+.zds-toggle__bouton {
+  position: absolute;
+  top: 50%;
+  left: var(--zds-toggle-retrait);
+  box-sizing: border-box;
+  width: var(--zds-toggle-bouton);
+  height: var(--zds-toggle-bouton);
+  border-radius: var(--zds-radius-full);
+  background: var(--zds-color-bg-primary);
+  box-shadow: var(--zds-shadow-toggle-knob);
+  transform: translateY(-50%);
+  transition: transform var(--zds-transition-fast);
+  pointer-events: none;
+}
+.zds-toggle--slim .zds-toggle__bouton {
+  border: 1px solid var(--zds-color-toggle-border);
+  box-shadow: var(--zds-shadow-xs);
+}
+.zds-toggle__piste:checked {
+  border-color: transparent;
+  background: var(--zds-color-toggle-bg-pressed);
+}
+.zds-toggle__piste:checked + .zds-toggle__bouton {
+  transform: translateY(-50%) translateX(100%);
+}
+.zds-toggle--slim .zds-toggle__piste:checked + .zds-toggle__bouton {
+  border-color: var(--zds-color-border-brand);
+}
+.zds-toggle__piste:hover:not(:disabled) {
+  background: var(--zds-color-toggle-bg-hover);
+}
+.zds-toggle__piste:checked:hover:not(:disabled) {
+  background: var(--zds-color-bg-brand-solid-hover);
+}
+.zds-toggle--slim .zds-toggle__piste:checked:hover:not(:disabled) + .zds-toggle__bouton {
+  border-color: var(--zds-color-toggle-border-pressed-hover);
+}
+.zds-toggle__piste:focus-visible,
+.zds-toggle__piste[data-zds-demo=focus] {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--zds-color-bg-primary), 0 0 0 4px var(--zds-color-focus-ring);
+}
+.zds-toggle:has(.zds-toggle__piste:disabled) {
+  opacity: 0.5;
+}
+.zds-toggle__piste:disabled {
+  cursor: not-allowed;
+}
+.zds-toggle:has(.zds-toggle__piste:disabled) .zds-toggle__libelle {
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: reduce) {
+  .zds-toggle__piste,
+  .zds-toggle__bouton {
+    transition: none;
+  }
+}
+.zds-toggle__textes {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  align-items: flex-start;
+  min-width: 0;
+  font-family: var(--zds-font-family-body);
+  font-size: var(--zds-toggle-corps);
+  font-weight: var(--zds-font-weight-normal);
+  line-height: var(--zds-toggle-interligne);
+}
+.zds-toggle--md .zds-toggle__textes {
+  gap: var(--zds-space-xxs);
+}
+.zds-toggle__libelle {
+  color: var(--zds-color-text-primary);
+  cursor: pointer;
+}
+.zds-toggle__aide {
+  color: var(--zds-color-text-secondary);
+}
 /*# sourceMappingURL=index.css.map */