@marigold/theme-rui 2.3.0 → 3.0.0

package/dist/index.mjs

@@ -1,1360 +1,1129 @@
+import { cva } from "@marigold/system";
+
+//#region rolldown:runtime
 var __defProp = Object.defineProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
+var __export = (all) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	return target;
 };
 
-// src/components/index.ts
-var components_exports = {};
-__export(components_exports, {
-  Accordion: () => Accordion,
-  Badge: () => Badge,
-  Breadcrumbs: () => Breadcrumbs,
-  Button: () => Button,
-  Calendar: () => Calendar,
-  Card: () => Card,
-  Checkbox: () => Checkbox,
-  CloseButton: () => CloseButton,
-  Collapsible: () => Collapsible,
-  ComboBox: () => ComboBox,
-  ContextualHelp: () => ContextualHelp,
-  DateField: () => DateField,
-  DatePicker: () => DatePicker,
-  Dialog: () => Dialog,
-  Divider: () => Divider,
-  Drawer: () => Drawer,
-  Field: () => Field,
-  Headline: () => Headline,
-  HelpText: () => HelpText,
-  IconButton: () => IconButton,
-  Input: () => Input,
-  Label: () => Label,
-  Link: () => Link,
-  List: () => List,
-  ListBox: () => ListBox,
-  Menu: () => Menu,
-  Modal: () => Modal,
-  MultiSelect: () => MultiSelect,
-  NumberField: () => NumberField,
-  Pagination: () => Pagination,
-  Popover: () => Popover,
-  ProgressCycle: () => ProgressCycle,
-  Radio: () => Radio,
-  SectionMessage: () => SectionMessage,
-  Select: () => Select,
-  Slider: () => Slider,
-  Switch: () => Switch,
-  Table: () => Table,
-  Tabs: () => Tabs,
-  Tag: () => Tag,
-  Text: () => Text,
-  TextArea: () => TextArea,
-  Toast: () => Toast,
-  Tooltip: () => Tooltip,
-  Underlay: () => Underlay,
-  XLoader: () => XLoader
-});
-
-// src/components/Accordion.styles.ts
-import { cva } from "@marigold/system";
-var Accordion = {
-  container: cva("flex-col", {
-    variants: {
-      variant: {
-        default: "",
-        card: "space-y-2"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }),
-  item: cva("bg-background border-b last:border-b-0 border-border", {
-    variants: {
-      variant: {
-        default: "",
-        card: [
-          "rounded-md border px-4 py-1 outline-none last:border-b",
-          // TODO: focus is still shown even if an item within the item is focused
-          "has-focus-visible:util-focus-ring outline-none"
-        ]
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }),
-  header: cva(
-    [
-      "flex w-full items-center justify-between gap-4 rounded-md py-2 cursor-pointer text-foreground",
-      "text-left text-sm font-semibold leading-6 transition-all",
-      "hover:no-underline",
-      "disabled:cursor-not-allowed disabled:text-disabled-foreground"
-    ],
-    {
-      variants: {
-        variant: {
-          default: "focus-visible:util-focus-ring outline-none",
-          card: "outline-none"
-        }
-      },
-      defaultVariants: {
-        variant: "default"
-      }
-    }
-  ),
-  content: cva("in-data-[expanded]:pb-2"),
-  icon: cva(
-    "pointer-events-none shrink-0 opacity-60 transition-transform duration-200"
-  )
+//#endregion
+//#region src/components/Accordion.styles.ts
+const Accordion = {
+	container: cva("flex-col", {
+		variants: { variant: {
+			default: "",
+			card: "space-y-2"
+		} },
+		defaultVariants: { variant: "default" }
+	}),
+	item: cva("bg-background border-b last:border-b-0 border-border", {
+		variants: { variant: {
+			default: "",
+			card: ["rounded-md border px-4 py-1 outline-none last:border-b", "has-focus-visible:util-focus-ring outline-none"]
+		} },
+		defaultVariants: { variant: "default" }
+	}),
+	header: cva([
+		"flex w-full items-center justify-between gap-4 rounded-md py-2 cursor-pointer text-foreground",
+		"text-left text-base font-semibold leading-6 transition-all",
+		"hover:no-underline",
+		"disabled:cursor-not-allowed disabled:text-disabled-foreground"
+	], {
+		variants: { variant: {
+			default: "focus-visible:util-focus-ring outline-none",
+			card: "outline-none"
+		} },
+		defaultVariants: { variant: "default" }
+	}),
+	content: cva("in-data-[expanded]:pb-2"),
+	icon: cva("pointer-events-none shrink-0 opacity-60 transition-transform duration-200")
 };
 
-// src/components/Badge.styles.ts
-import { cva as cva2 } from "@marigold/system";
-var Badge = cva2(
-  [
-    "inline-flex items-center justify-center rounded-full px-2 text-xs font-medium leading-normal transition-colors",
-    "focus-visible:util-focus-ring outline-none"
-  ],
-  {
-    variants: {
-      variant: {
-        default: "bg-muted text-foreground border border-border",
-        primary: "bg-brand text-brand-foreground ",
-        success: "bg-success-muted text-success-muted-foreground",
-        warning: "bg-warning-muted text-warning-muted-foreground",
-        info: "bg-info-muted text-info-muted-foreground",
-        error: "bg-destructive-muted text-destructive-muted-foreground",
-        admin: "text-access-admin-foreground border border-access-admin-foreground bg-background",
-        master: "text-access-master-foreground border border-access-master-foreground bg-background"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
+//#endregion
+//#region src/components/Badge.styles.ts
+const Badge = cva(["inline-flex items-center justify-center rounded-full px-2 text-xs font-medium leading-normal transition-colors", "focus-visible:util-focus-ring outline-none"], {
+	variants: { variant: {
+		default: "bg-muted text-foreground border border-border",
+		primary: "bg-brand text-brand-foreground ",
+		success: "bg-success-muted text-success-muted-foreground",
+		warning: "bg-warning-muted text-warning-muted-foreground",
+		info: "bg-info-muted text-info-muted-foreground",
+		error: "bg-destructive-muted text-destructive-muted-foreground",
+		admin: "text-access-admin-foreground border border-access-admin-foreground bg-background",
+		master: "text-access-master-foreground border border-access-master-foreground bg-background"
+	} },
+	defaultVariants: { variant: "default" }
+});
 
-// src/components/Button.styles.ts
-import { cva as cva3 } from "@marigold/system";
-var Button = cva3(
-  [
-    "inline-flex items-center justify-center 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",
-    "cursor-pointer"
-  ],
-  {
-    variants: {
-      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 shadow-xs hover:bg-destructive/90",
-        ghost: "hover:bg-hover hover:text-foreground",
-        link: "text-link util-touch-hitbox"
-      },
-      size: {
-        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"
-      }
-    ]
-  }
-);
+//#endregion
+//#region src/components/Button.styles.ts
+const Button = cva([
+	"inline-flex items-center justify-center 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",
+	"cursor-pointer"
+], {
+	variants: {
+		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 shadow-xs hover:bg-destructive/90",
+			ghost: "hover:bg-hover hover:text-foreground",
+			link: "text-link util-touch-hitbox"
+		},
+		size: {
+			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
-import { cva as cva4 } from "@marigold/system";
-var Card = cva4(["p-4 rounded-md"], {
-  variants: {
-    variant: {
-      default: "util-surface-raised",
-      master: "rounded-md bg-access-master/30 p-4 border border-access-master",
-      admin: "rounded-md bg-access-admin/30 p-4 border border-access-admin"
-    },
-    size: {
-      default: "",
-      full: "w-full"
-    }
-  },
-  defaultVariants: {
-    variant: "default",
-    size: "default"
-  }
+//#endregion
+//#region src/components/Card.styles.ts
+const Card = cva(["p-4 rounded-md"], {
+	variants: {
+		variant: {
+			default: "util-surface-raised",
+			master: "rounded-md bg-access-master/30 p-4 border border-access-master",
+			admin: "rounded-md bg-access-admin/30 p-4 border border-access-admin"
+		},
+		size: {
+			default: "",
+			full: "w-full"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
 });
 
-// src/components/Checkbox.styles.ts
-import { cva as cva5 } from "@marigold/system";
-var Checkbox = {
-  checkbox: cva5([
-    "grid size-4 shrink-0 place-content-center rounded",
-    "border border-input shadow-xs",
-    "group-focus-visible/checkbox:util-focus-ring outline-none",
-    "group-disabled/checkbox:group-selected/checkbox:bg-disabled group-disabled/checkbox:border-disabled! group-disabled/checkbox:text-disabled-foreground group-disabled/checkbox:cursor-not-allowed",
-    "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: cva5("cursor-pointer read-only:cursor-default gap-2"),
-  label: cva5([
-    "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: cva5()
+//#endregion
+//#region src/components/Checkbox.styles.ts
+const Checkbox = {
+	checkbox: cva([
+		"grid size-4 shrink-0 place-content-center rounded",
+		"border border-input shadow-xs",
+		"group-focus-visible/checkbox:util-focus-ring outline-none",
+		"group-disabled/checkbox:group-selected/checkbox:bg-disabled group-disabled/checkbox:border-disabled! group-disabled/checkbox:text-disabled-foreground group-disabled/checkbox:cursor-not-allowed",
+		"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: cva("cursor-pointer read-only:cursor-default gap-2"),
+	label: 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: cva()
 };
 
-// src/components/Calendar.styles.ts
-import { cva as cva6 } from "@marigold/system";
-var Calendar = {
-  calendar: cva6(
-    "rounded-md border group-[[data-trigger]]/popover:border-0 border-border p-2"
-  ),
-  calendarCell: cva6([
-    "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]",
-    "disabled:pointer-events-none data-[unavailable]:pointer-events-none data-focus-visible:z-10 data-[hovered]:bg-hover selected:bg-brand data-[hovered]:text-foreground selected:text-brand-foreground data-[unavailable]:line-through",
-    "disabled:opacity-30 data-[unavailable]:opacity-30",
-    "focus-visible:util-focus-borderless-ring outline-none"
-  ]),
-  calendarControllers: cva6([
-    "size-9 rounded-lg",
-    "text-muted-foreground/80",
-    "transition-colors",
-    "focus-visible:util-focus-ring outline-none"
-  ]),
-  calendarHeader: cva6([
-    "size-9 rounded-lg p-0 text-xs font-medium text-muted-foreground/80"
-  ]),
-  calendarGrid: cva6("[&_td]:p-2"),
-  calendarListboxButton: cva6([
-    "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-selected:bg-brand aria-selected:text-brand-foreground aria-selected:shadow-xs aria-selected:hover:bg-brand/90"
-  ]),
-  select: cva6([
-    "[&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",
-    "h-input",
-    "disabled:cursor-not-allowed disabled:text-disabled-foreground disabled:bg-disabled",
-    "cursor-pointer"
-  ])
+//#endregion
+//#region src/components/Calendar.styles.ts
+const Calendar = {
+	calendar: cva("rounded-md border group-[[data-trigger]]/popover:border-0 border-border p-2"),
+	calendarCell: 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]",
+		"disabled:pointer-events-none data-[unavailable]:pointer-events-none data-focus-visible:z-10 data-[hovered]:bg-hover selected:bg-brand data-[hovered]:text-foreground selected:text-brand-foreground data-[unavailable]:line-through",
+		"disabled:opacity-30 data-[unavailable]:opacity-30",
+		"focus-visible:util-focus-borderless-ring outline-none"
+	]),
+	calendarControllers: cva([
+		"size-9 rounded-lg",
+		"text-muted-foreground/80",
+		"transition-colors",
+		"focus-visible:util-focus-ring outline-none"
+	]),
+	calendarHeader: cva(["size-9 rounded-lg p-0 text-xs font-medium text-muted-foreground/80"]),
+	calendarGrid: cva("[&_td]:p-2"),
+	calendarListboxButton: 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-selected:bg-brand aria-selected:text-brand-foreground aria-selected:shadow-xs aria-selected:hover:bg-brand/90"
+	]),
+	select: 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",
+		"h-input",
+		"disabled:cursor-not-allowed disabled:text-disabled-foreground disabled:bg-disabled",
+		"cursor-pointer"
+	])
 };
 
-// src/components/CloseButton.styles.ts
-import { cva as cva7 } from "@marigold/system";
-var CloseButton = cva7([
-  "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"
+//#endregion
+//#region src/components/CloseButton.styles.ts
+const CloseButton = 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
-import { cva as cva8 } from "@marigold/system";
-var ComboBox = cva8(
-  "text-muted-foreground/80 right-2"
-);
+//#endregion
+//#region src/components/ComboBox.styles.ts
+const ComboBox = cva("text-muted-foreground/80 right-2");
 
-// src/components/Collapsible.styles.ts
-import { cva as cva9 } from "@marigold/system";
-var Collapsible = {
-  container: cva9(),
-  trigger: cva9(
-    [
-      "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: cva9()
+//#endregion
+//#region src/components/Collapsible.styles.ts
+const Collapsible = {
+	container: cva(),
+	trigger: 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: cva()
 };
 
-// src/components/ContextualHelp.styles.ts
-import { cva as cva10 } from "@marigold/system";
-var ContextualHelp = {
-  trigger: cva10(
-    [
-      "inline-flex items-center justify-center rounded-full transition-[color,box-shadow] hover:bg-hover hover:text-foreground",
-      "[&_svg]:pointer-events-none [&_svg]:shrink-0",
-      "focus-visible:util-focus-ring outline-none",
-      "cursor-pointer"
-    ],
-    {
-      variants: {
-        variant: {
-          help: "",
-          info: ""
-        },
-        size: {
-          default: "size-button [&_svg]:size-4",
-          small: "size-button-small [&_svg]:size-3.5",
-          large: "size-button-large [&_svg]:size-5"
-        }
-      },
-      defaultVariants: {
-        size: "default"
-      }
-    }
-  ),
-  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")
+//#endregion
+//#region src/components/ContextualHelp.styles.ts
+const ContextualHelp = {
+	trigger: cva([
+		"inline-flex items-center justify-center rounded-full transition-[color,box-shadow] hover:bg-hover hover:text-foreground",
+		"[&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"focus-visible:util-focus-ring outline-none",
+		"cursor-pointer"
+	], {
+		variants: {
+			variant: {
+				help: "",
+				info: ""
+			},
+			size: {
+				default: "size-button [&_svg]:size-4",
+				small: "size-button-small [&_svg]:size-3.5",
+				large: "size-button-large [&_svg]:size-5"
+			}
+		},
+		defaultVariants: { size: "default" }
+	}),
+	popover: cva([
+		"flex flex-col gap-0 rounded-xl p-5 util-surface-overlay",
+		"data-[small]:max-w-3xs data-[medium]:max-w-xs data-[large]:max-w-md",
+		"overflow-y-auto util-scrollbar"
+	]),
+	container: cva(""),
+	title: cva("text-lg font-semibold mb-1"),
+	content: cva("text-sm")
 };
 
-// src/components/DateField.styles.ts
-import { cva as cva12 } from "@marigold/system";
-
-// src/components/Input.styles.ts
-import { cva as cva11 } from "@marigold/system";
-var inputContainer = "flex w-full px-3 py-2 rounded-lg shadow-xs 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: cva11([
-    inputContainer,
-    inputDisabled,
-    inputInvalid,
-    "focus:util-focus-ring outline-none",
-    inputReadOnly,
-    "h-input",
-    "placeholder:text-placeholder",
-    "[&[type=file]]:cursor-pointer [&[type=file]]:border-solid [&[type=file]]:bg-background [&[type=file]]:p-0 [&[type=file]]:pr-3 [&[type=file]]:italic [&[type=file]]:text-muted-foreground/70",
-    "file:cursor-pointer file:me-3 file:h-full file:border-0 file:border-r file:border-solid file:border-input file:bg-transparent file:px-3 file:text-sm file:font-medium file:not-italic file:text-foreground",
-    "group-[[data-icon]]/input:pl-8",
-    "group-[[data-action]]/input:pr-7"
-  ]),
-  icon: cva11([
-    "pointer-events-none left-1",
-    "text-muted-foreground disabled:text-disabled-foreground"
-  ]),
-  action: cva11(["text-muted-foreground right-1"])
+//#endregion
+//#region src/components/Input.styles.ts
+const inputContainer = "flex w-full px-3 py-2 rounded-lg shadow-xs border border-input bg-background text-sm text-foreground transition-shadow group-read-only/field:bg-muted";
+const inputDisabled = "disabled:cursor-not-allowed disabled:text-disabled-foreground disabled:bg-disabled";
+const inputInvalid = "group-invalid/field:border-destructive group-invalid/field:focus:border-destructive group-invalid/field:focus:ring-destructive/20";
+const inputReadOnly = "group-read-only/field:bg-muted";
+const Input = {
+	input: cva([
+		inputContainer,
+		inputDisabled,
+		inputInvalid,
+		"focus:util-focus-ring outline-none",
+		inputReadOnly,
+		"h-input",
+		"placeholder:text-placeholder",
+		"[&[type=file]]:cursor-pointer [&[type=file]]:border-solid [&[type=file]]:bg-background [&[type=file]]:p-0 [&[type=file]]:pr-3 [&[type=file]]:italic [&[type=file]]:text-muted-foreground/70",
+		"file:cursor-pointer file:me-3 file:h-full file:border-0 file:border-r file:border-solid file:border-input file:bg-transparent file:px-3 file:text-sm file:font-medium file:not-italic file:text-foreground",
+		"group-[[data-icon]]/input:pl-8",
+		"group-[[data-action]]/input:pr-7"
+	]),
+	icon: cva(["pointer-events-none left-2", "text-muted-foreground disabled:text-disabled-foreground"]),
+	action: cva(["text-muted-foreground pr-1"])
 };
 
-// src/components/DateField.styles.ts
-var DateField = {
-  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",
-    "data-[focus-within]:util-focus-ring outline-0"
-  ]),
-  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",
-    "group/segment",
-    "outline-0",
-    "whitespace-pre",
-    "data-[placeholder]:text-placeholder text-foreground data-[focused]:bg-focus data-[focused]:text-foreground rounded leading-none"
-  ]),
-  action: cva12(
-    "fill-muted-foreground disabled:text-disabled-foreground group-invalid/field:fill-destructive"
-  )
+//#endregion
+//#region src/components/DateField.styles.ts
+const DateField = {
+	field: cva([
+		"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",
+		"data-[focus-within]:util-focus-ring outline-0"
+	]),
+	segment: cva([
+		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",
+		"group/segment",
+		"outline-0",
+		"whitespace-pre",
+		"data-[placeholder]:text-placeholder text-foreground data-[focused]:bg-focus data-[focused]:text-foreground rounded leading-none"
+	]),
+	action: cva("fill-muted-foreground disabled:text-disabled-foreground group-invalid/field:fill-destructive")
 };
 
-// src/components/DatePicker.styles.ts
-import { cva as cva13 } from "@marigold/system";
-var DatePicker = cva13([
-  "relative h-input -top-2",
-  "text-muted-foreground/80",
-  "hover:text-brand",
-  "disabled:cursor-not-allowed"
+//#endregion
+//#region src/components/DatePicker.styles.ts
+const DatePicker = cva([
+	"relative h-input -top-2",
+	"text-muted-foreground/80",
+	"hover:text-brand",
+	"disabled:cursor-not-allowed"
 ]);
 
-// src/components/Dialog.styles.ts
-import { cva as cva14 } from "@marigold/system";
-var Dialog = {
-  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"
-    ],
-    {
-      variants: {
-        variant: {},
-        // Does not do anything, just to make the size appear in the appearance demo (Modal is setting the size)
-        size: {
-          xsmall: "",
-          small: "",
-          medium: ""
-        }
-      }
-    }
-  ),
-  header: cva14("flex flex-col gap-1 text-center sm:text-left"),
-  title: cva14("text-lg font-semibold mb-1"),
-  content: cva14("text-muted-foreground text-sm"),
-  actions: cva14("flex flex-col-reverse gap-3 sm:flex-row sm:justify-end mt-4")
+//#endregion
+//#region src/components/Dialog.styles.ts
+const Dialog = {
+	closeButton: cva(["absolute top-6 right-3", "size-7 "]),
+	container: cva(["flex flex-col gap-0 rounded-xl p-6 overflow-y-auto", "util-surface-overlay"], { variants: {
+		variant: {},
+		size: {
+			xsmall: "",
+			small: "",
+			medium: ""
+		}
+	} }),
+	header: cva("flex flex-col gap-1 text-center sm:text-left"),
+	title: cva("text-lg font-semibold mb-1"),
+	content: cva("text-muted-foreground text-sm"),
+	actions: cva("flex flex-col-reverse gap-3 sm:flex-row sm:justify-end mt-4")
 };
 
-// src/components/Divider.styles.ts
-import { cva as cva15 } from "@marigold/system";
-var Divider = cva15("bg-border h-px w-full", {
-  variants: {
-    variant: {
-      default: "",
-      bold: "h-0.5"
-    }
-  },
-  defaultVariants: {
-    variant: "default"
-  }
+//#endregion
+//#region src/components/Divider.styles.ts
+const Divider = cva("bg-border h-px w-full", {
+	variants: { variant: {
+		default: "",
+		bold: "h-0.5"
+	} },
+	defaultVariants: { variant: "default" }
 });
 
-// src/components/Drawer.styles.ts
-import { cva as cva16 } from "@marigold/system";
-var Drawer = {
-  overlay: cva16([
-    "group/overlay z-40",
-    "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: cva16(
-    [
-      "w-full relative grid-rows-[auto_1fr_auto]",
-      "util-surface-overlay",
-      "data-[placement=top]:w-full data-[placement=bottom]:w-full"
-    ],
-    {
-      variants: {
-        size: {
-          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"
-        }
-      }
-    }
-  ),
-  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"
-  )
+//#endregion
+//#region src/components/Drawer.styles.ts
+const Drawer = {
+	overlay: cva([
+		"group/overlay z-40",
+		"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: cva([
+		"w-full relative grid-rows-[auto_1fr_auto]",
+		"util-surface-overlay",
+		"data-[placement=top]:w-full data-[placement=bottom]:w-full"
+	], { variants: { size: {
+		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"
+	} } }),
+	closeButton: cva(["absolute top-3.5 right-3 z-50", "size-7"]),
+	header: cva("border-border border-b px-6 py-4"),
+	title: cva("font-semibold text-base"),
+	content: cva("px-6 py-4 overflow-y-auto outline-none"),
+	actions: cva("flex flex-row gap-3 justify-end border-border border-t px-6 py-4")
 };
 
-// src/components/IconButton.styles.ts
-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"
-    }
-  }
-});
+//#endregion
+//#region src/components/IconButton.styles.ts
+const IconButton = cva("", { 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" } } });
 
-// src/components/Field.styles.ts
-import { cva as cva18 } from "@marigold/system";
-var Field = cva18("space-y-2");
+//#endregion
+//#region src/components/Field.styles.ts
+const Field = cva("space-y-2");
 
-// src/components/Headline.styles.ts
-import { cva as cva19 } from "@marigold/system";
-var Headline = cva19("", {
-  variants: {
-    size: {
-      "level-1": "text-3xl font-extrabold",
-      "level-2": "text-2xl font-bold",
-      "level-3": "text-xl font-semibold",
-      "level-4": "text-lg font-semibold",
-      "level-5": "text-base font-medium",
-      "level-6": "text-base font-normal"
-    }
-  }
-});
+//#endregion
+//#region src/components/Headline.styles.ts
+const Headline = cva("", { variants: { size: {
+	"level-1": "text-3xl font-extrabold",
+	"level-2": "text-2xl font-bold",
+	"level-3": "text-xl font-semibold",
+	"level-4": "text-lg font-semibold",
+	"level-5": "text-base font-medium",
+	"level-6": "text-base font-normal"
+} } });
 
-// src/components/HelpText.styles.ts
-import { cva as cva20 } from "@marigold/system";
-var HelpText = {
-  container: cva20([
-    "text-xs text-muted-foreground group-disabled/field:text-disabled-foreground",
-    "group-invalid/field:text-destructive",
-    /**
-     * Removes the spacing from the field when when there are hidden
-     * elements (e.g. the hidden select rendered by react-aria).
-     */
-    'has-[+_[aria-hidden="true"]]:mb-0'
-  ]),
-  icon: cva20("")
+//#endregion
+//#region src/components/HelpText.styles.ts
+const HelpText = {
+	container: cva([
+		"text-xs text-muted-foreground group-disabled/field:text-disabled-foreground",
+		"group-invalid/field:text-destructive",
+		"has-[+_[aria-hidden=\"true\"]]:mb-0"
+	]),
+	icon: cva("")
 };
 
-// src/components/Label.styles.ts
-import { cva as cva21 } from "@marigold/system";
-var Label = {
-  container: cva21([
-    "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: cva21(
-    "group-required/field:block text-destructive align-super size-2.5"
-  )
+//#endregion
+//#region src/components/Label.styles.ts
+const Label = {
+	container: 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: cva("group-required/field:block text-destructive -ml-1")
 };
 
-// src/components/Link.styles.ts
-import { cva as cva22 } from "@marigold/system";
-var Link = cva22(
-  "aria-[disabled]:cursor-not-allowed",
-  {
-    variants: {
-      variant: {
-        default: "text-link font-normal",
-        secondary: "font-medium text-foreground underline hover:no-underline"
-      },
-      size: {
-        default: "",
-        small: "text-sm"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
+//#endregion
+//#region src/components/Link.styles.ts
+const Link = cva("aria-[disabled]:cursor-not-allowed", {
+	variants: {
+		variant: {
+			default: "text-link font-normal",
+			secondary: "font-medium text-foreground underline hover:no-underline"
+		},
+		size: {
+			default: "",
+			small: "text-sm"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
 
-// src/components/List.styles.ts
-import { cva as cva23 } from "@marigold/system";
-var List = {
-  ul: cva23("ml-6 list-outside list-disc space-y-1 marker:text-foreground/50", {
-    variants: {
-      size: {
-        default: "",
-        small: "*:text-sm"
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }),
-  ol: cva23(
-    "ml-6 list-outside list-decimal space-y-1 marker:text-foreground/50",
-    {
-      variants: {
-        size: {
-          default: "",
-          small: "*:text-sm"
-        }
-      },
-      defaultVariants: {
-        size: "default"
-      }
-    }
-  ),
-  item: cva23("")
+//#endregion
+//#region src/components/List.styles.ts
+const List = {
+	ul: cva("ml-6 list-outside list-disc space-y-1 marker:text-foreground/50", {
+		variants: { size: {
+			default: "",
+			small: "*:text-sm"
+		} },
+		defaultVariants: { size: "default" }
+	}),
+	ol: cva("ml-6 list-outside list-decimal space-y-1 marker:text-foreground/50", {
+		variants: { size: {
+			default: "",
+			small: "*:text-sm"
+		} },
+		defaultVariants: { size: "default" }
+	}),
+	item: cva("")
 };
 
-// src/components/ListBox.styles.ts
-import { cva as cva24 } from "@marigold/system";
-var ListBox = {
-  container: cva24([
-    "overflow-hidden rounded-md border border-input group-[[data-trigger]]/popover:border-0"
-  ]),
-  list: cva24(["bg-background p-1 text-sm outline-0"]),
-  item: cva24([
-    "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",
-    "hover:bg-hover hover:text-hover-foreground",
-    "disabled:cursor-not-allowed disabled:text-disabled-foreground",
-    "focus-visible:util-focus-ring outline-none",
-    "cursor-default data-selection-mode:cursor-pointer"
-  ]),
-  section: cva24(""),
-  header: cva24(
-    "[&_header]:px-2 [&_header]:py-1.5 [&_header]:text-xs [&_header]:font-medium [&_header]:text-muted-foreground"
-  )
+//#endregion
+//#region src/components/ListBox.styles.ts
+const ListBox = {
+	container: cva(["overflow-hidden rounded-md border border-input group-[[data-trigger]]/popover:border-0"]),
+	list: cva(["bg-background p-1 text-sm outline-0 space-y-px"]),
+	item: 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",
+		"hover:bg-hover hover:text-hover-foreground",
+		"disabled:cursor-not-allowed disabled:text-disabled-foreground",
+		"focus-visible:util-focus-ring outline-none focus-visible:z-1",
+		"cursor-default data-selection-mode:cursor-pointer"
+	]),
+	section: cva(""),
+	header: cva("[&_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 cva25 } from "@marigold/system";
-var Menu = {
-  container: cva25([
-    "text-foreground z-50 overflow-hidden rounded-md p-1 outline-none"
-  ]),
-  item: cva25(
-    [
-      "relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none text-nowrap",
-      "disabled:text-disabled-foreground",
-      "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4"
-    ],
-    {
-      variants: {
-        variant: {
-          default: "text-foreground focus:bg-focus [&_svg]:opacity-60",
-          destructive: "text-destructive focus:bg-destructive/10"
-        }
-      },
-      defaultVariants: {
-        variant: "default"
-      }
-    }
-  ),
-  section: cva25(
-    "text-muted-foreground px-2 py-1.5 text-xs font-medium border-t border-t-border in-first:border-t-0"
-  ),
-  button: cva25(
-    [
-      "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",
-      "focus-visible:util-focus-ring outline-none disabled:util-disabled",
-      "cursor-pointer"
-    ],
-    {
-      variants: {
-        variant: {
-          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: {
-          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: "default",
-        size: "default"
-      }
-    }
-  )
+//#endregion
+//#region src/components/Menu.styles.ts
+const Menu = {
+	container: cva(["text-foreground z-50 overflow-hidden rounded-md p-1 outline-none"]),
+	item: cva([
+		"relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none text-nowrap",
+		"disabled:text-disabled-foreground",
+		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4"
+	], {
+		variants: { variant: {
+			default: "text-foreground focus:bg-focus [&_svg]:opacity-60",
+			destructive: "text-destructive focus:bg-destructive/10"
+		} },
+		defaultVariants: { variant: "default" }
+	}),
+	section: cva("text-muted-foreground px-2 py-1.5 text-xs font-medium border-t border-t-border in-first:border-t-0"),
+	button: 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",
+		"focus-visible:util-focus-ring outline-none disabled:util-disabled",
+		"cursor-pointer"
+	], {
+		variants: {
+			variant: {
+				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: {
+				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: "default",
+			size: "default"
+		}
+	})
 };
 
-// src/components/Modal.styles.ts
-import { cva as cva26 } from "@marigold/system";
-var Modal = cva26(
-  [
-    "sm:max-h-[min(640px,80vh)]",
-    "[--dialog-spacing-x:1rem]",
-    // Minimal padding to the horizontal edges
-    "w-[min(calc(100%_-_var(--dialog-spacing-x)),calc(var(--dialog-width)_-_var(--dialog-spacing-x)))]"
-  ],
-  {
-    variants: {
-      size: {
-        xsmall: "[--dialog-width:480px]",
-        // "xs" breakpoint
-        small: "[--dialog-width:640px]",
-        // sm breakpoint
-        medium: "[--dialog-width:768px]"
-        // md breakpoint
-      }
-    },
-    defaultVariants: {
-      size: "small"
-    }
-  }
-);
+//#endregion
+//#region src/components/Modal.styles.ts
+const Modal = cva([
+	"sm:max-h-[min(640px,80vh)]",
+	"[--dialog-spacing-x:1rem]",
+	"w-[min(calc(100%_-_var(--dialog-spacing-x)),calc(var(--dialog-width)_-_var(--dialog-spacing-x)))]"
+], {
+	variants: { size: {
+		xsmall: "[--dialog-width:480px]",
+		small: "[--dialog-width:640px]",
+		medium: "[--dialog-width:768px]"
+	} },
+	defaultVariants: { size: "small" }
+});
 
-// src/components/Multiselect.styles.ts
-import { cva as cva27 } from "@marigold/system";
-var MultiSelect = {
-  field: cva27("space-y-2"),
-  container: cva27([
-    "bg-background shadow-xs border",
-    "px-3 text-sm text-foreground transition-shadow",
-    "border border-input rounded-lg outline-hidden",
-    "aria-disabled:bg-disabled aria-disabled:text-disabled-foreground aria-disabled:hover:border-input aria-disabled:border-input aria-disabled:cursor-not-allowed",
-    "has-[input[data-invalid=true]]:border-destructive has-[input[data-invalid=true][data-focused=true]]:!border-destructive has-[input[data-invalid=true][data-focused=true]]:!ring-destructive/20",
-    "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",
-    "min-h-input"
-  ]),
-  input: cva27([
-    "bg-transparent flex-1 h-full",
-    "leading-loose",
-    "data-[focused]:outline-hidden outline-hidden border-0",
-    "disabled:cursor-not-allowed",
-    "group-data-[icon]/input:pl-5",
-    "group-data-[action]/input:pr-8",
-    "placeholder:text-placeholder"
-  ]),
-  tag: cva27([
-    "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: cva27(
-    "size-4 cursor-pointer border-none bg-transparent p-0 leading-normal outline-0"
-  ),
-  icon: cva27("left-1"),
-  listContainer: cva27(["util-surface-overlay mt-0.5 rounded-lg outline-0"]),
-  list: cva27("pointer-events-auto space-y-1 p-1"),
-  option: cva27([
-    "text-sm text-foreground",
-    "flex flex-col",
-    "cursor-pointer p-2 outline-hidden",
-    "[&.isFocused:not([aria-disabled=true])]:!text-foreground [&.isFocused[aria-disabled=true]]:bg-transparent",
-    "aria-disabled:text-disabled-foreground aria-disabled:cursor-not-allowed",
-    "[&.isFocused:not([aria-disabled=true])]:!bg-hover"
-  ]),
-  valueContainer: cva27("gap-2")
+//#endregion
+//#region src/components/Multiselect.styles.ts
+const MultiSelect = {
+	field: cva("space-y-2"),
+	container: cva([
+		"bg-background shadow-xs border",
+		"px-3 text-sm text-foreground transition-shadow",
+		"border border-input rounded-lg outline-hidden",
+		"aria-disabled:bg-disabled aria-disabled:text-disabled-foreground aria-disabled:hover:border-input aria-disabled:border-input aria-disabled:cursor-not-allowed",
+		"has-[input[data-invalid=true]]:border-destructive has-[input[data-invalid=true][data-focused=true]]:!border-destructive has-[input[data-invalid=true][data-focused=true]]:!ring-destructive/20",
+		"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",
+		"min-h-input"
+	]),
+	input: cva([
+		"bg-transparent flex-1 h-full",
+		"leading-loose",
+		"data-[focused]:outline-hidden outline-hidden border-0",
+		"disabled:cursor-not-allowed",
+		"group-data-[icon]/input:pl-5",
+		"group-data-[action]/input:pr-8",
+		"placeholder:text-placeholder"
+	]),
+	tag: 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: cva("size-4 cursor-pointer border-none bg-transparent p-0 leading-normal outline-0"),
+	icon: cva("left-1"),
+	listContainer: cva(["util-surface-overlay mt-0.5 rounded-lg outline-0"]),
+	list: cva("pointer-events-auto space-y-1 p-1"),
+	option: cva([
+		"text-sm text-foreground",
+		"flex flex-col",
+		"cursor-pointer p-2 outline-hidden",
+		"[&.isFocused:not([aria-disabled=true])]:!text-foreground [&.isFocused[aria-disabled=true]]:bg-transparent",
+		"aria-disabled:text-disabled-foreground aria-disabled:cursor-not-allowed",
+		"[&.isFocused:not([aria-disabled=true])]:!bg-hover"
+	]),
+	valueContainer: cva("gap-2")
 };
 
-// src/components/NumberField.styles.ts
-import { cva as cva28 } from "@marigold/system";
-var NumberField = {
-  group: cva28([
-    "rounded-lg h-input bg-background",
-    "has-focus-visible:util-focus-ring outline-none",
-    inputInvalid,
-    inputReadOnly,
-    "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: cva28([
-    "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: cva28([
-    "tabular-nums text-foreground px-3 py-2",
-    "min-w-0 flex-1 bg-transparent",
-    "group-[[data-stepper]]/field:text-center",
-    "disabled:text-disabled-foreground disabled:bg-disabled"
-  ])
+//#endregion
+//#region src/components/NumberField.styles.ts
+const NumberField = {
+	group: cva([
+		"rounded-lg h-input bg-background",
+		"has-focus-visible:util-focus-ring outline-none",
+		inputInvalid,
+		inputReadOnly,
+		"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: 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: cva([
+		"tabular-nums text-foreground px-3 py-2",
+		"min-w-0 flex-1 bg-transparent",
+		"group-[[data-stepper]]/field:text-center",
+		"disabled:text-disabled-foreground disabled:bg-disabled"
+	])
 };
 
-// src/components/Popover.styles.ts
-import { cva as cva29 } from "@marigold/system";
-var Popover = cva29([
-  "group/popover",
-  "text-foreground z-50 overflow-y-auto overflow-x-hidden rounded-md outline-0",
-  "placement-top:mb-1",
-  "placement-bottom:mt-1",
-  "placement-right:ml-1",
-  "placement-left:mr-1",
-  "util-surface-overlay"
+//#endregion
+//#region src/components/Popover.styles.ts
+const Popover = cva([
+	"group/popover",
+	"text-foreground z-50 overflow-y-auto overflow-x-hidden rounded-md outline-0",
+	"placement-top:mb-1",
+	"placement-bottom:mt-1",
+	"placement-right:ml-1",
+	"placement-left:mr-1",
+	"util-surface-overlay"
 ]);
 
-// src/components/Radio.styles.ts
-import { cva as cva30 } from "@marigold/system";
-var Radio = {
-  container: cva30("group-disabled/radio:cursor-not-allowed"),
-  label: cva30([
-    "text-sm font-normal cursor-pointer",
-    "group-disabled/radio:text-disabled-foreground group-disabled/radio:cursor-not-allowed"
-  ]),
-  radio: cva30([
-    "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: cva30()
+//#endregion
+//#region src/components/Radio.styles.ts
+const Radio = {
+	container: cva("group-disabled/radio:cursor-not-allowed"),
+	label: cva(["text-sm font-normal cursor-pointer", "group-disabled/radio:text-disabled-foreground group-disabled/radio:cursor-not-allowed"]),
+	radio: 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: cva()
 };
 
-// src/components/Pagination.styles.ts
-import { cva as cva31 } from "@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"
+//#endregion
+//#region src/components/Pagination.styles.ts
+const 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: cva31("flex items-center justify-center space-x-2"),
-  navigationButton: cva31([
-    ...button,
-    "disabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground",
-    "h-9 py-2 gap-1 px-2.5"
-  ]),
-  pageButton: cva31([
-    ...button,
-    "bg-background size-9",
-    "data-[selected=true]:border data-[selected=true]:border-input data-[selected=true]:shadow-xs"
-  ]),
-  icon: cva31("h-4 w-4"),
-  ellipsis: cva31("text-foreground flex h-8 w-8 items-center justify-center")
+const Pagination = {
+	container: cva("flex items-center justify-center space-x-2"),
+	navigationButton: cva([
+		...button,
+		"disabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground",
+		"h-9 py-2 gap-1 px-2.5"
+	]),
+	pageButton: cva([
+		...button,
+		"bg-background size-9",
+		"data-[selected=true]:border data-[selected=true]:border-input data-[selected=true]:shadow-xs"
+	]),
+	icon: cva("h-4 w-4"),
+	ellipsis: cva("text-foreground flex h-8 w-8 items-center justify-center")
 };
 
-// src/components/ProgressCycle.styles.ts
-import { cva as cva32 } from "@marigold/system";
-var ProgressCycle = cva32([
-  "stroke-foreground"
-]);
+//#endregion
+//#region src/components/ProgressCycle.styles.ts
+const ProgressCycle = cva(["stroke-foreground"]);
 
-// src/components/SectionMessage.styles.ts
-import { cva as cva33 } from "@marigold/system";
-var SectionMessage = {
-  container: cva33(
-    [
-      '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"
-    ],
-    {
-      variants: {
-        variant: {
-          success: "border-success-muted-accent bg-success-muted text-success-muted-foreground",
-          warning: "border-warning-muted-accent bg-warning-muted text-warning-muted-foreground",
-          info: "border-info-muted-accent bg-info-muted text-info-muted-foreground",
-          error: "border-destructive-muted-accent bg-destructive-muted text-destructive-muted-foreground"
-        }
-      },
-      defaultVariants: {
-        variant: "info"
-      }
-    }
-  ),
-  title: cva33("text-sm font-medium"),
-  content: cva33("text-muted-foreground text-sm leading-5 font-normal", {
-    variants: {
-      variant: {
-        success: "text-success-muted-foreground",
-        warning: "text-warning-muted-foreground",
-        info: "text-info-muted-foreground",
-        error: "text-destructive-muted-foreground"
-      }
-    },
-    defaultVariants: {
-      variant: "info"
-    }
-  }),
-  icon: cva33("h-6 w-6 align-baseline leading-none -mt-0.5", {
-    variants: {
-      variant: {
-        success: "text-success-muted-accent",
-        warning: "text-warning-muted-accent",
-        info: "text-info-muted-accent",
-        error: "text-destructive-muted-accent"
-      }
-    },
-    defaultVariants: {
-      variant: "info"
-    }
-  }),
-  close: cva33([
-    "size-8 text-foreground",
-    "[&_svg]:size-6",
-    "-my-1.5 -me-2"
-    // align button with title
-  ])
+//#endregion
+//#region src/components/SectionMessage.styles.ts
+const SectionMessage = {
+	container: 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"], {
+		variants: { variant: {
+			success: "border-success-muted-accent bg-success-muted text-success-muted-foreground",
+			warning: "border-warning-muted-accent bg-warning-muted text-warning-muted-foreground",
+			info: "border-info-muted-accent bg-info-muted text-info-muted-foreground",
+			error: "border-destructive-muted-accent bg-destructive-muted text-destructive-muted-foreground"
+		} },
+		defaultVariants: { variant: "info" }
+	}),
+	title: cva("text-sm font-medium"),
+	content: cva("text-muted-foreground text-sm leading-5 font-normal", {
+		variants: { variant: {
+			success: "text-success-muted-foreground",
+			warning: "text-warning-muted-foreground",
+			info: "text-info-muted-foreground",
+			error: "text-destructive-muted-foreground"
+		} },
+		defaultVariants: { variant: "info" }
+	}),
+	icon: cva("h-6 w-6 align-baseline leading-none -mt-0.5", {
+		variants: { variant: {
+			success: "text-success-muted-accent",
+			warning: "text-warning-muted-accent",
+			info: "text-info-muted-accent",
+			error: "text-destructive-muted-accent"
+		} },
+		defaultVariants: { variant: "info" }
+	}),
+	close: cva([
+		"size-8 text-foreground",
+		"[&_svg]:size-6",
+		"-my-1.5 -me-2"
+	])
 };
 
-// src/components/Select.styles.ts
-import { cva as cva34 } from "@marigold/system";
-var Select = {
-  icon: cva34("text-muted-foreground/80"),
-  select: cva34([
-    inputContainer,
-    inputInvalid,
-    inputDisabled,
-    "focus-visible:util-focus-ring outline-none",
-    "h-input",
-    "cursor-pointer",
-    "*:data-placeholder:text-placeholder",
-    /**
-     * Removes the spacing from the field when there is no
-     * helptext. Spacing is applied because the select is followed
-     * by a hidden select that is rendered by react-aria.
-     */
-    'has-[+_[aria-hidden="true"]]:mb-0'
-  ])
+//#endregion
+//#region src/components/Select.styles.ts
+const Select = {
+	icon: cva("text-muted-foreground/80"),
+	select: cva([
+		inputContainer,
+		inputInvalid,
+		inputDisabled,
+		"focus-visible:util-focus-ring outline-none",
+		"h-input",
+		"cursor-pointer",
+		"*:data-placeholder:text-placeholder",
+		"has-[+_[aria-hidden=\"true\"]]:mb-0"
+	])
 };
 
-// src/components/Slider.styles.ts
-import { cva as cva35 } from "@marigold/system";
-var Slider = {
-  container: cva35("*:aria-hidden:hidden"),
-  track: cva35([
-    "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: cva35([
-    "absolute bg-black data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full rounded-lg"
-  ]),
-  thumb: cva35([
-    "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: cva35("text-foreground text-sm")
+//#endregion
+//#region src/components/Slider.styles.ts
+const Slider = {
+	container: cva("*:aria-hidden:hidden"),
+	track: 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: cva(["absolute bg-black data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full rounded-lg"]),
+	thumb: 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: cva("text-foreground text-sm")
 };
 
-// src/components/Switch.styles.ts
-import { cva as cva36 } from "@marigold/system";
-var Switch = {
-  container: cva36(
-    "disabled:cursor-not-allowed disabled:text-disabled-foreground"
-  ),
-  track: cva36([
-    "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
-    "group-disabled/switch:bg-disabled group-disabled/switch:text-disabled-foreground group-selected/switch:group-disabled/switch:bg-disabled group-selected/switch:group-disabled/switch:text-disabled-foreground",
-    "group-selected/switch:bg-brand bg-input",
-    "group-focus-visible/switch:util-focus-borderless-ring outline-none"
-  ]),
-  thumb: cva36([
-    "pointer-events-none block size-5 rounded-full",
-    "bg-background shadow-xs",
-    "ring-0 transition-transform duration-150 ease-out-quint",
-    "group-selected/switch:translate-x-4 translate-x-0"
-  ])
+//#endregion
+//#region src/components/Switch.styles.ts
+const Switch = {
+	container: cva("disabled:cursor-not-allowed disabled:text-disabled-foreground"),
+	track: cva([
+		"flex h-6 w-10 shrink-0 cursor-pointer items-center rounded-full transition-colors",
+		"border-2 border-transparent",
+		"group-disabled/switch:bg-disabled group-disabled/switch:text-disabled-foreground group-selected/switch:group-disabled/switch:bg-disabled group-selected/switch:group-disabled/switch:text-disabled-foreground",
+		"group-selected/switch:bg-brand bg-input",
+		"group-focus-visible/switch:util-focus-borderless-ring outline-none"
+	]),
+	thumb: cva([
+		"pointer-events-none block size-5 rounded-full",
+		"bg-background shadow-xs",
+		"ring-0 transition-transform duration-150 ease-out-quint",
+		"group-selected/switch:translate-x-4 translate-x-0"
+	])
 };
 
-// src/components/Table.styles.ts
-import { cva as cva37 } from "@marigold/system";
-var Table = {
-  table: cva37(
-    "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: {
-        variant: {
-          default: "",
-          grid: ""
-        }
-      }
-    }
-  ),
-  thead: cva37(
-    // for sticky header
-    "bg-background/90 top-0 z-1 backdrop-blur-xs ",
-    {
-      variants: {
-        variant: {
-          default: "",
-          grid: ""
-        }
-      }
-    }
-  ),
-  headerRow: cva37(["border-border border-b"], {
-    variants: {
-      variant: {
-        default: "",
-        grid: "[&>:not(:last-child)]:border-r [&>:not(:last-child)]:border-border",
-        muted: "bg-muted"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }),
-  header: cva37(
-    [
-      "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: "",
-          muted: "border-t"
-        }
-      },
-      defaultVariants: {
-        variant: "default"
-      }
-    }
-  ),
-  body: cva37("[&_tr:last-child]:border-0"),
-  row: cva37(
-    [
-      "border-b border-border transition-colors",
-      "focus-visible:outline-2 outline-offset-2 outline-ring/70",
-      "data-disabled:cursor-not-allowed"
-    ],
-    {
-      variants: {
-        variant: {
-          default: "aria-[selected=true]:bg-muted",
-          grid: "aria-[selected=true]:bg-muted [&>:not(:last-child)]:border-r [&>:not(:last-child)]:border-border",
-          admin: [
-            "bg-access-admin",
-            "[&_td:first-child]:relative [&_td:first-child]:pl-4",
-            '[&_td:first-child:before]:content-[""] [&_td:first-child:before]:absolute [&_td:first-child:before]:top-0 [&_td:first-child:before]:bottom-0 [&_td:first-child:before]:left-0 [&_td:first-child:before]:w-1',
-            "[&_td:first-child:before]:bg-access-admin-foreground"
-          ],
-          master: [
-            "bg-access-master",
-            "[&_td:first-child]:relative [&_td:first-child]:pl-4",
-            '[&_td:first-child:before]:content-[""] [&_td:first-child:before]:absolute [&_td:first-child:before]:top-0 [&_td:first-child:before]:bottom-0 [&_td:first-child:before]:left-0 [&_td:first-child:before]:w-1',
-            "[&_td:first-child:before]:bg-access-master-foreground"
-          ]
-        }
-      },
-      defaultVariants: {
-        variant: "default"
-      }
-    }
-  ),
-  cell: cva37("p-3 focus-visible:outline-2 outline-offset-2 outline-ring/70", {
-    variants: {
-      variant: {
-        default: "[&:has([type=checkbox])]:pr-0",
-        grid: ""
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  })
+//#endregion
+//#region src/components/Table.styles.ts
+const Table = {
+	table: 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: { variant: {
+		default: "",
+		grid: ""
+	} } }),
+	thead: cva("bg-background/90 top-0 z-1 backdrop-blur-xs ", { variants: { variant: {
+		default: "",
+		grid: ""
+	} } }),
+	headerRow: cva(["border-border border-b"], {
+		variants: { variant: {
+			default: "",
+			grid: "[&>:not(:last-child)]:border-r [&>:not(:last-child)]:border-border",
+			muted: "bg-muted"
+		} },
+		defaultVariants: { variant: "default" }
+	}),
+	header: cva(["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: "",
+			muted: "border-t"
+		} },
+		defaultVariants: { variant: "default" }
+	}),
+	body: cva("[&_tr:last-child]:border-0"),
+	row: cva([
+		"border-b border-border transition-colors",
+		"focus-visible:outline-2 outline-offset-2 outline-ring/70",
+		"data-disabled:cursor-not-allowed"
+	], {
+		variants: { variant: {
+			default: "aria-[selected=true]:bg-muted",
+			grid: "aria-[selected=true]:bg-muted [&>:not(:last-child)]:border-r [&>:not(:last-child)]:border-border",
+			admin: [
+				"bg-access-admin",
+				"[&_td:first-child]:relative [&_td:first-child]:pl-4",
+				"[&_td:first-child:before]:content-[\"\"] [&_td:first-child:before]:absolute [&_td:first-child:before]:top-0 [&_td:first-child:before]:bottom-0 [&_td:first-child:before]:left-0 [&_td:first-child:before]:w-1",
+				"[&_td:first-child:before]:bg-access-admin-foreground"
+			],
+			master: [
+				"bg-access-master",
+				"[&_td:first-child]:relative [&_td:first-child]:pl-4",
+				"[&_td:first-child:before]:content-[\"\"] [&_td:first-child:before]:absolute [&_td:first-child:before]:top-0 [&_td:first-child:before]:bottom-0 [&_td:first-child:before]:left-0 [&_td:first-child:before]:w-1",
+				"[&_td:first-child:before]:bg-access-master-foreground"
+			]
+		} },
+		defaultVariants: { variant: "default" }
+	}),
+	cell: cva("p-3 focus-visible:outline-2 outline-offset-2 outline-ring/70", {
+		variants: { variant: {
+			default: "[&:has([type=checkbox])]:pr-0",
+			grid: ""
+		} },
+		defaultVariants: { variant: "default" }
+	})
 };
 
-// src/components/Tabs.styles.ts
-import { cva as cva38 } from "@marigold/system";
-var Tabs = {
-  container: cva38("flex flex-col gap-2"),
-  tabsList: cva38([
-    "text-muted-foreground",
-    "flex items-center p-0.5 h-auto gap-2 border-b border-border px-0 py-1"
-  ]),
-  tab: cva38([
-    "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",
-    "hover:bg-hover hover:text-foreground",
-    "disabled:pointer-events-none disabled:opacity-50",
-    "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: cva38([
-    "py-4 rounded-sm",
-    "focus-visible:util-focus-ring outline-none"
-  ])
+//#endregion
+//#region src/components/Tabs.styles.ts
+const Tabs = {
+	container: cva("flex flex-col gap-2"),
+	tabsList: cva(["text-muted-foreground", "flex items-center p-0.5 h-auto gap-2 border-b border-border px-0 py-1"]),
+	tab: 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",
+		"hover:bg-hover hover:text-foreground",
+		"disabled:pointer-events-none disabled:opacity-50",
+		"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: cva(["py-4 rounded-sm", "focus-visible:util-focus-ring outline-none"])
 };
 
-// src/components/Tag.styles.ts
-import { cva as cva39 } from "@marigold/system";
-var Tag = {
-  container: cva39([
-    "flex gap-3",
-    // prevent layout jumps when a smaller empty state is shown (min height is set to height of tags)
-    "min-h-7"
-  ]),
-  tag: cva39([
-    "relative inline-flex items-center gap-[7px]",
-    "border border-solid border-input rounded-lg",
-    "font-medium text-xs",
-    "h-7 px-2 cursor-default",
-    "bg-background",
-    "data-selected:text-white data-selected:bg-brand",
-    "data-[disabled]:cursor-not-allowed data-[disabled]:text-disabled-foreground data-[disabled]:bg-disabled",
-    "focus-visible:util-focus-ring outline-none"
-  ]),
-  closeButton: cva39([
-    "size-4",
-    "disabled:bg-disabled disabled:text-disabled-foreground disabled:cursor-not-allowed"
-  ]),
-  listItems: cva39([
-    "flex flex-wrap gap-1",
-    // mb-0 prevents whitespace when the hidden field is rendered
-    "mb-0"
-  ]),
-  removeAll: cva39([
-    "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 util-touch-hitbox"
-  ])
+//#endregion
+//#region src/components/Tag.styles.ts
+const Tag = {
+	container: cva(["flex gap-3", "min-h-7"]),
+	tag: cva([
+		"relative inline-flex items-center gap-[7px]",
+		"border border-solid border-input rounded-lg",
+		"font-medium text-xs",
+		"h-7 px-2 cursor-default",
+		"bg-background",
+		"data-selected:text-white data-selected:bg-brand",
+		"data-[disabled]:cursor-not-allowed data-[disabled]:text-disabled-foreground data-[disabled]:bg-disabled",
+		"focus-visible:util-focus-ring outline-none"
+	]),
+	closeButton: cva(["size-4", "disabled:bg-disabled disabled:text-disabled-foreground disabled:cursor-not-allowed"]),
+	listItems: cva(["flex flex-wrap gap-1", "mb-0"]),
+	removeAll: 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 util-touch-hitbox"
+	])
 };
 
-// src/components/TextArea.styles.ts
-import { cva as cva40 } from "@marigold/system";
-var TextArea = cva40([
-  inputContainer,
-  inputInvalid,
-  "focus:util-focus-ring outline-none",
-  inputDisabled,
-  inputReadOnly,
-  "invalid:text-destructive"
+//#endregion
+//#region src/components/TextArea.styles.ts
+const TextArea = cva([
+	inputContainer,
+	inputInvalid,
+	"focus:util-focus-ring outline-none",
+	inputDisabled,
+	inputReadOnly,
+	"invalid:text-destructive"
 ]);
 
-// src/components/Text.styles.ts
-import { cva as cva41 } from "@marigold/system";
-var Text = cva41("", {
-  variants: {
-    variant: {
-      default: "",
-      muted: "text-muted-foreground"
-    },
-    size: {
-      // Adding a default here, which beasically acts as an inherit
-      default: "",
-      xs: "text-xs",
-      sm: "text-sm",
-      base: "text-base",
-      lg: "text-lg",
-      xl: "text-xl",
-      "2xl": "text-2xl",
-      "3xl": "text-3xl",
-      "4xl": "text-4xl",
-      "5xl": "text-5xl",
-      "6xl": "text-6xl",
-      "7xl": "text-7xl",
-      "8xl": "text-8xl",
-      "9xl": "text-9xl"
-    }
-  },
-  defaultVariants: {
-    variant: "default",
-    size: "default"
-  }
+//#endregion
+//#region src/components/Text.styles.ts
+const Text = cva("", {
+	variants: {
+		variant: {
+			default: "",
+			muted: "text-muted-foreground"
+		},
+		size: {
+			default: "",
+			xs: "text-xs",
+			sm: "text-sm",
+			base: "text-base",
+			lg: "text-lg",
+			xl: "text-xl",
+			"2xl": "text-2xl",
+			"3xl": "text-3xl",
+			"4xl": "text-4xl",
+			"5xl": "text-5xl",
+			"6xl": "text-6xl",
+			"7xl": "text-7xl",
+			"8xl": "text-8xl",
+			"9xl": "text-9xl"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
 });
 
-// src/components/Toast.styles.ts
-import { cva as cva42 } from "@marigold/system";
-var Toast = {
-  toast: cva42([
-    "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: cva42([
-    "text-sm font-medium",
-    "[grid-area:title]",
-    "flex items-center mb-0"
-  ]),
-  description: cva42([
-    "text-muted-foreground text-sm",
-    "[grid-area:description] mt-0"
-  ]),
-  closeButton: cva42([
-    "[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: cva42(
-    [
-      "[grid-area:icon]",
-      "flex items-center justify-center",
-      "h-5 w-5 leading-none"
-    ],
-    {
-      variants: {
-        variant: {
-          default: "",
-          success: "text-success-muted-accent",
-          warning: "text-warning-muted-accent",
-          info: "text-info-muted-accent",
-          error: "text-destructive-muted-accent"
-        }
-      },
-      defaultVariants: {
-        variant: "default"
-      }
-    }
-  ),
-  content: cva42(["contents"]),
-  "bottom-left": cva42(["fixed bottom-4 left-4 flex flex-col-reverse"]),
-  "bottom-right": cva42(["fixed bottom-4 right-4 flex flex-col-reverse"]),
-  "top-left": cva42(["fixed top-4 left-4 flex flex-col"]),
-  "top-right": cva42(["fixed top-4 right-4 flex flex-col"]),
-  top: cva42([
-    "fixed top-4 left-1/2 right-auto -translate-x-1/2 flex flex-col items-center w-auto align-middle"
-  ]),
-  bottom: cva42([
-    "fixed bottom-4 left-1/2 right-auto -translate-x-1/2 flex flex-col-reverse items-center w-auto align-middle"
-  ])
+//#endregion
+//#region src/components/Toast.styles.ts
+const Toast = {
+	toast: 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_auto] grid-rows-[auto_auto] gap-x-1 gap-y-0",
+		"[grid-template-areas:\"icon_title_action_close\"\"icon_description_action_close\"] focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+		"p-4"
+	]),
+	title: cva([
+		"text-sm font-medium",
+		"[grid-area:title]",
+		"flex items-center mb-0"
+	]),
+	description: cva(["text-muted-foreground text-sm", "[grid-area:description] mt-0"]),
+	closeButton: 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: cva([
+		"[grid-area:icon]",
+		"flex items-center justify-center",
+		"h-5 w-5 leading-none"
+	], {
+		variants: { variant: {
+			default: "",
+			success: "text-success-muted-accent",
+			warning: "text-warning-muted-accent",
+			info: "text-info-muted-accent",
+			error: "text-destructive-muted-accent"
+		} },
+		defaultVariants: { variant: "default" }
+	}),
+	content: cva(["contents"]),
+	"bottom-left": cva(["fixed bottom-4 left-4 flex flex-col-reverse"]),
+	"bottom-right": cva(["fixed bottom-4 right-4 flex flex-col-reverse"]),
+	"top-left": cva(["fixed top-4 left-4 flex flex-col"]),
+	"top-right": cva(["fixed top-4 right-4 flex flex-col"]),
+	top: cva(["fixed top-4 left-1/2 right-auto -translate-x-1/2 flex flex-col items-center w-auto align-middle"]),
+	bottom: cva(["fixed bottom-4 left-1/2 right-auto -translate-x-1/2 flex flex-col-reverse items-center w-auto align-middle"]),
+	action: cva(["[grid-area:action] flex items-start pl-4"])
 };
 
-// src/components/Tooltip.styles.ts
-import { cva as cva43 } from "@marigold/system";
-var Tooltip = {
-  container: cva43(
-    [
-      "relative z-50 max-w-70 rounded-md border px-3 py-1.5 text-sm",
-      "placement-top:mb-2",
-      "placement-bottom:mt-2",
-      "placement-right:ml-2",
-      "placement-left:mr-2"
-    ],
-    {
-      variants: {
-        variant: {
-          default: "text-brand-foreground bg-brand border-brand",
-          white: "text-secondary-foreground border-border bg-white"
-        }
-      },
-      defaultVariants: {
-        variant: "default"
-      }
-    }
-  ),
-  arrow: cva43(
-    [
-      // right
-      "data-[placement=right]:[&_svg]:rotate-90",
-      // left
-      "data-[placement=left]:[&_svg]:-rotate-90",
-      // bottom
-      "data-[placement=bottom]:[&_svg]:rotate-180"
-    ],
-    {
-      variants: {
-        variant: {
-          default: "fill-brand  stroke-brand",
-          white: "fill-white  stroke-border "
-        }
-      },
-      defaultVariants: {
-        variant: "default"
-      }
-    }
-  )
+//#endregion
+//#region src/components/Tooltip.styles.ts
+const Tooltip = {
+	container: cva([
+		"relative z-50 max-w-70 rounded-md border px-3 py-1.5 text-sm",
+		"placement-top:mb-2",
+		"placement-bottom:mt-2",
+		"placement-right:ml-2",
+		"placement-left:mr-2"
+	], {
+		variants: { variant: {
+			default: "text-brand-foreground bg-brand border-brand",
+			white: "text-secondary-foreground border-border bg-white"
+		} },
+		defaultVariants: { variant: "default" }
+	}),
+	arrow: cva([
+		"data-[placement=right]:[&_svg]:rotate-90",
+		"data-[placement=left]:[&_svg]:-rotate-90",
+		"data-[placement=bottom]:[&_svg]:rotate-180"
+	], {
+		variants: { variant: {
+			default: "fill-brand  stroke-brand",
+			white: "fill-white  stroke-border "
+		} },
+		defaultVariants: { variant: "default" }
+	})
 };
 
-// src/components/Underlay.styles.ts
-import { cva as cva44 } from "@marigold/system";
-var Underlay = cva44("bg-black/80 px-4");
+//#endregion
+//#region src/components/Underlay.styles.ts
+const Underlay = cva("bg-black/80 px-4");
 
-// src/components/XLoader.styles.ts
-import { cva as cva45 } from "@marigold/system";
-var XLoader = {
-  container: cva45("grid place-items-center text-brand", {
-    variants: {
-      variant: {
-        default: "",
-        inverted: "text-secondary"
-      },
-      size: {
-        default: "size-20",
-        large: "size-36",
-        fit: "size-full"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }),
-  loader: cva45("size-full", {
-    variants: {
-      variant: {
-        default: "",
-        inverted: ""
-      },
-      size: {
-        default: "",
-        large: "",
-        fit: ""
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }),
-  label: cva45("text-current text-sm")
+//#endregion
+//#region src/components/XLoader.styles.ts
+const XLoader = {
+	container: cva("grid place-items-center text-brand", {
+		variants: {
+			variant: {
+				default: "",
+				inverted: "text-secondary"
+			},
+			size: {
+				default: "size-20",
+				large: "size-36",
+				fit: "size-full"
+			}
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default"
+		}
+	}),
+	loader: cva("size-full", {
+		variants: {
+			variant: {
+				default: "",
+				inverted: ""
+			},
+			size: {
+				default: "",
+				large: "",
+				fit: ""
+			}
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default"
+		}
+	}),
+	label: cva("text-current text-sm")
 };
 
-// src/components/Breadcrumbs.styles.ts
-import { cva as cva46 } from "@marigold/system";
-var Breadcrumbs = {
-  container: cva46(["flex flex-wrap items-center"], {
-    variants: {
-      variant: {
-        default: "text-foreground"
-      },
-      size: {
-        small: "text-xs gap-1.5",
-        default: "text-sm gap-1.5",
-        large: "text-base gap-1.5"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }),
-  item: cva46("inline-flex items-center gap-1.5 whitespace-nowrap "),
-  link: cva46("hover:underline cursor-pointer"),
-  current: cva46("font-medium")
+//#endregion
+//#region src/components/Breadcrumbs.styles.ts
+const Breadcrumbs = {
+	container: cva(["flex flex-wrap items-center"], {
+		variants: {
+			variant: { default: "text-foreground" },
+			size: {
+				small: "text-xs gap-1.5",
+				default: "text-sm gap-1.5",
+				large: "text-base gap-1.5"
+			}
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default"
+		}
+	}),
+	item: cva("inline-flex items-center gap-1.5 whitespace-nowrap "),
+	link: cva("hover:underline cursor-pointer"),
+	current: cva("font-medium")
 };
 
-// src/theme.ts
-var theme = {
-  name: "rui",
-  components: components_exports
-};
+//#endregion
+//#region src/components/index.ts
+var components_exports = /* @__PURE__ */ __export({
+	Accordion: () => Accordion,
+	Badge: () => Badge,
+	Breadcrumbs: () => Breadcrumbs,
+	Button: () => Button,
+	Calendar: () => Calendar,
+	Card: () => Card,
+	Checkbox: () => Checkbox,
+	CloseButton: () => CloseButton,
+	Collapsible: () => Collapsible,
+	ComboBox: () => ComboBox,
+	ContextualHelp: () => ContextualHelp,
+	DateField: () => DateField,
+	DatePicker: () => DatePicker,
+	Dialog: () => Dialog,
+	Divider: () => Divider,
+	Drawer: () => Drawer,
+	Field: () => Field,
+	Headline: () => Headline,
+	HelpText: () => HelpText,
+	IconButton: () => IconButton,
+	Input: () => Input,
+	Label: () => Label,
+	Link: () => Link,
+	List: () => List,
+	ListBox: () => ListBox,
+	Menu: () => Menu,
+	Modal: () => Modal,
+	MultiSelect: () => MultiSelect,
+	NumberField: () => NumberField,
+	Pagination: () => Pagination,
+	Popover: () => Popover,
+	ProgressCycle: () => ProgressCycle,
+	Radio: () => Radio,
+	SectionMessage: () => SectionMessage,
+	Select: () => Select,
+	Slider: () => Slider,
+	Switch: () => Switch,
+	Table: () => Table,
+	Tabs: () => Tabs,
+	Tag: () => Tag,
+	Text: () => Text,
+	TextArea: () => TextArea,
+	Toast: () => Toast,
+	Tooltip: () => Tooltip,
+	Underlay: () => Underlay,
+	XLoader: () => XLoader
+});
 
-// src/index.ts
-var index_default = theme;
-export {
-  index_default as default,
-  theme
+//#endregion
+//#region src/theme.ts
+const theme = {
+	name: "rui",
+	components: components_exports
 };
+
+//#endregion
+//#region src/index.ts
+var src_default = theme;
+
+//#endregion
+export { src_default as default, theme };
 //# sourceMappingURL=index.mjs.map