@mond-design-system/react 1.0.0-alpha.0

package/dist/index.js

@@ -0,0 +1,1246 @@
+import { createContext, createElement, useContext, Children, useId, useState, useRef, useCallback, useMemo, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
+
+// src/internal/cx.ts
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+
+// src/components/Text/Text.module.css
+var Text_default = {
+  text: "Text_text",
+  "variant-body": "Text_variant-body",
+  "variant-label": "Text_variant-label",
+  "variant-note": "Text_variant-note",
+  "variant-meta": "Text_variant-meta",
+  "variant-eyebrow": "Text_variant-eyebrow",
+  "tone-primary": "Text_tone-primary",
+  "tone-secondary": "Text_tone-secondary",
+  "tone-muted": "Text_tone-muted",
+  "tone-inverse": "Text_tone-inverse",
+  "tone-accent": "Text_tone-accent",
+  "tone-on-media": "Text_tone-on-media",
+  "tone-danger": "Text_tone-danger",
+  "tone-warning": "Text_tone-warning",
+  "tone-success": "Text_tone-success",
+  "align-left": "Text_align-left",
+  "align-center": "Text_align-center",
+  "align-right": "Text_align-right",
+  truncate: "Text_truncate"
+};
+
+// src/components/Text/Text.tsx
+var ELEMENT = {
+  body: "p",
+  label: "span",
+  note: "p",
+  meta: "span",
+  eyebrow: "span"
+};
+var DEFAULT_TONE = {
+  note: "secondary",
+  meta: "muted",
+  eyebrow: "muted"
+};
+function Text({
+  variant = "body",
+  as,
+  tone,
+  align,
+  truncate = false,
+  className,
+  ...rest
+}) {
+  const element = as ?? ELEMENT[variant];
+  const resolvedTone = tone ?? DEFAULT_TONE[variant] ?? "primary";
+  return createElement(element, {
+    className: cx(
+      Text_default.text,
+      Text_default[`variant-${variant}`],
+      Text_default[`tone-${resolvedTone}`],
+      align && Text_default[`align-${align}`],
+      truncate && Text_default.truncate,
+      className
+    ),
+    ...rest
+  });
+}
+
+// src/components/Heading/Heading.module.css
+var Heading_default = {
+  heading: "Heading_heading",
+  "variant-display": "Heading_variant-display",
+  "variant-title": "Heading_variant-title",
+  "variant-subtitle": "Heading_variant-subtitle",
+  "tone-primary": "Heading_tone-primary",
+  "tone-secondary": "Heading_tone-secondary",
+  "tone-inverse": "Heading_tone-inverse",
+  "tone-accent": "Heading_tone-accent",
+  "tone-on-media": "Heading_tone-on-media"
+};
+
+// src/components/Heading/Heading.tsx
+var LEVEL_VARIANT = {
+  1: "display",
+  2: "title",
+  3: "subtitle",
+  4: "subtitle"
+};
+function Heading({
+  level = 2,
+  variant,
+  tone = "primary",
+  className,
+  ...rest
+}) {
+  return createElement(`h${level}`, {
+    className: cx(
+      Heading_default.heading,
+      Heading_default[`variant-${variant ?? LEVEL_VARIANT[level]}`],
+      Heading_default[`tone-${tone}`],
+      className
+    ),
+    ...rest
+  });
+}
+
+// src/components/Spinner/Spinner.module.css
+var Spinner_default = {
+  spinner: "Spinner_spinner"
+};
+function Spinner({
+  size = 20,
+  label = "Loading",
+  className,
+  style,
+  ...rest
+}) {
+  const vars = {
+    "--spinner-size": `${size}px`,
+    "--spinner-border": `${Math.max(2, Math.round(size / 10))}px`
+  };
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "status",
+      "aria-label": label,
+      className: cx(Spinner_default.spinner, className),
+      style: { ...vars, ...style },
+      ...rest
+    }
+  );
+}
+
+// src/components/Icon/Icon.module.css
+var Icon_default = {
+  icon: "Icon_icon",
+  "size-sm": "Icon_size-sm",
+  "size-md": "Icon_size-md",
+  "size-lg": "Icon_size-lg"
+};
+var IconContext = createContext(null);
+function IconProvider({ render, children }) {
+  return /* @__PURE__ */ jsx(IconContext.Provider, { value: render, children });
+}
+var SIZE_PX = { sm: 16, md: 20, lg: 24 };
+var warned = /* @__PURE__ */ new Set();
+function Icon({ name, size = "md", label, className, ...rest }) {
+  const render = useContext(IconContext);
+  if (render === null && !warned.has(name)) {
+    warned.add(name);
+    console.error(
+      `Icon "${name}": no IconProvider above this tree. Register the app's icon set once at the root.`
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cx(Icon_default.icon, Icon_default[`size-${size}`], className),
+      ...label ? { role: "img", "aria-label": label } : { "aria-hidden": true },
+      ...rest,
+      children: render?.(name, { size: SIZE_PX[size] })
+    }
+  );
+}
+
+// src/components/Button/Button.module.css
+var Button_default = {
+  button: "Button_button",
+  "size-sm": "Button_size-sm",
+  "size-md": "Button_size-md",
+  "size-lg": "Button_size-lg",
+  "variant-primary": "Button_variant-primary",
+  "variant-secondary": "Button_variant-secondary",
+  "variant-ghost": "Button_variant-ghost",
+  "variant-danger": "Button_variant-danger",
+  fullWidth: "Button_fullWidth",
+  "icon-only": "Button_icon-only"
+};
+var SPINNER_PX = { sm: 16, md: 18, lg: 20 };
+function Button({
+  variant = "primary",
+  size = "md",
+  iconLeft,
+  iconRight,
+  loading = false,
+  disabled = false,
+  fullWidth = false,
+  iconOnly = false,
+  type = "button",
+  href,
+  as,
+  className,
+  children,
+  ...rest
+}) {
+  const Element = as ?? (href !== void 0 ? "a" : "button");
+  const isButton = Element === "button";
+  const own = isButton ? { type, disabled: disabled || loading } : { href };
+  return /* @__PURE__ */ jsxs(
+    Element,
+    {
+      className: cx(
+        Button_default.button,
+        Button_default[`variant-${variant}`],
+        Button_default[`size-${size}`],
+        fullWidth && Button_default.fullWidth,
+        iconOnly && Button_default["icon-only"],
+        className
+      ),
+      "aria-busy": loading || void 0,
+      ...own,
+      ...rest,
+      children: [
+        loading ? /* @__PURE__ */ jsx(Spinner, { size: SPINNER_PX[size] }) : iconLeft,
+        children,
+        !loading && iconRight
+      ]
+    }
+  );
+}
+
+// src/components/Link/Link.module.css
+var Link_default = {
+  link: "Link_link",
+  "variant-inline": "Link_variant-inline",
+  "variant-standalone": "Link_variant-standalone"
+};
+function Link({
+  variant = "inline",
+  external = false,
+  as: Element = "a",
+  className,
+  ...rest
+}) {
+  const externalProps = external ? { target: "_blank", rel: "noopener noreferrer" } : {};
+  return /* @__PURE__ */ jsx(
+    Element,
+    {
+      className: cx(Link_default.link, Link_default[`variant-${variant}`], className),
+      ...externalProps,
+      ...rest
+    }
+  );
+}
+
+// src/components/Avatar/Avatar.module.css
+var Avatar_default = {
+  avatar: "Avatar_avatar",
+  "size-sm": "Avatar_size-sm",
+  "size-md": "Avatar_size-md",
+  "size-lg": "Avatar_size-lg",
+  image: "Avatar_image",
+  initials: "Avatar_initials"
+};
+function initials(name) {
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  const first = words[0]?.[0] ?? "";
+  const last = words.length > 1 ? words.at(-1)?.[0] ?? "" : "";
+  return (first + last).toUpperCase();
+}
+function Avatar({ name, src, size = "md", className, ...rest }) {
+  return /* @__PURE__ */ jsx("span", { className: cx(Avatar_default.avatar, Avatar_default[`size-${size}`], className), ...rest, children: src ? /* @__PURE__ */ jsx("img", { className: Avatar_default.image, src, alt: name }) : /* @__PURE__ */ jsx("span", { role: "img", "aria-label": name, className: Avatar_default.initials, children: initials(name) }) });
+}
+
+// src/components/AvatarGroup/AvatarGroup.module.css
+var AvatarGroup_default = {
+  group: "AvatarGroup_group",
+  item: "AvatarGroup_item",
+  overflow: "AvatarGroup_overflow",
+  "size-sm": "AvatarGroup_size-sm",
+  "size-md": "AvatarGroup_size-md",
+  "size-lg": "AvatarGroup_size-lg"
+};
+function AvatarGroup({
+  children,
+  max = 4,
+  size = "md",
+  className,
+  ...rest
+}) {
+  const all = Children.toArray(children);
+  const visible = all.slice(0, max);
+  const hidden = all.length - visible.length;
+  return /* @__PURE__ */ jsxs("div", { className: cx(AvatarGroup_default.group, className), ...rest, children: [
+    visible.map((child, i) => /* @__PURE__ */ jsx("span", { className: AvatarGroup_default.item, children: child }, i)),
+    hidden > 0 && /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cx(AvatarGroup_default.item, AvatarGroup_default.overflow, AvatarGroup_default[`size-${size}`]),
+        "aria-label": `${hidden} more`,
+        children: [
+          "+",
+          hidden
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/Badge/Badge.module.css
+var Badge_default = {
+  badge: "Badge_badge",
+  "tone-neutral": "Badge_tone-neutral",
+  "tone-accent": "Badge_tone-accent",
+  "tone-danger": "Badge_tone-danger",
+  "tone-warning": "Badge_tone-warning",
+  "tone-success": "Badge_tone-success"
+};
+function Badge({ tone = "neutral", className, ...rest }) {
+  return /* @__PURE__ */ jsx("span", { className: cx(Badge_default.badge, Badge_default[`tone-${tone}`], className), ...rest });
+}
+
+// src/components/Tag/Tag.module.css
+var Tag_default = {
+  tag: "Tag_tag",
+  "tone-accent": "Tag_tone-accent",
+  remove: "Tag_remove",
+  removeGlyph: "Tag_removeGlyph"
+};
+function Tag({ children, tone = "neutral", onRemove, className, ...rest }) {
+  const text = typeof children === "string" ? children : void 0;
+  return /* @__PURE__ */ jsxs("span", { className: cx(Tag_default.tag, Tag_default[`tone-${tone}`], className), ...rest, children: [
+    children,
+    onRemove && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: Tag_default.remove,
+        "aria-label": text ? `Remove ${text}` : "Remove",
+        onClick: onRemove,
+        children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: Tag_default.removeGlyph, children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) })
+      }
+    )
+  ] });
+}
+
+// src/components/Divider/Divider.module.css
+var Divider_default = {
+  divider: "Divider_divider",
+  horizontal: "Divider_horizontal",
+  vertical: "Divider_vertical"
+};
+function Divider({ orientation = "horizontal", className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "separator",
+      "aria-orientation": orientation === "vertical" ? "vertical" : void 0,
+      className: cx(Divider_default.divider, Divider_default[orientation], className),
+      ...rest
+    }
+  );
+}
+
+// src/components/Skeleton/Skeleton.module.css
+var Skeleton_default = {
+  skeleton: "Skeleton_skeleton",
+  pulse: "Skeleton_pulse",
+  "variant-text": "Skeleton_variant-text",
+  "variant-rect": "Skeleton_variant-rect",
+  "variant-circle": "Skeleton_variant-circle"
+};
+function Skeleton({
+  variant = "text",
+  width,
+  height,
+  className,
+  style,
+  ...rest
+}) {
+  const vars = {
+    ...width ? { "--skeleton-w": width } : {},
+    ...height ? { "--skeleton-h": height } : {}
+  };
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cx(Skeleton_default.skeleton, Skeleton_default[`variant-${variant}`], className),
+      style: { ...vars, ...style },
+      ...rest
+    }
+  );
+}
+
+// src/components/ProgressBar/ProgressBar.module.css
+var ProgressBar_default = {
+  track: "ProgressBar_track",
+  fill: "ProgressBar_fill",
+  indeterminate: "ProgressBar_indeterminate"};
+function ProgressBar({
+  value = 0,
+  label,
+  indeterminate = false,
+  className,
+  style,
+  ...rest
+}) {
+  const clamped = Math.min(100, Math.max(0, value));
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "progressbar",
+      "aria-label": label,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": indeterminate ? void 0 : clamped,
+      className: cx(ProgressBar_default.track, indeterminate && ProgressBar_default.indeterminate, className),
+      style: { ...{ "--progress": `${clamped}%` }, ...style },
+      ...rest,
+      children: /* @__PURE__ */ jsx("span", { className: ProgressBar_default.fill })
+    }
+  );
+}
+
+// src/components/Field/Field.module.css
+var Field_default = {
+  field: "Field_field",
+  label: "Field_label",
+  required: "Field_required",
+  message: "Field_message",
+  error: "Field_error"
+};
+var FieldContext = createContext(null);
+function useFieldContext() {
+  return useContext(FieldContext);
+}
+function Field({ label, children, hint, error, required = false, className }) {
+  const id = useId();
+  const messageId = `${id}-message`;
+  const message = error ?? hint;
+  return /* @__PURE__ */ jsxs("div", { className: cx(Field_default.field, className), children: [
+    /* @__PURE__ */ jsxs("label", { className: Field_default.label, htmlFor: id, children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { className: Field_default.required, "aria-hidden": "true", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      FieldContext.Provider,
+      {
+        value: { id, describedBy: message ? messageId : void 0, invalid: error !== void 0 },
+        children
+      }
+    ),
+    message && /* @__PURE__ */ jsx("span", { id: messageId, className: cx(Field_default.message, error !== void 0 && Field_default.error), children: message })
+  ] });
+}
+
+// src/components/Input/Input.module.css
+var Input_default = {
+  input: "Input_input",
+  "size-sm": "Input_size-sm",
+  "size-md": "Input_size-md",
+  "size-lg": "Input_size-lg"
+};
+function Input({ size = "md", className, ...rest }) {
+  const field = useFieldContext();
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      id: rest.id ?? field?.id,
+      "aria-describedby": rest["aria-describedby"] ?? field?.describedBy,
+      "aria-invalid": rest["aria-invalid"] ?? (field?.invalid || void 0),
+      className: cx(Input_default.input, Input_default[`size-${size}`], className),
+      ...rest
+    }
+  );
+}
+
+// src/components/PasswordInput/PasswordInput.module.css
+var PasswordInput_default = {
+  wrap: "PasswordInput_wrap",
+  input: "PasswordInput_input",
+  toggle: "PasswordInput_toggle"
+};
+function PasswordInput({ className, ...rest }) {
+  const [visible, setVisible] = useState(false);
+  return /* @__PURE__ */ jsxs("span", { className: PasswordInput_default.wrap, children: [
+    /* @__PURE__ */ jsx(Input, { ...rest, type: visible ? "text" : "password", className: cx(PasswordInput_default.input, className) }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: PasswordInput_default.toggle,
+        "aria-label": visible ? "Hide password" : "Show password",
+        "aria-pressed": visible,
+        onClick: () => setVisible((v) => !v),
+        children: visible ? (
+          /* eye-off */
+          /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94" }),
+            /* @__PURE__ */ jsx("path", { d: "M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19" }),
+            /* @__PURE__ */ jsx("path", { d: "M14.12 14.12a3 3 0 1 1-4.24-4.24" }),
+            /* @__PURE__ */ jsx("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
+          ] })
+        ) : (
+          /* eye */
+          /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8Z" }),
+            /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
+          ] })
+        )
+      }
+    )
+  ] });
+}
+
+// src/components/Textarea/Textarea.module.css
+var Textarea_default = {
+  textarea: "Textarea_textarea",
+  wrap: "Textarea_wrap",
+  count: "Textarea_count"
+};
+function Textarea({ rows = 3, showCount = false, className, ...rest }) {
+  const field = useFieldContext();
+  const [tracked, setTracked] = useState(() => String(rest.defaultValue ?? ""));
+  const current = rest.value !== void 0 ? String(rest.value) : tracked;
+  const onChange = (event) => {
+    setTracked(event.target.value);
+    rest.onChange?.(event);
+  };
+  const textarea = /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      id: rest.id ?? field?.id,
+      "aria-describedby": rest["aria-describedby"] ?? field?.describedBy,
+      "aria-invalid": rest["aria-invalid"] ?? (field?.invalid || void 0),
+      rows,
+      className: cx(Textarea_default.textarea, className),
+      ...rest,
+      ...showCount ? { onChange } : {}
+    }
+  );
+  if (!showCount) return textarea;
+  return /* @__PURE__ */ jsxs("span", { className: Textarea_default.wrap, children: [
+    textarea,
+    /* @__PURE__ */ jsx("span", { className: Textarea_default.count, "aria-hidden": "true", children: rest.maxLength !== void 0 ? `${current.length}/${rest.maxLength}` : current.length })
+  ] });
+}
+
+// src/components/Select/Select.module.css
+var Select_default = {
+  wrap: "Select_wrap",
+  select: "Select_select",
+  "size-sm": "Select_size-sm",
+  "size-md": "Select_size-md",
+  "size-lg": "Select_size-lg",
+  chevron: "Select_chevron"
+};
+function Select({ size = "md", className, children, ...rest }) {
+  const field = useFieldContext();
+  return /* @__PURE__ */ jsxs("span", { className: Select_default.wrap, children: [
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        id: rest.id ?? field?.id,
+        "aria-describedby": rest["aria-describedby"] ?? field?.describedBy,
+        "aria-invalid": rest["aria-invalid"] ?? (field?.invalid || void 0),
+        className: cx(Select_default.select, Select_default[`size-${size}`], className),
+        ...rest,
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: Select_default.chevron, children: /* @__PURE__ */ jsx("path", { d: "M4 6l4 4 4-4", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) })
+  ] });
+}
+
+// src/components/Checkbox/Checkbox.module.css
+var Checkbox_default = {
+  root: "Checkbox_root",
+  box: "Checkbox_box",
+  label: "Checkbox_label"
+};
+function Checkbox({ label, className, ...rest }) {
+  return /* @__PURE__ */ jsxs("label", { className: cx(Checkbox_default.root, className), children: [
+    /* @__PURE__ */ jsx("input", { type: "checkbox", className: Checkbox_default.box, ...rest }),
+    /* @__PURE__ */ jsx("span", { className: Checkbox_default.label, children: label })
+  ] });
+}
+
+// src/components/Radio/Radio.module.css
+var Radio_default = {
+  root: "Radio_root",
+  dot: "Radio_dot",
+  label: "Radio_label"
+};
+function Radio({ label, className, ...rest }) {
+  return /* @__PURE__ */ jsxs("label", { className: cx(Radio_default.root, className), children: [
+    /* @__PURE__ */ jsx("input", { type: "radio", className: Radio_default.dot, ...rest }),
+    /* @__PURE__ */ jsx("span", { className: Radio_default.label, children: label })
+  ] });
+}
+
+// src/components/Switch/Switch.module.css
+var Switch_default = {
+  root: "Switch_root",
+  track: "Switch_track",
+  label: "Switch_label"
+};
+function Switch({ label, className, ...rest }) {
+  return /* @__PURE__ */ jsxs("label", { className: cx(Switch_default.root, className), children: [
+    /* @__PURE__ */ jsx("input", { type: "checkbox", role: "switch", className: Switch_default.track, ...rest }),
+    /* @__PURE__ */ jsx("span", { className: Switch_default.label, children: label })
+  ] });
+}
+
+// src/components/SegmentedControl/SegmentedControl.module.css
+var SegmentedControl_default = {
+  group: "SegmentedControl_group",
+  segment: "SegmentedControl_segment",
+  input: "SegmentedControl_input",
+  face: "SegmentedControl_face"
+};
+function SegmentedControl({
+  label,
+  options,
+  value,
+  onChange,
+  className
+}) {
+  const name = useId();
+  return /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-label": label, className: cx(SegmentedControl_default.group, className), children: options.map((option) => /* @__PURE__ */ jsxs("label", { className: SegmentedControl_default.segment, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "radio",
+        name,
+        value: option.value,
+        checked: option.value === value,
+        onChange: () => onChange(option.value),
+        className: SegmentedControl_default.input
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: SegmentedControl_default.face, children: option.label })
+  ] }, option.value)) });
+}
+
+// src/components/SearchField/SearchField.module.css
+var SearchField_default = {
+  wrap: "SearchField_wrap",
+  glass: "SearchField_glass",
+  input: "SearchField_input",
+  clear: "SearchField_clear",
+  clearGlyph: "SearchField_clearGlyph"
+};
+function SearchField({ label, value, onChange, className, ...rest }) {
+  return /* @__PURE__ */ jsxs("span", { className: cx(SearchField_default.wrap, className), children: [
+    /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: SearchField_default.glass, children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M7 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10Zm7 2-3.5-3.5",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "search",
+        "aria-label": label,
+        value,
+        onChange: (event) => onChange(event.target.value),
+        className: SearchField_default.input,
+        ...rest
+      }
+    ),
+    value !== "" && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Clear search",
+        className: SearchField_default.clear,
+        onClick: () => onChange(""),
+        children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: SearchField_default.clearGlyph, children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) })
+      }
+    )
+  ] });
+}
+
+// src/components/List/List.module.css
+var List_default = {
+  group: "List_group",
+  item: "List_item",
+  row: "List_row",
+  interactive: "List_interactive",
+  leading: "List_leading",
+  trailing: "List_trailing",
+  text: "List_text",
+  title: "List_title",
+  description: "List_description"
+};
+function ListGroup({ className, ...rest }) {
+  return /* @__PURE__ */ jsx("ul", { className: cx(List_default.group, className), ...rest });
+}
+function ListItem({
+  title,
+  description,
+  leading,
+  trailing,
+  onClick,
+  href,
+  className,
+  ...rest
+}) {
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    leading != null && /* @__PURE__ */ jsx("span", { className: List_default.leading, children: leading }),
+    /* @__PURE__ */ jsxs("span", { className: List_default.text, children: [
+      /* @__PURE__ */ jsx("span", { className: List_default.title, children: title }),
+      description != null && /* @__PURE__ */ jsx("span", { className: List_default.description, children: description })
+    ] }),
+    trailing != null && /* @__PURE__ */ jsx("span", { className: List_default.trailing, children: trailing })
+  ] });
+  return /* @__PURE__ */ jsx("li", { className: cx(List_default.item, className), ...rest, children: href !== void 0 ? /* @__PURE__ */ jsx("a", { className: cx(List_default.row, List_default.interactive), href, children: content }) : onClick !== void 0 ? /* @__PURE__ */ jsx("button", { type: "button", className: cx(List_default.row, List_default.interactive), onClick, children: content }) : /* @__PURE__ */ jsx("span", { className: List_default.row, children: content }) });
+}
+
+// src/components/EmptyState/EmptyState.module.css
+var EmptyState_default = {
+  root: "EmptyState_root",
+  icon: "EmptyState_icon",
+  action: "EmptyState_action"
+};
+function EmptyState({ title, description, icon, action, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cx(EmptyState_default.root, className), children: [
+    icon != null && /* @__PURE__ */ jsx("span", { className: EmptyState_default.icon, "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsx(Heading, { level: 3, children: title }),
+    description !== void 0 && /* @__PURE__ */ jsx(Text, { tone: "secondary", children: description }),
+    action != null && /* @__PURE__ */ jsx("span", { className: EmptyState_default.action, children: action })
+  ] });
+}
+
+// src/components/Tabs/Tabs.module.css
+var Tabs_default = {
+  list: "Tabs_list",
+  tab: "Tabs_tab",
+  selected: "Tabs_selected",
+  panel: "Tabs_panel"
+};
+var TabsContext = createContext(null);
+function useTabs(component) {
+  const context = useContext(TabsContext);
+  if (context === null) throw new Error(`${component} must sit inside <Tabs>`);
+  return context;
+}
+function Tabs({ value, onChange, children }) {
+  const baseId = useId();
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { value, onChange, baseId }, children });
+}
+function onArrow(event, onChange) {
+  const keys = ["ArrowLeft", "ArrowRight", "Home", "End"];
+  if (!keys.includes(event.key)) return;
+  const tabs = [...event.currentTarget.querySelectorAll('[role="tab"]')];
+  const current = tabs.findIndex((tab2) => tab2 === document.activeElement);
+  if (current === -1) return;
+  event.preventDefault();
+  const next = event.key === "Home" ? 0 : event.key === "End" ? tabs.length - 1 : (current + (event.key === "ArrowRight" ? 1 : -1) + tabs.length) % tabs.length;
+  const tab = tabs[next];
+  if (!tab) return;
+  tab.focus();
+  const value = tab.dataset.value;
+  if (value !== void 0) onChange(value);
+}
+function TabList({ label, className, children, ...rest }) {
+  const { onChange } = useTabs("TabList");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tablist",
+      "aria-label": label,
+      className: cx(Tabs_default.list, className),
+      onKeyDown: (event) => onArrow(event, onChange),
+      ...rest,
+      children
+    }
+  );
+}
+function Tab({ value, className, children, ...rest }) {
+  const tabs = useTabs("Tab");
+  const selected = tabs.value === value;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      id: `${tabs.baseId}-tab-${value}`,
+      "aria-selected": selected,
+      "aria-controls": `${tabs.baseId}-panel-${value}`,
+      tabIndex: selected ? 0 : -1,
+      "data-value": value,
+      className: cx(Tabs_default.tab, selected && Tabs_default.selected, className),
+      onClick: () => tabs.onChange(value),
+      ...rest,
+      children
+    }
+  );
+}
+function TabPanel({ value, className, children, ...rest }) {
+  const tabs = useTabs("TabPanel");
+  const selected = tabs.value === value;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tabpanel",
+      id: `${tabs.baseId}-panel-${value}`,
+      "aria-labelledby": `${tabs.baseId}-tab-${value}`,
+      hidden: !selected,
+      className: cx(Tabs_default.panel, className),
+      ...rest,
+      children
+    }
+  );
+}
+
+// src/components/Toast/Toast.module.css
+var Toast_default = {
+  viewport: "Toast_viewport",
+  toast: "Toast_toast",
+  "tone-success": "Toast_tone-success",
+  "tone-danger": "Toast_tone-danger",
+  body: "Toast_body",
+  title: "Toast_title",
+  description: "Toast_description",
+  close: "Toast_close",
+  closeGlyph: "Toast_closeGlyph"
+};
+var ToastContext = createContext(null);
+function useToast() {
+  const context = useContext(ToastContext);
+  if (context === null) throw new Error("useToast needs a <ToastProvider> above it");
+  return context;
+}
+function ToastProvider({ children }) {
+  const [toasts, setToasts] = useState([]);
+  const nextId = useRef(1);
+  const dismiss = useCallback((id) => {
+    setToasts((current) => current.filter((entry) => entry.id !== id));
+  }, []);
+  const toast = useCallback(
+    ({ title, description, tone = "neutral", duration = 5e3 }) => {
+      const id = nextId.current++;
+      setToasts((current) => [...current, { id, title, description, tone }]);
+      if (duration > 0) setTimeout(() => dismiss(id), duration);
+      return id;
+    },
+    [dismiss]
+  );
+  const value = useMemo(() => ({ toast, dismiss }), [toast, dismiss]);
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value, children: [
+    children,
+    /* @__PURE__ */ jsx("div", { role: "region", "aria-label": "Notifications", className: Toast_default.viewport, children: toasts.map((entry) => /* @__PURE__ */ jsxs("div", { role: "status", className: cx(Toast_default.toast, Toast_default[`tone-${entry.tone}`]), children: [
+      /* @__PURE__ */ jsxs("span", { className: Toast_default.body, children: [
+        /* @__PURE__ */ jsx("span", { className: Toast_default.title, children: entry.title }),
+        entry.description !== void 0 && /* @__PURE__ */ jsx("span", { className: Toast_default.description, children: entry.description })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Dismiss",
+          className: Toast_default.close,
+          onClick: () => dismiss(entry.id),
+          children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: Toast_default.closeGlyph, children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) })
+        }
+      )
+    ] }, entry.id)) })
+  ] });
+}
+
+// src/components/Stack/Stack.module.css
+var Stack_default = {
+  stack: "Stack_stack",
+  "gap-hairline": "Stack_gap-hairline",
+  "gap-tight": "Stack_gap-tight",
+  "gap-base": "Stack_gap-base",
+  "gap-loose": "Stack_gap-loose",
+  "gap-section": "Stack_gap-section",
+  "align-start": "Stack_align-start",
+  "align-center": "Stack_align-center",
+  "align-end": "Stack_align-end",
+  "align-stretch": "Stack_align-stretch"
+};
+
+// src/components/Stack/Stack.tsx
+function Stack({
+  gap = "base",
+  align = "stretch",
+  as = "div",
+  className,
+  ...rest
+}) {
+  return createElement(as, {
+    className: cx(Stack_default.stack, Stack_default[`gap-${gap}`], Stack_default[`align-${align}`], className),
+    ...rest
+  });
+}
+
+// src/components/Inline/Inline.module.css
+var Inline_default = {
+  inline: "Inline_inline",
+  "gap-hairline": "Inline_gap-hairline",
+  "gap-tight": "Inline_gap-tight",
+  "gap-base": "Inline_gap-base",
+  "gap-loose": "Inline_gap-loose",
+  "align-start": "Inline_align-start",
+  "align-center": "Inline_align-center",
+  "align-end": "Inline_align-end",
+  "align-baseline": "Inline_align-baseline",
+  "justify-start": "Inline_justify-start",
+  "justify-center": "Inline_justify-center",
+  "justify-end": "Inline_justify-end",
+  "justify-between": "Inline_justify-between",
+  wrap: "Inline_wrap"
+};
+
+// src/components/Inline/Inline.tsx
+function Inline({
+  gap = "base",
+  align = "center",
+  justify = "start",
+  wrap = false,
+  as = "div",
+  className,
+  ...rest
+}) {
+  return createElement(as, {
+    className: cx(
+      Inline_default.inline,
+      Inline_default[`gap-${gap}`],
+      Inline_default[`align-${align}`],
+      Inline_default[`justify-${justify}`],
+      wrap && Inline_default.wrap,
+      className
+    ),
+    ...rest
+  });
+}
+
+// src/components/Container/Container.module.css
+var Container_default = {
+  container: "Container_container",
+  "width-content": "Container_width-content",
+  "width-wide": "Container_width-wide"
+};
+
+// src/components/Container/Container.tsx
+function Container({
+  width = "content",
+  as = "div",
+  className,
+  ...rest
+}) {
+  return createElement(as, {
+    className: cx(Container_default.container, Container_default[`width-${width}`], className),
+    ...rest
+  });
+}
+
+// src/components/Card/Card.module.css
+var Card_default = {
+  card: "Card_card",
+  "variant-raised": "Card_variant-raised",
+  interactive: "Card_interactive",
+  header: "Card_header",
+  body: "Card_body",
+  footer: "Card_footer"
+};
+function Card({ children, variant = "card", onClick, href, className, ...rest }) {
+  const cardClass = cx(Card_default.card, Card_default[`variant-${variant}`], className);
+  if (href !== void 0) {
+    return /* @__PURE__ */ jsx("a", { className: cx(cardClass, Card_default.interactive), href, ...rest, children });
+  }
+  if (onClick !== void 0) {
+    return /* @__PURE__ */ jsx("button", { type: "button", className: cx(cardClass, Card_default.interactive), onClick, ...rest, children });
+  }
+  return /* @__PURE__ */ jsx("div", { className: cardClass, ...rest, children });
+}
+function CardHeader({ className, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: cx(Card_default.header, className), ...rest });
+}
+function CardBody({ className, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: cx(Card_default.body, className), ...rest });
+}
+function CardFooter({ className, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: cx(Card_default.footer, className), ...rest });
+}
+var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function useOverlay(options) {
+  const ref = useRef(null);
+  const { open, onClose } = options;
+  const close = useRef(onClose);
+  useEffect(() => {
+    close.current = onClose;
+  }, [onClose]);
+  useEffect(() => {
+    if (!open) return;
+    const panel = ref.current;
+    const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    panel?.focus();
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        close.current();
+        return;
+      }
+      if (event.key !== "Tab" || !panel) return;
+      const focusable = [...panel.querySelectorAll(FOCUSABLE)];
+      if (focusable.length === 0) {
+        event.preventDefault();
+        panel.focus();
+        return;
+      }
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      const active = document.activeElement;
+      if (event.shiftKey && (active === first || active === panel)) {
+        event.preventDefault();
+        last?.focus();
+      } else if (!event.shiftKey && active === last) {
+        event.preventDefault();
+        first?.focus();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    const bodyOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      document.body.style.overflow = bodyOverflow;
+      previous?.focus();
+    };
+  }, [open]);
+  return ref;
+}
+function usePresence(open, durationMs) {
+  const [mounted, setMounted] = useState(open);
+  if (open && !mounted) setMounted(true);
+  useEffect(() => {
+    if (open) return;
+    const timer = setTimeout(() => setMounted(false), durationMs);
+    return () => clearTimeout(timer);
+  }, [open, durationMs]);
+  return { mounted: open || mounted, visible: open };
+}
+
+// src/components/Overlay/Overlay.module.css
+var Overlay_default = {
+  scrim: "Overlay_scrim",
+  "variant-modal": "Overlay_variant-modal",
+  "variant-sheet": "Overlay_variant-sheet"
+};
+var OVERLAY_EXIT_MS = 200;
+function Overlay({ open, onClose, label, variant, closeOnScrimClick, panelClassName, children }) {
+  const { mounted, visible } = usePresence(open, OVERLAY_EXIT_MS);
+  const ref = useOverlay({ open, onClose });
+  if (!mounted) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cx(Overlay_default.scrim, Overlay_default[`variant-${variant}`]),
+        "data-open": visible || void 0,
+        "data-testid": "mds-scrim",
+        onClick: closeOnScrimClick ? onClose : void 0,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": label,
+            tabIndex: -1,
+            className: panelClassName,
+            "data-open": visible || void 0,
+            onClick: (event) => event.stopPropagation(),
+            children
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+
+// src/components/Modal/Modal.module.css
+var Modal_default = {
+  panel: "Modal_panel",
+  header: "Modal_header",
+  body: "Modal_body",
+  footer: "Modal_footer"
+};
+function Modal({ open, onClose, label, closeOnScrimClick = true, children }) {
+  return /* @__PURE__ */ jsx(
+    Overlay,
+    {
+      open,
+      onClose,
+      label,
+      variant: "modal",
+      closeOnScrimClick,
+      panelClassName: Modal_default.panel,
+      children
+    }
+  );
+}
+function ModalHeader({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: Modal_default.header, children });
+}
+function ModalBody({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: Modal_default.body, children });
+}
+function ModalFooter({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: Modal_default.footer, children });
+}
+
+// src/components/Sheet/Sheet.module.css
+var Sheet_default = {
+  panel: "Sheet_panel",
+  header: "Sheet_header",
+  body: "Sheet_body",
+  footer: "Sheet_footer"
+};
+function Sheet({ open, onClose, label, closeOnScrimClick = true, children }) {
+  return /* @__PURE__ */ jsx(
+    Overlay,
+    {
+      open,
+      onClose,
+      label,
+      variant: "sheet",
+      closeOnScrimClick,
+      panelClassName: Sheet_default.panel,
+      children
+    }
+  );
+}
+function SheetHeader({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: Sheet_default.header, children });
+}
+function SheetBody({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: Sheet_default.body, children });
+}
+function SheetFooter({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: Sheet_default.footer, children });
+}
+
+// src/components/ConfirmDialog/ConfirmDialog.module.css
+var ConfirmDialog_default = {
+  description: "ConfirmDialog_description"
+};
+function ConfirmDialog({
+  open,
+  onClose,
+  onConfirm,
+  title,
+  description,
+  confirmLabel,
+  cancelLabel = "Cancel",
+  danger = false
+}) {
+  return /* @__PURE__ */ jsxs(Modal, { open, onClose, label: title, closeOnScrimClick: false, children: [
+    /* @__PURE__ */ jsx(ModalHeader, { children: title }),
+    /* @__PURE__ */ jsx(ModalBody, { children: description ? /* @__PURE__ */ jsx("p", { className: ConfirmDialog_default.description, children: description }) : null }),
+    /* @__PURE__ */ jsxs(ModalFooter, { children: [
+      /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onClose, children: cancelLabel }),
+      /* @__PURE__ */ jsx(Button, { variant: danger ? "danger" : "primary", onClick: onConfirm, children: confirmLabel })
+    ] })
+  ] });
+}
+
+// src/components/Screen/Screen.module.css
+var Screen_default = {
+  screen: "Screen_screen",
+  content: "Screen_content"
+};
+function Screen({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: Screen_default.screen, children });
+}
+function ScreenContent({ children }) {
+  return /* @__PURE__ */ jsx("main", { className: Screen_default.content, children });
+}
+
+// src/components/AppBar/AppBar.module.css
+var AppBar_default = {
+  bar: "AppBar_bar",
+  title: "AppBar_title",
+  slot: "AppBar_slot"
+};
+function AppBar({ title, leading, trailing }) {
+  return /* @__PURE__ */ jsxs("header", { className: AppBar_default.bar, children: [
+    leading ? /* @__PURE__ */ jsx("div", { className: AppBar_default.slot, children: leading }) : null,
+    title ? /* @__PURE__ */ jsx("h1", { className: AppBar_default.title, children: title }) : null,
+    trailing ? /* @__PURE__ */ jsx("div", { className: AppBar_default.slot, children: trailing }) : null
+  ] });
+}
+
+// src/components/TabBar/TabBar.module.css
+var TabBar_default = {
+  bar: "TabBar_bar",
+  item: "TabBar_item",
+  active: "TabBar_active",
+  icon: "TabBar_icon",
+  label: "TabBar_label"
+};
+function TabBar({ label, children }) {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": label, className: TabBar_default.bar, children });
+}
+function TabBarItem({ label, icon, href, onClick, active = false }) {
+  const className = cx(TabBar_default.item, active && TabBar_default.active);
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: TabBar_default.icon, "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsx("span", { className: TabBar_default.label, children: label })
+  ] });
+  if (href !== void 0) {
+    return /* @__PURE__ */ jsx("a", { href, className, "aria-current": active ? "page" : void 0, onClick, children: content });
+  }
+  return /* @__PURE__ */ jsx("button", { type: "button", className, "aria-current": active ? "page" : void 0, onClick, children: content });
+}
+function useRovingGroup(ref, { selector, orientation = "horizontal" }) {
+  return useCallback(
+    (event) => {
+      const horizontal = orientation !== "vertical";
+      const vertical = orientation !== "horizontal";
+      const forward = horizontal && event.key === "ArrowRight" || vertical && event.key === "ArrowDown";
+      const backward = horizontal && event.key === "ArrowLeft" || vertical && event.key === "ArrowUp";
+      const home = event.key === "Home";
+      const end = event.key === "End";
+      if (!forward && !backward && !home && !end) return;
+      const container = ref.current;
+      if (container === null) return;
+      const items = [...container.querySelectorAll(selector)].filter(
+        (item) => !item.hasAttribute("disabled")
+      );
+      const current = items.indexOf(document.activeElement);
+      if (items.length === 0 || current === -1) return;
+      event.preventDefault();
+      const next = home ? 0 : end ? items.length - 1 : (current + (forward ? 1 : -1) + items.length) % items.length;
+      items[next]?.focus();
+    },
+    [ref, selector, orientation]
+  );
+}
+
+export { AppBar, Avatar, AvatarGroup, Badge, Button, Card, CardBody, CardFooter, CardHeader, Checkbox, ConfirmDialog, Container, Divider, EmptyState, Field, Heading, Icon, IconProvider, Inline, Input, Link, ListGroup, ListItem, Modal, ModalBody, ModalFooter, ModalHeader, PasswordInput, ProgressBar, Radio, Screen, ScreenContent, SearchField, SegmentedControl, Select, Sheet, SheetBody, SheetFooter, SheetHeader, Skeleton, Spinner, Stack, Switch, Tab, TabBar, TabBarItem, TabList, TabPanel, Tabs, Tag, Text, Textarea, ToastProvider, cx, useFieldContext, useOverlay, usePresence, useRovingGroup, useToast };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map