@marigold/theme-rui 0.3.1 → 0.4.0

package/dist/index.js

@@ -40,6 +40,7 @@ __export(components_exports, {
   DatePicker: () => DatePicker,
   Dialog: () => Dialog,
   Divider: () => Divider,
+  Drawer: () => Drawer,
   Field: () => Field,
   Footer: () => Footer,
   Header: () => Header,
@@ -103,7 +104,7 @@ var Accordion = {
   }),
   header: (0, import_system.cva)(
     [
-      "flex flex-1 w-full items-center justify-between gap-4 rounded-md py-2",
+      "flex flex-1 w-full items-center justify-between gap-4 rounded-md py-2 cursor-pointer",
       "text-left text-sm font-semibold leading-6 transition-all",
       "hover:no-underline",
       "disabled:cursor-not-allowed disabled:text-disabled-foreground"
@@ -120,9 +121,7 @@ var Accordion = {
       }
     }
   ),
-  content: (0, import_system.cva)(
-    "overflow-hidden text-sm text-muted-foreground in-data-[expanded]:pb-2"
-  ),
+  content: (0, import_system.cva)("overflow-hidden in-data-[expanded]:pb-2"),
   icon: (0, import_system.cva)(
     "pointer-events-none shrink-0 opacity-60 transition-transform duration-200"
   )
@@ -130,7 +129,7 @@ var Accordion = {
 
 // src/components/Badge.styles.ts
 var import_system2 = require("@marigold/system");
-var circle = "before:size-1.5 before:rounded-full";
+var circle = "before:size-1.5 before:rounded-full pr-2";
 var Badge = (0, import_system2.cva)(
   [
     "inline-flex items-center justify-center rounded-full border px-1.5 text-xs font-medium leading-normal transition-colors",
@@ -182,8 +181,8 @@ var Button = (0, import_system4.cva)(
   {
     variants: {
       variant: {
-        default: "border border-input bg-background shadow-sm shadow-black/5 hover:bg-hover hover:text-foreground",
         primary: "bg-brand text-brand-foreground shadow-sm shadow-black/5 hover:bg-brand/90",
+        secondary: "border border-input bg-background shadow-sm shadow-black/5 hover:bg-hover hover:text-foreground expanded:bg-hover",
         destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         ghost: "hover:bg-hover hover:text-foreground",
         // only used for calendar in MonthListBox and YearListBox to have a hover over other options
@@ -198,7 +197,7 @@ var Button = (0, import_system4.cva)(
       }
     },
     defaultVariants: {
-      variant: "default",
+      variant: "secondary",
       size: "default"
     }
   }
@@ -207,7 +206,7 @@ var Button = (0, import_system4.cva)(
 // src/components/Card.styles.ts
 var import_system5 = require("@marigold/system");
 var Card = (0, import_system5.cva)([
-  "border border-input rounded-lg",
+  "border border-input rounded-md",
   "bg-surface-overlay",
   "p-4",
   "shadow-sm shadow-black/5"
@@ -219,12 +218,12 @@ var Checkbox = {
   checkbox: (0, import_system6.cva)([
     "grid size-4 shrink-0 place-content-center rounded",
     "border border-input shadow-sm shadow-black/5",
-    "group-disabled/checkbox:border-disabled",
     "mixin-ring-focus-visible-checkbox",
+    "group-disabled/checkbox:bg-disabled! group-disabled/checkbox:border-disabled! group-disabled/checkbox:text-disabled-foreground group-disabled/checkbox:cursor-not-allowed",
     "group-selected/checkbox:border-brand group-selected/checkbox:bg-brand group-selected/checkbox:text-brand-foreground",
     "group-[indeterminate]/checkbox:border-brand group-[indeterminate]/checkbox:bg-brand group-[indeterminate]/checkbox:text-brand-foreground"
   ]),
-  container: (0, import_system6.cva)(),
+  container: (0, import_system6.cva)("cursor-pointer read-only:cursor-default"),
   label: (0, import_system6.cva)(
     'text-sm leading-4 group-[group="checkbox"]/checkboxgroup:font-normal font-medium text-foreground group-disabled/checkbox:text-disabled-foreground'
   ),
@@ -235,7 +234,7 @@ var Checkbox = {
 var import_system7 = require("@marigold/system");
 var Calendar = {
   calendar: (0, import_system7.cva)(
-    "rounded-lg border group-[[data-trigger]]/popover:border-0 border-border p-2"
+    "rounded-md border group-[[data-trigger]]/popover:border-0 border-border p-2"
   ),
   calendarCell: (0, import_system7.cva)([
     "relative flex size-9 items-center justify-center whitespace-nowrap rounded-lg",
@@ -268,7 +267,7 @@ var import_system10 = require("@marigold/system");
 
 // src/components/Input.styles.ts
 var import_system9 = require("@marigold/system");
-var inputContainer = "flex w-full px-3 py-2 rounded-lg shadow-sm shadow-black/5 border border-input bg-background text-sm text-foreground transition-shadow";
+var inputContainer = "flex w-full px-3 py-2 rounded-lg shadow-sm shadow-black/5 border border-input bg-background text-sm text-foreground transition-shadow group-read-only/field:bg-muted";
 var inputDisabled = "disabled:cursor-not-allowed disabled:text-disabled-foreground disabled:bg-disabled";
 var inputInvalid = "group-invalid/field:border-destructive group-invalid/field:focus:border-destructive group-invalid/field:focus:ring-destructive/20";
 var inputReadOnly = "group-read-only/field:bg-muted";
@@ -281,7 +280,8 @@ var Input = {
     inputReadOnly,
     "h-input",
     "placeholder:text-placeholder",
-    "[&[type=file]]:border-solid [&[type=file]]:bg-background [&[type=file]]:p-0 [&[type=file]]:pr-3 [&[type=file]]:italic [&[type=file]]:text-muted-foreground/70 file:me-3 file:h-full file:border-0 file:border-r file:border-solid file:border-input file:bg-transparent file:px-3 file:text-sm file:font-medium file:not-italic file:text-foreground",
+    "[&[type=file]]:cursor-pointer [&[type=file]]:border-solid [&[type=file]]:bg-background [&[type=file]]:p-0 [&[type=file]]:pr-3 [&[type=file]]:italic [&[type=file]]:text-muted-foreground/70",
+    "file:cursor-pointer file:me-3 file:h-full file:border-0 file:border-r file:border-solid file:border-input file:bg-transparent file:px-3 file:text-sm file:font-medium file:not-italic file:text-foreground",
     "group-[[data-icon]]/input:pl-8",
     "group-[[data-action]]/input:pr-7"
   ]),
@@ -298,7 +298,7 @@ var DateField = {
     "h-input",
     inputContainer,
     inputDisabled,
-    "mixin-ring-focus-within",
+    "mixin-ring-has-focus-visible",
     inputInvalid,
     inputReadOnly,
     "invalid:focus-within:border-destructive invalid:focus-within:ring-destructive/20"
@@ -327,19 +327,23 @@ var DatePicker = (0, import_system11.cva)([
 // src/components/Dialog.styles.ts
 var import_system12 = require("@marigold/system");
 var Dialog = {
-  closeButton: (0, import_system12.cva)(""),
+  closeButton: (0, import_system12.cva)([
+    "absolute top-3 right-3",
+    "flex size-7 items-center justify-center rounded transition-[color,box-shadow]",
+    "mixin-ring-focus-visible",
+    "[&_svg]:size-4 [&_svg]:opacity-60 [&_svg]:transition-opacity hover:[&_svg]:opacity-100"
+  ]),
   container: (0, import_system12.cva)(
     [
-      "bg-background fixed top-1/2 left-1/2 z-50 grid max-h-[calc(100%-2rem)] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto rounded-xl",
-      " border p-6 shadow-lg duration-200 sm:max-w-100 border-border"
+      "flex flex-col gap-0 p-0",
+      "bg-surface-overlay rounded-xl border p-6 shadow-lg overflow-y-auto",
+      "w-full max-w-[calc(100%-2rem)]",
+      "sm:max-h-[min(640px,80vh)] max-h-[calc(100%-2rem)]"
     ],
     {
       variants: {
         size: {
-          default: "",
-          small: "w-[min(100%,640px)]",
-          medium: "w-[min(100%,768px)]",
-          large: "w-[min(100%,1024px)]"
+          default: "sm:max-w-100"
         }
       },
       defaultVariants: {
@@ -366,9 +370,70 @@ var Divider = (0, import_system13.cva)(
   }
 );
 
-// src/components/IconButton.styles.ts
+// src/components/Drawer.styles.ts
 var import_system14 = require("@marigold/system");
-var IconButton = (0, import_system14.cva)("", {
+var Drawer = {
+  overlay: (0, import_system14.cva)([
+    "group/overlay",
+    "entering:animate-slide-in-right exiting:animate-slide-out-right"
+  ]),
+  container: (0, import_system14.cva)(
+    [
+      "relative grid-rows-[auto_1fr_auto]",
+      "bg-surface-overlay border-input border-l shadow-lg",
+      /**
+       * The fade animation only start when entering is finished,
+       * to prevent flickering we hide the elements during the
+       * slide in animation.
+       */
+      // '*:group-entering/overlay:opacity-0',
+      // '*:animate-fade-in *:[animation-duration:0.2s]',
+      // '*:[animation-delay:var(--slide-in-duration)]',
+      /**
+       * The drawer's child elements will have a secondary fade-in-up animation,
+       * which starts only after the drawer has fully slid in.
+       *
+       * To achieve this, we initially hide the children and allow them to remain
+       * in their final animation state (using `animation-fill-mode`).
+       * A slight delay is applied to each child to create a staggered fade-in-up effect.
+       */
+      "*:opacity-0 *:[animation-fill-mode:forwards]",
+      "*:animate-fade-in-up *:[animation-delay:calc(var(--slide-in-duration)+(var(--i)*150ms))]",
+      /**
+       * Fade out content of the slider, looks smoother and less clutter.
+       * Keep the "not-group-exiting" of the fade in animation, because
+       * elements can only have one animation.
+       */
+      "*:group-exiting/overlay:animate-fade-out! *:group-exiting/overlay:[animation-delay:0s]!"
+    ],
+    {
+      variants: {
+        size: {
+          default: "w-80"
+        }
+      },
+      defaultVariants: {
+        size: "default"
+      }
+    }
+  ),
+  closeButton: (0, import_system14.cva)([
+    "absolute top-3.5 right-3 z-50",
+    "flex size-7 items-center justify-center rounded transition-[color,box-shadow]",
+    "mixin-ring-focus-visible",
+    "[&_svg]:size-4 [&_svg]:opacity-60 [&_svg]:transition-opacity hover:[&_svg]:opacity-100"
+  ]),
+  header: (0, import_system14.cva)("border-border border-b px-6 py-4"),
+  title: (0, import_system14.cva)("font-semibold text-base"),
+  content: (0, import_system14.cva)("px-6 py-4 overflow-y-auto outline-none"),
+  actions: (0, import_system14.cva)(
+    "flex flex-row gap-3 justify-end border-border border-t px-6 py-4"
+  )
+};
+
+// src/components/IconButton.styles.ts
+var import_system15 = require("@marigold/system");
+var IconButton = (0, import_system15.cva)("", {
   variants: {
     variant: {
       navigation: "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors outline-offset-2 focus-visible:outline-2 outline-ring/30 disabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-hover hover:text-hover-foreground h-9 py-2 gap-1 px-2.5"
@@ -377,20 +442,20 @@ var IconButton = (0, import_system14.cva)("", {
 });
 
 // src/components/Field.styles.ts
-var import_system15 = require("@marigold/system");
-var Field = (0, import_system15.cva)("space-y-2");
+var import_system16 = require("@marigold/system");
+var Field = (0, import_system16.cva)("space-y-2");
 
 // src/components/Footer.styles.ts
-var import_system16 = require("@marigold/system");
-var Footer = (0, import_system16.cva)("");
+var import_system17 = require("@marigold/system");
+var Footer = (0, import_system17.cva)("");
 
 // src/components/Header.styles.ts
-var import_system17 = require("@marigold/system");
-var Header = (0, import_system17.cva)("");
+var import_system18 = require("@marigold/system");
+var Header = (0, import_system18.cva)("");
 
 // src/components/Headline.styles.ts
-var import_system18 = require("@marigold/system");
-var Headline = (0, import_system18.cva)("", {
+var import_system19 = require("@marigold/system");
+var Headline = (0, import_system19.cva)("", {
   variants: {
     size: {
       "level-1": "text-5xl font-black",
@@ -404,34 +469,34 @@ var Headline = (0, import_system18.cva)("", {
 });
 
 // src/components/HelpText.styles.ts
-var import_system19 = require("@marigold/system");
+var import_system20 = require("@marigold/system");
 var HelpText = {
-  container: (0, import_system19.cva)([
+  container: (0, import_system20.cva)([
     "mt-2 text-xs text-muted-foreground group-disabled/field:text-disabled-foreground",
     "group-invalid/field:text-destructive"
   ]),
-  icon: (0, import_system19.cva)("")
+  icon: (0, import_system20.cva)("")
 };
 
 // src/components/Image.styles.ts
-var import_system20 = require("@marigold/system");
-var Image = (0, import_system20.cva)();
+var import_system21 = require("@marigold/system");
+var Image = (0, import_system21.cva)();
 
 // src/components/Label.styles.ts
-var import_system21 = require("@marigold/system");
+var import_system22 = require("@marigold/system");
 var Label = {
-  container: (0, import_system21.cva)([
+  container: (0, import_system22.cva)([
     "text-sm font-medium leading-4 text-foreground",
     "group-disabled/field:cursor-not-allowed group-disabled/field:text-disabled-foreground"
   ]),
-  indicator: (0, import_system21.cva)(
+  indicator: (0, import_system22.cva)(
     "group-required/field:block group-required/field:text-destructive"
   )
 };
 
 // src/components/Link.styles.ts
-var import_system22 = require("@marigold/system");
-var Link = (0, import_system22.cva)(
+var import_system23 = require("@marigold/system");
+var Link = (0, import_system23.cva)(
   "underline aria-[disabled]:cursor-not-allowed py-2 underline-offset-4",
   {
     variants: {
@@ -444,128 +509,137 @@ var Link = (0, import_system22.cva)(
 );
 
 // src/components/List.styles.ts
-var import_system23 = require("@marigold/system");
+var import_system24 = require("@marigold/system");
 var List = {
-  ul: (0, import_system23.cva)("ml-6 list-inside list-disc py-3"),
-  ol: (0, import_system23.cva)("ml-6 list-inside list-decimal py-3"),
-  item: (0, import_system23.cva)("pt-3")
+  ul: (0, import_system24.cva)("ml-6 list-inside list-disc py-3"),
+  ol: (0, import_system24.cva)("ml-6 list-inside list-decimal py-3"),
+  item: (0, import_system24.cva)("pt-3")
 };
 
 // src/components/ListBox.styles.ts
-var import_system24 = require("@marigold/system");
+var import_system25 = require("@marigold/system");
 var ListBox = {
-  container: (0, import_system24.cva)([
-    "overflow-hidden rounded-lg border border-input group-[trigger]/popover:border-0"
+  container: (0, import_system25.cva)([
+    "overflow-hidden rounded-md border border-input group-[trigger]/popover:border-0"
   ]),
-  list: (0, import_system24.cva)(["space-y-1 bg-background p-1 text-sm outline-0"]),
-  option: (0, import_system24.cva)([
-    "disabled:cursor-not-allowed disabled:text-disabled-foreground",
-    "relative flex flex-col rounded-md px-2 py-1.5 text-sm text-foreground",
+  list: (0, import_system25.cva)(["space-y-1 bg-background p-1 text-sm outline-0"]),
+  option: (0, import_system25.cva)([
+    "relative flex flex-col rounded-md px-2 py-1.5 text-sm text-foreground cursor-pointer",
     "selected:bg-selected",
-    // TODO: can not use "ouline-none" because it overrides the focus visible things -.-
-    // TODO: try it after RAC is updated!
-    "data-[focused]:outline-none data-[focus-visible]:outline-2 data-[focus-visible]:outline-ring/70"
+    "hover:bg-hover hover:text-hover-foreground",
+    "disabled:cursor-not-allowed disabled:text-disabled-foreground",
+    "mixin-ring-focus-visible"
   ]),
-  section: (0, import_system24.cva)(""),
-  header: (0, import_system24.cva)(
+  section: (0, import_system25.cva)(""),
+  header: (0, import_system25.cva)(
     "[&_header]:px-2 [&_header]:py-1.5 [&_header]:text-xs [&_header]:font-medium [&_header]:text-muted-foreground"
   )
 };
 
 // src/components/Menu.styles.ts
-var import_system25 = require("@marigold/system");
+var import_system26 = require("@marigold/system");
 var Menu = {
-  container: (0, import_system25.cva)([
+  container: (0, import_system26.cva)([
     "bg-surface-overlay text-foreground z-50 min-w-40 overflow-hidden rounded-md  p-1 border-border"
   ]),
-  item: (0, import_system25.cva)([
+  item: (0, import_system26.cva)([
     "focus:bg-focus focus:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none  disabled:text-disabled-foreground"
   ]),
-  section: (0, import_system25.cva)(
+  section: (0, import_system26.cva)(
     "text-muted-foreground px-2 py-1.5 text-xs font-medium border-t border-t-border in-first:border-t-0"
   )
 };
 
 // src/components/NumberField.styles.ts
-var import_system26 = require("@marigold/system");
+var import_system27 = require("@marigold/system");
 var NumberField = {
-  group: (0, import_system26.cva)([
-    "mixin-ring-focus-within",
+  group: (0, import_system27.cva)([
+    "rounded-lg h-input",
+    "mixin-ring-has-focus-visible",
     inputInvalid,
-    "relative inline-flex w-full -mb-0.5 items-center overflow-hidden whitespace-nowrap rounded-lg h-input grow text-center tabular-nums text-foreground",
+    inputReadOnly,
     "border border-input text-sm shadow-sm shadow-black/5 transition-shadow",
     "data-invalid:data-[focus-within]:border-destructive data-invalid:data-[focus-within]:ring-destructive/20"
   ]),
-  stepper: (0, import_system26.cva)([
-    "w-7 h-full",
+  stepper: (0, import_system27.cva)([
+    "w-7 h-full text-center shrink-0",
     "disabled:text-disabled-foreground disabled:bg-disabled",
-    "border-input border-solid first-of-type:border-r",
-    "border-input border-solid last-of-type:border-l "
+    "border-input! first-of-type:border-r! last-of-type:border-l!"
   ]),
-  input: (0, import_system26.cva)(
-    "border-none shadow-none rounded-none outline-offset-0 text-center focus-visible:ring-0"
-  )
+  input: (0, import_system27.cva)([
+    "tabular-nums text-foreground px-3 py-2",
+    "min-w-0 flex-1",
+    "group-[[data-stepper]]/field:text-center",
+    "disabled:text-disabled-foreground disabled:bg-disabled"
+  ])
 };
 
 // src/components/Popover.styles.ts
-var import_system27 = require("@marigold/system");
-var Popover = (0, import_system27.cva)([
+var import_system28 = require("@marigold/system");
+var Popover = (0, import_system28.cva)([
   "group/popover",
-  "z-50 overflow-y-auto overflow-x-hidden rounded-lg outline-0",
-  "border border-border",
+  "z-50 overflow-y-auto overflow-x-hidden rounded-md outline-0 border-input",
   /** animate stuff missing */
-  "bg-surface-overlay text-foreground shadow-lg shadow-black/5 ",
-  "placement-t:mb-1",
-  "placement-b:mt-1",
-  "placement-r:ml-1",
-  "placement-l:mr-1"
+  "bg-surface-overlay text-foreground shadow-md",
+  "placement-top:mb-1",
+  "placement-bottom:mt-1",
+  "placement-right:ml-1",
+  "placement-left:mr-1"
 ]);
 
 // src/components/Radio.styles.ts
-var import_system28 = require("@marigold/system");
+var import_system29 = require("@marigold/system");
 var Radio = {
-  container: (0, import_system28.cva)("group-disabled/radio:cursor-not-allowed"),
-  label: (0, import_system28.cva)([
-    "group-disabled/radio:text-disabled-foreground",
-    "text-sm font-normal"
+  container: (0, import_system29.cva)("group-disabled/radio:cursor-not-allowed"),
+  label: (0, import_system29.cva)([
+    "text-sm font-normal cursor-pointer",
+    "group-disabled/radio:text-disabled-foreground group-disabled/radio:cursor-not-allowed"
   ]),
-  radio: (0, import_system28.cva)([
+  radio: (0, import_system29.cva)([
     "aspect-square size-4 rounded-full",
     "border border-input shadow-sm shadow-black/5",
-    "outline-offset-2 group-[focus-visible]/radio:outline-2 group-[focus-visible]/radio:outline-ring/70",
+    "mixin-ring-focus-visible-radio",
     "group-disabled/radio:border-disabled",
     "group-selected/radio:border-brand group-selected/radio:bg-brand group-selected/radio:text-brand-foreground"
   ]),
-  group: (0, import_system28.cva)()
+  group: (0, import_system29.cva)()
 };
 
 // src/components/Pagination.styles.ts
-var import_system29 = require("@marigold/system");
+var import_system30 = require("@marigold/system");
 var Pagination = {
-  navigationButton: (0, import_system29.cva)(
-    "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors outline-offset-2 focus-visible:outline-2 outline-ring/30 disabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-hover hover:text-hover-foreground h-9 py-2 gap-1 px-2.5"
-  ),
-  pageButton: (0, import_system29.cva)([
-    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-colors outline-offset-2 focus-visible:outline-2 outline-ring/30 disabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 bg-background size-9",
+  navigationButton: (0, import_system30.cva)([
+    "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors",
+    "mixin-ring-focus-visible",
+    "disabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+    "hover:bg-hover hover:text-hover-foreground",
+    "h-9 py-2 gap-1 px-2.5"
+  ]),
+  pageButton: (0, import_system30.cva)([
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-colors bg-background size-9",
+    "mixin-ring-focus-visible",
+    "disabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0",
     "data-[selected=true]:border data-[selected=true]:border-input data-[selected=true]:shadow-xs",
     "hover:bg-hover hover:text-hover-foreground"
   ]),
-  icon: (0, import_system29.cva)("h-4 w-4")
+  icon: (0, import_system30.cva)("h-4 w-4")
 };
 
 // src/components/ProgressCycle.styles.ts
-var import_system30 = require("@marigold/system");
-var ProgressCycle = (0, import_system30.cva)([
-  "stroke-background"
+var import_system31 = require("@marigold/system");
+var ProgressCycle = (0, import_system31.cva)([
+  "stroke-foreground"
 ]);
 
 // src/components/SectionMessage.styles.ts
-var import_system31 = require("@marigold/system");
+var import_system32 = require("@marigold/system");
 var SectionMessage = {
-  container: (0, import_system31.cva)(
+  container: (0, import_system32.cva)(
     [
-      'grid-cols-[min-content_auto_min-content] gap-x-4 gap-y-2 [grid-template-areas:"icon_title_close""icon_content_content"]',
-      "bg-background z-50 max-w-[601px] rounded-sm border p-4"
+      'grid-cols-[min-content_auto_min-content] gap-x-3 gap-y-1 [grid-template-areas:"icon_title_close""icon_content_content"]',
+      "bg-background rounded-md border px-3 py-4"
     ],
     {
       variants: {
@@ -581,8 +655,8 @@ var SectionMessage = {
       }
     }
   ),
-  title: (0, import_system31.cva)("text-base leading-5 font-bold"),
-  content: (0, import_system31.cva)("text-muted-foreground text-sm leading-5 font-normal", {
+  title: (0, import_system32.cva)("text-sm font-medium"),
+  content: (0, import_system32.cva)("text-muted-foreground text-sm leading-5 font-normal", {
     variants: {
       variant: {
         success: "text-success-muted-foreground",
@@ -595,7 +669,7 @@ var SectionMessage = {
       variant: "info"
     }
   }),
-  icon: (0, import_system31.cva)("h-4 w-4 align-baseline leading-none pt-0.5", {
+  icon: (0, import_system32.cva)("h-4 w-4 align-baseline leading-none pt-0.5", {
     variants: {
       variant: {
         success: "text-success-muted-accent",
@@ -608,16 +682,22 @@ var SectionMessage = {
       variant: "info"
     }
   }),
-  close: (0, import_system31.cva)(
-    "h-[9.98px] w-[9.98px] cursor-pointer border-none p-0 leading-normal outline-0"
-  )
+  close: (0, import_system32.cva)([
+    "flex items-center justify-center",
+    "rounded-md transition-color size-8 shrink-0 p-0 text-foreground cursor-pointer",
+    "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+    "-my-1.5 -me-2",
+    // align button with title
+    "mixin-ring-focus-visible",
+    "[&_svg]:opacity-60 [&_svg]:transition-opacity hover:[&_svg]:opacity-100"
+  ])
 };
 
 // src/components/Select.styles.ts
-var import_system32 = require("@marigold/system");
+var import_system33 = require("@marigold/system");
 var Select = {
-  icon: (0, import_system32.cva)("text-muted-foreground/80"),
-  select: (0, import_system32.cva)([
+  icon: (0, import_system33.cva)("text-muted-foreground/80"),
+  select: (0, import_system33.cva)([
     inputContainer,
     inputInvalid,
     inputDisabled,
@@ -629,35 +709,37 @@ var Select = {
 };
 
 // src/components/Slider.styles.ts
-var import_system33 = require("@marigold/system");
+var import_system34 = require("@marigold/system");
 var Slider = {
-  container: (0, import_system33.cva)("*:aria-hidden:hidden"),
-  track: (0, import_system33.cva)([
+  container: (0, import_system34.cva)("*:aria-hidden:hidden"),
+  track: (0, import_system34.cva)([
     "relative bg-muted rounded-lg flex w-full touch-none select-none items-center data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col data-[disabled]:opacity-50"
   ]),
-  selectedTrack: (0, import_system33.cva)([
+  selectedTrack: (0, import_system34.cva)([
     "absolute bg-black data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full rounded-lg"
   ]),
-  thumb: (0, import_system33.cva)([
-    "block h-5 w-5 rounded-full border-2 border-primary bg-background transition-colors focus-visible:outline-[3px] focus-visible:outline-ring/40 data-[disabled]:cursor-not-allowed"
+  thumb: (0, import_system34.cva)([
+    "block h-5 w-5 rounded-full border-2 border-primary bg-background transition-colors",
+    "mixin-ring-focus-visible-borderless",
+    "data-[disabled]:cursor-not-allowed"
   ]),
-  output: (0, import_system33.cva)("text-text-base text-sm")
+  output: (0, import_system34.cva)("text-text-base text-sm")
 };
 
 // src/components/Switch.styles.ts
-var import_system34 = require("@marigold/system");
+var import_system35 = require("@marigold/system");
 var Switch = {
-  container: (0, import_system34.cva)(
+  container: (0, import_system35.cva)(
     "disabled:cursor-not-allowed disabled:text-disabled-foreground"
   ),
-  track: (0, import_system34.cva)([
+  track: (0, import_system35.cva)([
     "inline-flex h-6 w-10 shrink-0 cursor-pointer items-center rounded-full",
     "border-2 border-transparent",
     "group-disabled/switch:bg-disabled group-disabled/switch:text-disabled-foreground group-selected/switch:group-disabled/switch:bg-disabled group-selected/switch:group-disabled/switch:text-disabled-foreground",
     "group-selected/switch:bg-brand bg-input",
-    "outline-offset-2 group-[focus-visible]/switch:outline-2 group-[focus-visible]/switch:outline-ring/70"
+    "mixin-ring-focus-visible-switch"
   ]),
-  thumb: (0, import_system34.cva)([
+  thumb: (0, import_system35.cva)([
     "pointer-events-none block size-5 rounded-full",
     "bg-background shadow-sm shadow-black/5",
     "ring-0 transition-transform duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]",
@@ -666,17 +748,32 @@ var Switch = {
 };
 
 // src/components/Table.styles.ts
-var import_system35 = require("@marigold/system");
+var import_system36 = require("@marigold/system");
 var Table = {
-  table: (0, import_system35.cva)("text-sm", {
-    variants: {
-      variant: {
-        default: "",
-        grid: ""
+  table: (0, import_system36.cva)(
+    "text-sm [&_td]:border-border [&_th]:border-border border-separate border-spacing-0 [&_th]:border-b [&_tr]:border-none [&_tr:not(:last-child)_td]:border-b",
+    {
+      variants: {
+        variant: {
+          default: "",
+          grid: ""
+        }
       }
     }
-  }),
-  headerRow: (0, import_system35.cva)("border-border border-b", {
+  ),
+  thead: (0, import_system36.cva)(
+    // for sticky header
+    "bg-background/90 top-0 z-10 backdrop-blur-xs ",
+    {
+      variants: {
+        variant: {
+          default: "",
+          grid: ""
+        }
+      }
+    }
+  ),
+  headerRow: (0, import_system36.cva)(["border-border border-b"], {
     variants: {
       variant: {
         default: "",
@@ -687,12 +784,10 @@ var Table = {
       variant: "default"
     }
   }),
-  header: (0, import_system35.cva)(
+  header: (0, import_system36.cva)(
     [
       "h-12 px-3 align-middle font-medium text-muted-foreground last:text-right",
-      "focus-visible:outline-2 outline-offset-2 outline-ring/70",
-      // for sticky header
-      "bg-background/90 top-0 z-10 backdrop-blur-xs"
+      "focus-visible:outline-2 outline-offset-2 outline-ring/70"
     ],
     {
       variants: {
@@ -706,8 +801,8 @@ var Table = {
       }
     }
   ),
-  body: (0, import_system35.cva)("[&_tr:last-child]:border-0"),
-  row: (0, import_system35.cva)(
+  body: (0, import_system36.cva)("[&_tr:last-child]:border-0"),
+  row: (0, import_system36.cva)(
     [
       "border-b border-border transition-colors",
       "focus-visible:outline-2 outline-offset-2 outline-ring/70",
@@ -725,7 +820,7 @@ var Table = {
       }
     }
   ),
-  cell: (0, import_system35.cva)(
+  cell: (0, import_system36.cva)(
     [
       "p-3 align-middle last:text-right",
       "focus-visible:outline-2 outline-offset-2 outline-ring/70"
@@ -745,32 +840,29 @@ var Table = {
 };
 
 // src/components/Tabs.styles.ts
-var import_system36 = require("@marigold/system");
+var import_system37 = require("@marigold/system");
 var Tabs = {
-  container: (0, import_system36.cva)("flex flex-col gap-2"),
-  tabsList: (0, import_system36.cva)([
+  container: (0, import_system37.cva)("flex flex-col gap-2"),
+  tabsList: (0, import_system37.cva)([
     "text-muted-foreground",
     "flex items-center p-0.5 h-auto gap-2 border-b px-0 py-1"
   ]),
-  tab: (0, import_system36.cva)([
+  tab: (0, import_system37.cva)([
     "relative inline-flex items-center justify-center rounded-sm px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-colors",
     "[&_svg]:shrink-0",
-    "outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+    "mixin-ring-focus-visible",
     "hover:bg-hover hover:text-foreground",
     "disabled:pointer-events-none disabled:opacity-50",
     "data-selected:text-foreground data-selected:hover:bg-hover",
     "data-[selected=true]:after:bg-foreground after:absolute after:inset-x-0 after:bottom-0 after:-mb-1 after:h-0.5"
   ]),
-  tabpanel: (0, import_system36.cva)([
-    "py-4 rounded-sm",
-    "outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]"
-  ])
+  tabpanel: (0, import_system37.cva)(["py-4 rounded-sm", "mixin-ring-focus-visible"])
 };
 
 // src/components/Tag.styles.ts
-var import_system37 = require("@marigold/system");
+var import_system38 = require("@marigold/system");
 var Tag = {
-  tag: (0, import_system37.cva)([
+  tag: (0, import_system38.cva)([
     "relative inline-flex items-center gap-[7px]",
     "border border-solid border-input rounded-md",
     "font-medium text-xs",
@@ -778,20 +870,20 @@ var Tag = {
     "bg-background",
     "data-selected:text-white data-selected:bg-brand",
     "data-[disabled]:cursor-not-allowed data-[disabled]:text-disabled-foreground data-[disabled]:bg-disabled",
-    "focus:outline-0 focus-visible:outline-2 focus-visible:outline-ring/70"
+    "mixin-ring-focus-visible"
   ]),
-  closeButton: (0, import_system37.cva)([
+  closeButton: (0, import_system38.cva)([
     "size-4 flex items-center justify-end whitespace-nowrap",
     "font-medium text-muted-foreground  text-sm hover:text-brand rounded-md",
     "p-0  transition-colors outline-0 cursor-pointer",
     "disabled:bg-disabled disabled:text-disabled-foreground disabled:cursor-not-allowed"
   ]),
-  listItems: (0, import_system37.cva)("flex flex-wrap items-center gap-1")
+  listItems: (0, import_system38.cva)("flex flex-wrap items-center gap-1")
 };
 
 // src/components/TextArea.styles.ts
-var import_system38 = require("@marigold/system");
-var TextArea = (0, import_system38.cva)([
+var import_system39 = require("@marigold/system");
+var TextArea = (0, import_system39.cva)([
   inputContainer,
   inputInvalid,
   "mixin-ring-focus-visible",
@@ -801,9 +893,12 @@ var TextArea = (0, import_system38.cva)([
 ]);
 
 // src/components/Text.styles.ts
-var import_system39 = require("@marigold/system");
-var Text = (0, import_system39.cva)("", {
+var import_system40 = require("@marigold/system");
+var Text = (0, import_system40.cva)("", {
   variants: {
+    variant: {
+      muted: "text-muted-foreground"
+    },
     size: {
       // Adding a default here, which beasically acts as an inherit
       default: "",
@@ -828,15 +923,15 @@ var Text = (0, import_system39.cva)("", {
 });
 
 // src/components/Tooltip.styles.ts
-var import_system40 = require("@marigold/system");
+var import_system41 = require("@marigold/system");
 var Tooltip = {
-  container: (0, import_system40.cva)(
+  container: (0, import_system41.cva)(
     [
       "text-brand-foreground bg-brand relative z-50 max-w-70 rounded-md border border-brand px-3 py-1.5 text-sm ",
-      "placement-t:mb-2",
-      "placement-b:mt-2",
-      "placement-r:ml-2",
-      "placement-l:mr-2"
+      "placement-top:mb-2",
+      "placement-bottom:mt-2",
+      "placement-right:ml-2",
+      "placement-left:mr-2"
     ],
     {
       variants: {
@@ -850,7 +945,7 @@ var Tooltip = {
       }
     }
   ),
-  arrow: (0, import_system40.cva)(
+  arrow: (0, import_system41.cva)(
     [
       "fill-brand  stroke-brand",
       // right
@@ -875,19 +970,19 @@ var Tooltip = {
 };
 
 // src/components/Underlay.styles.ts
-var import_system41 = require("@marigold/system");
-var Underlay = (0, import_system41.cva)("", {
+var import_system42 = require("@marigold/system");
+var Underlay = (0, import_system42.cva)("", {
   variants: {
     variant: {
-      modal: " bg-black/25 backdrop-blur-sm"
+      modal: " bg-black/80 backdrop-blur-sm"
     }
   }
 });
 
 // src/components/XLoader.styles.ts
-var import_system42 = require("@marigold/system");
+var import_system43 = require("@marigold/system");
 var XLoader = {
-  container: (0, import_system42.cva)("grid place-items-center text-brand", {
+  container: (0, import_system43.cva)("grid place-items-center text-brand", {
     variants: {
       variant: {
         default: "",
@@ -904,7 +999,7 @@ var XLoader = {
       size: "default"
     }
   }),
-  loader: (0, import_system42.cva)("size-full", {
+  loader: (0, import_system43.cva)("size-full", {
     variants: {
       variant: {
         default: "",
@@ -921,7 +1016,7 @@ var XLoader = {
       size: "default"
     }
   }),
-  label: (0, import_system42.cva)("text-current text-sm")
+  label: (0, import_system43.cva)("text-current text-sm")
 };
 
 // src/theme.ts