@marigold/components 0.3.0 → 0.4.0

package/dist/index.mjs

@@ -0,0 +1,1369 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/ActionGroup/ActionGroup.tsx
+import React3 from "react";
+
+// src/Inline/Inline.tsx
+import React, { Children } from "react";
+import flattenChildren from "react-keyed-flatten-children";
+
+// src/Box.ts
+import { Box } from "@marigold/system";
+
+// src/Inline/Inline.tsx
+var ALIGNMENT = {
+  top: "flex-start",
+  center: "center",
+  bottom: "flex-end"
+};
+var Inline = (_a) => {
+  var _b = _a, {
+    space = "none",
+    align = "center",
+    children
+  } = _b, props = __objRest(_b, [
+    "space",
+    "align",
+    "children"
+  ]);
+  return /* @__PURE__ */ React.createElement(Box, __spreadValues({
+    display: "inline-flex",
+    css: { "> * + *": { pl: space } },
+    alignItems: ALIGNMENT[align]
+  }, props), Children.map(flattenChildren(children), (child) => /* @__PURE__ */ React.createElement(Box, null, React.cloneElement(child, {}, child.props.children))));
+};
+
+// src/Stack/Stack.tsx
+import React2, { Children as Children2 } from "react";
+import flattenChildren2 from "react-keyed-flatten-children";
+var ALIGNMENT2 = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end"
+};
+var Stack = (_a) => {
+  var _b = _a, {
+    space = "none",
+    align = "left",
+    children
+  } = _b, props = __objRest(_b, [
+    "space",
+    "align",
+    "children"
+  ]);
+  return /* @__PURE__ */ React2.createElement(Box, __spreadProps(__spreadValues({}, props), {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: ALIGNMENT2[align],
+    css: { "> * + *": { pt: space } }
+  }), Children2.map(flattenChildren2(children), (child) => /* @__PURE__ */ React2.createElement(Box, null, React2.cloneElement(child, {}, child.props.children))));
+};
+
+// src/ActionGroup/ActionGroup.tsx
+var ActionGroup = (_a) => {
+  var _b = _a, {
+    space = "none",
+    verticalAlignment = false,
+    children
+  } = _b, props = __objRest(_b, [
+    "space",
+    "verticalAlignment",
+    "children"
+  ]);
+  return verticalAlignment ? /* @__PURE__ */ React3.createElement(Stack, __spreadValues({
+    space
+  }, props), children) : /* @__PURE__ */ React3.createElement(Inline, __spreadValues({
+    space
+  }, props), children);
+};
+
+// src/Alert/Alert.tsx
+import React4 from "react";
+import { Exclamation, Check, Notification } from "@marigold/icons";
+var ICON_MAP = {
+  success: Check,
+  warning: Notification,
+  error: Exclamation
+};
+var Alert = (_a) => {
+  var _b = _a, {
+    variant = "success",
+    children
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "children"
+  ]);
+  const Icon = ICON_MAP[variant];
+  return /* @__PURE__ */ React4.createElement(Box, __spreadProps(__spreadValues({}, props), {
+    display: "flex",
+    variant: `alert.${variant}`
+  }), /* @__PURE__ */ React4.createElement(Box, {
+    display: "inline-block",
+    alignItems: "center",
+    width: "32px",
+    height: "32px",
+    bg: variant
+  }, /* @__PURE__ */ React4.createElement(Box, {
+    as: Icon,
+    size: 12,
+    color: "#fff",
+    bg: variant,
+    m: 10
+  })), /* @__PURE__ */ React4.createElement(Box, {
+    mx: "16px"
+  }, children));
+};
+
+// src/Badge/Badge.tsx
+import React5 from "react";
+var Badge = (_a) => {
+  var _b = _a, {
+    variant = "",
+    bgColor = "transparent",
+    borderColor = "transparent",
+    children
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "bgColor",
+    "borderColor",
+    "children"
+  ]);
+  return /* @__PURE__ */ React5.createElement(Box, __spreadValues({
+    css: { bg: bgColor, borderColor },
+    variant: `badge.${variant}`
+  }, props), children);
+};
+
+// src/Button/Button.tsx
+import React6, { forwardRef } from "react";
+import { useButton } from "@react-aria/button";
+var Button = forwardRef((_a, ref) => {
+  var _b = _a, {
+    as = "button",
+    variant = "primary",
+    size = "large",
+    space = "none",
+    disabled,
+    children,
+    className
+  } = _b, props = __objRest(_b, [
+    "as",
+    "variant",
+    "size",
+    "space",
+    "disabled",
+    "children",
+    "className"
+  ]);
+  const { buttonProps } = useButton(__spreadProps(__spreadValues({}, props), {
+    elementType: typeof as === "string" ? as : "span",
+    isDisabled: disabled
+  }), ref);
+  return /* @__PURE__ */ React6.createElement(Box, __spreadProps(__spreadValues(__spreadValues({}, buttonProps), props), {
+    as,
+    display: "inline-flex",
+    alignItems: "center",
+    variant: [`button.${variant}`, `button.${size}`],
+    className,
+    ref,
+    css: { columnGap: space }
+  }), children);
+});
+
+// src/Card/Card.tsx
+import React7 from "react";
+var Card = (_a) => {
+  var _b = _a, {
+    variant = "",
+    title,
+    width,
+    className,
+    children
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "title",
+    "width",
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ React7.createElement(Box, __spreadProps(__spreadValues({}, props), {
+    variant: `card.${variant}`,
+    maxWidth: width,
+    className
+  }), title && /* @__PURE__ */ React7.createElement(Box, {
+    as: "h2",
+    variant: "text.h2",
+    pb: "small"
+  }, title), children);
+};
+
+// src/Checkbox/Checkbox.tsx
+import React11 from "react";
+import { useFocusRing } from "@react-aria/focus";
+import { VisuallyHidden } from "@react-aria/visually-hidden";
+import { useCheckbox } from "@react-aria/checkbox";
+
+// ../../node_modules/@react-stately/utils/dist/module.js
+import { useCallback, useRef, useState } from "react";
+function useControlledState(value, defaultValue, onChange) {
+  let [stateValue, setStateValue] = useState(value || defaultValue);
+  let ref = useRef(value !== void 0);
+  let wasControlled = ref.current;
+  let isControlled = value !== void 0;
+  let stateRef = useRef(stateValue);
+  if (wasControlled !== isControlled) {
+    console.warn("WARN: A component changed from " + (wasControlled ? "controlled" : "uncontrolled") + " to " + (isControlled ? "controlled" : "uncontrolled") + ".");
+  }
+  ref.current = isControlled;
+  let setValue = useCallback(function(value2) {
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+    let onChangeCaller = function onChangeCaller2(value3) {
+      if (onChange) {
+        if (!Object.is(stateRef.current, value3)) {
+          for (var _len2 = arguments.length, onChangeArgs = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+            onChangeArgs[_key2 - 1] = arguments[_key2];
+          }
+          onChange(value3, ...onChangeArgs);
+        }
+      }
+      if (!isControlled) {
+        stateRef.current = value3;
+      }
+    };
+    if (typeof value2 === "function") {
+      let updateFunction = function updateFunction2(oldValue) {
+        for (var _len3 = arguments.length, functionArgs = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
+          functionArgs[_key3 - 1] = arguments[_key3];
+        }
+        let interceptedValue = value2(isControlled ? stateRef.current : oldValue, ...functionArgs);
+        onChangeCaller(interceptedValue, ...args);
+        if (!isControlled) {
+          return interceptedValue;
+        }
+        return oldValue;
+      };
+      setStateValue(updateFunction);
+    } else {
+      if (!isControlled) {
+        setStateValue(value2);
+      }
+      onChangeCaller(value2, ...args);
+    }
+  }, [isControlled, onChange]);
+  if (isControlled) {
+    stateRef.current = value;
+  } else {
+    value = stateValue;
+  }
+  return [value, setValue];
+}
+
+// ../../node_modules/@react-stately/toggle/dist/module.js
+function useToggleState(props) {
+  if (props === void 0) {
+    props = {};
+  }
+  let {
+    isReadOnly,
+    onChange
+  } = props;
+  let [isSelected, setSelected] = useControlledState(props.isSelected, props.defaultSelected || false, () => {
+  });
+  function updateSelected(value) {
+    if (!isReadOnly) {
+      setSelected(value);
+      if (onChange) {
+        onChange(value);
+      }
+    }
+  }
+  function toggleState() {
+    if (!isReadOnly) {
+      setSelected((prev) => {
+        let newVal = !prev;
+        if (onChange) {
+          onChange(newVal);
+        }
+        return newVal;
+      });
+    }
+  }
+  return {
+    isSelected,
+    setSelected: updateSelected,
+    toggle: toggleState
+  };
+}
+
+// src/Checkbox/Checkbox.tsx
+import { Exclamation as Exclamation2 } from "@marigold/icons";
+
+// src/Checkbox/CheckboxIcons.tsx
+import React8 from "react";
+import { conditional, SVG } from "@marigold/system";
+var CheckboxIcon = ({
+  variant = "",
+  checked = false,
+  disabled = false,
+  error = false
+}) => {
+  const conditionalStates = disabled ? {
+    disabled
+  } : {
+    checked,
+    error
+  };
+  return /* @__PURE__ */ React8.createElement(SVG, {
+    width: "16",
+    height: "32",
+    viewBox: "0 0 16 32",
+    fill: "none",
+    "aria-hidden": "true"
+  }, /* @__PURE__ */ React8.createElement(Box, {
+    as: "rect",
+    x: "0.5",
+    y: "8.5",
+    width: "15px",
+    height: "15px",
+    rx: "1.5",
+    variant: conditional(`checkbox.${variant}`, conditionalStates)
+  }), checked && /* @__PURE__ */ React8.createElement(Box, {
+    __baseCSS: { fill: "gray00" },
+    as: "path",
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M13.9571 12.8338L12.4085 11.2852L6.08699 17.6007L3.59887 15.1126L2.04163 16.6588L6.08682 20.704L13.9571 12.8338Z"
+  }));
+};
+
+// src/Label/Label.tsx
+import React9 from "react";
+import { Required } from "@marigold/icons";
+var LabelBase = (_a) => {
+  var _b = _a, {
+    variant = "above",
+    required,
+    color = "text",
+    children
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "required",
+    "color",
+    "children"
+  ]);
+  return /* @__PURE__ */ React9.createElement(Box, __spreadProps(__spreadValues({}, props), {
+    as: "label",
+    __baseCSS: { color },
+    variant: `label.${variant}`
+  }), children);
+};
+var Label = (_a) => {
+  var _b = _a, {
+    required,
+    children
+  } = _b, props = __objRest(_b, [
+    "required",
+    "children"
+  ]);
+  return required ? /* @__PURE__ */ React9.createElement(Box, {
+    as: "span",
+    display: "inline-flex",
+    alignItems: "center"
+  }, /* @__PURE__ */ React9.createElement(LabelBase, __spreadValues({}, props), children), required && /* @__PURE__ */ React9.createElement(Box, {
+    as: Required,
+    size: 16,
+    css: { color: "error" }
+  })) : /* @__PURE__ */ React9.createElement(LabelBase, __spreadValues({}, props), children);
+};
+
+// src/ValidationMessage/ValidationMessage.tsx
+import React10 from "react";
+var ValidationMessage = (_a) => {
+  var _b = _a, {
+    variant = "error",
+    children,
+    className
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ React10.createElement(Box, __spreadValues({
+    as: "span",
+    display: "flex",
+    alignItems: "center",
+    variant: `validation.${variant}`,
+    className
+  }, props), children);
+};
+
+// src/Checkbox/Checkbox.tsx
+var CheckboxInput = (_a) => {
+  var _b = _a, { error } = _b, props = __objRest(_b, ["error"]);
+  const state = useToggleState(props);
+  const ref = React11.useRef(null);
+  const { inputProps } = useCheckbox(props, state, ref);
+  const { focusProps } = useFocusRing();
+  return /* @__PURE__ */ React11.createElement(Box, {
+    pr: "xsmall"
+  }, /* @__PURE__ */ React11.createElement(VisuallyHidden, null, /* @__PURE__ */ React11.createElement(Box, __spreadValues(__spreadProps(__spreadValues(__spreadValues({
+    as: "input",
+    type: "checkbox",
+    disabled: props.disabled
+  }, inputProps), focusProps), {
+    ref
+  }), props))), /* @__PURE__ */ React11.createElement(CheckboxIcon, {
+    checked: props.checked,
+    variant: props.variant,
+    disabled: props.disabled,
+    error
+  }));
+};
+var Checkbox = (_a) => {
+  var _b = _a, {
+    label,
+    required,
+    labelVariant = "inline",
+    error,
+    errorMessage
+  } = _b, props = __objRest(_b, [
+    "label",
+    "required",
+    "labelVariant",
+    "error",
+    "errorMessage"
+  ]);
+  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(Box, {
+    as: Label,
+    __baseCSS: {
+      ":hover": { cursor: props.disabled ? "not-allowed" : "pointer" }
+    },
+    htmlFor: props.id,
+    required,
+    variant: `label.${labelVariant}`,
+    color: props.disabled ? "disabled" : "text"
+  }, /* @__PURE__ */ React11.createElement(Box, __spreadValues({
+    as: CheckboxInput,
+    error
+  }, props)), label), error && errorMessage && /* @__PURE__ */ React11.createElement(ValidationMessage, null, /* @__PURE__ */ React11.createElement(Exclamation2, {
+    size: 16
+  }), errorMessage));
+};
+
+// src/Column/Column.tsx
+import React12 from "react";
+var transform = (width) => {
+  if (Array.isArray(width)) {
+    return width.map((v) => `${v / 12 * 100}%`);
+  }
+  return `${width / 12 * 100}%`;
+};
+var Column = (_a) => {
+  var _b = _a, {
+    width = 12,
+    children
+  } = _b, props = __objRest(_b, [
+    "width",
+    "children"
+  ]);
+  return /* @__PURE__ */ React12.createElement(Box, __spreadProps(__spreadValues({}, props), {
+    width: transform(width)
+  }), children);
+};
+
+// src/Columns/Columns.tsx
+import React13, { Children as Children3 } from "react";
+import flattenChildren3 from "react-keyed-flatten-children";
+import { useTheme } from "@marigold/system";
+var useAlignment = (direction) => {
+  switch (direction) {
+    case "right":
+      return "flex-end";
+    case "bottom":
+      return "flex-end";
+    case "center":
+      return "center";
+  }
+  return "flex-start";
+};
+var Columns = (_a) => {
+  var _b = _a, {
+    space = "none",
+    horizontalAlign = "left",
+    verticalAlign = "top",
+    className,
+    children
+  } = _b, props = __objRest(_b, [
+    "space",
+    "horizontalAlign",
+    "verticalAlign",
+    "className",
+    "children"
+  ]);
+  const justifyContent = useAlignment(horizontalAlign);
+  const alignItems = useAlignment(verticalAlign);
+  const { css } = useTheme();
+  const spaceObject = css({ space });
+  const spaceValue = Object.values(spaceObject)[0];
+  return /* @__PURE__ */ React13.createElement(Box, {
+    p: space,
+    display: "flex",
+    className
+  }, /* @__PURE__ */ React13.createElement(Box, __spreadValues({
+    width: `calc(100% + ${spaceValue}px)`,
+    m: `${-spaceValue / 2}px`,
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems,
+    justifyContent
+  }, props), Children3.map(flattenChildren3(children), (child) => {
+    return React13.cloneElement(child, {}, /* @__PURE__ */ React13.createElement(Box, {
+      css: { p: `${spaceValue / 2}px` }
+    }, child.props.children));
+  })));
+};
+
+// src/Dialog/Dialog.tsx
+import React16 from "react";
+import { useOverlayTriggerState } from "@react-stately/overlays";
+import { OverlayContainer } from "@react-aria/overlays";
+import { useButton as useButton2 } from "@react-aria/button";
+import { Close } from "@marigold/icons";
+
+// src/Text/Text.tsx
+import React14, { forwardRef as forwardRef2 } from "react";
+var Text = forwardRef2((_a, ref) => {
+  var _b = _a, {
+    as = "span",
+    variant = "body",
+    children,
+    className,
+    align,
+    color,
+    cursor,
+    outline,
+    userSelect
+  } = _b, props = __objRest(_b, [
+    "as",
+    "variant",
+    "children",
+    "className",
+    "align",
+    "color",
+    "cursor",
+    "outline",
+    "userSelect"
+  ]);
+  return /* @__PURE__ */ React14.createElement(Box, __spreadProps(__spreadValues({}, props), {
+    as,
+    variant: `text.${variant}`,
+    css: { textAlign: align, color, cursor, outline, userSelect },
+    className,
+    ref
+  }), children);
+});
+
+// src/Dialog/ModalDialog.tsx
+import React15 from "react";
+import {
+  useOverlay,
+  usePreventScroll,
+  useModal
+} from "@react-aria/overlays";
+import { useDialog } from "@react-aria/dialog";
+import { FocusScope } from "@react-aria/focus";
+var ModalDialog = (_a) => {
+  var _b = _a, {
+    variant,
+    backdropVariant = "backdrop",
+    children
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "backdropVariant",
+    "children"
+  ]);
+  const _a2 = props, { isDismissable, isOpen, onClose } = _a2, restProps = __objRest(_a2, ["isDismissable", "isOpen", "onClose"]);
+  const ref = React15.useRef();
+  const { overlayProps, underlayProps } = useOverlay({ isDismissable, isOpen, onClose }, ref);
+  usePreventScroll();
+  const { modalProps } = useModal();
+  const { dialogProps } = useDialog(props, ref);
+  return /* @__PURE__ */ React15.createElement(Box, __spreadValues({
+    __baseCSS: {
+      display: "grid",
+      placeItems: "center",
+      position: "fixed",
+      zIndex: 100,
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0
+    },
+    variant: `dialog.${backdropVariant}`
+  }, underlayProps), /* @__PURE__ */ React15.createElement(FocusScope, {
+    contain: true,
+    restoreFocus: true,
+    autoFocus: true
+  }, /* @__PURE__ */ React15.createElement(Box, __spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadValues({}, overlayProps), dialogProps), modalProps), {
+    ref,
+    variant: variant ? `dialog.${variant}` : `dialog`
+  }), restProps), children)));
+};
+
+// src/Dialog/Dialog.tsx
+var Dialog = (_a) => {
+  var _b = _a, {
+    backdropVariant,
+    children,
+    className,
+    close,
+    isOpen,
+    title,
+    variant
+  } = _b, props = __objRest(_b, [
+    "backdropVariant",
+    "children",
+    "className",
+    "close",
+    "isOpen",
+    "title",
+    "variant"
+  ]);
+  const closeButtonRef = React16.useRef();
+  const { buttonProps: closeButtonProps } = useButton2({
+    onPress: () => close()
+  }, closeButtonRef);
+  return /* @__PURE__ */ React16.createElement(OverlayContainer, null, /* @__PURE__ */ React16.createElement(ModalDialog, __spreadValues({
+    variant,
+    backdropVariant,
+    isOpen,
+    onClose: close,
+    isDismissable: true
+  }, props), /* @__PURE__ */ React16.createElement(Box, {
+    __baseCSS: {
+      display: "flex",
+      justifyContent: "space-between",
+      borderRadius: "small",
+      pl: "large",
+      pb: "large"
+    },
+    className
+  }, /* @__PURE__ */ React16.createElement(Box, {
+    pt: "medium"
+  }, title && /* @__PURE__ */ React16.createElement(Text, {
+    as: "h4",
+    variant: "headline4"
+  }, title), children), /* @__PURE__ */ React16.createElement(Box, {
+    __baseCSS: {
+      display: "flex",
+      justifyContent: "flex-end",
+      alignItems: "start",
+      paddingTop: "xsmall",
+      paddingX: "xsmall"
+    }
+  }, /* @__PURE__ */ React16.createElement(Box, __spreadProps(__spreadValues({
+    as: Button,
+    __baseCSS: {
+      color: "text",
+      bg: "transparent",
+      lineHeight: "xsmall",
+      px: "xxsmall",
+      ":hover": {
+        color: "text",
+        bg: "transparent",
+        cursor: "pointer"
+      },
+      ":focus": {
+        outline: 0
+      }
+    }
+  }, closeButtonProps), {
+    ref: closeButtonRef
+  }), /* @__PURE__ */ React16.createElement(Close, {
+    size: 16
+  }))))));
+};
+var useDialogButtonProps = () => {
+  const state = useOverlayTriggerState({});
+  const openButtonRef = React16.useRef();
+  const { buttonProps: openButtonProps } = useButton2({
+    onPress: () => state.open()
+  }, openButtonRef);
+  return {
+    state,
+    openButtonProps,
+    openButtonRef
+  };
+};
+
+// src/Divider/Divider.tsx
+import React17 from "react";
+import { useSeparator } from "@react-aria/separator";
+var Divider = (_a) => {
+  var _b = _a, { variant = "" } = _b, props = __objRest(_b, ["variant"]);
+  const { separatorProps } = useSeparator(props);
+  return /* @__PURE__ */ React17.createElement(Box, __spreadValues(__spreadValues({
+    __baseCSS: { width: "100%", height: "1px", m: "none", bg: "text" },
+    variant: `divider.${variant}`
+  }, props), separatorProps));
+};
+
+// src/Field/Field.tsx
+import React18, { useRef as useRef2 } from "react";
+import { useTextField } from "@react-aria/textfield";
+import { Exclamation as Exclamation3 } from "@marigold/icons";
+var Field = (_a) => {
+  var _b = _a, {
+    type = "text",
+    variant = "",
+    labelVariant = "above",
+    htmlFor,
+    required,
+    error,
+    errorMessage
+  } = _b, props = __objRest(_b, [
+    "type",
+    "variant",
+    "labelVariant",
+    "htmlFor",
+    "required",
+    "error",
+    "errorMessage"
+  ]);
+  const ref = useRef2(null);
+  const { labelProps, inputProps, errorMessageProps } = useTextField(props, ref);
+  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(Label, __spreadValues({
+    variant: labelVariant,
+    htmlFor,
+    required
+  }, labelProps), props.label), /* @__PURE__ */ React18.createElement(Box, __spreadValues(__spreadProps(__spreadValues({
+    as: "input",
+    type,
+    id: htmlFor,
+    variant: `input.${variant}`
+  }, inputProps), {
+    ref
+  }), props)), error && errorMessage && /* @__PURE__ */ React18.createElement(ValidationMessage, __spreadValues({}, errorMessageProps), /* @__PURE__ */ React18.createElement(Exclamation3, {
+    size: 16
+  }), errorMessage));
+};
+
+// src/VisuallyHidden/VisuallyHidden.tsx
+import { VisuallyHidden as VisuallyHidden2 } from "@react-aria/visually-hidden";
+
+// src/Image/Image.tsx
+import React19 from "react";
+var Image = (_a) => {
+  var _b = _a, {
+    variant = "fullWidth"
+  } = _b, props = __objRest(_b, [
+    "variant"
+  ]);
+  return /* @__PURE__ */ React19.createElement(Box, __spreadProps(__spreadValues({}, props), {
+    as: "img",
+    variant: `image.${variant}`
+  }));
+};
+
+// src/Link/Link.tsx
+import React20, { useRef as useRef3 } from "react";
+import { useLink } from "@react-aria/link";
+var Link = (_a) => {
+  var _b = _a, {
+    as = "a",
+    variant = "link",
+    children,
+    disabled
+  } = _b, props = __objRest(_b, [
+    "as",
+    "variant",
+    "children",
+    "disabled"
+  ]);
+  const ref = useRef3();
+  const { linkProps } = useLink(__spreadProps(__spreadValues({}, props), {
+    elementType: typeof as === "string" ? as : "span",
+    isDisabled: disabled
+  }), ref);
+  return /* @__PURE__ */ React20.createElement(Text, __spreadProps(__spreadValues(__spreadValues({}, props), linkProps), {
+    as,
+    variant,
+    ref
+  }), children);
+};
+
+// src/Menu/Menu.tsx
+import React21 from "react";
+var Menu = (_a) => {
+  var _b = _a, {
+    variant = "default",
+    label = "Menu",
+    onClick,
+    show = false,
+    children
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "label",
+    "onClick",
+    "show",
+    "children"
+  ]);
+  return /* @__PURE__ */ React21.createElement(Box, __spreadValues({
+    variant: `menu.${variant}`
+  }, props), /* @__PURE__ */ React21.createElement(Button, {
+    onClick,
+    variant: "menu"
+  }, label), show ? /* @__PURE__ */ React21.createElement(Box, {
+    display: "block",
+    position: "absolute",
+    minWidth: "120px",
+    borderRadius: "2px"
+  }, children) : null);
+};
+
+// src/MenuItem/MenuItem.tsx
+import React22 from "react";
+var MenuItem = (_a) => {
+  var _b = _a, {
+    variant = "default",
+    className,
+    children
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ React22.createElement(Box, {
+    variant: `menuItem.${variant}`,
+    className
+  }, /* @__PURE__ */ React22.createElement(Link, __spreadValues({
+    variant: "menuItemLink"
+  }, props), children));
+};
+
+// src/Message/Message.tsx
+import React23 from "react";
+import { Exclamation as Exclamation4, Info, Notification as Notification2 } from "@marigold/icons";
+var Message = (_a) => {
+  var _b = _a, {
+    messageTitle,
+    variant = "info",
+    className,
+    children
+  } = _b, props = __objRest(_b, [
+    "messageTitle",
+    "variant",
+    "className",
+    "children"
+  ]);
+  var icon = /* @__PURE__ */ React23.createElement(Info, null);
+  if (variant === "warning") {
+    icon = /* @__PURE__ */ React23.createElement(Notification2, null);
+  }
+  if (variant === "error") {
+    icon = /* @__PURE__ */ React23.createElement(Exclamation4, null);
+  }
+  return /* @__PURE__ */ React23.createElement(Box, __spreadValues({
+    display: "inline-block",
+    variant: `message.${variant}`,
+    className
+  }, props), /* @__PURE__ */ React23.createElement(Box, {
+    display: "flex",
+    alignItems: "center",
+    variant: "message.title"
+  }, icon, /* @__PURE__ */ React23.createElement(Text, {
+    as: "h4",
+    variant: "headline4"
+  }, messageTitle)), /* @__PURE__ */ React23.createElement(Box, {
+    css: { color: "black" }
+  }, children));
+};
+
+// src/Provider/index.ts
+import { useTheme as useTheme3, ThemeProvider as ThemeProvider2 } from "@marigold/system";
+import { SSRProvider } from "@react-aria/ssr";
+
+// src/Provider/MarigoldProvider.tsx
+import React24 from "react";
+import { OverlayProvider } from "@react-aria/overlays";
+import {
+  Global,
+  ThemeProvider,
+  useTheme as useTheme2,
+  __defaultTheme
+} from "@marigold/system";
+function MarigoldProvider({
+  theme,
+  children
+}) {
+  const outer = useTheme2();
+  const isTopLevel = outer.theme === __defaultTheme;
+  return /* @__PURE__ */ React24.createElement(ThemeProvider, {
+    theme
+  }, isTopLevel ? /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(Global, null), /* @__PURE__ */ React24.createElement(OverlayProvider, null, children)) : children);
+}
+
+// src/Radio/Radio.tsx
+import React26 from "react";
+import { Exclamation as Exclamation5 } from "@marigold/icons";
+import { useFocusRing as useFocusRing2 } from "@react-aria/focus";
+import { VisuallyHidden as VisuallyHidden3 } from "@react-aria/visually-hidden";
+
+// src/Radio/RadioIcon.tsx
+import React25 from "react";
+import { conditional as conditional2, SVG as SVG2 } from "@marigold/system";
+var RadioIcon = ({
+  variant = "",
+  checked = false,
+  disabled = false,
+  error = false
+}) => {
+  const conditionalStates = disabled ? {
+    disabled
+  } : {
+    checked,
+    error
+  };
+  return /* @__PURE__ */ React25.createElement(SVG2, {
+    width: "16",
+    height: "32",
+    viewBox: "0 0 16 32",
+    fill: "none",
+    "aria-hidden": "true"
+  }, /* @__PURE__ */ React25.createElement(Box, {
+    variant: conditional2(`radio.${variant}`, conditionalStates),
+    as: "circle",
+    cx: "8",
+    cy: "16",
+    r: "7.5"
+  }), checked && /* @__PURE__ */ React25.createElement("circle", {
+    fill: "white",
+    cx: "8",
+    cy: "16",
+    r: "3"
+  }));
+};
+
+// src/Radio/Radio.tsx
+var RadioInput = (_a) => {
+  var _b = _a, { error } = _b, props = __objRest(_b, ["error"]);
+  const { focusProps } = useFocusRing2();
+  return /* @__PURE__ */ React26.createElement(Box, {
+    pr: "xsmall"
+  }, /* @__PURE__ */ React26.createElement(VisuallyHidden3, null, /* @__PURE__ */ React26.createElement("input", __spreadValues(__spreadValues({
+    type: "radio",
+    disabled: props.disabled
+  }, focusProps), props))), /* @__PURE__ */ React26.createElement(RadioIcon, {
+    variant: props.variant,
+    disabled: props.disabled,
+    checked: props.checked,
+    error
+  }));
+};
+var Radio = (_a) => {
+  var _b = _a, {
+    label,
+    required,
+    labelVariant = "inline",
+    error,
+    errorMessage
+  } = _b, props = __objRest(_b, [
+    "label",
+    "required",
+    "labelVariant",
+    "error",
+    "errorMessage"
+  ]);
+  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(Box, {
+    as: Label,
+    htmlFor: props.id,
+    required,
+    variant: `label.${labelVariant}`,
+    css: props.disabled ? { color: "disabled", ":hover": { cursor: "not-allowed" } } : { color: "text", ":hover": { cursor: "pointer" } }
+  }, /* @__PURE__ */ React26.createElement(Box, __spreadValues({
+    as: RadioInput,
+    error
+  }, props)), label), error && errorMessage && /* @__PURE__ */ React26.createElement(ValidationMessage, null, /* @__PURE__ */ React26.createElement(Exclamation5, {
+    size: 16
+  }), errorMessage));
+};
+
+// src/Slider/Slider.tsx
+import React27 from "react";
+var Slider = (_a) => {
+  var _b = _a, {
+    variant = "",
+    className
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "className"
+  ]);
+  return /* @__PURE__ */ React27.createElement(Box, __spreadValues({
+    as: "input",
+    type: "range",
+    css: { verticalAlign: "middle" },
+    variant: `slider.${variant}`,
+    className
+  }, props));
+};
+
+// src/Select/Select.tsx
+import React32, { useRef as useRef6 } from "react";
+import { useSelectState } from "@react-stately/select";
+import { useButton as useButton3 } from "@react-aria/button";
+import { mergeProps as mergeProps2 } from "@react-aria/utils";
+import { useFocusRing as useFocusRing3 } from "@react-aria/focus";
+import { HiddenSelect, useSelect } from "@react-aria/select";
+import { useOverlayTriggerState as useOverlayTriggerState2 } from "@react-stately/overlays";
+import { useOverlayTrigger, useOverlayPosition } from "@react-aria/overlays";
+import { ArrowDown, ArrowUp, Exclamation as Exclamation6, Required as Required2 } from "@marigold/icons";
+
+// src/Select/ListBox.tsx
+import React30, { useRef as useRef5 } from "react";
+import { useListBox } from "@react-aria/listbox";
+
+// src/Select/Option.tsx
+import React28, { useEffect, useRef as useRef4, useState as useState2 } from "react";
+import { useOption } from "@react-aria/listbox";
+var Option = ({ item, state }) => {
+  const ref = useRef4(null);
+  const [disabled, setDisabled] = useState2(false);
+  const { optionProps, isSelected } = useOption({
+    key: item.key
+  }, state, ref);
+  useEffect(() => {
+    for (const key of state.disabledKeys.values()) {
+      if (key === item.key) {
+        setDisabled(true);
+      }
+    }
+  }, [state.disabledKeys, item.key]);
+  return /* @__PURE__ */ React28.createElement(Box, __spreadProps(__spreadValues({
+    as: "li"
+  }, optionProps), {
+    ref,
+    variant: isSelected ? "select.option.selected" : disabled ? "select.option.disabled" : "select.option"
+  }), item.rendered);
+};
+
+// src/Select/ListBoxSection.tsx
+import React29 from "react";
+import { useListBoxSection } from "@react-aria/listbox";
+var ListBoxSection = ({ section, state }) => {
+  const { itemProps, headingProps, groupProps } = useListBoxSection({
+    heading: section.rendered,
+    "aria-label": section["aria-label"]
+  });
+  return /* @__PURE__ */ React29.createElement(Box, __spreadProps(__spreadValues({
+    as: "li"
+  }, itemProps), {
+    css: {
+      cursor: "not-allowed"
+    }
+  }), section.rendered && /* @__PURE__ */ React29.createElement(Box, __spreadProps(__spreadValues({
+    as: "span"
+  }, headingProps), {
+    variant: "select.section"
+  }), section.rendered), /* @__PURE__ */ React29.createElement(Box, __spreadValues({
+    as: "ul"
+  }, groupProps), [...section.childNodes].map((node) => /* @__PURE__ */ React29.createElement(Option, {
+    key: node.key,
+    item: node,
+    state
+  }))));
+};
+
+// src/Select/ListBox.tsx
+var ListBox = (props) => {
+  const ref = useRef5(null);
+  const { state, error } = props;
+  const { listBoxProps } = useListBox(props, state, ref);
+  return /* @__PURE__ */ React30.createElement(Box, __spreadProps(__spreadValues({
+    as: "ul",
+    p: "none",
+    css: {
+      listStyle: "none"
+    }
+  }, listBoxProps), {
+    variant: error ? "select.listbox.error" : "select.listbox",
+    ref
+  }), [...state.collection].map((item) => item.type === "section" ? /* @__PURE__ */ React30.createElement(ListBoxSection, {
+    key: item.key,
+    section: item,
+    state
+  }) : /* @__PURE__ */ React30.createElement(Option, {
+    key: item.key,
+    item,
+    state
+  })));
+};
+
+// src/Select/Popover.tsx
+import React31, { forwardRef as forwardRef3 } from "react";
+import { FocusScope as FocusScope2 } from "@react-aria/focus";
+import {
+  DismissButton,
+  OverlayContainer as OverlayContainer2,
+  useModal as useModal2,
+  useOverlay as useOverlay2
+} from "@react-aria/overlays";
+import { mergeProps } from "@react-aria/utils";
+var Popover = forwardRef3((_a, ref) => {
+  var _b = _a, { children, className, isOpen, onClose } = _b, otherProps = __objRest(_b, ["children", "className", "isOpen", "onClose"]);
+  const { overlayProps } = useOverlay2({
+    isOpen,
+    onClose,
+    shouldCloseOnBlur: true,
+    isDismissable: true
+  }, ref);
+  const { modalProps } = useModal2();
+  return /* @__PURE__ */ React31.createElement(OverlayContainer2, null, /* @__PURE__ */ React31.createElement(FocusScope2, {
+    restoreFocus: true
+  }, /* @__PURE__ */ React31.createElement(Box, __spreadProps(__spreadValues({}, mergeProps(overlayProps, otherProps, modalProps)), {
+    className,
+    ref
+  }), children, /* @__PURE__ */ React31.createElement(DismissButton, {
+    onDismiss: onClose
+  }))));
+});
+
+// src/Select/Select.tsx
+var Select = (_a) => {
+  var _b = _a, {
+    labelVariant = "above",
+    placeholder = "Select an option",
+    disabled,
+    required,
+    error,
+    errorMessage,
+    width,
+    className
+  } = _b, props = __objRest(_b, [
+    "labelVariant",
+    "placeholder",
+    "disabled",
+    "required",
+    "error",
+    "errorMessage",
+    "width",
+    "className"
+  ]);
+  const state = useSelectState(props);
+  const overlayTriggerState = useOverlayTriggerState2({});
+  const triggerRef = useRef6();
+  const overlayRef = useRef6();
+  const { overlayProps } = useOverlayTrigger({ type: "listbox" }, overlayTriggerState, triggerRef);
+  const { overlayProps: positionProps } = useOverlayPosition({
+    targetRef: triggerRef,
+    overlayRef,
+    placement: "bottom",
+    shouldFlip: false,
+    isOpen: state.isOpen,
+    onClose: state.close
+  });
+  const { labelProps, triggerProps, valueProps, menuProps } = useSelect(props, state, triggerRef);
+  const { buttonProps } = useButton3(triggerProps, triggerRef);
+  const { focusProps } = useFocusRing3();
+  return /* @__PURE__ */ React32.createElement(Box, {
+    position: "relative",
+    display: "inline-block",
+    width: width && width
+  }, props.label && /* @__PURE__ */ React32.createElement(Box, null, /* @__PURE__ */ React32.createElement(Label, __spreadProps(__spreadValues({}, labelProps), {
+    htmlFor: labelProps.id,
+    variant: labelVariant
+  }), required ? /* @__PURE__ */ React32.createElement(Box, {
+    as: "span",
+    display: "inline-flex",
+    alignItems: "center"
+  }, props.label, /* @__PURE__ */ React32.createElement(Box, {
+    as: Required2,
+    size: 16,
+    css: { color: "error" }
+  })) : props.label)), /* @__PURE__ */ React32.createElement(HiddenSelect, {
+    state,
+    triggerRef,
+    label: props.label,
+    name: props.name,
+    isDisabled: disabled
+  }), /* @__PURE__ */ React32.createElement(Box, __spreadProps(__spreadValues({
+    as: "button"
+  }, mergeProps2(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__ */ React32.createElement(Box, __spreadProps(__spreadValues({
+    as: "span"
+  }, valueProps), {
+    variant: disabled ? "select.disabled" : "select"
+  }), state.selectedItem ? state.selectedItem.rendered : placeholder), state.isOpen && !disabled ? /* @__PURE__ */ React32.createElement(Box, {
+    as: ArrowUp,
+    size: 16,
+    css: { fill: "text" }
+  }) : /* @__PURE__ */ React32.createElement(Box, {
+    as: ArrowDown,
+    size: 16,
+    css: { fill: disabled ? "disabled" : "text" }
+  })), state.isOpen && !disabled && /* @__PURE__ */ React32.createElement(Box, __spreadProps(__spreadValues(__spreadValues({
+    as: Popover
+  }, overlayProps), positionProps), {
+    css: {
+      width: triggerRef.current && triggerRef.current.offsetWidth + "px"
+    },
+    ref: overlayRef,
+    isOpen: state.isOpen,
+    onClose: state.close
+  }), /* @__PURE__ */ React32.createElement(ListBox, __spreadProps(__spreadValues({
+    error
+  }, menuProps), {
+    state
+  }))), error && errorMessage && /* @__PURE__ */ React32.createElement(Box, {
+    as: "span",
+    display: "inline-flex",
+    alignItems: "center"
+  }, /* @__PURE__ */ React32.createElement(Box, {
+    as: Exclamation6,
+    size: 16,
+    css: { color: "error" }
+  }), /* @__PURE__ */ React32.createElement(ValidationMessage, null, errorMessage)));
+};
+
+// src/Textarea/Textarea.tsx
+import React33, { useRef as useRef7 } from "react";
+import { useTextField as useTextField2 } from "@react-aria/textfield";
+import { Exclamation as Exclamation7 } from "@marigold/icons";
+var Textarea = (_a) => {
+  var _b = _a, {
+    variant = "",
+    htmlFor,
+    error,
+    errorMessage,
+    required,
+    children
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "htmlFor",
+    "error",
+    "errorMessage",
+    "required",
+    "children"
+  ]);
+  const ref = useRef7(null);
+  const { labelProps, inputProps, errorMessageProps } = useTextField2(__spreadProps(__spreadValues({}, props), {
+    inputElementType: "textarea"
+  }), ref);
+  return /* @__PURE__ */ React33.createElement(Box, null, /* @__PURE__ */ React33.createElement(Label, __spreadValues({
+    htmlFor,
+    required
+  }, labelProps), props.label), /* @__PURE__ */ React33.createElement(Box, __spreadValues(__spreadProps(__spreadValues({
+    as: "textarea",
+    variant: `textarea.${variant}`,
+    css: {
+      outlineColor: error && "error"
+    }
+  }, inputProps), {
+    ref
+  }), props)), error && errorMessage && /* @__PURE__ */ React33.createElement(ValidationMessage, __spreadValues({}, errorMessageProps), /* @__PURE__ */ React33.createElement(Exclamation7, {
+    size: 16
+  }), errorMessage));
+};
+
+// src/Input/Input.tsx
+import React34 from "react";
+var Input = (_a) => {
+  var _b = _a, {
+    variant = "",
+    type = "text"
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "type"
+  ]);
+  return /* @__PURE__ */ React34.createElement(Box, __spreadProps(__spreadValues({}, props), {
+    as: "input",
+    type,
+    variant: `input.${variant}`
+  }));
+};
+
+// src/Container/Container.tsx
+import React35 from "react";
+var Container = (_a) => {
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ React35.createElement(Box, __spreadProps(__spreadValues({}, props), {
+    width: "100%"
+  }), children);
+};
+
+// src/index.ts
+import { Item, Section } from "@react-stately/collections";
+export {
+  ActionGroup,
+  Alert,
+  Badge,
+  Box,
+  Button,
+  Card,
+  Checkbox,
+  Column,
+  Columns,
+  Container,
+  Dialog,
+  Divider,
+  Field,
+  Image,
+  Inline,
+  Input,
+  Item,
+  Label,
+  LabelBase,
+  Link,
+  MarigoldProvider,
+  Menu,
+  MenuItem,
+  Message,
+  Radio,
+  SSRProvider,
+  Section,
+  Select,
+  Slider,
+  Stack,
+  Text,
+  Textarea,
+  ThemeProvider2 as ThemeProvider,
+  ValidationMessage,
+  VisuallyHidden2 as VisuallyHidden,
+  useDialogButtonProps,
+  useTheme3 as useTheme
+};