@dialpad/dialtone-css 8.80.0-next.1 → 8.80.0-next.2

package/lib/dist/dialtone.css

@@ -656,6 +656,1604 @@
     }
   }
 }
+@property --box-p {
+  syntax: "*";
+  inherits: false;
+}
+@property --box-pi {
+  syntax: "*";
+  inherits: false;
+}
+@property --box-pis {
+  syntax: "*";
+  inherits: false;
+}
+@property --box-pie {
+  syntax: "*";
+  inherits: false;
+}
+@property --box-pbl {
+  syntax: "*";
+  inherits: false;
+}
+@property --box-pbs {
+  syntax: "*";
+  inherits: false;
+}
+@property --box-pbe {
+  syntax: "*";
+  inherits: false;
+}
+@property --box-surface {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: transparent;
+}
+@property --box-bc {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: transparent;
+}
+@property --box-bw {
+  syntax: "*";
+  inherits: false;
+}
+@property --box-bwi {
+  syntax: "*";
+  inherits: false;
+}
+@property --box-bwis {
+  syntax: "*";
+  inherits: false;
+}
+@property --box-bwie {
+  syntax: "*";
+  inherits: false;
+}
+@property --box-bwbl {
+  syntax: "*";
+  inherits: false;
+}
+@property --box-bwbs {
+  syntax: "*";
+  inherits: false;
+}
+@property --box-bwbe {
+  syntax: "*";
+  inherits: false;
+}
+@property --box-br {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0;
+}
+@property --box-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --box-of {
+  syntax: "*";
+  inherits: false;
+}
+@layer dialtone.components {
+  .d-box {
+    box-sizing: border-box;
+    overflow: var(--box-of, visible);
+    background-color: oklch(from var(--box-surface) l c h / var(--bgo, alpha));
+    border-color: oklch(from var(--box-bc) l c h / var(--bco, alpha));
+    border-style: solid;
+    border-block-start-width: var(--box-bwbs, var(--box-bwbl, var(--box-bw, 0)));
+    border-block-end-width: var(--box-bwbe, var(--box-bwbl, var(--box-bw, 0)));
+    border-inline-start-width: var(--box-bwis, var(--box-bwi, var(--box-bw, 0)));
+    border-inline-end-width: var(--box-bwie, var(--box-bwi, var(--box-bw, 0)));
+    border-radius: var(--box-br);
+    box-shadow: var(--box-shadow, none);
+    padding-block: var(--box-pbs, var(--box-pbl, var(--box-p, 0))) var(--box-pbe, var(--box-pbl, var(--box-p, 0)));
+    padding-inline: var(--box-pis, var(--box-pi, var(--box-p, 0))) var(--box-pie, var(--box-pi, var(--box-p, 0)));
+  }
+  .d-box--p-1 {
+    --box-p: var(--dt-spacing-1);
+  }
+  .d-box--p-525 {
+    --box-p: var(--dt-spacing-525);
+  }
+  .d-box--p-0 {
+    --box-p: var(--dt-spacing-0);
+  }
+  .d-box--p-25 {
+    --box-p: var(--dt-spacing-25);
+  }
+  .d-box--p-50 {
+    --box-p: var(--dt-spacing-50);
+  }
+  .d-box--p-75 {
+    --box-p: var(--dt-spacing-75);
+  }
+  .d-box--p-100 {
+    --box-p: var(--dt-spacing-100);
+  }
+  .d-box--p-125 {
+    --box-p: var(--dt-spacing-125);
+  }
+  .d-box--p-150 {
+    --box-p: var(--dt-spacing-150);
+  }
+  .d-box--p-175 {
+    --box-p: var(--dt-spacing-175);
+  }
+  .d-box--p-200 {
+    --box-p: var(--dt-spacing-200);
+  }
+  .d-box--p-250 {
+    --box-p: var(--dt-spacing-250);
+  }
+  .d-box--p-300 {
+    --box-p: var(--dt-spacing-300);
+  }
+  .d-box--p-350 {
+    --box-p: var(--dt-spacing-350);
+  }
+  .d-box--p-400 {
+    --box-p: var(--dt-spacing-400);
+  }
+  .d-box--p-450 {
+    --box-p: var(--dt-spacing-450);
+  }
+  .d-box--p-500 {
+    --box-p: var(--dt-spacing-500);
+  }
+  .d-box--p-550 {
+    --box-p: var(--dt-spacing-550);
+  }
+  .d-box--p-600 {
+    --box-p: var(--dt-spacing-600);
+  }
+  .d-box--p-650 {
+    --box-p: var(--dt-spacing-650);
+  }
+  .d-box--p-700 {
+    --box-p: var(--dt-spacing-700);
+  }
+  .d-box--p-750 {
+    --box-p: var(--dt-spacing-750);
+  }
+  .d-box--p-800 {
+    --box-p: var(--dt-spacing-800);
+  }
+  .d-box--pi-1 {
+    --box-pi: var(--dt-spacing-1);
+  }
+  .d-box--pi-525 {
+    --box-pi: var(--dt-spacing-525);
+  }
+  .d-box--pi-0 {
+    --box-pi: var(--dt-spacing-0);
+  }
+  .d-box--pi-25 {
+    --box-pi: var(--dt-spacing-25);
+  }
+  .d-box--pi-50 {
+    --box-pi: var(--dt-spacing-50);
+  }
+  .d-box--pi-75 {
+    --box-pi: var(--dt-spacing-75);
+  }
+  .d-box--pi-100 {
+    --box-pi: var(--dt-spacing-100);
+  }
+  .d-box--pi-125 {
+    --box-pi: var(--dt-spacing-125);
+  }
+  .d-box--pi-150 {
+    --box-pi: var(--dt-spacing-150);
+  }
+  .d-box--pi-175 {
+    --box-pi: var(--dt-spacing-175);
+  }
+  .d-box--pi-200 {
+    --box-pi: var(--dt-spacing-200);
+  }
+  .d-box--pi-250 {
+    --box-pi: var(--dt-spacing-250);
+  }
+  .d-box--pi-300 {
+    --box-pi: var(--dt-spacing-300);
+  }
+  .d-box--pi-350 {
+    --box-pi: var(--dt-spacing-350);
+  }
+  .d-box--pi-400 {
+    --box-pi: var(--dt-spacing-400);
+  }
+  .d-box--pi-450 {
+    --box-pi: var(--dt-spacing-450);
+  }
+  .d-box--pi-500 {
+    --box-pi: var(--dt-spacing-500);
+  }
+  .d-box--pi-550 {
+    --box-pi: var(--dt-spacing-550);
+  }
+  .d-box--pi-600 {
+    --box-pi: var(--dt-spacing-600);
+  }
+  .d-box--pi-650 {
+    --box-pi: var(--dt-spacing-650);
+  }
+  .d-box--pi-700 {
+    --box-pi: var(--dt-spacing-700);
+  }
+  .d-box--pi-750 {
+    --box-pi: var(--dt-spacing-750);
+  }
+  .d-box--pi-800 {
+    --box-pi: var(--dt-spacing-800);
+  }
+  .d-box--pis-1 {
+    --box-pis: var(--dt-spacing-1);
+  }
+  .d-box--pis-525 {
+    --box-pis: var(--dt-spacing-525);
+  }
+  .d-box--pis-0 {
+    --box-pis: var(--dt-spacing-0);
+  }
+  .d-box--pis-25 {
+    --box-pis: var(--dt-spacing-25);
+  }
+  .d-box--pis-50 {
+    --box-pis: var(--dt-spacing-50);
+  }
+  .d-box--pis-75 {
+    --box-pis: var(--dt-spacing-75);
+  }
+  .d-box--pis-100 {
+    --box-pis: var(--dt-spacing-100);
+  }
+  .d-box--pis-125 {
+    --box-pis: var(--dt-spacing-125);
+  }
+  .d-box--pis-150 {
+    --box-pis: var(--dt-spacing-150);
+  }
+  .d-box--pis-175 {
+    --box-pis: var(--dt-spacing-175);
+  }
+  .d-box--pis-200 {
+    --box-pis: var(--dt-spacing-200);
+  }
+  .d-box--pis-250 {
+    --box-pis: var(--dt-spacing-250);
+  }
+  .d-box--pis-300 {
+    --box-pis: var(--dt-spacing-300);
+  }
+  .d-box--pis-350 {
+    --box-pis: var(--dt-spacing-350);
+  }
+  .d-box--pis-400 {
+    --box-pis: var(--dt-spacing-400);
+  }
+  .d-box--pis-450 {
+    --box-pis: var(--dt-spacing-450);
+  }
+  .d-box--pis-500 {
+    --box-pis: var(--dt-spacing-500);
+  }
+  .d-box--pis-550 {
+    --box-pis: var(--dt-spacing-550);
+  }
+  .d-box--pis-600 {
+    --box-pis: var(--dt-spacing-600);
+  }
+  .d-box--pis-650 {
+    --box-pis: var(--dt-spacing-650);
+  }
+  .d-box--pis-700 {
+    --box-pis: var(--dt-spacing-700);
+  }
+  .d-box--pis-750 {
+    --box-pis: var(--dt-spacing-750);
+  }
+  .d-box--pis-800 {
+    --box-pis: var(--dt-spacing-800);
+  }
+  .d-box--pie-1 {
+    --box-pie: var(--dt-spacing-1);
+  }
+  .d-box--pie-525 {
+    --box-pie: var(--dt-spacing-525);
+  }
+  .d-box--pie-0 {
+    --box-pie: var(--dt-spacing-0);
+  }
+  .d-box--pie-25 {
+    --box-pie: var(--dt-spacing-25);
+  }
+  .d-box--pie-50 {
+    --box-pie: var(--dt-spacing-50);
+  }
+  .d-box--pie-75 {
+    --box-pie: var(--dt-spacing-75);
+  }
+  .d-box--pie-100 {
+    --box-pie: var(--dt-spacing-100);
+  }
+  .d-box--pie-125 {
+    --box-pie: var(--dt-spacing-125);
+  }
+  .d-box--pie-150 {
+    --box-pie: var(--dt-spacing-150);
+  }
+  .d-box--pie-175 {
+    --box-pie: var(--dt-spacing-175);
+  }
+  .d-box--pie-200 {
+    --box-pie: var(--dt-spacing-200);
+  }
+  .d-box--pie-250 {
+    --box-pie: var(--dt-spacing-250);
+  }
+  .d-box--pie-300 {
+    --box-pie: var(--dt-spacing-300);
+  }
+  .d-box--pie-350 {
+    --box-pie: var(--dt-spacing-350);
+  }
+  .d-box--pie-400 {
+    --box-pie: var(--dt-spacing-400);
+  }
+  .d-box--pie-450 {
+    --box-pie: var(--dt-spacing-450);
+  }
+  .d-box--pie-500 {
+    --box-pie: var(--dt-spacing-500);
+  }
+  .d-box--pie-550 {
+    --box-pie: var(--dt-spacing-550);
+  }
+  .d-box--pie-600 {
+    --box-pie: var(--dt-spacing-600);
+  }
+  .d-box--pie-650 {
+    --box-pie: var(--dt-spacing-650);
+  }
+  .d-box--pie-700 {
+    --box-pie: var(--dt-spacing-700);
+  }
+  .d-box--pie-750 {
+    --box-pie: var(--dt-spacing-750);
+  }
+  .d-box--pie-800 {
+    --box-pie: var(--dt-spacing-800);
+  }
+  .d-box--pbl-1 {
+    --box-pbl: var(--dt-spacing-1);
+  }
+  .d-box--pbl-525 {
+    --box-pbl: var(--dt-spacing-525);
+  }
+  .d-box--pbl-0 {
+    --box-pbl: var(--dt-spacing-0);
+  }
+  .d-box--pbl-25 {
+    --box-pbl: var(--dt-spacing-25);
+  }
+  .d-box--pbl-50 {
+    --box-pbl: var(--dt-spacing-50);
+  }
+  .d-box--pbl-75 {
+    --box-pbl: var(--dt-spacing-75);
+  }
+  .d-box--pbl-100 {
+    --box-pbl: var(--dt-spacing-100);
+  }
+  .d-box--pbl-125 {
+    --box-pbl: var(--dt-spacing-125);
+  }
+  .d-box--pbl-150 {
+    --box-pbl: var(--dt-spacing-150);
+  }
+  .d-box--pbl-175 {
+    --box-pbl: var(--dt-spacing-175);
+  }
+  .d-box--pbl-200 {
+    --box-pbl: var(--dt-spacing-200);
+  }
+  .d-box--pbl-250 {
+    --box-pbl: var(--dt-spacing-250);
+  }
+  .d-box--pbl-300 {
+    --box-pbl: var(--dt-spacing-300);
+  }
+  .d-box--pbl-350 {
+    --box-pbl: var(--dt-spacing-350);
+  }
+  .d-box--pbl-400 {
+    --box-pbl: var(--dt-spacing-400);
+  }
+  .d-box--pbl-450 {
+    --box-pbl: var(--dt-spacing-450);
+  }
+  .d-box--pbl-500 {
+    --box-pbl: var(--dt-spacing-500);
+  }
+  .d-box--pbl-550 {
+    --box-pbl: var(--dt-spacing-550);
+  }
+  .d-box--pbl-600 {
+    --box-pbl: var(--dt-spacing-600);
+  }
+  .d-box--pbl-650 {
+    --box-pbl: var(--dt-spacing-650);
+  }
+  .d-box--pbl-700 {
+    --box-pbl: var(--dt-spacing-700);
+  }
+  .d-box--pbl-750 {
+    --box-pbl: var(--dt-spacing-750);
+  }
+  .d-box--pbl-800 {
+    --box-pbl: var(--dt-spacing-800);
+  }
+  .d-box--pbs-1 {
+    --box-pbs: var(--dt-spacing-1);
+  }
+  .d-box--pbs-525 {
+    --box-pbs: var(--dt-spacing-525);
+  }
+  .d-box--pbs-0 {
+    --box-pbs: var(--dt-spacing-0);
+  }
+  .d-box--pbs-25 {
+    --box-pbs: var(--dt-spacing-25);
+  }
+  .d-box--pbs-50 {
+    --box-pbs: var(--dt-spacing-50);
+  }
+  .d-box--pbs-75 {
+    --box-pbs: var(--dt-spacing-75);
+  }
+  .d-box--pbs-100 {
+    --box-pbs: var(--dt-spacing-100);
+  }
+  .d-box--pbs-125 {
+    --box-pbs: var(--dt-spacing-125);
+  }
+  .d-box--pbs-150 {
+    --box-pbs: var(--dt-spacing-150);
+  }
+  .d-box--pbs-175 {
+    --box-pbs: var(--dt-spacing-175);
+  }
+  .d-box--pbs-200 {
+    --box-pbs: var(--dt-spacing-200);
+  }
+  .d-box--pbs-250 {
+    --box-pbs: var(--dt-spacing-250);
+  }
+  .d-box--pbs-300 {
+    --box-pbs: var(--dt-spacing-300);
+  }
+  .d-box--pbs-350 {
+    --box-pbs: var(--dt-spacing-350);
+  }
+  .d-box--pbs-400 {
+    --box-pbs: var(--dt-spacing-400);
+  }
+  .d-box--pbs-450 {
+    --box-pbs: var(--dt-spacing-450);
+  }
+  .d-box--pbs-500 {
+    --box-pbs: var(--dt-spacing-500);
+  }
+  .d-box--pbs-550 {
+    --box-pbs: var(--dt-spacing-550);
+  }
+  .d-box--pbs-600 {
+    --box-pbs: var(--dt-spacing-600);
+  }
+  .d-box--pbs-650 {
+    --box-pbs: var(--dt-spacing-650);
+  }
+  .d-box--pbs-700 {
+    --box-pbs: var(--dt-spacing-700);
+  }
+  .d-box--pbs-750 {
+    --box-pbs: var(--dt-spacing-750);
+  }
+  .d-box--pbs-800 {
+    --box-pbs: var(--dt-spacing-800);
+  }
+  .d-box--pbe-1 {
+    --box-pbe: var(--dt-spacing-1);
+  }
+  .d-box--pbe-525 {
+    --box-pbe: var(--dt-spacing-525);
+  }
+  .d-box--pbe-0 {
+    --box-pbe: var(--dt-spacing-0);
+  }
+  .d-box--pbe-25 {
+    --box-pbe: var(--dt-spacing-25);
+  }
+  .d-box--pbe-50 {
+    --box-pbe: var(--dt-spacing-50);
+  }
+  .d-box--pbe-75 {
+    --box-pbe: var(--dt-spacing-75);
+  }
+  .d-box--pbe-100 {
+    --box-pbe: var(--dt-spacing-100);
+  }
+  .d-box--pbe-125 {
+    --box-pbe: var(--dt-spacing-125);
+  }
+  .d-box--pbe-150 {
+    --box-pbe: var(--dt-spacing-150);
+  }
+  .d-box--pbe-175 {
+    --box-pbe: var(--dt-spacing-175);
+  }
+  .d-box--pbe-200 {
+    --box-pbe: var(--dt-spacing-200);
+  }
+  .d-box--pbe-250 {
+    --box-pbe: var(--dt-spacing-250);
+  }
+  .d-box--pbe-300 {
+    --box-pbe: var(--dt-spacing-300);
+  }
+  .d-box--pbe-350 {
+    --box-pbe: var(--dt-spacing-350);
+  }
+  .d-box--pbe-400 {
+    --box-pbe: var(--dt-spacing-400);
+  }
+  .d-box--pbe-450 {
+    --box-pbe: var(--dt-spacing-450);
+  }
+  .d-box--pbe-500 {
+    --box-pbe: var(--dt-spacing-500);
+  }
+  .d-box--pbe-550 {
+    --box-pbe: var(--dt-spacing-550);
+  }
+  .d-box--pbe-600 {
+    --box-pbe: var(--dt-spacing-600);
+  }
+  .d-box--pbe-650 {
+    --box-pbe: var(--dt-spacing-650);
+  }
+  .d-box--pbe-700 {
+    --box-pbe: var(--dt-spacing-700);
+  }
+  .d-box--pbe-750 {
+    --box-pbe: var(--dt-spacing-750);
+  }
+  .d-box--pbe-800 {
+    --box-pbe: var(--dt-spacing-800);
+  }
+  .d-box--surface-primary {
+    --box-surface: var(--dt-color-surface-primary);
+  }
+  .d-box--surface-secondary {
+    --box-surface: var(--dt-color-surface-secondary);
+  }
+  .d-box--surface-moderate {
+    --box-surface: var(--dt-color-surface-moderate);
+  }
+  .d-box--surface-bold {
+    --box-surface: var(--dt-color-surface-bold);
+  }
+  .d-box--surface-strong {
+    --box-surface: var(--dt-color-surface-strong);
+  }
+  .d-box--surface-contrast {
+    --box-surface: var(--dt-color-surface-contrast);
+  }
+  .d-box--surface-backdrop {
+    --box-surface: var(--dt-color-surface-backdrop);
+  }
+  .d-box--surface-brand {
+    --box-surface: var(--dt-color-surface-brand);
+  }
+  .d-box--surface-info {
+    --box-surface: var(--dt-color-surface-info);
+  }
+  .d-box--surface-warning {
+    --box-surface: var(--dt-color-surface-warning);
+  }
+  .d-box--surface-critical {
+    --box-surface: var(--dt-color-surface-critical);
+  }
+  .d-box--surface-brand-subtle {
+    --box-surface: var(--dt-color-surface-brand-subtle);
+  }
+  .d-box--surface-brand-strong {
+    --box-surface: var(--dt-color-surface-brand-strong);
+  }
+  .d-box--surface-info-subtle {
+    --box-surface: var(--dt-color-surface-info-subtle);
+  }
+  .d-box--surface-info-strong {
+    --box-surface: var(--dt-color-surface-info-strong);
+  }
+  .d-box--surface-warning-subtle {
+    --box-surface: var(--dt-color-surface-warning-subtle);
+  }
+  .d-box--surface-warning-strong {
+    --box-surface: var(--dt-color-surface-warning-strong);
+  }
+  .d-box--surface-critical-subtle {
+    --box-surface: var(--dt-color-surface-critical-subtle);
+  }
+  .d-box--surface-critical-strong {
+    --box-surface: var(--dt-color-surface-critical-strong);
+  }
+  .d-box--surface-primary-opaque {
+    --box-surface: var(--dt-color-surface-primary-opaque);
+  }
+  .d-box--surface-secondary-opaque {
+    --box-surface: var(--dt-color-surface-secondary-opaque);
+  }
+  .d-box--surface-moderate-opaque {
+    --box-surface: var(--dt-color-surface-moderate-opaque);
+  }
+  .d-box--surface-bold-opaque {
+    --box-surface: var(--dt-color-surface-bold-opaque);
+  }
+  .d-box--surface-strong-opaque {
+    --box-surface: var(--dt-color-surface-strong-opaque);
+  }
+  .d-box--surface-contrast-opaque {
+    --box-surface: var(--dt-color-surface-contrast-opaque);
+  }
+  .d-box--surface-brand-opaque {
+    --box-surface: var(--dt-color-surface-brand-opaque);
+  }
+  .d-box--surface-brand-subtle-opaque {
+    --box-surface: var(--dt-color-surface-brand-subtle-opaque);
+  }
+  .d-box--surface-info-opaque {
+    --box-surface: var(--dt-color-surface-info-opaque);
+  }
+  .d-box--surface-info-subtle-opaque {
+    --box-surface: var(--dt-color-surface-info-subtle-opaque);
+  }
+  .d-box--surface-warning-opaque {
+    --box-surface: var(--dt-color-surface-warning-opaque);
+  }
+  .d-box--surface-warning-subtle-opaque {
+    --box-surface: var(--dt-color-surface-warning-subtle-opaque);
+  }
+  .d-box--surface-critical-opaque {
+    --box-surface: var(--dt-color-surface-critical-opaque);
+  }
+  .d-box--surface-critical-subtle-opaque {
+    --box-surface: var(--dt-color-surface-critical-subtle-opaque);
+  }
+  .d-box--surface-positive {
+    --box-surface: var(--dt-color-surface-success);
+  }
+  .d-box--surface-positive-subtle {
+    --box-surface: var(--dt-color-surface-success-subtle);
+  }
+  .d-box--surface-positive-strong {
+    --box-surface: var(--dt-color-surface-success-strong);
+  }
+  .d-box--surface-positive-opaque {
+    --box-surface: var(--dt-color-surface-success-opaque);
+  }
+  .d-box--surface-positive-subtle-opaque {
+    --box-surface: var(--dt-color-surface-success-subtle-opaque);
+  }
+  .d-box--bc-transparent {
+    --box-bc: transparent;
+  }
+  .d-box--bc-subtle {
+    --box-bc: var(--dt-color-border-subtle);
+  }
+  .d-box--bc-default {
+    --box-bc: var(--dt-color-border-default);
+  }
+  .d-box--bc-moderate {
+    --box-bc: var(--dt-color-border-moderate);
+  }
+  .d-box--bc-bold {
+    --box-bc: var(--dt-color-border-bold);
+  }
+  .d-box--bc-accent {
+    --box-bc: var(--dt-color-border-accent);
+  }
+  .d-box--bc-focus {
+    --box-bc: var(--dt-color-border-focus);
+  }
+  .d-box--bc-brand {
+    --box-bc: var(--dt-color-border-brand);
+  }
+  .d-box--bc-warning {
+    --box-bc: var(--dt-color-border-warning);
+  }
+  .d-box--bc-critical {
+    --box-bc: var(--dt-color-border-critical);
+  }
+  .d-box--bc-brand-subtle {
+    --box-bc: var(--dt-color-border-brand-subtle);
+  }
+  .d-box--bc-brand-strong {
+    --box-bc: var(--dt-color-border-brand-strong);
+  }
+  .d-box--bc-warning-subtle {
+    --box-bc: var(--dt-color-border-warning-subtle);
+  }
+  .d-box--bc-warning-strong {
+    --box-bc: var(--dt-color-border-warning-strong);
+  }
+  .d-box--bc-critical-subtle {
+    --box-bc: var(--dt-color-border-critical-subtle);
+  }
+  .d-box--bc-critical-strong {
+    --box-bc: var(--dt-color-border-critical-strong);
+  }
+  .d-box--bc-positive {
+    --box-bc: var(--dt-color-border-success);
+  }
+  .d-box--bc-positive-subtle {
+    --box-bc: var(--dt-color-border-success-subtle);
+  }
+  .d-box--bc-positive-strong {
+    --box-bc: var(--dt-color-border-success-strong);
+  }
+  .d-box--bw-0 {
+    --box-bw: var(--dt-size-border-0);
+  }
+  .d-box--bw-50 {
+    --box-bw: var(--dt-size-border-50);
+  }
+  .d-box--bw-100 {
+    --box-bw: var(--dt-size-border-100);
+  }
+  .d-box--bw-150 {
+    --box-bw: var(--dt-size-border-150);
+  }
+  .d-box--bw-200 {
+    --box-bw: var(--dt-size-border-200);
+  }
+  .d-box--bw-300 {
+    --box-bw: var(--dt-size-border-300);
+  }
+  .d-box--bw-400 {
+    --box-bw: var(--dt-size-border-400);
+  }
+  .d-box--bwi-0 {
+    --box-bwi: var(--dt-size-border-0);
+  }
+  .d-box--bwi-50 {
+    --box-bwi: var(--dt-size-border-50);
+  }
+  .d-box--bwi-100 {
+    --box-bwi: var(--dt-size-border-100);
+  }
+  .d-box--bwi-150 {
+    --box-bwi: var(--dt-size-border-150);
+  }
+  .d-box--bwi-200 {
+    --box-bwi: var(--dt-size-border-200);
+  }
+  .d-box--bwi-300 {
+    --box-bwi: var(--dt-size-border-300);
+  }
+  .d-box--bwi-400 {
+    --box-bwi: var(--dt-size-border-400);
+  }
+  .d-box--bwis-0 {
+    --box-bwis: var(--dt-size-border-0);
+  }
+  .d-box--bwis-50 {
+    --box-bwis: var(--dt-size-border-50);
+  }
+  .d-box--bwis-100 {
+    --box-bwis: var(--dt-size-border-100);
+  }
+  .d-box--bwis-150 {
+    --box-bwis: var(--dt-size-border-150);
+  }
+  .d-box--bwis-200 {
+    --box-bwis: var(--dt-size-border-200);
+  }
+  .d-box--bwis-300 {
+    --box-bwis: var(--dt-size-border-300);
+  }
+  .d-box--bwis-400 {
+    --box-bwis: var(--dt-size-border-400);
+  }
+  .d-box--bwie-0 {
+    --box-bwie: var(--dt-size-border-0);
+  }
+  .d-box--bwie-50 {
+    --box-bwie: var(--dt-size-border-50);
+  }
+  .d-box--bwie-100 {
+    --box-bwie: var(--dt-size-border-100);
+  }
+  .d-box--bwie-150 {
+    --box-bwie: var(--dt-size-border-150);
+  }
+  .d-box--bwie-200 {
+    --box-bwie: var(--dt-size-border-200);
+  }
+  .d-box--bwie-300 {
+    --box-bwie: var(--dt-size-border-300);
+  }
+  .d-box--bwie-400 {
+    --box-bwie: var(--dt-size-border-400);
+  }
+  .d-box--bwbl-0 {
+    --box-bwbl: var(--dt-size-border-0);
+  }
+  .d-box--bwbl-50 {
+    --box-bwbl: var(--dt-size-border-50);
+  }
+  .d-box--bwbl-100 {
+    --box-bwbl: var(--dt-size-border-100);
+  }
+  .d-box--bwbl-150 {
+    --box-bwbl: var(--dt-size-border-150);
+  }
+  .d-box--bwbl-200 {
+    --box-bwbl: var(--dt-size-border-200);
+  }
+  .d-box--bwbl-300 {
+    --box-bwbl: var(--dt-size-border-300);
+  }
+  .d-box--bwbl-400 {
+    --box-bwbl: var(--dt-size-border-400);
+  }
+  .d-box--bwbs-0 {
+    --box-bwbs: var(--dt-size-border-0);
+  }
+  .d-box--bwbs-50 {
+    --box-bwbs: var(--dt-size-border-50);
+  }
+  .d-box--bwbs-100 {
+    --box-bwbs: var(--dt-size-border-100);
+  }
+  .d-box--bwbs-150 {
+    --box-bwbs: var(--dt-size-border-150);
+  }
+  .d-box--bwbs-200 {
+    --box-bwbs: var(--dt-size-border-200);
+  }
+  .d-box--bwbs-300 {
+    --box-bwbs: var(--dt-size-border-300);
+  }
+  .d-box--bwbs-400 {
+    --box-bwbs: var(--dt-size-border-400);
+  }
+  .d-box--bwbe-0 {
+    --box-bwbe: var(--dt-size-border-0);
+  }
+  .d-box--bwbe-50 {
+    --box-bwbe: var(--dt-size-border-50);
+  }
+  .d-box--bwbe-100 {
+    --box-bwbe: var(--dt-size-border-100);
+  }
+  .d-box--bwbe-150 {
+    --box-bwbe: var(--dt-size-border-150);
+  }
+  .d-box--bwbe-200 {
+    --box-bwbe: var(--dt-size-border-200);
+  }
+  .d-box--bwbe-300 {
+    --box-bwbe: var(--dt-size-border-300);
+  }
+  .d-box--bwbe-400 {
+    --box-bwbe: var(--dt-size-border-400);
+  }
+  .d-box--br-0 {
+    --box-br: var(--dt-size-radius-0);
+  }
+  .d-box--br-100 {
+    --box-br: var(--dt-size-radius-100);
+  }
+  .d-box--br-200 {
+    --box-br: var(--dt-size-radius-200);
+  }
+  .d-box--br-300 {
+    --box-br: var(--dt-size-radius-300);
+  }
+  .d-box--br-350 {
+    --box-br: var(--dt-size-radius-350);
+  }
+  .d-box--br-400 {
+    --box-br: var(--dt-size-radius-400);
+  }
+  .d-box--br-450 {
+    --box-br: var(--dt-size-radius-450);
+  }
+  .d-box--br-500 {
+    --box-br: var(--dt-size-radius-500);
+  }
+  .d-box--br-600 {
+    --box-br: var(--dt-size-radius-600);
+  }
+  .d-box--br-pill {
+    --box-br: var(--dt-size-radius-pill);
+  }
+  .d-box--br-circle {
+    --box-br: var(--dt-size-radius-circle);
+  }
+  .d-box--shadow-small {
+    --box-shadow: var(--dt-shadow-small);
+  }
+  .d-box--shadow-medium {
+    --box-shadow: var(--dt-shadow-medium);
+  }
+  .d-box--shadow-large {
+    --box-shadow: var(--dt-shadow-large);
+  }
+  .d-box--shadow-extra-large {
+    --box-shadow: var(--dt-shadow-extra-large);
+  }
+  .d-box--shadow-card {
+    --box-shadow: var(--dt-shadow-card);
+  }
+  .d-box--is-25 {
+    inline-size: var(--dt-layout-25);
+  }
+  .d-box--is-50 {
+    inline-size: var(--dt-layout-50);
+  }
+  .d-box--is-75 {
+    inline-size: var(--dt-layout-75);
+  }
+  .d-box--is-0 {
+    inline-size: var(--dt-layout-0);
+  }
+  .d-box--is-100 {
+    inline-size: var(--dt-layout-100);
+  }
+  .d-box--is-200 {
+    inline-size: var(--dt-layout-200);
+  }
+  .d-box--is-300 {
+    inline-size: var(--dt-layout-300);
+  }
+  .d-box--is-400 {
+    inline-size: var(--dt-layout-400);
+  }
+  .d-box--is-500 {
+    inline-size: var(--dt-layout-500);
+  }
+  .d-box--is-600 {
+    inline-size: var(--dt-layout-600);
+  }
+  .d-box--is-700 {
+    inline-size: var(--dt-layout-700);
+  }
+  .d-box--is-800 {
+    inline-size: var(--dt-layout-800);
+  }
+  .d-box--is-900 {
+    inline-size: var(--dt-layout-900);
+  }
+  .d-box--is-1000 {
+    inline-size: var(--dt-layout-1000);
+  }
+  .d-box--is-1100 {
+    inline-size: var(--dt-layout-1100);
+  }
+  .d-box--is-1200 {
+    inline-size: var(--dt-layout-1200);
+  }
+  .d-box--is-1300 {
+    inline-size: var(--dt-layout-1300);
+  }
+  .d-box--is-1400 {
+    inline-size: var(--dt-layout-1400);
+  }
+  .d-box--is-1500 {
+    inline-size: var(--dt-layout-1500);
+  }
+  .d-box--is-1600 {
+    inline-size: var(--dt-layout-1600);
+  }
+  .d-box--is-10-percent {
+    inline-size: var(--dt-layout-10-percent);
+  }
+  .d-box--is-20-percent {
+    inline-size: var(--dt-layout-20-percent);
+  }
+  .d-box--is-25-percent {
+    inline-size: var(--dt-layout-25-percent);
+  }
+  .d-box--is-30-percent {
+    inline-size: var(--dt-layout-30-percent);
+  }
+  .d-box--is-33-percent {
+    inline-size: var(--dt-layout-33-percent);
+  }
+  .d-box--is-40-percent {
+    inline-size: var(--dt-layout-40-percent);
+  }
+  .d-box--is-50-percent {
+    inline-size: var(--dt-layout-50-percent);
+  }
+  .d-box--is-60-percent {
+    inline-size: var(--dt-layout-60-percent);
+  }
+  .d-box--is-66-percent {
+    inline-size: var(--dt-layout-66-percent);
+  }
+  .d-box--is-70-percent {
+    inline-size: var(--dt-layout-70-percent);
+  }
+  .d-box--is-75-percent {
+    inline-size: var(--dt-layout-75-percent);
+  }
+  .d-box--is-80-percent {
+    inline-size: var(--dt-layout-80-percent);
+  }
+  .d-box--is-90-percent {
+    inline-size: var(--dt-layout-90-percent);
+  }
+  .d-box--is-95-percent {
+    inline-size: var(--dt-layout-95-percent);
+  }
+  .d-box--is-100-percent {
+    inline-size: var(--dt-layout-100-percent);
+  }
+  .d-box--bls-25 {
+    block-size: var(--dt-layout-25);
+  }
+  .d-box--bls-50 {
+    block-size: var(--dt-layout-50);
+  }
+  .d-box--bls-75 {
+    block-size: var(--dt-layout-75);
+  }
+  .d-box--bls-0 {
+    block-size: var(--dt-layout-0);
+  }
+  .d-box--bls-100 {
+    block-size: var(--dt-layout-100);
+  }
+  .d-box--bls-200 {
+    block-size: var(--dt-layout-200);
+  }
+  .d-box--bls-300 {
+    block-size: var(--dt-layout-300);
+  }
+  .d-box--bls-400 {
+    block-size: var(--dt-layout-400);
+  }
+  .d-box--bls-500 {
+    block-size: var(--dt-layout-500);
+  }
+  .d-box--bls-600 {
+    block-size: var(--dt-layout-600);
+  }
+  .d-box--bls-700 {
+    block-size: var(--dt-layout-700);
+  }
+  .d-box--bls-800 {
+    block-size: var(--dt-layout-800);
+  }
+  .d-box--bls-900 {
+    block-size: var(--dt-layout-900);
+  }
+  .d-box--bls-1000 {
+    block-size: var(--dt-layout-1000);
+  }
+  .d-box--bls-1100 {
+    block-size: var(--dt-layout-1100);
+  }
+  .d-box--bls-1200 {
+    block-size: var(--dt-layout-1200);
+  }
+  .d-box--bls-1300 {
+    block-size: var(--dt-layout-1300);
+  }
+  .d-box--bls-1400 {
+    block-size: var(--dt-layout-1400);
+  }
+  .d-box--bls-1500 {
+    block-size: var(--dt-layout-1500);
+  }
+  .d-box--bls-1600 {
+    block-size: var(--dt-layout-1600);
+  }
+  .d-box--bls-10-percent {
+    block-size: var(--dt-layout-10-percent);
+  }
+  .d-box--bls-20-percent {
+    block-size: var(--dt-layout-20-percent);
+  }
+  .d-box--bls-25-percent {
+    block-size: var(--dt-layout-25-percent);
+  }
+  .d-box--bls-30-percent {
+    block-size: var(--dt-layout-30-percent);
+  }
+  .d-box--bls-33-percent {
+    block-size: var(--dt-layout-33-percent);
+  }
+  .d-box--bls-40-percent {
+    block-size: var(--dt-layout-40-percent);
+  }
+  .d-box--bls-50-percent {
+    block-size: var(--dt-layout-50-percent);
+  }
+  .d-box--bls-60-percent {
+    block-size: var(--dt-layout-60-percent);
+  }
+  .d-box--bls-66-percent {
+    block-size: var(--dt-layout-66-percent);
+  }
+  .d-box--bls-70-percent {
+    block-size: var(--dt-layout-70-percent);
+  }
+  .d-box--bls-75-percent {
+    block-size: var(--dt-layout-75-percent);
+  }
+  .d-box--bls-80-percent {
+    block-size: var(--dt-layout-80-percent);
+  }
+  .d-box--bls-90-percent {
+    block-size: var(--dt-layout-90-percent);
+  }
+  .d-box--bls-95-percent {
+    block-size: var(--dt-layout-95-percent);
+  }
+  .d-box--bls-100-percent {
+    block-size: var(--dt-layout-100-percent);
+  }
+  .d-box--min-is-25 {
+    min-inline-size: var(--dt-layout-25);
+  }
+  .d-box--min-is-50 {
+    min-inline-size: var(--dt-layout-50);
+  }
+  .d-box--min-is-75 {
+    min-inline-size: var(--dt-layout-75);
+  }
+  .d-box--min-is-0 {
+    min-inline-size: var(--dt-layout-0);
+  }
+  .d-box--min-is-100 {
+    min-inline-size: var(--dt-layout-100);
+  }
+  .d-box--min-is-200 {
+    min-inline-size: var(--dt-layout-200);
+  }
+  .d-box--min-is-300 {
+    min-inline-size: var(--dt-layout-300);
+  }
+  .d-box--min-is-400 {
+    min-inline-size: var(--dt-layout-400);
+  }
+  .d-box--min-is-500 {
+    min-inline-size: var(--dt-layout-500);
+  }
+  .d-box--min-is-600 {
+    min-inline-size: var(--dt-layout-600);
+  }
+  .d-box--min-is-700 {
+    min-inline-size: var(--dt-layout-700);
+  }
+  .d-box--min-is-800 {
+    min-inline-size: var(--dt-layout-800);
+  }
+  .d-box--min-is-900 {
+    min-inline-size: var(--dt-layout-900);
+  }
+  .d-box--min-is-1000 {
+    min-inline-size: var(--dt-layout-1000);
+  }
+  .d-box--min-is-1100 {
+    min-inline-size: var(--dt-layout-1100);
+  }
+  .d-box--min-is-1200 {
+    min-inline-size: var(--dt-layout-1200);
+  }
+  .d-box--min-is-1300 {
+    min-inline-size: var(--dt-layout-1300);
+  }
+  .d-box--min-is-1400 {
+    min-inline-size: var(--dt-layout-1400);
+  }
+  .d-box--min-is-1500 {
+    min-inline-size: var(--dt-layout-1500);
+  }
+  .d-box--min-is-1600 {
+    min-inline-size: var(--dt-layout-1600);
+  }
+  .d-box--min-is-10-percent {
+    min-inline-size: var(--dt-layout-10-percent);
+  }
+  .d-box--min-is-20-percent {
+    min-inline-size: var(--dt-layout-20-percent);
+  }
+  .d-box--min-is-25-percent {
+    min-inline-size: var(--dt-layout-25-percent);
+  }
+  .d-box--min-is-30-percent {
+    min-inline-size: var(--dt-layout-30-percent);
+  }
+  .d-box--min-is-33-percent {
+    min-inline-size: var(--dt-layout-33-percent);
+  }
+  .d-box--min-is-40-percent {
+    min-inline-size: var(--dt-layout-40-percent);
+  }
+  .d-box--min-is-50-percent {
+    min-inline-size: var(--dt-layout-50-percent);
+  }
+  .d-box--min-is-60-percent {
+    min-inline-size: var(--dt-layout-60-percent);
+  }
+  .d-box--min-is-66-percent {
+    min-inline-size: var(--dt-layout-66-percent);
+  }
+  .d-box--min-is-70-percent {
+    min-inline-size: var(--dt-layout-70-percent);
+  }
+  .d-box--min-is-75-percent {
+    min-inline-size: var(--dt-layout-75-percent);
+  }
+  .d-box--min-is-80-percent {
+    min-inline-size: var(--dt-layout-80-percent);
+  }
+  .d-box--min-is-90-percent {
+    min-inline-size: var(--dt-layout-90-percent);
+  }
+  .d-box--min-is-95-percent {
+    min-inline-size: var(--dt-layout-95-percent);
+  }
+  .d-box--min-is-100-percent {
+    min-inline-size: var(--dt-layout-100-percent);
+  }
+  .d-box--max-is-25 {
+    max-inline-size: var(--dt-layout-25);
+  }
+  .d-box--max-is-50 {
+    max-inline-size: var(--dt-layout-50);
+  }
+  .d-box--max-is-75 {
+    max-inline-size: var(--dt-layout-75);
+  }
+  .d-box--max-is-0 {
+    max-inline-size: var(--dt-layout-0);
+  }
+  .d-box--max-is-100 {
+    max-inline-size: var(--dt-layout-100);
+  }
+  .d-box--max-is-200 {
+    max-inline-size: var(--dt-layout-200);
+  }
+  .d-box--max-is-300 {
+    max-inline-size: var(--dt-layout-300);
+  }
+  .d-box--max-is-400 {
+    max-inline-size: var(--dt-layout-400);
+  }
+  .d-box--max-is-500 {
+    max-inline-size: var(--dt-layout-500);
+  }
+  .d-box--max-is-600 {
+    max-inline-size: var(--dt-layout-600);
+  }
+  .d-box--max-is-700 {
+    max-inline-size: var(--dt-layout-700);
+  }
+  .d-box--max-is-800 {
+    max-inline-size: var(--dt-layout-800);
+  }
+  .d-box--max-is-900 {
+    max-inline-size: var(--dt-layout-900);
+  }
+  .d-box--max-is-1000 {
+    max-inline-size: var(--dt-layout-1000);
+  }
+  .d-box--max-is-1100 {
+    max-inline-size: var(--dt-layout-1100);
+  }
+  .d-box--max-is-1200 {
+    max-inline-size: var(--dt-layout-1200);
+  }
+  .d-box--max-is-1300 {
+    max-inline-size: var(--dt-layout-1300);
+  }
+  .d-box--max-is-1400 {
+    max-inline-size: var(--dt-layout-1400);
+  }
+  .d-box--max-is-1500 {
+    max-inline-size: var(--dt-layout-1500);
+  }
+  .d-box--max-is-1600 {
+    max-inline-size: var(--dt-layout-1600);
+  }
+  .d-box--max-is-10-percent {
+    max-inline-size: var(--dt-layout-10-percent);
+  }
+  .d-box--max-is-20-percent {
+    max-inline-size: var(--dt-layout-20-percent);
+  }
+  .d-box--max-is-25-percent {
+    max-inline-size: var(--dt-layout-25-percent);
+  }
+  .d-box--max-is-30-percent {
+    max-inline-size: var(--dt-layout-30-percent);
+  }
+  .d-box--max-is-33-percent {
+    max-inline-size: var(--dt-layout-33-percent);
+  }
+  .d-box--max-is-40-percent {
+    max-inline-size: var(--dt-layout-40-percent);
+  }
+  .d-box--max-is-50-percent {
+    max-inline-size: var(--dt-layout-50-percent);
+  }
+  .d-box--max-is-60-percent {
+    max-inline-size: var(--dt-layout-60-percent);
+  }
+  .d-box--max-is-66-percent {
+    max-inline-size: var(--dt-layout-66-percent);
+  }
+  .d-box--max-is-70-percent {
+    max-inline-size: var(--dt-layout-70-percent);
+  }
+  .d-box--max-is-75-percent {
+    max-inline-size: var(--dt-layout-75-percent);
+  }
+  .d-box--max-is-80-percent {
+    max-inline-size: var(--dt-layout-80-percent);
+  }
+  .d-box--max-is-90-percent {
+    max-inline-size: var(--dt-layout-90-percent);
+  }
+  .d-box--max-is-95-percent {
+    max-inline-size: var(--dt-layout-95-percent);
+  }
+  .d-box--max-is-100-percent {
+    max-inline-size: var(--dt-layout-100-percent);
+  }
+  .d-box--min-bls-25 {
+    min-block-size: var(--dt-layout-25);
+  }
+  .d-box--min-bls-50 {
+    min-block-size: var(--dt-layout-50);
+  }
+  .d-box--min-bls-75 {
+    min-block-size: var(--dt-layout-75);
+  }
+  .d-box--min-bls-0 {
+    min-block-size: var(--dt-layout-0);
+  }
+  .d-box--min-bls-100 {
+    min-block-size: var(--dt-layout-100);
+  }
+  .d-box--min-bls-200 {
+    min-block-size: var(--dt-layout-200);
+  }
+  .d-box--min-bls-300 {
+    min-block-size: var(--dt-layout-300);
+  }
+  .d-box--min-bls-400 {
+    min-block-size: var(--dt-layout-400);
+  }
+  .d-box--min-bls-500 {
+    min-block-size: var(--dt-layout-500);
+  }
+  .d-box--min-bls-600 {
+    min-block-size: var(--dt-layout-600);
+  }
+  .d-box--min-bls-700 {
+    min-block-size: var(--dt-layout-700);
+  }
+  .d-box--min-bls-800 {
+    min-block-size: var(--dt-layout-800);
+  }
+  .d-box--min-bls-900 {
+    min-block-size: var(--dt-layout-900);
+  }
+  .d-box--min-bls-1000 {
+    min-block-size: var(--dt-layout-1000);
+  }
+  .d-box--min-bls-1100 {
+    min-block-size: var(--dt-layout-1100);
+  }
+  .d-box--min-bls-1200 {
+    min-block-size: var(--dt-layout-1200);
+  }
+  .d-box--min-bls-1300 {
+    min-block-size: var(--dt-layout-1300);
+  }
+  .d-box--min-bls-1400 {
+    min-block-size: var(--dt-layout-1400);
+  }
+  .d-box--min-bls-1500 {
+    min-block-size: var(--dt-layout-1500);
+  }
+  .d-box--min-bls-1600 {
+    min-block-size: var(--dt-layout-1600);
+  }
+  .d-box--min-bls-10-percent {
+    min-block-size: var(--dt-layout-10-percent);
+  }
+  .d-box--min-bls-20-percent {
+    min-block-size: var(--dt-layout-20-percent);
+  }
+  .d-box--min-bls-25-percent {
+    min-block-size: var(--dt-layout-25-percent);
+  }
+  .d-box--min-bls-30-percent {
+    min-block-size: var(--dt-layout-30-percent);
+  }
+  .d-box--min-bls-33-percent {
+    min-block-size: var(--dt-layout-33-percent);
+  }
+  .d-box--min-bls-40-percent {
+    min-block-size: var(--dt-layout-40-percent);
+  }
+  .d-box--min-bls-50-percent {
+    min-block-size: var(--dt-layout-50-percent);
+  }
+  .d-box--min-bls-60-percent {
+    min-block-size: var(--dt-layout-60-percent);
+  }
+  .d-box--min-bls-66-percent {
+    min-block-size: var(--dt-layout-66-percent);
+  }
+  .d-box--min-bls-70-percent {
+    min-block-size: var(--dt-layout-70-percent);
+  }
+  .d-box--min-bls-75-percent {
+    min-block-size: var(--dt-layout-75-percent);
+  }
+  .d-box--min-bls-80-percent {
+    min-block-size: var(--dt-layout-80-percent);
+  }
+  .d-box--min-bls-90-percent {
+    min-block-size: var(--dt-layout-90-percent);
+  }
+  .d-box--min-bls-95-percent {
+    min-block-size: var(--dt-layout-95-percent);
+  }
+  .d-box--min-bls-100-percent {
+    min-block-size: var(--dt-layout-100-percent);
+  }
+  .d-box--max-bls-25 {
+    max-block-size: var(--dt-layout-25);
+  }
+  .d-box--max-bls-50 {
+    max-block-size: var(--dt-layout-50);
+  }
+  .d-box--max-bls-75 {
+    max-block-size: var(--dt-layout-75);
+  }
+  .d-box--max-bls-0 {
+    max-block-size: var(--dt-layout-0);
+  }
+  .d-box--max-bls-100 {
+    max-block-size: var(--dt-layout-100);
+  }
+  .d-box--max-bls-200 {
+    max-block-size: var(--dt-layout-200);
+  }
+  .d-box--max-bls-300 {
+    max-block-size: var(--dt-layout-300);
+  }
+  .d-box--max-bls-400 {
+    max-block-size: var(--dt-layout-400);
+  }
+  .d-box--max-bls-500 {
+    max-block-size: var(--dt-layout-500);
+  }
+  .d-box--max-bls-600 {
+    max-block-size: var(--dt-layout-600);
+  }
+  .d-box--max-bls-700 {
+    max-block-size: var(--dt-layout-700);
+  }
+  .d-box--max-bls-800 {
+    max-block-size: var(--dt-layout-800);
+  }
+  .d-box--max-bls-900 {
+    max-block-size: var(--dt-layout-900);
+  }
+  .d-box--max-bls-1000 {
+    max-block-size: var(--dt-layout-1000);
+  }
+  .d-box--max-bls-1100 {
+    max-block-size: var(--dt-layout-1100);
+  }
+  .d-box--max-bls-1200 {
+    max-block-size: var(--dt-layout-1200);
+  }
+  .d-box--max-bls-1300 {
+    max-block-size: var(--dt-layout-1300);
+  }
+  .d-box--max-bls-1400 {
+    max-block-size: var(--dt-layout-1400);
+  }
+  .d-box--max-bls-1500 {
+    max-block-size: var(--dt-layout-1500);
+  }
+  .d-box--max-bls-1600 {
+    max-block-size: var(--dt-layout-1600);
+  }
+  .d-box--max-bls-10-percent {
+    max-block-size: var(--dt-layout-10-percent);
+  }
+  .d-box--max-bls-20-percent {
+    max-block-size: var(--dt-layout-20-percent);
+  }
+  .d-box--max-bls-25-percent {
+    max-block-size: var(--dt-layout-25-percent);
+  }
+  .d-box--max-bls-30-percent {
+    max-block-size: var(--dt-layout-30-percent);
+  }
+  .d-box--max-bls-33-percent {
+    max-block-size: var(--dt-layout-33-percent);
+  }
+  .d-box--max-bls-40-percent {
+    max-block-size: var(--dt-layout-40-percent);
+  }
+  .d-box--max-bls-50-percent {
+    max-block-size: var(--dt-layout-50-percent);
+  }
+  .d-box--max-bls-60-percent {
+    max-block-size: var(--dt-layout-60-percent);
+  }
+  .d-box--max-bls-66-percent {
+    max-block-size: var(--dt-layout-66-percent);
+  }
+  .d-box--max-bls-70-percent {
+    max-block-size: var(--dt-layout-70-percent);
+  }
+  .d-box--max-bls-75-percent {
+    max-block-size: var(--dt-layout-75-percent);
+  }
+  .d-box--max-bls-80-percent {
+    max-block-size: var(--dt-layout-80-percent);
+  }
+  .d-box--max-bls-90-percent {
+    max-block-size: var(--dt-layout-90-percent);
+  }
+  .d-box--max-bls-95-percent {
+    max-block-size: var(--dt-layout-95-percent);
+  }
+  .d-box--max-bls-100-percent {
+    max-block-size: var(--dt-layout-100-percent);
+  }
+  .d-box--of-hidden {
+    --box-of: hidden;
+  }
+  .d-box--of-scroll {
+    --box-of: scroll;
+  }
+  .d-box--of-auto {
+    --box-of: auto;
+  }
+  .d-box--of-clip {
+    --box-of: clip;
+  }
+  .d-box--of-visible {
+    --box-of: visible;
+  }
+  .d-box__scrollbar-content {
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: auto;
+  }
+  .d-box:has(> .d-box__scrollbar-content) {
+    overflow: hidden;
+  }
+}
 @layer dialtone.components {
   .d-stack {
     --stack-gap: 0;
@@ -1461,12 +3059,6 @@
   .d-text--tone-positive-strong {
     --text-tone: var(--dt-color-foreground-positive-strong);
   }
-  .d-text--tone-success {
-    --text-tone: var(--dt-color-foreground-success);
-  }
-  .d-text--tone-success-strong {
-    --text-tone: var(--dt-color-foreground-success-strong);
-  }
   .d-text--tone-warning {
     --text-tone: var(--dt-color-foreground-warning);
   }
@@ -8419,7 +10011,8 @@
   .d-recipe-leftbar-row .d-btn--inverted.d-btn--primary:active:not(:disabled, .d-btn--disabled) {
     --button-color-background: color-mix(in srgb, var(--dt-shell-mention-color-surface-primary) 30%, var(--dt-color-surface-primary) 100%);
   }
-  .d-recipe-leftbar-row .d-fc-success {
+  .d-recipe-leftbar-row .d-fc-success,
+  .d-recipe-leftbar-row .d-fc-positive {
     color: var(--dt-shell-color-foreground-positive) !important;
   }
   .d-recipe-leftbar-row__primary {