@marigold/theme-rui 1.4.1 → 2.0.1

package/dist/index.js

@@ -30,13 +30,13 @@ var components_exports = {};
 __export(components_exports, {
   Accordion: () => Accordion,
   Badge: () => Badge,
-  Body: () => Body,
   Breadcrumbs: () => Breadcrumbs,
   Button: () => Button,
   Calendar: () => Calendar,
   Card: () => Card,
   Checkbox: () => Checkbox,
   CloseButton: () => CloseButton,
+  Collapsible: () => Collapsible,
   ComboBox: () => ComboBox,
   ContextualHelp: () => ContextualHelp,
   DateField: () => DateField,
@@ -45,12 +45,9 @@ __export(components_exports, {
   Divider: () => Divider,
   Drawer: () => Drawer,
   Field: () => Field,
-  Footer: () => Footer,
-  Header: () => Header,
   Headline: () => Headline,
   HelpText: () => HelpText,
   IconButton: () => IconButton,
-  Image: () => Image,
   Input: () => Input,
   Label: () => Label,
   Link: () => Link,
@@ -110,7 +107,7 @@ var Accordion = {
   }),
   header: (0, import_system.cva)(
     [
-      "flex flex-1 w-full items-center justify-between gap-4 rounded-md py-2 cursor-pointer",
+      "flex w-full items-center justify-between gap-4 rounded-md py-2 cursor-pointer",
       "text-left text-sm font-semibold leading-6 transition-all",
       "hover:no-underline",
       "disabled:cursor-not-allowed disabled:text-disabled-foreground"
@@ -159,15 +156,12 @@ var Badge = (0, import_system2.cva)(
   }
 );
 
-// src/components/Body.styles.ts
-var import_system3 = require("@marigold/system");
-var Body = (0, import_system3.cva)("bg-bg-body");
-
 // src/components/Button.styles.ts
-var import_system4 = require("@marigold/system");
-var Button = (0, import_system4.cva)(
+var import_system3 = require("@marigold/system");
+var Button = (0, import_system3.cva)(
   [
-    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow]",
+    "inline-flex gap-2 whitespace-nowrap rounded-md font-medium transition-[color,box-shadow,transform]",
+    "duration-150 active:scale-[0.98] pressed:scale-[0.98]",
     "[&_svg]:pointer-events-none [&_svg]:shrink-0",
     "focus-visible:util-focus-ring outline-none disabled:util-disabled",
     "pending:text-disabled-foreground pending:bg-disabled pending:cursor-not-allowed pending:border-none",
@@ -178,26 +172,53 @@ var Button = (0, import_system4.cva)(
       variant: {
         primary: "bg-brand text-brand-foreground shadow-xs hover:bg-brand/90",
         secondary: "border border-input bg-background shadow-xs hover:bg-hover hover:text-foreground expanded:bg-hover",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        ghost: "hover:bg-hover hover:text-foreground"
+        destructive: "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90",
+        ghost: "hover:bg-hover hover:text-foreground",
+        link: "text-link util-touch-hitbox"
       },
       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"
+        default: "text-sm",
+        small: "text-xs",
+        large: "",
+        icon: ""
       }
     },
     defaultVariants: {
       variant: "secondary",
       size: "default"
-    }
+    },
+    compoundVariants: [
+      {
+        variant: ["primary", "secondary", "destructive", "ghost"],
+        class: "items-center justify-center"
+      },
+      {
+        variant: ["primary", "secondary", "destructive", "ghost"],
+        size: "default",
+        class: "h-button px-4 py-2 [&_svg]:size-4"
+      },
+      {
+        variant: ["primary", "secondary", "destructive", "ghost"],
+        size: "small",
+        class: "h-button-small px-3 [&_svg]:size-3.5"
+      },
+      {
+        variant: ["primary", "secondary", "destructive", "ghost"],
+        size: "large",
+        class: "h-button-large px-8 [&_svg]:size-5"
+      },
+      {
+        variant: ["primary", "secondary", "destructive", "ghost"],
+        size: "icon",
+        class: "size-button [&_svg]:size-4"
+      }
+    ]
   }
 );
 
 // src/components/Card.styles.ts
-var import_system5 = require("@marigold/system");
-var Card = (0, import_system5.cva)(
+var import_system4 = require("@marigold/system");
+var Card = (0, import_system4.cva)(
   ["p-4 rounded-md", "util-surface-raised"],
   {
     variants: {
@@ -213,9 +234,9 @@ var Card = (0, import_system5.cva)(
 );
 
 // src/components/Checkbox.styles.ts
-var import_system6 = require("@marigold/system");
+var import_system5 = require("@marigold/system");
 var Checkbox = {
-  checkbox: (0, import_system6.cva)([
+  checkbox: (0, import_system5.cva)([
     "grid size-4 shrink-0 place-content-center rounded",
     "border border-input shadow-xs",
     "group-focus-visible/checkbox:util-focus-ring outline-none",
@@ -223,22 +244,22 @@ var Checkbox = {
     "group-selected/checkbox:border-brand group-selected/checkbox:bg-brand group-selected/checkbox:text-brand-foreground",
     "group-[indeterminate]/checkbox:border-brand group-[indeterminate]/checkbox:bg-brand group-[indeterminate]/checkbox:text-brand-foreground"
   ]),
-  container: (0, import_system6.cva)("cursor-pointer read-only:cursor-default"),
-  label: (0, import_system6.cva)([
+  container: (0, import_system5.cva)("cursor-pointer read-only:cursor-default"),
+  label: (0, import_system5.cva)([
     "flex items-center gap-1",
     'text-sm leading-4 group-[group="checkbox"]/checkboxgroup:font-normal font-medium text-foregroun',
     "group-disabled/checkbox:text-disabled-foreground"
   ]),
-  group: (0, import_system6.cva)()
+  group: (0, import_system5.cva)()
 };
 
 // src/components/Calendar.styles.ts
-var import_system7 = require("@marigold/system");
+var import_system6 = require("@marigold/system");
 var Calendar = {
-  calendar: (0, import_system7.cva)(
+  calendar: (0, import_system6.cva)(
     "rounded-md border group-[[data-trigger]]/popover:border-0 border-border p-2"
   ),
-  calendarCell: (0, import_system7.cva)([
+  calendarCell: (0, import_system6.cva)([
     "relative flex size-9 items-center justify-center whitespace-nowrap rounded-lg justify-self-center",
     "border border-transparent p-0 text-sm font-normal text-foreground",
     "outline-offset-2 duration-150 [transition-property:color,background-color,border-radius,box-shadow]",
@@ -246,25 +267,25 @@ var Calendar = {
     "disabled:opacity-30 data-[unavailable]:opacity-30",
     "focus-visible:util-focus-borderless-ring outline-none"
   ]),
-  calendarControllers: (0, import_system7.cva)([
+  calendarControllers: (0, import_system6.cva)([
     "size-9 rounded-lg",
     "text-muted-foreground/80",
     "transition-colors",
     "focus-visible:util-focus-ring outline-none"
   ]),
-  calendarHeader: (0, import_system7.cva)([
+  calendarHeader: (0, import_system6.cva)([
     "size-9 rounded-lg p-0 text-xs font-medium text-muted-foreground/80"
   ]),
-  calendarGrid: (0, import_system7.cva)("[&_td]:p-2"),
-  calendarListboxButton: (0, import_system7.cva)([
+  calendarGrid: (0, import_system6.cva)("[&_td]:p-2"),
+  calendarListboxButton: (0, import_system6.cva)([
     "rounded-md text-sm font-medium transition-[color,box-shadow]",
     "px-4 py-2",
     "focus-visible:util-focus-ring outline-none",
     "cursor-pointer",
     "hover:bg-hover",
-    "aria-[current=true]:bg-brand aria-[current=true]:text-brand-foreground aria-[current=true]:shadow-xs aria-[current=true]:hover:bg-brand/90"
+    "aria-selected:bg-brand aria-selected:text-brand-foreground aria-selected:shadow-xs aria-selected:hover:bg-brand/90"
   ]),
-  select: (0, import_system7.cva)([
+  select: (0, import_system6.cva)([
     "[&svg]:text-muted-foreground/80",
     "flex w-full px-3 py-2 rounded-lg shadow-xs border border-input bg-background text-sm text-foreground transition-shadow",
     "focus-visible:util-focus-ring outline-none",
@@ -275,22 +296,54 @@ var Calendar = {
 };
 
 // src/components/CloseButton.styles.ts
-var import_system8 = require("@marigold/system");
-var CloseButton = (0, import_system8.cva)([
+var import_system7 = require("@marigold/system");
+var CloseButton = (0, import_system7.cva)([
   "flex items-center justify-center whitespace-nowrap",
   "cursor-pointer",
   "transition-[color,box-shadow]",
   "mixin-ring-focus-visible",
   "rounded",
+  "duration-150 active:scale-[0.98] pressed:scale-[0.98] transition-transform",
   "[&_svg]:size-4 [&_svg]:opacity-60 [&_svg]:transition-opacity hover:[&_svg]:opacity-100"
 ]);
 
 // src/components/ComboBox.styles.ts
-var import_system9 = require("@marigold/system");
-var ComboBox = (0, import_system9.cva)(
+var import_system8 = require("@marigold/system");
+var ComboBox = (0, import_system8.cva)(
   "text-muted-foreground/80 right-2"
 );
 
+// src/components/Collapsible.styles.ts
+var import_system9 = require("@marigold/system");
+var Collapsible = {
+  container: (0, import_system9.cva)(),
+  trigger: (0, import_system9.cva)(
+    [
+      "inline-flex gap-2 whitespace-nowrap rounded-md font-medium transition-[color,box-shadow,transform]",
+      "duration-150 active:scale-[0.98] pressed:scale-[0.98]",
+      "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+      "focus-visible:util-focus-ring outline-none disabled:util-disabled",
+      "cursor-pointer"
+    ],
+    {
+      variants: {
+        variant: {
+          default: "",
+          link: "text-link util-touch-hitbox"
+        },
+        size: {
+          default: "text-sm"
+        }
+      },
+      defaultVariants: {
+        variant: "default",
+        size: "default"
+      }
+    }
+  ),
+  content: (0, import_system9.cva)()
+};
+
 // src/components/ContextualHelp.styles.ts
 var import_system10 = require("@marigold/system");
 var ContextualHelp = {
@@ -431,21 +484,24 @@ var import_system16 = require("@marigold/system");
 var Drawer = {
   overlay: (0, import_system16.cva)([
     "group/overlay",
-    "entering:animate-slide-in-right exiting:animate-slide-out-right"
+    "data-[placement=top]:w-full data-[placement=top]:entering:animate-slide-in-top data-[placement=top]:exiting:animate-slide-out-top data-[placement=top]:top-0 data-[placement=top]:left-0",
+    "data-[placement=bottom]:w-full data-[placement=bottom]:entering:animate-slide-in-bottom data-[placement=bottom]:exiting:animate-slide-out-bottom data-[placement=bottom]:bottom-0 data-[placement=bottom]:left-0",
+    "data-[placement=left]:entering:animate-slide-in-left data-[placement=left]:exiting:animate-slide-out-left data-[placement=left]:top-0 data-[placement=left]:left-0",
+    "data-[placement=right]:entering:animate-slide-in-right data-[placement=right]:exiting:animate-slide-out-right data-[placement=right]:top-0 data-[placement=right]:right-0"
   ]),
   container: (0, import_system16.cva)(
     [
-      "relative grid-rows-[auto_1fr_auto]",
-      "util-surface-overlay border-y-0! border-r-0!"
+      "w-full relative grid-rows-[auto_1fr_auto]",
+      "util-surface-overlay",
+      "data-[placement=top]:w-full data-[placement=bottom]:w-full"
     ],
     {
       variants: {
         size: {
-          default: "w-80"
+          xsmall: "w-64 data-[placement=top]:h-48 data-[placement=bottom]:h-48",
+          small: "w-72 data-[placement=top]:h-64 data-[placement=bottom]:h-64",
+          medium: "w-96 data-[placement=top]:h-80 data-[placement=bottom]:h-80"
         }
-      },
-      defaultVariants: {
-        size: "default"
       }
     }
   ),
@@ -472,17 +528,9 @@ var IconButton = (0, import_system17.cva)("", {
 var import_system18 = require("@marigold/system");
 var Field = (0, import_system18.cva)("space-y-2");
 
-// src/components/Footer.styles.ts
-var import_system19 = require("@marigold/system");
-var Footer = (0, import_system19.cva)("");
-
-// src/components/Header.styles.ts
-var import_system20 = require("@marigold/system");
-var Header = (0, import_system20.cva)("");
-
 // src/components/Headline.styles.ts
-var import_system21 = require("@marigold/system");
-var Headline = (0, import_system21.cva)("", {
+var import_system19 = require("@marigold/system");
+var Headline = (0, import_system19.cva)("", {
   variants: {
     size: {
       "level-1": "text-5xl font-black",
@@ -496,40 +544,36 @@ var Headline = (0, import_system21.cva)("", {
 });
 
 // src/components/HelpText.styles.ts
-var import_system22 = require("@marigold/system");
+var import_system20 = require("@marigold/system");
 var HelpText = {
-  container: (0, import_system22.cva)([
+  container: (0, import_system20.cva)([
     "text-xs text-muted-foreground group-disabled/field:text-disabled-foreground",
     "group-invalid/field:text-destructive"
   ]),
-  icon: (0, import_system22.cva)("")
+  icon: (0, import_system20.cva)("")
 };
 
-// src/components/Image.styles.ts
-var import_system23 = require("@marigold/system");
-var Image = (0, import_system23.cva)();
-
 // src/components/Label.styles.ts
-var import_system24 = require("@marigold/system");
+var import_system21 = require("@marigold/system");
 var Label = {
-  container: (0, import_system24.cva)([
+  container: (0, import_system21.cva)([
     "flex items-center gap-1",
     "text-sm font-medium leading-none text-foreground",
     "group-disabled/field:cursor-not-allowed group-disabled/field:text-disabled-foreground"
   ]),
-  indicator: (0, import_system24.cva)(
+  indicator: (0, import_system21.cva)(
     "group-required/field:block text-destructive align-super size-2.5"
   )
 };
 
 // src/components/Link.styles.ts
-var import_system25 = require("@marigold/system");
-var Link = (0, import_system25.cva)(
-  " text-link font-normal aria-[disabled]:cursor-not-allowed",
+var import_system22 = require("@marigold/system");
+var Link = (0, import_system22.cva)(
+  "aria-[disabled]:cursor-not-allowed",
   {
     variants: {
       variant: {
-        default: "",
+        default: "text-link font-normal",
         secondary: "font-medium text-foreground underline hover:no-underline"
       }
     },
@@ -540,21 +584,21 @@ var Link = (0, import_system25.cva)(
 );
 
 // src/components/List.styles.ts
-var import_system26 = require("@marigold/system");
+var import_system23 = require("@marigold/system");
 var List = {
-  ul: (0, import_system26.cva)("ml-6 list-outside list-disc"),
-  ol: (0, import_system26.cva)("ml-6 list-outside list-decimal"),
-  item: (0, import_system26.cva)("not-first:pt-3")
+  ul: (0, import_system23.cva)("ml-6 list-outside list-disc"),
+  ol: (0, import_system23.cva)("ml-6 list-outside list-decimal"),
+  item: (0, import_system23.cva)("not-first:pt-3")
 };
 
 // src/components/ListBox.styles.ts
-var import_system27 = require("@marigold/system");
+var import_system24 = require("@marigold/system");
 var ListBox = {
-  container: (0, import_system27.cva)([
+  container: (0, import_system24.cva)([
     "overflow-hidden rounded-md border border-input group-[[data-trigger]]/popover:border-0"
   ]),
-  list: (0, import_system27.cva)(["bg-background p-1 text-sm outline-0"]),
-  item: (0, import_system27.cva)([
+  list: (0, import_system24.cva)(["bg-background p-1 text-sm outline-0"]),
+  item: (0, import_system24.cva)([
     "relative flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-foreground",
     "[&_.selection-indicator>svg]:invisible [&_.selection-indicator>svg]:block",
     "selected:bg-selected selected:[&_.selection-indicator>svg]:visible",
@@ -563,28 +607,28 @@ var ListBox = {
     "focus-visible:util-focus-ring outline-none",
     "cursor-default data-selection-mode:cursor-pointer"
   ]),
-  section: (0, import_system27.cva)(""),
-  header: (0, import_system27.cva)(
+  section: (0, import_system24.cva)(""),
+  header: (0, import_system24.cva)(
     "[&_header]:px-2 [&_header]:py-1.5 [&_header]:text-xs [&_header]:font-medium [&_header]:text-muted-foreground"
   )
 };
 
 // src/components/Menu.styles.ts
-var import_system28 = require("@marigold/system");
+var import_system25 = require("@marigold/system");
 var Menu = {
-  container: (0, import_system28.cva)([
+  container: (0, import_system25.cva)([
     "text-foreground z-50 overflow-hidden rounded-md p-1 outline-none"
   ]),
-  item: (0, import_system28.cva)([
+  item: (0, import_system25.cva)([
     "relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-foreground outline-hidden select-none",
     "focus:bg-focus",
     "disabled:text-disabled-foreground",
     "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4 [&_svg]:opacity-60"
   ]),
-  section: (0, import_system28.cva)(
+  section: (0, import_system25.cva)(
     "text-muted-foreground px-2 py-1.5 text-xs font-medium border-t border-t-border in-first:border-t-0"
   ),
-  button: (0, import_system28.cva)(
+  button: (0, import_system25.cva)(
     [
       "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow]",
       "[&_svg]:shrink-0 [&_svg]:pointer-events-none",
@@ -594,7 +638,7 @@ var Menu = {
     {
       variants: {
         variant: {
-          secondary: "border border-input bg-background shadow-xs hover:bg-hover hover:text-foreground expanded:bg-hover",
+          default: "border border-input bg-background shadow-xs hover:bg-hover hover:text-foreground expanded:bg-hover",
           ghost: "hover:bg-hover hover:text-foreground expanded:bg-hover"
         },
         size: {
@@ -605,7 +649,7 @@ var Menu = {
         }
       },
       defaultVariants: {
-        variant: "secondary",
+        variant: "default",
         size: "default"
       }
     }
@@ -613,8 +657,8 @@ var Menu = {
 };
 
 // src/components/Modal.styles.ts
-var import_system29 = require("@marigold/system");
-var Modal = (0, import_system29.cva)(
+var import_system26 = require("@marigold/system");
+var Modal = (0, import_system26.cva)(
   [
     "sm:max-h-[min(640px,80vh)]",
     "[--dialog-spacing-x:1rem]",
@@ -639,10 +683,10 @@ var Modal = (0, import_system29.cva)(
 );
 
 // src/components/Multiselect.styles.ts
-var import_system30 = require("@marigold/system");
+var import_system27 = require("@marigold/system");
 var MultiSelect = {
-  field: (0, import_system30.cva)("space-y-2"),
-  container: (0, import_system30.cva)([
+  field: (0, import_system27.cva)("space-y-2"),
+  container: (0, import_system27.cva)([
     "bg-background shadow-xs border",
     "px-3 text-sm text-foreground transition-shadow",
     "border border-input rounded-lg outline-hidden",
@@ -652,7 +696,7 @@ var MultiSelect = {
     "has-[input[aria-readonly=true]]:bg-muted",
     "min-h-input"
   ]),
-  input: (0, import_system30.cva)([
+  input: (0, import_system27.cva)([
     "bg-transparent flex-1 h-full",
     "leading-loose",
     "data-[focused]:outline-hidden outline-hidden border-0",
@@ -661,20 +705,20 @@ var MultiSelect = {
     "group-data-[action]/input:pr-8",
     "placeholder:text-placeholder"
   ]),
-  tag: (0, import_system30.cva)([
+  tag: (0, import_system27.cva)([
     "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: (0, import_system30.cva)(
+  closeButton: (0, import_system27.cva)(
     "size-4 cursor-pointer border-none bg-transparent p-0 leading-normal outline-0"
   ),
-  icon: (0, import_system30.cva)("left-1"),
-  listContainer: (0, import_system30.cva)(["util-surface-overlay mt-0.5 rounded-lg outline-0"]),
-  list: (0, import_system30.cva)("pointer-events-auto space-y-1 p-1"),
-  option: (0, import_system30.cva)([
+  icon: (0, import_system27.cva)("left-1"),
+  listContainer: (0, import_system27.cva)(["util-surface-overlay mt-0.5 rounded-lg outline-0"]),
+  list: (0, import_system27.cva)("pointer-events-auto space-y-1 p-1"),
+  option: (0, import_system27.cva)([
     "text-sm text-foreground",
     "flex flex-col",
     "cursor-pointer p-2 outline-hidden",
@@ -682,13 +726,13 @@ var MultiSelect = {
     "aria-disabled:text-disabled-foreground aria-disabled:cursor-not-allowed",
     "[&.isFocused:not([aria-disabled=true])]:!bg-hover"
   ]),
-  valueContainer: (0, import_system30.cva)("gap-2")
+  valueContainer: (0, import_system27.cva)("gap-2")
 };
 
 // src/components/NumberField.styles.ts
-var import_system31 = require("@marigold/system");
+var import_system28 = require("@marigold/system");
 var NumberField = {
-  group: (0, import_system31.cva)([
+  group: (0, import_system28.cva)([
     "rounded-lg h-input bg-background",
     "has-focus-visible:util-focus-ring outline-none",
     inputInvalid,
@@ -696,12 +740,12 @@ var NumberField = {
     "border border-input text-sm shadow-xs transition-shadow",
     "data-invalid:data-[focus-within]:border-destructive data-invalid:data-[focus-within]:ring-destructive/20"
   ]),
-  stepper: (0, import_system31.cva)([
+  stepper: (0, import_system28.cva)([
     "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: (0, import_system31.cva)([
+  input: (0, import_system28.cva)([
     "tabular-nums text-foreground px-3 py-2",
     "min-w-0 flex-1 bg-transparent",
     "group-[[data-stepper]]/field:text-center",
@@ -710,8 +754,8 @@ var NumberField = {
 };
 
 // src/components/Popover.styles.ts
-var import_system32 = require("@marigold/system");
-var Popover = (0, import_system32.cva)([
+var import_system29 = require("@marigold/system");
+var Popover = (0, import_system29.cva)([
   "group/popover",
   "text-foreground z-50 overflow-y-auto overflow-x-hidden rounded-md outline-0",
   "placement-top:mb-1",
@@ -722,52 +766,59 @@ var Popover = (0, import_system32.cva)([
 ]);
 
 // src/components/Radio.styles.ts
-var import_system33 = require("@marigold/system");
+var import_system30 = require("@marigold/system");
 var Radio = {
-  container: (0, import_system33.cva)("group-disabled/radio:cursor-not-allowed"),
-  label: (0, import_system33.cva)([
+  container: (0, import_system30.cva)("group-disabled/radio:cursor-not-allowed"),
+  label: (0, import_system30.cva)([
     "text-sm font-normal cursor-pointer",
     "group-disabled/radio:text-disabled-foreground group-disabled/radio:cursor-not-allowed"
   ]),
-  radio: (0, import_system33.cva)([
+  radio: (0, import_system30.cva)([
     "aspect-square size-4 rounded-full",
     "border border-input shadow-xs",
     "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: (0, import_system33.cva)()
+  group: (0, import_system30.cva)()
 };
 
 // src/components/Pagination.styles.ts
-var import_system34 = require("@marigold/system");
-var button = "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colorsfocus-visible:util-focus-ring outline-nonedisabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground[&_svg]:pointer-events-none [&_svg]:shrink-0hover:bg-hover hover:text-hover-foregroundcursor-pointer";
+var import_system31 = require("@marigold/system");
+var button = [
+  "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",
+  "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+  "hover:bg-hover hover:text-hover-foreground",
+  "cursor-pointer"
+];
 var Pagination = {
-  container: (0, import_system34.cva)("flex items-center justify-center space-x-2"),
-  navigationButton: (0, import_system34.cva)([
-    button,
+  container: (0, import_system31.cva)("flex items-center justify-center space-x-2"),
+  navigationButton: (0, import_system31.cva)([
+    ...button,
     "disabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground",
     "h-9 py-2 gap-1 px-2.5"
   ]),
-  pageButton: (0, import_system34.cva)([
-    button,
+  pageButton: (0, import_system31.cva)([
+    ...button,
     "bg-background size-9",
     "data-[selected=true]:border data-[selected=true]:border-input data-[selected=true]:shadow-xs"
   ]),
-  icon: (0, import_system34.cva)("h-4 w-4"),
-  ellipsis: (0, import_system34.cva)("text-text-base flex h-8 w-8 items-center justify-center")
+  icon: (0, import_system31.cva)("h-4 w-4"),
+  ellipsis: (0, import_system31.cva)("text-foreground flex h-8 w-8 items-center justify-center")
 };
 
 // src/components/ProgressCycle.styles.ts
-var import_system35 = require("@marigold/system");
-var ProgressCycle = (0, import_system35.cva)([
+var import_system32 = require("@marigold/system");
+var ProgressCycle = (0, import_system32.cva)([
   "stroke-foreground"
 ]);
 
 // src/components/SectionMessage.styles.ts
-var import_system36 = require("@marigold/system");
+var import_system33 = require("@marigold/system");
 var SectionMessage = {
-  container: (0, import_system36.cva)(
+  container: (0, import_system33.cva)(
     [
       '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"
@@ -786,8 +837,8 @@ var SectionMessage = {
       }
     }
   ),
-  title: (0, import_system36.cva)("text-sm font-medium"),
-  content: (0, import_system36.cva)("text-muted-foreground text-sm leading-5 font-normal", {
+  title: (0, import_system33.cva)("text-sm font-medium"),
+  content: (0, import_system33.cva)("text-muted-foreground text-sm leading-5 font-normal", {
     variants: {
       variant: {
         success: "text-success-muted-foreground",
@@ -800,7 +851,7 @@ var SectionMessage = {
       variant: "info"
     }
   }),
-  icon: (0, import_system36.cva)("h-6 w-6 align-baseline leading-none -mt-0.5", {
+  icon: (0, import_system33.cva)("h-6 w-6 align-baseline leading-none -mt-0.5", {
     variants: {
       variant: {
         success: "text-success-muted-accent",
@@ -813,7 +864,7 @@ var SectionMessage = {
       variant: "info"
     }
   }),
-  close: (0, import_system36.cva)([
+  close: (0, import_system33.cva)([
     "size-8 text-foreground",
     "[&_svg]:size-6",
     "-my-1.5 -me-2"
@@ -822,10 +873,10 @@ var SectionMessage = {
 };
 
 // src/components/Select.styles.ts
-var import_system37 = require("@marigold/system");
+var import_system34 = require("@marigold/system");
 var Select = {
-  icon: (0, import_system37.cva)("text-muted-foreground/80"),
-  select: (0, import_system37.cva)([
+  icon: (0, import_system34.cva)("text-muted-foreground/80"),
+  select: (0, import_system34.cva)([
     inputContainer,
     inputInvalid,
     inputDisabled,
@@ -837,30 +888,30 @@ var Select = {
 };
 
 // src/components/Slider.styles.ts
-var import_system38 = require("@marigold/system");
+var import_system35 = require("@marigold/system");
 var Slider = {
-  container: (0, import_system38.cva)("*:aria-hidden:hidden"),
-  track: (0, import_system38.cva)([
+  container: (0, import_system35.cva)("*:aria-hidden:hidden"),
+  track: (0, import_system35.cva)([
     "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: (0, import_system38.cva)([
+  selectedTrack: (0, import_system35.cva)([
     "absolute bg-black data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full rounded-lg"
   ]),
-  thumb: (0, import_system38.cva)([
+  thumb: (0, import_system35.cva)([
     "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: (0, import_system38.cva)("text-text-base text-sm")
+  output: (0, import_system35.cva)("text-foreground text-sm")
 };
 
 // src/components/Switch.styles.ts
-var import_system39 = require("@marigold/system");
+var import_system36 = require("@marigold/system");
 var Switch = {
-  container: (0, import_system39.cva)(
+  container: (0, import_system36.cva)(
     "disabled:cursor-not-allowed disabled:text-disabled-foreground"
   ),
-  track: (0, import_system39.cva)([
+  track: (0, import_system36.cva)([
     "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
@@ -868,7 +919,7 @@ var Switch = {
     "group-selected/switch:bg-brand bg-input",
     "group-focus-visible/switch:util-focus-borderless-ring outline-none"
   ]),
-  thumb: (0, import_system39.cva)([
+  thumb: (0, import_system36.cva)([
     "pointer-events-none block size-5 rounded-full",
     "bg-background shadow-xs",
     "ring-0 transition-transform duration-150 ease-out-quint",
@@ -877,9 +928,9 @@ var Switch = {
 };
 
 // src/components/Table.styles.ts
-var import_system40 = require("@marigold/system");
+var import_system37 = require("@marigold/system");
 var Table = {
-  table: (0, import_system40.cva)(
+  table: (0, import_system37.cva)(
     "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: {
@@ -890,7 +941,7 @@ var Table = {
       }
     }
   ),
-  thead: (0, import_system40.cva)(
+  thead: (0, import_system37.cva)(
     // for sticky header
     "bg-background/90 top-0 z-1 backdrop-blur-xs ",
     {
@@ -902,7 +953,7 @@ var Table = {
       }
     }
   ),
-  headerRow: (0, import_system40.cva)(["border-border border-b"], {
+  headerRow: (0, import_system37.cva)(["border-border border-b"], {
     variants: {
       variant: {
         default: "",
@@ -914,7 +965,7 @@ var Table = {
       variant: "default"
     }
   }),
-  header: (0, import_system40.cva)(
+  header: (0, import_system37.cva)(
     [
       "h-12 px-3 align-middle font-medium text-muted-foreground",
       "focus-visible:outline-2 outline-offset-2 outline-ring/70"
@@ -932,8 +983,8 @@ var Table = {
       }
     }
   ),
-  body: (0, import_system40.cva)("[&_tr:last-child]:border-0"),
-  row: (0, import_system40.cva)(
+  body: (0, import_system37.cva)("[&_tr:last-child]:border-0"),
+  row: (0, import_system37.cva)(
     [
       "border-b border-border transition-colors",
       "focus-visible:outline-2 outline-offset-2 outline-ring/70",
@@ -963,7 +1014,7 @@ var Table = {
       }
     }
   ),
-  cell: (0, import_system40.cva)("p-3 focus-visible:outline-2 outline-offset-2 outline-ring/70", {
+  cell: (0, import_system37.cva)("p-3 focus-visible:outline-2 outline-offset-2 outline-ring/70", {
     variants: {
       variant: {
         default: "[&:has([type=checkbox])]:pr-0",
@@ -977,14 +1028,14 @@ var Table = {
 };
 
 // src/components/Tabs.styles.ts
-var import_system41 = require("@marigold/system");
+var import_system38 = require("@marigold/system");
 var Tabs = {
-  container: (0, import_system41.cva)("flex flex-col gap-2"),
-  tabsList: (0, import_system41.cva)([
+  container: (0, import_system38.cva)("flex flex-col gap-2"),
+  tabsList: (0, import_system38.cva)([
     "text-muted-foreground",
     "flex items-center p-0.5 h-auto gap-2 border-b border-border px-0 py-1"
   ]),
-  tab: (0, import_system41.cva)([
+  tab: (0, import_system38.cva)([
     "relative inline-flex items-center justify-center gap-1 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",
@@ -993,16 +1044,21 @@ 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: (0, import_system41.cva)([
+  tabpanel: (0, import_system38.cva)([
     "py-4 rounded-sm",
     "focus-visible:util-focus-ring outline-none"
   ])
 };
 
 // src/components/Tag.styles.ts
-var import_system42 = require("@marigold/system");
+var import_system39 = require("@marigold/system");
 var Tag = {
-  tag: (0, import_system42.cva)([
+  container: (0, import_system39.cva)([
+    "flex gap-3",
+    // prevent collapsing when the empty state is shown
+    "min-h-button-small"
+  ]),
+  tag: (0, import_system39.cva)([
     "relative inline-flex items-center gap-[7px]",
     "border border-solid border-input rounded-md",
     "font-medium text-xs",
@@ -1012,17 +1068,27 @@ var Tag = {
     "data-[disabled]:cursor-not-allowed data-[disabled]:text-disabled-foreground data-[disabled]:bg-disabled",
     "focus-visible:util-focus-ring outline-none"
   ]),
-  closeButton: (0, import_system42.cva)([
+  closeButton: (0, import_system39.cva)([
     "size-4",
     "disabled:bg-disabled disabled:text-disabled-foreground disabled:cursor-not-allowed"
   ]),
-  listItems: (0, import_system42.cva)("flex flex-wrap items-center gap-1 mb-0")
-  // mb-0 prevents whitespace when the hidden field is rendered
+  listItems: (0, import_system39.cva)([
+    "flex flex-wrap items-center gap-1",
+    // mb-0 prevents whitespace when the hidden field is rendered
+    "mb-0"
+  ]),
+  removeAll: (0, import_system39.cva)([
+    "inline whitespace-nowrap font-medium transition-[color,box-shadow,transform]",
+    "duration-150 active:scale-[0.98] pressed:scale-[0.98]",
+    "focus-visible:util-focus-ring outline-none",
+    "cursor-pointer",
+    "text-link text-xs h-button-small"
+  ])
 };
 
 // src/components/TextArea.styles.ts
-var import_system43 = require("@marigold/system");
-var TextArea = (0, import_system43.cva)([
+var import_system40 = require("@marigold/system");
+var TextArea = (0, import_system40.cva)([
   inputContainer,
   inputInvalid,
   "focus:util-focus-ring outline-none",
@@ -1032,8 +1098,8 @@ var TextArea = (0, import_system43.cva)([
 ]);
 
 // src/components/Text.styles.ts
-var import_system44 = require("@marigold/system");
-var Text = (0, import_system44.cva)("", {
+var import_system41 = require("@marigold/system");
+var Text = (0, import_system41.cva)("", {
   variants: {
     variant: {
       default: "",
@@ -1064,32 +1130,32 @@ var Text = (0, import_system44.cva)("", {
 });
 
 // src/components/Toast.styles.ts
-var import_system45 = require("@marigold/system");
+var import_system42 = require("@marigold/system");
 var Toast = {
-  toast: (0, import_system45.cva)([
+  toast: (0, import_system42.cva)([
     "z-50",
     "max-w-sm w-full pointer-events-auto overflow-hidden rounded-md border shadow-lg bg-background text-foreground border-border",
     "grid grid-cols-[auto_1fr_auto] grid-rows-[auto_auto] gap-x-1 gap-y-0",
     '[grid-template-areas:"icon_title_close""icon_description_description"] focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
     "p-4"
   ]),
-  title: (0, import_system45.cva)([
+  title: (0, import_system42.cva)([
     "text-sm font-medium",
     "[grid-area:title]",
     "flex items-center mb-0"
   ]),
-  description: (0, import_system45.cva)([
+  description: (0, import_system42.cva)([
     "text-muted-foreground text-sm",
     "[grid-area:description] mt-0"
   ]),
-  closeButton: (0, import_system45.cva)([
+  closeButton: (0, import_system42.cva)([
     "[grid-area:close] row-end-1",
     "ml-2",
     "flex items-center justify-center",
     "size-5 rounded transition-[color,box-shadow] outline-none",
     "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] text-muted-foreground hover:text-hover-foreground"
   ]),
-  icon: (0, import_system45.cva)(
+  icon: (0, import_system42.cva)(
     [
       "[grid-area:icon]",
       "flex items-center justify-center",
@@ -1110,23 +1176,23 @@ var Toast = {
       }
     }
   ),
-  content: (0, import_system45.cva)(["contents"]),
-  "bottom-left": (0, import_system45.cva)(["fixed bottom-4 left-4 flex flex-col-reverse"]),
-  "bottom-right": (0, import_system45.cva)(["fixed bottom-4 right-4 flex flex-col-reverse"]),
-  "top-left": (0, import_system45.cva)(["fixed top-4 left-4 flex flex-col"]),
-  "top-right": (0, import_system45.cva)(["fixed top-4 right-4 flex flex-col"]),
-  top: (0, import_system45.cva)([
+  content: (0, import_system42.cva)(["contents"]),
+  "bottom-left": (0, import_system42.cva)(["fixed bottom-4 left-4 flex flex-col-reverse"]),
+  "bottom-right": (0, import_system42.cva)(["fixed bottom-4 right-4 flex flex-col-reverse"]),
+  "top-left": (0, import_system42.cva)(["fixed top-4 left-4 flex flex-col"]),
+  "top-right": (0, import_system42.cva)(["fixed top-4 right-4 flex flex-col"]),
+  top: (0, import_system42.cva)([
     "fixed top-4 left-1/2 right-auto -translate-x-1/2 flex flex-col items-center w-auto align-middle"
   ]),
-  bottom: (0, import_system45.cva)([
+  bottom: (0, import_system42.cva)([
     "fixed bottom-4 left-1/2 right-auto -translate-x-1/2 flex flex-col-reverse items-center w-auto align-middle"
   ])
 };
 
 // src/components/Tooltip.styles.ts
-var import_system46 = require("@marigold/system");
+var import_system43 = require("@marigold/system");
 var Tooltip = {
-  container: (0, import_system46.cva)(
+  container: (0, import_system43.cva)(
     [
       "relative z-50 max-w-70 rounded-md border px-3 py-1.5 text-sm",
       "placement-top:mb-2",
@@ -1146,7 +1212,7 @@ var Tooltip = {
       }
     }
   ),
-  arrow: (0, import_system46.cva)(
+  arrow: (0, import_system43.cva)(
     [
       // right
       "data-[placement=right]:[&_svg]:rotate-90",
@@ -1170,13 +1236,13 @@ var Tooltip = {
 };
 
 // src/components/Underlay.styles.ts
-var import_system47 = require("@marigold/system");
-var Underlay = (0, import_system47.cva)("bg-black/80 px-4");
+var import_system44 = require("@marigold/system");
+var Underlay = (0, import_system44.cva)("bg-black/80 px-4");
 
 // src/components/XLoader.styles.ts
-var import_system48 = require("@marigold/system");
+var import_system45 = require("@marigold/system");
 var XLoader = {
-  container: (0, import_system48.cva)("grid place-items-center text-brand", {
+  container: (0, import_system45.cva)("grid place-items-center text-brand", {
     variants: {
       variant: {
         default: "",
@@ -1193,7 +1259,7 @@ var XLoader = {
       size: "default"
     }
   }),
-  loader: (0, import_system48.cva)("size-full", {
+  loader: (0, import_system45.cva)("size-full", {
     variants: {
       variant: {
         default: "",
@@ -1210,13 +1276,13 @@ var XLoader = {
       size: "default"
     }
   }),
-  label: (0, import_system48.cva)("text-current text-sm")
+  label: (0, import_system45.cva)("text-current text-sm")
 };
 
 // src/components/Breadcrumbs.styles.ts
-var import_system49 = require("@marigold/system");
+var import_system46 = require("@marigold/system");
 var Breadcrumbs = {
-  container: (0, import_system49.cva)(["flex flex-wrap items-center"], {
+  container: (0, import_system46.cva)(["flex flex-wrap items-center"], {
     variants: {
       variant: {
         default: "text-foreground"
@@ -1232,9 +1298,9 @@ var Breadcrumbs = {
       size: "default"
     }
   }),
-  item: (0, import_system49.cva)("inline-flex items-center gap-1.5 whitespace-nowrap "),
-  link: (0, import_system49.cva)("hover:underline cursor-pointer"),
-  current: (0, import_system49.cva)("font-medium")
+  item: (0, import_system46.cva)("inline-flex items-center gap-1.5 whitespace-nowrap "),
+  link: (0, import_system46.cva)("hover:underline cursor-pointer"),
+  current: (0, import_system46.cva)("font-medium")
 };
 
 // src/theme.ts