@mastra/playground-ui 51.1.0 → 51.2.0-alpha.1

package/dist/src/ds/components/DataList/shared.d.ts

@@ -3,13 +3,25 @@
  * chain — applied to `DataList.RowButton` / `DataList.RowLink` when used
  * standalone, and to `DataList.RowWrapper` when used as a shell around them.
  *
- * Contains the `.data-list-row` marker class (used by the sibling-aware
- * separator rules), the full-width separator treatment, and rounded corners.
+ * Carries the `.data-list-row` marker class the root styles target.
  */
-export declare const dataListRowOuterStyles: readonly ["data-list-row col-span-full relative mt-[3px] mb-1", "after:absolute after:inset-x-[-0.25rem] after:bottom-[-0.25rem] after:h-px after:bg-border1 after:content-[\"\"] after:pointer-events-none", "[&:has(+.data-list-subheader)]:after:hidden [&:not(:has(~.data-list-row))]:after:hidden", "transition-colors duration-200 rounded-lg"];
-export declare const dataListRowInteractiveStyles: readonly ["grid grid-cols-subgrid gap-8 px-5 outline-none cursor-pointer", "hover:bg-surface4 focus-visible:bg-surface4 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-accent1", "transition-colors duration-200 rounded-lg"];
-export declare const dataListRowStyles: readonly ["mx-1", "grid grid-cols-subgrid gap-8 px-5 outline-none cursor-pointer", "hover:bg-surface4 focus-visible:bg-surface4 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-accent1", "transition-colors duration-200 rounded-lg", "data-list-row col-span-full relative mt-[3px] mb-1", "after:absolute after:inset-x-[-0.25rem] after:bottom-[-0.25rem] after:h-px after:bg-border1 after:content-[\"\"] after:pointer-events-none", "[&:has(+.data-list-subheader)]:after:hidden [&:not(:has(~.data-list-row))]:after:hidden", "transition-colors duration-200 rounded-lg"];
-export declare const dataListRowStaticStyles: readonly ["mx-1 grid grid-cols-subgrid gap-8 px-5", "data-list-row col-span-full relative mt-[3px] mb-1", "after:absolute after:inset-x-[-0.25rem] after:bottom-[-0.25rem] after:h-px after:bg-border1 after:content-[\"\"] after:pointer-events-none", "[&:has(+.data-list-subheader)]:after:hidden [&:not(:has(~.data-list-row))]:after:hidden", "transition-colors duration-200 rounded-lg"];
+export declare const dataListRowOuterStyles: readonly ["group/data-list-row data-list-row col-span-full relative min-h-9", "transition-colors duration-200 rounded-lg"];
+/**
+ * Layout + focus ring only. The root paints the hover/focus fill on
+ * `.data-list-row`, so a wrapped row and its button never show two tints.
+ */
+export declare const dataListRowInteractiveStyles: readonly ["grid grid-cols-subgrid gap-8 px-5 outline-none cursor-pointer", "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-accent1", "transition-colors duration-200 rounded-lg"];
+export declare const dataListRowStyles: readonly ["grid grid-cols-subgrid gap-8 px-5 outline-none cursor-pointer", "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-accent1", "transition-colors duration-200 rounded-lg", "group/data-list-row data-list-row col-span-full relative min-h-9", "transition-colors duration-200 rounded-lg"];
+export declare const dataListRowStaticStyles: readonly ["grid grid-cols-subgrid gap-8 px-5", "group/data-list-row data-list-row col-span-full relative min-h-9", "transition-colors duration-200 rounded-lg"];
+/**
+ * Row controls that stay out of the way until the row is hovered or focused.
+ * Opacity, not display, so the column keeps its width and nothing shifts. A
+ * coarse pointer never hovers, so there they stay visible — hidden controls
+ * that still take taps would be worse than no reveal at all.
+ */
+export declare const dataListRowRevealStyles = "opacity-0 pointer-coarse:opacity-100 group-focus-within/data-list-row:opacity-100 group-hover/data-list-row:opacity-100";
+/** Header counterpart of {@link dataListRowRevealStyles}. */
+export declare const dataListTopRevealStyles = "opacity-0 pointer-coarse:opacity-100 group-focus-within/data-list-top:opacity-100 group-hover/data-list-top:opacity-100";
 export type DataListSticky = 'start';
 export declare const dataListStickyStartStyles: readonly ["data-list-sticky-start sticky left-0 z-10 isolate self-stretch overflow-visible", "after:absolute after:-right-4 after:top-1/2 after:-translate-y-1/2 after:h-4 after:w-px after:bg-border2 after:content-[\"\"] after:pointer-events-none"];
 /** Tone for a single row. `error` lays a subtle, theme-aware destructive tint
@@ -30,18 +42,6 @@ export declare const dataListRowVariants: (props?: ({
 export type DataListRowSharedProps = {
     /** Row tone — `error` applies a subtle destructive background tint. */
     variant?: DataListRowVariant;
-    /**
-     * Drop the row's default left margin. Use when the row is wrapped in a
-     * `DataList.RowWrapper` that owns the leading inset (e.g. for selection rows where
-     * the checkbox cell sits on the left).
-     */
-    flushLeft?: boolean;
-    /**
-     * Drop the row's default right margin. Use when the row is wrapped in a
-     * `DataList.RowWrapper` that owns the trailing inset (e.g. for rows with a
-     * trailing actions cell on the right).
-     */
-    flushRight?: boolean;
     /**
      * Place the row starting at this column line. Defaults to column 1. Use
      * when the row sits beside a leading cell that owns column 1.

package/dist/src/ds/components/MetricsKpiCard/metrics-kpi-card-value.d.ts

@@ -1,4 +1,5 @@
+import { ReactNode } from 'react';
 export declare function MetricsKpiCardValue({ children, className }: {
-    children: string;
+    children: ReactNode;
     className?: string;
 }): import("react").JSX.Element;

package/dist/src/ds/components/SettingsRow/settings-row.d.ts

@@ -1,9 +1,14 @@
+import { VariantProps } from 'class-variance-authority';
 import { ReactNode } from 'react';
+declare const settingsRowVariants: (props?: ({
+    variant?: "default" | "factory" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type SettingsRowProps = {
     label: ReactNode;
     description?: ReactNode;
     htmlFor?: string;
     className?: string;
-    children: ReactNode;
-};
-export declare function SettingsRow({ label, description, htmlFor, className, children }: SettingsRowProps): import("react").JSX.Element;
+    children?: ReactNode;
+} & VariantProps<typeof settingsRowVariants>;
+export declare function SettingsRow({ label, description, htmlFor, variant, className, children }: SettingsRowProps): import("react").JSX.Element;
+export {};

package/dist/src/ds/components/SettingsRow/settings-row.stories.d.ts

@@ -7,3 +7,4 @@ export declare const WithSelect: Story;
 export declare const WithDescription: Story;
 export declare const ActionRow: Story;
 export declare const Stacked: Story;
+export declare const FactoryVariant: Story;

package/dist/style.css

@@ -310,6 +310,7 @@
     --color-border2: var(--border2);
     --color-surface-overlay-soft: var(--surface-overlay-soft);
     --color-surface-overlay-strong: var(--surface-overlay-strong);
+    --color-surface-row-featured: var(--surface-row-featured);
     --color-warning1: var(--warning1);
     --color-positive1: var(--positive1);
     --color-negative1: var(--negative1);
@@ -1023,10 +1024,6 @@
     margin-inline: calc(var(--spacing-1) * -1);
   }
 
-  .mx-1 {
-    margin-inline: var(--spacing-1);
-  }
-
   .mx-1\.5 {
     margin-inline: var(--spacing-1_5);
   }
@@ -1600,10 +1597,6 @@
     margin-top: var(--spacing-14);
   }
 
-  .mt-\[3px\] {
-    margin-top: 3px;
-  }
-
   .mt-\[6vh\] {
     margin-top: 6vh;
   }
@@ -1620,10 +1613,6 @@
     margin-right: var(--spacing-0);
   }
 
-  .mr-0\! {
-    margin-right: var(--spacing-0) !important;
-  }
-
   .mr-2 {
     margin-right: var(--spacing-2);
   }
@@ -1697,10 +1686,6 @@
     margin-left: var(--spacing-0);
   }
 
-  .ml-0\! {
-    margin-left: var(--spacing-0) !important;
-  }
-
   .ml-0\.5 {
     margin-left: var(--spacing-0_5);
   }
@@ -3564,6 +3549,10 @@
     border-radius: 22px;
   }
 
+  .rounded-\[23px\] {
+    border-radius: 23px;
+  }
+
   .rounded-\[inherit\] {
     border-radius: inherit;
   }
@@ -3634,10 +3623,6 @@
     border-bottom-left-radius: var(--radius-xl);
   }
 
-  .rounded-tl-xl {
-    border-top-left-radius: var(--radius-xl);
-  }
-
   .rounded-r {
     border-top-right-radius: .25rem;
     border-bottom-right-radius: .25rem;
@@ -3653,11 +3638,6 @@
     border-bottom-right-radius: var(--radius-xl);
   }
 
-  .rounded-b-md {
-    border-bottom-right-radius: var(--radius-md);
-    border-bottom-left-radius: var(--radius-md);
-  }
-
   .rounded-b-xl {
     border-bottom-right-radius: var(--radius-xl);
     border-bottom-left-radius: var(--radius-xl);
@@ -3667,10 +3647,6 @@
     border-bottom-left-radius: var(--radius-lg);
   }
 
-  .rounded-bl-md {
-    border-bottom-left-radius: var(--radius-md);
-  }
-
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -4012,14 +3988,6 @@
     border-top-color: var(--color-border1);
   }
 
-  .border-t-transparent {
-    border-top-color: #0000;
-  }
-
-  .border-b-border1 {
-    border-bottom-color: var(--color-border1);
-  }
-
   .border-l-accent1 {
     border-left-color: var(--color-accent1);
   }
@@ -4562,6 +4530,10 @@
     background-color: var(--color-surface-overlay-soft);
   }
 
+  .bg-surface-row-featured\! {
+    background-color: var(--color-surface-row-featured) !important;
+  }
+
   .bg-surface1, .bg-surface1\/40 {
     background-color: var(--color-surface1);
   }
@@ -4622,15 +4594,7 @@
     }
   }
 
-  .bg-surface4 {
-    background-color: var(--color-surface4);
-  }
-
-  .bg-surface4\! {
-    background-color: var(--color-surface4) !important;
-  }
-
-  .bg-surface4\/40 {
+  .bg-surface4, .bg-surface4\/40 {
     background-color: var(--color-surface4);
   }
 
@@ -5456,6 +5420,11 @@
     line-height: var(--leading-ui-xs);
   }
 
+  .font-\[450\] {
+    --tw-font-weight: 450;
+    font-weight: 450;
+  }
+
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
@@ -6483,7 +6452,7 @@
     display: block;
   }
 
-  .group-focus-within\:opacity-100:is(:where(.group):focus-within *) {
+  .group-focus-within\:opacity-100:is(:where(.group):focus-within *), .group-focus-within\/comment-item\:opacity-100:is(:where(.group\/comment-item):focus-within *), .group-focus-within\/data-list-row\:opacity-100:is(:where(.group\/data-list-row):focus-within *), .group-focus-within\/data-list-top\:opacity-100:is(:where(.group\/data-list-top):focus-within *) {
     opacity: 1;
   }
 
@@ -6496,7 +6465,7 @@
       color: var(--color-neutral6);
     }
 
-    .group-hover\:opacity-100:is(:where(.group):hover *), .group-hover\/block\:opacity-100:is(:where(.group\/block):hover *) {
+    .group-hover\:opacity-100:is(:where(.group):hover *), .group-hover\/block\:opacity-100:is(:where(.group\/block):hover *), .group-hover\/comment-item\:opacity-100:is(:where(.group\/comment-item):hover *), .group-hover\/data-list-row\:opacity-100:is(:where(.group\/data-list-row):hover *), .group-hover\/data-list-top\:opacity-100:is(:where(.group\/data-list-top):hover *) {
       opacity: 1;
     }
 
@@ -7015,11 +6984,6 @@
     inset-block: var(--spacing-0);
   }
 
-  .before\:inset-y-1:before {
-    content: var(--tw-content);
-    inset-block: var(--spacing-1);
-  }
-
   .before\:-top-\(--chat-fade\):before {
     content: var(--tw-content);
     top: calc(var(--chat-fade) * -1);
@@ -7077,9 +7041,9 @@
     animation: 2s infinite shimmer;
   }
 
-  .before\:rounded-md:before {
+  .before\:rounded-lg:before {
     content: var(--tw-content);
-    border-radius: var(--radius-md);
+    border-radius: var(--radius-lg);
   }
 
   .before\:border-b-\[1px\]:before {
@@ -7104,14 +7068,14 @@
     background-color: var(--chat-surface);
   }
 
-  .before\:bg-border1:before {
+  .before\:bg-\[var\(--data-list-sticky-header-background\)\]:before {
     content: var(--tw-content);
-    background-color: var(--color-border1);
+    background-color: var(--data-list-sticky-header-background);
   }
 
-  .before\:bg-surface4:before {
+  .before\:bg-border1:before {
     content: var(--tw-content);
-    background-color: var(--color-surface4);
+    background-color: var(--color-border1);
   }
 
   .before\:bg-linear-to-r:before {
@@ -7202,16 +7166,6 @@
     inset: var(--spacing-0);
   }
 
-  .after\:-inset-x-1:after {
-    content: var(--tw-content);
-    inset-inline: calc(var(--spacing-1) * -1);
-  }
-
-  .after\:inset-x-\[-0\.25rem\]:after {
-    content: var(--tw-content);
-    inset-inline: -.25rem;
-  }
-
   .after\:inset-y-0:after {
     content: var(--tw-content);
     inset-block: var(--spacing-0);
@@ -7227,16 +7181,6 @@
     right: calc(var(--spacing-4) * -1);
   }
 
-  .after\:bottom-0:after {
-    content: var(--tw-content);
-    bottom: var(--spacing-0);
-  }
-
-  .after\:bottom-\[-0\.25rem\]:after {
-    content: var(--tw-content);
-    bottom: -.25rem;
-  }
-
   .after\:bottom-\[50\%\]:after {
     content: var(--tw-content);
     bottom: 50%;
@@ -7253,12 +7197,6 @@
     height: var(--spacing-4);
   }
 
-  .after\:h-px:after {
-    content: var(--tw-content);
-    height: 1px;
-    height: var(--spacing-px);
-  }
-
   .after\:w-0:after {
     content: var(--tw-content);
     width: var(--spacing-0);
@@ -7293,11 +7231,6 @@
     border-color: var(--color-neutral3);
   }
 
-  .after\:bg-border1:after {
-    content: var(--tw-content);
-    background-color: var(--color-border1);
-  }
-
   .after\:bg-border2:after {
     content: var(--tw-content);
     background-color: var(--color-border2);
@@ -9041,6 +8974,12 @@
       transition-duration: var(--tw-duration, var(--default-transition-duration));
     }
 
+    .motion-safe\:transition-opacity {
+      transition-property: opacity;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+
     .motion-safe\:duration-150 {
       --tw-duration: .15s;
       transition-duration: .15s;
@@ -9375,6 +9314,10 @@
       display: inline-flex;
     }
 
+    .lg\:w-72 {
+      width: var(--spacing-72);
+    }
+
     .lg\:min-w-sm {
       min-width: var(--container-sm);
     }
@@ -9391,10 +9334,26 @@
       grid-template-columns: 17.5rem 4.5rem 17.5rem 4.5rem minmax(0, 1fr);
     }
 
+    .lg\:flex-row {
+      flex-direction: row;
+    }
+
+    .lg\:items-center {
+      align-items: center;
+    }
+
+    .lg\:justify-between {
+      justify-content: space-between;
+    }
+
     .lg\:gap-0 {
       gap: var(--spacing-0);
     }
 
+    .lg\:gap-4 {
+      gap: var(--spacing-4);
+    }
+
     .lg\:gap-8 {
       gap: var(--spacing-8);
     }
@@ -9596,6 +9555,12 @@
     }
   }
 
+  @media (pointer: coarse) {
+    .pointer-coarse\:opacity-100 {
+      opacity: 1;
+    }
+  }
+
   @media (pointer: fine) {
     .pointer-fine\:opacity-0 {
       opacity: 0;
@@ -9618,64 +9583,8 @@
     flex: 1;
   }
 
-  .\[\&_\.data-list-row\]\:mx-0 .data-list-row {
-    margin-inline: var(--spacing-0);
-  }
-
-  .\[\&_\.data-list-row\]\:my-0 .data-list-row {
-    margin-block: var(--spacing-0);
-  }
-
-  .\[\&_\.data-list-row\]\:rounded-md .data-list-row {
-    border-radius: var(--radius-md);
-  }
-
-  .\[\&_\.data-list-row\]\:after\:pointer-events-none .data-list-row:after {
-    content: var(--tw-content);
-    pointer-events: none;
-  }
-
-  .\[\&_\.data-list-row\]\:after\:absolute .data-list-row:after {
-    content: var(--tw-content);
-    position: absolute;
-  }
-
-  .\[\&_\.data-list-row\]\:after\:inset-x-2 .data-list-row:after {
-    content: var(--tw-content);
-    inset-inline: var(--spacing-2);
-  }
-
-  .\[\&_\.data-list-row\]\:after\:-bottom-px .data-list-row:after {
-    content: var(--tw-content);
-    bottom: -1px;
-    bottom: calc(var(--spacing-px) * -1);
-  }
-
-  .\[\&_\.data-list-row\]\:after\:hidden .data-list-row:after {
-    content: var(--tw-content);
-    display: none;
-  }
-
-  .\[\&_\.data-list-row\]\:after\:h-px .data-list-row:after {
-    content: var(--tw-content);
-    height: 1px;
-    height: var(--spacing-px);
-  }
-
-  .\[\&_\.data-list-row\]\:after\:bg-neutral6\/10 .data-list-row:after {
-    content: var(--tw-content);
-    background-color: var(--color-neutral6);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .\[\&_\.data-list-row\]\:after\:bg-neutral6\/10 .data-list-row:after {
-      background-color: color-mix(in oklab, var(--color-neutral6) 10%, transparent);
-    }
-  }
-
-  .\[\&_\.data-list-row\]\:after\:content-\[\"\"\] .data-list-row:after {
-    --tw-content: "";
-    content: var(--tw-content);
+  .\[\&_\.data-list-row\]\:rounded-lg .data-list-row {
+    border-radius: var(--radius-lg);
   }
 
   .\[\&_\.data-list-row\]\:even\:bg-surface-overlay-soft .data-list-row:nth-child(2n) {
@@ -9688,11 +9597,11 @@
     }
   }
 
-  .\[\&_\.data-list-row\]\:focus-visible\:bg-surface-overlay-strong\! .data-list-row:focus-visible {
+  .\[\&_\.data-list-row\:focus-within\]\:bg-surface-overlay-strong\! .data-list-row:focus-within {
     background-color: var(--color-surface-overlay-strong) !important;
   }
 
-  .\[\&_\.data-list-row\:focus-visible\>\.data-list-sticky-start\]\:bg-\[var\(--data-list-sticky-header-hover-background\)\] .data-list-row:focus-visible > .data-list-sticky-start, .\[\&_\.data-list-row\:focus-within\>\.data-list-sticky-start\]\:bg-\[var\(--data-list-sticky-header-hover-background\)\] .data-list-row:focus-within > .data-list-sticky-start, .\[\&_\.data-list-row\:hover\>\.data-list-sticky-start\]\:bg-\[var\(--data-list-sticky-header-hover-background\)\] .data-list-row:hover > .data-list-sticky-start {
+  .\[\&_\.data-list-row\:focus-within\>\.data-list-sticky-start\]\:bg-\[var\(--data-list-sticky-header-hover-background\)\] .data-list-row:focus-within > .data-list-sticky-start, .\[\&_\.data-list-row\:hover\>\.data-list-sticky-start\]\:bg-\[var\(--data-list-sticky-header-hover-background\)\] .data-list-row:hover > .data-list-sticky-start {
     background-color: var(--data-list-sticky-header-hover-background);
   }
 
@@ -9705,89 +9614,19 @@
     right: var(--spacing-0);
   }
 
-  .\[\&_\.data-list-top\]\:mx-0 .data-list-top {
-    margin-inline: var(--spacing-0);
-  }
-
-  .\[\&_\.data-list-top\]\:rounded-t-xl .data-list-top {
-    border-top-left-radius: var(--radius-xl);
-    border-top-right-radius: var(--radius-xl);
-  }
-
-  .\[\&_\.data-list-top\]\:rounded-b-md .data-list-top {
-    border-bottom-right-radius: var(--radius-md);
-    border-bottom-left-radius: var(--radius-md);
+  .\[\&_\.data-list-top\]\:rounded-lg .data-list-top {
+    border-radius: var(--radius-lg);
   }
 
   .\[\&_\.data-list-top\]\:bg-\[var\(--data-list-sticky-header-background\)\] .data-list-top {
     background-color: var(--data-list-sticky-header-background);
   }
 
-  .\[\&_\.data-list-top\]\:after\:hidden .data-list-top:after {
-    content: var(--tw-content);
-    display: none;
-  }
-
-  .\[\&_\.data-list-top\>\*\:not\(\:first-child\)\]\:relative .data-list-top > :not(:first-child) {
-    position: relative;
-  }
-
-  .\[\&_\.data-list-top\>\*\:not\(\:first-child\)\]\:overflow-visible .data-list-top > :not(:first-child) {
-    overflow: visible;
-  }
-
-  .\[\&_\.data-list-top\>\*\:not\(\:first-child\)\]\:before\:absolute .data-list-top > :not(:first-child):before {
-    content: var(--tw-content);
-    position: absolute;
-  }
-
-  .\[\&_\.data-list-top\>\*\:not\(\:first-child\)\]\:before\:top-1\/2 .data-list-top > :not(:first-child):before {
-    content: var(--tw-content);
-    top: 50%;
-  }
-
-  .\[\&_\.data-list-top\>\*\:not\(\:first-child\)\]\:before\:-left-4 .data-list-top > :not(:first-child):before {
-    content: var(--tw-content);
-    left: calc(var(--spacing-4) * -1);
-  }
-
-  .\[\&_\.data-list-top\>\*\:not\(\:first-child\)\]\:before\:h-4 .data-list-top > :not(:first-child):before {
-    content: var(--tw-content);
-    height: var(--spacing-4);
-  }
-
-  .\[\&_\.data-list-top\>\*\:not\(\:first-child\)\]\:before\:w-px .data-list-top > :not(:first-child):before {
-    content: var(--tw-content);
-    width: 1px;
-    width: var(--spacing-px);
-  }
-
-  .\[\&_\.data-list-top\>\*\:not\(\:first-child\)\]\:before\:-translate-y-1\/2 .data-list-top > :not(:first-child):before {
-    content: var(--tw-content);
-    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-
-  .\[\&_\.data-list-top\>\*\:not\(\:first-child\)\]\:before\:bg-border2 .data-list-top > :not(:first-child):before {
-    content: var(--tw-content);
-    background-color: var(--color-border2);
-  }
-
-  .\[\&_\.data-list-top\>\*\:not\(\:first-child\)\]\:before\:content-\[\"\"\] .data-list-top > :not(:first-child):before {
-    --tw-content: "";
-    content: var(--tw-content);
-  }
-
   .\[\&_\.data-list-top\>\.data-list-sticky-start\]\:after\:right-0 .data-list-top > .data-list-sticky-start:after {
     content: var(--tw-content);
     right: var(--spacing-0);
   }
 
-  .\[\&_\.data-list-top\>\.data-list-sticky-start\+\*\]\:before\:hidden .data-list-top > .data-list-sticky-start + :before {
-    content: var(--tw-content);
-    display: none;
-  }
-
   .\[\&_\.recharts-surface\]\:outline-none .recharts-surface {
     --tw-outline-style: none;
     outline-style: none;
@@ -10150,11 +9989,6 @@
     content: var(--tw-content);
   }
 
-  .\[\&\:has\(\+\.data-list-subheader\)\]\:after\:hidden:has( + .data-list-subheader):after {
-    content: var(--tw-content);
-    display: none;
-  }
-
   .\[\&\:has\(\+\.selected-row\)\]\:rounded-b-none:has( + .selected-row) {
     border-bottom-right-radius: var(--radius-none);
     border-bottom-left-radius: var(--radius-none);
@@ -10321,11 +10155,6 @@
     border-bottom-left-radius: var(--radius-lg);
   }
 
-  .\[\&\:not\(\:has\(\~\.data-list-row\)\)\]\:after\:hidden:not(:has( ~ .data-list-row)):after {
-    content: var(--tw-content);
-    display: none;
-  }
-
   .\[\&\>\*\]\:pointer-events-auto > * {
     pointer-events: auto;
   }
@@ -11104,6 +10933,9 @@
   --border2: oklch(100% 0 0 / .11);
   --surface-overlay-soft: oklch(100% 0 0 / .04);
   --surface-overlay-strong: oklch(100% 0 0 / .07);
+  --surface-header: oklch(15% 0 0);
+  --surface-header-hover: oklch(19% 0 0);
+  --surface-row-featured: oklch(100% 0 0 / .12);
   --shadow-main-frame: 0 14px 48px -36px oklch(0% 0 0 / .85);
   --sidebar-nav-hover: oklch(100% 0 0 / .07);
   --sidebar-nav-active: oklch(100% 0 0 / .11);
@@ -11175,6 +11007,9 @@ html.light {
   --border2: oklch(20.8% 0 0 / .16);
   --surface-overlay-soft: oklch(20.8% 0 0 / .04);
   --surface-overlay-strong: oklch(20.8% 0 0 / .07);
+  --surface-header: oklch(92.6% 0 0);
+  --surface-header-hover: oklch(90% 0 0);
+  --surface-row-featured: oklch(20.8% 0 0 / .11);
   --shadow-main-frame: 0 1px 2px oklch(24% 0 0 / .04), 0 18px 48px -34px oklch(24% 0 0 / .22);
   --sidebar-nav-hover: oklch(20.8% 0 0 / .055);
   --sidebar-nav-active: oklch(20.8% 0 0 / .085);

package/dist/{text-field-block-BGlwSFYC.cjs → text-field-block-B4CvIwKh.cjs}

@@ -30,6 +30,7 @@ function TextFieldBlock({
       /* @__PURE__ */ jsxRuntime.jsx(
         input.Input,
         {
+          id: `input-${name}`,
           name,
           disabled,
           required,
@@ -47,4 +48,4 @@ function TextFieldBlock({
 }
 
 exports.TextFieldBlock = TextFieldBlock;
-//# sourceMappingURL=text-field-block-BGlwSFYC.cjs.map
+//# sourceMappingURL=text-field-block-B4CvIwKh.cjs.map

package/dist/text-field-block-B4CvIwKh.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field-block-B4CvIwKh.cjs","sources":["../src/ds/components/FormFieldBlocks/fields/text-field-block.tsx"],"sourcesContent":["import { Input } from '../../Input';\nimport type { InputProps } from '../../Input';\nimport { FieldBlock } from '../block/field-block';\nimport type { FieldBlockErrorMsgProps } from '../block/field-block-error-msg';\nimport type { FieldBlockHelpTextProps } from '../block/field-block-help-text';\nimport type { FieldBlockLabelProps } from '../block/field-block-label';\nimport type { FieldBlockLayoutProps } from '../block/field-block-layout';\nimport { VisuallyHidden } from '@/ds/primitives/visually-hidden';\n\nexport type TextFieldBlockProps = Pick<FieldBlockLayoutProps, 'layout' | 'labelColumnWidth'> &\n  Omit<InputProps, 'name' | 'size'> & {\n    name: string;\n    labelIsHidden?: boolean;\n    label?: FieldBlockLabelProps['children'];\n    labelSize?: FieldBlockLabelProps['size'];\n    helpText?: FieldBlockHelpTextProps['children'];\n    errorMsg?: FieldBlockErrorMsgProps['children'];\n    size?: InputProps['size'];\n  };\n\nexport function TextFieldBlock({\n  name,\n  value,\n  label,\n  labelIsHidden = false,\n  labelColumnWidth,\n  helpText,\n  errorMsg,\n  required = false,\n  disabled = false,\n  labelSize,\n  layout = 'vertical',\n  placeholder,\n  size = 'default',\n  testId,\n  className,\n  ...props\n}: TextFieldBlockProps) {\n  return (\n    <FieldBlock.Layout layout={layout} labelColumnWidth={labelColumnWidth} className={className}>\n      {layout === 'horizontal' ? (\n        <FieldBlock.Column>\n          <FieldBlock.Label name={name} required={required} size={labelSize || 'bigger'}>\n            {labelIsHidden ? <VisuallyHidden>{label}</VisuallyHidden> : label}\n          </FieldBlock.Label>\n        </FieldBlock.Column>\n      ) : null}\n      <FieldBlock.Column>\n        {!labelIsHidden && layout === 'vertical' ? (\n          <FieldBlock.Label name={name} required={required} size={labelSize || 'default'}>\n            {label}\n          </FieldBlock.Label>\n        ) : null}\n        <Input\n          id={`input-${name}`}\n          name={name}\n          disabled={disabled}\n          required={required}\n          value={value}\n          placeholder={placeholder}\n          data-testid={testId}\n          size={size}\n          {...props}\n        />\n        {helpText && <FieldBlock.HelpText>{helpText}</FieldBlock.HelpText>}\n        {errorMsg && <FieldBlock.ErrorMsg>{errorMsg}</FieldBlock.ErrorMsg>}\n      </FieldBlock.Column>\n    </FieldBlock.Layout>\n  );\n}\n"],"names":["FieldBlock","jsx","VisuallyHidden","jsxs","Input"],"mappings":";;;;;;;AAoBO,SAAS,cAAA,CAAe;AAAA,EAC7B,IAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA,GAAgB,KAAA;AAAA,EAChB,gBAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,QAAA,GAAW,KAAA;AAAA,EACX,SAAA;AAAA,EACA,MAAA,GAAS,UAAA;AAAA,EACT,WAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,MAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAwB;AACtB,EAAA,uCACGA,qBAAA,CAAW,MAAA,EAAX,EAAkB,MAAA,EAAgB,kBAAoC,SAAA,EACpE,QAAA,EAAA;AAAA,IAAA,MAAA,KAAW,YAAA,kCACTA,qBAAA,CAAW,MAAA,EAAX,EACC,QAAA,kBAAAC,cAAA,CAACD,qBAAA,CAAW,OAAX,EAAiB,IAAA,EAAY,UAAoB,IAAA,EAAM,SAAA,IAAa,UAClE,QAAA,EAAA,aAAA,mBAAgBC,cAAA,CAACC,sCAAgB,QAAA,EAAA,KAAA,EAAM,CAAA,GAAoB,KAAA,EAC9D,CAAA,EACF,CAAA,GACE,IAAA;AAAA,oBACJC,eAAA,CAACH,qBAAA,CAAW,MAAA,EAAX,EACE,QAAA,EAAA;AAAA,MAAA,CAAC,aAAA,IAAiB,MAAA,KAAW,UAAA,mBAC5BC,cAAA,CAACD,qBAAA,CAAW,KAAA,EAAX,EAAiB,IAAA,EAAY,QAAA,EAAoB,IAAA,EAAM,SAAA,IAAa,SAAA,EAClE,iBACH,CAAA,GACE,IAAA;AAAA,sBACJC,cAAA;AAAA,QAACG,WAAA;AAAA,QAAA;AAAA,UACC,EAAA,EAAI,SAAS,IAAI,CAAA,CAAA;AAAA,UACjB,IAAA;AAAA,UACA,QAAA;AAAA,UACA,QAAA;AAAA,UACA,KAAA;AAAA,UACA,WAAA;AAAA,UACA,aAAA,EAAa,MAAA;AAAA,UACb,IAAA;AAAA,UACC,GAAG;AAAA;AAAA,OACN;AAAA,MACC,QAAA,oBAAYH,cAAA,CAACD,qBAAA,CAAW,QAAA,EAAX,EAAqB,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,MAC3C,QAAA,oBAAYC,cAAA,CAACD,qBAAA,CAAW,QAAA,EAAX,EAAqB,QAAA,EAAA,QAAA,EAAS;AAAA,KAAA,EAC9C;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/{text-field-block-DOiM0dpY.js → text-field-block-Ddl2tJ6D.js}

@@ -28,6 +28,7 @@ function TextFieldBlock({
       /* @__PURE__ */ jsx(
         Input,
         {
+          id: `input-${name}`,
           name,
           disabled,
           required,
@@ -45,4 +46,4 @@ function TextFieldBlock({
 }
 
 export { TextFieldBlock as T };
-//# sourceMappingURL=text-field-block-DOiM0dpY.js.map
+//# sourceMappingURL=text-field-block-Ddl2tJ6D.js.map