@marigold/components 0.4.0 → 0.6.0

package/dist/index.js

@@ -59,7 +59,6 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
 var src_exports = {};
 __export(src_exports, {
   ActionGroup: () => ActionGroup,
-  Alert: () => Alert,
   Badge: () => Badge,
   Box: () => import_system.Box,
   Button: () => Button,
@@ -88,9 +87,13 @@ __export(src_exports, {
   Select: () => Select,
   Slider: () => Slider,
   Stack: () => Stack,
+  Switch: () => Switch,
   Text: () => Text,
   Textarea: () => Textarea,
   ThemeProvider: () => import_system5.ThemeProvider,
+  Tooltip: () => Tooltip,
+  TooltipContext: () => TooltipContext,
+  TooltipTrigger: () => TooltipTrigger,
   ValidationMessage: () => ValidationMessage,
   VisuallyHidden: () => import_visually_hidden2.VisuallyHidden,
   useDialogButtonProps: () => useDialogButtonProps,
@@ -98,11 +101,28 @@ __export(src_exports, {
 });
 
 // src/ActionGroup/ActionGroup.tsx
-var import_react3 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
 
 // src/Inline/Inline.tsx
-var import_react = __toESM(require("react"));
-var import_react_keyed_flatten_children = __toESM(require("react-keyed-flatten-children"));
+var import_react2 = __toESM(require("react"));
+
+// src/utils/flatten-children.ts
+var import_react = require("react");
+var import_react_is = require("react-is");
+var flattenChildren = (children, depth = 0, keys = []) => import_react.Children.toArray(children).reduce((acc, node) => {
+  if ((0, import_react_is.isFragment)(node)) {
+    acc.push.apply(acc, flattenChildren(node.props.children, depth + 1, keys.concat(node.key)));
+  } else {
+    if ((0, import_react.isValidElement)(node)) {
+      acc.push((0, import_react.cloneElement)(node, {
+        key: keys.concat(String(node.key)).join(".")
+      }));
+    } else if (typeof node === "string" || typeof node === "number") {
+      acc.push(node);
+    }
+  }
+  return acc;
+}, []);
 
 // src/Box.ts
 var import_system = require("@marigold/system");
@@ -123,16 +143,15 @@ var Inline = (_a) => {
     "align",
     "children"
   ]);
-  return /* @__PURE__ */ import_react.default.createElement(import_system.Box, __spreadValues({
+  return /* @__PURE__ */ import_react2.default.createElement(import_system.Box, __spreadValues({
+    __baseCSS: { gap: space, flexWrap: "wrap" },
     display: "inline-flex",
-    css: { "> * + *": { pl: space } },
     alignItems: ALIGNMENT[align]
-  }, props), import_react.Children.map((0, import_react_keyed_flatten_children.default)(children), (child) => /* @__PURE__ */ import_react.default.createElement(import_system.Box, null, import_react.default.cloneElement(child, {}, child.props.children))));
+  }, props), import_react2.Children.map(flattenChildren(children), (child) => child));
 };
 
 // src/Stack/Stack.tsx
-var import_react2 = __toESM(require("react"));
-var import_react_keyed_flatten_children2 = __toESM(require("react-keyed-flatten-children"));
+var import_react3 = __toESM(require("react"));
 var ALIGNMENT2 = {
   left: "flex-start",
   center: "center",
@@ -148,12 +167,12 @@ var Stack = (_a) => {
     "align",
     "children"
   ]);
-  return /* @__PURE__ */ import_react2.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react3.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
     display: "flex",
     flexDirection: "column",
     alignItems: ALIGNMENT2[align],
     css: { "> * + *": { pt: space } }
-  }), import_react2.Children.map((0, import_react_keyed_flatten_children2.default)(children), (child) => /* @__PURE__ */ import_react2.default.createElement(import_system.Box, null, import_react2.default.cloneElement(child, {}, child.props.children))));
+  }), import_react3.Children.map(flattenChildren(children), (child) => /* @__PURE__ */ import_react3.default.createElement(import_system.Box, null, import_react3.default.cloneElement(child, {}, child.props.children))));
 };
 
 // src/ActionGroup/ActionGroup.tsx
@@ -167,50 +186,13 @@ var ActionGroup = (_a) => {
     "verticalAlignment",
     "children"
   ]);
-  return verticalAlignment ? /* @__PURE__ */ import_react3.default.createElement(Stack, __spreadValues({
+  return verticalAlignment ? /* @__PURE__ */ import_react4.default.createElement(Stack, __spreadValues({
     space
-  }, props), children) : /* @__PURE__ */ import_react3.default.createElement(Inline, __spreadValues({
+  }, props), children) : /* @__PURE__ */ import_react4.default.createElement(Inline, __spreadValues({
     space
   }, props), children);
 };
 
-// src/Alert/Alert.tsx
-var import_react4 = __toESM(require("react"));
-var import_icons = require("@marigold/icons");
-var ICON_MAP = {
-  success: import_icons.Check,
-  warning: import_icons.Notification,
-  error: import_icons.Exclamation
-};
-var Alert = (_a) => {
-  var _b = _a, {
-    variant = "success",
-    children
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "children"
-  ]);
-  const Icon = ICON_MAP[variant];
-  return /* @__PURE__ */ import_react4.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
-    display: "flex",
-    variant: `alert.${variant}`
-  }), /* @__PURE__ */ import_react4.default.createElement(import_system.Box, {
-    display: "inline-block",
-    alignItems: "center",
-    width: "32px",
-    height: "32px",
-    bg: variant
-  }, /* @__PURE__ */ import_react4.default.createElement(import_system.Box, {
-    as: Icon,
-    size: 12,
-    color: "#fff",
-    bg: variant,
-    m: 10
-  })), /* @__PURE__ */ import_react4.default.createElement(import_system.Box, {
-    mx: "16px"
-  }, children));
-};
-
 // src/Badge/Badge.tsx
 var import_react5 = __toESM(require("react"));
 var Badge = (_a) => {
@@ -395,15 +377,16 @@ function useToggleState(props) {
 }
 
 // src/Checkbox/Checkbox.tsx
-var import_icons3 = require("@marigold/icons");
+var import_icons2 = require("@marigold/icons");
 
-// src/Checkbox/CheckboxIcons.tsx
+// src/Checkbox/CheckboxIcon.tsx
 var import_react9 = __toESM(require("react"));
 var import_system2 = require("@marigold/system");
 var CheckboxIcon = ({
   variant = "",
   checked = false,
   disabled = false,
+  indeterminated,
   error = false
 }) => {
   const conditionalStates = disabled ? {
@@ -426,7 +409,13 @@ var CheckboxIcon = ({
     height: "15px",
     rx: "1.5",
     variant: (0, import_system2.conditional)(`checkbox.${variant}`, conditionalStates)
-  }), checked && /* @__PURE__ */ import_react9.default.createElement(import_system.Box, {
+  }), checked && indeterminated && /* @__PURE__ */ import_react9.default.createElement(import_system.Box, {
+    __baseCSS: { fill: "gray00" },
+    as: "path",
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M13.5 17.0402H2.5V15.4688H13.5V17.0402V17.0402Z"
+  }), checked && !indeterminated && /* @__PURE__ */ import_react9.default.createElement(import_system.Box, {
     __baseCSS: { fill: "gray00" },
     as: "path",
     fillRule: "evenodd",
@@ -437,7 +426,7 @@ var CheckboxIcon = ({
 
 // src/Label/Label.tsx
 var import_react10 = __toESM(require("react"));
-var import_icons2 = require("@marigold/icons");
+var import_icons = require("@marigold/icons");
 var LabelBase = (_a) => {
   var _b = _a, {
     variant = "above",
@@ -468,10 +457,9 @@ var Label = (_a) => {
     as: "span",
     display: "inline-flex",
     alignItems: "center"
-  }, /* @__PURE__ */ import_react10.default.createElement(LabelBase, __spreadValues({}, props), children), required && /* @__PURE__ */ import_react10.default.createElement(import_system.Box, {
-    as: import_icons2.Required,
+  }, /* @__PURE__ */ import_react10.default.createElement(LabelBase, __spreadValues({}, props), children), required && /* @__PURE__ */ import_react10.default.createElement(import_icons.Required, {
     size: 16,
-    css: { color: "error" }
+    fill: "error"
   })) : /* @__PURE__ */ import_react10.default.createElement(LabelBase, __spreadValues({}, props), children);
 };
 
@@ -498,38 +486,38 @@ var ValidationMessage = (_a) => {
 
 // src/Checkbox/Checkbox.tsx
 var CheckboxInput = (_a) => {
-  var _b = _a, { error } = _b, props = __objRest(_b, ["error"]);
+  var _b = _a, {
+    error,
+    indeterminated = false
+  } = _b, props = __objRest(_b, [
+    "error",
+    "indeterminated"
+  ]);
   const state = useToggleState(props);
   const ref = import_react12.default.useRef(null);
   const { inputProps } = (0, import_checkbox.useCheckbox)(props, state, ref);
   const { focusProps } = (0, import_focus.useFocusRing)();
+  const _a2 = props, { children } = _a2, restProps = __objRest(_a2, ["children"]);
   return /* @__PURE__ */ import_react12.default.createElement(import_system.Box, {
     pr: "xsmall"
-  }, /* @__PURE__ */ import_react12.default.createElement(import_visually_hidden.VisuallyHidden, null, /* @__PURE__ */ import_react12.default.createElement(import_system.Box, __spreadValues(__spreadProps(__spreadValues(__spreadValues({
-    as: "input",
-    type: "checkbox",
-    disabled: props.disabled
-  }, inputProps), focusProps), {
+  }, /* @__PURE__ */ import_react12.default.createElement(import_visually_hidden.VisuallyHidden, null, /* @__PURE__ */ import_react12.default.createElement("input", __spreadValues(__spreadProps(__spreadValues(__spreadValues({}, inputProps), focusProps), {
     ref
-  }), props))), /* @__PURE__ */ import_react12.default.createElement(CheckboxIcon, {
+  }), restProps))), /* @__PURE__ */ import_react12.default.createElement(CheckboxIcon, {
     checked: props.checked,
     variant: props.variant,
     disabled: props.disabled,
+    indeterminated,
     error
   }));
 };
 var Checkbox = (_a) => {
   var _b = _a, {
-    label,
     required,
     labelVariant = "inline",
-    error,
     errorMessage
   } = _b, props = __objRest(_b, [
-    "label",
     "required",
     "labelVariant",
-    "error",
     "errorMessage"
   ]);
   return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement(import_system.Box, {
@@ -541,10 +529,9 @@ var Checkbox = (_a) => {
     required,
     variant: `label.${labelVariant}`,
     color: props.disabled ? "disabled" : "text"
-  }, /* @__PURE__ */ import_react12.default.createElement(import_system.Box, __spreadValues({
-    as: CheckboxInput,
-    error
-  }, props)), label), error && errorMessage && /* @__PURE__ */ import_react12.default.createElement(ValidationMessage, null, /* @__PURE__ */ import_react12.default.createElement(import_icons3.Exclamation, {
+  }, /* @__PURE__ */ import_react12.default.createElement(CheckboxInput, __spreadValues({
+    error: props.error
+  }, props)), props.children), props.error && errorMessage && /* @__PURE__ */ import_react12.default.createElement(ValidationMessage, null, /* @__PURE__ */ import_react12.default.createElement(import_icons2.Exclamation, {
     size: 16
   }), errorMessage));
 };
@@ -572,7 +559,6 @@ var Column = (_a) => {
 
 // src/Columns/Columns.tsx
 var import_react14 = __toESM(require("react"));
-var import_react_keyed_flatten_children3 = __toESM(require("react-keyed-flatten-children"));
 var import_system3 = require("@marigold/system");
 var useAlignment = (direction) => {
   switch (direction) {
@@ -615,7 +601,7 @@ var Columns = (_a) => {
     flexWrap: "wrap",
     alignItems,
     justifyContent
-  }, props), import_react14.Children.map((0, import_react_keyed_flatten_children3.default)(children), (child) => {
+  }, props), import_react14.Children.map(flattenChildren(children), (child) => {
     return import_react14.default.cloneElement(child, {}, /* @__PURE__ */ import_react14.default.createElement(import_system.Box, {
       css: { p: `${spaceValue / 2}px` }
     }, child.props.children));
@@ -627,7 +613,7 @@ var import_react17 = __toESM(require("react"));
 var import_overlays2 = require("@react-stately/overlays");
 var import_overlays3 = require("@react-aria/overlays");
 var import_button2 = require("@react-aria/button");
-var import_icons4 = require("@marigold/icons");
+var import_icons3 = require("@marigold/icons");
 
 // src/Text/Text.tsx
 var import_react15 = __toESM(require("react"));
@@ -636,28 +622,34 @@ var Text = (0, import_react15.forwardRef)((_a, ref) => {
     as = "span",
     variant = "body",
     children,
-    className,
     align,
     color,
     cursor,
+    size,
     outline,
     userSelect
   } = _b, props = __objRest(_b, [
     "as",
     "variant",
     "children",
-    "className",
     "align",
     "color",
     "cursor",
+    "size",
     "outline",
     "userSelect"
   ]);
   return /* @__PURE__ */ import_react15.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
     as,
     variant: `text.${variant}`,
-    css: { textAlign: align, color, cursor, outline, userSelect },
-    className,
+    css: {
+      textAlign: align,
+      fontSize: size,
+      color,
+      cursor,
+      outline,
+      userSelect
+    },
     ref
   }), children);
 });
@@ -774,7 +766,7 @@ var Dialog = (_a) => {
     }
   }, closeButtonProps), {
     ref: closeButtonRef
-  }), /* @__PURE__ */ import_react17.default.createElement(import_icons4.Close, {
+  }), /* @__PURE__ */ import_react17.default.createElement(import_icons3.Close, {
     size: 16
   }))))));
 };
@@ -806,7 +798,7 @@ var Divider = (_a) => {
 // src/Field/Field.tsx
 var import_react19 = __toESM(require("react"));
 var import_textfield = require("@react-aria/textfield");
-var import_icons5 = require("@marigold/icons");
+var import_icons4 = require("@marigold/icons");
 var Field = (_a) => {
   var _b = _a, {
     type = "text",
@@ -838,7 +830,7 @@ var Field = (_a) => {
     variant: `input.${variant}`
   }, inputProps), {
     ref
-  }), props)), error && errorMessage && /* @__PURE__ */ import_react19.default.createElement(ValidationMessage, __spreadValues({}, errorMessageProps), /* @__PURE__ */ import_react19.default.createElement(import_icons5.Exclamation, {
+  }), props)), error && errorMessage && /* @__PURE__ */ import_react19.default.createElement(ValidationMessage, __spreadValues({}, errorMessageProps), /* @__PURE__ */ import_react19.default.createElement(import_icons4.Exclamation, {
     size: 16
   }), errorMessage));
 };
@@ -921,16 +913,13 @@ var import_react23 = __toESM(require("react"));
 var MenuItem = (_a) => {
   var _b = _a, {
     variant = "default",
-    className,
     children
   } = _b, props = __objRest(_b, [
     "variant",
-    "className",
     "children"
   ]);
   return /* @__PURE__ */ import_react23.default.createElement(import_system.Box, {
-    variant: `menuItem.${variant}`,
-    className
+    variant: `menuItem.${variant}`
   }, /* @__PURE__ */ import_react23.default.createElement(Link, __spreadValues({
     variant: "menuItemLink"
   }, props), children));
@@ -938,7 +927,7 @@ var MenuItem = (_a) => {
 
 // src/Message/Message.tsx
 var import_react24 = __toESM(require("react"));
-var import_icons6 = require("@marigold/icons");
+var import_icons5 = require("@marigold/icons");
 var Message = (_a) => {
   var _b = _a, {
     messageTitle,
@@ -951,12 +940,12 @@ var Message = (_a) => {
     "className",
     "children"
   ]);
-  var icon = /* @__PURE__ */ import_react24.default.createElement(import_icons6.Info, null);
+  var icon = /* @__PURE__ */ import_react24.default.createElement(import_icons5.Info, null);
   if (variant === "warning") {
-    icon = /* @__PURE__ */ import_react24.default.createElement(import_icons6.Notification, null);
+    icon = /* @__PURE__ */ import_react24.default.createElement(import_icons5.Notification, null);
   }
   if (variant === "error") {
-    icon = /* @__PURE__ */ import_react24.default.createElement(import_icons6.Exclamation, null);
+    icon = /* @__PURE__ */ import_react24.default.createElement(import_icons5.Exclamation, null);
   }
   return /* @__PURE__ */ import_react24.default.createElement(import_system.Box, __spreadValues({
     display: "inline-block",
@@ -995,7 +984,7 @@ function MarigoldProvider({
 
 // src/Radio/Radio.tsx
 var import_react27 = __toESM(require("react"));
-var import_icons7 = require("@marigold/icons");
+var import_icons6 = require("@marigold/icons");
 var import_focus3 = require("@react-aria/focus");
 var import_visually_hidden3 = require("@react-aria/visually-hidden");
 
@@ -1038,12 +1027,13 @@ var RadioIcon = ({
 var RadioInput = (_a) => {
   var _b = _a, { error } = _b, props = __objRest(_b, ["error"]);
   const { focusProps } = (0, import_focus3.useFocusRing)();
+  const _a2 = props, { children } = _a2, restProps = __objRest(_a2, ["children"]);
   return /* @__PURE__ */ import_react27.default.createElement(import_system.Box, {
     pr: "xsmall"
   }, /* @__PURE__ */ import_react27.default.createElement(import_visually_hidden3.VisuallyHidden, null, /* @__PURE__ */ import_react27.default.createElement("input", __spreadValues(__spreadValues({
     type: "radio",
     disabled: props.disabled
-  }, focusProps), props))), /* @__PURE__ */ import_react27.default.createElement(RadioIcon, {
+  }, focusProps), restProps))), /* @__PURE__ */ import_react27.default.createElement(RadioIcon, {
     variant: props.variant,
     disabled: props.disabled,
     checked: props.checked,
@@ -1052,16 +1042,12 @@ var RadioInput = (_a) => {
 };
 var Radio = (_a) => {
   var _b = _a, {
-    label,
     required,
     labelVariant = "inline",
-    error,
     errorMessage
   } = _b, props = __objRest(_b, [
-    "label",
     "required",
     "labelVariant",
-    "error",
     "errorMessage"
   ]);
   return /* @__PURE__ */ import_react27.default.createElement(import_react27.default.Fragment, null, /* @__PURE__ */ import_react27.default.createElement(import_system.Box, {
@@ -1072,63 +1058,44 @@ var Radio = (_a) => {
     css: props.disabled ? { color: "disabled", ":hover": { cursor: "not-allowed" } } : { color: "text", ":hover": { cursor: "pointer" } }
   }, /* @__PURE__ */ import_react27.default.createElement(import_system.Box, __spreadValues({
     as: RadioInput,
-    error
-  }, props)), label), error && errorMessage && /* @__PURE__ */ import_react27.default.createElement(ValidationMessage, null, /* @__PURE__ */ import_react27.default.createElement(import_icons7.Exclamation, {
+    error: props.error
+  }, props)), props.children), props.error && errorMessage && /* @__PURE__ */ import_react27.default.createElement(ValidationMessage, null, /* @__PURE__ */ import_react27.default.createElement(import_icons6.Exclamation, {
     size: 16
   }), errorMessage));
 };
 
-// src/Slider/Slider.tsx
-var import_react28 = __toESM(require("react"));
-var Slider = (_a) => {
-  var _b = _a, {
-    variant = "",
-    className
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "className"
-  ]);
-  return /* @__PURE__ */ import_react28.default.createElement(import_system.Box, __spreadValues({
-    as: "input",
-    type: "range",
-    css: { verticalAlign: "middle" },
-    variant: `slider.${variant}`,
-    className
-  }, props));
-};
-
 // src/Select/Select.tsx
-var import_react33 = __toESM(require("react"));
+var import_react32 = __toESM(require("react"));
 var import_select = require("@react-stately/select");
 var import_button3 = require("@react-aria/button");
-var import_utils3 = require("@react-aria/utils");
+var import_utils6 = require("@react-aria/utils");
 var import_focus5 = require("@react-aria/focus");
 var import_select2 = require("@react-aria/select");
 var import_overlays6 = require("@react-stately/overlays");
 var import_overlays7 = require("@react-aria/overlays");
-var import_icons8 = require("@marigold/icons");
+var import_icons7 = require("@marigold/icons");
 
 // src/Select/ListBox.tsx
-var import_react31 = __toESM(require("react"));
+var import_react30 = __toESM(require("react"));
 var import_listbox3 = require("@react-aria/listbox");
 
 // src/Select/Option.tsx
-var import_react29 = __toESM(require("react"));
+var import_react28 = __toESM(require("react"));
 var import_listbox = require("@react-aria/listbox");
 var Option = ({ item, state }) => {
-  const ref = (0, import_react29.useRef)(null);
-  const [disabled, setDisabled] = (0, import_react29.useState)(false);
+  const ref = (0, import_react28.useRef)(null);
+  const [disabled, setDisabled] = (0, import_react28.useState)(false);
   const { optionProps, isSelected } = (0, import_listbox.useOption)({
     key: item.key
   }, state, ref);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     for (const key of state.disabledKeys.values()) {
       if (key === item.key) {
         setDisabled(true);
       }
     }
   }, [state.disabledKeys, item.key]);
-  return /* @__PURE__ */ import_react29.default.createElement(import_system.Box, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react28.default.createElement(import_system.Box, __spreadProps(__spreadValues({
     as: "li"
   }, optionProps), {
     ref,
@@ -1137,26 +1104,26 @@ var Option = ({ item, state }) => {
 };
 
 // src/Select/ListBoxSection.tsx
-var import_react30 = __toESM(require("react"));
+var import_react29 = __toESM(require("react"));
 var import_listbox2 = require("@react-aria/listbox");
 var ListBoxSection = ({ section, state }) => {
   const { itemProps, headingProps, groupProps } = (0, import_listbox2.useListBoxSection)({
     heading: section.rendered,
     "aria-label": section["aria-label"]
   });
-  return /* @__PURE__ */ import_react30.default.createElement(import_system.Box, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react29.default.createElement(import_system.Box, __spreadProps(__spreadValues({
     as: "li"
   }, itemProps), {
     css: {
       cursor: "not-allowed"
     }
-  }), section.rendered && /* @__PURE__ */ import_react30.default.createElement(import_system.Box, __spreadProps(__spreadValues({
+  }), section.rendered && /* @__PURE__ */ import_react29.default.createElement(import_system.Box, __spreadProps(__spreadValues({
     as: "span"
   }, headingProps), {
     variant: "select.section"
-  }), section.rendered), /* @__PURE__ */ import_react30.default.createElement(import_system.Box, __spreadValues({
+  }), section.rendered), /* @__PURE__ */ import_react29.default.createElement(import_system.Box, __spreadValues({
     as: "ul"
-  }, groupProps), [...section.childNodes].map((node) => /* @__PURE__ */ import_react30.default.createElement(Option, {
+  }, groupProps), [...section.childNodes].map((node) => /* @__PURE__ */ import_react29.default.createElement(Option, {
     key: node.key,
     item: node,
     state
@@ -1165,10 +1132,10 @@ var ListBoxSection = ({ section, state }) => {
 
 // src/Select/ListBox.tsx
 var ListBox = (props) => {
-  const ref = (0, import_react31.useRef)(null);
+  const ref = (0, import_react30.useRef)(null);
   const { state, error } = props;
   const { listBoxProps } = (0, import_listbox3.useListBox)(props, state, ref);
-  return /* @__PURE__ */ import_react31.default.createElement(import_system.Box, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react30.default.createElement(import_system.Box, __spreadProps(__spreadValues({
     as: "ul",
     p: "none",
     css: {
@@ -1177,11 +1144,11 @@ var ListBox = (props) => {
   }, listBoxProps), {
     variant: error ? "select.listbox.error" : "select.listbox",
     ref
-  }), [...state.collection].map((item) => item.type === "section" ? /* @__PURE__ */ import_react31.default.createElement(ListBoxSection, {
+  }), [...state.collection].map((item) => item.type === "section" ? /* @__PURE__ */ import_react30.default.createElement(ListBoxSection, {
     key: item.key,
     section: item,
     state
-  }) : /* @__PURE__ */ import_react31.default.createElement(Option, {
+  }) : /* @__PURE__ */ import_react30.default.createElement(Option, {
     key: item.key,
     item,
     state
@@ -1189,11 +1156,11 @@ var ListBox = (props) => {
 };
 
 // src/Select/Popover.tsx
-var import_react32 = __toESM(require("react"));
+var import_react31 = __toESM(require("react"));
 var import_focus4 = require("@react-aria/focus");
 var import_overlays5 = require("@react-aria/overlays");
-var import_utils2 = require("@react-aria/utils");
-var Popover = (0, import_react32.forwardRef)((_a, ref) => {
+var import_utils5 = require("@react-aria/utils");
+var Popover = (0, import_react31.forwardRef)((_a, ref) => {
   var _b = _a, { children, className, isOpen, onClose } = _b, otherProps = __objRest(_b, ["children", "className", "isOpen", "onClose"]);
   const { overlayProps } = (0, import_overlays5.useOverlay)({
     isOpen,
@@ -1202,12 +1169,12 @@ var Popover = (0, import_react32.forwardRef)((_a, ref) => {
     isDismissable: true
   }, ref);
   const { modalProps } = (0, import_overlays5.useModal)();
-  return /* @__PURE__ */ import_react32.default.createElement(import_overlays5.OverlayContainer, null, /* @__PURE__ */ import_react32.default.createElement(import_focus4.FocusScope, {
+  return /* @__PURE__ */ import_react31.default.createElement(import_overlays5.OverlayContainer, null, /* @__PURE__ */ import_react31.default.createElement(import_focus4.FocusScope, {
     restoreFocus: true
-  }, /* @__PURE__ */ import_react32.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, (0, import_utils2.mergeProps)(overlayProps, otherProps, modalProps)), {
+  }, /* @__PURE__ */ import_react31.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, (0, import_utils5.mergeProps)(overlayProps, otherProps, modalProps)), {
     className,
     ref
-  }), children, /* @__PURE__ */ import_react32.default.createElement(import_overlays5.DismissButton, {
+  }), children, /* @__PURE__ */ import_react31.default.createElement(import_overlays5.DismissButton, {
     onDismiss: onClose
   }))));
 });
@@ -1235,8 +1202,8 @@ var Select = (_a) => {
   ]);
   const state = (0, import_select.useSelectState)(props);
   const overlayTriggerState = (0, import_overlays6.useOverlayTriggerState)({});
-  const triggerRef = (0, import_react33.useRef)();
-  const overlayRef = (0, import_react33.useRef)();
+  const triggerRef = (0, import_react32.useRef)();
+  const overlayRef = (0, import_react32.useRef)();
   const { overlayProps } = (0, import_overlays7.useOverlayTrigger)({ type: "listbox" }, overlayTriggerState, triggerRef);
   const { overlayProps: positionProps } = (0, import_overlays7.useOverlayPosition)({
     targetRef: triggerRef,
@@ -1249,47 +1216,44 @@ var Select = (_a) => {
   const { labelProps, triggerProps, valueProps, menuProps } = (0, import_select2.useSelect)(props, state, triggerRef);
   const { buttonProps } = (0, import_button3.useButton)(triggerProps, triggerRef);
   const { focusProps } = (0, import_focus5.useFocusRing)();
-  return /* @__PURE__ */ import_react33.default.createElement(import_system.Box, {
+  return /* @__PURE__ */ import_react32.default.createElement(import_system.Box, {
     position: "relative",
     display: "inline-block",
     width: width && width
-  }, props.label && /* @__PURE__ */ import_react33.default.createElement(import_system.Box, null, /* @__PURE__ */ import_react33.default.createElement(Label, __spreadProps(__spreadValues({}, labelProps), {
+  }, props.label && /* @__PURE__ */ import_react32.default.createElement(import_system.Box, null, /* @__PURE__ */ import_react32.default.createElement(Label, __spreadProps(__spreadValues({}, labelProps), {
     htmlFor: labelProps.id,
     variant: labelVariant
-  }), required ? /* @__PURE__ */ import_react33.default.createElement(import_system.Box, {
+  }), required ? /* @__PURE__ */ import_react32.default.createElement(import_system.Box, {
     as: "span",
     display: "inline-flex",
     alignItems: "center"
-  }, props.label, /* @__PURE__ */ import_react33.default.createElement(import_system.Box, {
-    as: import_icons8.Required,
+  }, props.label, /* @__PURE__ */ import_react32.default.createElement(import_icons7.Required, {
     size: 16,
-    css: { color: "error" }
-  })) : props.label)), /* @__PURE__ */ import_react33.default.createElement(import_select2.HiddenSelect, {
+    fill: "error"
+  })) : props.label)), /* @__PURE__ */ import_react32.default.createElement(import_select2.HiddenSelect, {
     state,
     triggerRef,
     label: props.label,
     name: props.name,
     isDisabled: disabled
-  }), /* @__PURE__ */ import_react33.default.createElement(import_system.Box, __spreadProps(__spreadValues({
+  }), /* @__PURE__ */ import_react32.default.createElement(import_system.Box, __spreadProps(__spreadValues({
     as: "button"
-  }, (0, import_utils3.mergeProps)(buttonProps, focusProps)), {
+  }, (0, import_utils6.mergeProps)(buttonProps, focusProps)), {
     ref: triggerRef,
     variant: error && state.isOpen && !disabled ? "button.select.errorOpened" : error ? "button.select.error" : state.isOpen && !disabled ? "button.select.open" : "button.select",
     disabled,
     className
-  }), /* @__PURE__ */ import_react33.default.createElement(import_system.Box, __spreadProps(__spreadValues({
+  }), /* @__PURE__ */ import_react32.default.createElement(import_system.Box, __spreadProps(__spreadValues({
     as: "span"
   }, valueProps), {
     variant: disabled ? "select.disabled" : "select"
-  }), state.selectedItem ? state.selectedItem.rendered : placeholder), state.isOpen && !disabled ? /* @__PURE__ */ import_react33.default.createElement(import_system.Box, {
-    as: import_icons8.ArrowUp,
+  }), state.selectedItem ? state.selectedItem.rendered : placeholder), state.isOpen && !disabled ? /* @__PURE__ */ import_react32.default.createElement(import_icons7.ArrowUp, {
     size: 16,
-    css: { fill: "text" }
-  }) : /* @__PURE__ */ import_react33.default.createElement(import_system.Box, {
-    as: import_icons8.ArrowDown,
+    fill: "text"
+  }) : /* @__PURE__ */ import_react32.default.createElement(import_icons7.ArrowDown, {
     size: 16,
-    css: { fill: disabled ? "disabled" : "text" }
-  })), state.isOpen && !disabled && /* @__PURE__ */ import_react33.default.createElement(import_system.Box, __spreadProps(__spreadValues(__spreadValues({
+    fill: disabled ? "disabled" : "text"
+  })), state.isOpen && !disabled && /* @__PURE__ */ import_react32.default.createElement(import_system.Box, __spreadProps(__spreadValues(__spreadValues({
     as: Popover
   }, overlayProps), positionProps), {
     css: {
@@ -1298,25 +1262,99 @@ var Select = (_a) => {
     ref: overlayRef,
     isOpen: state.isOpen,
     onClose: state.close
-  }), /* @__PURE__ */ import_react33.default.createElement(ListBox, __spreadProps(__spreadValues({
+  }), /* @__PURE__ */ import_react32.default.createElement(ListBox, __spreadProps(__spreadValues({
     error
   }, menuProps), {
     state
-  }))), error && errorMessage && /* @__PURE__ */ import_react33.default.createElement(import_system.Box, {
+  }))), error && errorMessage && /* @__PURE__ */ import_react32.default.createElement(import_system.Box, {
     as: "span",
     display: "inline-flex",
     alignItems: "center"
-  }, /* @__PURE__ */ import_react33.default.createElement(import_system.Box, {
-    as: import_icons8.Exclamation,
+  }, /* @__PURE__ */ import_react32.default.createElement(import_system.Box, {
+    as: import_icons7.Exclamation,
     size: 16,
     css: { color: "error" }
-  }), /* @__PURE__ */ import_react33.default.createElement(ValidationMessage, null, errorMessage)));
+  }), /* @__PURE__ */ import_react32.default.createElement(ValidationMessage, null, errorMessage)));
 };
 
-// src/Textarea/Textarea.tsx
+// src/Slider/Slider.tsx
+var import_react33 = __toESM(require("react"));
+var Slider = (_a) => {
+  var _b = _a, { variant = "" } = _b, props = __objRest(_b, ["variant"]);
+  return /* @__PURE__ */ import_react33.default.createElement(import_system.Box, __spreadValues({
+    as: "input",
+    type: "range",
+    css: { verticalAlign: "middle" },
+    variant: `slider.${variant}`
+  }, props));
+};
+
+// src/Switch/Switch.tsx
 var import_react34 = __toESM(require("react"));
+var import_focus6 = require("@react-aria/focus");
+var import_switch = require("@react-aria/switch");
+var import_visually_hidden4 = require("@react-aria/visually-hidden");
+var import_system7 = require("@marigold/system");
+var Switch = (_a) => {
+  var _b = _a, {
+    variant = "",
+    labelVariant = "above",
+    disabled
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "labelVariant",
+    "disabled"
+  ]);
+  const state = useToggleState(props);
+  const ref = (0, import_react34.useRef)();
+  const { inputProps } = (0, import_switch.useSwitch)(props, state, ref);
+  const { focusProps } = (0, import_focus6.useFocusRing)();
+  return /* @__PURE__ */ import_react34.default.createElement(import_system.Box, {
+    as: Label,
+    __baseCSS: {
+      userSelect: "none"
+    },
+    variant: labelVariant
+  }, props.children, /* @__PURE__ */ import_react34.default.createElement(import_visually_hidden4.VisuallyHidden, null, /* @__PURE__ */ import_react34.default.createElement("input", __spreadProps(__spreadValues(__spreadValues({}, inputProps), focusProps), {
+    disabled,
+    ref
+  }))), /* @__PURE__ */ import_react34.default.createElement(import_system.Box, {
+    as: "svg",
+    __baseCSS: {
+      cursor: disabled ? "not-allowed" : "pointer",
+      width: 56,
+      height: 32
+    },
+    "aria-hidden": "true"
+  }, /* @__PURE__ */ import_react34.default.createElement(import_system.Box, {
+    as: "rect",
+    __baseCSS: {
+      x: 4,
+      y: 4,
+      rx: 12,
+      width: 48,
+      height: 24
+    },
+    variant: (0, import_system7.conditional)(`switch.${variant}`, {
+      checked: state.isSelected,
+      disabled
+    })
+  }), /* @__PURE__ */ import_react34.default.createElement(import_system.Box, {
+    as: "circle",
+    __baseCSS: {
+      boxShadow: "1px 1px 4px rgba(0, 0, 0, 0.25)",
+      cx: state.isSelected ? 40 : 16,
+      cy: 16,
+      r: 11,
+      fill: disabled ? "gray20" : "gray00"
+    }
+  })));
+};
+
+// src/Textarea/Textarea.tsx
+var import_react35 = __toESM(require("react"));
 var import_textfield2 = require("@react-aria/textfield");
-var import_icons9 = require("@marigold/icons");
+var import_icons8 = require("@marigold/icons");
 var Textarea = (_a) => {
   var _b = _a, {
     variant = "",
@@ -1333,14 +1371,14 @@ var Textarea = (_a) => {
     "required",
     "children"
   ]);
-  const ref = (0, import_react34.useRef)(null);
+  const ref = (0, import_react35.useRef)(null);
   const { labelProps, inputProps, errorMessageProps } = (0, import_textfield2.useTextField)(__spreadProps(__spreadValues({}, props), {
     inputElementType: "textarea"
   }), ref);
-  return /* @__PURE__ */ import_react34.default.createElement(import_system.Box, null, /* @__PURE__ */ import_react34.default.createElement(Label, __spreadValues({
+  return /* @__PURE__ */ import_react35.default.createElement(import_system.Box, null, /* @__PURE__ */ import_react35.default.createElement(Label, __spreadValues({
     htmlFor,
     required
-  }, labelProps), props.label), /* @__PURE__ */ import_react34.default.createElement(import_system.Box, __spreadValues(__spreadProps(__spreadValues({
+  }, labelProps), props.label), /* @__PURE__ */ import_react35.default.createElement(import_system.Box, __spreadValues(__spreadProps(__spreadValues({
     as: "textarea",
     variant: `textarea.${variant}`,
     css: {
@@ -1348,13 +1386,59 @@ var Textarea = (_a) => {
     }
   }, inputProps), {
     ref
-  }), props)), error && errorMessage && /* @__PURE__ */ import_react34.default.createElement(ValidationMessage, __spreadValues({}, errorMessageProps), /* @__PURE__ */ import_react34.default.createElement(import_icons9.Exclamation, {
+  }), props)), error && errorMessage && /* @__PURE__ */ import_react35.default.createElement(ValidationMessage, __spreadValues({}, errorMessageProps), /* @__PURE__ */ import_react35.default.createElement(import_icons8.Exclamation, {
     size: 16
   }), errorMessage));
 };
 
+// src/Tooltip/Tooltip.tsx
+var import_react37 = __toESM(require("react"));
+var import_tooltip3 = require("@react-aria/tooltip");
+var import_utils7 = require("@react-aria/utils");
+
+// src/Tooltip/TooltipTrigger.tsx
+var import_react36 = __toESM(require("react"));
+var import_focus7 = require("@react-aria/focus");
+var import_tooltip = require("@react-aria/tooltip");
+var import_tooltip2 = require("@react-stately/tooltip");
+var TooltipContext = import_react36.default.createContext({});
+var TooltipTrigger = (_a) => {
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  const [trigger, tooltip] = import_react36.default.Children.toArray(children);
+  const state = (0, import_tooltip2.useTooltipTriggerState)(props);
+  const tooltipTriggerRef = (0, import_react36.useRef)();
+  const { triggerProps, tooltipProps } = (0, import_tooltip.useTooltipTrigger)({}, state, tooltipTriggerRef);
+  return /* @__PURE__ */ import_react36.default.createElement(import_focus7.FocusableProvider, __spreadProps(__spreadValues({}, triggerProps), {
+    ref: tooltipTriggerRef
+  }), trigger, state.isOpen && /* @__PURE__ */ import_react36.default.createElement(TooltipContext.Provider, {
+    value: __spreadValues({
+      state
+    }, tooltipProps)
+  }, tooltip));
+};
+
+// src/Tooltip/Tooltip.tsx
+var Tooltip = (_a) => {
+  var _b = _a, {
+    variant = "",
+    children
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "children"
+  ]);
+  const _a2 = (0, import_react37.useContext)(TooltipContext), { state } = _a2, tooltipProviderProps = __objRest(_a2, ["state"]);
+  const mergedProps = (0, import_utils7.mergeProps)(props, tooltipProviderProps);
+  const { tooltipProps } = (0, import_tooltip3.useTooltip)(mergedProps, state);
+  return /* @__PURE__ */ import_react37.default.createElement(import_system.Box, __spreadValues({
+    position: "relative"
+  }, tooltipProps), /* @__PURE__ */ import_react37.default.createElement(import_system.Box, __spreadValues({
+    position: "absolute",
+    variant: `tooltip.${variant}`
+  }, mergedProps), children));
+};
+
 // src/Input/Input.tsx
-var import_react35 = __toESM(require("react"));
+var import_react38 = __toESM(require("react"));
 var Input = (_a) => {
   var _b = _a, {
     variant = "",
@@ -1363,7 +1447,7 @@ var Input = (_a) => {
     "variant",
     "type"
   ]);
-  return /* @__PURE__ */ import_react35.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react38.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
     as: "input",
     type,
     variant: `input.${variant}`
@@ -1371,10 +1455,10 @@ var Input = (_a) => {
 };
 
 // src/Container/Container.tsx
-var import_react36 = __toESM(require("react"));
+var import_react39 = __toESM(require("react"));
 var Container = (_a) => {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ import_react36.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react39.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
     width: "100%"
   }), children);
 };
@@ -1385,7 +1469,6 @@ module.exports = __toCommonJS(src_exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionGroup,
-  Alert,
   Badge,
   Box,
   Button,
@@ -1414,9 +1497,13 @@ module.exports = __toCommonJS(src_exports);
   Select,
   Slider,
   Stack,
+  Switch,
   Text,
   Textarea,
   ThemeProvider,
+  Tooltip,
+  TooltipContext,
+  TooltipTrigger,
   ValidationMessage,
   VisuallyHidden,
   useDialogButtonProps,