@marigold/theme-rui 0.3.2 → 0.4.0

package/dist/index.mjs

@@ -19,6 +19,7 @@ __export(components_exports, {
   DatePicker: () => DatePicker,
   Dialog: () => Dialog,
   Divider: () => Divider,
+  Drawer: () => Drawer,
   Field: () => Field,
   Footer: () => Footer,
   Header: () => Header,
@@ -99,9 +100,7 @@ var Accordion = {
       }
     }
   ),
-  content: cva(
-    "overflow-hidden text-sm text-muted-foreground in-data-[expanded]:pb-2"
-  ),
+  content: cva("overflow-hidden in-data-[expanded]:pb-2"),
   icon: cva(
     "pointer-events-none shrink-0 opacity-60 transition-transform duration-200"
   )
@@ -162,7 +161,7 @@ var Button = cva4(
     variants: {
       variant: {
         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",
+        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
@@ -316,7 +315,7 @@ var Dialog = {
   container: cva12(
     [
       "flex flex-col gap-0 p-0",
-      "bg-background rounded-xl border p-6 shadow-lg overflow-y-auto",
+      "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)]"
     ],
@@ -350,9 +349,70 @@ var Divider = cva13(
   }
 );
 
-// src/components/IconButton.styles.ts
+// src/components/Drawer.styles.ts
 import { cva as cva14 } from "@marigold/system";
-var IconButton = cva14("", {
+var Drawer = {
+  overlay: cva14([
+    "group/overlay",
+    "entering:animate-slide-in-right exiting:animate-slide-out-right"
+  ]),
+  container: cva14(
+    [
+      "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: cva14([
+    "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: cva14("border-border border-b px-6 py-4"),
+  title: cva14("font-semibold text-base"),
+  content: cva14("px-6 py-4 overflow-y-auto outline-none"),
+  actions: cva14(
+    "flex flex-row gap-3 justify-end border-border border-t px-6 py-4"
+  )
+};
+
+// src/components/IconButton.styles.ts
+import { cva as cva15 } from "@marigold/system";
+var IconButton = cva15("", {
   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"
@@ -361,20 +421,20 @@ var IconButton = cva14("", {
 });
 
 // src/components/Field.styles.ts
-import { cva as cva15 } from "@marigold/system";
-var Field = cva15("space-y-2");
+import { cva as cva16 } from "@marigold/system";
+var Field = cva16("space-y-2");
 
 // src/components/Footer.styles.ts
-import { cva as cva16 } from "@marigold/system";
-var Footer = cva16("");
+import { cva as cva17 } from "@marigold/system";
+var Footer = cva17("");
 
 // src/components/Header.styles.ts
-import { cva as cva17 } from "@marigold/system";
-var Header = cva17("");
+import { cva as cva18 } from "@marigold/system";
+var Header = cva18("");
 
 // src/components/Headline.styles.ts
-import { cva as cva18 } from "@marigold/system";
-var Headline = cva18("", {
+import { cva as cva19 } from "@marigold/system";
+var Headline = cva19("", {
   variants: {
     size: {
       "level-1": "text-5xl font-black",
@@ -388,34 +448,34 @@ var Headline = cva18("", {
 });
 
 // src/components/HelpText.styles.ts
-import { cva as cva19 } from "@marigold/system";
+import { cva as cva20 } from "@marigold/system";
 var HelpText = {
-  container: cva19([
+  container: cva20([
     "mt-2 text-xs text-muted-foreground group-disabled/field:text-disabled-foreground",
     "group-invalid/field:text-destructive"
   ]),
-  icon: cva19("")
+  icon: cva20("")
 };
 
 // src/components/Image.styles.ts
-import { cva as cva20 } from "@marigold/system";
-var Image = cva20();
+import { cva as cva21 } from "@marigold/system";
+var Image = cva21();
 
 // src/components/Label.styles.ts
-import { cva as cva21 } from "@marigold/system";
+import { cva as cva22 } from "@marigold/system";
 var Label = {
-  container: cva21([
+  container: cva22([
     "text-sm font-medium leading-4 text-foreground",
     "group-disabled/field:cursor-not-allowed group-disabled/field:text-disabled-foreground"
   ]),
-  indicator: cva21(
+  indicator: cva22(
     "group-required/field:block group-required/field:text-destructive"
   )
 };
 
 // src/components/Link.styles.ts
-import { cva as cva22 } from "@marigold/system";
-var Link = cva22(
+import { cva as cva23 } from "@marigold/system";
+var Link = cva23(
   "underline aria-[disabled]:cursor-not-allowed py-2 underline-offset-4",
   {
     variants: {
@@ -428,71 +488,74 @@ var Link = cva22(
 );
 
 // src/components/List.styles.ts
-import { cva as cva23 } from "@marigold/system";
+import { cva as cva24 } from "@marigold/system";
 var List = {
-  ul: cva23("ml-6 list-inside list-disc py-3"),
-  ol: cva23("ml-6 list-inside list-decimal py-3"),
-  item: cva23("pt-3")
+  ul: cva24("ml-6 list-inside list-disc py-3"),
+  ol: cva24("ml-6 list-inside list-decimal py-3"),
+  item: cva24("pt-3")
 };
 
 // src/components/ListBox.styles.ts
-import { cva as cva24 } from "@marigold/system";
+import { cva as cva25 } from "@marigold/system";
 var ListBox = {
-  container: cva24([
+  container: cva25([
     "overflow-hidden rounded-md border border-input group-[trigger]/popover:border-0"
   ]),
-  list: cva24(["space-y-1 bg-background p-1 text-sm outline-0"]),
-  option: cva24([
+  list: cva25(["space-y-1 bg-background p-1 text-sm outline-0"]),
+  option: cva25([
     "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"
   ]),
-  section: cva24(""),
-  header: cva24(
+  section: cva25(""),
+  header: cva25(
     "[&_header]:px-2 [&_header]:py-1.5 [&_header]:text-xs [&_header]:font-medium [&_header]:text-muted-foreground"
   )
 };
 
 // src/components/Menu.styles.ts
-import { cva as cva25 } from "@marigold/system";
+import { cva as cva26 } from "@marigold/system";
 var Menu = {
-  container: cva25([
+  container: cva26([
     "bg-surface-overlay text-foreground z-50 min-w-40 overflow-hidden rounded-md  p-1 border-border"
   ]),
-  item: cva25([
+  item: cva26([
     "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: cva25(
+  section: cva26(
     "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
-import { cva as cva26 } from "@marigold/system";
+import { cva as cva27 } from "@marigold/system";
 var NumberField = {
-  group: cva26([
+  group: cva27([
+    "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: cva26([
-    "w-7 h-full",
+  stepper: cva27([
+    "w-7 h-full text-center shrink-0",
     "disabled:text-disabled-foreground disabled:bg-disabled",
-    // Make sure focus ring is only around the component and not the stepper buttons
     "border-input! first-of-type:border-r! last-of-type:border-l!"
   ]),
-  input: cva26(
-    "border-none shadow-none rounded-none outline-offset-0 text-center focus-visible:ring-0"
-  )
+  input: cva27([
+    "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
-import { cva as cva27 } from "@marigold/system";
-var Popover = cva27([
+import { cva as cva28 } from "@marigold/system";
+var Popover = cva28([
   "group/popover",
   "z-50 overflow-y-auto overflow-x-hidden rounded-md outline-0 border-input",
   /** animate stuff missing */
@@ -504,27 +567,27 @@ var Popover = cva27([
 ]);
 
 // src/components/Radio.styles.ts
-import { cva as cva28 } from "@marigold/system";
+import { cva as cva29 } from "@marigold/system";
 var Radio = {
-  container: cva28("group-disabled/radio:cursor-not-allowed"),
-  label: cva28([
+  container: cva29("group-disabled/radio:cursor-not-allowed"),
+  label: cva29([
     "text-sm font-normal cursor-pointer",
     "group-disabled/radio:text-disabled-foreground group-disabled/radio:cursor-not-allowed"
   ]),
-  radio: cva28([
+  radio: cva29([
     "aspect-square size-4 rounded-full",
     "border border-input shadow-sm shadow-black/5",
     "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: cva28()
+  group: cva29()
 };
 
 // src/components/Pagination.styles.ts
-import { cva as cva29 } from "@marigold/system";
+import { cva as cva30 } from "@marigold/system";
 var Pagination = {
-  navigationButton: cva29([
+  navigationButton: cva30([
     "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",
@@ -532,7 +595,7 @@ var Pagination = {
     "hover:bg-hover hover:text-hover-foreground",
     "h-9 py-2 gap-1 px-2.5"
   ]),
-  pageButton: cva29([
+  pageButton: cva30([
     "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",
@@ -540,19 +603,19 @@ var Pagination = {
     "data-[selected=true]:border data-[selected=true]:border-input data-[selected=true]:shadow-xs",
     "hover:bg-hover hover:text-hover-foreground"
   ]),
-  icon: cva29("h-4 w-4")
+  icon: cva30("h-4 w-4")
 };
 
 // src/components/ProgressCycle.styles.ts
-import { cva as cva30 } from "@marigold/system";
-var ProgressCycle = cva30([
+import { cva as cva31 } from "@marigold/system";
+var ProgressCycle = cva31([
   "stroke-foreground"
 ]);
 
 // src/components/SectionMessage.styles.ts
-import { cva as cva31 } from "@marigold/system";
+import { cva as cva32 } from "@marigold/system";
 var SectionMessage = {
-  container: cva31(
+  container: cva32(
     [
       '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"
@@ -571,8 +634,8 @@ var SectionMessage = {
       }
     }
   ),
-  title: cva31("text-sm font-medium"),
-  content: cva31("text-muted-foreground text-sm leading-5 font-normal", {
+  title: cva32("text-sm font-medium"),
+  content: cva32("text-muted-foreground text-sm leading-5 font-normal", {
     variants: {
       variant: {
         success: "text-success-muted-foreground",
@@ -585,7 +648,7 @@ var SectionMessage = {
       variant: "info"
     }
   }),
-  icon: cva31("h-4 w-4 align-baseline leading-none pt-0.5", {
+  icon: cva32("h-4 w-4 align-baseline leading-none pt-0.5", {
     variants: {
       variant: {
         success: "text-success-muted-accent",
@@ -598,7 +661,7 @@ var SectionMessage = {
       variant: "info"
     }
   }),
-  close: cva31([
+  close: cva32([
     "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",
@@ -610,10 +673,10 @@ var SectionMessage = {
 };
 
 // src/components/Select.styles.ts
-import { cva as cva32 } from "@marigold/system";
+import { cva as cva33 } from "@marigold/system";
 var Select = {
-  icon: cva32("text-muted-foreground/80"),
-  select: cva32([
+  icon: cva33("text-muted-foreground/80"),
+  select: cva33([
     inputContainer,
     inputInvalid,
     inputDisabled,
@@ -625,37 +688,37 @@ var Select = {
 };
 
 // src/components/Slider.styles.ts
-import { cva as cva33 } from "@marigold/system";
+import { cva as cva34 } from "@marigold/system";
 var Slider = {
-  container: cva33("*:aria-hidden:hidden"),
-  track: cva33([
+  container: cva34("*:aria-hidden:hidden"),
+  track: cva34([
     "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: cva33([
+  selectedTrack: cva34([
     "absolute bg-black data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full rounded-lg"
   ]),
-  thumb: cva33([
+  thumb: cva34([
     "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: cva33("text-text-base text-sm")
+  output: cva34("text-text-base text-sm")
 };
 
 // src/components/Switch.styles.ts
-import { cva as cva34 } from "@marigold/system";
+import { cva as cva35 } from "@marigold/system";
 var Switch = {
-  container: cva34(
+  container: cva35(
     "disabled:cursor-not-allowed disabled:text-disabled-foreground"
   ),
-  track: cva34([
+  track: cva35([
     "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"
   ]),
-  thumb: cva34([
+  thumb: cva35([
     "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)]",
@@ -664,9 +727,9 @@ var Switch = {
 };
 
 // src/components/Table.styles.ts
-import { cva as cva35 } from "@marigold/system";
+import { cva as cva36 } from "@marigold/system";
 var Table = {
-  table: cva35(
+  table: cva36(
     "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: {
@@ -677,7 +740,7 @@ var Table = {
       }
     }
   ),
-  thead: cva35(
+  thead: cva36(
     // for sticky header
     "bg-background/90 top-0 z-10 backdrop-blur-xs ",
     {
@@ -689,7 +752,7 @@ var Table = {
       }
     }
   ),
-  headerRow: cva35(["border-border border-b"], {
+  headerRow: cva36(["border-border border-b"], {
     variants: {
       variant: {
         default: "",
@@ -700,7 +763,7 @@ var Table = {
       variant: "default"
     }
   }),
-  header: cva35(
+  header: cva36(
     [
       "h-12 px-3 align-middle font-medium text-muted-foreground last:text-right",
       "focus-visible:outline-2 outline-offset-2 outline-ring/70"
@@ -717,8 +780,8 @@ var Table = {
       }
     }
   ),
-  body: cva35("[&_tr:last-child]:border-0"),
-  row: cva35(
+  body: cva36("[&_tr:last-child]:border-0"),
+  row: cva36(
     [
       "border-b border-border transition-colors",
       "focus-visible:outline-2 outline-offset-2 outline-ring/70",
@@ -736,7 +799,7 @@ var Table = {
       }
     }
   ),
-  cell: cva35(
+  cell: cva36(
     [
       "p-3 align-middle last:text-right",
       "focus-visible:outline-2 outline-offset-2 outline-ring/70"
@@ -756,14 +819,14 @@ var Table = {
 };
 
 // src/components/Tabs.styles.ts
-import { cva as cva36 } from "@marigold/system";
+import { cva as cva37 } from "@marigold/system";
 var Tabs = {
-  container: cva36("flex flex-col gap-2"),
-  tabsList: cva36([
+  container: cva37("flex flex-col gap-2"),
+  tabsList: cva37([
     "text-muted-foreground",
     "flex items-center p-0.5 h-auto gap-2 border-b px-0 py-1"
   ]),
-  tab: cva36([
+  tab: cva37([
     "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",
@@ -772,13 +835,13 @@ var Tabs = {
     "data-selected:text-foreground data-selected:hover:bg-hover",
     "data-[selected=true]:after:bg-foreground after:absolute after:inset-x-0 after:bottom-0 after:-mb-1 after:h-0.5"
   ]),
-  tabpanel: cva36(["py-4 rounded-sm", "mixin-ring-focus-visible"])
+  tabpanel: cva37(["py-4 rounded-sm", "mixin-ring-focus-visible"])
 };
 
 // src/components/Tag.styles.ts
-import { cva as cva37 } from "@marigold/system";
+import { cva as cva38 } from "@marigold/system";
 var Tag = {
-  tag: cva37([
+  tag: cva38([
     "relative inline-flex items-center gap-[7px]",
     "border border-solid border-input rounded-md",
     "font-medium text-xs",
@@ -788,18 +851,18 @@ var Tag = {
     "data-[disabled]:cursor-not-allowed data-[disabled]:text-disabled-foreground data-[disabled]:bg-disabled",
     "mixin-ring-focus-visible"
   ]),
-  closeButton: cva37([
+  closeButton: cva38([
     "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: cva37("flex flex-wrap items-center gap-1")
+  listItems: cva38("flex flex-wrap items-center gap-1")
 };
 
 // src/components/TextArea.styles.ts
-import { cva as cva38 } from "@marigold/system";
-var TextArea = cva38([
+import { cva as cva39 } from "@marigold/system";
+var TextArea = cva39([
   inputContainer,
   inputInvalid,
   "mixin-ring-focus-visible",
@@ -809,9 +872,12 @@ var TextArea = cva38([
 ]);
 
 // src/components/Text.styles.ts
-import { cva as cva39 } from "@marigold/system";
-var Text = cva39("", {
+import { cva as cva40 } from "@marigold/system";
+var Text = cva40("", {
   variants: {
+    variant: {
+      muted: "text-muted-foreground"
+    },
     size: {
       // Adding a default here, which beasically acts as an inherit
       default: "",
@@ -836,9 +902,9 @@ var Text = cva39("", {
 });
 
 // src/components/Tooltip.styles.ts
-import { cva as cva40 } from "@marigold/system";
+import { cva as cva41 } from "@marigold/system";
 var Tooltip = {
-  container: cva40(
+  container: cva41(
     [
       "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",
@@ -858,7 +924,7 @@ var Tooltip = {
       }
     }
   ),
-  arrow: cva40(
+  arrow: cva41(
     [
       "fill-brand  stroke-brand",
       // right
@@ -883,8 +949,8 @@ var Tooltip = {
 };
 
 // src/components/Underlay.styles.ts
-import { cva as cva41 } from "@marigold/system";
-var Underlay = cva41("", {
+import { cva as cva42 } from "@marigold/system";
+var Underlay = cva42("", {
   variants: {
     variant: {
       modal: " bg-black/80 backdrop-blur-sm"
@@ -893,9 +959,9 @@ var Underlay = cva41("", {
 });
 
 // src/components/XLoader.styles.ts
-import { cva as cva42 } from "@marigold/system";
+import { cva as cva43 } from "@marigold/system";
 var XLoader = {
-  container: cva42("grid place-items-center text-brand", {
+  container: cva43("grid place-items-center text-brand", {
     variants: {
       variant: {
         default: "",
@@ -912,7 +978,7 @@ var XLoader = {
       size: "default"
     }
   }),
-  loader: cva42("size-full", {
+  loader: cva43("size-full", {
     variants: {
       variant: {
         default: "",
@@ -929,7 +995,7 @@ var XLoader = {
       size: "default"
     }
   }),
-  label: cva42("text-current text-sm")
+  label: cva43("text-current text-sm")
 };
 
 // src/theme.ts