@marigold/theme-rui 1.1.2 → 1.1.4

package/dist/index.mjs

@@ -16,6 +16,7 @@ __export(components_exports, {
   Checkbox: () => Checkbox,
   CloseButton: () => CloseButton,
   ComboBox: () => ComboBox,
+  ContextualHelp: () => ContextualHelp,
   DateField: () => DateField,
   DatePicker: () => DatePicker,
   Dialog: () => Dialog,
@@ -103,7 +104,7 @@ var Accordion = {
       }
     }
   ),
-  content: cva("overflow-hidden in-data-[expanded]:pb-2"),
+  content: cva("in-data-[expanded]:pb-2"),
   icon: cva(
     "pointer-events-none shrink-0 opacity-60 transition-transform duration-200"
   )
@@ -159,10 +160,10 @@ var Button = cva4(
         text: "hover:bg-hover"
       },
       size: {
-        default: "h-button px-4 py-2",
-        small: "h-button-small px-3 text-xs",
-        large: "h-button-large px-8",
-        icon: "size-9"
+        default: "h-button px-4 py-2 [&_svg]:size-4",
+        small: "h-button-small px-3 text-xs [&_svg]:size-3.5",
+        large: "h-button-large px-8 [&_svg]:size-5",
+        icon: "size-button [&_svg]:size-4"
       }
     },
     defaultVariants: {
@@ -174,10 +175,20 @@ var Button = cva4(
 
 // src/components/Card.styles.ts
 import { cva as cva5 } from "@marigold/system";
-var Card = cva5([
-  "p-4 rounded-md",
-  "util-surface-raised"
-]);
+var Card = cva5(
+  ["p-4 rounded-md", "util-surface-raised"],
+  {
+    variants: {
+      size: {
+        default: "",
+        full: "w-full"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
 
 // src/components/Checkbox.styles.ts
 import { cva as cva6 } from "@marigold/system";
@@ -256,17 +267,45 @@ var ComboBox = cva9(
   "text-muted-foreground/80 right-2"
 );
 
+// src/components/ContextualHelp.styles.ts
+import { cva as cva10 } from "@marigold/system";
+var ContextualHelp = {
+  trigger: cva10(
+    [
+      "inline-flex items-center p-0.5 transition-colors justify-center hover:text-hover-foreground cursor-pointer hover:bg-gray-200 rounded-md focus:bg-gray-200"
+    ],
+    {
+      variants: {
+        size: {
+          small: "w-4 h-4",
+          medium: "w-5 h-5",
+          large: "w-8 h-8"
+        }
+      },
+      defaultVariants: {
+        size: "medium"
+      }
+    }
+  ),
+  popover: cva10(
+    "bg-white border border-gray-200 p-3 rounded shadow-md z-50 data-[small]:max-w-3xs data-[medium]:max-w-xs data-[large]:max-w-md"
+  ),
+  dialog: cva10("text-sm leading-normal"),
+  title: cva10("text-lg font-semibold mb-1"),
+  content: cva10("text-sm")
+};
+
 // src/components/DateField.styles.ts
-import { cva as cva11 } from "@marigold/system";
+import { cva as cva12 } from "@marigold/system";
 
 // src/components/Input.styles.ts
-import { cva as cva10 } from "@marigold/system";
+import { cva as cva11 } from "@marigold/system";
 var inputContainer = "flex w-full px-3 py-2 rounded-lg shadow-sm shadow-black/5 border border-input bg-background text-sm text-foreground transition-shadow group-read-only/field:bg-muted";
 var inputDisabled = "disabled:cursor-not-allowed disabled:text-disabled-foreground disabled:bg-disabled";
 var inputInvalid = "group-invalid/field:border-destructive group-invalid/field:focus:border-destructive group-invalid/field:focus:ring-destructive/20";
 var inputReadOnly = "group-read-only/field:bg-muted";
 var Input = {
-  input: cva10([
+  input: cva11([
     inputContainer,
     inputDisabled,
     inputInvalid,
@@ -279,39 +318,44 @@ var Input = {
     "group-[[data-icon]]/input:pl-8",
     "group-[[data-action]]/input:pr-7"
   ]),
-  icon: cva10([
+  icon: cva11([
     "pointer-events-none left-1",
     "text-muted-foreground disabled:text-disabled-foreground"
   ]),
-  action: cva10(["text-muted-foreground right-1"])
+  action: cva11(["text-muted-foreground right-1"])
 };
 
 // src/components/DateField.styles.ts
 var DateField = {
-  field: cva11([
+  field: cva12([
     "h-input",
     inputContainer,
     inputDisabled,
     "has-focus-visible:util-focus-ring outline-none",
     inputInvalid,
     inputReadOnly,
-    "invalid:focus-within:border-destructive invalid:focus-within:ring-destructive/20"
+    "invalid:focus-within:border-destructive invalid:focus-within:ring-destructive/20",
+    "data-[focus-within]:util-focus-ring outline-0"
   ]),
-  segment: cva11([
+  segment: cva12([
     inputDisabled,
     "inline rounded p-0.5 text-foreground caret-transparent outline-0 data-[type=literal]:px-0 data-[focused]:data-[placeholder]:text-foreground data-[focused]:text-foreground  data-[type=literal]:text-placeholder ",
     "data-[focused]:bg-focus",
     "data-[placeholder]:disabled:text-disabled-foreground",
-    "invalid:data-[focused]:bg-destructive invalid:data-[focused]:data-[placeholder]:text-destructive-foreground invalid:data-[focused]:text-destructive-foreground invalid:placeholder:text-destructive invalid:text-destructive data-[placeholder]:text-placeholder"
+    "invalid:data-[focused]:bg-destructive invalid:data-[focused]:data-[placeholder]:text-destructive-foreground invalid:data-[focused]:text-destructive-foreground invalid:placeholder:text-destructive invalid:text-destructive data-[placeholder]:text-placeholder",
+    "group/segment",
+    "outline-0",
+    "whitespace-pre",
+    "data-[placeholder]:text-placeholder text-foreground data-[focused]:bg-focus data-[focused]:text-foreground rounded leading-none"
   ]),
-  action: cva11(
+  action: cva12(
     "fill-muted-foreground disabled:text-disabled-foreground group-invalid/field:fill-destructive"
   )
 };
 
 // src/components/DatePicker.styles.ts
-import { cva as cva12 } from "@marigold/system";
-var DatePicker = cva12([
+import { cva as cva13 } from "@marigold/system";
+var DatePicker = cva13([
   "relative h-input -top-2",
   "text-muted-foreground/80",
   "hover:text-brand",
@@ -319,27 +363,27 @@ var DatePicker = cva12([
 ]);
 
 // src/components/Dialog.styles.ts
-import { cva as cva13 } from "@marigold/system";
+import { cva as cva14 } from "@marigold/system";
 var Dialog = {
-  closeButton: cva13(["absolute top-6 right-3", "size-7 "]),
-  container: cva13([
+  closeButton: cva14(["absolute top-6 right-3", "size-7 "]),
+  container: cva14([
     "flex flex-col gap-0 rounded-xl p-6 overflow-y-auto",
     "util-surface-overlay"
   ]),
-  header: cva13("flex flex-col gap-1 text-center sm:text-left"),
-  title: cva13("text-lg font-semibold mb-1", {
+  header: cva14("flex flex-col gap-1 text-center sm:text-left"),
+  title: cva14("text-lg font-semibold mb-1", {
     variants: {
       variant: {},
       size: {}
     }
   }),
-  content: cva13("text-muted-foreground text-sm"),
-  actions: cva13("flex flex-col-reverse gap-3 sm:flex-row sm:justify-end mt-4")
+  content: cva14("text-muted-foreground text-sm"),
+  actions: cva14("flex flex-col-reverse gap-3 sm:flex-row sm:justify-end mt-4")
 };
 
 // src/components/Divider.styles.ts
-import { cva as cva14 } from "@marigold/system";
-var Divider = cva14(
+import { cva as cva15 } from "@marigold/system";
+var Divider = cva15(
   "bg-stone-300 h-px w-full",
   {
     variants: {
@@ -352,13 +396,13 @@ var Divider = cva14(
 );
 
 // src/components/Drawer.styles.ts
-import { cva as cva15 } from "@marigold/system";
+import { cva as cva16 } from "@marigold/system";
 var Drawer = {
-  overlay: cva15([
+  overlay: cva16([
     "group/overlay",
     "entering:animate-slide-in-right exiting:animate-slide-out-right"
   ]),
-  container: cva15(
+  container: cva16(
     [
       "relative grid-rows-[auto_1fr_auto]",
       "util-surface-overlay border-y-0! border-r-0!"
@@ -374,18 +418,18 @@ var Drawer = {
       }
     }
   ),
-  closeButton: cva15(["absolute top-3.5 right-3 z-50", "size-7"]),
-  header: cva15("border-border border-b px-6 py-4"),
-  title: cva15("font-semibold text-base"),
-  content: cva15("px-6 py-4 overflow-y-auto outline-none"),
-  actions: cva15(
+  closeButton: cva16(["absolute top-3.5 right-3 z-50", "size-7"]),
+  header: cva16("border-border border-b px-6 py-4"),
+  title: cva16("font-semibold text-base"),
+  content: cva16("px-6 py-4 overflow-y-auto outline-none"),
+  actions: cva16(
     "flex flex-row gap-3 justify-end border-border border-t px-6 py-4"
   )
 };
 
 // src/components/IconButton.styles.ts
-import { cva as cva16 } from "@marigold/system";
-var IconButton = cva16("", {
+import { cva as cva17 } from "@marigold/system";
+var IconButton = cva17("", {
   variants: {
     variant: {
       navigation: "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors outline-offset-2 focus-visible:outline-2 outline-ring/30 disabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-hover hover:text-hover-foreground h-9 py-2 gap-1 px-2.5"
@@ -394,20 +438,20 @@ var IconButton = cva16("", {
 });
 
 // src/components/Field.styles.ts
-import { cva as cva17 } from "@marigold/system";
-var Field = cva17("space-y-2");
+import { cva as cva18 } from "@marigold/system";
+var Field = cva18("space-y-2");
 
 // src/components/Footer.styles.ts
-import { cva as cva18 } from "@marigold/system";
-var Footer = cva18("");
+import { cva as cva19 } from "@marigold/system";
+var Footer = cva19("");
 
 // src/components/Header.styles.ts
-import { cva as cva19 } from "@marigold/system";
-var Header = cva19("");
+import { cva as cva20 } from "@marigold/system";
+var Header = cva20("");
 
 // src/components/Headline.styles.ts
-import { cva as cva20 } from "@marigold/system";
-var Headline = cva20("", {
+import { cva as cva21 } from "@marigold/system";
+var Headline = cva21("", {
   variants: {
     size: {
       "level-1": "text-5xl font-black",
@@ -421,53 +465,64 @@ var Headline = cva20("", {
 });
 
 // src/components/HelpText.styles.ts
-import { cva as cva21 } from "@marigold/system";
+import { cva as cva22 } from "@marigold/system";
 var HelpText = {
-  container: cva21([
+  container: cva22([
     "mt-2 text-xs text-muted-foreground group-disabled/field:text-disabled-foreground",
     "group-invalid/field:text-destructive"
   ]),
-  icon: cva21("")
+  icon: cva22("")
 };
 
 // src/components/Image.styles.ts
-import { cva as cva22 } from "@marigold/system";
-var Image = cva22();
+import { cva as cva23 } from "@marigold/system";
+var Image = cva23();
 
 // src/components/Label.styles.ts
-import { cva as cva23 } from "@marigold/system";
+import { cva as cva24 } from "@marigold/system";
 var Label = {
-  container: cva23([
+  container: cva24([
     "text-sm font-medium leading-4 text-foreground",
     "group-disabled/field:cursor-not-allowed group-disabled/field:text-disabled-foreground"
   ]),
-  indicator: cva23(
+  indicator: cva24(
     "group-required/field:block text-destructive align-super size-2.5"
   )
 };
 
 // src/components/Link.styles.ts
-import { cva as cva24 } from "@marigold/system";
-var Link = cva24(
-  "font-medium underline aria-[disabled]:cursor-not-allowed underline-offset-4"
+import { cva as cva25 } from "@marigold/system";
+var Link = cva25(
+  " text-link font-normal aria-[disabled]:cursor-not-allowed",
+  {
+    variants: {
+      variant: {
+        default: "",
+        secondary: "font-medium text-foreground underline hover:no-underline"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
 );
 
 // src/components/List.styles.ts
-import { cva as cva25 } from "@marigold/system";
+import { cva as cva26 } from "@marigold/system";
 var List = {
-  ul: cva25("ml-6 list-inside list-disc py-3"),
-  ol: cva25("ml-6 list-inside list-decimal py-3"),
-  item: cva25("pt-3")
+  ul: cva26("ml-6 list-inside list-disc py-3"),
+  ol: cva26("ml-6 list-inside list-decimal py-3"),
+  item: cva26("pt-3")
 };
 
 // src/components/ListBox.styles.ts
-import { cva as cva26 } from "@marigold/system";
+import { cva as cva27 } from "@marigold/system";
 var ListBox = {
-  container: cva26([
+  container: cva27([
     "overflow-hidden rounded-md border border-input group-[[data-trigger]]/popover:border-0"
   ]),
-  list: cva26(["bg-background p-1 text-sm outline-0"]),
-  item: cva26([
+  list: cva27(["bg-background p-1 text-sm outline-0"]),
+  item: cva27([
     "relative flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-foreground cursor-pointer",
     "[&_svg]:invisible [&_svg]:block",
     "selected:bg-selected selected:[&_svg]:visible",
@@ -476,36 +531,53 @@ var ListBox = {
     "focus-visible:util-focus-ring outline-none",
     "cursor-default data-selection-mode:cursor-pointer"
   ]),
-  section: cva26(""),
-  header: cva26(
+  section: cva27(""),
+  header: cva27(
     "[&_header]:px-2 [&_header]:py-1.5 [&_header]:text-xs [&_header]:font-medium [&_header]:text-muted-foreground"
   )
 };
 
 // src/components/Menu.styles.ts
-import { cva as cva27 } from "@marigold/system";
+import { cva as cva28 } from "@marigold/system";
 var Menu = {
-  container: cva27(["text-foreground z-50 overflow-hidden rounded-md p-1"]),
-  item: cva27([
+  container: cva28(["text-foreground z-50 overflow-hidden rounded-md p-1"]),
+  item: cva28([
     "focus:bg-focus focus:text-foreground relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none disabled:text-disabled-foreground"
   ]),
-  section: cva27(
+  section: cva28(
     "text-muted-foreground px-2 py-1.5 text-xs font-medium border-t border-t-border in-first:border-t-0"
   ),
-  button: cva27([
-    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md h-button px-4 py-2",
-    "text-sm font-medium outline-none cursor-pointer",
-    "border border-input bg-background shadow-xs",
-    "hover:bg-hover hover:text-foreground",
-    "transition-[color,box-shadow]",
-    "disabled:pointer-not-allowed disabled:bg-disabled disabled:text-disabled-foreground",
-    "focus-visible:util-focus-ring"
-  ])
+  button: cva28(
+    [
+      "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow]",
+      "[&_svg]:shrink-0",
+      "focus-visible:util-focus-ring outline-none disabled:util-disabled",
+      "cursor-pointer"
+    ],
+    {
+      variants: {
+        variant: {
+          secondary: "border border-input bg-background shadow-sm shadow-black/5 hover:bg-hover hover:text-foreground expanded:bg-hover",
+          ghost: "hover:bg-hover hover:text-foreground expanded:bg-hover"
+        },
+        size: {
+          default: "h-button px-4 py-2 [&_svg]:size-4",
+          small: "h-button-small px-3 text-xs [&_svg]:size-3.5",
+          large: "h-button-large px-8 [&_svg]:size-5",
+          icon: "size-button [&_svg]:size-4"
+        }
+      },
+      defaultVariants: {
+        variant: "secondary",
+        size: "default"
+      }
+    }
+  )
 };
 
 // src/components/Modal.styles.ts
-import { cva as cva28 } from "@marigold/system";
-var Modal = cva28(
+import { cva as cva29 } from "@marigold/system";
+var Modal = cva29(
   [
     "sm:max-h-[min(640px,80vh)]",
     "[--dialog-spacing-x:1rem]",
@@ -530,10 +602,10 @@ var Modal = cva28(
 );
 
 // src/components/Multiselect.styles.ts
-import { cva as cva29 } from "@marigold/system";
+import { cva as cva30 } from "@marigold/system";
 var MultiSelect = {
-  field: cva29("grid gap-y-0.5"),
-  container: cva29([
+  field: cva30("grid gap-y-0.5"),
+  container: cva30([
     "bg-background shadow-sm shadow-black/5 border",
     "px-3 text-sm text-foreground transition-shadow",
     "border border-input rounded-lg outline-hidden",
@@ -542,7 +614,7 @@ var MultiSelect = {
     "has-[input[data-focused=true]]:!border-ring has-[input[data-focused=true]]:!ring-ring/50 has-[input[data-focused=true]]:ring-[3px] has-[input[data-focused=true]]:!outline-none",
     "has-[input[aria-readonly=true]]:bg-muted"
   ]),
-  input: cva29([
+  input: cva30([
     "bg-transparent flex-1 h-full",
     "leading-loose",
     "data-[focused]:outline-hidden outline-hidden border-0",
@@ -551,20 +623,20 @@ var MultiSelect = {
     "group-data-[action]/input:pr-8",
     "placeholder:text-placeholder"
   ]),
-  tag: cva29([
+  tag: cva30([
     "border border-solid border-input rounded-md",
     "bg-background",
     "font-medium text-xs",
     "flex items-center gap-1 ",
     "h-7 px-2 cursor-default"
   ]),
-  closeButton: cva29(
+  closeButton: cva30(
     "size-4 cursor-pointer border-none bg-transparent p-0 leading-normal outline-0"
   ),
-  icon: cva29("left-1"),
-  listContainer: cva29(["util-surface-overlay mt-0.5 rounded-lg outline-0"]),
-  list: cva29("pointer-events-auto space-y-1 p-1"),
-  option: cva29([
+  icon: cva30("left-1"),
+  listContainer: cva30(["util-surface-overlay mt-0.5 rounded-lg outline-0"]),
+  list: cva30("pointer-events-auto space-y-1 p-1"),
+  option: cva30([
     "text-sm text-foreground",
     "flex flex-col",
     "cursor-pointer p-2 outline-hidden",
@@ -572,13 +644,13 @@ var MultiSelect = {
     "aria-disabled:text-disabled-foreground aria-disabled:cursor-not-allowed",
     "[&.isFocused:not([aria-disabled=true])]:!bg-hover"
   ]),
-  valueContainer: cva29("gap-2 !py-2 min-h-input")
+  valueContainer: cva30("gap-2 !py-2 min-h-input")
 };
 
 // src/components/NumberField.styles.ts
-import { cva as cva30 } from "@marigold/system";
+import { cva as cva31 } from "@marigold/system";
 var NumberField = {
-  group: cva30([
+  group: cva31([
     "rounded-lg h-input bg-background",
     "has-focus-visible:util-focus-ring outline-none",
     inputInvalid,
@@ -586,12 +658,12 @@ var NumberField = {
     "border border-input text-sm shadow-sm shadow-black/5 transition-shadow",
     "data-invalid:data-[focus-within]:border-destructive data-invalid:data-[focus-within]:ring-destructive/20"
   ]),
-  stepper: cva30([
+  stepper: cva31([
     "w-7 h-full text-center shrink-0",
     "disabled:text-disabled-foreground disabled:bg-disabled",
     "border-input! first-of-type:border-r! last-of-type:border-l!"
   ]),
-  input: cva30([
+  input: cva31([
     "tabular-nums text-foreground px-3 py-2",
     "min-w-0 flex-1 bg-transparent",
     "group-[[data-stepper]]/field:text-center",
@@ -600,8 +672,8 @@ var NumberField = {
 };
 
 // src/components/Popover.styles.ts
-import { cva as cva31 } from "@marigold/system";
-var Popover = cva31([
+import { cva as cva32 } from "@marigold/system";
+var Popover = cva32([
   "group/popover",
   "text-foreground z-50 overflow-y-auto overflow-x-hidden rounded-md outline-0",
   "placement-top:mb-1",
@@ -612,27 +684,27 @@ var Popover = cva31([
 ]);
 
 // src/components/Radio.styles.ts
-import { cva as cva32 } from "@marigold/system";
+import { cva as cva33 } from "@marigold/system";
 var Radio = {
-  container: cva32("group-disabled/radio:cursor-not-allowed"),
-  label: cva32([
+  container: cva33("group-disabled/radio:cursor-not-allowed"),
+  label: cva33([
     "text-sm font-normal cursor-pointer",
     "group-disabled/radio:text-disabled-foreground group-disabled/radio:cursor-not-allowed"
   ]),
-  radio: cva32([
+  radio: cva33([
     "aspect-square size-4 rounded-full",
     "border border-input shadow-sm shadow-black/5",
     "group-focus-visible/radio:util-focus-ring outline-none",
     "group-disabled/radio:group-selected/radio:bg-disabled group-disabled/radio:border-disabled! group-disabled/radio:cursor-not-allowed",
     "group-selected/radio:border-brand group-selected/radio:bg-brand group-selected/radio:text-brand-foreground"
   ]),
-  group: cva32()
+  group: cva33()
 };
 
 // src/components/Pagination.styles.ts
-import { cva as cva33 } from "@marigold/system";
+import { cva as cva34 } from "@marigold/system";
 var Pagination = {
-  navigationButton: cva33([
+  navigationButton: cva34([
     "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors",
     "focus-visible:util-focus-ring outline-none",
     "disabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground",
@@ -641,7 +713,7 @@ var Pagination = {
     "h-9 py-2 gap-1 px-2.5",
     "cursor-pointer"
   ]),
-  pageButton: cva33([
+  pageButton: cva34([
     "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-colors bg-background size-9",
     "focus-visible:util-focus-ring outline-none",
     "disabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground",
@@ -650,19 +722,19 @@ var Pagination = {
     "hover:bg-hover hover:text-hover-foreground",
     "cursor-pointer"
   ]),
-  icon: cva33("h-4 w-4")
+  icon: cva34("h-4 w-4")
 };
 
 // src/components/ProgressCycle.styles.ts
-import { cva as cva34 } from "@marigold/system";
-var ProgressCycle = cva34([
+import { cva as cva35 } from "@marigold/system";
+var ProgressCycle = cva35([
   "stroke-foreground"
 ]);
 
 // src/components/SectionMessage.styles.ts
-import { cva as cva35 } from "@marigold/system";
+import { cva as cva36 } from "@marigold/system";
 var SectionMessage = {
-  container: cva35(
+  container: cva36(
     [
       'grid-cols-[min-content_auto_min-content] gap-x-4 gap-y-1 [grid-template-areas:"icon_title_close""icon_content_content"]',
       "bg-background rounded-md border px-3 py-4"
@@ -681,8 +753,8 @@ var SectionMessage = {
       }
     }
   ),
-  title: cva35("text-sm font-medium"),
-  content: cva35("text-muted-foreground text-sm leading-5 font-normal", {
+  title: cva36("text-sm font-medium"),
+  content: cva36("text-muted-foreground text-sm leading-5 font-normal", {
     variants: {
       variant: {
         success: "text-success-muted-foreground",
@@ -695,7 +767,7 @@ var SectionMessage = {
       variant: "info"
     }
   }),
-  icon: cva35("h-6 w-6 align-baseline leading-none -mt-0.5", {
+  icon: cva36("h-6 w-6 align-baseline leading-none -mt-0.5", {
     variants: {
       variant: {
         success: "text-success-muted-accent",
@@ -708,7 +780,7 @@ var SectionMessage = {
       variant: "info"
     }
   }),
-  close: cva35([
+  close: cva36([
     "size-8 text-foreground",
     "[&_svg]:size-6",
     "-my-1.5 -me-2"
@@ -717,10 +789,10 @@ var SectionMessage = {
 };
 
 // src/components/Select.styles.ts
-import { cva as cva36 } from "@marigold/system";
+import { cva as cva37 } from "@marigold/system";
 var Select = {
-  icon: cva36("text-muted-foreground/80"),
-  select: cva36([
+  icon: cva37("text-muted-foreground/80"),
+  select: cva37([
     inputContainer,
     inputInvalid,
     inputDisabled,
@@ -732,30 +804,30 @@ var Select = {
 };
 
 // src/components/Slider.styles.ts
-import { cva as cva37 } from "@marigold/system";
+import { cva as cva38 } from "@marigold/system";
 var Slider = {
-  container: cva37("*:aria-hidden:hidden"),
-  track: cva37([
+  container: cva38("*:aria-hidden:hidden"),
+  track: cva38([
     "relative bg-muted rounded-lg flex w-full touch-none select-none items-center data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col data-[disabled]:opacity-50"
   ]),
-  selectedTrack: cva37([
+  selectedTrack: cva38([
     "absolute bg-black data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full rounded-lg"
   ]),
-  thumb: cva37([
+  thumb: cva38([
     "block h-5 w-5 rounded-full border-2 border-primary bg-background transition-colors",
     "focus-visible:util-focus-borderless-ring outline-none",
     "disabled:cursor-not-allowed"
   ]),
-  output: cva37("text-text-base text-sm")
+  output: cva38("text-text-base text-sm")
 };
 
 // src/components/Switch.styles.ts
-import { cva as cva38 } from "@marigold/system";
+import { cva as cva39 } from "@marigold/system";
 var Switch = {
-  container: cva38(
+  container: cva39(
     "disabled:cursor-not-allowed disabled:text-disabled-foreground"
   ),
-  track: cva38([
+  track: cva39([
     "flex h-6 w-10 shrink-0 cursor-pointer items-center rounded-full transition-colors",
     "border-2 border-transparent",
     // this increases the hit area so it is 24px
@@ -763,7 +835,7 @@ var Switch = {
     "group-selected/switch:bg-brand bg-input",
     "group-focus-visible/switch:util-focus-borderless-ring outline-none"
   ]),
-  thumb: cva38([
+  thumb: cva39([
     "pointer-events-none block size-5 rounded-full",
     "bg-background shadow-sm shadow-black/5",
     "ring-0 transition-transform duration-150 ease-out-quint",
@@ -772,9 +844,9 @@ var Switch = {
 };
 
 // src/components/Table.styles.ts
-import { cva as cva39 } from "@marigold/system";
+import { cva as cva40 } from "@marigold/system";
 var Table = {
-  table: cva39(
+  table: cva40(
     "text-sm [&_td]:border-border [&_th]:border-border border-separate border-spacing-0 [&_th]:border-b [&_tr]:border-none [&_tr:not(:last-child)_td]:border-b",
     {
       variants: {
@@ -785,7 +857,7 @@ var Table = {
       }
     }
   ),
-  thead: cva39(
+  thead: cva40(
     // for sticky header
     "bg-background/90 top-0 z-1 backdrop-blur-xs ",
     {
@@ -797,27 +869,29 @@ var Table = {
       }
     }
   ),
-  headerRow: cva39(["border-border border-b"], {
+  headerRow: cva40(["border-border border-b"], {
     variants: {
       variant: {
         default: "",
-        grid: "[&>:not(:last-child)]:border-r [&>:not(:last-child)]:border-border"
+        grid: "[&>:not(:last-child)]:border-r [&>:not(:last-child)]:border-border",
+        muted: "bg-muted"
       }
     },
     defaultVariants: {
       variant: "default"
     }
   }),
-  header: cva39(
+  header: cva40(
     [
-      "h-12 px-3 align-middle font-medium text-muted-foreground last:text-right",
+      "h-12 px-3 align-middle font-medium text-muted-foreground",
       "focus-visible:outline-2 outline-offset-2 outline-ring/70"
     ],
     {
       variants: {
         variant: {
           default: "[&:has([type=checkbox])]:pr-0",
-          grid: ""
+          grid: "",
+          muted: "border-t"
         }
       },
       defaultVariants: {
@@ -825,8 +899,8 @@ var Table = {
       }
     }
   ),
-  body: cva39("[&_tr:last-child]:border-0"),
-  row: cva39(
+  body: cva40("[&_tr:last-child]:border-0"),
+  row: cva40(
     [
       "border-b border-border transition-colors",
       "focus-visible:outline-2 outline-offset-2 outline-ring/70",
@@ -844,11 +918,8 @@ var Table = {
       }
     }
   ),
-  cell: cva39(
-    [
-      "p-3 align-middle last:text-right",
-      "focus-visible:outline-2 outline-offset-2 outline-ring/70"
-    ],
+  cell: cva40(
+    ["p-3", "focus-visible:outline-2 outline-offset-2 outline-ring/70"],
     {
       variants: {
         variant: {
@@ -864,14 +935,14 @@ var Table = {
 };
 
 // src/components/Tabs.styles.ts
-import { cva as cva40 } from "@marigold/system";
+import { cva as cva41 } from "@marigold/system";
 var Tabs = {
-  container: cva40("flex flex-col gap-2"),
-  tabsList: cva40([
+  container: cva41("flex flex-col gap-2"),
+  tabsList: cva41([
     "text-muted-foreground",
     "flex items-center p-0.5 h-auto gap-2 border-b border-border px-0 py-1"
   ]),
-  tab: cva40([
+  tab: cva41([
     "relative inline-flex items-center justify-center rounded-sm px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-colors",
     "[&_svg]:shrink-0",
     "focus-visible:util-focus-ring outline-none",
@@ -880,16 +951,16 @@ var Tabs = {
     "data-selected:text-foreground data-selected:hover:bg-hover",
     "data-[selected=true]:after:bg-foreground after:absolute after:inset-x-0 after:bottom-0 after:-mb-1 after:h-0.5"
   ]),
-  tabpanel: cva40([
+  tabpanel: cva41([
     "py-4 rounded-sm",
     "focus-visible:util-focus-ring outline-none"
   ])
 };
 
 // src/components/Tag.styles.ts
-import { cva as cva41 } from "@marigold/system";
+import { cva as cva42 } from "@marigold/system";
 var Tag = {
-  tag: cva41([
+  tag: cva42([
     "relative inline-flex items-center gap-[7px]",
     "border border-solid border-input rounded-md",
     "font-medium text-xs",
@@ -899,16 +970,16 @@ var Tag = {
     "data-[disabled]:cursor-not-allowed data-[disabled]:text-disabled-foreground data-[disabled]:bg-disabled",
     "focus-visible:util-focus-ring outline-none"
   ]),
-  closeButton: cva41([
+  closeButton: cva42([
     "size-4",
     "disabled:bg-disabled disabled:text-disabled-foreground disabled:cursor-not-allowed"
   ]),
-  listItems: cva41("flex flex-wrap items-center gap-1")
+  listItems: cva42("flex flex-wrap items-center gap-1")
 };
 
 // src/components/TextArea.styles.ts
-import { cva as cva42 } from "@marigold/system";
-var TextArea = cva42([
+import { cva as cva43 } from "@marigold/system";
+var TextArea = cva43([
   inputContainer,
   inputInvalid,
   "focus:util-focus-ring outline-none",
@@ -918,8 +989,8 @@ var TextArea = cva42([
 ]);
 
 // src/components/Text.styles.ts
-import { cva as cva43 } from "@marigold/system";
-var Text = cva43("", {
+import { cva as cva44 } from "@marigold/system";
+var Text = cva44("", {
   variants: {
     variant: {
       muted: "text-muted-foreground"
@@ -948,9 +1019,9 @@ var Text = cva43("", {
 });
 
 // src/components/Tooltip.styles.ts
-import { cva as cva44 } from "@marigold/system";
+import { cva as cva45 } from "@marigold/system";
 var Tooltip = {
-  container: cva44(
+  container: cva45(
     [
       "text-brand-foreground bg-brand relative z-50 max-w-70 rounded-md border border-brand px-3 py-1.5 text-sm ",
       "placement-top:mb-2",
@@ -970,7 +1041,7 @@ var Tooltip = {
       }
     }
   ),
-  arrow: cva44(
+  arrow: cva45(
     [
       "fill-brand  stroke-brand",
       // right
@@ -995,13 +1066,13 @@ var Tooltip = {
 };
 
 // src/components/Underlay.styles.ts
-import { cva as cva45 } from "@marigold/system";
-var Underlay = cva45("bg-black/80 px-4");
+import { cva as cva46 } from "@marigold/system";
+var Underlay = cva46("bg-black/80 px-4");
 
 // src/components/XLoader.styles.ts
-import { cva as cva46 } from "@marigold/system";
+import { cva as cva47 } from "@marigold/system";
 var XLoader = {
-  container: cva46("grid place-items-center text-brand", {
+  container: cva47("grid place-items-center text-brand", {
     variants: {
       variant: {
         default: "",
@@ -1018,7 +1089,7 @@ var XLoader = {
       size: "default"
     }
   }),
-  loader: cva46("size-full", {
+  loader: cva47("size-full", {
     variants: {
       variant: {
         default: "",
@@ -1035,7 +1106,7 @@ var XLoader = {
       size: "default"
     }
   }),
-  label: cva46("text-current text-sm")
+  label: cva47("text-current text-sm")
 };
 
 // src/theme.ts