@marigold/theme-rui 1.2.0 → 1.4.1

package/dist/index.js

@@ -31,6 +31,7 @@ __export(components_exports, {
   Accordion: () => Accordion,
   Badge: () => Badge,
   Body: () => Body,
+  Breadcrumbs: () => Breadcrumbs,
   Button: () => Button,
   Calendar: () => Calendar,
   Card: () => Card,
@@ -72,6 +73,7 @@ __export(components_exports, {
   Tag: () => Tag,
   Text: () => Text,
   TextArea: () => TextArea,
+  Toast: () => Toast,
   Tooltip: () => Tooltip,
   Underlay: () => Underlay,
   XLoader: () => XLoader
@@ -146,7 +148,9 @@ var Badge = (0, import_system2.cva)(
         success: "bg-success-muted text-success-muted-foreground",
         warning: "bg-warning-muted text-warning-muted-foreground",
         info: "bg-info-muted text-info-muted-foreground",
-        error: "bg-destructive-muted text-destructive-muted-foreground"
+        error: "bg-destructive-muted text-destructive-muted-foreground",
+        admin: "text-access-admin-foreground border border-access-admin-foreground",
+        master: "text-access-master-foreground border border-access-master-foreground"
       }
     },
     defaultVariants: {
@@ -164,7 +168,7 @@ var import_system4 = require("@marigold/system");
 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",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0",
     "focus-visible:util-focus-ring outline-none disabled:util-disabled",
     "pending:text-disabled-foreground pending:bg-disabled pending:cursor-not-allowed pending:border-none",
     "cursor-pointer"
@@ -172,13 +176,10 @@ var Button = (0, import_system4.cva)(
   {
     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 expanded:bg-hover",
+        primary: "bg-brand text-brand-foreground shadow-xs hover:bg-brand/90",
+        secondary: "border border-input bg-background shadow-xs hover:bg-hover hover:text-foreground expanded:bg-hover",
         destructive: "bg-destructive text-destructive-foreground 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
-        // TODO: Remove this in future and rethink the MonthListBox and YearListBox or use another variant
-        text: "hover:bg-hover"
+        ghost: "hover:bg-hover hover:text-foreground"
       },
       size: {
         default: "h-button px-4 py-2 [&_svg]:size-4",
@@ -216,16 +217,18 @@ var import_system6 = require("@marigold/system");
 var Checkbox = {
   checkbox: (0, import_system6.cva)([
     "grid size-4 shrink-0 place-content-center rounded",
-    "border border-input shadow-sm shadow-black/5",
+    "border border-input shadow-xs",
     "group-focus-visible/checkbox:util-focus-ring outline-none",
     "group-disabled/checkbox:group-selected/checkbox:bg-disabled group-disabled/checkbox:border-disabled! group-disabled/checkbox:text-disabled-foreground group-disabled/checkbox:cursor-not-allowed",
     "group-selected/checkbox:border-brand group-selected/checkbox:bg-brand group-selected/checkbox:text-brand-foreground",
     "group-[indeterminate]/checkbox:border-brand group-[indeterminate]/checkbox:bg-brand group-[indeterminate]/checkbox:text-brand-foreground"
   ]),
   container: (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'
-  ),
+  label: (0, import_system6.cva)([
+    "flex items-center gap-1",
+    'text-sm leading-4 group-[group="checkbox"]/checkboxgroup:font-normal font-medium text-foregroun',
+    "group-disabled/checkbox:text-disabled-foreground"
+  ]),
   group: (0, import_system6.cva)()
 };
 
@@ -236,7 +239,7 @@ var Calendar = {
     "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",
+    "relative flex size-9 items-center justify-center whitespace-nowrap rounded-lg justify-self-center",
     "border border-transparent p-0 text-sm font-normal text-foreground",
     "outline-offset-2 duration-150 [transition-property:color,background-color,border-radius,box-shadow]",
     "disabled:pointer-events-none data-[unavailable]:pointer-events-none data-focus-visible:z-10 data-[hovered]:bg-hover selected:bg-brand data-[hovered]:text-foreground selected:text-brand-foreground data-[unavailable]:line-through",
@@ -259,11 +262,11 @@ var Calendar = {
     "focus-visible:util-focus-ring outline-none",
     "cursor-pointer",
     "hover:bg-hover",
-    "aria-[current=true]:bg-brand aria-[current=true]:text-brand-foreground aria-[current=true]:shadow-sm aria-[current=true]:shadow-black/5 aria-[current=true]:hover:bg-brand/90"
+    "aria-[current=true]:bg-brand aria-[current=true]:text-brand-foreground aria-[current=true]:shadow-xs aria-[current=true]:hover:bg-brand/90"
   ]),
   select: (0, import_system7.cva)([
     "[&svg]:text-muted-foreground/80",
-    "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",
+    "flex w-full px-3 py-2 rounded-lg shadow-xs border border-input bg-background text-sm text-foreground transition-shadow",
     "focus-visible:util-focus-ring outline-none",
     "h-input",
     "disabled:cursor-not-allowed disabled:text-disabled-foreground disabled:bg-disabled",
@@ -293,18 +296,25 @@ var import_system10 = require("@marigold/system");
 var ContextualHelp = {
   trigger: (0, import_system10.cva)(
     [
-      "inline-flex items-center p-0.5 transition-colors justify-center hover:text-hover-foreground cursor-pointer hover:bg-gray-200 rounded-md focus:bg-gray-200"
+      "inline-flex items-center justify-center rounded-full transition-[color,box-shadow] hover:bg-hover hover:text-foreground",
+      "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+      "focus-visible:util-focus-ring outline-none",
+      "cursor-pointer"
     ],
     {
       variants: {
+        variant: {
+          help: "",
+          info: ""
+        },
         size: {
-          small: "w-4 h-4",
-          medium: "w-5 h-5",
-          large: "w-8 h-8"
+          default: "size-button [&_svg]:size-4",
+          small: "size-button-small [&_svg]:size-3.5",
+          large: "size-button-large [&_svg]:size-5"
         }
       },
       defaultVariants: {
-        size: "medium"
+        size: "default"
       }
     }
   ),
@@ -321,7 +331,7 @@ var import_system12 = require("@marigold/system");
 
 // src/components/Input.styles.ts
 var import_system11 = 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 group-read-only/field:bg-muted";
+var inputContainer = "flex w-full px-3 py-2 rounded-lg shadow-xs border border-input bg-background text-sm text-foreground transition-shadow group-read-only/field:bg-muted";
 var inputDisabled = "disabled:cursor-not-allowed disabled:text-disabled-foreground disabled:bg-disabled";
 var inputInvalid = "group-invalid/field:border-destructive group-invalid/field:focus:border-destructive group-invalid/field:focus:ring-destructive/20";
 var inputReadOnly = "group-read-only/field:bg-muted";
@@ -503,7 +513,8 @@ var Image = (0, import_system23.cva)();
 var import_system24 = require("@marigold/system");
 var Label = {
   container: (0, import_system24.cva)([
-    "text-sm font-medium leading-4 text-foreground",
+    "flex items-center gap-1",
+    "text-sm font-medium leading-none text-foreground",
     "group-disabled/field:cursor-not-allowed group-disabled/field:text-disabled-foreground"
   ]),
   indicator: (0, import_system24.cva)(
@@ -531,9 +542,9 @@ var Link = (0, import_system25.cva)(
 // src/components/List.styles.ts
 var import_system26 = require("@marigold/system");
 var List = {
-  ul: (0, import_system26.cva)("ml-6 list-inside list-disc py-3"),
-  ol: (0, import_system26.cva)("ml-6 list-inside list-decimal py-3"),
-  item: (0, import_system26.cva)("pt-3")
+  ul: (0, import_system26.cva)("ml-6 list-outside list-disc"),
+  ol: (0, import_system26.cva)("ml-6 list-outside list-decimal"),
+  item: (0, import_system26.cva)("not-first:pt-3")
 };
 
 // src/components/ListBox.styles.ts
@@ -544,7 +555,7 @@ var ListBox = {
   ]),
   list: (0, import_system27.cva)(["bg-background p-1 text-sm outline-0"]),
   item: (0, import_system27.cva)([
-    "relative flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-foreground cursor-pointer",
+    "relative flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-foreground",
     "[&_.selection-indicator>svg]:invisible [&_.selection-indicator>svg]:block",
     "selected:bg-selected selected:[&_.selection-indicator>svg]:visible",
     "hover:bg-hover hover:text-hover-foreground",
@@ -561,9 +572,14 @@ var ListBox = {
 // src/components/Menu.styles.ts
 var import_system28 = require("@marigold/system");
 var Menu = {
-  container: (0, import_system28.cva)(["text-foreground z-50 overflow-hidden rounded-md p-1"]),
+  container: (0, import_system28.cva)([
+    "text-foreground z-50 overflow-hidden rounded-md p-1 outline-none"
+  ]),
   item: (0, import_system28.cva)([
-    "focus:bg-focus focus:text-foreground relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none disabled:text-disabled-foreground"
+    "relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-foreground outline-hidden select-none",
+    "focus:bg-focus",
+    "disabled:text-disabled-foreground",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4 [&_svg]:opacity-60"
   ]),
   section: (0, import_system28.cva)(
     "text-muted-foreground px-2 py-1.5 text-xs font-medium border-t border-t-border in-first:border-t-0"
@@ -571,14 +587,14 @@ var Menu = {
   button: (0, import_system28.cva)(
     [
       "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow]",
-      "[&_svg]:shrink-0",
+      "[&_svg]:shrink-0 [&_svg]:pointer-events-none",
       "focus-visible:util-focus-ring outline-none disabled:util-disabled",
       "cursor-pointer"
     ],
     {
       variants: {
         variant: {
-          secondary: "border border-input bg-background shadow-sm shadow-black/5 hover:bg-hover hover:text-foreground expanded:bg-hover",
+          secondary: "border border-input bg-background shadow-xs hover:bg-hover hover:text-foreground expanded:bg-hover",
           ghost: "hover:bg-hover hover:text-foreground expanded:bg-hover"
         },
         size: {
@@ -627,7 +643,7 @@ var import_system30 = require("@marigold/system");
 var MultiSelect = {
   field: (0, import_system30.cva)("space-y-2"),
   container: (0, import_system30.cva)([
-    "bg-background shadow-sm shadow-black/5 border",
+    "bg-background shadow-xs border",
     "px-3 text-sm text-foreground transition-shadow",
     "border border-input rounded-lg outline-hidden",
     "aria-disabled:bg-disabled aria-disabled:text-disabled-foreground aria-disabled:hover:border-input aria-disabled:border-input aria-disabled:cursor-not-allowed",
@@ -677,7 +693,7 @@ var NumberField = {
     "has-focus-visible:util-focus-ring outline-none",
     inputInvalid,
     inputReadOnly,
-    "border border-input text-sm shadow-sm shadow-black/5 transition-shadow",
+    "border border-input text-sm shadow-xs transition-shadow",
     "data-invalid:data-[focus-within]:border-destructive data-invalid:data-[focus-within]:ring-destructive/20"
   ]),
   stepper: (0, import_system31.cva)([
@@ -715,7 +731,7 @@ var Radio = {
   ]),
   radio: (0, import_system33.cva)([
     "aspect-square size-4 rounded-full",
-    "border border-input shadow-sm shadow-black/5",
+    "border border-input shadow-xs",
     "group-focus-visible/radio:util-focus-ring outline-none",
     "group-disabled/radio:group-selected/radio:bg-disabled group-disabled/radio:border-disabled! group-disabled/radio:cursor-not-allowed",
     "group-selected/radio:border-brand group-selected/radio:bg-brand group-selected/radio:text-brand-foreground"
@@ -725,26 +741,21 @@ var Radio = {
 
 // src/components/Pagination.styles.ts
 var import_system34 = require("@marigold/system");
+var button = "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colorsfocus-visible:util-focus-ring outline-nonedisabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground[&_svg]:pointer-events-none [&_svg]:shrink-0hover:bg-hover hover:text-hover-foregroundcursor-pointer";
 var Pagination = {
+  container: (0, import_system34.cva)("flex items-center justify-center space-x-2"),
   navigationButton: (0, import_system34.cva)([
-    "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors",
-    "focus-visible:util-focus-ring outline-none",
+    button,
     "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",
-    "cursor-pointer"
+    "h-9 py-2 gap-1 px-2.5"
   ]),
   pageButton: (0, import_system34.cva)([
-    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-colors bg-background size-9",
-    "focus-visible:util-focus-ring outline-none",
-    "disabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground",
-    "[&_svg]:pointer-events-none [&_svg]:shrink-0",
-    "data-[selected=true]:border data-[selected=true]:border-input data-[selected=true]:shadow-xs",
-    "hover:bg-hover hover:text-hover-foreground",
-    "cursor-pointer"
+    button,
+    "bg-background size-9",
+    "data-[selected=true]:border data-[selected=true]:border-input data-[selected=true]:shadow-xs"
   ]),
-  icon: (0, import_system34.cva)("h-4 w-4")
+  icon: (0, import_system34.cva)("h-4 w-4"),
+  ellipsis: (0, import_system34.cva)("text-text-base flex h-8 w-8 items-center justify-center")
 };
 
 // src/components/ProgressCycle.styles.ts
@@ -859,7 +870,7 @@ var Switch = {
   ]),
   thumb: (0, import_system39.cva)([
     "pointer-events-none block size-5 rounded-full",
-    "bg-background shadow-sm shadow-black/5",
+    "bg-background shadow-xs",
     "ring-0 transition-transform duration-150 ease-out-quint",
     "group-selected/switch:translate-x-4 translate-x-0"
   ])
@@ -926,13 +937,25 @@ var Table = {
     [
       "border-b border-border transition-colors",
       "focus-visible:outline-2 outline-offset-2 outline-ring/70",
-      "aria-[selected=true]:bg-muted hover:bg-transparent data-disabled:cursor-not-allowed"
+      "data-disabled:cursor-not-allowed"
     ],
     {
       variants: {
         variant: {
-          default: "",
-          grid: "[&>:not(:last-child)]:border-r [&>:not(:last-child)]:border-border"
+          default: "aria-[selected=true]:bg-muted",
+          grid: "aria-[selected=true]:bg-muted [&>:not(:last-child)]:border-r [&>:not(:last-child)]:border-border",
+          admin: [
+            "bg-access-admin",
+            "[&_td:first-child]:relative [&_td:first-child]:pl-4",
+            '[&_td:first-child:before]:content-[""] [&_td:first-child:before]:absolute [&_td:first-child:before]:top-0 [&_td:first-child:before]:bottom-0 [&_td:first-child:before]:left-0 [&_td:first-child:before]:w-1',
+            "[&_td:first-child:before]:bg-access-admin-foreground"
+          ],
+          master: [
+            "bg-access-master",
+            "[&_td:first-child]:relative [&_td:first-child]:pl-4",
+            '[&_td:first-child:before]:content-[""] [&_td:first-child:before]:absolute [&_td:first-child:before]:top-0 [&_td:first-child:before]:bottom-0 [&_td:first-child:before]:left-0 [&_td:first-child:before]:w-1',
+            "[&_td:first-child:before]:bg-access-master-foreground"
+          ]
         }
       },
       defaultVariants: {
@@ -940,20 +963,17 @@ var Table = {
       }
     }
   ),
-  cell: (0, import_system40.cva)(
-    ["p-3", "focus-visible:outline-2 outline-offset-2 outline-ring/70"],
-    {
-      variants: {
-        variant: {
-          default: "[&:has([type=checkbox])]:pr-0",
-          grid: ""
-        }
-      },
-      defaultVariants: {
-        variant: "default"
+  cell: (0, import_system40.cva)("p-3 focus-visible:outline-2 outline-offset-2 outline-ring/70", {
+    variants: {
+      variant: {
+        default: "[&:has([type=checkbox])]:pr-0",
+        grid: ""
       }
+    },
+    defaultVariants: {
+      variant: "default"
     }
-  )
+  })
 };
 
 // src/components/Tabs.styles.ts
@@ -965,7 +985,7 @@ var Tabs = {
     "flex items-center p-0.5 h-auto gap-2 border-b border-border px-0 py-1"
   ]),
   tab: (0, import_system41.cva)([
-    "relative inline-flex items-center justify-center rounded-sm px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-colors",
+    "relative inline-flex items-center justify-center gap-1 rounded-sm px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-colors",
     "[&_svg]:shrink-0",
     "focus-visible:util-focus-ring outline-none",
     "hover:bg-hover hover:text-foreground",
@@ -996,7 +1016,8 @@ var Tag = {
     "size-4",
     "disabled:bg-disabled disabled:text-disabled-foreground disabled:cursor-not-allowed"
   ]),
-  listItems: (0, import_system42.cva)("flex flex-wrap items-center gap-1")
+  listItems: (0, import_system42.cva)("flex flex-wrap items-center gap-1 mb-0")
+  // mb-0 prevents whitespace when the hidden field is rendered
 };
 
 // src/components/TextArea.styles.ts
@@ -1042,12 +1063,72 @@ var Text = (0, import_system44.cva)("", {
   }
 });
 
-// src/components/Tooltip.styles.ts
+// src/components/Toast.styles.ts
 var import_system45 = require("@marigold/system");
+var Toast = {
+  toast: (0, import_system45.cva)([
+    "z-50",
+    "max-w-sm w-full pointer-events-auto overflow-hidden rounded-md border shadow-lg bg-background text-foreground border-border",
+    "grid grid-cols-[auto_1fr_auto] grid-rows-[auto_auto] gap-x-1 gap-y-0",
+    '[grid-template-areas:"icon_title_close""icon_description_description"] focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+    "p-4"
+  ]),
+  title: (0, import_system45.cva)([
+    "text-sm font-medium",
+    "[grid-area:title]",
+    "flex items-center mb-0"
+  ]),
+  description: (0, import_system45.cva)([
+    "text-muted-foreground text-sm",
+    "[grid-area:description] mt-0"
+  ]),
+  closeButton: (0, import_system45.cva)([
+    "[grid-area:close] row-end-1",
+    "ml-2",
+    "flex items-center justify-center",
+    "size-5 rounded transition-[color,box-shadow] outline-none",
+    "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] text-muted-foreground hover:text-hover-foreground"
+  ]),
+  icon: (0, import_system45.cva)(
+    [
+      "[grid-area:icon]",
+      "flex items-center justify-center",
+      "h-5 w-5 leading-none"
+    ],
+    {
+      variants: {
+        variant: {
+          default: "",
+          success: "text-success-muted-accent",
+          warning: "text-warning-muted-accent",
+          info: "text-info-muted-accent",
+          error: "text-destructive-muted-accent"
+        }
+      },
+      defaultVariants: {
+        variant: "default"
+      }
+    }
+  ),
+  content: (0, import_system45.cva)(["contents"]),
+  "bottom-left": (0, import_system45.cva)(["fixed bottom-4 left-4 flex flex-col-reverse"]),
+  "bottom-right": (0, import_system45.cva)(["fixed bottom-4 right-4 flex flex-col-reverse"]),
+  "top-left": (0, import_system45.cva)(["fixed top-4 left-4 flex flex-col"]),
+  "top-right": (0, import_system45.cva)(["fixed top-4 right-4 flex flex-col"]),
+  top: (0, import_system45.cva)([
+    "fixed top-4 left-1/2 right-auto -translate-x-1/2 flex flex-col items-center w-auto align-middle"
+  ]),
+  bottom: (0, import_system45.cva)([
+    "fixed bottom-4 left-1/2 right-auto -translate-x-1/2 flex flex-col-reverse items-center w-auto align-middle"
+  ])
+};
+
+// src/components/Tooltip.styles.ts
+var import_system46 = require("@marigold/system");
 var Tooltip = {
-  container: (0, import_system45.cva)(
+  container: (0, import_system46.cva)(
     [
-      "text-brand-foreground bg-brand relative z-50 max-w-70 rounded-md border border-brand px-3 py-1.5 text-sm ",
+      "relative z-50 max-w-70 rounded-md border px-3 py-1.5 text-sm",
       "placement-top:mb-2",
       "placement-bottom:mt-2",
       "placement-right:ml-2",
@@ -1056,7 +1137,7 @@ var Tooltip = {
     {
       variants: {
         variant: {
-          default: "",
+          default: "text-brand-foreground bg-brand border-brand",
           white: "text-secondary-foreground border-border bg-white"
         }
       },
@@ -1065,9 +1146,8 @@ var Tooltip = {
       }
     }
   ),
-  arrow: (0, import_system45.cva)(
+  arrow: (0, import_system46.cva)(
     [
-      "fill-brand  stroke-brand",
       // right
       "data-[placement=right]:[&_svg]:rotate-90",
       // left
@@ -1078,7 +1158,7 @@ var Tooltip = {
     {
       variants: {
         variant: {
-          default: "",
+          default: "fill-brand  stroke-brand",
           white: "fill-white  stroke-border "
         }
       },
@@ -1090,13 +1170,13 @@ var Tooltip = {
 };
 
 // src/components/Underlay.styles.ts
-var import_system46 = require("@marigold/system");
-var Underlay = (0, import_system46.cva)("bg-black/80 px-4");
+var import_system47 = require("@marigold/system");
+var Underlay = (0, import_system47.cva)("bg-black/80 px-4");
 
 // src/components/XLoader.styles.ts
-var import_system47 = require("@marigold/system");
+var import_system48 = require("@marigold/system");
 var XLoader = {
-  container: (0, import_system47.cva)("grid place-items-center text-brand", {
+  container: (0, import_system48.cva)("grid place-items-center text-brand", {
     variants: {
       variant: {
         default: "",
@@ -1113,7 +1193,7 @@ var XLoader = {
       size: "default"
     }
   }),
-  loader: (0, import_system47.cva)("size-full", {
+  loader: (0, import_system48.cva)("size-full", {
     variants: {
       variant: {
         default: "",
@@ -1130,7 +1210,31 @@ var XLoader = {
       size: "default"
     }
   }),
-  label: (0, import_system47.cva)("text-current text-sm")
+  label: (0, import_system48.cva)("text-current text-sm")
+};
+
+// src/components/Breadcrumbs.styles.ts
+var import_system49 = require("@marigold/system");
+var Breadcrumbs = {
+  container: (0, import_system49.cva)(["flex flex-wrap items-center"], {
+    variants: {
+      variant: {
+        default: "text-foreground"
+      },
+      size: {
+        small: "text-xs gap-1.5",
+        default: "text-sm gap-1.5",
+        large: "text-base gap-1.5"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }),
+  item: (0, import_system49.cva)("inline-flex items-center gap-1.5 whitespace-nowrap "),
+  link: (0, import_system49.cva)("hover:underline cursor-pointer"),
+  current: (0, import_system49.cva)("font-medium")
 };
 
 // src/theme.ts