@marigold/components 0.3.0 → 0.4.0

package/dist/index.js

@@ -1,8 +1,1424 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+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;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
 
-'use strict'
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  ActionGroup: () => ActionGroup,
+  Alert: () => Alert,
+  Badge: () => Badge,
+  Box: () => import_system.Box,
+  Button: () => Button,
+  Card: () => Card,
+  Checkbox: () => Checkbox,
+  Column: () => Column,
+  Columns: () => Columns,
+  Container: () => Container,
+  Dialog: () => Dialog,
+  Divider: () => Divider,
+  Field: () => Field,
+  Image: () => Image,
+  Inline: () => Inline,
+  Input: () => Input,
+  Item: () => import_collections.Item,
+  Label: () => Label,
+  LabelBase: () => LabelBase,
+  Link: () => Link,
+  MarigoldProvider: () => MarigoldProvider,
+  Menu: () => Menu,
+  MenuItem: () => MenuItem,
+  Message: () => Message,
+  Radio: () => Radio,
+  SSRProvider: () => import_ssr.SSRProvider,
+  Section: () => import_collections.Section,
+  Select: () => Select,
+  Slider: () => Slider,
+  Stack: () => Stack,
+  Text: () => Text,
+  Textarea: () => Textarea,
+  ThemeProvider: () => import_system5.ThemeProvider,
+  ValidationMessage: () => ValidationMessage,
+  VisuallyHidden: () => import_visually_hidden2.VisuallyHidden,
+  useDialogButtonProps: () => useDialogButtonProps,
+  useTheme: () => import_system5.useTheme
+});
 
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./components.cjs.production.min.js')
-} else {
-  module.exports = require('./components.cjs.development.js')
+// src/ActionGroup/ActionGroup.tsx
+var import_react3 = __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"));
+
+// src/Box.ts
+var import_system = require("@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__ */ import_react.default.createElement(import_system.Box, __spreadValues({
+    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))));
+};
+
+// src/Stack/Stack.tsx
+var import_react2 = __toESM(require("react"));
+var import_react_keyed_flatten_children2 = __toESM(require("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__ */ import_react2.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))));
+};
+
+// 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__ */ import_react3.default.createElement(Stack, __spreadValues({
+    space
+  }, props), children) : /* @__PURE__ */ import_react3.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) => {
+  var _b = _a, {
+    variant = "",
+    bgColor = "transparent",
+    borderColor = "transparent",
+    children
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "bgColor",
+    "borderColor",
+    "children"
+  ]);
+  return /* @__PURE__ */ import_react5.default.createElement(import_system.Box, __spreadValues({
+    css: { bg: bgColor, borderColor },
+    variant: `badge.${variant}`
+  }, props), children);
+};
+
+// src/Button/Button.tsx
+var import_react6 = __toESM(require("react"));
+var import_button = require("@react-aria/button");
+var Button = (0, import_react6.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 } = (0, import_button.useButton)(__spreadProps(__spreadValues({}, props), {
+    elementType: typeof as === "string" ? as : "span",
+    isDisabled: disabled
+  }), ref);
+  return /* @__PURE__ */ import_react6.default.createElement(import_system.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
+var import_react7 = __toESM(require("react"));
+var Card = (_a) => {
+  var _b = _a, {
+    variant = "",
+    title,
+    width,
+    className,
+    children
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "title",
+    "width",
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ import_react7.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
+    variant: `card.${variant}`,
+    maxWidth: width,
+    className
+  }), title && /* @__PURE__ */ import_react7.default.createElement(import_system.Box, {
+    as: "h2",
+    variant: "text.h2",
+    pb: "small"
+  }, title), children);
+};
+
+// src/Checkbox/Checkbox.tsx
+var import_react12 = __toESM(require("react"));
+var import_focus = require("@react-aria/focus");
+var import_visually_hidden = require("@react-aria/visually-hidden");
+var import_checkbox = require("@react-aria/checkbox");
+
+// ../../node_modules/@react-stately/utils/dist/module.js
+var import_react8 = require("react");
+function useControlledState(value, defaultValue, onChange) {
+  let [stateValue, setStateValue] = (0, import_react8.useState)(value || defaultValue);
+  let ref = (0, import_react8.useRef)(value !== void 0);
+  let wasControlled = ref.current;
+  let isControlled = value !== void 0;
+  let stateRef = (0, import_react8.useRef)(stateValue);
+  if (wasControlled !== isControlled) {
+    console.warn("WARN: A component changed from " + (wasControlled ? "controlled" : "uncontrolled") + " to " + (isControlled ? "controlled" : "uncontrolled") + ".");
+  }
+  ref.current = isControlled;
+  let setValue = (0, import_react8.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
+var import_icons3 = require("@marigold/icons");
+
+// src/Checkbox/CheckboxIcons.tsx
+var import_react9 = __toESM(require("react"));
+var import_system2 = require("@marigold/system");
+var CheckboxIcon = ({
+  variant = "",
+  checked = false,
+  disabled = false,
+  error = false
+}) => {
+  const conditionalStates = disabled ? {
+    disabled
+  } : {
+    checked,
+    error
+  };
+  return /* @__PURE__ */ import_react9.default.createElement(import_system2.SVG, {
+    width: "16",
+    height: "32",
+    viewBox: "0 0 16 32",
+    fill: "none",
+    "aria-hidden": "true"
+  }, /* @__PURE__ */ import_react9.default.createElement(import_system.Box, {
+    as: "rect",
+    x: "0.5",
+    y: "8.5",
+    width: "15px",
+    height: "15px",
+    rx: "1.5",
+    variant: (0, import_system2.conditional)(`checkbox.${variant}`, conditionalStates)
+  }), checked && /* @__PURE__ */ import_react9.default.createElement(import_system.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
+var import_react10 = __toESM(require("react"));
+var import_icons2 = require("@marigold/icons");
+var LabelBase = (_a) => {
+  var _b = _a, {
+    variant = "above",
+    required,
+    color = "text",
+    children
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "required",
+    "color",
+    "children"
+  ]);
+  return /* @__PURE__ */ import_react10.default.createElement(import_system.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__ */ import_react10.default.createElement(import_system.Box, {
+    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,
+    size: 16,
+    css: { color: "error" }
+  })) : /* @__PURE__ */ import_react10.default.createElement(LabelBase, __spreadValues({}, props), children);
+};
+
+// src/ValidationMessage/ValidationMessage.tsx
+var import_react11 = __toESM(require("react"));
+var ValidationMessage = (_a) => {
+  var _b = _a, {
+    variant = "error",
+    children,
+    className
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ import_react11.default.createElement(import_system.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 = import_react12.default.useRef(null);
+  const { inputProps } = (0, import_checkbox.useCheckbox)(props, state, ref);
+  const { focusProps } = (0, import_focus.useFocusRing)();
+  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), {
+    ref
+  }), props))), /* @__PURE__ */ import_react12.default.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__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement(import_system.Box, {
+    as: Label,
+    __baseCSS: {
+      ":hover": { cursor: props.disabled ? "not-allowed" : "pointer" }
+    },
+    htmlFor: props.id,
+    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, {
+    size: 16
+  }), errorMessage));
+};
+
+// src/Column/Column.tsx
+var import_react13 = __toESM(require("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__ */ import_react13.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
+    width: transform(width)
+  }), children);
+};
+
+// 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) {
+    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 } = (0, import_system3.useTheme)();
+  const spaceObject = css({ space });
+  const spaceValue = Object.values(spaceObject)[0];
+  return /* @__PURE__ */ import_react14.default.createElement(import_system.Box, {
+    p: space,
+    display: "flex",
+    className
+  }, /* @__PURE__ */ import_react14.default.createElement(import_system.Box, __spreadValues({
+    width: `calc(100% + ${spaceValue}px)`,
+    m: `${-spaceValue / 2}px`,
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems,
+    justifyContent
+  }, props), import_react14.Children.map((0, import_react_keyed_flatten_children3.default)(children), (child) => {
+    return import_react14.default.cloneElement(child, {}, /* @__PURE__ */ import_react14.default.createElement(import_system.Box, {
+      css: { p: `${spaceValue / 2}px` }
+    }, child.props.children));
+  })));
+};
+
+// src/Dialog/Dialog.tsx
+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");
+
+// src/Text/Text.tsx
+var import_react15 = __toESM(require("react"));
+var Text = (0, import_react15.forwardRef)((_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__ */ import_react15.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
+    as,
+    variant: `text.${variant}`,
+    css: { textAlign: align, color, cursor, outline, userSelect },
+    className,
+    ref
+  }), children);
+});
+
+// src/Dialog/ModalDialog.tsx
+var import_react16 = __toESM(require("react"));
+var import_overlays = require("@react-aria/overlays");
+var import_dialog = require("@react-aria/dialog");
+var import_focus2 = require("@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 = import_react16.default.useRef();
+  const { overlayProps, underlayProps } = (0, import_overlays.useOverlay)({ isDismissable, isOpen, onClose }, ref);
+  (0, import_overlays.usePreventScroll)();
+  const { modalProps } = (0, import_overlays.useModal)();
+  const { dialogProps } = (0, import_dialog.useDialog)(props, ref);
+  return /* @__PURE__ */ import_react16.default.createElement(import_system.Box, __spreadValues({
+    __baseCSS: {
+      display: "grid",
+      placeItems: "center",
+      position: "fixed",
+      zIndex: 100,
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0
+    },
+    variant: `dialog.${backdropVariant}`
+  }, underlayProps), /* @__PURE__ */ import_react16.default.createElement(import_focus2.FocusScope, {
+    contain: true,
+    restoreFocus: true,
+    autoFocus: true
+  }, /* @__PURE__ */ import_react16.default.createElement(import_system.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 = import_react17.default.useRef();
+  const { buttonProps: closeButtonProps } = (0, import_button2.useButton)({
+    onPress: () => close()
+  }, closeButtonRef);
+  return /* @__PURE__ */ import_react17.default.createElement(import_overlays3.OverlayContainer, null, /* @__PURE__ */ import_react17.default.createElement(ModalDialog, __spreadValues({
+    variant,
+    backdropVariant,
+    isOpen,
+    onClose: close,
+    isDismissable: true
+  }, props), /* @__PURE__ */ import_react17.default.createElement(import_system.Box, {
+    __baseCSS: {
+      display: "flex",
+      justifyContent: "space-between",
+      borderRadius: "small",
+      pl: "large",
+      pb: "large"
+    },
+    className
+  }, /* @__PURE__ */ import_react17.default.createElement(import_system.Box, {
+    pt: "medium"
+  }, title && /* @__PURE__ */ import_react17.default.createElement(Text, {
+    as: "h4",
+    variant: "headline4"
+  }, title), children), /* @__PURE__ */ import_react17.default.createElement(import_system.Box, {
+    __baseCSS: {
+      display: "flex",
+      justifyContent: "flex-end",
+      alignItems: "start",
+      paddingTop: "xsmall",
+      paddingX: "xsmall"
+    }
+  }, /* @__PURE__ */ import_react17.default.createElement(import_system.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__ */ import_react17.default.createElement(import_icons4.Close, {
+    size: 16
+  }))))));
+};
+var useDialogButtonProps = () => {
+  const state = (0, import_overlays2.useOverlayTriggerState)({});
+  const openButtonRef = import_react17.default.useRef();
+  const { buttonProps: openButtonProps } = (0, import_button2.useButton)({
+    onPress: () => state.open()
+  }, openButtonRef);
+  return {
+    state,
+    openButtonProps,
+    openButtonRef
+  };
+};
+
+// src/Divider/Divider.tsx
+var import_react18 = __toESM(require("react"));
+var import_separator = require("@react-aria/separator");
+var Divider = (_a) => {
+  var _b = _a, { variant = "" } = _b, props = __objRest(_b, ["variant"]);
+  const { separatorProps } = (0, import_separator.useSeparator)(props);
+  return /* @__PURE__ */ import_react18.default.createElement(import_system.Box, __spreadValues(__spreadValues({
+    __baseCSS: { width: "100%", height: "1px", m: "none", bg: "text" },
+    variant: `divider.${variant}`
+  }, props), separatorProps));
+};
+
+// src/Field/Field.tsx
+var import_react19 = __toESM(require("react"));
+var import_textfield = require("@react-aria/textfield");
+var import_icons5 = require("@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 = (0, import_react19.useRef)(null);
+  const { labelProps, inputProps, errorMessageProps } = (0, import_textfield.useTextField)(props, ref);
+  return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(Label, __spreadValues({
+    variant: labelVariant,
+    htmlFor,
+    required
+  }, labelProps), props.label), /* @__PURE__ */ import_react19.default.createElement(import_system.Box, __spreadValues(__spreadProps(__spreadValues({
+    as: "input",
+    type,
+    id: htmlFor,
+    variant: `input.${variant}`
+  }, inputProps), {
+    ref
+  }), props)), error && errorMessage && /* @__PURE__ */ import_react19.default.createElement(ValidationMessage, __spreadValues({}, errorMessageProps), /* @__PURE__ */ import_react19.default.createElement(import_icons5.Exclamation, {
+    size: 16
+  }), errorMessage));
+};
+
+// src/VisuallyHidden/VisuallyHidden.tsx
+var import_visually_hidden2 = require("@react-aria/visually-hidden");
+
+// src/Image/Image.tsx
+var import_react20 = __toESM(require("react"));
+var Image = (_a) => {
+  var _b = _a, {
+    variant = "fullWidth"
+  } = _b, props = __objRest(_b, [
+    "variant"
+  ]);
+  return /* @__PURE__ */ import_react20.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
+    as: "img",
+    variant: `image.${variant}`
+  }));
+};
+
+// src/Link/Link.tsx
+var import_react21 = __toESM(require("react"));
+var import_link = require("@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 = (0, import_react21.useRef)();
+  const { linkProps } = (0, import_link.useLink)(__spreadProps(__spreadValues({}, props), {
+    elementType: typeof as === "string" ? as : "span",
+    isDisabled: disabled
+  }), ref);
+  return /* @__PURE__ */ import_react21.default.createElement(Text, __spreadProps(__spreadValues(__spreadValues({}, props), linkProps), {
+    as,
+    variant,
+    ref
+  }), children);
+};
+
+// src/Menu/Menu.tsx
+var import_react22 = __toESM(require("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__ */ import_react22.default.createElement(import_system.Box, __spreadValues({
+    variant: `menu.${variant}`
+  }, props), /* @__PURE__ */ import_react22.default.createElement(Button, {
+    onClick,
+    variant: "menu"
+  }, label), show ? /* @__PURE__ */ import_react22.default.createElement(import_system.Box, {
+    display: "block",
+    position: "absolute",
+    minWidth: "120px",
+    borderRadius: "2px"
+  }, children) : null);
+};
+
+// src/MenuItem/MenuItem.tsx
+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
+  }, /* @__PURE__ */ import_react23.default.createElement(Link, __spreadValues({
+    variant: "menuItemLink"
+  }, props), children));
+};
+
+// src/Message/Message.tsx
+var import_react24 = __toESM(require("react"));
+var import_icons6 = require("@marigold/icons");
+var Message = (_a) => {
+  var _b = _a, {
+    messageTitle,
+    variant = "info",
+    className,
+    children
+  } = _b, props = __objRest(_b, [
+    "messageTitle",
+    "variant",
+    "className",
+    "children"
+  ]);
+  var icon = /* @__PURE__ */ import_react24.default.createElement(import_icons6.Info, null);
+  if (variant === "warning") {
+    icon = /* @__PURE__ */ import_react24.default.createElement(import_icons6.Notification, null);
+  }
+  if (variant === "error") {
+    icon = /* @__PURE__ */ import_react24.default.createElement(import_icons6.Exclamation, null);
+  }
+  return /* @__PURE__ */ import_react24.default.createElement(import_system.Box, __spreadValues({
+    display: "inline-block",
+    variant: `message.${variant}`,
+    className
+  }, props), /* @__PURE__ */ import_react24.default.createElement(import_system.Box, {
+    display: "flex",
+    alignItems: "center",
+    variant: "message.title"
+  }, icon, /* @__PURE__ */ import_react24.default.createElement(Text, {
+    as: "h4",
+    variant: "headline4"
+  }, messageTitle)), /* @__PURE__ */ import_react24.default.createElement(import_system.Box, {
+    css: { color: "black" }
+  }, children));
+};
+
+// src/Provider/index.ts
+var import_system5 = require("@marigold/system");
+var import_ssr = require("@react-aria/ssr");
+
+// src/Provider/MarigoldProvider.tsx
+var import_react25 = __toESM(require("react"));
+var import_overlays4 = require("@react-aria/overlays");
+var import_system4 = require("@marigold/system");
+function MarigoldProvider({
+  theme,
+  children
+}) {
+  const outer = (0, import_system4.useTheme)();
+  const isTopLevel = outer.theme === import_system4.__defaultTheme;
+  return /* @__PURE__ */ import_react25.default.createElement(import_system4.ThemeProvider, {
+    theme
+  }, isTopLevel ? /* @__PURE__ */ import_react25.default.createElement(import_react25.default.Fragment, null, /* @__PURE__ */ import_react25.default.createElement(import_system4.Global, null), /* @__PURE__ */ import_react25.default.createElement(import_overlays4.OverlayProvider, null, children)) : children);
 }
+
+// src/Radio/Radio.tsx
+var import_react27 = __toESM(require("react"));
+var import_icons7 = require("@marigold/icons");
+var import_focus3 = require("@react-aria/focus");
+var import_visually_hidden3 = require("@react-aria/visually-hidden");
+
+// src/Radio/RadioIcon.tsx
+var import_react26 = __toESM(require("react"));
+var import_system6 = require("@marigold/system");
+var RadioIcon = ({
+  variant = "",
+  checked = false,
+  disabled = false,
+  error = false
+}) => {
+  const conditionalStates = disabled ? {
+    disabled
+  } : {
+    checked,
+    error
+  };
+  return /* @__PURE__ */ import_react26.default.createElement(import_system6.SVG, {
+    width: "16",
+    height: "32",
+    viewBox: "0 0 16 32",
+    fill: "none",
+    "aria-hidden": "true"
+  }, /* @__PURE__ */ import_react26.default.createElement(import_system.Box, {
+    variant: (0, import_system6.conditional)(`radio.${variant}`, conditionalStates),
+    as: "circle",
+    cx: "8",
+    cy: "16",
+    r: "7.5"
+  }), checked && /* @__PURE__ */ import_react26.default.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 } = (0, import_focus3.useFocusRing)();
+  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, {
+    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__ */ import_react27.default.createElement(import_react27.default.Fragment, null, /* @__PURE__ */ import_react27.default.createElement(import_system.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__ */ 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, {
+    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_select = require("@react-stately/select");
+var import_button3 = require("@react-aria/button");
+var import_utils3 = 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");
+
+// src/Select/ListBox.tsx
+var import_react31 = __toESM(require("react"));
+var import_listbox3 = require("@react-aria/listbox");
+
+// src/Select/Option.tsx
+var import_react29 = __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 { optionProps, isSelected } = (0, import_listbox.useOption)({
+    key: item.key
+  }, state, ref);
+  (0, import_react29.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({
+    as: "li"
+  }, optionProps), {
+    ref,
+    variant: isSelected ? "select.option.selected" : disabled ? "select.option.disabled" : "select.option"
+  }), item.rendered);
+};
+
+// src/Select/ListBoxSection.tsx
+var import_react30 = __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({
+    as: "li"
+  }, itemProps), {
+    css: {
+      cursor: "not-allowed"
+    }
+  }), section.rendered && /* @__PURE__ */ import_react30.default.createElement(import_system.Box, __spreadProps(__spreadValues({
+    as: "span"
+  }, headingProps), {
+    variant: "select.section"
+  }), section.rendered), /* @__PURE__ */ import_react30.default.createElement(import_system.Box, __spreadValues({
+    as: "ul"
+  }, groupProps), [...section.childNodes].map((node) => /* @__PURE__ */ import_react30.default.createElement(Option, {
+    key: node.key,
+    item: node,
+    state
+  }))));
+};
+
+// src/Select/ListBox.tsx
+var ListBox = (props) => {
+  const ref = (0, import_react31.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({
+    as: "ul",
+    p: "none",
+    css: {
+      listStyle: "none"
+    }
+  }, listBoxProps), {
+    variant: error ? "select.listbox.error" : "select.listbox",
+    ref
+  }), [...state.collection].map((item) => item.type === "section" ? /* @__PURE__ */ import_react31.default.createElement(ListBoxSection, {
+    key: item.key,
+    section: item,
+    state
+  }) : /* @__PURE__ */ import_react31.default.createElement(Option, {
+    key: item.key,
+    item,
+    state
+  })));
+};
+
+// src/Select/Popover.tsx
+var import_react32 = __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 _b = _a, { children, className, isOpen, onClose } = _b, otherProps = __objRest(_b, ["children", "className", "isOpen", "onClose"]);
+  const { overlayProps } = (0, import_overlays5.useOverlay)({
+    isOpen,
+    onClose,
+    shouldCloseOnBlur: true,
+    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, {
+    restoreFocus: true
+  }, /* @__PURE__ */ import_react32.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, (0, import_utils2.mergeProps)(overlayProps, otherProps, modalProps)), {
+    className,
+    ref
+  }), children, /* @__PURE__ */ import_react32.default.createElement(import_overlays5.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 = (0, import_select.useSelectState)(props);
+  const overlayTriggerState = (0, import_overlays6.useOverlayTriggerState)({});
+  const triggerRef = (0, import_react33.useRef)();
+  const overlayRef = (0, import_react33.useRef)();
+  const { overlayProps } = (0, import_overlays7.useOverlayTrigger)({ type: "listbox" }, overlayTriggerState, triggerRef);
+  const { overlayProps: positionProps } = (0, import_overlays7.useOverlayPosition)({
+    targetRef: triggerRef,
+    overlayRef,
+    placement: "bottom",
+    shouldFlip: false,
+    isOpen: state.isOpen,
+    onClose: state.close
+  });
+  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, {
+    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), {
+    htmlFor: labelProps.id,
+    variant: labelVariant
+  }), required ? /* @__PURE__ */ import_react33.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,
+    size: 16,
+    css: { color: "error" }
+  })) : props.label)), /* @__PURE__ */ import_react33.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({
+    as: "button"
+  }, (0, import_utils3.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({
+    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,
+    size: 16,
+    css: { fill: "text" }
+  }) : /* @__PURE__ */ import_react33.default.createElement(import_system.Box, {
+    as: import_icons8.ArrowDown,
+    size: 16,
+    css: { fill: disabled ? "disabled" : "text" }
+  })), state.isOpen && !disabled && /* @__PURE__ */ import_react33.default.createElement(import_system.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__ */ import_react33.default.createElement(ListBox, __spreadProps(__spreadValues({
+    error
+  }, menuProps), {
+    state
+  }))), error && errorMessage && /* @__PURE__ */ import_react33.default.createElement(import_system.Box, {
+    as: "span",
+    display: "inline-flex",
+    alignItems: "center"
+  }, /* @__PURE__ */ import_react33.default.createElement(import_system.Box, {
+    as: import_icons8.Exclamation,
+    size: 16,
+    css: { color: "error" }
+  }), /* @__PURE__ */ import_react33.default.createElement(ValidationMessage, null, errorMessage)));
+};
+
+// src/Textarea/Textarea.tsx
+var import_react34 = __toESM(require("react"));
+var import_textfield2 = require("@react-aria/textfield");
+var import_icons9 = require("@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 = (0, import_react34.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({
+    htmlFor,
+    required
+  }, labelProps), props.label), /* @__PURE__ */ import_react34.default.createElement(import_system.Box, __spreadValues(__spreadProps(__spreadValues({
+    as: "textarea",
+    variant: `textarea.${variant}`,
+    css: {
+      outlineColor: error && "error"
+    }
+  }, inputProps), {
+    ref
+  }), props)), error && errorMessage && /* @__PURE__ */ import_react34.default.createElement(ValidationMessage, __spreadValues({}, errorMessageProps), /* @__PURE__ */ import_react34.default.createElement(import_icons9.Exclamation, {
+    size: 16
+  }), errorMessage));
+};
+
+// src/Input/Input.tsx
+var import_react35 = __toESM(require("react"));
+var Input = (_a) => {
+  var _b = _a, {
+    variant = "",
+    type = "text"
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "type"
+  ]);
+  return /* @__PURE__ */ import_react35.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
+    as: "input",
+    type,
+    variant: `input.${variant}`
+  }));
+};
+
+// src/Container/Container.tsx
+var import_react36 = __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), {
+    width: "100%"
+  }), children);
+};
+
+// src/index.ts
+var import_collections = require("@react-stately/collections");
+module.exports = __toCommonJS(src_exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  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,
+  ThemeProvider,
+  ValidationMessage,
+  VisuallyHidden,
+  useDialogButtonProps,
+  useTheme
+});