@marigold/theme-rui 0.4.0 → 1.0.0

package/dist/index.js

@@ -54,6 +54,7 @@ __export(components_exports, {
   List: () => List,
   ListBox: () => ListBox,
   Menu: () => Menu,
+  MultiSelect: () => MultiSelect,
   NumberField: () => NumberField,
   Pagination: () => Pagination,
   Popover: () => Popover,
@@ -94,7 +95,7 @@ var Accordion = {
         card: [
           "rounded-md border px-4 py-1 outline-none last:border-b",
           // TODO: focus is still shown even if an item within the item is focused
-          "mixin-ring-has-focus-visible"
+          "has-focus-visible:util-focus-ring"
         ]
       }
     },
@@ -112,7 +113,7 @@ var Accordion = {
     {
       variants: {
         variant: {
-          default: "mixin-ring-focus-visible",
+          default: "focus-visible:util-focus-ring",
           card: "outline-none"
         }
       },
@@ -133,7 +134,7 @@ 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",
-    "mixin-ring-focus-visible"
+    "focus-visible:util-focus-ring"
   ],
   {
     variants: {
@@ -174,7 +175,7 @@ var Button = (0, import_system4.cva)(
   [
     "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow]",
     "[&_svg]:shrink-0",
-    "mixin-ring-focus-visible mixin-disabled",
+    "focus-visible:util-focus-ring disabled:util-disabled",
     "pending:text-disabled-foreground pending:bg-disabled pending:cursor-not-allowed pending:border-none",
     "cursor-pointer"
   ],
@@ -218,7 +219,7 @@ var Checkbox = {
   checkbox: (0, import_system6.cva)([
     "grid size-4 shrink-0 place-content-center rounded",
     "border border-input shadow-sm shadow-black/5",
-    "mixin-ring-focus-visible-checkbox",
+    "group-focus-visible/checkbox:util-focus-ring",
     "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"
@@ -242,13 +243,13 @@ var Calendar = {
     "outline-offset-2 duration-150 [transition-property:color,background-color,border-radius,box-shadow]",
     "disabled:pointer-events-none data-[unavailable]:pointer-events-none data-focus-visible:z-10 data-[hovered]:bg-hover selected:bg-brand data-[hovered]:text-foreground selected:text-brand-foreground data-[unavailable]:line-through",
     "disabled:opacity-30 data-[unavailable]:opacity-30",
-    "mixin-ring-focus-visible-borderless"
+    "focus-visible:util-focus-borderless-ring"
   ]),
   calendarControllers: (0, import_system7.cva)([
     "size-9 rounded-lg",
     "text-muted-foreground/80",
     "transition-colors",
-    "mixin-ring-focus-visible"
+    "focus-visible:util-focus-ring"
   ]),
   calendarHeader: (0, import_system7.cva)([
     "size-9 rounded-lg p-0 text-xs font-medium text-muted-foreground/80"
@@ -276,7 +277,7 @@ var Input = {
     inputContainer,
     inputDisabled,
     inputInvalid,
-    "mixin-ring-focus-visible",
+    "focus-visible:util-focus-ring",
     inputReadOnly,
     "h-input",
     "placeholder:text-placeholder",
@@ -298,7 +299,7 @@ var DateField = {
     "h-input",
     inputContainer,
     inputDisabled,
-    "mixin-ring-has-focus-visible",
+    "has-focus-visible:util-focus-ring",
     inputInvalid,
     inputReadOnly,
     "invalid:focus-within:border-destructive invalid:focus-within:ring-destructive/20"
@@ -328,9 +329,9 @@ var DatePicker = (0, import_system11.cva)([
 var import_system12 = require("@marigold/system");
 var Dialog = {
   closeButton: (0, import_system12.cva)([
-    "absolute top-3 right-3",
+    "absolute top-6 right-3",
     "flex size-7 items-center justify-center rounded transition-[color,box-shadow]",
-    "mixin-ring-focus-visible",
+    "focus-visible:util-focus-ring",
     "[&_svg]:size-4 [&_svg]:opacity-60 [&_svg]:transition-opacity hover:[&_svg]:opacity-100"
   ]),
   container: (0, import_system12.cva)(
@@ -352,8 +353,14 @@ var Dialog = {
     }
   ),
   header: (0, import_system12.cva)("flex flex-col gap-1 text-center sm:text-left"),
+  title: (0, import_system12.cva)("text-lg font-semibold mb-1", {
+    variants: {
+      variant: {},
+      size: {}
+    }
+  }),
   content: (0, import_system12.cva)("text-muted-foreground text-sm"),
-  actions: (0, import_system12.cva)("flex flex-col-reverse gap-3 sm:flex-row sm:justify-end")
+  actions: (0, import_system12.cva)("flex flex-col-reverse gap-3 sm:flex-row sm:justify-end mt-4")
 };
 
 // src/components/Divider.styles.ts
@@ -420,7 +427,7 @@ var Drawer = {
   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",
+    "focus-visible:util-focus-ring",
     "[&_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"),
@@ -523,12 +530,12 @@ var ListBox = {
     "overflow-hidden rounded-md border border-input group-[trigger]/popover:border-0"
   ]),
   list: (0, import_system25.cva)(["space-y-1 bg-background p-1 text-sm outline-0"]),
-  option: (0, import_system25.cva)([
+  item: (0, import_system25.cva)([
     "relative flex flex-col rounded-md px-2 py-1.5 text-sm text-foreground cursor-pointer",
     "selected:bg-selected",
     "hover:bg-hover hover:text-hover-foreground",
     "disabled:cursor-not-allowed disabled:text-disabled-foreground",
-    "mixin-ring-focus-visible"
+    "focus-visible:util-focus-ring"
   ]),
   section: (0, import_system25.cva)(""),
   header: (0, import_system25.cva)(
@@ -550,23 +557,72 @@ var Menu = {
   )
 };
 
-// src/components/NumberField.styles.ts
+// src/components/Multiselect.styles.ts
 var import_system27 = require("@marigold/system");
+var MultiSelect = {
+  field: (0, import_system27.cva)("grid gap-y-0.5"),
+  container: (0, import_system27.cva)([
+    "bg-background shadow-sm shadow-black/5 border",
+    "px-3 text-sm text-foreground transition-shadow",
+    "border border-input rounded-lg outline-hidden",
+    "aria-disabled:bg-disabled aria-disabled:text-disabled-foreground aria-disabled:hover:border-input aria-disabled:border-input aria-disabled:cursor-not-allowed",
+    "has-[input[data-invalid=true]]:border-destructive has-[input[data-invalid=true][data-focused=true]]:!border-destructive has-[input[data-invalid=true][data-focused=true]]:!ring-destructive/20",
+    "[&>*:first-child]:p-0",
+    "has-[input[data-focused=true]]:!border-ring has-[input[data-focused=true]]:!ring-ring/50 has-[input[data-focused=true]]:ring-[3px] has-[input[data-focused=true]]:!outline-none",
+    "has-[input[aria-readonly=true]]:bg-muted"
+  ]),
+  input: (0, import_system27.cva)([
+    "bg-transparent flex-1 h-full",
+    "leading-loose",
+    "data-[focused]:outline-hidden outline-hidden border-0",
+    "disabled:cursor-not-allowed",
+    "group-data-[icon]/input:pl-5",
+    "group-data-[action]/input:pr-8",
+    "placeholder:text-placeholder"
+  ]),
+  tag: (0, import_system27.cva)([
+    "border border-solid border-input rounded-md",
+    "bg-background",
+    "font-medium text-xs",
+    "flex items-center gap-1 ",
+    "h-7 px-2 cursor-default"
+  ]),
+  closeButton: (0, import_system27.cva)(
+    "size-4 cursor-pointer border-none bg-transparent p-0 leading-normal outline-0"
+  ),
+  icon: (0, import_system27.cva)("left-1"),
+  listContainer: (0, import_system27.cva)([
+    "bg-background border border-solid border-input mt-0.5 rounded-lg outline-0"
+  ]),
+  list: (0, import_system27.cva)("pointer-events-auto space-y-1 p-1"),
+  option: (0, import_system27.cva)([
+    "text-sm text-foreground",
+    "flex flex-col",
+    "cursor-pointer p-2 outline-hidden",
+    "[&.isFocused:not([aria-disabled=true])]:!text-foreground [&.isFocused[aria-disabled=true]]:bg-transparent",
+    "aria-disabled:text-disabled-foreground aria-disabled:cursor-not-allowed",
+    "[&.isFocused:not([aria-disabled=true])]:!bg-hover"
+  ]),
+  valueContainer: (0, import_system27.cva)("gap-2 py-2 min-h-input")
+};
+
+// src/components/NumberField.styles.ts
+var import_system28 = require("@marigold/system");
 var NumberField = {
-  group: (0, import_system27.cva)([
+  group: (0, import_system28.cva)([
     "rounded-lg h-input",
-    "mixin-ring-has-focus-visible",
+    "has-focus-visible:util-focus-ring",
     inputInvalid,
     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_system27.cva)([
+  stepper: (0, import_system28.cva)([
     "w-7 h-full text-center shrink-0",
     "disabled:text-disabled-foreground disabled:bg-disabled",
     "border-input! first-of-type:border-r! last-of-type:border-l!"
   ]),
-  input: (0, import_system27.cva)([
+  input: (0, import_system28.cva)([
     "tabular-nums text-foreground px-3 py-2",
     "min-w-0 flex-1",
     "group-[[data-stepper]]/field:text-center",
@@ -575,8 +631,8 @@ var NumberField = {
 };
 
 // src/components/Popover.styles.ts
-var import_system28 = require("@marigold/system");
-var Popover = (0, import_system28.cva)([
+var import_system29 = require("@marigold/system");
+var Popover = (0, import_system29.cva)([
   "group/popover",
   "z-50 overflow-y-auto overflow-x-hidden rounded-md outline-0 border-input",
   /** animate stuff missing */
@@ -588,57 +644,57 @@ var Popover = (0, import_system28.cva)([
 ]);
 
 // src/components/Radio.styles.ts
-var import_system29 = require("@marigold/system");
+var import_system30 = require("@marigold/system");
 var Radio = {
-  container: (0, import_system29.cva)("group-disabled/radio:cursor-not-allowed"),
-  label: (0, import_system29.cva)([
+  container: (0, import_system30.cva)("group-disabled/radio:cursor-not-allowed"),
+  label: (0, import_system30.cva)([
     "text-sm font-normal cursor-pointer",
     "group-disabled/radio:text-disabled-foreground group-disabled/radio:cursor-not-allowed"
   ]),
-  radio: (0, import_system29.cva)([
+  radio: (0, import_system30.cva)([
     "aspect-square size-4 rounded-full",
     "border border-input shadow-sm shadow-black/5",
-    "mixin-ring-focus-visible-radio",
+    "group-focus-visible/radio:util-focus-ring",
     "group-disabled/radio:border-disabled",
     "group-selected/radio:border-brand group-selected/radio:bg-brand group-selected/radio:text-brand-foreground"
   ]),
-  group: (0, import_system29.cva)()
+  group: (0, import_system30.cva)()
 };
 
 // src/components/Pagination.styles.ts
-var import_system30 = require("@marigold/system");
+var import_system31 = require("@marigold/system");
 var Pagination = {
-  navigationButton: (0, import_system30.cva)([
+  navigationButton: (0, import_system31.cva)([
     "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors",
-    "mixin-ring-focus-visible",
+    "focus-visible:util-focus-ring",
     "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)([
+  pageButton: (0, import_system31.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",
+    "focus-visible:util-focus-ring",
     "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_system30.cva)("h-4 w-4")
+  icon: (0, import_system31.cva)("h-4 w-4")
 };
 
 // src/components/ProgressCycle.styles.ts
-var import_system31 = require("@marigold/system");
-var ProgressCycle = (0, import_system31.cva)([
+var import_system32 = require("@marigold/system");
+var ProgressCycle = (0, import_system32.cva)([
   "stroke-foreground"
 ]);
 
 // src/components/SectionMessage.styles.ts
-var import_system32 = require("@marigold/system");
+var import_system33 = require("@marigold/system");
 var SectionMessage = {
-  container: (0, import_system32.cva)(
+  container: (0, import_system33.cva)(
     [
-      'grid-cols-[min-content_auto_min-content] gap-x-3 gap-y-1 [grid-template-areas:"icon_title_close""icon_content_content"]',
+      'grid-cols-[min-content_auto_min-content] gap-x-4 gap-y-1 [grid-template-areas:"icon_title_close""icon_content_content"]',
       "bg-background rounded-md border px-3 py-4"
     ],
     {
@@ -655,8 +711,8 @@ var SectionMessage = {
       }
     }
   ),
-  title: (0, import_system32.cva)("text-sm font-medium"),
-  content: (0, import_system32.cva)("text-muted-foreground text-sm leading-5 font-normal", {
+  title: (0, import_system33.cva)("text-sm font-medium"),
+  content: (0, import_system33.cva)("text-muted-foreground text-sm leading-5 font-normal", {
     variants: {
       variant: {
         success: "text-success-muted-foreground",
@@ -669,7 +725,7 @@ var SectionMessage = {
       variant: "info"
     }
   }),
-  icon: (0, import_system32.cva)("h-4 w-4 align-baseline leading-none pt-0.5", {
+  icon: (0, import_system33.cva)("h-6 w-6 align-baseline leading-none -mt-0.5", {
     variants: {
       variant: {
         success: "text-success-muted-accent",
@@ -682,26 +738,26 @@ var SectionMessage = {
       variant: "info"
     }
   }),
-  close: (0, import_system32.cva)([
+  close: (0, import_system33.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",
+    "[&_svg]:pointer-events-none [&_svg]:size-6 [&_svg]:shrink-0",
     "-my-1.5 -me-2",
     // align button with title
-    "mixin-ring-focus-visible",
+    "focus-visible:util-focus-ring",
     "[&_svg]:opacity-60 [&_svg]:transition-opacity hover:[&_svg]:opacity-100"
   ])
 };
 
 // src/components/Select.styles.ts
-var import_system33 = require("@marigold/system");
+var import_system34 = require("@marigold/system");
 var Select = {
-  icon: (0, import_system33.cva)("text-muted-foreground/80"),
-  select: (0, import_system33.cva)([
+  icon: (0, import_system34.cva)("text-muted-foreground/80"),
+  select: (0, import_system34.cva)([
     inputContainer,
     inputInvalid,
     inputDisabled,
-    "mixin-ring-focus-visible",
+    "focus-visible:util-focus-ring",
     "h-input",
     "cursor-pointer",
     "*:data-placeholder:text-placeholder"
@@ -709,37 +765,37 @@ var Select = {
 };
 
 // src/components/Slider.styles.ts
-var import_system34 = require("@marigold/system");
+var import_system35 = require("@marigold/system");
 var Slider = {
-  container: (0, import_system34.cva)("*:aria-hidden:hidden"),
-  track: (0, import_system34.cva)([
+  container: (0, import_system35.cva)("*:aria-hidden:hidden"),
+  track: (0, import_system35.cva)([
     "relative bg-muted rounded-lg flex w-full touch-none select-none items-center data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col data-[disabled]:opacity-50"
   ]),
-  selectedTrack: (0, import_system34.cva)([
+  selectedTrack: (0, import_system35.cva)([
     "absolute bg-black data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full rounded-lg"
   ]),
-  thumb: (0, import_system34.cva)([
+  thumb: (0, import_system35.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"
+    "focus-visible:util-focus-borderless-ring",
+    "disabled:cursor-not-allowed"
   ]),
-  output: (0, import_system34.cva)("text-text-base text-sm")
+  output: (0, import_system35.cva)("text-text-base text-sm")
 };
 
 // src/components/Switch.styles.ts
-var import_system35 = require("@marigold/system");
+var import_system36 = require("@marigold/system");
 var Switch = {
-  container: (0, import_system35.cva)(
+  container: (0, import_system36.cva)(
     "disabled:cursor-not-allowed disabled:text-disabled-foreground"
   ),
-  track: (0, import_system35.cva)([
+  track: (0, import_system36.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",
-    "mixin-ring-focus-visible-switch"
+    "group-focus-visible/switch:util-focus-borderless-ring"
   ]),
-  thumb: (0, import_system35.cva)([
+  thumb: (0, import_system36.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)]",
@@ -748,9 +804,9 @@ var Switch = {
 };
 
 // src/components/Table.styles.ts
-var import_system36 = require("@marigold/system");
+var import_system37 = require("@marigold/system");
 var Table = {
-  table: (0, import_system36.cva)(
+  table: (0, import_system37.cva)(
     "text-sm [&_td]:border-border [&_th]:border-border border-separate border-spacing-0 [&_th]:border-b [&_tr]:border-none [&_tr:not(:last-child)_td]:border-b",
     {
       variants: {
@@ -761,7 +817,7 @@ var Table = {
       }
     }
   ),
-  thead: (0, import_system36.cva)(
+  thead: (0, import_system37.cva)(
     // for sticky header
     "bg-background/90 top-0 z-10 backdrop-blur-xs ",
     {
@@ -773,7 +829,7 @@ var Table = {
       }
     }
   ),
-  headerRow: (0, import_system36.cva)(["border-border border-b"], {
+  headerRow: (0, import_system37.cva)(["border-border border-b"], {
     variants: {
       variant: {
         default: "",
@@ -784,7 +840,7 @@ var Table = {
       variant: "default"
     }
   }),
-  header: (0, import_system36.cva)(
+  header: (0, import_system37.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"
@@ -801,8 +857,8 @@ var Table = {
       }
     }
   ),
-  body: (0, import_system36.cva)("[&_tr:last-child]:border-0"),
-  row: (0, import_system36.cva)(
+  body: (0, import_system37.cva)("[&_tr:last-child]:border-0"),
+  row: (0, import_system37.cva)(
     [
       "border-b border-border transition-colors",
       "focus-visible:outline-2 outline-offset-2 outline-ring/70",
@@ -820,7 +876,7 @@ var Table = {
       }
     }
   ),
-  cell: (0, import_system36.cva)(
+  cell: (0, import_system37.cva)(
     [
       "p-3 align-middle last:text-right",
       "focus-visible:outline-2 outline-offset-2 outline-ring/70"
@@ -840,29 +896,29 @@ var Table = {
 };
 
 // src/components/Tabs.styles.ts
-var import_system37 = require("@marigold/system");
+var import_system38 = require("@marigold/system");
 var Tabs = {
-  container: (0, import_system37.cva)("flex flex-col gap-2"),
-  tabsList: (0, import_system37.cva)([
+  container: (0, import_system38.cva)("flex flex-col gap-2"),
+  tabsList: (0, import_system38.cva)([
     "text-muted-foreground",
     "flex items-center p-0.5 h-auto gap-2 border-b px-0 py-1"
   ]),
-  tab: (0, import_system37.cva)([
+  tab: (0, import_system38.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",
-    "mixin-ring-focus-visible",
+    "focus-visible:util-focus-ring",
     "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_system37.cva)(["py-4 rounded-sm", "mixin-ring-focus-visible"])
+  tabpanel: (0, import_system38.cva)(["py-4 rounded-sm", "focus-visible:util-focus-ring"])
 };
 
 // src/components/Tag.styles.ts
-var import_system38 = require("@marigold/system");
+var import_system39 = require("@marigold/system");
 var Tag = {
-  tag: (0, import_system38.cva)([
+  tag: (0, import_system39.cva)([
     "relative inline-flex items-center gap-[7px]",
     "border border-solid border-input rounded-md",
     "font-medium text-xs",
@@ -870,31 +926,31 @@ 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",
-    "mixin-ring-focus-visible"
+    "focus-visible:util-focus-ring"
   ]),
-  closeButton: (0, import_system38.cva)([
+  closeButton: (0, import_system39.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_system38.cva)("flex flex-wrap items-center gap-1")
+  listItems: (0, import_system39.cva)("flex flex-wrap items-center gap-1")
 };
 
 // src/components/TextArea.styles.ts
-var import_system39 = require("@marigold/system");
-var TextArea = (0, import_system39.cva)([
+var import_system40 = require("@marigold/system");
+var TextArea = (0, import_system40.cva)([
   inputContainer,
   inputInvalid,
-  "mixin-ring-focus-visible",
+  "focus-visible:util-focus-ring",
   inputDisabled,
   inputReadOnly,
   "invalid:text-destructive"
 ]);
 
 // src/components/Text.styles.ts
-var import_system40 = require("@marigold/system");
-var Text = (0, import_system40.cva)("", {
+var import_system41 = require("@marigold/system");
+var Text = (0, import_system41.cva)("", {
   variants: {
     variant: {
       muted: "text-muted-foreground"
@@ -923,9 +979,9 @@ var Text = (0, import_system40.cva)("", {
 });
 
 // src/components/Tooltip.styles.ts
-var import_system41 = require("@marigold/system");
+var import_system42 = require("@marigold/system");
 var Tooltip = {
-  container: (0, import_system41.cva)(
+  container: (0, import_system42.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-top:mb-2",
@@ -945,7 +1001,7 @@ var Tooltip = {
       }
     }
   ),
-  arrow: (0, import_system41.cva)(
+  arrow: (0, import_system42.cva)(
     [
       "fill-brand  stroke-brand",
       // right
@@ -970,8 +1026,8 @@ var Tooltip = {
 };
 
 // src/components/Underlay.styles.ts
-var import_system42 = require("@marigold/system");
-var Underlay = (0, import_system42.cva)("", {
+var import_system43 = require("@marigold/system");
+var Underlay = (0, import_system43.cva)("", {
   variants: {
     variant: {
       modal: " bg-black/80 backdrop-blur-sm"
@@ -980,9 +1036,9 @@ var Underlay = (0, import_system42.cva)("", {
 });
 
 // src/components/XLoader.styles.ts
-var import_system43 = require("@marigold/system");
+var import_system44 = require("@marigold/system");
 var XLoader = {
-  container: (0, import_system43.cva)("grid place-items-center text-brand", {
+  container: (0, import_system44.cva)("grid place-items-center text-brand", {
     variants: {
       variant: {
         default: "",
@@ -999,7 +1055,7 @@ var XLoader = {
       size: "default"
     }
   }),
-  loader: (0, import_system43.cva)("size-full", {
+  loader: (0, import_system44.cva)("size-full", {
     variants: {
       variant: {
         default: "",
@@ -1016,7 +1072,7 @@ var XLoader = {
       size: "default"
     }
   }),
-  label: (0, import_system43.cva)("text-current text-sm")
+  label: (0, import_system44.cva)("text-current text-sm")
 };
 
 // src/theme.ts