@marigold/components 7.3.3 → 7.4.0

package/dist/index.mjs

@@ -617,6 +617,7 @@ import { jsx as jsx15 } from "react/jsx-runtime";
 var _ListBox = forwardRef6(
   ({ variant, size, ...props }, ref) => {
     const classNames2 = useClassNames6({ component: "ListBox", variant, size });
+    const listBoxProps = { shouldSelectOnPressUp: false };
     return /* @__PURE__ */ jsx15(ListBoxContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx15("div", { className: classNames2.container, children: /* @__PURE__ */ jsx15(
       ListBox,
       {
@@ -626,6 +627,7 @@ var _ListBox = forwardRef6(
           classNames2.list
         ),
         ref,
+        ...listBoxProps,
         children: props.children
       }
     ) }) });
@@ -656,24 +658,17 @@ import { ModalOverlay } from "react-aria-components";
 import { cn as cn11, useClassNames as useClassNames7 } from "@marigold/system";
 
 // src/Provider/index.ts
-import { useTheme as useTheme2, ThemeProvider as ThemeProvider2 } from "@marigold/system";
+import { useTheme, ThemeProvider as ThemeProvider2 } from "@marigold/system";
 import { I18nProvider } from "@react-aria/i18n";
 
 // src/Provider/MarigoldProvider.tsx
-import { OverlayProvider } from "@react-aria/overlays";
-import {
-  ThemeProvider,
-  defaultTheme,
-  useTheme
-} from "@marigold/system";
+import { ThemeProvider } from "@marigold/system";
 import { jsx as jsx16 } from "react/jsx-runtime";
 function MarigoldProvider({
   children,
   theme
 }) {
-  const outerTheme = useTheme();
-  const isTopLevel = outerTheme === defaultTheme;
-  return /* @__PURE__ */ jsx16(ThemeProvider, { theme, children: isTopLevel ? /* @__PURE__ */ jsx16(OverlayProvider, { children }) : children });
+  return /* @__PURE__ */ jsx16(ThemeProvider, { theme, children });
 }
 
 // src/Overlay/Underlay.tsx
@@ -827,6 +822,7 @@ _Autocomplete.Item = _ListBox.Item;
 // src/ComboBox/ComboBox.tsx
 import { forwardRef as forwardRef10 } from "react";
 import { ComboBox as ComboBox2 } from "react-aria-components";
+import { useClassNames as useClassNames10 } from "@marigold/system";
 
 // src/Button/Button.tsx
 import { forwardRef as forwardRef9 } from "react";
@@ -884,11 +880,13 @@ var _ComboBox = forwardRef10(
       onInputChange: onChange,
       ...rest
     };
+    const classNames2 = useClassNames10({ component: "ComboBox", variant, size });
+    console.log(classNames2);
     return /* @__PURE__ */ jsxs9(FieldBase, { as: ComboBox2, ref, ...props, children: [
       /* @__PURE__ */ jsx21(
         _Input,
         {
-          action: /* @__PURE__ */ jsx21(_Button, { className: "absolute right-2 size-4 border-none bg-transparent p-0", children: /* @__PURE__ */ jsx21(ChevronDown, { className: "size-4" }) })
+          action: /* @__PURE__ */ jsx21(_Button, { className: classNames2, children: /* @__PURE__ */ jsx21(ChevronDown, { className: "size-4" }) })
         }
       ),
       /* @__PURE__ */ jsx21(_Popover, { children: /* @__PURE__ */ jsx21(_ListBox, { children }) })
@@ -898,10 +896,10 @@ var _ComboBox = forwardRef10(
 _ComboBox.Item = _ListBox.Item;
 
 // src/Badge/Badge.tsx
-import { useClassNames as useClassNames10 } from "@marigold/system";
+import { useClassNames as useClassNames11 } from "@marigold/system";
 import { jsx as jsx22 } from "react/jsx-runtime";
 var Badge = ({ variant, size, children, ...props }) => {
-  const classNames2 = useClassNames10({ component: "Badge", variant, size });
+  const classNames2 = useClassNames11({ component: "Badge", variant, size });
   return /* @__PURE__ */ jsx22("div", { ...props, className: classNames2, children });
 };
 
@@ -935,10 +933,10 @@ var Breakout = ({
 };
 
 // src/Body/Body.tsx
-import { useClassNames as useClassNames11 } from "@marigold/system";
+import { useClassNames as useClassNames12 } from "@marigold/system";
 import { jsx as jsx24 } from "react/jsx-runtime";
 var Body = ({ children, variant, size, ...props }) => {
-  const classNames2 = useClassNames11({ component: "Body", variant, size });
+  const classNames2 = useClassNames12({ component: "Body", variant, size });
   return /* @__PURE__ */ jsx24("section", { ...props, className: classNames2, children });
 };
 
@@ -953,7 +951,7 @@ import {
   paddingSpaceX,
   paddingSpaceY,
   paddingTop,
-  useClassNames as useClassNames12
+  useClassNames as useClassNames13
 } from "@marigold/system";
 import { jsx as jsx25 } from "react/jsx-runtime";
 var Card = ({
@@ -970,7 +968,7 @@ var Card = ({
   pr,
   ...props
 }) => {
-  const classNames2 = useClassNames12({ component: "Card", variant, size });
+  const classNames2 = useClassNames13({ component: "Card", variant, size });
   return /* @__PURE__ */ jsx25(
     "div",
     {
@@ -1019,7 +1017,7 @@ var Center = ({
 // src/Checkbox/Checkbox.tsx
 import { forwardRef as forwardRef11 } from "react";
 import { Checkbox } from "react-aria-components";
-import { cn as cn17, useClassNames as useClassNames13 } from "@marigold/system";
+import { cn as cn17, useClassNames as useClassNames14 } from "@marigold/system";
 import { Fragment as Fragment2, jsx as jsx27, jsxs as jsxs10 } from "react/jsx-runtime";
 var CheckMark = () => /* @__PURE__ */ jsx27("svg", { viewBox: "0 0 12 10", children: /* @__PURE__ */ jsx27(
   "path",
@@ -1079,7 +1077,7 @@ var _Checkbox = forwardRef11(
       defaultSelected: defaultChecked,
       ...rest
     };
-    const classNames2 = useClassNames13({ component: "Checkbox", variant, size });
+    const classNames2 = useClassNames14({ component: "Checkbox", variant, size });
     return /* @__PURE__ */ jsx27(
       Checkbox,
       {
@@ -1108,7 +1106,7 @@ var _Checkbox = forwardRef11(
 
 // src/Checkbox/CheckboxGroup.tsx
 import { CheckboxGroup } from "react-aria-components";
-import { useClassNames as useClassNames14 } from "@marigold/system";
+import { useClassNames as useClassNames15 } from "@marigold/system";
 import { jsx as jsx28 } from "react/jsx-runtime";
 var _CheckboxGroup = ({
   children,
@@ -1120,7 +1118,7 @@ var _CheckboxGroup = ({
   error,
   ...rest
 }) => {
-  const classNames2 = useClassNames14({
+  const classNames2 = useClassNames15({
     component: "Checkbox",
     variant,
     size,
@@ -1226,7 +1224,7 @@ var Container = ({
 // src/Dialog/Dialog.tsx
 import { useContext as useContext4 } from "react";
 import { Dialog, OverlayTriggerStateContext } from "react-aria-components";
-import { cn as cn21, useClassNames as useClassNames16 } from "@marigold/system";
+import { cn as cn21, useClassNames as useClassNames17 } from "@marigold/system";
 
 // src/Headline/Headline.tsx
 import { Heading } from "react-aria-components";
@@ -1235,8 +1233,8 @@ import {
   createVar as createVar8,
   getColor,
   textAlign,
-  useClassNames as useClassNames15,
-  useTheme as useTheme3
+  useClassNames as useClassNames16,
+  useTheme as useTheme2
 } from "@marigold/system";
 import { jsx as jsx31 } from "react/jsx-runtime";
 var _Headline = ({
@@ -1248,8 +1246,8 @@ var _Headline = ({
   level = 1,
   ...props
 }) => {
-  const theme = useTheme3();
-  const classNames2 = useClassNames15({
+  const theme = useTheme2();
+  const classNames2 = useClassNames16({
     component: "Headline",
     variant,
     size: size != null ? size : `level-${level}`
@@ -1363,7 +1361,7 @@ var _Dialog = ({
   isNonModal,
   ...props
 }) => {
-  const classNames2 = useClassNames16({ component: "Dialog", variant, size });
+  const classNames2 = useClassNames17({ component: "Dialog", variant, size });
   let state = useContext4(OverlayTriggerStateContext);
   let children = props.children;
   if (typeof children === "function") {
@@ -1389,18 +1387,18 @@ _Dialog.Headline = DialogHeadline;
 
 // src/Divider/Divider.tsx
 import { Separator } from "react-aria-components";
-import { useClassNames as useClassNames17 } from "@marigold/system";
+import { useClassNames as useClassNames18 } from "@marigold/system";
 import { jsx as jsx35 } from "react/jsx-runtime";
 var _Divider = ({ variant, ...props }) => {
-  const classNames2 = useClassNames17({ component: "Divider", variant });
+  const classNames2 = useClassNames18({ component: "Divider", variant });
   return /* @__PURE__ */ jsx35(Separator, { className: classNames2, ...props });
 };
 
 // src/Footer/Footer.tsx
-import { useClassNames as useClassNames18 } from "@marigold/system";
+import { useClassNames as useClassNames19 } from "@marigold/system";
 import { jsx as jsx36 } from "react/jsx-runtime";
 var Footer = ({ children, variant, size, ...props }) => {
-  const classNames2 = useClassNames18({ component: "Footer", variant, size });
+  const classNames2 = useClassNames19({ component: "Footer", variant, size });
   return /* @__PURE__ */ jsx36("footer", { ...props, className: classNames2, children });
 };
 
@@ -1409,10 +1407,10 @@ import { Form } from "react-aria-components";
 
 // src/Header/Header.tsx
 import { Header } from "react-aria-components";
-import { useClassNames as useClassNames19 } from "@marigold/system";
+import { useClassNames as useClassNames20 } from "@marigold/system";
 import { jsx as jsx37 } from "react/jsx-runtime";
 var _Header = ({ variant, size, ...props }) => {
-  const classNames2 = useClassNames19({
+  const classNames2 = useClassNames20({
     component: "Header",
     variant,
     size
@@ -1425,7 +1423,7 @@ import {
   cn as cn22,
   objectFit,
   objectPosition,
-  useClassNames as useClassNames20
+  useClassNames as useClassNames21
 } from "@marigold/system";
 import { jsx as jsx38 } from "react/jsx-runtime";
 var Image = ({
@@ -1435,7 +1433,7 @@ var Image = ({
   position = "none",
   ...props
 }) => {
-  const classNames2 = useClassNames20({ component: "Image", variant, size });
+  const classNames2 = useClassNames21({ component: "Image", variant, size });
   return /* @__PURE__ */ jsx38(
     "img",
     {
@@ -1488,7 +1486,7 @@ import { DateField } from "react-aria-components";
 
 // src/DateField/DateInput.tsx
 import { DateInput, Group } from "react-aria-components";
-import { useClassNames as useClassNames21 } from "@marigold/system";
+import { useClassNames as useClassNames22 } from "@marigold/system";
 
 // src/DateField/DateSegment.tsx
 import { DateSegment } from "react-aria-components";
@@ -1524,7 +1522,7 @@ var _DateSegment = ({ segment, ...props }) => {
 // src/DateField/DateInput.tsx
 import { jsx as jsx41, jsxs as jsxs14 } from "react/jsx-runtime";
 var _DateInput = ({ variant, size, action, ...props }) => {
-  const classNames2 = useClassNames21({ component: "DateField", variant, size });
+  const classNames2 = useClassNames22({ component: "DateField", variant, size });
   return /* @__PURE__ */ jsxs14(Group, { className: classNames2.field, children: [
     /* @__PURE__ */ jsx41(DateInput, { className: "flex flex-1 items-center", ...props, children: (segment) => /* @__PURE__ */ jsx41(_DateSegment, { className: classNames2.segment, segment }) }),
     action ? action : /* @__PURE__ */ jsx41("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx41(
@@ -1578,7 +1576,7 @@ var _DateField = forwardRef13(
 // src/Calendar/Calendar.tsx
 import { useState } from "react";
 import { Calendar } from "react-aria-components";
-import { cn as cn28, useClassNames as useClassNames26 } from "@marigold/system";
+import { cn as cn28, useClassNames as useClassNames27 } from "@marigold/system";
 
 // src/Calendar/CalendarGrid.tsx
 import {
@@ -1586,7 +1584,7 @@ import {
   CalendarGrid,
   CalendarGridBody
 } from "react-aria-components";
-import { cn as cn25, useClassNames as useClassNames23 } from "@marigold/system";
+import { cn as cn25, useClassNames as useClassNames24 } from "@marigold/system";
 
 // src/Calendar/CalendarGridHeader.tsx
 import { startOfWeek, today } from "@internationalized/date";
@@ -1594,7 +1592,7 @@ import { useContext as useContext5, useMemo } from "react";
 import { CalendarStateContext } from "react-aria-components";
 import { useCalendarGrid } from "@react-aria/calendar";
 import { useDateFormatter, useLocale } from "@react-aria/i18n";
-import { useClassNames as useClassNames22 } from "@marigold/system";
+import { useClassNames as useClassNames23 } from "@marigold/system";
 import { jsx as jsx43 } from "react/jsx-runtime";
 function CalendarGridHeader(props) {
   const state = useContext5(CalendarStateContext);
@@ -1612,14 +1610,14 @@ function CalendarGridHeader(props) {
       return dayFormatter.format(dateDay);
     });
   }, [locale, state.timeZone, dayFormatter]);
-  const classNames2 = useClassNames22({ component: "Calendar" });
+  const classNames2 = useClassNames23({ component: "Calendar" });
   return /* @__PURE__ */ jsx43("thead", { ...headerProps, children: /* @__PURE__ */ jsx43("tr", { children: weekDays.map((day, index) => /* @__PURE__ */ jsx43("th", { className: classNames2.calendarHeader, children: day.substring(0, 2) }, index)) }) });
 }
 
 // src/Calendar/CalendarGrid.tsx
 import { jsx as jsx44, jsxs as jsxs15 } from "react/jsx-runtime";
 var _CalendarGrid = () => {
-  const classNames2 = useClassNames23({ component: "Calendar" });
+  const classNames2 = useClassNames24({ component: "Calendar" });
   return /* @__PURE__ */ jsxs15(CalendarGrid, { className: classNames2.calendarGrid, children: [
     /* @__PURE__ */ jsx44(CalendarGridHeader, {}),
     /* @__PURE__ */ jsx44(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx44(
@@ -1639,7 +1637,7 @@ var _CalendarGrid = () => {
 import { useContext as useContext6 } from "react";
 import { CalendarStateContext as CalendarStateContext2 } from "react-aria-components";
 import { ChevronDown as ChevronDown2 } from "@marigold/icons";
-import { cn as cn26, useClassNames as useClassNames24 } from "@marigold/system";
+import { cn as cn26, useClassNames as useClassNames25 } from "@marigold/system";
 
 // src/Calendar/useFormattedMonths.tsx
 import { useDateFormatter as useDateFormatter2 } from "@react-aria/i18n";
@@ -1667,7 +1665,7 @@ function CalendarListBox({
   const state = useContext6(CalendarStateContext2);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
   const buttonStyles = "flex items-center justify-between gap-1 overflow-hidden";
-  const { select: selectClassNames } = useClassNames24({ component: "Select" });
+  const { select: selectClassNames } = useClassNames25({ component: "Select" });
   return /* @__PURE__ */ jsxs16(
     "button",
     {
@@ -1686,11 +1684,11 @@ function CalendarListBox({
 // src/Calendar/MonthControls.tsx
 import { Button as Button3 } from "react-aria-components";
 import { ChevronLeft, ChevronRight } from "@marigold/icons";
-import { cn as cn27, useClassNames as useClassNames25 } from "@marigold/system";
+import { cn as cn27, useClassNames as useClassNames26 } from "@marigold/system";
 import { jsx as jsx46, jsxs as jsxs17 } from "react/jsx-runtime";
 function MonthControls() {
-  const classNames2 = useClassNames25({ component: "Calendar" });
-  const buttonClassNames = useClassNames25({ component: "Button" });
+  const classNames2 = useClassNames26({ component: "Calendar" });
+  const buttonClassNames = useClassNames26({ component: "Button" });
   return /* @__PURE__ */ jsxs17(
     "div",
     {
@@ -1853,7 +1851,7 @@ var _Calendar = ({
     isReadOnly: readOnly,
     ...rest
   };
-  const classNames2 = useClassNames26({ component: "Calendar" });
+  const classNames2 = useClassNames27({ component: "Calendar" });
   const [selectedDropdown, setSelectedDropdown] = useState();
   const ViewMap = {
     month: /* @__PURE__ */ jsx49(MonthListBox_default, { setSelectedDropdown }),
@@ -1897,7 +1895,7 @@ var _Calendar = ({
 
 // src/DatePicker/DatePicker.tsx
 import { DatePicker } from "react-aria-components";
-import { useClassNames as useClassNames27 } from "@marigold/system";
+import { useClassNames as useClassNames28 } from "@marigold/system";
 import { jsx as jsx50, jsxs as jsxs19 } from "react/jsx-runtime";
 var _DatePicker = ({
   disabled,
@@ -1917,7 +1915,7 @@ var _DatePicker = ({
     isOpen: open,
     ...rest
   };
-  const classNames2 = useClassNames27({
+  const classNames2 = useClassNames28({
     component: "DatePicker",
     size,
     variant
@@ -1974,11 +1972,11 @@ var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx51(
 // src/Link/Link.tsx
 import { forwardRef as forwardRef14 } from "react";
 import { Link } from "react-aria-components";
-import { useClassNames as useClassNames28 } from "@marigold/system";
+import { useClassNames as useClassNames29 } from "@marigold/system";
 import { jsx as jsx52 } from "react/jsx-runtime";
 var _Link = forwardRef14(
   ({ variant, size, disabled, children, ...props }, ref) => {
-    const classNames2 = useClassNames28({
+    const classNames2 = useClassNames29({
       component: "Link",
       variant,
       size
@@ -1988,7 +1986,7 @@ var _Link = forwardRef14(
 );
 
 // src/List/List.tsx
-import { useClassNames as useClassNames29 } from "@marigold/system";
+import { useClassNames as useClassNames30 } from "@marigold/system";
 
 // src/List/Context.ts
 import { createContext as createContext4, useContext as useContext9 } from "react";
@@ -2012,30 +2010,30 @@ var List = ({
   ...props
 }) => {
   const Component = as;
-  const classNames2 = useClassNames29({ component: "List", variant, size });
+  const classNames2 = useClassNames30({ component: "List", variant, size });
   return /* @__PURE__ */ jsx54(Component, { ...props, className: classNames2[as], children: /* @__PURE__ */ jsx54(ListContext.Provider, { value: { classNames: classNames2.item }, children }) });
 };
 List.Item = ListItem;
 
 // src/Menu/Menu.tsx
 import { Menu, MenuTrigger } from "react-aria-components";
-import { useClassNames as useClassNames32 } from "@marigold/system";
+import { useClassNames as useClassNames33 } from "@marigold/system";
 
 // src/Menu/MenuItem.tsx
 import { MenuItem } from "react-aria-components";
-import { useClassNames as useClassNames30 } from "@marigold/system";
+import { useClassNames as useClassNames31 } from "@marigold/system";
 import { jsx as jsx55 } from "react/jsx-runtime";
 var _MenuItem = ({ children, ...props }) => {
-  const classNames2 = useClassNames30({ component: "Menu" });
+  const classNames2 = useClassNames31({ component: "Menu" });
   return /* @__PURE__ */ jsx55(MenuItem, { ...props, className: classNames2.item, children });
 };
 
 // src/Menu/MenuSection.tsx
 import { Section as Section2 } from "react-aria-components";
-import { useClassNames as useClassNames31 } from "@marigold/system";
+import { useClassNames as useClassNames32 } from "@marigold/system";
 import { jsx as jsx56, jsxs as jsxs20 } from "react/jsx-runtime";
 var _MenuSection = ({ children, title, ...props }) => {
-  const className = useClassNames31({ component: "Menu" });
+  const className = useClassNames32({ component: "Menu" });
   return /* @__PURE__ */ jsxs20(Section2, { ...props, children: [
     /* @__PURE__ */ jsx56(_Header, { className: className.section, children: title }),
     children
@@ -2053,7 +2051,7 @@ var _Menu = ({
   open,
   ...props
 }) => {
-  const classNames2 = useClassNames32({ component: "Menu", variant, size });
+  const classNames2 = useClassNames33({ component: "Menu", variant, size });
   return /* @__PURE__ */ jsxs21(MenuTrigger, { ...props, children: [
     /* @__PURE__ */ jsx57(_Button, { variant: "menu", disabled, children: label }),
     /* @__PURE__ */ jsx57(_Popover, { open, children: /* @__PURE__ */ jsx57(Menu, { ...props, className: classNames2.container, children }) })
@@ -2064,7 +2062,7 @@ _Menu.Section = _MenuSection;
 
 // src/Menu/ActionMenu.tsx
 import { Menu as Menu2, MenuTrigger as MenuTrigger2 } from "react-aria-components";
-import { SVG as SVG4, useClassNames as useClassNames33 } from "@marigold/system";
+import { SVG as SVG4, useClassNames as useClassNames34 } from "@marigold/system";
 import { jsx as jsx58, jsxs as jsxs22 } from "react/jsx-runtime";
 var ActionMenu = ({
   variant,
@@ -2072,7 +2070,7 @@ var ActionMenu = ({
   disabled,
   ...props
 }) => {
-  const classNames2 = useClassNames33({ component: "Menu", variant, size });
+  const classNames2 = useClassNames34({ component: "Menu", variant, size });
   return /* @__PURE__ */ jsxs22(MenuTrigger2, { children: [
     /* @__PURE__ */ jsx58(_Button, { variant: "menu", size: "small", disabled, children: /* @__PURE__ */ jsx58(SVG4, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx58("path", { d: "M12.0117 7.47656C13.2557 7.47656 14.2734 6.45879 14.2734 5.21484C14.2734 3.9709 13.2557 2.95312 12.0117 2.95312C10.7678 2.95312 9.75 3.9709 9.75 5.21484C9.75 6.45879 10.7678 7.47656 12.0117 7.47656ZM12.0117 9.73828C10.7678 9.73828 9.75 10.7561 9.75 12C9.75 13.2439 10.7678 14.2617 12.0117 14.2617C13.2557 14.2617 14.2734 13.2439 14.2734 12C14.2734 10.7561 13.2557 9.73828 12.0117 9.73828ZM12.0117 16.5234C10.7678 16.5234 9.75 17.5412 9.75 18.7852C9.75 20.0291 10.7678 21.0469 12.0117 21.0469C13.2557 21.0469 14.2734 20.0291 14.2734 18.7852C14.2734 17.5412 13.2557 16.5234 12.0117 16.5234Z" }) }) }),
     /* @__PURE__ */ jsx58(_Popover, { children: /* @__PURE__ */ jsx58(Menu2, { ...props, className: classNames2.container, children: props.children }) })
@@ -2080,7 +2078,8 @@ var ActionMenu = ({
 };
 
 // src/Message/Message.tsx
-import { cn as cn30, useClassNames as useClassNames34 } from "@marigold/system";
+import { forwardRef as forwardRef15 } from "react";
+import { cn as cn30, useClassNames as useClassNames35 } from "@marigold/system";
 import { jsx as jsx59, jsxs as jsxs23 } from "react/jsx-runtime";
 var icons = {
   success: () => /* @__PURE__ */ jsx59(
@@ -2148,42 +2147,42 @@ var icons = {
     }
   )
 };
-var Message = ({
-  messageTitle,
-  variant = "info",
-  size,
-  children,
-  ...props
-}) => {
-  const classNames2 = useClassNames34({ component: "Message", variant, size });
-  const Icon4 = icons[variant];
-  return /* @__PURE__ */ jsxs23(
-    "div",
-    {
-      className: cn30(
-        "grid auto-rows-min grid-cols-[min-content_auto] gap-1",
-        classNames2.container
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx59("div", { className: cn30("col-span-1 h-5 w-5 self-center", classNames2.icon), children: /* @__PURE__ */ jsx59(Icon4, {}) }),
-        /* @__PURE__ */ jsx59(
-          "div",
-          {
-            className: cn30("col-start-2 row-start-1 self-center", classNames2.title),
-            children: messageTitle
-          }
+var Message = forwardRef15(
+  ({ messageTitle, variant = "info", size, children, ...props }, ref) => {
+    const classNames2 = useClassNames35({ component: "Message", variant, size });
+    const Icon4 = icons[variant];
+    return /* @__PURE__ */ jsxs23(
+      "div",
+      {
+        className: cn30(
+          "grid auto-rows-min grid-cols-[min-content_auto] gap-1",
+          classNames2.container
         ),
-        /* @__PURE__ */ jsx59("div", { className: cn30("col-start-2", classNames2.content), children })
-      ]
-    }
-  );
-};
+        ref,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx59("div", { className: cn30("col-span-1 h-5 w-5 self-center", classNames2.icon), children: /* @__PURE__ */ jsx59(Icon4, {}) }),
+          /* @__PURE__ */ jsx59(
+            "div",
+            {
+              className: cn30(
+                "col-start-2 row-start-1 self-center",
+                classNames2.title
+              ),
+              children: messageTitle
+            }
+          ),
+          /* @__PURE__ */ jsx59("div", { className: cn30("col-start-2", classNames2.content), children })
+        ]
+      }
+    );
+  }
+);
 
 // src/NumberField/NumberField.tsx
-import { forwardRef as forwardRef15 } from "react";
+import { forwardRef as forwardRef16 } from "react";
 import { Group as Group2, NumberField } from "react-aria-components";
-import { cn as cn32, useClassNames as useClassNames35 } from "@marigold/system";
+import { cn as cn32, useClassNames as useClassNames36 } from "@marigold/system";
 
 // src/NumberField/StepButton.tsx
 import { Button as Button4 } from "react-aria-components";
@@ -2225,7 +2224,7 @@ var _StepButton = ({ direction, className, ...props }) => {
 
 // src/NumberField/NumberField.tsx
 import { jsx as jsx61, jsxs as jsxs24 } from "react/jsx-runtime";
-var _NumberField = forwardRef15(
+var _NumberField = forwardRef16(
   ({
     variant,
     size,
@@ -2236,7 +2235,7 @@ var _NumberField = forwardRef15(
     hideStepper,
     ...rest
   }, ref) => {
-    const classNames2 = useClassNames35({
+    const classNames2 = useClassNames36({
       component: "NumberField",
       size,
       variant
@@ -2281,10 +2280,10 @@ var _NumberField = forwardRef15(
 
 // src/Radio/Radio.tsx
 import {
-  forwardRef as forwardRef16
+  forwardRef as forwardRef17
 } from "react";
 import { Radio } from "react-aria-components";
-import { cn as cn34, useClassNames as useClassNames37 } from "@marigold/system";
+import { cn as cn34, useClassNames as useClassNames38 } from "@marigold/system";
 
 // src/Radio/Context.ts
 import { createContext as createContext5, useContext as useContext10 } from "react";
@@ -2295,7 +2294,7 @@ var useRadioGroupContext = () => useContext10(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
 import { RadioGroup } from "react-aria-components";
-import { cn as cn33, useClassNames as useClassNames36 } from "@marigold/system";
+import { cn as cn33, useClassNames as useClassNames37 } from "@marigold/system";
 import { jsx as jsx62 } from "react/jsx-runtime";
 var _RadioGroup = ({
   variant,
@@ -2312,7 +2311,7 @@ var _RadioGroup = ({
   width,
   ...rest
 }) => {
-  const classNames2 = useClassNames36({ component: "Radio", variant, size });
+  const classNames2 = useClassNames37({ component: "Radio", variant, size });
   const props = {
     isDisabled: disabled,
     isReadOnly: readOnly,
@@ -2364,10 +2363,10 @@ var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx63(
     children: checked ? /* @__PURE__ */ jsx63(Dot, {}) : null
   }
 );
-var _Radio = forwardRef16(
+var _Radio = forwardRef17(
   ({ value, disabled, width, children, ...props }, ref) => {
     const { variant, size, width: groupWidth } = useRadioGroupContext();
-    const classNames2 = useClassNames37({
+    const classNames2 = useClassNames38({
       component: "Radio",
       variant: variant || props.variant,
       size: size || props.size
@@ -2405,10 +2404,10 @@ var _Radio = forwardRef16(
 _Radio.Group = _RadioGroup;
 
 // src/SearchField/SearchField.tsx
-import { forwardRef as forwardRef17 } from "react";
+import { forwardRef as forwardRef18 } from "react";
 import { SearchField } from "react-aria-components";
 import { jsx as jsx64 } from "react/jsx-runtime";
-var _SearchField = forwardRef17(
+var _SearchField = forwardRef18(
   ({ disabled, required, readOnly, error, action, ...rest }, ref) => {
     const props = {
       ...rest,
@@ -2428,15 +2427,15 @@ var _SearchField = forwardRef17(
 );
 
 // src/Select/Select.tsx
-import { forwardRef as forwardRef18 } from "react";
+import { forwardRef as forwardRef19 } from "react";
 import {
   Button as Button5,
   Select,
   SelectValue
 } from "react-aria-components";
-import { cn as cn35, useClassNames as useClassNames38 } from "@marigold/system";
+import { cn as cn35, useClassNames as useClassNames39 } from "@marigold/system";
 import { jsx as jsx65, jsxs as jsxs26 } from "react/jsx-runtime";
-var _Select = forwardRef18(
+var _Select = forwardRef19(
   ({
     disabled,
     required,
@@ -2456,7 +2455,7 @@ var _Select = forwardRef18(
       onSelectionChange: onChange,
       ...rest
     };
-    const classNames2 = useClassNames38({ component: "Select", variant, size });
+    const classNames2 = useClassNames39({ component: "Select", variant, size });
     return /* @__PURE__ */ jsxs26(FieldBase, { isOpen: true, as: Select, ref, ...props, children: [
       /* @__PURE__ */ jsxs26(
         Button5,
@@ -2497,7 +2496,7 @@ var Scrollable = ({
 );
 
 // src/Slider/Slider.tsx
-import { forwardRef as forwardRef19 } from "react";
+import { forwardRef as forwardRef20 } from "react";
 import {
   Slider,
   SliderOutput,
@@ -2507,10 +2506,10 @@ import {
 import {
   cn as cn37,
   width as twWidth3,
-  useClassNames as useClassNames39
+  useClassNames as useClassNames40
 } from "@marigold/system";
 import { jsx as jsx67, jsxs as jsxs27 } from "react/jsx-runtime";
-var _Slider = forwardRef19(
+var _Slider = forwardRef20(
   ({
     thumbLabels,
     variant,
@@ -2519,7 +2518,7 @@ var _Slider = forwardRef19(
     disabled,
     ...rest
   }, ref) => {
-    const classNames2 = useClassNames39({
+    const classNames2 = useClassNames40({
       component: "Slider",
       variant,
       size
@@ -2600,15 +2599,15 @@ var Stack = ({
 };
 
 // src/Switch/Switch.tsx
-import { forwardRef as forwardRef20 } from "react";
+import { forwardRef as forwardRef21 } from "react";
 import { Switch } from "react-aria-components";
 import {
   cn as cn39,
   width as twWidth4,
-  useClassNames as useClassNames40
+  useClassNames as useClassNames41
 } from "@marigold/system";
 import { jsx as jsx70, jsxs as jsxs28 } from "react/jsx-runtime";
-var _Switch = forwardRef20(
+var _Switch = forwardRef21(
   ({
     variant,
     size,
@@ -2619,7 +2618,7 @@ var _Switch = forwardRef20(
     readOnly,
     ...rest
   }, ref) => {
-    const classNames2 = useClassNames40({ component: "Switch", size, variant });
+    const classNames2 = useClassNames41({ component: "Switch", size, variant });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
@@ -2678,7 +2677,7 @@ import {
   Row,
   useTableState
 } from "@react-stately/table";
-import { cn as cn45, useClassNames as useClassNames42 } from "@marigold/system";
+import { cn as cn45, useClassNames as useClassNames43 } from "@marigold/system";
 
 // src/Table/Context.tsx
 import { createContext as createContext6, useContext as useContext11 } from "react";
@@ -2872,13 +2871,13 @@ import { useFocusRing as useFocusRing5 } from "@react-aria/focus";
 import { useHover as useHover2 } from "@react-aria/interactions";
 import { useTableRow } from "@react-aria/table";
 import { mergeProps as mergeProps6 } from "@react-aria/utils";
-import { cn as cn43, useClassNames as useClassNames41, useStateProps as useStateProps5 } from "@marigold/system";
+import { cn as cn43, useClassNames as useClassNames42, useStateProps as useStateProps5 } from "@marigold/system";
 import { jsx as jsx77 } from "react/jsx-runtime";
 var TableRow = ({ children, row }) => {
   const ref = useRef8(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size } = row.props;
-  const classNames2 = useClassNames41({
+  const classNames2 = useClassNames42({
     component: "Table",
     variant: variant || ctx.variant,
     size: size || ctx.size
@@ -2988,7 +2987,7 @@ var Table = ({
     props.selectionBehavior !== "replace"
   });
   const { gridProps } = useTable(props, state, tableRef);
-  const classNames2 = useClassNames42({
+  const classNames2 = useClassNames43({
     component: "Table",
     variant,
     size
@@ -3070,8 +3069,8 @@ import {
   textAlign as textAlign2,
   textSize,
   textStyle,
-  useClassNames as useClassNames43,
-  useTheme as useTheme4
+  useClassNames as useClassNames44,
+  useTheme as useTheme3
 } from "@marigold/system";
 import { jsx as jsx80 } from "react/jsx-runtime";
 var Text2 = ({
@@ -3086,8 +3085,8 @@ var Text2 = ({
   children,
   ...props
 }) => {
-  const theme = useTheme4();
-  const classNames2 = useClassNames43({
+  const theme = useTheme3();
+  const classNames2 = useClassNames44({
     component: "Text",
     variant,
     size
@@ -3119,11 +3118,11 @@ var Text2 = ({
 };
 
 // src/TextArea/TextArea.tsx
-import { forwardRef as forwardRef21 } from "react";
+import { forwardRef as forwardRef22 } from "react";
 import { TextArea, TextField } from "react-aria-components";
-import { useClassNames as useClassNames44 } from "@marigold/system";
+import { useClassNames as useClassNames45 } from "@marigold/system";
 import { jsx as jsx81 } from "react/jsx-runtime";
-var _TextArea = forwardRef21(
+var _TextArea = forwardRef22(
   ({
     variant,
     size,
@@ -3134,7 +3133,7 @@ var _TextArea = forwardRef21(
     rows,
     ...rest
   }, ref) => {
-    const classNames2 = useClassNames44({ component: "TextArea", variant, size });
+    const classNames2 = useClassNames45({ component: "TextArea", variant, size });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
@@ -3147,10 +3146,10 @@ var _TextArea = forwardRef21(
 );
 
 // src/TextField/TextField.tsx
-import { forwardRef as forwardRef22 } from "react";
+import { forwardRef as forwardRef23 } from "react";
 import { TextField as TextField2 } from "react-aria-components";
 import { jsx as jsx82 } from "react/jsx-runtime";
-var _TextField = forwardRef22(
+var _TextField = forwardRef23(
   ({
     variant,
     size,
@@ -3204,7 +3203,7 @@ var Tiles = ({
 
 // src/Tooltip/Tooltip.tsx
 import { OverlayArrow, Tooltip } from "react-aria-components";
-import { cn as cn48, useClassNames as useClassNames45 } from "@marigold/system";
+import { cn as cn48, useClassNames as useClassNames46 } from "@marigold/system";
 
 // src/Tooltip/TooltipTrigger.tsx
 import { TooltipTrigger } from "react-aria-components";
@@ -3232,7 +3231,7 @@ var _Tooltip = ({ children, variant, size, open, ...rest }) => {
     ...rest,
     isOpen: open
   };
-  const classNames2 = useClassNames45({ component: "Tooltip", variant, size });
+  const classNames2 = useClassNames46({ component: "Tooltip", variant, size });
   return /* @__PURE__ */ jsxs31(Tooltip, { ...props, className: cn48("group/tooltip", classNames2.container), children: [
     /* @__PURE__ */ jsx85(OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ jsx85("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx85("path", { d: "M0 0 L4 4 L8 0" }) }) }),
     children
@@ -3242,22 +3241,31 @@ _Tooltip.Trigger = _TooltipTrigger;
 
 // src/TagGroup/Tag.tsx
 import { Button as Button6, Tag } from "react-aria-components";
-import { cn as cn49, useClassNames as useClassNames47 } from "@marigold/system";
+import { cn as cn49, useClassNames as useClassNames48 } from "@marigold/system";
 
 // src/TagGroup/TagGroup.tsx
 import { TagGroup, TagList } from "react-aria-components";
-import { useClassNames as useClassNames46 } from "@marigold/system";
+import { useClassNames as useClassNames47 } from "@marigold/system";
 import { jsx as jsx86 } from "react/jsx-runtime";
 var _TagGroup = ({
   width,
   items,
   children,
+  renderEmptyState,
   variant,
   size,
   ...rest
 }) => {
-  const classNames2 = useClassNames46({ component: "Tag", variant, size });
-  return /* @__PURE__ */ jsx86(FieldBase, { as: TagGroup, ...rest, children: /* @__PURE__ */ jsx86(TagList, { items, className: classNames2.listItems, children }) });
+  const classNames2 = useClassNames47({ component: "Tag", variant, size });
+  return /* @__PURE__ */ jsx86(FieldBase, { as: TagGroup, ...rest, children: /* @__PURE__ */ jsx86(
+    TagList,
+    {
+      items,
+      className: classNames2.listItems,
+      renderEmptyState,
+      children
+    }
+  ) });
 };
 
 // src/TagGroup/Tag.tsx
@@ -3267,7 +3275,7 @@ var CloseButton2 = ({ className }) => {
 };
 var _Tag = ({ variant, size, children, ...props }) => {
   let textValue = typeof children === "string" ? children : void 0;
-  const classNames2 = useClassNames47({ component: "Tag", variant, size });
+  const classNames2 = useClassNames48({ component: "Tag", variant, size });
   return /* @__PURE__ */ jsx87(Tag, { textValue, ...props, className: classNames2.tag, children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs32(Fragment7, { children: [
     children,
     allowsRemoving && /* @__PURE__ */ jsx87(
@@ -3284,10 +3292,10 @@ _Tag.Group = _TagGroup;
 import { VisuallyHidden } from "@react-aria/visually-hidden";
 
 // src/XLoader/XLoader.tsx
-import { forwardRef as forwardRef23 } from "react";
+import { forwardRef as forwardRef24 } from "react";
 import { SVG as SVG5 } from "@marigold/system";
 import { jsx as jsx88, jsxs as jsxs33 } from "react/jsx-runtime";
-var XLoader = forwardRef23((props, ref) => /* @__PURE__ */ jsxs33(
+var XLoader = forwardRef24((props, ref) => /* @__PURE__ */ jsxs33(
   SVG5,
   {
     id: "XLoader",
@@ -3502,7 +3510,7 @@ var XLoader = forwardRef23((props, ref) => /* @__PURE__ */ jsxs33(
 
 // src/Tabs/Tabs.tsx
 import { Tabs } from "react-aria-components";
-import { useClassNames as useClassNames48 } from "@marigold/system";
+import { useClassNames as useClassNames49 } from "@marigold/system";
 
 // src/Tabs/Context.ts
 import { createContext as createContext7, useContext as useContext12 } from "react";
@@ -3559,7 +3567,7 @@ var _Tabs = ({ disabled, variant, size = "medium", ...rest }) => {
     isDisabled: disabled,
     ...rest
   };
-  const classNames2 = useClassNames48({
+  const classNames2 = useClassNames49({
     component: "Tabs",
     size,
     variant
@@ -3641,5 +3649,5 @@ export {
   useFieldGroupContext,
   useListData,
   usePortalContainer,
-  useTheme2 as useTheme
+  useTheme
 };