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

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, createElement, useContext, Children, useId, useState, useRef, useCallback, useMemo, useEffect } from 'react';
+import { createContext, createElement, useContext, Children, useId, useRef, useEffect, useState, useMemo, useCallback } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
@@ -212,7 +212,7 @@ function Button({
       ...own,
       ...rest,
       children: [
-        loading ? /* @__PURE__ */ jsx(Spinner, { size: SPINNER_PX[size] }) : iconLeft,
+        loading ? /* @__PURE__ */ jsx(Spinner, { size: SPINNER_PX[size], label: "", "aria-hidden": "true" }) : iconLeft,
         children,
         !loading && iconRight
       ]
@@ -311,6 +311,661 @@ function Badge({ tone = "neutral", className, ...rest }) {
   return /* @__PURE__ */ jsx("span", { className: cx(Badge_default.badge, Badge_default[`tone-${tone}`], className), ...rest });
 }
 
+// src/components/Chip/Chip.module.css
+var Chip_default = {
+  chip: "Chip_chip",
+  "variant-soft": "Chip_variant-soft",
+  "variant-outline": "Chip_variant-outline",
+  selected: "Chip_selected",
+  interactive: "Chip_interactive",
+  disabled: "Chip_disabled"
+};
+function Chip({
+  children,
+  variant = "soft",
+  selected,
+  icon,
+  onClick,
+  disabled = false,
+  className,
+  ...rest
+}) {
+  const interactive = typeof onClick === "function";
+  const shared = {
+    className: cx(
+      Chip_default.chip,
+      Chip_default[`variant-${variant}`],
+      selected && Chip_default.selected,
+      interactive && !disabled && Chip_default.interactive,
+      disabled && Chip_default.disabled,
+      className
+    ),
+    ...rest
+  };
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon,
+    children
+  ] });
+  return interactive ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      disabled,
+      "aria-pressed": selected === void 0 ? void 0 : selected,
+      ...shared,
+      children: content
+    }
+  ) : /* @__PURE__ */ jsx("span", { ...shared, children: content });
+}
+
+// src/components/Chip/ChipGroup.module.css
+var ChipGroup_default = {
+  group: "ChipGroup_group",
+  "gap-hairline": "ChipGroup_gap-hairline",
+  "gap-tight": "ChipGroup_gap-tight",
+  "gap-base": "ChipGroup_gap-base"
+};
+function ChipGroup({ children, gap = "tight", className, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: cx(ChipGroup_default.group, ChipGroup_default[`gap-${gap}`], className), ...rest, children });
+}
+
+// src/components/Chip/ChipBar.module.css
+var ChipBar_default = {
+  bar: "ChipBar_bar",
+  "gap-hairline": "ChipBar_gap-hairline",
+  "gap-tight": "ChipBar_gap-tight",
+  "gap-base": "ChipBar_gap-base",
+  bordered: "ChipBar_bordered",
+  fade: "ChipBar_fade",
+  item: "ChipBar_item"
+};
+function ChipBar({
+  children,
+  gap = "tight",
+  bordered = false,
+  fade = true,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(ChipBar_default.bar, ChipBar_default[`gap-${gap}`], bordered && ChipBar_default.bordered, fade && ChipBar_default.fade, className),
+      ...rest,
+      children: Children.map(children, (child) => /* @__PURE__ */ jsx("div", { className: ChipBar_default.item, children: child }))
+    }
+  );
+}
+
+// src/components/CountButton/CountButton.module.css
+var CountButton_default = {
+  button: "CountButton_button",
+  "tone-accent": "CountButton_tone-accent",
+  "tone-danger": "CountButton_tone-danger",
+  glyph: "CountButton_glyph"
+};
+var SPINNER_PX2 = 20;
+function CountButton({
+  icon,
+  label,
+  active,
+  tone = "accent",
+  disabled = false,
+  loading = false,
+  className,
+  children,
+  ...rest
+}) {
+  const isToggle = active !== void 0;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      disabled: disabled || loading,
+      "aria-label": label,
+      "aria-pressed": isToggle ? active : void 0,
+      "aria-busy": loading || void 0,
+      className: cx(CountButton_default.button, active && CountButton_default[`tone-${tone}`], className),
+      ...rest,
+      children: [
+        loading ? /* @__PURE__ */ jsx(Spinner, { size: SPINNER_PX2, label: "", "aria-hidden": "true" }) : /* @__PURE__ */ jsx("span", { className: CountButton_default.glyph, children: icon }),
+        children != null ? /* @__PURE__ */ jsx("span", { children }) : null
+      ]
+    }
+  );
+}
+
+// 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/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" }) })
+  ] });
+}
+var OverlayHistoryContext = createContext(null);
+
+// src/hooks/useOverlay.ts
+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]);
+  const overlayHistory = useContext(OverlayHistoryContext);
+  useEffect(() => {
+    if (!open || !overlayHistory) return;
+    return overlayHistory.register(() => close.current());
+  }, [open, overlayHistory]);
+  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/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/DateTimePicker/DateTimePicker.module.css
+var DateTimePicker_default = {
+  trigger: "DateTimePicker_trigger",
+  hasValue: "DateTimePicker_hasValue",
+  triggerLabel: "DateTimePicker_triggerLabel",
+  glyph: "DateTimePicker_glyph",
+  timeRow: "DateTimePicker_timeRow",
+  grow: "DateTimePicker_grow",
+  meridiem: "DateTimePicker_meridiem",
+  colon: "DateTimePicker_colon",
+  calendarHeader: "DateTimePicker_calendarHeader",
+  monthLabel: "DateTimePicker_monthLabel",
+  weekdays: "DateTimePicker_weekdays",
+  weekday: "DateTimePicker_weekday",
+  grid: "DateTimePicker_grid",
+  day: "DateTimePicker_day",
+  today: "DateTimePicker_today",
+  selected: "DateTimePicker_selected",
+  outside: "DateTimePicker_outside"
+};
+var DEFAULT_LABELS = {
+  dialog: "Pick date and time",
+  previousMonth: "Previous month",
+  nextMonth: "Next month",
+  today: "Today",
+  done: "Done",
+  hour: "Hour",
+  minute: "Minutes",
+  dayPeriod: "AM/PM"
+};
+function localeData(locale) {
+  const resolved = new Intl.DateTimeFormat(locale).resolvedOptions().locale;
+  const intlLocale = new Intl.Locale(resolved);
+  const weekInfo = intlLocale.getWeekInfo?.() ?? intlLocale.weekInfo;
+  const firstDay = (weekInfo?.firstDay ?? 1) % 7;
+  const weekdayFmt = new Intl.DateTimeFormat(resolved, { weekday: "short", timeZone: "UTC" });
+  const weekdays = Array.from(
+    { length: 7 },
+    (_, i) => weekdayFmt.format(new Date(Date.UTC(2021, 7, 1 + (firstDay + i) % 7)))
+  );
+  const hourFmt = new Intl.DateTimeFormat(resolved, { hour: "numeric" });
+  const { hourCycle } = hourFmt.resolvedOptions();
+  const hour12 = hourCycle === "h11" || hourCycle === "h12";
+  const periodOf = (hour) => new Intl.DateTimeFormat(resolved, { hour: "numeric", hour12: true }).formatToParts(new Date(2021, 0, 1, hour)).find((part) => part.type === "dayPeriod")?.value ?? (hour < 12 ? "AM" : "PM");
+  return {
+    firstDay,
+    weekdays,
+    hour12,
+    dayPeriods: [periodOf(9), periodOf(21)],
+    monthTitle: new Intl.DateTimeFormat(resolved, { month: "long", year: "numeric" }),
+    dayLabel: new Intl.DateTimeFormat(resolved, { month: "long", day: "numeric", year: "numeric" }),
+    full: new Intl.DateTimeFormat(resolved, {
+      weekday: "short",
+      month: "short",
+      day: "numeric",
+      hour: "numeric",
+      minute: "2-digit"
+    })
+  };
+}
+function startOfDay(d) {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+}
+function snapMinutes(d, step) {
+  const out = new Date(d);
+  out.setMinutes(Math.round(out.getMinutes() / step) * step, 0, 0);
+  return out;
+}
+function addDays(d, n) {
+  const o = new Date(d);
+  o.setDate(o.getDate() + n);
+  return o;
+}
+function addMonths(d, n) {
+  const o = new Date(d);
+  o.setMonth(o.getMonth() + n);
+  return o;
+}
+function minuteOptions(step) {
+  const s = Math.max(1, Math.min(60, Math.floor(step)));
+  return Array.from({ length: Math.floor(60 / s) }, (_, i) => i * s);
+}
+function pad2(n) {
+  return String(n).padStart(2, "0");
+}
+var chevronLeft = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: DateTimePicker_default.glyph, children: /* @__PURE__ */ jsx("path", { d: "M10 3l-5 5 5 5", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var chevronRight = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: DateTimePicker_default.glyph, children: /* @__PURE__ */ jsx("path", { d: "M6 3l5 5-5 5", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var calendarGlyph = /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: DateTimePicker_default.glyph, children: [
+  /* @__PURE__ */ jsx("rect", { x: "2.5", y: "3.5", width: "11", height: "10", rx: "1.5", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }),
+  /* @__PURE__ */ jsx("path", { d: "M2.5 6.5h11M5.5 2v2.5M10.5 2v2.5", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+] });
+var clockGlyph = /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: DateTimePicker_default.glyph, children: [
+  /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "5.75", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }),
+  /* @__PURE__ */ jsx("path", { d: "M8 5v3.25l2 1.5", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+function DateTimePicker({
+  value,
+  onChange,
+  placeholder = "Select date & time",
+  min,
+  minuteStep = 5,
+  disabled = false,
+  id,
+  "aria-label": ariaLabel,
+  locale,
+  labels
+}) {
+  const text = { ...DEFAULT_LABELS, ...labels };
+  const intl = useMemo(() => localeData(locale), [locale]);
+  const [open, setOpen] = useState(false);
+  const [draft, setDraft] = useState(() => /* @__PURE__ */ new Date());
+  const [view, setView] = useState(() => {
+    const d = /* @__PURE__ */ new Date();
+    return { y: d.getFullYear(), m: d.getMonth() };
+  });
+  const [focusedDay, setFocusedDay] = useState(() => /* @__PURE__ */ new Date());
+  const dayRefs = useRef(/* @__PURE__ */ new Map());
+  const pendingFocusRef = useRef(false);
+  const minDate = min ? new Date(min) : /* @__PURE__ */ new Date();
+  const minStart = startOfDay(minDate);
+  function openPicker() {
+    const base = snapMinutes(value ? new Date(value) : /* @__PURE__ */ new Date(), minuteStep);
+    setDraft(base);
+    const start = startOfDay(base) >= minStart ? base : new Date(minStart);
+    setView({ y: start.getFullYear(), m: start.getMonth() });
+    setFocusedDay(start);
+    setOpen(true);
+  }
+  useEffect(() => {
+    if (!pendingFocusRef.current) return;
+    pendingFocusRef.current = false;
+    dayRefs.current.get(startOfDay(focusedDay))?.focus();
+  }, [focusedDay, view]);
+  const h24 = draft.getHours();
+  const h12 = h24 % 12 || 12;
+  const isPM = h24 >= 12;
+  function setHour(v) {
+    const nd = new Date(draft);
+    nd.setHours(intl.hour12 ? Number(v) % 12 + (isPM ? 12 : 0) : Number(v));
+    setDraft(nd);
+  }
+  function setMinute(v) {
+    const nd = new Date(draft);
+    nd.setMinutes(Number(v), 0, 0);
+    setDraft(nd);
+  }
+  function setMeridiem(v) {
+    const nd = new Date(draft);
+    nd.setHours(h12 % 12 + (v === "pm" ? 12 : 0));
+    setDraft(nd);
+  }
+  function pickDay(day) {
+    const nd = new Date(draft);
+    nd.setFullYear(view.y, view.m, day);
+    setDraft(nd);
+  }
+  function firstFocusableInView(y, m) {
+    const monthStart = new Date(y, m, 1);
+    return startOfDay(monthStart) >= minStart ? monthStart : new Date(minStart);
+  }
+  function shiftMonth(delta) {
+    let m = view.m + delta;
+    let y = view.y;
+    if (m < 0) {
+      m = 11;
+      y -= 1;
+    }
+    if (m > 11) {
+      m = 0;
+      y += 1;
+    }
+    setView({ y, m });
+    setFocusedDay(firstFocusableInView(y, m));
+  }
+  function goToday() {
+    const t = /* @__PURE__ */ new Date();
+    setView({ y: t.getFullYear(), m: t.getMonth() });
+    setFocusedDay(startOfDay(t) >= minStart ? t : new Date(minStart));
+  }
+  function focusDate(next) {
+    if (startOfDay(next) < minStart) return;
+    pendingFocusRef.current = true;
+    if (next.getMonth() !== view.m || next.getFullYear() !== view.y) {
+      setView({ y: next.getFullYear(), m: next.getMonth() });
+    }
+    setFocusedDay(next);
+  }
+  function onDayKeyDown(e, cell) {
+    const weekOffset = (cell.getDay() - intl.firstDay + 7) % 7;
+    switch (e.key) {
+      case "ArrowLeft":
+        e.preventDefault();
+        focusDate(addDays(cell, -1));
+        break;
+      case "ArrowRight":
+        e.preventDefault();
+        focusDate(addDays(cell, 1));
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        focusDate(addDays(cell, -7));
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        focusDate(addDays(cell, 7));
+        break;
+      case "Home":
+        e.preventDefault();
+        focusDate(addDays(cell, -weekOffset));
+        break;
+      case "End":
+        e.preventDefault();
+        focusDate(addDays(cell, 6 - weekOffset));
+        break;
+      case "PageUp":
+        e.preventDefault();
+        focusDate(addMonths(cell, -1));
+        break;
+      case "PageDown":
+        e.preventDefault();
+        focusDate(addMonths(cell, 1));
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        pickDay(cell.getDate());
+        break;
+    }
+  }
+  function confirm() {
+    onChange(draft.toISOString());
+    setOpen(false);
+  }
+  const first = new Date(view.y, view.m, 1);
+  const startWeekday = (first.getDay() - intl.firstDay + 7) % 7;
+  const daysInMonth = new Date(view.y, view.m + 1, 0).getDate();
+  const prevDisabled = view.y < minDate.getFullYear() || view.y === minDate.getFullYear() && view.m <= minDate.getMonth();
+  const todayStart = startOfDay(/* @__PURE__ */ new Date());
+  const draftStart = startOfDay(draft);
+  const spanCells = Math.ceil((startWeekday + daysInMonth) / 7) * 7;
+  const dayCells = Array.from({ length: spanCells }, (_, i) => {
+    const cell = new Date(view.y, view.m, 1 - startWeekday + i);
+    const inMonth = cell.getMonth() === view.m && cell.getFullYear() === view.y;
+    const cellStart = cell.getTime();
+    const isDisabled = !inMonth || cellStart < minStart;
+    const isSelected = inMonth && cellStart === draftStart;
+    const isToday = inMonth && cellStart === todayStart;
+    const isFocusTarget = inMonth && !isDisabled && cellStart === startOfDay(focusedDay);
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        disabled: isDisabled,
+        tabIndex: isFocusTarget ? 0 : -1,
+        ref: inMonth && !isDisabled ? (el) => {
+          if (el) dayRefs.current.set(cellStart, el);
+          else dayRefs.current.delete(cellStart);
+        } : void 0,
+        "aria-hidden": inMonth ? void 0 : true,
+        "aria-label": intl.dayLabel.format(cell),
+        "aria-pressed": isSelected,
+        onClick: inMonth ? () => pickDay(cell.getDate()) : void 0,
+        onKeyDown: inMonth && !isDisabled ? (e) => onDayKeyDown(e, cell) : void 0,
+        className: cx(DateTimePicker_default.day, isToday && DateTimePicker_default.today, isSelected && DateTimePicker_default.selected, !inMonth && DateTimePicker_default.outside),
+        children: cell.getDate()
+      },
+      `c-${i}`
+    );
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        id,
+        type: "button",
+        disabled,
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        "aria-label": ariaLabel ? `${ariaLabel}: ${value ? intl.full.format(new Date(value)) : placeholder}` : void 0,
+        onClick: openPicker,
+        className: cx(DateTimePicker_default.trigger, value && DateTimePicker_default.hasValue),
+        children: [
+          calendarGlyph,
+          /* @__PURE__ */ jsx("span", { className: DateTimePicker_default.triggerLabel, children: value ? intl.full.format(new Date(value)) : placeholder })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(Sheet, { open, onClose: () => setOpen(false), label: ariaLabel ?? text.dialog, children: [
+      /* @__PURE__ */ jsx(SheetHeader, { children: intl.full.format(draft) }),
+      /* @__PURE__ */ jsxs(SheetBody, { children: [
+        /* @__PURE__ */ jsxs("div", { className: DateTimePicker_default.timeRow, children: [
+          clockGlyph,
+          intl.hour12 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Select, { "aria-label": text.hour, value: String(h12), onChange: (e) => setHour(e.target.value), className: DateTimePicker_default.grow, children: Array.from({ length: 12 }, (_, i) => /* @__PURE__ */ jsx("option", { value: String(i + 1), children: i + 1 }, i + 1)) }),
+            /* @__PURE__ */ jsx("span", { className: DateTimePicker_default.colon, "aria-hidden": "true", children: ":" }),
+            /* @__PURE__ */ jsx(Select, { "aria-label": text.minute, value: String(draft.getMinutes()), onChange: (e) => setMinute(e.target.value), className: DateTimePicker_default.grow, children: minuteOptions(minuteStep).map((m) => /* @__PURE__ */ jsx("option", { value: String(m), children: pad2(m) }, m)) }),
+            /* @__PURE__ */ jsxs(Select, { "aria-label": text.dayPeriod, value: isPM ? "pm" : "am", onChange: (e) => setMeridiem(e.target.value), className: DateTimePicker_default.meridiem, children: [
+              /* @__PURE__ */ jsx("option", { value: "am", children: intl.dayPeriods[0] }),
+              /* @__PURE__ */ jsx("option", { value: "pm", children: intl.dayPeriods[1] })
+            ] })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Select, { "aria-label": text.hour, value: String(h24), onChange: (e) => setHour(e.target.value), className: DateTimePicker_default.grow, children: Array.from({ length: 24 }, (_, i) => /* @__PURE__ */ jsx("option", { value: String(i), children: pad2(i) }, i)) }),
+            /* @__PURE__ */ jsx("span", { className: DateTimePicker_default.colon, "aria-hidden": "true", children: ":" }),
+            /* @__PURE__ */ jsx(Select, { "aria-label": text.minute, value: String(draft.getMinutes()), onChange: (e) => setMinute(e.target.value), className: DateTimePicker_default.grow, children: minuteOptions(minuteStep).map((m) => /* @__PURE__ */ jsx("option", { value: String(m), children: pad2(m) }, m)) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": intl.monthTitle.format(first), children: [
+          /* @__PURE__ */ jsxs("div", { className: DateTimePicker_default.calendarHeader, children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                iconOnly: true,
+                "aria-label": text.previousMonth,
+                variant: "ghost",
+                size: "sm",
+                disabled: prevDisabled,
+                onClick: () => shiftMonth(-1),
+                children: chevronLeft
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: DateTimePicker_default.monthLabel, children: intl.monthTitle.format(first) }),
+            /* @__PURE__ */ jsx(Button, { iconOnly: true, "aria-label": text.nextMonth, variant: "ghost", size: "sm", onClick: () => shiftMonth(1), children: chevronRight })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: DateTimePicker_default.weekdays, children: intl.weekdays.map((w, i) => /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: DateTimePicker_default.weekday, children: w }, `wd-${i}`)) }),
+          /* @__PURE__ */ jsx("div", { className: DateTimePicker_default.grid, children: dayCells })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(SheetFooter, { children: [
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: goToday, children: text.today }),
+        /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: confirm, children: text.done })
+      ] })
+    ] })
+  ] });
+}
+
 // src/components/Tag/Tag.module.css
 var Tag_default = {
   tag: "Tag_tag",
@@ -414,38 +1069,6 @@ function ProgressBar({
   );
 }
 
-// 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",
@@ -538,33 +1161,6 @@ function Textarea({ rows = 3, showCount = false, className, ...rest }) {
   ] });
 }
 
-// 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",
@@ -984,103 +1580,6 @@ function CardBody({ 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 = {
@@ -1113,37 +1612,6 @@ 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"
@@ -1241,6 +1709,6 @@ function useRovingGroup(ref, { selector, orientation = "horizontal" }) {
   );
 }
 
-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 };
+export { AppBar, Avatar, AvatarGroup, Badge, Button, Card, CardBody, CardFooter, CardHeader, Checkbox, Chip, ChipBar, ChipGroup, ConfirmDialog, Container, CountButton, DateTimePicker, Divider, EmptyState, Field, Heading, Icon, IconProvider, Inline, Input, Link, ListGroup, ListItem, Modal, ModalBody, ModalFooter, ModalHeader, OverlayHistoryContext, 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