@marigold/theme-docs 4.0.1 → 4.1.0

package/dist/{index.js → index.cjs}

@@ -1,37 +1,22 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 //#region rolldown:runtime
-var __create = Object.create;
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (all) => {
+var __export = (all, symbols) => {
 	let target = {};
-	for (var name in all) __defProp(target, name, {
-		get: all[name],
-		enumerable: true
-	});
-	return target;
-};
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-		key = keys[i];
-		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-			get: ((k) => from[k]).bind(null, key),
-			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+	for (var name in all) {
+		__defProp(target, name, {
+			get: all[name],
+			enumerable: true
 		});
 	}
-	return to;
+	if (symbols) {
+		__defProp(target, Symbol.toStringTag, { value: "Module" });
+	}
+	return target;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-	value: mod,
-	enumerable: true
-}) : target, mod));
 
 //#endregion
 let __marigold_system = require("@marigold/system");
-__marigold_system = __toESM(__marigold_system);
 
 //#region src/components/Button.styles.ts
 const Button = (0, __marigold_system.cva)("flex gap-2 rounded-xs px-3 py-2", { variants: {
@@ -144,7 +129,7 @@ const IconButton = (0, __marigold_system.cva)();
 
 //#endregion
 //#region src/components/Input.styles.ts
-const inputBox = "border border-border rounded-xs text-text-primary";
+const inputBox = "border border-border rounded-sm text-text-primary";
 const inputBackground = "bg-white";
 const xSpacing = {
 	default: "px-3",
@@ -238,7 +223,11 @@ const List = {
 //#endregion
 //#region src/components/ListBox.styles.ts
 const ListBox = {
-	container: (0, __marigold_system.cva)(["bg-bg-surface-overlay border-border rounded-xs border drop-shadow-lg"]),
+	container: (0, __marigold_system.cva)([
+		"bg-bg-surface-overlay border-border rounded-sm border drop-shadow-lg",
+		"w-full",
+		"group-[[role=dialog]]/tray:border-0 group-[[role=dialog]]/tray:shadow-none group-[[role=dialog]]/tray:drop-shadow-none"
+	]),
 	list: (0, __marigold_system.cva)([
 		"outline-hidden",
 		"p-1",
@@ -326,8 +315,9 @@ const Select = {
 				default: "gap-2",
 				floating: [
 					"shadow-xs",
-					"col-span-full row-start-1 grid grid-cols-subgrid grid-rows-subgrid",
-					"*:row-star-1 *:col-start-2 *:text-left",
+					"col-span-full row-start-1 grid! grid-cols-subgrid grid-rows-subgrid",
+					"*:row-start-1 *:col-start-2 *:text-left",
+					"[&>:first-child]:mr-6",
 					"gap-[inherit]"
 				]
 			},
@@ -361,20 +351,20 @@ const Tabs = {
 	tab: (0, __marigold_system.cva)([
 		"text-text-primary-muted aria-selected:text-text-primary px-2 py-1 text-sm font-medium",
 		"aria-selected:border-border-primary -m-px border-b-2 border-transparent",
-		"focus:outline-hidden focus-visible:outline"
+		"focus:outline-hidden focus-visible:state-focus-borderless"
 	])
 };
 
 //#endregion
-//#region src/components/Table.styles.ts
-const Table = {
+//#region src/components/LegacyTable.styles.ts
+const LegacyTable = {
 	table: (0, __marigold_system.cva)(["w-full overflow-hidden rounded-lg bg-white/40 text-sm", "border-secondary-200 border-separate border-spacing-0 border"]),
 	thead: (0, __marigold_system.cva)(),
 	headerRow: (0, __marigold_system.cva)(),
 	header: (0, __marigold_system.cva)("px-3 pb-2 pt-3 text-start"),
 	body: (0, __marigold_system.cva)(),
 	row: (0, __marigold_system.cva)([], { variants: { variant: { hover: "hover:bg-neutral-100/80 " } } }),
-	cell: (0, __marigold_system.cva)(["text-text-primary px-3 py-3.5 text-xs", "border-secondary-200 border-t"], { variants: { variant: { colorTable: "p-4 align-middle" } } })
+	cell: (0, __marigold_system.cva)(["prose px-3 py-3.5 text-sm", "border-secondary-200 border-t"], { variants: { variant: { colorTable: "p-4 align-middle" } } })
 };
 
 //#endregion
@@ -386,6 +376,24 @@ const Text = (0, __marigold_system.cva)("leading-7", { variants: { variant: {
 	muted: "text-muted-foreground text-sm"
 } } });
 
+//#endregion
+//#region src/components/Tray.styles.ts
+const Tray = {
+	overlay: (0, __marigold_system.cva)("bg-black/50 fixed inset-0 z-40 flex items-end justify-center"),
+	container: (0, __marigold_system.cva)([
+		"w-full border-0 inset-shadow-black inset-shadow-sm/20",
+		"relative grid-rows-[auto_auto_1fr_auto] max-h-[95vh] rounded-t-lg rounded-b-none",
+		"bg-bg-surface-overlay shadow-lg",
+		"outline-hidden grid",
+		"after:absolute after:inset-x-0 after:top-full after:h-screen after:bg-bg-surface-overlay after:content-['']"
+	]),
+	dragHandle: (0, __marigold_system.cva)("bg-border mx-auto mt-2 h-1.5 w-12 rounded-full"),
+	header: (0, __marigold_system.cva)("border-border border-b px-6 py-4"),
+	title: (0, __marigold_system.cva)("font-semibold text-base"),
+	content: (0, __marigold_system.cva)("overflow-y-auto outline-none p-2"),
+	actions: (0, __marigold_system.cva)("flex flex-row gap-3 justify-end border-border border-t px-6 py-4")
+};
+
 //#endregion
 //#region src/components/Underlay.styles.ts
 const Underlay = (0, __marigold_system.cva)("bg-bg-underlay/50 backdrop-blur-xs");
@@ -419,6 +427,7 @@ var components_exports = /* @__PURE__ */ __export({
 	HelpText: () => HelpText,
 	IconButton: () => IconButton,
 	Label: () => Label,
+	LegacyTable: () => LegacyTable,
 	Link: () => Link,
 	List: () => List,
 	ListBox: () => ListBox,
@@ -427,9 +436,9 @@ var components_exports = /* @__PURE__ */ __export({
 	Popover: () => Popover,
 	SectionMessage: () => SectionMessage,
 	Select: () => Select,
-	Table: () => Table,
 	Tabs: () => Tabs,
 	Text: () => Text,
+	Tray: () => Tray,
 	Underlay: () => Underlay,
 	inputBackground: () => inputBackground,
 	inputBox: () => inputBox,
@@ -461,4 +470,4 @@ var src_default = theme;
 //#endregion
 exports.default = src_default;
 exports.theme = theme;
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Button: ThemeComponent<'Button'>","Card: ThemeComponent<'Card'>","CloseButton: ThemeComponent<'CloseButton'>","Dialog: ThemeComponent<'Dialog'>","Headline: ThemeComponent<'Headline'>","Field: ThemeComponent<'Field'>","HelpText: ThemeComponent<'HelpText'>","IconButton: ThemeComponent<'IconButton'>","Label: ThemeComponent<'Label'>","Link: ThemeComponent<'Link'>","List: ThemeComponent<'List'>","ListBox: ThemeComponent<'ListBox'>","Menu: ThemeComponent<'Menu'>","Modal: ThemeComponent<'Modal'>","SectionMessage: ThemeComponent<'SectionMessage'>","Popover: ThemeComponent<'Popover'>","Select: ThemeComponent<'Select'>","Tabs: ThemeComponent<'Tabs'>","LegacyTable: ThemeComponent<'LegacyTable'>","Text: ThemeComponent<'Text'>","Tray: ThemeComponent<'Tray'>","Underlay: ThemeComponent<'Underlay'>","Badge: ThemeComponent<'Badge'>","root: Theme['root']","theme: Theme"],"sources":["../src/components/Button.styles.ts","../src/components/Card.styles.ts","../src/components/CloseButton.styles.ts","../src/components/Dialog.styles.ts","../src/components/Headline.styles.ts","../src/components/Field.styles.ts","../src/components/HelpText.styles.ts","../src/components/IconButton.styles.ts","../src/components/Input.styles.ts","../src/components/Label.styles.ts","../src/components/Link.styles.ts","../src/components/List.styles.ts","../src/components/ListBox.styles.ts","../src/components/Menu.styles.ts","../src/components/Modal.styles.ts","../src/components/SectionMessage.styles.ts","../src/components/Popover.styles.ts","../src/components/Select.styles.ts","../src/components/Tabs.styles.ts","../src/components/LegacyTable.styles.ts","../src/components/Text.styles.ts","../src/components/Tray.styles.ts","../src/components/Underlay.styles.ts","../src/components/Badge.styles.ts","../src/components/index.ts","../src/root.ts","../src/theme.ts","../src/index.ts"],"sourcesContent":["import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Button: ThemeComponent<'Button'> = cva(\n  'flex gap-2 rounded-xs px-3 py-2',\n  {\n    variants: {\n      variant: {\n        ghost: 'text-secondary-700 hover:text-secondary-900 p-0',\n        sunken:\n          'text-secondary-600 hover:bg-secondary-400/20 bg-secondary-400/10 h-8 justify-start rounded-lg',\n        inverted: 'bg-secondary-100',\n        icon: 'border-none translate-y-0.5 outline-none p-0',\n      },\n      size: {\n        small: 'px-3 py-1.5 text-sm',\n      },\n    },\n  }\n);\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Card: ThemeComponent<'Card'> = cva(\n  ['relative w-full overflow-hidden rounded-xl'],\n  {\n    variants: {\n      variant: {\n        default:\n          'bg-bg-surface-raised p-6 shadow-xs border border-secondary-300',\n        hovering:\n          'bg-bg-surface-raised p-6 shadow-xs transition-shadow hover:cursor-pointer hover:shadow-md border border-secondary-300',\n        content:\n          'bg-bg-surface-raised my-6 shadow-xs border border-secondary-300',\n        outline: 'bg-white/40 my-6 border border-secondary-200',\n        lowered: 'bg-bg-surface-raised-lowered p-6',\n        image: '',\n      },\n      size: {\n        default: '',\n        full: 'size-full',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  }\n);\n","import type { ThemeComponent } from '@marigold/system';\nimport { cva } from '@marigold/system';\n\nexport const CloseButton: ThemeComponent<'CloseButton'> = cva([\n  'flex items-center justify-center whitespace-nowrap',\n  'cursor-pointer',\n  'transition-[color,box-shadow]',\n  'rounded',\n  '[&_svg]:size-4 [&_svg]:opacity-60 [&_svg]:transition-opacity hover:[&_svg]:opacity-100',\n]);\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Dialog: ThemeComponent<'Dialog'> = {\n  closeButton: cva('absolute top-4 right-4 ml-4', {\n    variants: {\n      variant: {\n        fullscreen: ['size-6', 'right-4 top-4'],\n      },\n    },\n  }),\n  container: cva('bg-bg-surface', {\n    variants: {\n      variant: {\n        default: 'relative rounded-lg shadow-lg',\n        codeblock: [\n          'static px-0 py-6',\n          'bg-code-900 max-h-[96vh] w-full overflow-y-auto rounded-lg shadow-lg',\n          'scrollbar-thin scrollbar-thumb-code-500 scrollbar-track-transparent scrollbar-thumb-rounded-full overflow-x-auto',\n          '*:max-h-none *:min-w-[75vw]',\n        ],\n        fullscreen: 'h-screen w-screen px-4 pb-8 pt-10',\n        zoom: 'max-h-[96vh] overflow-y-auto',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  }),\n  header: cva(''),\n  title: cva(''),\n  content: cva(''),\n  actions: cva(''),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Headline: ThemeComponent<'Headline'> = cva('*:no-underline', {\n  variants: {\n    size: {\n      'level-1':\n        'scroll-m-20 text-5xl font-extrabold tracking-tight lg:text-6xl',\n      'level-2':\n        'scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0',\n      'level-3': 'scroll-m-20 text-2xl font-semibold tracking-tight',\n      'level-4': 'scroll-m-20 text-xl font-semibold tracking-tight',\n      'level-5': 'mt-8 scroll-m-20 text-lg font-semibold tracking-tight',\n      'level-6': 'mt-8 scroll-m-20 text-base font-semibold tracking-tight',\n    },\n  },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Field: ThemeComponent<'Field'> = cva('grid gap-y-0.5', {\n  variants: {\n    variant: {\n      default: '',\n      floating: [\n        'grid-cols-[min-content_auto] grid-rows-[auto_auto]',\n        'items-center',\n      ],\n    },\n    size: {\n      default: 'gap-x-3',\n      small: 'gap-x-2',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'default',\n  },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const HelpText: ThemeComponent<'HelpText'> = {\n  container: cva(),\n  icon: cva(),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const IconButton: ThemeComponent<'IconButton'> = cva();\n","// Box\n// ---------------\nexport const inputBox = 'border border-border rounded-sm text-text-primary';\nexport const inputBackground = 'bg-white';\n\n// Spacing\n// ---------------\nexport const xSpacing = {\n  default: 'px-3',\n  small: 'px-2.5',\n};\n\nexport const ySpacing = {\n  default: 'py-2',\n  small: 'py-1.5',\n};\n\nexport const inputSpacing = {\n  default: `${xSpacing.default} ${ySpacing.default}`,\n  small: `${xSpacing.small} ${ySpacing.small}`,\n};\n\n// States\n// ---------------\nexport const inputFocus = '';\nexport const inputDisabled =\n  'disabled:cursor-not-allowed disabled:text-text-disabled disabled:bg-bg-disabled';\nexport const inputError = '';\nexport const inputHover = '';\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Label: ThemeComponent<'Label'> = cva('', {\n  variants: {\n    variant: {\n      default: '',\n      floating: [\n        'z-10 col-start-1 row-start-1',\n        'pointer-events-none',\n        'text-secondary-400 text-nowrap',\n        'after:content-[\":\"]',\n      ],\n    },\n    size: {\n      default: 'text-sm',\n      small: 'text-xs',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'default',\n  },\n  compoundVariants: [\n    {\n      variant: 'floating',\n      size: 'default',\n      className: 'pl-4',\n    },\n    {\n      variant: 'floating',\n      size: 'small',\n      className: 'pl-3',\n    },\n  ],\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Link: ThemeComponent<'Link'> = cva(['font-medium'], {\n  variants: {\n    variant: {\n      default:\n        'underline underline-offset-4 transition-all hover:text-slate-700',\n      primary:\n        'bg-text-primary text-white leading-none hover:bg-slate-700 transition-all',\n      secondary: 'border-text-primary border-2 leading-none hover:bg-slate-100',\n      toc: [\n        'text-secondary-500 hover:text-secondary-800 text-xs',\n        'data-[active=true]:text-secondary-800 font-normal data-[active=true]:font-medium',\n      ],\n      cta: [\n        'h-component rounded-2xl bg-purple-700 px-5 py-1.5',\n        'text-sm font-semibold text-purple-100',\n        'transition-all hover:bg-purple-600',\n      ],\n      ghost: 'hover:underline underline-offset-4',\n      shiny:\n        'border border-slate-200 bg-slate-100 hover:bg-slate-200 transition-all ease-in',\n    },\n    size: {\n      inline: '',\n      xsmall: 'rounded-full text-xs py-1.5 px-4',\n      small: 'px-3 py-1.5 text-sm rounded-xs',\n      regular: 'px-3 py-2 rounded-xs',\n      large: 'px-8 py-3.5 rounded-xs',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'inline',\n  },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const List: ThemeComponent<'List'> = {\n  ul: cva('list-inside list-none'),\n  ol: cva(''),\n  item: cva('list-none py-0.5'),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const ListBox: ThemeComponent<'ListBox'> = {\n  container: cva([\n    'bg-bg-surface-overlay border-border rounded-sm border drop-shadow-lg',\n    'w-full',\n    // In a Tray\n    'group-[[role=dialog]]/tray:border-0 group-[[role=dialog]]/tray:shadow-none group-[[role=dialog]]/tray:drop-shadow-none',\n  ]),\n  list: cva([\n    'outline-hidden',\n    'p-1',\n    'sm:max-h-[45vh] md:max-h-[75vh] lg:max-h-[75vh]',\n  ]),\n  item: cva(\n    [\n      'text-text-primary',\n      'cursor-pointer rounded-xs outline-hidden',\n      'hover:bg-bg-hover focus:bg-bg-hover',\n      'aria-selected:bg-bg-hover',\n    ],\n    {\n      variants: {\n        size: {\n          default: 'p-2',\n          small: 'px-2 py-1 text-sm',\n        },\n      },\n      defaultVariants: {\n        size: 'small',\n      },\n    }\n  ),\n  section: cva(),\n  header: cva(),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Menu: ThemeComponent<'Menu'> = {\n  container: cva(\n    [\n      'border-border bg-bg-surface overflow-hidden rounded-md border px-1 py-1.5 text-sm shadow-md',\n      'sm:max-h-[45vh] md:max-h-[75vh] lg:max-h-[75vh]',\n    ],\n    {\n      variants: {\n        variant: {\n          command:\n            '[&_[cmdk-list-sizer]]:divide-secondary-100 size-full p-0 sm:w-[500px] [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:py-2 [&_[cmdk-item]_svg]:size-5 [&_[cmdk-list-sizer]]:divide-y',\n        },\n      },\n    }\n  ),\n  item: cva('focus:bg-bg-hover cursor-pointer rounded-xs p-2 outline-hidden', {\n    variants: {\n      variant: {\n        command: ['aria-selected:bg-bg-hover px-4 py-1.5'],\n      },\n    },\n  }),\n  section: cva('', {\n    variants: {\n      variant: {\n        command:\n          '[&_[cmdk-group-heading]]:text-text-primary-muted [&_[cmdk-group-heading]]:p-4 [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',\n      },\n    },\n  }),\n  button: cva(\n    'text-secondary-700 hover:bg-secondary-400/20 h-8 rounded-lg px-1'\n  ),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Modal: ThemeComponent<'Modal'> = cva();\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const SectionMessage: ThemeComponent<'SectionMessage'> = {\n  container: cva(\n    [\n      'not-prose items-center rounded-lg p-4',\n      \"grid-cols-[min-content_auto] gap-1 [grid-template-areas:'icon_title_title''none_content_content']\",\n    ],\n    {\n      variants: {\n        variant: {\n          info: 'bg-bg-info text-text-info',\n          warning: 'bg-bg-warning text-text-warning',\n        },\n      },\n    }\n  ),\n  icon: cva('size-6'),\n  title: cva('mb-1 font-bold leading-none tracking-tight'),\n  content: cva('text-sm [&_p]:leading-relaxed [&_code]:text-xs'),\n  close: cva('h-5 w-5 text-center'),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Popover: ThemeComponent<'Popover'> = cva([\n  'animate-in',\n  'placement-top:-translate-y-1',\n  'placement-bottom:translate-y-1',\n  'placement-right:-translate-x-1',\n  'placement-left:translate-x-1',\n]);\n","import { ThemeComponent, cva } from '@marigold/system';\nimport {\n  inputBackground,\n  inputBox,\n  inputDisabled,\n  inputSpacing,\n} from './Input.styles';\n\nexport const Select: ThemeComponent<'Select'> = {\n  icon: cva('text-secondary-400', {\n    variants: {\n      variant: {\n        default: '',\n        floating: 'justify-self-end',\n      },\n      size: {\n        default: '',\n        small: 'size-3',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  }),\n  select: cva([inputBox, inputBackground, inputDisabled, 'outline-hidden'], {\n    variants: {\n      variant: {\n        default: 'gap-2',\n        floating: [\n          'shadow-xs',\n          'col-span-full row-start-1 grid! grid-cols-subgrid grid-rows-subgrid',\n          // selected value and caret get moved to 2nd col\n          '*:row-start-1 *:col-start-2 *:text-left',\n          // leave space for the chevron icon at the end\n          '[&>:first-child]:mr-6',\n          // So the button gap is not used to separate label from selected value\n          'gap-[inherit]',\n        ],\n      },\n      size: {\n        default: [inputSpacing.default],\n        small: [inputSpacing.small, 'text-xs'],\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n    compoundVariants: [\n      {\n        variant: 'floating',\n        size: 'default',\n        className: 'px-4 py-1.5',\n      },\n      {\n        variant: 'floating',\n        size: 'small',\n        className: 'px-3',\n      },\n    ],\n  }),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Tabs: ThemeComponent<'Tabs'> = {\n  container: cva('', {\n    variants: {\n      variant: {\n        demo: 'my-6',\n      },\n    },\n  }),\n  tabpanel: cva(''),\n  tabsList: cva('mb-4 border-b'),\n  tab: cva([\n    'text-text-primary-muted aria-selected:text-text-primary px-2 py-1 text-sm font-medium',\n    'aria-selected:border-border-primary -m-px border-b-2 border-transparent',\n    'focus:outline-hidden focus-visible:state-focus-borderless',\n  ]),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const LegacyTable: ThemeComponent<'LegacyTable'> = {\n  table: cva([\n    'w-full overflow-hidden rounded-lg bg-white/40 text-sm',\n    'border-secondary-200 border-separate border-spacing-0 border',\n  ]),\n  thead: cva(),\n  headerRow: cva(),\n  header: cva('px-3 pb-2 pt-3 text-start'),\n  body: cva(),\n  row: cva([], {\n    variants: {\n      variant: {\n        hover: 'hover:bg-neutral-100/80 ',\n      },\n    },\n  }),\n  cell: cva(['prose px-3 py-3.5 text-sm', 'border-secondary-200 border-t'], {\n    variants: {\n      variant: {\n        colorTable: 'p-4 align-middle',\n      },\n    },\n  }),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Text: ThemeComponent<'Text'> = cva('leading-7', {\n  variants: {\n    variant: {\n      lead: 'text-muted-foreground text-xl',\n      large: 'text-lg font-semibold',\n      small: 'text-sm font-medium leading-none',\n      muted: 'text-muted-foreground text-sm',\n    },\n  },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Tray: ThemeComponent<'Tray'> = {\n  overlay: cva('bg-black/50 fixed inset-0 z-40 flex items-end justify-center'),\n  container: cva([\n    'w-full border-0 inset-shadow-black inset-shadow-sm/20',\n    'relative grid-rows-[auto_auto_1fr_auto] max-h-[95vh] rounded-t-lg rounded-b-none',\n    'bg-bg-surface-overlay shadow-lg',\n    'outline-hidden grid',\n    \"after:absolute after:inset-x-0 after:top-full after:h-screen after:bg-bg-surface-overlay after:content-['']\",\n  ]),\n  dragHandle: cva('bg-border mx-auto mt-2 h-1.5 w-12 rounded-full'),\n  header: cva('border-border border-b px-6 py-4'),\n  title: cva('font-semibold text-base'),\n  content: cva('overflow-y-auto outline-none p-2'),\n  actions: cva(\n    'flex flex-row gap-3 justify-end border-border border-t px-6 py-4'\n  ),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Underlay: ThemeComponent<'Underlay'> = cva(\n  'bg-bg-underlay/50 backdrop-blur-xs'\n);\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Badge: ThemeComponent<'Badge'> = cva(\n  'inline-flex items-center truncate rounded-[20px] px-2 py-0.5',\n  {\n    variants: {\n      variant: {\n        dark: 'bg-bg-inverted text-white',\n        warning: 'bg-bg-warning',\n      },\n      size: {\n        default: 'text-xs',\n      },\n    },\n    defaultVariants: {\n      variant: 'dark',\n      size: 'default',\n    },\n  }\n);\n","export * from './Button.styles';\nexport * from './Card.styles';\nexport * from './CloseButton.styles';\nexport * from './Dialog.styles';\nexport * from './Headline.styles';\nexport * from './Field.styles';\nexport * from './HelpText.styles';\nexport * from './IconButton.styles';\nexport * from './Input.styles';\nexport * from './Label.styles';\nexport * from './Link.styles';\nexport * from './List.styles';\nexport * from './ListBox.styles';\nexport * from './Menu.styles';\nexport * from './Modal.styles';\nexport * from './SectionMessage.styles';\nexport * from './Popover.styles';\nexport * from './Select.styles';\nexport * from './Tabs.styles';\nexport * from './LegacyTable.styles';\nexport * from './Text.styles';\nexport * from './Tray.styles';\nexport * from './Underlay.styles';\nexport * from './Badge.styles';\n","import { Theme, cva } from '@marigold/system';\n\nexport const root: Theme['root'] = cva('text-text-primary bg-bg-body');\n","import type { Theme } from '@marigold/system';\nimport * as components from './components';\nimport { root } from './root';\n\nexport const theme: Theme = {\n  name: 'docs',\n  root,\n  components,\n};\n","import { theme } from './theme';\n\nexport { theme };\nexport default theme;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAEA,MAAaA,oCACX,mCACA,EACE,UAAU;CACR,SAAS;EACP,OAAO;EACP,QACE;EACF,UAAU;EACV,MAAM;EACP;CACD,MAAM,EACJ,OAAO,uBACR;CACF,EACF,CACF;;;;AChBD,MAAaC,kCACX,CAAC,6CAA6C,EAC9C;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,UACE;GACF,SACE;GACF,SAAS;GACT,SAAS;GACT,OAAO;GACR;EACD,MAAM;GACJ,SAAS;GACT,MAAM;GACP;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CACF;;;;ACxBD,MAAaC,yCAAiD;CAC5D;CACA;CACA;CACA;CACA;CACD,CAAC;;;;ACPF,MAAaC,SAAmC;CAC9C,wCAAiB,+BAA+B,EAC9C,UAAU,EACR,SAAS,EACP,YAAY,CAAC,UAAU,gBAAgB,EACxC,EACF,EACF,CAAC;CACF,sCAAe,iBAAiB;EAC9B,UAAU,EACR,SAAS;GACP,SAAS;GACT,WAAW;IACT;IACA;IACA;IACA;IACD;GACD,YAAY;GACZ,MAAM;GACP,EACF;EACD,iBAAiB,EACf,SAAS,WACV;EACF,CAAC;CACF,mCAAY,GAAG;CACf,kCAAW,GAAG;CACd,oCAAa,GAAG;CAChB,oCAAa,GAAG;CACjB;;;;AC9BD,MAAaC,sCAA2C,kBAAkB,EACxE,UAAU,EACR,MAAM;CACJ,WACE;CACF,WACE;CACF,WAAW;CACX,WAAW;CACX,WAAW;CACX,WAAW;CACZ,EACF,EACF,CAAC;;;;ACbF,MAAaC,mCAAqC,kBAAkB;CAClE,UAAU;EACR,SAAS;GACP,SAAS;GACT,UAAU,CACR,sDACA,eACD;GACF;EACD,MAAM;GACJ,SAAS;GACT,OAAO;GACR;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CAAC;;;;AClBF,MAAaC,WAAuC;CAClD,uCAAgB;CAChB,kCAAW;CACZ;;;;ACHD,MAAaC,yCAAgD;;;;ACA7D,MAAa,WAAW;AACxB,MAAa,kBAAkB;AAI/B,MAAa,WAAW;CACtB,SAAS;CACT,OAAO;CACR;AAED,MAAa,WAAW;CACtB,SAAS;CACT,OAAO;CACR;AAED,MAAa,eAAe;CAC1B,SAAS,GAAG,SAAS,QAAQ,GAAG,SAAS;CACzC,OAAO,GAAG,SAAS,MAAM,GAAG,SAAS;CACtC;AAID,MAAa,aAAa;AAC1B,MAAa,gBACX;AACF,MAAa,aAAa;AAC1B,MAAa,aAAa;;;;AC1B1B,MAAaC,mCAAqC,IAAI;CACpD,UAAU;EACR,SAAS;GACP,SAAS;GACT,UAAU;IACR;IACA;IACA;IACA;IACD;GACF;EACD,MAAM;GACJ,SAAS;GACT,OAAO;GACR;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACD,kBAAkB,CAChB;EACE,SAAS;EACT,MAAM;EACN,WAAW;EACZ,EACD;EACE,SAAS;EACT,MAAM;EACN,WAAW;EACZ,CACF;CACF,CAAC;;;;AChCF,MAAaC,kCAAmC,CAAC,cAAc,EAAE;CAC/D,UAAU;EACR,SAAS;GACP,SACE;GACF,SACE;GACF,WAAW;GACX,KAAK,CACH,uDACA,mFACD;GACD,KAAK;IACH;IACA;IACA;IACD;GACD,OAAO;GACP,OACE;GACH;EACD,MAAM;GACJ,QAAQ;GACR,QAAQ;GACR,OAAO;GACP,SAAS;GACT,OAAO;GACR;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CAAC;;;;ACjCF,MAAaC,OAA+B;CAC1C,+BAAQ,wBAAwB;CAChC,+BAAQ,GAAG;CACX,iCAAU,mBAAmB;CAC9B;;;;ACJD,MAAaC,UAAqC;CAChD,sCAAe;EACb;EACA;EAEA;EACD,CAAC;CACF,iCAAU;EACR;EACA;EACA;EACD,CAAC;CACF,iCACE;EACE;EACA;EACA;EACA;EACD,EACD;EACE,UAAU,EACR,MAAM;GACJ,SAAS;GACT,OAAO;GACR,EACF;EACD,iBAAiB,EACf,MAAM,SACP;EACF,CACF;CACD,qCAAc;CACd,oCAAa;CACd;;;;ACjCD,MAAaC,OAA+B;CAC1C,sCACE,CACE,+FACA,kDACD,EACD,EACE,UAAU,EACR,SAAS,EACP,SACE,kNACH,EACF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"}

package/dist/{index.d.ts → index.d.cts}

@@ -4,4 +4,4 @@ import { Theme } from "@marigold/system";
 declare const theme: Theme;
 //#endregion
 export { theme as default, theme };
-//# sourceMappingURL=index.d.ts.map
+//# sourceMappingURL=index.d.cts.map

package/dist/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../src/theme.ts"],"sourcesContent":[],"mappings":";;;cAIa,OAAO"}

package/dist/index.mjs

@@ -2,12 +2,17 @@ import { cva } from "@marigold/system";
 
 //#region rolldown:runtime
 var __defProp = Object.defineProperty;
-var __export = (all) => {
+var __export = (all, symbols) => {
 	let target = {};
-	for (var name in all) __defProp(target, name, {
-		get: all[name],
-		enumerable: true
-	});
+	for (var name in all) {
+		__defProp(target, name, {
+			get: all[name],
+			enumerable: true
+		});
+	}
+	if (symbols) {
+		__defProp(target, Symbol.toStringTag, { value: "Module" });
+	}
 	return target;
 };
 
@@ -123,7 +128,7 @@ const IconButton = cva();
 
 //#endregion
 //#region src/components/Input.styles.ts
-const inputBox = "border border-border rounded-xs text-text-primary";
+const inputBox = "border border-border rounded-sm text-text-primary";
 const inputBackground = "bg-white";
 const xSpacing = {
 	default: "px-3",
@@ -217,7 +222,11 @@ const List = {
 //#endregion
 //#region src/components/ListBox.styles.ts
 const ListBox = {
-	container: cva(["bg-bg-surface-overlay border-border rounded-xs border drop-shadow-lg"]),
+	container: cva([
+		"bg-bg-surface-overlay border-border rounded-sm border drop-shadow-lg",
+		"w-full",
+		"group-[[role=dialog]]/tray:border-0 group-[[role=dialog]]/tray:shadow-none group-[[role=dialog]]/tray:drop-shadow-none"
+	]),
 	list: cva([
 		"outline-hidden",
 		"p-1",
@@ -305,8 +314,9 @@ const Select = {
 				default: "gap-2",
 				floating: [
 					"shadow-xs",
-					"col-span-full row-start-1 grid grid-cols-subgrid grid-rows-subgrid",
-					"*:row-star-1 *:col-start-2 *:text-left",
+					"col-span-full row-start-1 grid! grid-cols-subgrid grid-rows-subgrid",
+					"*:row-start-1 *:col-start-2 *:text-left",
+					"[&>:first-child]:mr-6",
 					"gap-[inherit]"
 				]
 			},
@@ -340,20 +350,20 @@ const Tabs = {
 	tab: cva([
 		"text-text-primary-muted aria-selected:text-text-primary px-2 py-1 text-sm font-medium",
 		"aria-selected:border-border-primary -m-px border-b-2 border-transparent",
-		"focus:outline-hidden focus-visible:outline"
+		"focus:outline-hidden focus-visible:state-focus-borderless"
 	])
 };
 
 //#endregion
-//#region src/components/Table.styles.ts
-const Table = {
+//#region src/components/LegacyTable.styles.ts
+const LegacyTable = {
 	table: cva(["w-full overflow-hidden rounded-lg bg-white/40 text-sm", "border-secondary-200 border-separate border-spacing-0 border"]),
 	thead: cva(),
 	headerRow: cva(),
 	header: cva("px-3 pb-2 pt-3 text-start"),
 	body: cva(),
 	row: cva([], { variants: { variant: { hover: "hover:bg-neutral-100/80 " } } }),
-	cell: cva(["text-text-primary px-3 py-3.5 text-xs", "border-secondary-200 border-t"], { variants: { variant: { colorTable: "p-4 align-middle" } } })
+	cell: cva(["prose px-3 py-3.5 text-sm", "border-secondary-200 border-t"], { variants: { variant: { colorTable: "p-4 align-middle" } } })
 };
 
 //#endregion
@@ -365,6 +375,24 @@ const Text = cva("leading-7", { variants: { variant: {
 	muted: "text-muted-foreground text-sm"
 } } });
 
+//#endregion
+//#region src/components/Tray.styles.ts
+const Tray = {
+	overlay: cva("bg-black/50 fixed inset-0 z-40 flex items-end justify-center"),
+	container: cva([
+		"w-full border-0 inset-shadow-black inset-shadow-sm/20",
+		"relative grid-rows-[auto_auto_1fr_auto] max-h-[95vh] rounded-t-lg rounded-b-none",
+		"bg-bg-surface-overlay shadow-lg",
+		"outline-hidden grid",
+		"after:absolute after:inset-x-0 after:top-full after:h-screen after:bg-bg-surface-overlay after:content-['']"
+	]),
+	dragHandle: cva("bg-border mx-auto mt-2 h-1.5 w-12 rounded-full"),
+	header: cva("border-border border-b px-6 py-4"),
+	title: cva("font-semibold text-base"),
+	content: cva("overflow-y-auto outline-none p-2"),
+	actions: cva("flex flex-row gap-3 justify-end border-border border-t px-6 py-4")
+};
+
 //#endregion
 //#region src/components/Underlay.styles.ts
 const Underlay = cva("bg-bg-underlay/50 backdrop-blur-xs");
@@ -398,6 +426,7 @@ var components_exports = /* @__PURE__ */ __export({
 	HelpText: () => HelpText,
 	IconButton: () => IconButton,
 	Label: () => Label,
+	LegacyTable: () => LegacyTable,
 	Link: () => Link,
 	List: () => List,
 	ListBox: () => ListBox,
@@ -406,9 +435,9 @@ var components_exports = /* @__PURE__ */ __export({
 	Popover: () => Popover,
 	SectionMessage: () => SectionMessage,
 	Select: () => Select,
-	Table: () => Table,
 	Tabs: () => Tabs,
 	Text: () => Text,
+	Tray: () => Tray,
 	Underlay: () => Underlay,
 	inputBackground: () => inputBackground,
 	inputBox: () => inputBox,

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Button: ThemeComponent<'Button'>","Card: ThemeComponent<'Card'>","CloseButton: ThemeComponent<'CloseButton'>","Dialog: ThemeComponent<'Dialog'>","Headline: ThemeComponent<'Headline'>","Field: ThemeComponent<'Field'>","HelpText: ThemeComponent<'HelpText'>","IconButton: ThemeComponent<'IconButton'>","Label: ThemeComponent<'Label'>","Link: ThemeComponent<'Link'>","List: ThemeComponent<'List'>","ListBox: ThemeComponent<'ListBox'>","Menu: ThemeComponent<'Menu'>","Modal: ThemeComponent<'Modal'>","SectionMessage: ThemeComponent<'SectionMessage'>","Popover: ThemeComponent<'Popover'>","Select: ThemeComponent<'Select'>","Tabs: ThemeComponent<'Tabs'>","Table: ThemeComponent<'Table'>","Text: ThemeComponent<'Text'>","Underlay: ThemeComponent<'Underlay'>","Badge: ThemeComponent<'Badge'>","root: Theme['root']","theme: Theme"],"sources":["../src/components/Button.styles.ts","../src/components/Card.styles.ts","../src/components/CloseButton.styles.ts","../src/components/Dialog.styles.ts","../src/components/Headline.styles.ts","../src/components/Field.styles.ts","../src/components/HelpText.styles.ts","../src/components/IconButton.styles.ts","../src/components/Input.styles.ts","../src/components/Label.styles.ts","../src/components/Link.styles.ts","../src/components/List.styles.ts","../src/components/ListBox.styles.ts","../src/components/Menu.styles.ts","../src/components/Modal.styles.ts","../src/components/SectionMessage.styles.ts","../src/components/Popover.styles.ts","../src/components/Select.styles.ts","../src/components/Tabs.styles.ts","../src/components/Table.styles.ts","../src/components/Text.styles.ts","../src/components/Underlay.styles.ts","../src/components/Badge.styles.ts","../src/components/index.ts","../src/root.ts","../src/theme.ts","../src/index.ts"],"sourcesContent":["import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Button: ThemeComponent<'Button'> = cva(\n  'flex gap-2 rounded-xs px-3 py-2',\n  {\n    variants: {\n      variant: {\n        ghost: 'text-secondary-700 hover:text-secondary-900 p-0',\n        sunken:\n          'text-secondary-600 hover:bg-secondary-400/20 bg-secondary-400/10 h-8 justify-start rounded-lg',\n        inverted: 'bg-secondary-100',\n        icon: 'border-none translate-y-0.5 outline-none p-0',\n      },\n      size: {\n        small: 'px-3 py-1.5 text-sm',\n      },\n    },\n  }\n);\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Card: ThemeComponent<'Card'> = cva(\n  ['relative w-full overflow-hidden rounded-xl'],\n  {\n    variants: {\n      variant: {\n        default:\n          'bg-bg-surface-raised p-6 shadow-xs border border-secondary-300',\n        hovering:\n          'bg-bg-surface-raised p-6 shadow-xs transition-shadow hover:cursor-pointer hover:shadow-md border border-secondary-300',\n        content:\n          'bg-bg-surface-raised my-6 shadow-xs border border-secondary-300',\n        outline: 'bg-white/40 my-6 border border-secondary-200',\n        lowered: 'bg-bg-surface-raised-lowered p-6',\n        image: '',\n      },\n      size: {\n        default: '',\n        full: 'size-full',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  }\n);\n","import type { ThemeComponent } from '@marigold/system';\nimport { cva } from '@marigold/system';\n\nexport const CloseButton: ThemeComponent<'CloseButton'> = cva([\n  'flex items-center justify-center whitespace-nowrap',\n  'cursor-pointer',\n  'transition-[color,box-shadow]',\n  'rounded',\n  '[&_svg]:size-4 [&_svg]:opacity-60 [&_svg]:transition-opacity hover:[&_svg]:opacity-100',\n]);\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Dialog: ThemeComponent<'Dialog'> = {\n  closeButton: cva('absolute top-4 right-4 ml-4', {\n    variants: {\n      variant: {\n        fullscreen: ['size-6', 'right-4 top-4'],\n      },\n    },\n  }),\n  container: cva('bg-bg-surface', {\n    variants: {\n      variant: {\n        default: 'relative rounded-lg shadow-lg',\n        codeblock: [\n          'static px-0 py-6',\n          'bg-code-900 max-h-[96vh] w-full overflow-y-auto rounded-lg shadow-lg',\n          'scrollbar-thin scrollbar-thumb-code-500 scrollbar-track-transparent scrollbar-thumb-rounded-full overflow-x-auto',\n          '*:max-h-none *:min-w-[75vw]',\n        ],\n        fullscreen: 'h-screen w-screen px-4 pb-8 pt-10',\n        zoom: 'max-h-[96vh] overflow-y-auto',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  }),\n  header: cva(''),\n  title: cva(''),\n  content: cva(''),\n  actions: cva(''),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Headline: ThemeComponent<'Headline'> = cva('*:no-underline', {\n  variants: {\n    size: {\n      'level-1':\n        'scroll-m-20 text-5xl font-extrabold tracking-tight lg:text-6xl',\n      'level-2':\n        'scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0',\n      'level-3': 'scroll-m-20 text-2xl font-semibold tracking-tight',\n      'level-4': 'scroll-m-20 text-xl font-semibold tracking-tight',\n      'level-5': 'mt-8 scroll-m-20 text-lg font-semibold tracking-tight',\n      'level-6': 'mt-8 scroll-m-20 text-base font-semibold tracking-tight',\n    },\n  },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Field: ThemeComponent<'Field'> = cva('grid gap-y-0.5', {\n  variants: {\n    variant: {\n      default: '',\n      floating: [\n        'grid-cols-[min-content_auto] grid-rows-[auto_auto]',\n        'items-center',\n      ],\n    },\n    size: {\n      default: 'gap-x-3',\n      small: 'gap-x-2',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'default',\n  },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const HelpText: ThemeComponent<'HelpText'> = {\n  container: cva(),\n  icon: cva(),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const IconButton: ThemeComponent<'IconButton'> = cva();\n","// Box\n// ---------------\nexport const inputBox = 'border border-border rounded-xs text-text-primary';\nexport const inputBackground = 'bg-white';\n\n// Spacing\n// ---------------\nexport const xSpacing = {\n  default: 'px-3',\n  small: 'px-2.5',\n};\n\nexport const ySpacing = {\n  default: 'py-2',\n  small: 'py-1.5',\n};\n\nexport const inputSpacing = {\n  default: `${xSpacing.default} ${ySpacing.default}`,\n  small: `${xSpacing.small} ${ySpacing.small}`,\n};\n\n// States\n// ---------------\nexport const inputFocus = '';\nexport const inputDisabled =\n  'disabled:cursor-not-allowed disabled:text-text-disabled disabled:bg-bg-disabled';\nexport const inputError = '';\nexport const inputHover = '';\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Label: ThemeComponent<'Label'> = cva('', {\n  variants: {\n    variant: {\n      default: '',\n      floating: [\n        'z-10 col-start-1 row-start-1',\n        'pointer-events-none',\n        'text-secondary-400 text-nowrap',\n        'after:content-[\":\"]',\n      ],\n    },\n    size: {\n      default: 'text-sm',\n      small: 'text-xs',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'default',\n  },\n  compoundVariants: [\n    {\n      variant: 'floating',\n      size: 'default',\n      className: 'pl-4',\n    },\n    {\n      variant: 'floating',\n      size: 'small',\n      className: 'pl-3',\n    },\n  ],\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Link: ThemeComponent<'Link'> = cva(['font-medium'], {\n  variants: {\n    variant: {\n      default:\n        'underline underline-offset-4 transition-all hover:text-slate-700',\n      primary:\n        'bg-text-primary text-white leading-none hover:bg-slate-700 transition-all',\n      secondary: 'border-text-primary border-2 leading-none hover:bg-slate-100',\n      toc: [\n        'text-secondary-500 hover:text-secondary-800 text-xs',\n        'data-[active=true]:text-secondary-800 font-normal data-[active=true]:font-medium',\n      ],\n      cta: [\n        'h-component rounded-2xl bg-purple-700 px-5 py-1.5',\n        'text-sm font-semibold text-purple-100',\n        'transition-all hover:bg-purple-600',\n      ],\n      ghost: 'hover:underline underline-offset-4',\n      shiny:\n        'border border-slate-200 bg-slate-100 hover:bg-slate-200 transition-all ease-in',\n    },\n    size: {\n      inline: '',\n      xsmall: 'rounded-full text-xs py-1.5 px-4',\n      small: 'px-3 py-1.5 text-sm rounded-xs',\n      regular: 'px-3 py-2 rounded-xs',\n      large: 'px-8 py-3.5 rounded-xs',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'inline',\n  },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const List: ThemeComponent<'List'> = {\n  ul: cva('list-inside list-none'),\n  ol: cva(''),\n  item: cva('list-none py-0.5'),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const ListBox: ThemeComponent<'ListBox'> = {\n  container: cva([\n    'bg-bg-surface-overlay border-border rounded-xs border drop-shadow-lg',\n  ]),\n  list: cva([\n    'outline-hidden',\n    'p-1',\n    'sm:max-h-[45vh] md:max-h-[75vh] lg:max-h-[75vh]',\n  ]),\n  item: cva(\n    [\n      'text-text-primary',\n      'cursor-pointer rounded-xs outline-hidden',\n      'hover:bg-bg-hover focus:bg-bg-hover',\n      'aria-selected:bg-bg-hover',\n    ],\n    {\n      variants: {\n        size: {\n          default: 'p-2',\n          small: 'px-2 py-1 text-sm',\n        },\n      },\n      defaultVariants: {\n        size: 'small',\n      },\n    }\n  ),\n  section: cva(),\n  header: cva(),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Menu: ThemeComponent<'Menu'> = {\n  container: cva(\n    [\n      'border-border bg-bg-surface overflow-hidden rounded-md border px-1 py-1.5 text-sm shadow-md',\n      'sm:max-h-[45vh] md:max-h-[75vh] lg:max-h-[75vh]',\n    ],\n    {\n      variants: {\n        variant: {\n          command:\n            '[&_[cmdk-list-sizer]]:divide-secondary-100 size-full p-0 sm:w-[500px] [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:py-2 [&_[cmdk-item]_svg]:size-5 [&_[cmdk-list-sizer]]:divide-y',\n        },\n      },\n    }\n  ),\n  item: cva('focus:bg-bg-hover cursor-pointer rounded-xs p-2 outline-hidden', {\n    variants: {\n      variant: {\n        command: ['aria-selected:bg-bg-hover px-4 py-1.5'],\n      },\n    },\n  }),\n  section: cva('', {\n    variants: {\n      variant: {\n        command:\n          '[&_[cmdk-group-heading]]:text-text-primary-muted [&_[cmdk-group-heading]]:p-4 [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',\n      },\n    },\n  }),\n  button: cva(\n    'text-secondary-700 hover:bg-secondary-400/20 h-8 rounded-lg px-1'\n  ),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Modal: ThemeComponent<'Modal'> = cva();\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const SectionMessage: ThemeComponent<'SectionMessage'> = {\n  container: cva(\n    [\n      'not-prose items-center rounded-lg p-4',\n      \"grid-cols-[min-content_auto] gap-1 [grid-template-areas:'icon_title_title''none_content_content']\",\n    ],\n    {\n      variants: {\n        variant: {\n          info: 'bg-bg-info text-text-info',\n          warning: 'bg-bg-warning text-text-warning',\n        },\n      },\n    }\n  ),\n  icon: cva('size-6'),\n  title: cva('mb-1 font-bold leading-none tracking-tight'),\n  content: cva('text-sm [&_p]:leading-relaxed [&_code]:text-xs'),\n  close: cva('h-5 w-5 text-center'),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Popover: ThemeComponent<'Popover'> = cva([\n  'animate-in',\n  'placement-top:-translate-y-1',\n  'placement-bottom:translate-y-1',\n  'placement-right:-translate-x-1',\n  'placement-left:translate-x-1',\n]);\n","import { ThemeComponent, cva } from '@marigold/system';\nimport {\n  inputBackground,\n  inputBox,\n  inputDisabled,\n  inputSpacing,\n} from './Input.styles';\n\nexport const Select: ThemeComponent<'Select'> = {\n  icon: cva('text-secondary-400', {\n    variants: {\n      variant: {\n        default: '',\n        floating: 'justify-self-end',\n      },\n      size: {\n        default: '',\n        small: 'size-3',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  }),\n  select: cva([inputBox, inputBackground, inputDisabled, 'outline-hidden'], {\n    variants: {\n      variant: {\n        default: 'gap-2',\n        floating: [\n          'shadow-xs',\n          'col-span-full row-start-1 grid grid-cols-subgrid grid-rows-subgrid',\n          // selected value and caret get moved to 2nd col\n          '*:row-star-1 *:col-start-2 *:text-left',\n          // So the button gap is not used to separate label from selected value\n          'gap-[inherit]',\n        ],\n      },\n      size: {\n        default: [inputSpacing.default],\n        small: [inputSpacing.small, 'text-xs'],\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n    compoundVariants: [\n      {\n        variant: 'floating',\n        size: 'default',\n        className: 'px-4 py-1.5',\n      },\n      {\n        variant: 'floating',\n        size: 'small',\n        className: 'px-3',\n      },\n    ],\n  }),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Tabs: ThemeComponent<'Tabs'> = {\n  container: cva('', {\n    variants: {\n      variant: {\n        demo: 'my-6',\n      },\n    },\n  }),\n  tabpanel: cva(''),\n  tabsList: cva('mb-4 border-b'),\n  tab: cva([\n    'text-text-primary-muted aria-selected:text-text-primary px-2 py-1 text-sm font-medium',\n    'aria-selected:border-border-primary -m-px border-b-2 border-transparent',\n    'focus:outline-hidden focus-visible:outline',\n  ]),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Table: ThemeComponent<'Table'> = {\n  table: cva([\n    'w-full overflow-hidden rounded-lg bg-white/40 text-sm',\n    'border-secondary-200 border-separate border-spacing-0 border',\n  ]),\n  thead: cva(),\n  headerRow: cva(),\n  header: cva('px-3 pb-2 pt-3 text-start'),\n  body: cva(),\n  row: cva([], {\n    variants: {\n      variant: {\n        hover: 'hover:bg-neutral-100/80 ',\n      },\n    },\n  }),\n  cell: cva(\n    ['text-text-primary px-3 py-3.5 text-xs', 'border-secondary-200 border-t'],\n    {\n      variants: {\n        variant: {\n          colorTable: 'p-4 align-middle',\n        },\n      },\n    }\n  ),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Text: ThemeComponent<'Text'> = cva('leading-7', {\n  variants: {\n    variant: {\n      lead: 'text-muted-foreground text-xl',\n      large: 'text-lg font-semibold',\n      small: 'text-sm font-medium leading-none',\n      muted: 'text-muted-foreground text-sm',\n    },\n  },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Underlay: ThemeComponent<'Underlay'> = cva(\n  'bg-bg-underlay/50 backdrop-blur-xs'\n);\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Badge: ThemeComponent<'Badge'> = cva(\n  'inline-flex items-center truncate rounded-[20px] px-2 py-0.5',\n  {\n    variants: {\n      variant: {\n        dark: 'bg-bg-inverted text-white',\n        warning: 'bg-bg-warning',\n      },\n      size: {\n        default: 'text-xs',\n      },\n    },\n    defaultVariants: {\n      variant: 'dark',\n      size: 'default',\n    },\n  }\n);\n","export * from './Button.styles';\nexport * from './Card.styles';\nexport * from './CloseButton.styles';\nexport * from './Dialog.styles';\nexport * from './Headline.styles';\nexport * from './Field.styles';\nexport * from './HelpText.styles';\nexport * from './IconButton.styles';\nexport * from './Input.styles';\nexport * from './Label.styles';\nexport * from './Link.styles';\nexport * from './List.styles';\nexport * from './ListBox.styles';\nexport * from './Menu.styles';\nexport * from './Modal.styles';\nexport * from './SectionMessage.styles';\nexport * from './Popover.styles';\nexport * from './Select.styles';\nexport * from './Tabs.styles';\nexport * from './Table.styles';\nexport * from './Text.styles';\nexport * from './Underlay.styles';\nexport * from './Badge.styles';\n","import { Theme, cva } from '@marigold/system';\n\nexport const root: Theme['root'] = cva('text-text-primary bg-bg-body');\n","import type { Theme } from '@marigold/system';\nimport * as components from './components';\nimport { root } from './root';\n\nexport const theme: Theme = {\n  name: 'docs',\n  root,\n  components,\n};\n","import { theme } from './theme';\n\nexport { theme };\nexport default theme;\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":["Button: ThemeComponent<'Button'>","Card: ThemeComponent<'Card'>","CloseButton: ThemeComponent<'CloseButton'>","Dialog: ThemeComponent<'Dialog'>","Headline: ThemeComponent<'Headline'>","Field: ThemeComponent<'Field'>","HelpText: ThemeComponent<'HelpText'>","IconButton: ThemeComponent<'IconButton'>","Label: ThemeComponent<'Label'>","Link: ThemeComponent<'Link'>","List: ThemeComponent<'List'>","ListBox: ThemeComponent<'ListBox'>","Menu: ThemeComponent<'Menu'>","Modal: ThemeComponent<'Modal'>","SectionMessage: ThemeComponent<'SectionMessage'>","Popover: ThemeComponent<'Popover'>","Select: ThemeComponent<'Select'>","Tabs: ThemeComponent<'Tabs'>","LegacyTable: ThemeComponent<'LegacyTable'>","Text: ThemeComponent<'Text'>","Tray: ThemeComponent<'Tray'>","Underlay: ThemeComponent<'Underlay'>","Badge: ThemeComponent<'Badge'>","root: Theme['root']","theme: Theme"],"sources":["../src/components/Button.styles.ts","../src/components/Card.styles.ts","../src/components/CloseButton.styles.ts","../src/components/Dialog.styles.ts","../src/components/Headline.styles.ts","../src/components/Field.styles.ts","../src/components/HelpText.styles.ts","../src/components/IconButton.styles.ts","../src/components/Input.styles.ts","../src/components/Label.styles.ts","../src/components/Link.styles.ts","../src/components/List.styles.ts","../src/components/ListBox.styles.ts","../src/components/Menu.styles.ts","../src/components/Modal.styles.ts","../src/components/SectionMessage.styles.ts","../src/components/Popover.styles.ts","../src/components/Select.styles.ts","../src/components/Tabs.styles.ts","../src/components/LegacyTable.styles.ts","../src/components/Text.styles.ts","../src/components/Tray.styles.ts","../src/components/Underlay.styles.ts","../src/components/Badge.styles.ts","../src/components/index.ts","../src/root.ts","../src/theme.ts","../src/index.ts"],"sourcesContent":["import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Button: ThemeComponent<'Button'> = cva(\n  'flex gap-2 rounded-xs px-3 py-2',\n  {\n    variants: {\n      variant: {\n        ghost: 'text-secondary-700 hover:text-secondary-900 p-0',\n        sunken:\n          'text-secondary-600 hover:bg-secondary-400/20 bg-secondary-400/10 h-8 justify-start rounded-lg',\n        inverted: 'bg-secondary-100',\n        icon: 'border-none translate-y-0.5 outline-none p-0',\n      },\n      size: {\n        small: 'px-3 py-1.5 text-sm',\n      },\n    },\n  }\n);\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Card: ThemeComponent<'Card'> = cva(\n  ['relative w-full overflow-hidden rounded-xl'],\n  {\n    variants: {\n      variant: {\n        default:\n          'bg-bg-surface-raised p-6 shadow-xs border border-secondary-300',\n        hovering:\n          'bg-bg-surface-raised p-6 shadow-xs transition-shadow hover:cursor-pointer hover:shadow-md border border-secondary-300',\n        content:\n          'bg-bg-surface-raised my-6 shadow-xs border border-secondary-300',\n        outline: 'bg-white/40 my-6 border border-secondary-200',\n        lowered: 'bg-bg-surface-raised-lowered p-6',\n        image: '',\n      },\n      size: {\n        default: '',\n        full: 'size-full',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  }\n);\n","import type { ThemeComponent } from '@marigold/system';\nimport { cva } from '@marigold/system';\n\nexport const CloseButton: ThemeComponent<'CloseButton'> = cva([\n  'flex items-center justify-center whitespace-nowrap',\n  'cursor-pointer',\n  'transition-[color,box-shadow]',\n  'rounded',\n  '[&_svg]:size-4 [&_svg]:opacity-60 [&_svg]:transition-opacity hover:[&_svg]:opacity-100',\n]);\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Dialog: ThemeComponent<'Dialog'> = {\n  closeButton: cva('absolute top-4 right-4 ml-4', {\n    variants: {\n      variant: {\n        fullscreen: ['size-6', 'right-4 top-4'],\n      },\n    },\n  }),\n  container: cva('bg-bg-surface', {\n    variants: {\n      variant: {\n        default: 'relative rounded-lg shadow-lg',\n        codeblock: [\n          'static px-0 py-6',\n          'bg-code-900 max-h-[96vh] w-full overflow-y-auto rounded-lg shadow-lg',\n          'scrollbar-thin scrollbar-thumb-code-500 scrollbar-track-transparent scrollbar-thumb-rounded-full overflow-x-auto',\n          '*:max-h-none *:min-w-[75vw]',\n        ],\n        fullscreen: 'h-screen w-screen px-4 pb-8 pt-10',\n        zoom: 'max-h-[96vh] overflow-y-auto',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  }),\n  header: cva(''),\n  title: cva(''),\n  content: cva(''),\n  actions: cva(''),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Headline: ThemeComponent<'Headline'> = cva('*:no-underline', {\n  variants: {\n    size: {\n      'level-1':\n        'scroll-m-20 text-5xl font-extrabold tracking-tight lg:text-6xl',\n      'level-2':\n        'scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0',\n      'level-3': 'scroll-m-20 text-2xl font-semibold tracking-tight',\n      'level-4': 'scroll-m-20 text-xl font-semibold tracking-tight',\n      'level-5': 'mt-8 scroll-m-20 text-lg font-semibold tracking-tight',\n      'level-6': 'mt-8 scroll-m-20 text-base font-semibold tracking-tight',\n    },\n  },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Field: ThemeComponent<'Field'> = cva('grid gap-y-0.5', {\n  variants: {\n    variant: {\n      default: '',\n      floating: [\n        'grid-cols-[min-content_auto] grid-rows-[auto_auto]',\n        'items-center',\n      ],\n    },\n    size: {\n      default: 'gap-x-3',\n      small: 'gap-x-2',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'default',\n  },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const HelpText: ThemeComponent<'HelpText'> = {\n  container: cva(),\n  icon: cva(),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const IconButton: ThemeComponent<'IconButton'> = cva();\n","// Box\n// ---------------\nexport const inputBox = 'border border-border rounded-sm text-text-primary';\nexport const inputBackground = 'bg-white';\n\n// Spacing\n// ---------------\nexport const xSpacing = {\n  default: 'px-3',\n  small: 'px-2.5',\n};\n\nexport const ySpacing = {\n  default: 'py-2',\n  small: 'py-1.5',\n};\n\nexport const inputSpacing = {\n  default: `${xSpacing.default} ${ySpacing.default}`,\n  small: `${xSpacing.small} ${ySpacing.small}`,\n};\n\n// States\n// ---------------\nexport const inputFocus = '';\nexport const inputDisabled =\n  'disabled:cursor-not-allowed disabled:text-text-disabled disabled:bg-bg-disabled';\nexport const inputError = '';\nexport const inputHover = '';\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Label: ThemeComponent<'Label'> = cva('', {\n  variants: {\n    variant: {\n      default: '',\n      floating: [\n        'z-10 col-start-1 row-start-1',\n        'pointer-events-none',\n        'text-secondary-400 text-nowrap',\n        'after:content-[\":\"]',\n      ],\n    },\n    size: {\n      default: 'text-sm',\n      small: 'text-xs',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'default',\n  },\n  compoundVariants: [\n    {\n      variant: 'floating',\n      size: 'default',\n      className: 'pl-4',\n    },\n    {\n      variant: 'floating',\n      size: 'small',\n      className: 'pl-3',\n    },\n  ],\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Link: ThemeComponent<'Link'> = cva(['font-medium'], {\n  variants: {\n    variant: {\n      default:\n        'underline underline-offset-4 transition-all hover:text-slate-700',\n      primary:\n        'bg-text-primary text-white leading-none hover:bg-slate-700 transition-all',\n      secondary: 'border-text-primary border-2 leading-none hover:bg-slate-100',\n      toc: [\n        'text-secondary-500 hover:text-secondary-800 text-xs',\n        'data-[active=true]:text-secondary-800 font-normal data-[active=true]:font-medium',\n      ],\n      cta: [\n        'h-component rounded-2xl bg-purple-700 px-5 py-1.5',\n        'text-sm font-semibold text-purple-100',\n        'transition-all hover:bg-purple-600',\n      ],\n      ghost: 'hover:underline underline-offset-4',\n      shiny:\n        'border border-slate-200 bg-slate-100 hover:bg-slate-200 transition-all ease-in',\n    },\n    size: {\n      inline: '',\n      xsmall: 'rounded-full text-xs py-1.5 px-4',\n      small: 'px-3 py-1.5 text-sm rounded-xs',\n      regular: 'px-3 py-2 rounded-xs',\n      large: 'px-8 py-3.5 rounded-xs',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'inline',\n  },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const List: ThemeComponent<'List'> = {\n  ul: cva('list-inside list-none'),\n  ol: cva(''),\n  item: cva('list-none py-0.5'),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const ListBox: ThemeComponent<'ListBox'> = {\n  container: cva([\n    'bg-bg-surface-overlay border-border rounded-sm border drop-shadow-lg',\n    'w-full',\n    // In a Tray\n    'group-[[role=dialog]]/tray:border-0 group-[[role=dialog]]/tray:shadow-none group-[[role=dialog]]/tray:drop-shadow-none',\n  ]),\n  list: cva([\n    'outline-hidden',\n    'p-1',\n    'sm:max-h-[45vh] md:max-h-[75vh] lg:max-h-[75vh]',\n  ]),\n  item: cva(\n    [\n      'text-text-primary',\n      'cursor-pointer rounded-xs outline-hidden',\n      'hover:bg-bg-hover focus:bg-bg-hover',\n      'aria-selected:bg-bg-hover',\n    ],\n    {\n      variants: {\n        size: {\n          default: 'p-2',\n          small: 'px-2 py-1 text-sm',\n        },\n      },\n      defaultVariants: {\n        size: 'small',\n      },\n    }\n  ),\n  section: cva(),\n  header: cva(),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Menu: ThemeComponent<'Menu'> = {\n  container: cva(\n    [\n      'border-border bg-bg-surface overflow-hidden rounded-md border px-1 py-1.5 text-sm shadow-md',\n      'sm:max-h-[45vh] md:max-h-[75vh] lg:max-h-[75vh]',\n    ],\n    {\n      variants: {\n        variant: {\n          command:\n            '[&_[cmdk-list-sizer]]:divide-secondary-100 size-full p-0 sm:w-[500px] [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:py-2 [&_[cmdk-item]_svg]:size-5 [&_[cmdk-list-sizer]]:divide-y',\n        },\n      },\n    }\n  ),\n  item: cva('focus:bg-bg-hover cursor-pointer rounded-xs p-2 outline-hidden', {\n    variants: {\n      variant: {\n        command: ['aria-selected:bg-bg-hover px-4 py-1.5'],\n      },\n    },\n  }),\n  section: cva('', {\n    variants: {\n      variant: {\n        command:\n          '[&_[cmdk-group-heading]]:text-text-primary-muted [&_[cmdk-group-heading]]:p-4 [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',\n      },\n    },\n  }),\n  button: cva(\n    'text-secondary-700 hover:bg-secondary-400/20 h-8 rounded-lg px-1'\n  ),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Modal: ThemeComponent<'Modal'> = cva();\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const SectionMessage: ThemeComponent<'SectionMessage'> = {\n  container: cva(\n    [\n      'not-prose items-center rounded-lg p-4',\n      \"grid-cols-[min-content_auto] gap-1 [grid-template-areas:'icon_title_title''none_content_content']\",\n    ],\n    {\n      variants: {\n        variant: {\n          info: 'bg-bg-info text-text-info',\n          warning: 'bg-bg-warning text-text-warning',\n        },\n      },\n    }\n  ),\n  icon: cva('size-6'),\n  title: cva('mb-1 font-bold leading-none tracking-tight'),\n  content: cva('text-sm [&_p]:leading-relaxed [&_code]:text-xs'),\n  close: cva('h-5 w-5 text-center'),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Popover: ThemeComponent<'Popover'> = cva([\n  'animate-in',\n  'placement-top:-translate-y-1',\n  'placement-bottom:translate-y-1',\n  'placement-right:-translate-x-1',\n  'placement-left:translate-x-1',\n]);\n","import { ThemeComponent, cva } from '@marigold/system';\nimport {\n  inputBackground,\n  inputBox,\n  inputDisabled,\n  inputSpacing,\n} from './Input.styles';\n\nexport const Select: ThemeComponent<'Select'> = {\n  icon: cva('text-secondary-400', {\n    variants: {\n      variant: {\n        default: '',\n        floating: 'justify-self-end',\n      },\n      size: {\n        default: '',\n        small: 'size-3',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  }),\n  select: cva([inputBox, inputBackground, inputDisabled, 'outline-hidden'], {\n    variants: {\n      variant: {\n        default: 'gap-2',\n        floating: [\n          'shadow-xs',\n          'col-span-full row-start-1 grid! grid-cols-subgrid grid-rows-subgrid',\n          // selected value and caret get moved to 2nd col\n          '*:row-start-1 *:col-start-2 *:text-left',\n          // leave space for the chevron icon at the end\n          '[&>:first-child]:mr-6',\n          // So the button gap is not used to separate label from selected value\n          'gap-[inherit]',\n        ],\n      },\n      size: {\n        default: [inputSpacing.default],\n        small: [inputSpacing.small, 'text-xs'],\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n    compoundVariants: [\n      {\n        variant: 'floating',\n        size: 'default',\n        className: 'px-4 py-1.5',\n      },\n      {\n        variant: 'floating',\n        size: 'small',\n        className: 'px-3',\n      },\n    ],\n  }),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Tabs: ThemeComponent<'Tabs'> = {\n  container: cva('', {\n    variants: {\n      variant: {\n        demo: 'my-6',\n      },\n    },\n  }),\n  tabpanel: cva(''),\n  tabsList: cva('mb-4 border-b'),\n  tab: cva([\n    'text-text-primary-muted aria-selected:text-text-primary px-2 py-1 text-sm font-medium',\n    'aria-selected:border-border-primary -m-px border-b-2 border-transparent',\n    'focus:outline-hidden focus-visible:state-focus-borderless',\n  ]),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const LegacyTable: ThemeComponent<'LegacyTable'> = {\n  table: cva([\n    'w-full overflow-hidden rounded-lg bg-white/40 text-sm',\n    'border-secondary-200 border-separate border-spacing-0 border',\n  ]),\n  thead: cva(),\n  headerRow: cva(),\n  header: cva('px-3 pb-2 pt-3 text-start'),\n  body: cva(),\n  row: cva([], {\n    variants: {\n      variant: {\n        hover: 'hover:bg-neutral-100/80 ',\n      },\n    },\n  }),\n  cell: cva(['prose px-3 py-3.5 text-sm', 'border-secondary-200 border-t'], {\n    variants: {\n      variant: {\n        colorTable: 'p-4 align-middle',\n      },\n    },\n  }),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Text: ThemeComponent<'Text'> = cva('leading-7', {\n  variants: {\n    variant: {\n      lead: 'text-muted-foreground text-xl',\n      large: 'text-lg font-semibold',\n      small: 'text-sm font-medium leading-none',\n      muted: 'text-muted-foreground text-sm',\n    },\n  },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Tray: ThemeComponent<'Tray'> = {\n  overlay: cva('bg-black/50 fixed inset-0 z-40 flex items-end justify-center'),\n  container: cva([\n    'w-full border-0 inset-shadow-black inset-shadow-sm/20',\n    'relative grid-rows-[auto_auto_1fr_auto] max-h-[95vh] rounded-t-lg rounded-b-none',\n    'bg-bg-surface-overlay shadow-lg',\n    'outline-hidden grid',\n    \"after:absolute after:inset-x-0 after:top-full after:h-screen after:bg-bg-surface-overlay after:content-['']\",\n  ]),\n  dragHandle: cva('bg-border mx-auto mt-2 h-1.5 w-12 rounded-full'),\n  header: cva('border-border border-b px-6 py-4'),\n  title: cva('font-semibold text-base'),\n  content: cva('overflow-y-auto outline-none p-2'),\n  actions: cva(\n    'flex flex-row gap-3 justify-end border-border border-t px-6 py-4'\n  ),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Underlay: ThemeComponent<'Underlay'> = cva(\n  'bg-bg-underlay/50 backdrop-blur-xs'\n);\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Badge: ThemeComponent<'Badge'> = cva(\n  'inline-flex items-center truncate rounded-[20px] px-2 py-0.5',\n  {\n    variants: {\n      variant: {\n        dark: 'bg-bg-inverted text-white',\n        warning: 'bg-bg-warning',\n      },\n      size: {\n        default: 'text-xs',\n      },\n    },\n    defaultVariants: {\n      variant: 'dark',\n      size: 'default',\n    },\n  }\n);\n","export * from './Button.styles';\nexport * from './Card.styles';\nexport * from './CloseButton.styles';\nexport * from './Dialog.styles';\nexport * from './Headline.styles';\nexport * from './Field.styles';\nexport * from './HelpText.styles';\nexport * from './IconButton.styles';\nexport * from './Input.styles';\nexport * from './Label.styles';\nexport * from './Link.styles';\nexport * from './List.styles';\nexport * from './ListBox.styles';\nexport * from './Menu.styles';\nexport * from './Modal.styles';\nexport * from './SectionMessage.styles';\nexport * from './Popover.styles';\nexport * from './Select.styles';\nexport * from './Tabs.styles';\nexport * from './LegacyTable.styles';\nexport * from './Text.styles';\nexport * from './Tray.styles';\nexport * from './Underlay.styles';\nexport * from './Badge.styles';\n","import { Theme, cva } from '@marigold/system';\n\nexport const root: Theme['root'] = cva('text-text-primary bg-bg-body');\n","import type { Theme } from '@marigold/system';\nimport * as components from './components';\nimport { root } from './root';\n\nexport const theme: Theme = {\n  name: 'docs',\n  root,\n  components,\n};\n","import { theme } from './theme';\n\nexport { theme };\nexport default theme;\n"],"mappings":"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"}

package/dist/styles.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -69,6 +69,7 @@
     --color-neutral-800: #262626;
     --color-neutral-900: #171717;
     --color-neutral-950: #0a0a0a;
+    --color-black: #000;
     --color-white: #ffffff;
     --spacing: 0.25rem;
     --text-xs: 0.75rem;
@@ -97,6 +98,7 @@
     --tracking-tight: -0.025em;
     --leading-relaxed: 1.625;
     --radius-xs: 0.125rem;
+    --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
@@ -316,15 +318,24 @@
   .pointer-events-none {
     pointer-events: none;
   }
+  .visible {
+    visibility: visible;
+  }
   .absolute {
     position: absolute;
   }
+  .fixed {
+    position: fixed;
+  }
   .relative {
     position: relative;
   }
   .static {
     position: static;
   }
+  .inset-0 {
+    inset: calc(var(--spacing) * 0);
+  }
   .top-4 {
     top: calc(var(--spacing) * 4);
   }
@@ -334,6 +345,9 @@
   .z-10 {
     z-index: 10;
   }
+  .z-40 {
+    z-index: 40;
+  }
   .col-span-full {
     grid-column: 1 / -1;
   }
@@ -368,9 +382,15 @@
     margin-inline: auto;
     padding-inline: 2rem;
   }
+  .mx-auto {
+    margin-inline: auto;
+  }
   .my-6 {
     margin-block: calc(var(--spacing) * 6);
   }
+  .mt-2 {
+    margin-top: calc(var(--spacing) * 2);
+  }
   .mt-8 {
     margin-top: calc(var(--spacing) * 8);
   }
@@ -383,6 +403,27 @@
   .ml-4 {
     margin-left: calc(var(--spacing) * 4);
   }
+  .scrollbar {
+    &::-webkit-scrollbar-track {
+      background-color: var(--scrollbar-track);
+      border-radius: var(--scrollbar-track-radius);
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--scrollbar-thumb);
+      border-radius: var(--scrollbar-thumb-radius);
+    }
+    &::-webkit-scrollbar-corner {
+      background-color: var(--scrollbar-corner);
+      border-radius: var(--scrollbar-corner-radius);
+    }
+    scrollbar-width: auto;
+    scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
+    &::-webkit-scrollbar {
+      display: block;
+      width: var(--scrollbar-width, 16px);
+      height: var(--scrollbar-height, 16px);
+    }
+  }
   .scrollbar-thin {
     &::-webkit-scrollbar-track {
       background-color: var(--scrollbar-track);
@@ -410,6 +451,9 @@
   .grid {
     display: grid;
   }
+  .grid\! {
+    display: grid !important;
+  }
   .inline {
     display: inline;
   }
@@ -431,6 +475,9 @@
     width: 100%;
     height: 100%;
   }
+  .h-1\.5 {
+    height: calc(var(--spacing) * 1.5);
+  }
   .h-5 {
     height: calc(var(--spacing) * 5);
   }
@@ -440,12 +487,21 @@
   .h-screen {
     height: 100vh;
   }
+  .max-h-\[95vh\] {
+    max-height: 95vh;
+  }
   .max-h-\[96vh\] {
     max-height: 96vh;
   }
   .w-5 {
     width: calc(var(--spacing) * 5);
   }
+  .w-12 {
+    width: calc(var(--spacing) * 12);
+  }
+  .w-32 {
+    width: calc(var(--spacing) * 32);
+  }
   .w-full {
     width: 100%;
   }
@@ -485,15 +541,27 @@
   .grid-rows-\[auto_auto\] {
     grid-template-rows: auto auto;
   }
+  .grid-rows-\[auto_auto_1fr_auto\] {
+    grid-template-rows: auto auto 1fr auto;
+  }
   .grid-rows-subgrid {
     grid-template-rows: subgrid;
   }
+  .flex-row {
+    flex-direction: row;
+  }
   .items-center {
     align-items: center;
   }
+  .items-end {
+    align-items: flex-end;
+  }
   .justify-center {
     justify-content: center;
   }
+  .justify-end {
+    justify-content: flex-end;
+  }
   .justify-start {
     justify-content: flex-start;
   }
@@ -503,6 +571,9 @@
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
+  .gap-3 {
+    gap: calc(var(--spacing) * 3);
+  }
   .gap-\[inherit\] {
     gap: inherit;
   }
@@ -550,16 +621,31 @@
   .rounded-md {
     border-radius: var(--radius-md);
   }
+  .rounded-sm {
+    border-radius: var(--radius-sm);
+  }
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
   .rounded-xs {
     border-radius: var(--radius-xs);
   }
+  .rounded-t-lg {
+    border-top-left-radius: var(--radius-lg);
+    border-top-right-radius: var(--radius-lg);
+  }
+  .rounded-b-none {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+  }
   .border-2 {
     border-style: var(--tw-border-style);
     border-width: 2px;
@@ -991,6 +1077,12 @@
   .bg-bg-warning {
     background-color: var(--color-bg-warning);
   }
+  .bg-black\/50 {
+    background-color: color-mix(in srgb, #000 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
+    }
+  }
   .bg-blue-50 {
     background-color: var(--color-blue-50);
   }
@@ -1024,6 +1116,9 @@
   .bg-blue-950 {
     background-color: var(--color-blue-950);
   }
+  .bg-border {
+    background-color: var(--color-border);
+  }
   .bg-code-50 {
     background-color: var(--color-code-50);
   }
@@ -1294,6 +1389,9 @@
   .px-5 {
     padding-inline: calc(var(--spacing) * 5);
   }
+  .px-6 {
+    padding-inline: calc(var(--spacing) * 6);
+  }
   .px-8 {
     padding-inline: calc(var(--spacing) * 8);
   }
@@ -1312,6 +1410,9 @@
   .py-3\.5 {
     padding-block: calc(var(--spacing) * 3.5);
   }
+  .py-4 {
+    padding-block: calc(var(--spacing) * 4);
+  }
   .py-6 {
     padding-block: calc(var(--spacing) * 6);
   }
@@ -1757,6 +1858,11 @@
     --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .inset-shadow-sm\/20 {
+    --tw-inset-shadow-alpha: 20%;
+    --tw-inset-shadow: inset 0 2px 4px var(--tw-inset-shadow-color, oklab(from rgb(0 0 0 / 0.05) l a b / 20%));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-amber-50 {
     --tw-shadow-color: #fffbeb;
     @supports (color: color-mix(in lab, red, red)) {
@@ -2399,6 +2505,12 @@
       --tw-shadow-color: color-mix(in oklab, var(--color-text-warning) var(--tw-shadow-alpha), transparent);
     }
   }
+  .inset-shadow-black {
+    --tw-inset-shadow-color: #000;
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-inset-shadow-color: color-mix(in oklab, var(--color-black) var(--tw-inset-shadow-alpha), transparent);
+    }
+  }
   .outline-hidden {
     --tw-outline-style: none;
     outline-style: none;
@@ -2421,6 +2533,11 @@
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
   }
+  .transition {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[color\,box-shadow\] {
     transition-property: color,box-shadow;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2475,6 +2592,11 @@
       grid-column-start: 2;
     }
   }
+  .\*\:row-start-1 {
+    :is(& > *) {
+      grid-row-start: 1;
+    }
+  }
   .\*\:max-h-none {
     :is(& > *) {
       max-height: none;
@@ -2495,12 +2617,66 @@
       text-decoration-line: none;
     }
   }
+  .group-\[\[role\=dialog\]\]\/tray\:border-0 {
+    &:is(:where(.group\/tray):is([role=dialog]) *) {
+      border-style: var(--tw-border-style);
+      border-width: 0px;
+    }
+  }
+  .group-\[\[role\=dialog\]\]\/tray\:shadow-none {
+    &:is(:where(.group\/tray):is([role=dialog]) *) {
+      --tw-shadow: 0 0 #0000;
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .group-\[\[role\=dialog\]\]\/tray\:drop-shadow-none {
+    &:is(:where(.group\/tray):is([role=dialog]) *) {
+      --tw-drop-shadow:  ;
+      filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+    }
+  }
+  .after\:absolute {
+    &::after {
+      content: var(--tw-content);
+      position: absolute;
+    }
+  }
+  .after\:inset-x-0 {
+    &::after {
+      content: var(--tw-content);
+      inset-inline: calc(var(--spacing) * 0);
+    }
+  }
+  .after\:top-full {
+    &::after {
+      content: var(--tw-content);
+      top: 100%;
+    }
+  }
+  .after\:h-screen {
+    &::after {
+      content: var(--tw-content);
+      height: 100vh;
+    }
+  }
+  .after\:bg-bg-surface-overlay {
+    &::after {
+      content: var(--tw-content);
+      background-color: var(--color-bg-surface-overlay);
+    }
+  }
   .after\:content-\[\"\:\"\] {
     &::after {
       --tw-content: ":";
       content: var(--tw-content);
     }
   }
+  .after\:content-\[\'\'\] {
+    &::after {
+      --tw-content: '';
+      content: var(--tw-content);
+    }
+  }
   .group-required\/field\:after\:content-\[\"\*\"\] {
     &:is(:where(.group\/field):where([data-rac])[data-required] *) {
       &::after {
@@ -2690,16 +2866,6 @@
       }
     }
   }
-  .focus-visible\:outline {
-    &:where([data-rac])[data-focus-visible] {
-      outline-style: var(--tw-outline-style);
-      outline-width: 1px;
-    }
-    &:where(:not([data-rac])):focus-visible {
-      outline-style: var(--tw-outline-style);
-      outline-width: 1px;
-    }
-  }
   .disabled\:cursor-not-allowed {
     &:where([data-rac])[data-disabled] {
       cursor: not-allowed;
@@ -2911,6 +3077,11 @@
       }
     }
   }
+  .\[\&\>\:first-child\]\:mr-6 {
+    &>:first-child {
+      margin-right: calc(var(--spacing) * 6);
+    }
+  }
 }
 @layer base {
   *,

package/dist/theme.css

@@ -172,6 +172,5 @@
 }
 
 @plugin 'tailwindcss-react-aria-components';
-@plugin '@tailwindcss/typography';
 @plugin 'tailwindcss-animate';
 @plugin 'tailwind-scrollbar';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/theme-docs",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "description": "Marigold Docs Theme",
   "license": "MIT",
   "keywords": [
@@ -41,12 +41,14 @@
     "directory": "themes/theme-docs"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "4.1.17",
+    "@tailwindcss/postcss": "4.1.18",
+    "cross-env": "^7.0.3",
     "cssnano": "7.1.2",
     "postcss-cli": "11.0.1",
     "postcss-prefix-selector": "2.1.1",
-    "tailwindcss": "4.1.17",
-    "tsdown": "0.15.9",
+    "shx": "^0.3.4",
+    "tailwindcss": "4.1.18",
+    "tsdown": "0.16.8",
     "@marigold/tsconfig": "0.4.2"
   },
   "dependencies": {
@@ -54,10 +56,10 @@
     "tailwind-scrollbar": "4.0.2",
     "tailwindcss-animate": "1.0.7",
     "tailwindcss-react-aria-components": "2.0.1",
-    "@marigold/components": "16.0.1",
-    "@marigold/system": "16.0.1"
+    "@marigold/system": "17.0.0",
+    "@marigold/components": "17.0.0"
   },
   "scripts": {
-    "build": "NODE_ENV=production tsdown && postcss -o dist/styles.css src/styles.css && cp src/theme.css dist/theme.css"
+    "build": "cross-env NODE_ENV=production tsdown && postcss -o dist/styles.css src/styles.css && shx cp src/theme.css dist/theme.css"
   }
 }

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../src/theme.ts"],"sourcesContent":[],"mappings":";;;cAIa,OAAO"}

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["Button: ThemeComponent<'Button'>","Card: ThemeComponent<'Card'>","CloseButton: ThemeComponent<'CloseButton'>","Dialog: ThemeComponent<'Dialog'>","Headline: ThemeComponent<'Headline'>","Field: ThemeComponent<'Field'>","HelpText: ThemeComponent<'HelpText'>","IconButton: ThemeComponent<'IconButton'>","Label: ThemeComponent<'Label'>","Link: ThemeComponent<'Link'>","List: ThemeComponent<'List'>","ListBox: ThemeComponent<'ListBox'>","Menu: ThemeComponent<'Menu'>","Modal: ThemeComponent<'Modal'>","SectionMessage: ThemeComponent<'SectionMessage'>","Popover: ThemeComponent<'Popover'>","Select: ThemeComponent<'Select'>","Tabs: ThemeComponent<'Tabs'>","Table: ThemeComponent<'Table'>","Text: ThemeComponent<'Text'>","Underlay: ThemeComponent<'Underlay'>","Badge: ThemeComponent<'Badge'>","root: Theme['root']","theme: Theme"],"sources":["../src/components/Button.styles.ts","../src/components/Card.styles.ts","../src/components/CloseButton.styles.ts","../src/components/Dialog.styles.ts","../src/components/Headline.styles.ts","../src/components/Field.styles.ts","../src/components/HelpText.styles.ts","../src/components/IconButton.styles.ts","../src/components/Input.styles.ts","../src/components/Label.styles.ts","../src/components/Link.styles.ts","../src/components/List.styles.ts","../src/components/ListBox.styles.ts","../src/components/Menu.styles.ts","../src/components/Modal.styles.ts","../src/components/SectionMessage.styles.ts","../src/components/Popover.styles.ts","../src/components/Select.styles.ts","../src/components/Tabs.styles.ts","../src/components/Table.styles.ts","../src/components/Text.styles.ts","../src/components/Underlay.styles.ts","../src/components/Badge.styles.ts","../src/components/index.ts","../src/root.ts","../src/theme.ts","../src/index.ts"],"sourcesContent":["import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Button: ThemeComponent<'Button'> = cva(\n  'flex gap-2 rounded-xs px-3 py-2',\n  {\n    variants: {\n      variant: {\n        ghost: 'text-secondary-700 hover:text-secondary-900 p-0',\n        sunken:\n          'text-secondary-600 hover:bg-secondary-400/20 bg-secondary-400/10 h-8 justify-start rounded-lg',\n        inverted: 'bg-secondary-100',\n        icon: 'border-none translate-y-0.5 outline-none p-0',\n      },\n      size: {\n        small: 'px-3 py-1.5 text-sm',\n      },\n    },\n  }\n);\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Card: ThemeComponent<'Card'> = cva(\n  ['relative w-full overflow-hidden rounded-xl'],\n  {\n    variants: {\n      variant: {\n        default:\n          'bg-bg-surface-raised p-6 shadow-xs border border-secondary-300',\n        hovering:\n          'bg-bg-surface-raised p-6 shadow-xs transition-shadow hover:cursor-pointer hover:shadow-md border border-secondary-300',\n        content:\n          'bg-bg-surface-raised my-6 shadow-xs border border-secondary-300',\n        outline: 'bg-white/40 my-6 border border-secondary-200',\n        lowered: 'bg-bg-surface-raised-lowered p-6',\n        image: '',\n      },\n      size: {\n        default: '',\n        full: 'size-full',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  }\n);\n","import type { ThemeComponent } from '@marigold/system';\nimport { cva } from '@marigold/system';\n\nexport const CloseButton: ThemeComponent<'CloseButton'> = cva([\n  'flex items-center justify-center whitespace-nowrap',\n  'cursor-pointer',\n  'transition-[color,box-shadow]',\n  'rounded',\n  '[&_svg]:size-4 [&_svg]:opacity-60 [&_svg]:transition-opacity hover:[&_svg]:opacity-100',\n]);\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Dialog: ThemeComponent<'Dialog'> = {\n  closeButton: cva('absolute top-4 right-4 ml-4', {\n    variants: {\n      variant: {\n        fullscreen: ['size-6', 'right-4 top-4'],\n      },\n    },\n  }),\n  container: cva('bg-bg-surface', {\n    variants: {\n      variant: {\n        default: 'relative rounded-lg shadow-lg',\n        codeblock: [\n          'static px-0 py-6',\n          'bg-code-900 max-h-[96vh] w-full overflow-y-auto rounded-lg shadow-lg',\n          'scrollbar-thin scrollbar-thumb-code-500 scrollbar-track-transparent scrollbar-thumb-rounded-full overflow-x-auto',\n          '*:max-h-none *:min-w-[75vw]',\n        ],\n        fullscreen: 'h-screen w-screen px-4 pb-8 pt-10',\n        zoom: 'max-h-[96vh] overflow-y-auto',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  }),\n  header: cva(''),\n  title: cva(''),\n  content: cva(''),\n  actions: cva(''),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Headline: ThemeComponent<'Headline'> = cva('*:no-underline', {\n  variants: {\n    size: {\n      'level-1':\n        'scroll-m-20 text-5xl font-extrabold tracking-tight lg:text-6xl',\n      'level-2':\n        'scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0',\n      'level-3': 'scroll-m-20 text-2xl font-semibold tracking-tight',\n      'level-4': 'scroll-m-20 text-xl font-semibold tracking-tight',\n      'level-5': 'mt-8 scroll-m-20 text-lg font-semibold tracking-tight',\n      'level-6': 'mt-8 scroll-m-20 text-base font-semibold tracking-tight',\n    },\n  },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Field: ThemeComponent<'Field'> = cva('grid gap-y-0.5', {\n  variants: {\n    variant: {\n      default: '',\n      floating: [\n        'grid-cols-[min-content_auto] grid-rows-[auto_auto]',\n        'items-center',\n      ],\n    },\n    size: {\n      default: 'gap-x-3',\n      small: 'gap-x-2',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'default',\n  },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const HelpText: ThemeComponent<'HelpText'> = {\n  container: cva(),\n  icon: cva(),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const IconButton: ThemeComponent<'IconButton'> = cva();\n","// Box\n// ---------------\nexport const inputBox = 'border border-border rounded-xs text-text-primary';\nexport const inputBackground = 'bg-white';\n\n// Spacing\n// ---------------\nexport const xSpacing = {\n  default: 'px-3',\n  small: 'px-2.5',\n};\n\nexport const ySpacing = {\n  default: 'py-2',\n  small: 'py-1.5',\n};\n\nexport const inputSpacing = {\n  default: `${xSpacing.default} ${ySpacing.default}`,\n  small: `${xSpacing.small} ${ySpacing.small}`,\n};\n\n// States\n// ---------------\nexport const inputFocus = '';\nexport const inputDisabled =\n  'disabled:cursor-not-allowed disabled:text-text-disabled disabled:bg-bg-disabled';\nexport const inputError = '';\nexport const inputHover = '';\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Label: ThemeComponent<'Label'> = cva('', {\n  variants: {\n    variant: {\n      default: '',\n      floating: [\n        'z-10 col-start-1 row-start-1',\n        'pointer-events-none',\n        'text-secondary-400 text-nowrap',\n        'after:content-[\":\"]',\n      ],\n    },\n    size: {\n      default: 'text-sm',\n      small: 'text-xs',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'default',\n  },\n  compoundVariants: [\n    {\n      variant: 'floating',\n      size: 'default',\n      className: 'pl-4',\n    },\n    {\n      variant: 'floating',\n      size: 'small',\n      className: 'pl-3',\n    },\n  ],\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Link: ThemeComponent<'Link'> = cva(['font-medium'], {\n  variants: {\n    variant: {\n      default:\n        'underline underline-offset-4 transition-all hover:text-slate-700',\n      primary:\n        'bg-text-primary text-white leading-none hover:bg-slate-700 transition-all',\n      secondary: 'border-text-primary border-2 leading-none hover:bg-slate-100',\n      toc: [\n        'text-secondary-500 hover:text-secondary-800 text-xs',\n        'data-[active=true]:text-secondary-800 font-normal data-[active=true]:font-medium',\n      ],\n      cta: [\n        'h-component rounded-2xl bg-purple-700 px-5 py-1.5',\n        'text-sm font-semibold text-purple-100',\n        'transition-all hover:bg-purple-600',\n      ],\n      ghost: 'hover:underline underline-offset-4',\n      shiny:\n        'border border-slate-200 bg-slate-100 hover:bg-slate-200 transition-all ease-in',\n    },\n    size: {\n      inline: '',\n      xsmall: 'rounded-full text-xs py-1.5 px-4',\n      small: 'px-3 py-1.5 text-sm rounded-xs',\n      regular: 'px-3 py-2 rounded-xs',\n      large: 'px-8 py-3.5 rounded-xs',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'inline',\n  },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const List: ThemeComponent<'List'> = {\n  ul: cva('list-inside list-none'),\n  ol: cva(''),\n  item: cva('list-none py-0.5'),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const ListBox: ThemeComponent<'ListBox'> = {\n  container: cva([\n    'bg-bg-surface-overlay border-border rounded-xs border drop-shadow-lg',\n  ]),\n  list: cva([\n    'outline-hidden',\n    'p-1',\n    'sm:max-h-[45vh] md:max-h-[75vh] lg:max-h-[75vh]',\n  ]),\n  item: cva(\n    [\n      'text-text-primary',\n      'cursor-pointer rounded-xs outline-hidden',\n      'hover:bg-bg-hover focus:bg-bg-hover',\n      'aria-selected:bg-bg-hover',\n    ],\n    {\n      variants: {\n        size: {\n          default: 'p-2',\n          small: 'px-2 py-1 text-sm',\n        },\n      },\n      defaultVariants: {\n        size: 'small',\n      },\n    }\n  ),\n  section: cva(),\n  header: cva(),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Menu: ThemeComponent<'Menu'> = {\n  container: cva(\n    [\n      'border-border bg-bg-surface overflow-hidden rounded-md border px-1 py-1.5 text-sm shadow-md',\n      'sm:max-h-[45vh] md:max-h-[75vh] lg:max-h-[75vh]',\n    ],\n    {\n      variants: {\n        variant: {\n          command:\n            '[&_[cmdk-list-sizer]]:divide-secondary-100 size-full p-0 sm:w-[500px] [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:py-2 [&_[cmdk-item]_svg]:size-5 [&_[cmdk-list-sizer]]:divide-y',\n        },\n      },\n    }\n  ),\n  item: cva('focus:bg-bg-hover cursor-pointer rounded-xs p-2 outline-hidden', {\n    variants: {\n      variant: {\n        command: ['aria-selected:bg-bg-hover px-4 py-1.5'],\n      },\n    },\n  }),\n  section: cva('', {\n    variants: {\n      variant: {\n        command:\n          '[&_[cmdk-group-heading]]:text-text-primary-muted [&_[cmdk-group-heading]]:p-4 [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',\n      },\n    },\n  }),\n  button: cva(\n    'text-secondary-700 hover:bg-secondary-400/20 h-8 rounded-lg px-1'\n  ),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Modal: ThemeComponent<'Modal'> = cva();\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const SectionMessage: ThemeComponent<'SectionMessage'> = {\n  container: cva(\n    [\n      'not-prose items-center rounded-lg p-4',\n      \"grid-cols-[min-content_auto] gap-1 [grid-template-areas:'icon_title_title''none_content_content']\",\n    ],\n    {\n      variants: {\n        variant: {\n          info: 'bg-bg-info text-text-info',\n          warning: 'bg-bg-warning text-text-warning',\n        },\n      },\n    }\n  ),\n  icon: cva('size-6'),\n  title: cva('mb-1 font-bold leading-none tracking-tight'),\n  content: cva('text-sm [&_p]:leading-relaxed [&_code]:text-xs'),\n  close: cva('h-5 w-5 text-center'),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Popover: ThemeComponent<'Popover'> = cva([\n  'animate-in',\n  'placement-top:-translate-y-1',\n  'placement-bottom:translate-y-1',\n  'placement-right:-translate-x-1',\n  'placement-left:translate-x-1',\n]);\n","import { ThemeComponent, cva } from '@marigold/system';\nimport {\n  inputBackground,\n  inputBox,\n  inputDisabled,\n  inputSpacing,\n} from './Input.styles';\n\nexport const Select: ThemeComponent<'Select'> = {\n  icon: cva('text-secondary-400', {\n    variants: {\n      variant: {\n        default: '',\n        floating: 'justify-self-end',\n      },\n      size: {\n        default: '',\n        small: 'size-3',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  }),\n  select: cva([inputBox, inputBackground, inputDisabled, 'outline-hidden'], {\n    variants: {\n      variant: {\n        default: 'gap-2',\n        floating: [\n          'shadow-xs',\n          'col-span-full row-start-1 grid grid-cols-subgrid grid-rows-subgrid',\n          // selected value and caret get moved to 2nd col\n          '*:row-star-1 *:col-start-2 *:text-left',\n          // So the button gap is not used to separate label from selected value\n          'gap-[inherit]',\n        ],\n      },\n      size: {\n        default: [inputSpacing.default],\n        small: [inputSpacing.small, 'text-xs'],\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n    compoundVariants: [\n      {\n        variant: 'floating',\n        size: 'default',\n        className: 'px-4 py-1.5',\n      },\n      {\n        variant: 'floating',\n        size: 'small',\n        className: 'px-3',\n      },\n    ],\n  }),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Tabs: ThemeComponent<'Tabs'> = {\n  container: cva('', {\n    variants: {\n      variant: {\n        demo: 'my-6',\n      },\n    },\n  }),\n  tabpanel: cva(''),\n  tabsList: cva('mb-4 border-b'),\n  tab: cva([\n    'text-text-primary-muted aria-selected:text-text-primary px-2 py-1 text-sm font-medium',\n    'aria-selected:border-border-primary -m-px border-b-2 border-transparent',\n    'focus:outline-hidden focus-visible:outline',\n  ]),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Table: ThemeComponent<'Table'> = {\n  table: cva([\n    'w-full overflow-hidden rounded-lg bg-white/40 text-sm',\n    'border-secondary-200 border-separate border-spacing-0 border',\n  ]),\n  thead: cva(),\n  headerRow: cva(),\n  header: cva('px-3 pb-2 pt-3 text-start'),\n  body: cva(),\n  row: cva([], {\n    variants: {\n      variant: {\n        hover: 'hover:bg-neutral-100/80 ',\n      },\n    },\n  }),\n  cell: cva(\n    ['text-text-primary px-3 py-3.5 text-xs', 'border-secondary-200 border-t'],\n    {\n      variants: {\n        variant: {\n          colorTable: 'p-4 align-middle',\n        },\n      },\n    }\n  ),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Text: ThemeComponent<'Text'> = cva('leading-7', {\n  variants: {\n    variant: {\n      lead: 'text-muted-foreground text-xl',\n      large: 'text-lg font-semibold',\n      small: 'text-sm font-medium leading-none',\n      muted: 'text-muted-foreground text-sm',\n    },\n  },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Underlay: ThemeComponent<'Underlay'> = cva(\n  'bg-bg-underlay/50 backdrop-blur-xs'\n);\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Badge: ThemeComponent<'Badge'> = cva(\n  'inline-flex items-center truncate rounded-[20px] px-2 py-0.5',\n  {\n    variants: {\n      variant: {\n        dark: 'bg-bg-inverted text-white',\n        warning: 'bg-bg-warning',\n      },\n      size: {\n        default: 'text-xs',\n      },\n    },\n    defaultVariants: {\n      variant: 'dark',\n      size: 'default',\n    },\n  }\n);\n","export * from './Button.styles';\nexport * from './Card.styles';\nexport * from './CloseButton.styles';\nexport * from './Dialog.styles';\nexport * from './Headline.styles';\nexport * from './Field.styles';\nexport * from './HelpText.styles';\nexport * from './IconButton.styles';\nexport * from './Input.styles';\nexport * from './Label.styles';\nexport * from './Link.styles';\nexport * from './List.styles';\nexport * from './ListBox.styles';\nexport * from './Menu.styles';\nexport * from './Modal.styles';\nexport * from './SectionMessage.styles';\nexport * from './Popover.styles';\nexport * from './Select.styles';\nexport * from './Tabs.styles';\nexport * from './Table.styles';\nexport * from './Text.styles';\nexport * from './Underlay.styles';\nexport * from './Badge.styles';\n","import { Theme, cva } from '@marigold/system';\n\nexport const root: Theme['root'] = cva('text-text-primary bg-bg-body');\n","import type { Theme } from '@marigold/system';\nimport * as components from './components';\nimport { root } from './root';\n\nexport const theme: Theme = {\n  name: 'docs',\n  root,\n  components,\n};\n","import { theme } from './theme';\n\nexport { theme };\nexport default theme;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,MAAaA,oCACX,mCACA,EACE,UAAU;CACR,SAAS;EACP,OAAO;EACP,QACE;EACF,UAAU;EACV,MAAM;EACP;CACD,MAAM,EACJ,OAAO,uBACR;CACF,EACF,CACF;;;;AChBD,MAAaC,kCACX,CAAC,6CAA6C,EAC9C;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,UACE;GACF,SACE;GACF,SAAS;GACT,SAAS;GACT,OAAO;GACR;EACD,MAAM;GACJ,SAAS;GACT,MAAM;GACP;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CACF;;;;ACxBD,MAAaC,yCAAiD;CAC5D;CACA;CACA;CACA;CACA;CACD,CAAC;;;;ACPF,MAAaC,SAAmC;CAC9C,wCAAiB,+BAA+B,EAC9C,UAAU,EACR,SAAS,EACP,YAAY,CAAC,UAAU,gBAAgB,EACxC,EACF,EACF,CAAC;CACF,sCAAe,iBAAiB;EAC9B,UAAU,EACR,SAAS;GACP,SAAS;GACT,WAAW;IACT;IACA;IACA;IACA;IACD;GACD,YAAY;GACZ,MAAM;GACP,EACF;EACD,iBAAiB,EACf,SAAS,WACV;EACF,CAAC;CACF,mCAAY,GAAG;CACf,kCAAW,GAAG;CACd,oCAAa,GAAG;CAChB,oCAAa,GAAG;CACjB;;;;AC9BD,MAAaC,sCAA2C,kBAAkB,EACxE,UAAU,EACR,MAAM;CACJ,WACE;CACF,WACE;CACF,WAAW;CACX,WAAW;CACX,WAAW;CACX,WAAW;CACZ,EACF,EACF,CAAC;;;;ACbF,MAAaC,mCAAqC,kBAAkB;CAClE,UAAU;EACR,SAAS;GACP,SAAS;GACT,UAAU,CACR,sDACA,eACD;GACF;EACD,MAAM;GACJ,SAAS;GACT,OAAO;GACR;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CAAC;;;;AClBF,MAAaC,WAAuC;CAClD,uCAAgB;CAChB,kCAAW;CACZ;;;;ACHD,MAAaC,yCAAgD;;;;ACA7D,MAAa,WAAW;AACxB,MAAa,kBAAkB;AAI/B,MAAa,WAAW;CACtB,SAAS;CACT,OAAO;CACR;AAED,MAAa,WAAW;CACtB,SAAS;CACT,OAAO;CACR;AAED,MAAa,eAAe;CAC1B,SAAS,GAAG,SAAS,QAAQ,GAAG,SAAS;CACzC,OAAO,GAAG,SAAS,MAAM,GAAG,SAAS;CACtC;AAID,MAAa,aAAa;AAC1B,MAAa,gBACX;AACF,MAAa,aAAa;AAC1B,MAAa,aAAa;;;;AC1B1B,MAAaC,mCAAqC,IAAI;CACpD,UAAU;EACR,SAAS;GACP,SAAS;GACT,UAAU;IACR;IACA;IACA;IACA;IACD;GACF;EACD,MAAM;GACJ,SAAS;GACT,OAAO;GACR;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACD,kBAAkB,CAChB;EACE,SAAS;EACT,MAAM;EACN,WAAW;EACZ,EACD;EACE,SAAS;EACT,MAAM;EACN,WAAW;EACZ,CACF;CACF,CAAC;;;;AChCF,MAAaC,kCAAmC,CAAC,cAAc,EAAE;CAC/D,UAAU;EACR,SAAS;GACP,SACE;GACF,SACE;GACF,WAAW;GACX,KAAK,CACH,uDACA,mFACD;GACD,KAAK;IACH;IACA;IACA;IACD;GACD,OAAO;GACP,OACE;GACH;EACD,MAAM;GACJ,QAAQ;GACR,QAAQ;GACR,OAAO;GACP,SAAS;GACT,OAAO;GACR;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CAAC;;;;ACjCF,MAAaC,OAA+B;CAC1C,+BAAQ,wBAAwB;CAChC,+BAAQ,GAAG;CACX,iCAAU,mBAAmB;CAC9B;;;;ACJD,MAAaC,UAAqC;CAChD,sCAAe,CACb,uEACD,CAAC;CACF,iCAAU;EACR;EACA;EACA;EACD,CAAC;CACF,iCACE;EACE;EACA;EACA;EACA;EACD,EACD;EACE,UAAU,EACR,MAAM;GACJ,SAAS;GACT,OAAO;GACR,EACF;EACD,iBAAiB,EACf,MAAM,SACP;EACF,CACF;CACD,qCAAc;CACd,oCAAa;CACd;;;;AC9BD,MAAaC,OAA+B;CAC1C,sCACE,CACE,+FACA,kDACD,EACD,EACE,UAAU,EACR,SAAS,EACP,SACE,kNACH,EACF,EACF,CACF;CACD,iCAAU,kEAAkE,EAC1E,UAAU,EACR,SAAS,EACP,SAAS,CAAC,wCAAwC,EACnD,EACF,EACF,CAAC;CACF,oCAAa,IAAI,EACf,UAAU,EACR,SAAS,EACP,SACE,qLACH,EACF,EACF,CAAC;CACF,mCACE,mEACD;CACF;;;;ACjCD,MAAaC,oCAAsC;;;;ACAnD,MAAaC,iBAAmD;CAC9D,sCACE,CACE,yCACA,oGACD,EACD,EACE,UAAU,EACR,SAAS;EACP,MAAM;EACN,SAAS;EACV,EACF,EACF,CACF;CACD,iCAAU,SAAS;CACnB,kCAAW,6CAA6C;CACxD,oCAAa,iDAAiD;CAC9D,kCAAW,sBAAsB;CAClC;;;;ACnBD,MAAaC,qCAAyC;CACpD;CACA;CACA;CACA;CACA;CACD,CAAC;;;;ACAF,MAAaC,SAAmC;CAC9C,iCAAU,sBAAsB;EAC9B,UAAU;GACR,SAAS;IACP,SAAS;IACT,UAAU;IACX;GACD,MAAM;IACJ,SAAS;IACT,OAAO;IACR;GACF;EACD,iBAAiB;GACf,SAAS;GACT,MAAM;GACP;EACF,CAAC;CACF,mCAAY;EAAC;EAAU;EAAiB;EAAe;EAAiB,EAAE;EACxE,UAAU;GACR,SAAS;IACP,SAAS;IACT,UAAU;KACR;KACA;KAEA;KAEA;KACD;IACF;GACD,MAAM;IACJ,SAAS,CAAC,aAAa,QAAQ;IAC/B,OAAO,CAAC,aAAa,OAAO,UAAU;IACvC;GACF;EACD,iBAAiB;GACf,SAAS;GACT,MAAM;GACP;EACD,kBAAkB,CAChB;GACE,SAAS;GACT,MAAM;GACN,WAAW;GACZ,EACD;GACE,SAAS;GACT,MAAM;GACN,WAAW;GACZ,CACF;EACF,CAAC;CACH;;;;AC1DD,MAAaC,OAA+B;CAC1C,sCAAe,IAAI,EACjB,UAAU,EACR,SAAS,EACP,MAAM,QACP,EACF,EACF,CAAC;CACF,qCAAc,GAAG;CACjB,qCAAc,gBAAgB;CAC9B,gCAAS;EACP;EACA;EACA;EACD,CAAC;CACH;;;;ACfD,MAAaC,QAAiC;CAC5C,kCAAW,CACT,yDACA,+DACD,CAAC;CACF,mCAAY;CACZ,uCAAgB;CAChB,mCAAY,4BAA4B;CACxC,kCAAW;CACX,gCAAS,EAAE,EAAE,EACX,UAAU,EACR,SAAS,EACP,OAAO,4BACR,EACF,EACF,CAAC;CACF,iCACE,CAAC,yCAAyC,gCAAgC,EAC1E,EACE,UAAU,EACR,SAAS,EACP,YAAY,oBACb,EACF,EACF,CACF;CACF;;;;AC1BD,MAAaC,kCAAmC,aAAa,EAC3D,UAAU,EACR,SAAS;CACP,MAAM;CACN,OAAO;CACP,OAAO;CACP,OAAO;CACR,EACF,EACF,CAAC;;;;ACTF,MAAaC,sCACX,qCACD;;;;ACFD,MAAaC,mCACX,gEACA;CACE,UAAU;EACR,SAAS;GACP,MAAM;GACN,SAAS;GACV;EACD,MAAM,EACJ,SAAS,WACV;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AEjBD,MAAaC,kCAA0B,+BAA+B;;;;ACEtE,MAAaC,QAAe;CAC1B,MAAM;CACN;CACA;CACD;;;;ACLD,kBAAe"}