@tulipfarm/sprout 0.3.0 → 0.4.0

package/dist/styles/chart.css

@@ -1,30 +1,63 @@
 @layer base {
+  /* Graphics need 3:1 against the surface, so light mode takes darker shades. */
   :root,
   .light {
-    --sprout-chart-1: #188038;
-    --sprout-chart-2: #245cba;
-    --sprout-chart-3: #8a4b08;
-    --sprout-chart-4: #7c4eb0;
-    --sprout-chart-5: #b42332;
+    --sprout-red: #e11d48;
+    --sprout-orange: #ea580c;
+    --sprout-yellow: #c28000;
+    --sprout-green: #16a34a;
+    --sprout-teal: #0d9488;
+    --sprout-sky: #0284c7;
+    --sprout-blue: #2563eb;
+    --sprout-indigo: #4f46e5;
+    --sprout-purple: #9333ea;
+    --sprout-tan: #a37b45;
   }
 
   .dark {
-    --sprout-chart-1: #75ce8e;
-    --sprout-chart-2: #9cbdff;
-    --sprout-chart-3: #edc17c;
-    --sprout-chart-4: #c6a4ed;
-    --sprout-chart-5: #ff929d;
+    --sprout-red: #f0506e;
+    --sprout-orange: #f5a33d;
+    --sprout-yellow: #f5d547;
+    --sprout-green: #62d26f;
+    --sprout-teal: #5cc8d0;
+    --sprout-sky: #5bb4e5;
+    --sprout-blue: #4a8df8;
+    --sprout-indigo: #7b72f0;
+    --sprout-purple: #b46ee8;
+    --sprout-tan: #c4a981;
   }
 
   @media (prefers-color-scheme: dark) {
     :root:not(.light):not(.dark) {
-      --sprout-chart-1: #75ce8e;
-      --sprout-chart-2: #9cbdff;
-      --sprout-chart-3: #edc17c;
-      --sprout-chart-4: #c6a4ed;
-      --sprout-chart-5: #ff929d;
+      --sprout-red: #f0506e;
+      --sprout-orange: #f5a33d;
+      --sprout-yellow: #f5d547;
+      --sprout-green: #62d26f;
+      --sprout-teal: #5cc8d0;
+      --sprout-sky: #5bb4e5;
+      --sprout-blue: #4a8df8;
+      --sprout-indigo: #7b72f0;
+      --sprout-purple: #b46ee8;
+      --sprout-tan: #c4a981;
     }
   }
+
+  /* Ordered so neighbors differ in hue. On .light and .dark too, so a nested
+     theme root resolves to its own hues. */
+  :root,
+  .light,
+  .dark {
+    --sprout-chart-1: var(--sprout-indigo);
+    --sprout-chart-2: var(--sprout-green);
+    --sprout-chart-3: var(--sprout-orange);
+    --sprout-chart-4: var(--sprout-red);
+    --sprout-chart-5: var(--sprout-sky);
+    --sprout-chart-6: var(--sprout-purple);
+    --sprout-chart-7: var(--sprout-yellow);
+    --sprout-chart-8: var(--sprout-teal);
+    --sprout-chart-9: var(--sprout-blue);
+    --sprout-chart-10: var(--sprout-tan);
+  }
 }
 
 @layer components {
@@ -44,23 +77,174 @@
     width: 100cqi;
   }
   .sprout-chart-usage,
-  .sprout-chart-category {
+  .sprout-chart-category,
+  .sprout-chart-trend,
+  .sprout-chart-area,
+  .sprout-chart-combo,
+  .sprout-chart-donut,
+  .sprout-chart-funnel,
+  .sprout-chart-waterfall,
+  .sprout-chart-timeline,
+  .sprout-chart-scatter,
+  .sprout-chart-treemap,
+  .sprout-chart-sankey,
+  .sprout-chart-radar,
+  .sprout-chart-sparkline {
     width: 100%;
     aspect-ratio: auto;
   }
   .sprout-chart-usage {
     height: 16rem;
   }
-  .sprout-chart-category {
+  .sprout-chart-category,
+  .sprout-chart-trend,
+  .sprout-chart-area,
+  .sprout-chart-combo,
+  .sprout-chart-donut,
+  .sprout-chart-waterfall,
+  .sprout-chart-scatter,
+  .sprout-chart-treemap {
     height: 18rem;
   }
+  .sprout-chart-sankey,
+  .sprout-chart-radar {
+    height: 20rem;
+  }
+  .sprout-chart-sparkline {
+    height: 2.5rem;
+  }
+  .sprout-chart-gauge {
+    width: 100%;
+    max-width: 20rem;
+    aspect-ratio: 2 / 1.25;
+    margin-inline: auto;
+  }
+
+  .sprout-chart .recharts-polar-angle-axis-tick-value {
+    fill: var(--sprout-muted);
+  }
+  .sprout-chart-center-value {
+    fill: var(--sprout-text);
+    font-size: 1.5rem;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+  }
+  .sprout-chart-center-label {
+    fill: var(--sprout-muted);
+    font-size: var(--sprout-text-xs);
+  }
+  .sprout-chart-treemap-label {
+    fill: var(--sprout-surface);
+    font-weight: 500;
+    pointer-events: none;
+  }
+  .sprout-chart-treemap-value {
+    font-weight: 400;
+    font-variant-numeric: tabular-nums;
+  }
+  .sprout-chart-sankey-label {
+    fill: var(--sprout-text);
+    font-weight: 500;
+  }
+  .sprout-chart-sankey-value {
+    fill: var(--sprout-muted);
+    font-weight: 400;
+    font-variant-numeric: tabular-nums;
+  }
+  .sprout-chart-sankey-link:hover {
+    stroke-opacity: 0.5;
+  }
+
+  .sprout-chart-heatmap {
+    display: grid;
+    gap: 12px;
+    width: 100%;
+    font-family: var(--sprout-font);
+    font-size: var(--sprout-text-xs);
+    line-height: 1rem;
+    color: var(--sprout-muted);
+  }
+  .sprout-chart-heatmap-scroll {
+    overflow-x: auto;
+  }
+  .sprout-chart-heatmap-table {
+    width: 100%;
+    min-width: calc(var(--sprout-heat-columns) * 1.25rem + 3rem);
+    border-collapse: separate;
+    border-spacing: 3px;
+    table-layout: fixed;
+  }
+  .sprout-chart-heatmap-table th {
+    font-weight: 400;
+    white-space: nowrap;
+  }
+  .sprout-chart-heatmap-table thead th {
+    overflow: hidden;
+    text-overflow: clip;
+    text-align: center;
+  }
+  .sprout-chart-heatmap-table tbody th {
+    width: 3rem;
+    padding-right: 6px;
+    text-align: right;
+  }
+  .sprout-chart-heatmap-table td {
+    position: relative;
+    height: 1.5rem;
+    border-radius: 3px;
+  }
+  .sprout-chart-heatmap-table td[data-tip]:hover {
+    outline: 1.5px solid var(--sprout-text);
+    outline-offset: 1px;
+  }
+  .sprout-chart-heatmap-table td[data-tip]:hover::after {
+    content: attr(data-tip);
+    position: absolute;
+    bottom: calc(100% + 6px);
+    left: 50%;
+    z-index: 1;
+    translate: -50% 0;
+    padding: 6px 10px;
+    border: 1px solid var(--sprout-line);
+    border-radius: var(--sprout-radius-control);
+    background: var(--sprout-surface);
+    color: var(--sprout-text);
+    box-shadow: var(--sprout-shadow-overlay);
+    white-space: nowrap;
+    pointer-events: none;
+  }
+  .sprout-chart-heatmap-scale {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 3px;
+  }
+  .sprout-chart-heatmap-scale > i {
+    width: 12px;
+    height: 12px;
+    border-radius: 2px;
+  }
+  .sprout-chart-heatmap-scale > span:first-child {
+    margin-right: 4px;
+  }
+  .sprout-chart-heatmap-scale > span:last-child {
+    margin-left: 4px;
+  }
+  .sprout-chart-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
 
   .sprout-chart .recharts-cartesian-axis-tick-value {
     fill: var(--sprout-muted);
   }
-  .sprout-chart .recharts-cartesian-grid line[stroke="#ccc"],
-  .sprout-chart .recharts-polar-grid [stroke="#ccc"],
-  .sprout-chart .recharts-reference-line [stroke="#ccc"] {
+  .sprout-chart .recharts-cartesian-grid line[stroke='#ccc'],
+  .sprout-chart .recharts-polar-grid [stroke='#ccc'],
+  .sprout-chart .recharts-reference-line [stroke='#ccc'] {
     stroke: var(--sprout-line);
   }
   .sprout-chart .recharts-curve.recharts-tooltip-cursor {
@@ -72,8 +256,8 @@
   .sprout-chart .recharts-radial-bar-background-sector {
     fill: var(--sprout-secondary);
   }
-  .sprout-chart .recharts-dot[stroke="#fff"],
-  .sprout-chart .recharts-sector[stroke="#fff"] {
+  .sprout-chart .recharts-dot[stroke='#fff'],
+  .sprout-chart .recharts-sector[stroke='#fff'] {
     stroke: transparent;
   }
   .sprout-chart .recharts-layer,
@@ -122,7 +306,7 @@
     gap: 8px;
     width: 100%;
   }
-  .sprout-chart-tooltip[data-indicator="dot"] .sprout-chart-tooltip-item {
+  .sprout-chart-tooltip[data-indicator='dot'] .sprout-chart-tooltip-item {
     align-items: center;
   }
   .sprout-chart-tooltip-item > svg {
@@ -136,22 +320,20 @@
     border: 0 solid var(--sprout-chart-indicator);
     background: var(--sprout-chart-indicator);
   }
-  [data-indicator="dot"] .sprout-chart-tooltip-indicator {
+  [data-indicator='dot'] .sprout-chart-tooltip-indicator {
     width: 10px;
     height: 10px;
   }
-  [data-indicator="line"] .sprout-chart-tooltip-indicator {
+  [data-indicator='line'] .sprout-chart-tooltip-indicator {
     width: 4px;
   }
-  [data-indicator="dashed"] .sprout-chart-tooltip-indicator {
+  [data-indicator='dashed'] .sprout-chart-tooltip-indicator {
     width: 0;
     border-width: 1.5px;
     border-style: dashed;
     background: transparent;
   }
-  [data-indicator="dashed"]
-    .sprout-chart-tooltip-item:has([data-nested])
-    .sprout-chart-tooltip-indicator {
+  [data-indicator='dashed'] .sprout-chart-tooltip-item:has([data-nested]) .sprout-chart-tooltip-indicator {
     margin-block: 2px;
   }
   .sprout-chart-tooltip-row {
@@ -191,7 +373,7 @@
     line-height: 1rem;
     color: var(--sprout-text);
   }
-  .sprout-chart-legend[data-align="top"] {
+  .sprout-chart-legend[data-align='top'] {
     padding-top: 0;
     padding-bottom: 12px;
   }
@@ -217,7 +399,9 @@
       border-color: CanvasText;
     }
     .sprout-chart-tooltip-indicator,
-    .sprout-chart-legend-swatch {
+    .sprout-chart-legend-swatch,
+    .sprout-chart-heatmap-table td,
+    .sprout-chart-heatmap-scale > i {
       forced-color-adjust: none;
     }
     .sprout-chart .recharts-surface:focus-visible {

package/dist/styles/chat-input.css

@@ -48,7 +48,7 @@
     font-weight: 500;
     white-space: nowrap;
   }
-  .sprout-chat-input-reference[data-chat-reference="agent"] {
+  .sprout-chat-input-reference[data-chat-reference='agent'] {
     background: var(--sprout-info-subtle);
     color: var(--sprout-info);
   }
@@ -89,11 +89,10 @@
     background: var(--sprout-line);
   }
 
-  .sprout-chat-input-bar .sprout-input-group-button[data-variant="ghost"] {
+  .sprout-chat-input-bar .sprout-input-group-button[data-variant='ghost'] {
     color: var(--sprout-muted);
   }
-  .sprout-chat-input-bar
-    .sprout-input-group-button[data-variant="ghost"]:hover {
+  .sprout-chat-input-bar .sprout-input-group-button[data-variant='ghost']:hover {
     color: var(--sprout-text);
   }
   .sprout-chat-input-picker-label {
@@ -107,30 +106,16 @@
     color: var(--sprout-text);
   }
 
-  .sprout-chat-input[data-mode-color]
-    .sprout-input-group.sprout-chat-input-box {
+  .sprout-chat-input[data-mode-color] .sprout-input-group.sprout-chat-input-box {
     border-color: var(--sprout-chat-input-mode);
-    box-shadow: 0 0 0 3px
-      color-mix(in oklab, var(--sprout-chat-input-mode) 14%, transparent);
-  }
-  .sprout-chat-input[data-mode-color]
-    .sprout-chat-input-bar
-    .sprout-chat-input-mode {
-    background: color-mix(
-      in oklab,
-      var(--sprout-chat-input-mode) 14%,
-      transparent
-    );
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--sprout-chat-input-mode) 14%, transparent);
+  }
+  .sprout-chat-input[data-mode-color] .sprout-chat-input-bar .sprout-chat-input-mode {
+    background: color-mix(in oklab, var(--sprout-chat-input-mode) 14%, transparent);
     color: var(--sprout-chat-input-mode);
   }
-  .sprout-chat-input[data-mode-color]
-    .sprout-chat-input-bar
-    .sprout-chat-input-mode:hover {
-    background: color-mix(
-      in oklab,
-      var(--sprout-chat-input-mode) 22%,
-      transparent
-    );
+  .sprout-chat-input[data-mode-color] .sprout-chat-input-bar .sprout-chat-input-mode:hover {
+    background: color-mix(in oklab, var(--sprout-chat-input-mode) 22%, transparent);
   }
   .sprout-chat-input-mode-option > :is(svg, .sprout-brand-icon) {
     color: var(--sprout-chat-input-mode);
@@ -139,17 +124,12 @@
   .sprout-dropdown-menu-content.sprout-chat-input-menu {
     width: 18rem;
   }
-  .sprout-chat-input-menu
-    :is(.sprout-dropdown-menu-item, .sprout-command-item):has(
-      .sprout-chat-input-option-text
-    ) {
+  .sprout-chat-input-menu :is(.sprout-dropdown-menu-item, .sprout-command-item):has(.sprout-chat-input-option-text) {
     align-items: flex-start;
     padding-block: 6px;
   }
   .sprout-chat-input-menu
-    :is(.sprout-dropdown-menu-item, .sprout-command-item):has(
-      .sprout-chat-input-option-text
-    )
+    :is(.sprout-dropdown-menu-item, .sprout-command-item):has(.sprout-chat-input-option-text)
     > :is(svg, .sprout-brand-icon) {
     margin-top: 2px;
   }
@@ -171,7 +151,7 @@
     bottom: calc(100% + 8px);
     z-index: 20;
   }
-  .sprout-chat-input-panel[data-side="bottom"] {
+  .sprout-chat-input-panel[data-side='bottom'] {
     top: calc(100% + 8px);
     bottom: auto;
   }
@@ -210,9 +190,7 @@
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    .sprout-chat-input[data-status="streaming"]
-      .sprout-rich-text-editor-content
-      .is-editor-empty:first-child::before {
+    .sprout-chat-input[data-status='streaming'] .sprout-rich-text-editor-content .is-editor-empty:first-child::before {
       animation: sprout-chat-input-pulse 1.6s ease-in-out infinite alternate;
     }
   }
@@ -231,9 +209,7 @@
   }
 
   @media (forced-colors: active) {
-    .sprout-chat-input[data-status="streaming"]
-      .sprout-rich-text-editor-content
-      .is-editor-empty:first-child::before {
+    .sprout-chat-input[data-status='streaming'] .sprout-rich-text-editor-content .is-editor-empty:first-child::before {
       color: GrayText;
     }
   }

package/dist/styles/chat-plan.css

@@ -59,10 +59,10 @@
     height: 20px;
     color: var(--sprout-muted);
   }
-  .sprout-chat-plan-step[data-state="complete"] .sprout-chat-plan-icon {
+  .sprout-chat-plan-step[data-state='complete'] .sprout-chat-plan-icon {
     color: var(--sprout-success);
   }
-  .sprout-chat-plan-step[data-state="error"] .sprout-chat-plan-icon {
+  .sprout-chat-plan-step[data-state='error'] .sprout-chat-plan-icon {
     color: var(--sprout-danger);
   }
   .sprout-chat-plan-text {
@@ -96,8 +96,7 @@
 
   @media (prefers-reduced-motion: no-preference) {
     .sprout-chat-plan-icon {
-      animation: sprout-chat-plan-icon-in var(--sprout-motion-normal, 180ms)
-        var(--sprout-motion-ease, ease-out);
+      animation: sprout-chat-plan-icon-in var(--sprout-motion-normal, 180ms) var(--sprout-motion-ease, ease-out);
     }
   }
   @keyframes sprout-chat-plan-icon-in {

package/dist/styles/chat-sources.css

@@ -177,15 +177,12 @@
   @media (prefers-reduced-motion: no-preference) {
     .sprout-chat-sources .sprout-chat-sources-trigger,
     .sprout-chat-sources-link {
-      transition: color var(--sprout-motion-fast, 120ms)
-        var(--sprout-motion-ease, ease-out);
+      transition: color var(--sprout-motion-fast, 120ms) var(--sprout-motion-ease, ease-out);
     }
     .sprout-chat-sources-citation.sprout-button {
       transition:
-        color var(--sprout-motion-fast, 120ms)
-          var(--sprout-motion-ease, ease-out),
-        background-color var(--sprout-motion-fast, 120ms)
-          var(--sprout-motion-ease, ease-out);
+        color var(--sprout-motion-fast, 120ms) var(--sprout-motion-ease, ease-out),
+        background-color var(--sprout-motion-fast, 120ms) var(--sprout-motion-ease, ease-out);
     }
   }
 }

package/dist/styles/checkbox.css

@@ -22,16 +22,12 @@
   }
   /* A 40 x 32px hit area around the 16px box. */
   .sprout-checkbox::after {
-    content: "";
+    content: '';
     position: absolute;
     inset: -8px -12px;
   }
   @media (hover: hover) {
-    .sprout-checkbox:not(
-        [data-disabled],
-        [data-checked],
-        [data-indeterminate]
-      ):hover {
+    .sprout-checkbox:not([data-disabled], [data-checked], [data-indeterminate]):hover {
       border-color: var(--sprout-border-strong);
     }
   }
@@ -49,15 +45,11 @@
     background-color: var(--sprout-text);
     color: var(--sprout-surface);
   }
-  .sprout-checkbox[aria-invalid="true"]:not(
-      [data-checked],
-      [data-indeterminate]
-    ) {
+  .sprout-checkbox[aria-invalid='true']:not([data-checked], [data-indeterminate]) {
     border-color: var(--sprout-danger);
-    box-shadow: 0 0 0 3px
-      color-mix(in oklab, var(--sprout-danger) 20%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--sprout-danger) 20%, transparent);
   }
-  .sprout-checkbox[aria-invalid="true"]:focus-visible {
+  .sprout-checkbox[aria-invalid='true']:focus-visible {
     outline-color: var(--sprout-danger);
   }
   .sprout-checkbox[data-readonly] {
@@ -82,21 +74,15 @@
   @media (prefers-reduced-motion: no-preference) {
     .sprout-checkbox {
       transition:
-        background-color var(--sprout-motion-fast, 120ms)
-          var(--sprout-motion-ease, ease-out),
-        border-color var(--sprout-motion-fast, 120ms)
-          var(--sprout-motion-ease, ease-out),
-        box-shadow var(--sprout-motion-fast, 120ms)
-          var(--sprout-motion-ease, ease-out),
-        opacity var(--sprout-motion-fast, 120ms)
-          var(--sprout-motion-ease, ease-out);
+        background-color var(--sprout-motion-fast, 120ms) var(--sprout-motion-ease, ease-out),
+        border-color var(--sprout-motion-fast, 120ms) var(--sprout-motion-ease, ease-out),
+        box-shadow var(--sprout-motion-fast, 120ms) var(--sprout-motion-ease, ease-out),
+        opacity var(--sprout-motion-fast, 120ms) var(--sprout-motion-ease, ease-out);
     }
     .sprout-checkbox-indicator {
       transition:
-        opacity var(--sprout-motion-fast, 120ms)
-          var(--sprout-motion-ease, ease-out),
-        transform var(--sprout-motion-fast, 120ms)
-          var(--sprout-motion-ease, ease-out);
+        opacity var(--sprout-motion-fast, 120ms) var(--sprout-motion-ease, ease-out),
+        transform var(--sprout-motion-fast, 120ms) var(--sprout-motion-ease, ease-out);
     }
     .sprout-checkbox-indicator[data-starting-style],
     .sprout-checkbox-indicator[data-ending-style] {

package/dist/styles/choice-list.css

@@ -126,8 +126,7 @@
     width: 13px;
     height: 13px;
   }
-  :is(.sprout-choice-list-option, .sprout-choice-list-text)[data-checked]
-    .sprout-choice-list-mark {
+  :is(.sprout-choice-list-option, .sprout-choice-list-text)[data-checked] .sprout-choice-list-mark {
     border-color: var(--sprout-focus);
     background: var(--sprout-primary-subtle);
   }
@@ -186,32 +185,28 @@
   }
 
   /* Compact: numbered rows in a short scrolling list, for chat questions. */
-  .sprout-choice-list[data-layout="compact"] .sprout-choice-list-options {
+  .sprout-choice-list[data-layout='compact'] .sprout-choice-list-options {
     gap: 0;
     max-height: max(76px, min(224px, calc(34dvh - 96px)));
     overflow-y: auto;
     overscroll-behavior: contain;
     padding: 2px;
   }
-  .sprout-choice-list[data-layout="compact"] .sprout-choice-list-option {
+  .sprout-choice-list[data-layout='compact'] .sprout-choice-list-option {
     width: 100%;
     min-height: 36px;
     padding: 4px 8px;
     border-color: transparent;
     border-radius: var(--sprout-radius-control);
   }
-  .sprout-choice-list[data-layout="compact"]
-    .sprout-choice-list-option[data-checked] {
+  .sprout-choice-list[data-layout='compact'] .sprout-choice-list-option[data-checked] {
     border-color: var(--sprout-focus);
   }
-  .sprout-choice-list[data-layout="compact"]
-    .sprout-choice-list-option[data-disabled][data-checked] {
+  .sprout-choice-list[data-layout='compact'] .sprout-choice-list-option[data-disabled][data-checked] {
     border-color: var(--sprout-input);
   }
-  .sprout-choice-list[data-layout="compact"]
-    .sprout-choice-list-option
-    + .sprout-choice-list-option::before {
-    content: "";
+  .sprout-choice-list[data-layout='compact'] .sprout-choice-list-option + .sprout-choice-list-option::before {
+    content: '';
     position: absolute;
     top: -1px;
     right: 8px;
@@ -219,16 +214,13 @@
     height: 1px;
     background: color-mix(in oklab, var(--sprout-text) 8%, transparent);
   }
-  .sprout-choice-list[data-layout="compact"]
-    .sprout-choice-list-option[data-checked]::before,
-  .sprout-choice-list[data-layout="compact"]
+  .sprout-choice-list[data-layout='compact'] .sprout-choice-list-option[data-checked]::before,
+  .sprout-choice-list[data-layout='compact']
     .sprout-choice-list-option[data-checked]
     + .sprout-choice-list-option::before {
     visibility: hidden;
   }
-  .sprout-choice-list[data-layout="compact"]
-    .sprout-choice-list-option
-    .sprout-choice-list-mark {
+  .sprout-choice-list[data-layout='compact'] .sprout-choice-list-option .sprout-choice-list-mark {
     width: 24px;
     height: 24px;
     border: 0;
@@ -239,17 +231,15 @@
     font-variant-numeric: tabular-nums;
     color: var(--sprout-muted);
   }
-  .sprout-choice-list[data-layout="compact"]
-    .sprout-choice-list-option[data-checked]
-    .sprout-choice-list-mark {
+  .sprout-choice-list[data-layout='compact'] .sprout-choice-list-option[data-checked] .sprout-choice-list-mark {
     background: var(--sprout-primary-subtle);
     color: var(--sprout-primary);
   }
   @media (any-pointer: coarse) {
-    .sprout-choice-list[data-layout="compact"] .sprout-choice-list-options {
+    .sprout-choice-list[data-layout='compact'] .sprout-choice-list-options {
       max-height: max(94px, min(224px, calc(40dvh - 128px)));
     }
-    .sprout-choice-list[data-layout="compact"] .sprout-choice-list-option {
+    .sprout-choice-list[data-layout='compact'] .sprout-choice-list-option {
       min-height: 44px;
     }
   }
@@ -309,17 +299,13 @@
     .sprout-choice-list-text,
     .sprout-choice-list-mark {
       transition:
-        background-color var(--sprout-motion-normal, 180ms)
-          var(--sprout-motion-ease, ease-out),
-        border-color var(--sprout-motion-normal, 180ms)
-          var(--sprout-motion-ease, ease-out),
-        color var(--sprout-motion-fast, 120ms)
-          var(--sprout-motion-ease, ease-out);
+        background-color var(--sprout-motion-normal, 180ms) var(--sprout-motion-ease, ease-out),
+        border-color var(--sprout-motion-normal, 180ms) var(--sprout-motion-ease, ease-out),
+        color var(--sprout-motion-fast, 120ms) var(--sprout-motion-ease, ease-out);
     }
     .sprout-choice-list-mark svg,
     .sprout-choice-summary-check {
-      animation: sprout-choice-pop var(--sprout-motion-normal, 150ms) ease-out
-        both;
+      animation: sprout-choice-pop var(--sprout-motion-normal, 150ms) ease-out both;
     }
   }
   @keyframes sprout-choice-pop {