@mond-design-system/react 3.0.3 → 4.0.0

package/dist/index.cjs

@@ -81,7 +81,7 @@ function Heading({
 var Spinner_module_default = { "spinner": "mds-Spinner__spinner"};
 function Spinner({
   size = 20,
-  label = "Loading",
+  label,
   className,
   style,
   ...rest
@@ -130,11 +130,13 @@ function Icon({ name, size, label, className, ...rest }) {
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Button/Button.module.css?mds-scoped
-var Button_module_default = { "button": "mds-Button__button", "size-sm": "mds-Button__size-sm", "size-md": "mds-Button__size-md", "size-lg": "mds-Button__size-lg", "slot": "mds-Button__slot", "variant-primary": "mds-Button__variant-primary", "variant-secondary": "mds-Button__variant-secondary", "variant-ghost": "mds-Button__variant-ghost", "variant-highlight": "mds-Button__variant-highlight", "variant-danger": "mds-Button__variant-danger", "variant-warning": "mds-Button__variant-warning", "fullWidth": "mds-Button__fullWidth", "icon-only": "mds-Button__icon-only" };
+var Button_module_default = { "button": "mds-Button__button", "size-sm": "mds-Button__size-sm", "size-md": "mds-Button__size-md", "size-lg": "mds-Button__size-lg", "slot": "mds-Button__slot", "variant-primary": "mds-Button__variant-primary", "variant-secondary": "mds-Button__variant-secondary", "variant-ghost": "mds-Button__variant-ghost", "variant-highlight": "mds-Button__variant-highlight", "variant-danger": "mds-Button__variant-danger", "variant-warning": "mds-Button__variant-warning", "fullWidth": "mds-Button__fullWidth", "icon-only": "mds-Button__icon-only", "on-media": "mds-Button__on-media", "shape-rect": "mds-Button__shape-rect", "shape-pill": "mds-Button__shape-pill" };
 var ICON_PX = { sm: 16, md: 20, lg: 24 };
 function Button({
   variant = "primary",
   size = "md",
+  shape,
+  onMedia = false,
   iconLeft,
   iconRight,
   loading = false,
@@ -160,6 +162,8 @@ function Button({
         Button_module_default[`size-${size}`],
         fullWidth && Button_module_default.fullWidth,
         iconOnly && Button_module_default["icon-only"],
+        shape !== void 0 && Button_module_default[`shape-${shape}`],
+        onMedia && Button_module_default["on-media"],
         className
       ),
       "aria-busy": loading || void 0,
@@ -250,6 +254,7 @@ function AvatarGroup({
   children,
   max = 4,
   size = "md",
+  overflowLabel,
   className,
   ...rest
 }) {
@@ -262,7 +267,7 @@ function AvatarGroup({
       "span",
       {
         className: cx(AvatarGroup_module_default.item, AvatarGroup_module_default.overflow, AvatarGroup_module_default[`size-${size}`]),
-        "aria-label": `${hidden} more`,
+        "aria-label": overflowLabel(hidden),
         children: [
           "+",
           hidden
@@ -288,6 +293,7 @@ function Chip({
   onClick,
   disabled = false,
   className,
+  ref,
   ...rest
 }) {
   const interactive = typeof onClick === "function";
@@ -313,10 +319,11 @@ function Chip({
       onClick,
       disabled,
       "aria-pressed": selected === void 0 ? void 0 : selected,
+      ref,
       ...shared,
       children: content
     }
-  ) : /* @__PURE__ */ jsxRuntime.jsx("span", { ...shared, children: content });
+  ) : /* @__PURE__ */ jsxRuntime.jsx("span", { ref, ...shared, children: content });
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Chip/ChipGroup.module.css?mds-scoped
@@ -377,6 +384,102 @@ function CountButton({
     }
   );
 }
+function CloseGlyph({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) });
+}
+function ChevronLeftGlyph({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M10 3l-5 5 5 5",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.75",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function ChevronRightGlyph({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M6 3l5 5-5 5",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.75",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function Magnifier({ className, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "7", cy: "7", r: "4.25" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.2 10.2L14 14" }),
+    children
+  ] }) });
+}
+function ZoomInGlyph({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Magnifier, { className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.75 7h4.5M7 4.75v4.5" }) });
+}
+function ZoomOutGlyph({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Magnifier, { className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.75 7h4.5" }) });
+}
+function PlayGlyph({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 3.2l7.5 4.8L5 12.8z", fill: "currentColor" }) });
+}
+function PauseGlyph({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.5 3h2.25v10H4.5zM9.25 3h2.25v10H9.25z", fill: "currentColor" }) });
+}
+function Speaker() {
+  return /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.5 6.25h2.25L8 3.4v9.2L4.75 9.75H2.5z", fill: "currentColor", stroke: "none" });
+}
+function VolumeGlyph({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Speaker, {}),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.5 5.75a3.25 3.25 0 010 4.5" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.5 3.9a5.75 5.75 0 010 8.2" })
+  ] }) });
+}
+function VolumeOffGlyph({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Speaker, {}),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.75 6.25l3.5 3.5M14.25 6.25l-3.5 3.5" })
+  ] }) });
+}
+function CaptionsGlyph({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "1.75", y: "3.25", width: "12.5", height: "9.5", rx: "2" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.25 6.75a2 2 0 100 2.5M11.25 6.75a2 2 0 100 2.5" })
+  ] }) });
+}
+function FullscreenGlyph({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M6 2.5H2.5V6M10 2.5h3.5V6M6 13.5H2.5V10M10 13.5h3.5V10",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function FullscreenExitGlyph({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M2.5 6H6V2.5M13.5 6H10V2.5M2.5 10H6v3.5M13.5 10H10v3.5",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Field/Field.module.css?mds-scoped
 var Field_module_default = { "field": "mds-Field__field", "label": "mds-Field__label", "required": "mds-Field__required", "message": "mds-Field__message", "error": "mds-Field__error" };
@@ -503,8 +606,8 @@ function usePresence(open, durationMs) {
   return { mounted: open || mounted, visible };
 }
 
-// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Overlay/Overlay.module.css?mds-scoped
-var Overlay_module_default = { "scrim": "mds-Overlay__scrim", "variant-modal": "mds-Overlay__variant-modal", "variant-sheet": "mds-Overlay__variant-sheet" };
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/internal/Overlay.module.css?mds-scoped
+var Overlay_module_default = { "scrim": "mds-Overlay__scrim", "variant-modal": "mds-Overlay__variant-modal", "variant-sheet": "mds-Overlay__variant-sheet", "variant-lightbox": "mds-Overlay__variant-lightbox" };
 var OVERLAY_EXIT_MS = 200;
 var SHEET_EXIT_MS = 320;
 function Overlay({ open, onClose, label, variant, role = "dialog", closeOnScrimClick, panelClassName, children }) {
@@ -558,7 +661,7 @@ function Sheet({ open, onClose, label, closeOnScrimClick = true, children }) {
 function SheetHeader({ children, onClose, closeLabel }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Sheet_module_default.header, children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: Sheet_module_default.headerTitle, children }),
-    onClose !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": closeLabel, className: Sheet_module_default.close, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: Sheet_module_default.closeGlyph, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) }) })
+    onClose !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": closeLabel, className: Sheet_module_default.close, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(CloseGlyph, { className: Sheet_module_default.closeGlyph }) })
   ] });
 }
 function SheetBody({ children }) {
@@ -570,16 +673,6 @@ function SheetFooter({ children }) {
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/DateTimePicker/DateTimePicker.module.css?mds-scoped
 var DateTimePicker_module_default = { "trigger": "mds-DateTimePicker__trigger", "hasValue": "mds-DateTimePicker__hasValue", "triggerLabel": "mds-DateTimePicker__triggerLabel", "glyph": "mds-DateTimePicker__glyph", "timeRow": "mds-DateTimePicker__timeRow", "grow": "mds-DateTimePicker__grow", "meridiem": "mds-DateTimePicker__meridiem", "colon": "mds-DateTimePicker__colon", "calendarHeader": "mds-DateTimePicker__calendarHeader", "monthLabel": "mds-DateTimePicker__monthLabel", "weekdays": "mds-DateTimePicker__weekdays", "weekday": "mds-DateTimePicker__weekday", "grid": "mds-DateTimePicker__grid", "day": "mds-DateTimePicker__day", "today": "mds-DateTimePicker__today", "selected": "mds-DateTimePicker__selected", "outside": "mds-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);
@@ -635,8 +728,6 @@ function minuteOptions(step) {
 function pad2(n) {
   return String(n).padStart(2, "0");
 }
-var chevronLeft = /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: DateTimePicker_module_default.glyph, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 3l-5 5 5 5", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) });
-var chevronRight = /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: DateTimePicker_module_default.glyph, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 3l5 5-5 5", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) });
 var calendarGlyph = /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: DateTimePicker_module_default.glyph, children: [
   /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2.5", y: "3.5", width: "11", height: "10", rx: "1.5", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }),
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.5 6.5h11M5.5 2v2.5M10.5 2v2.5", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
@@ -648,16 +739,15 @@ var clockGlyph = /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 16 16",
 function DateTimePicker({
   value,
   onChange,
-  placeholder = "Select date & time",
+  placeholder,
   min,
   minuteStep = 5,
   disabled = false,
   id,
   "aria-label": ariaLabel,
   locale,
-  labels
+  labels: text
 }) {
-  const text = { ...DEFAULT_LABELS, ...labels };
   const field = useFieldContext();
   const intl = react.useMemo(() => localeData(locale), [locale]);
   const [open, setOpen] = react.useState(false);
@@ -820,6 +910,7 @@ function DateTimePicker({
       `c-${i}`
     );
   });
+  const shown = value ? intl.full.format(new Date(value)) : placeholder;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -830,12 +921,12 @@ function DateTimePicker({
         "aria-describedby": field?.describedBy,
         "aria-haspopup": "dialog",
         "aria-expanded": open,
-        "aria-label": ariaLabel ? `${ariaLabel}: ${value ? intl.full.format(new Date(value)) : placeholder}` : void 0,
+        "aria-label": ariaLabel === void 0 ? void 0 : [ariaLabel, shown].filter(Boolean).join(": "),
         onClick: openPicker,
         className: cx(DateTimePicker_module_default.trigger, value && DateTimePicker_module_default.hasValue),
         children: [
           calendarGlyph,
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: DateTimePicker_module_default.triggerLabel, children: value ? intl.full.format(new Date(value)) : placeholder })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: DateTimePicker_module_default.triggerLabel, children: shown })
         ]
       }
     ),
@@ -869,11 +960,11 @@ function DateTimePicker({
                 size: "sm",
                 disabled: prevDisabled,
                 onClick: () => shiftMonth(-1),
-                children: chevronLeft
+                children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftGlyph, { className: DateTimePicker_module_default.glyph })
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: DateTimePicker_module_default.monthLabel, children: intl.monthTitle.format(first) }),
-            /* @__PURE__ */ jsxRuntime.jsx(Button, { iconOnly: true, "aria-label": text.nextMonth, variant: "ghost", size: "sm", onClick: () => shiftMonth(1), children: chevronRight })
+            /* @__PURE__ */ jsxRuntime.jsx(Button, { iconOnly: true, "aria-label": text.nextMonth, variant: "ghost", size: "sm", onClick: () => shiftMonth(1), children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightGlyph, { className: DateTimePicker_module_default.glyph }) })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: DateTimePicker_module_default.weekdays, children: intl.weekdays.map((w, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: DateTimePicker_module_default.weekday, children: w }, `wd-${i}`)) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: DateTimePicker_module_default.grid, children: dayCells })
@@ -888,19 +979,25 @@ function DateTimePicker({
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Tag/Tag.module.css?mds-scoped
-var Tag_module_default = { "tag": "mds-Tag__tag", "tone-accent": "mds-Tag__tone-accent", "remove": "mds-Tag__remove", "removeGlyph": "mds-Tag__removeGlyph" };
-function Tag({ children, tone = "neutral", onRemove, className, ...rest }) {
-  const text = typeof children === "string" ? children : void 0;
+var Tag_module_default = { "tag": "mds-Tag__tag", "tone-accent": "mds-Tag__tone-accent", "remove": "mds-Tag__remove mds-hit-area__hitArea", "removeGlyph": "mds-Tag__removeGlyph" };
+function Tag({
+  children,
+  tone = "neutral",
+  onRemove,
+  removeLabel,
+  className,
+  ...rest
+}) {
   return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx(Tag_module_default.tag, Tag_module_default[`tone-${tone}`], className), ...rest, children: [
     children,
-    onRemove && /* @__PURE__ */ jsxRuntime.jsx(
+    onRemove !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         type: "button",
         className: Tag_module_default.remove,
-        "aria-label": text ? `Remove ${text}` : "Remove",
+        "aria-label": removeLabel,
         onClick: onRemove,
-        children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: Tag_module_default.removeGlyph, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) })
+        children: /* @__PURE__ */ jsxRuntime.jsx(CloseGlyph, { className: Tag_module_default.removeGlyph })
       }
     )
   ] });
@@ -920,6 +1017,14 @@ function Divider({ orientation = "horizontal", className, ...rest }) {
   );
 }
 
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/VisuallyHidden/VisuallyHidden.module.css?mds-scoped
+var VisuallyHidden_module_default = { "hidden": "mds-VisuallyHidden__hidden" };
+
+// src/components/VisuallyHidden/VisuallyHidden.tsx
+function VisuallyHidden({ as = "span", className, ...rest }) {
+  return react.createElement(as, { className: cx(VisuallyHidden_module_default.hidden, className), ...rest });
+}
+
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Skeleton/Skeleton.module.css?mds-scoped
 var Skeleton_module_default = { "skeleton": "mds-Skeleton__skeleton", "pulse": "mds-Skeleton__pulse", "variant-text": "mds-Skeleton__variant-text", "variant-rect": "mds-Skeleton__variant-rect", "variant-circle": "mds-Skeleton__variant-circle" };
 function Skeleton({
@@ -950,6 +1055,7 @@ var ProgressBar_module_default = { "track": "mds-ProgressBar__track", "fill": "m
 function ProgressBar({
   value = 0,
   label,
+  valueText,
   indeterminate = false,
   className,
   style,
@@ -964,6 +1070,7 @@ function ProgressBar({
       "aria-valuemin": 0,
       "aria-valuemax": 100,
       "aria-valuenow": indeterminate ? void 0 : clamped,
+      "aria-valuetext": valueText,
       className: cx(ProgressBar_module_default.track, indeterminate && ProgressBar_module_default.indeterminate, className),
       style: { ...{ "--progress": `${clamped}%` }, ...style },
       ...rest,
@@ -1009,7 +1116,12 @@ function Input({
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/PasswordInput/PasswordInput.module.css?mds-scoped
 var PasswordInput_module_default = { "wrap": "mds-PasswordInput__wrap", "input": "mds-PasswordInput__input", "toggle": "mds-PasswordInput__toggle" };
-function PasswordInput({ className, ...rest }) {
+function PasswordInput({
+  showLabel,
+  hideLabel,
+  className,
+  ...rest
+}) {
   const [visible, setVisible] = react.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: PasswordInput_module_default.wrap, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Input, { ...rest, type: visible ? "text" : "password", className: cx(PasswordInput_module_default.input, className) }),
@@ -1018,7 +1130,7 @@ function PasswordInput({ className, ...rest }) {
       {
         type: "button",
         className: PasswordInput_module_default.toggle,
-        "aria-label": visible ? "Hide password" : "Show password",
+        "aria-label": visible ? hideLabel : showLabel,
         "aria-pressed": visible,
         onClick: () => setVisible((v) => !v),
         children: visible ? (
@@ -1071,7 +1183,7 @@ function Textarea({ rows = 3, showCount = false, className, ...rest }) {
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Checkbox/Checkbox.module.css?mds-scoped
-var Checkbox_module_default = { "root": "mds-Checkbox__root", "box": "mds-Checkbox__box", "label": "mds-Checkbox__label" };
+var Checkbox_module_default = { "root": "mds-Checkbox__root", "box": "mds-Checkbox__box mds-hit-area__hitArea", "label": "mds-Checkbox__label" };
 function Checkbox({ label, className, ...rest }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cx(Checkbox_module_default.root, className), children: [
     /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", className: Checkbox_module_default.box, ...rest }),
@@ -1080,7 +1192,7 @@ function Checkbox({ label, className, ...rest }) {
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Radio/Radio.module.css?mds-scoped
-var Radio_module_default = { "root": "mds-Radio__root", "dot": "mds-Radio__dot", "label": "mds-Radio__label" };
+var Radio_module_default = { "root": "mds-Radio__root", "dot": "mds-Radio__dot mds-hit-area__hitArea", "label": "mds-Radio__label" };
 function Radio({ label, className, ...rest }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cx(Radio_module_default.root, className), children: [
     /* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: Radio_module_default.dot, ...rest }),
@@ -1089,7 +1201,7 @@ function Radio({ label, className, ...rest }) {
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Switch/Switch.module.css?mds-scoped
-var Switch_module_default = { "root": "mds-Switch__root", "track": "mds-Switch__track", "trackWrap": "mds-Switch__trackWrap", "spinner": "mds-Switch__spinner", "label": "mds-Switch__label" };
+var Switch_module_default = { "root": "mds-Switch__root", "track": "mds-Switch__track mds-hit-area__hitArea", "trackWrap": "mds-Switch__trackWrap", "spinner": "mds-Switch__spinner", "label": "mds-Switch__label" };
 function Switch({
   label,
   loading = false,
@@ -1146,8 +1258,15 @@ function SegmentedControl({
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/SearchField/SearchField.module.css?mds-scoped
-var SearchField_module_default = { "wrap": "mds-SearchField__wrap", "glass": "mds-SearchField__glass", "input": "mds-SearchField__input", "clear": "mds-SearchField__clear", "clearGlyph": "mds-SearchField__clearGlyph" };
-function SearchField({ label, value, onChange, className, ...rest }) {
+var SearchField_module_default = { "wrap": "mds-SearchField__wrap", "glass": "mds-SearchField__glass", "input": "mds-SearchField__input", "clear": "mds-SearchField__clear mds-hit-area__hitArea", "clearGlyph": "mds-SearchField__clearGlyph" };
+function SearchField({
+  label,
+  clearLabel,
+  value,
+  onChange,
+  className,
+  ...rest
+}) {
   return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx(SearchField_module_default.wrap, className), children: [
     /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: SearchField_module_default.glass, children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
@@ -1174,10 +1293,10 @@ function SearchField({ label, value, onChange, className, ...rest }) {
       "button",
       {
         type: "button",
-        "aria-label": "Clear search",
+        "aria-label": clearLabel,
         className: SearchField_module_default.clear,
         onClick: () => onChange(""),
-        children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: SearchField_module_default.clearGlyph, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) })
+        children: /* @__PURE__ */ jsxRuntime.jsx(CloseGlyph, { className: SearchField_module_default.clearGlyph })
       }
     )
   ] });
@@ -1210,12 +1329,15 @@ function ListItem({
   onClick,
   pressed,
   href,
+  as,
   surface,
   className,
+  ref,
   ...rest
 }) {
   const inGroup = react.useContext(ListGroupContext);
   const Root = inGroup ? "li" : "div";
+  const LinkElement = as ?? "a";
   const resolved = surface ?? (inGroup ? void 0 : "card");
   const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     leading != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: List_module_default.leading, children: leading }),
@@ -1229,8 +1351,9 @@ function ListItem({
     Root,
     {
       className: cx(List_module_default.item, resolved && List_module_default[`surface-${resolved}`], className),
+      ref,
       ...rest,
-      children: href !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("a", { className: cx(List_module_default.row, List_module_default.interactive), href, children: content }) : onClick !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+      children: href !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(LinkElement, { className: cx(List_module_default.row, List_module_default.interactive), href, children: content }) : onClick !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "button",
@@ -1346,7 +1469,7 @@ function TabPanel({ value, className, children, ...rest }) {
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Toast/Toast.module.css?mds-scoped
-var Toast_module_default = { "viewport": "mds-Toast__viewport", "toast": "mds-Toast__toast", "tone-success": "mds-Toast__tone-success", "tone-danger": "mds-Toast__tone-danger", "body": "mds-Toast__body", "title": "mds-Toast__title", "description": "mds-Toast__description", "close": "mds-Toast__close", "closeGlyph": "mds-Toast__closeGlyph" };
+var Toast_module_default = { "viewport": "mds-Toast__viewport", "toast": "mds-Toast__toast", "tone-success": "mds-Toast__tone-success", "tone-danger": "mds-Toast__tone-danger", "body": "mds-Toast__body", "title": "mds-Toast__title", "description": "mds-Toast__description", "close": "mds-Toast__close mds-hit-area__hitArea", "closeGlyph": "mds-Toast__closeGlyph" };
 var ToastContext = react.createContext(null);
 function useToast() {
   const context = react.useContext(ToastContext);
@@ -1355,8 +1478,8 @@ function useToast() {
 }
 function ToastProvider({
   children,
-  regionLabel = "Notifications",
-  dismissLabel = "Dismiss"
+  regionLabel,
+  dismissLabel
 }) {
   const [toasts, setToasts] = react.useState([]);
   const nextId = react.useRef(1);
@@ -1387,7 +1510,7 @@ function ToastProvider({
           "aria-label": `${dismissLabel}: ${entry.title}`,
           className: Toast_module_default.close,
           onClick: () => dismiss(entry.id),
-          children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: Toast_module_default.closeGlyph, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) })
+          children: /* @__PURE__ */ jsxRuntime.jsx(CloseGlyph, { className: Toast_module_default.closeGlyph })
         }
       )
     ] }, entry.id)) })
@@ -1455,15 +1578,26 @@ function Container({
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Card/Card.module.css?mds-scoped
 var Card_module_default = { "card": "mds-Card__card", "variant-raised": "mds-Card__variant-raised", "variant-sunken": "mds-Card__variant-sunken", "emphasis": "mds-Card__emphasis", "interactive": "mds-Card__interactive", "header": "mds-Card__header", "body": "mds-Card__body", "footer": "mds-Card__footer" };
-function Card({ children, variant = "card", emphasis = false, onClick, href, className, ...rest }) {
+function Card({ children, variant = "card", emphasis = false, onClick, href, as, className, ref, ...rest }) {
   const cardClass = cx(Card_module_default.card, Card_module_default[`variant-${variant}`], emphasis && Card_module_default.emphasis, className);
   if (href !== void 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx("a", { className: cx(cardClass, Card_module_default.interactive), href, ...rest, children });
+    const Element = as ?? "a";
+    return /* @__PURE__ */ jsxRuntime.jsx(Element, { className: cx(cardClass, Card_module_default.interactive), href, ref, ...rest, children });
   }
   if (onClick !== void 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: cx(cardClass, Card_module_default.interactive), onClick, ...rest, children });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: cx(cardClass, Card_module_default.interactive),
+        onClick,
+        ref,
+        ...rest,
+        children
+      }
+    );
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cardClass, ...rest, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cardClass, ref, ...rest, children });
 }
 function CardHeader({ className, ...rest }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(Card_module_default.header, className), ...rest });
@@ -1517,7 +1651,7 @@ function ConfirmDialog({
   title,
   description,
   confirmLabel,
-  cancelLabel = "Cancel",
+  cancelLabel,
   tone = "default",
   errorMessage
 }) {
@@ -1603,7 +1737,7 @@ var TabBar_module_default = { "bar": "mds-TabBar__bar", "item": "mds-TabBar__ite
 function TabBar({ label, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": label, className: TabBar_module_default.bar, children });
 }
-function TabBarItem({ label, icon, href, onClick, active = false, badge = false }) {
+function TabBarItem({ label, icon, href, onClick, active = false, badge = false, as }) {
   const className = cx(TabBar_module_default.item, active && TabBar_module_default.active);
   const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("span", { className: TabBar_module_default.icon, "aria-hidden": "true", children: [
@@ -1613,13 +1747,660 @@ function TabBarItem({ label, icon, href, onClick, active = false, badge = false
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: TabBar_module_default.label, children: label })
   ] });
   if (href !== void 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx("a", { href, className, "aria-current": active ? "page" : void 0, onClick, children: content });
+    const Element = as ?? "a";
+    return /* @__PURE__ */ jsxRuntime.jsx(Element, { href, className, "aria-current": active ? "page" : void 0, onClick, children: content });
   }
   return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className, "aria-current": active ? "page" : void 0, onClick, children: content });
 }
 function TabBarAction({ label, icon, onClick }) {
   return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": label, className: TabBar_module_default.action, onClick, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: TabBar_module_default.icon, "aria-hidden": "true", children: icon }) });
 }
+
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/MediaPlaceholder/MediaPlaceholder.module.css?mds-scoped
+var MediaPlaceholder_module_default = { "media": "mds-MediaPlaceholder__media", "fill": "mds-MediaPlaceholder__fill", "image": "mds-MediaPlaceholder__image", "caption": "mds-MediaPlaceholder__caption", "cover": "mds-MediaPlaceholder__cover", "blurred": "mds-MediaPlaceholder__blurred" };
+function MediaPlaceholder({
+  aspect,
+  src,
+  alt = "",
+  glyph,
+  caption,
+  blurred = false,
+  cover,
+  className,
+  style,
+  ...rest
+}) {
+  const [failed, setFailed] = react.useState();
+  const picture = src !== void 0 && failed !== src;
+  const vars = aspect === void 0 ? {} : { "--media-aspect": aspect };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cx(MediaPlaceholder_module_default.media, blurred && MediaPlaceholder_module_default.blurred, className),
+      style: { ...vars, ...style },
+      ...rest,
+      children: [
+        picture ? /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            className: MediaPlaceholder_module_default.image,
+            src,
+            alt,
+            loading: "lazy",
+            decoding: "async",
+            onError: () => setFailed(src)
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MediaPlaceholder_module_default.fill, "aria-hidden": "true", children: [
+          glyph,
+          caption !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "meta", children: caption })
+        ] }),
+        picture && caption !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "meta", tone: "on-media", className: MediaPlaceholder_module_default.caption, children: caption }),
+        cover !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: MediaPlaceholder_module_default.cover, children: cover })
+      ]
+    }
+  );
+}
+
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/ImageCarousel/ImageCarousel.module.css?mds-scoped
+var ImageCarousel_module_default = { "carousel": "mds-ImageCarousel__carousel", "viewport": "mds-ImageCarousel__viewport", "slide": "mds-ImageCarousel__slide", "step": "mds-ImageCarousel__step", "zoom": "mds-ImageCarousel__zoom", "prev": "mds-ImageCarousel__prev", "next": "mds-ImageCarousel__next", "counter": "mds-ImageCarousel__counter", "thumbs": "mds-ImageCarousel__thumbs", "thumb": "mds-ImageCarousel__thumb", "more": "mds-ImageCarousel__more", "dots": "mds-ImageCarousel__dots", "dot": "mds-ImageCarousel__dot" };
+var SWIPE_THRESHOLD = 40;
+function ImageCarousel({
+  slides,
+  labels,
+  index,
+  defaultIndex = 0,
+  onIndexChange,
+  pager = "thumbnails",
+  maxThumbnails = 4,
+  onZoom,
+  zoomIcon,
+  zoomLabel,
+  className,
+  ...rest
+}) {
+  const [ownIndex, setOwnIndex] = react.useState(defaultIndex);
+  const swipeStart = react.useRef(null);
+  const held = index !== void 0;
+  const last = slides.length - 1;
+  const current = Math.min(Math.max(held ? index : ownIndex, 0), last);
+  const many = slides.length > 1;
+  const slide = slides[current];
+  if (slide === void 0) return null;
+  const goTo = (next) => {
+    const clamped = Math.min(Math.max(next, 0), last);
+    if (clamped === current) return;
+    if (!held) setOwnIndex(clamped);
+    onIndexChange?.(clamped);
+  };
+  const onKeyDown = (event) => {
+    if (!many) return;
+    const step = {
+      ArrowLeft: current - 1,
+      ArrowRight: current + 1,
+      Home: 0,
+      End: last
+    };
+    const next = step[event.key];
+    if (next === void 0) return;
+    event.preventDefault();
+    goTo(next);
+  };
+  const onPointerUp = (event) => {
+    const start = swipeStart.current;
+    swipeStart.current = null;
+    if (start === null) return;
+    const travelled = event.clientX - start;
+    if (Math.abs(travelled) < SWIPE_THRESHOLD) {
+      const onControl = event.target.closest("button") !== null;
+      if (onZoom !== void 0 && !onControl && slide.covered !== true) onZoom(current);
+      return;
+    }
+    if (many) goTo(travelled < 0 ? current + 1 : current - 1);
+  };
+  const shown = pager === "thumbnails" ? slides.slice(0, maxThumbnails) : [];
+  const hidden = slides.length - shown.length;
+  const counted = labels.counter(current + 1, slides.length);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      className: cx(ImageCarousel_module_default.carousel, className),
+      "aria-roledescription": labels.carouselRole,
+      "aria-label": labels.region,
+      tabIndex: 0,
+      onKeyDown,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: ImageCarousel_module_default.viewport,
+            onPointerDown: (event) => {
+              swipeStart.current = event.clientX;
+            },
+            onPointerUp,
+            onPointerCancel: () => {
+              swipeStart.current = null;
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: ImageCarousel_module_default.slide, role: "group", "aria-roledescription": labels.slideRole, "aria-label": counted, children: /* @__PURE__ */ jsxRuntime.jsx(
+                MediaPlaceholder,
+                {
+                  aspect: slide.aspect ?? "4 / 3",
+                  ...slide.src === void 0 ? {} : { src: slide.src },
+                  ...slide.alt === void 0 ? {} : { alt: slide.alt },
+                  ...slide.caption === void 0 ? {} : { caption: slide.caption },
+                  blurred: slide.covered === true,
+                  ...slide.cover === void 0 ? {} : { cover: slide.cover }
+                }
+              ) }),
+              onZoom !== void 0 && slide.covered !== true && /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  className: ImageCarousel_module_default.zoom,
+                  variant: "secondary",
+                  size: "sm",
+                  iconOnly: true,
+                  "aria-label": zoomLabel,
+                  onClick: () => onZoom(current),
+                  children: zoomIcon
+                }
+              ),
+              many && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    className: cx(ImageCarousel_module_default.step, ImageCarousel_module_default.prev),
+                    variant: "secondary",
+                    size: "sm",
+                    iconOnly: true,
+                    "aria-label": labels.previous,
+                    disabled: current === 0,
+                    onClick: () => goTo(current - 1),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftGlyph, {})
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    className: cx(ImageCarousel_module_default.step, ImageCarousel_module_default.next),
+                    variant: "secondary",
+                    size: "sm",
+                    iconOnly: true,
+                    "aria-label": labels.next,
+                    disabled: current === last,
+                    onClick: () => goTo(current + 1),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightGlyph, {})
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "meta", className: ImageCarousel_module_default.counter, "aria-live": "polite", children: counted })
+              ] })
+            ]
+          }
+        ),
+        many && pager === "thumbnails" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ImageCarousel_module_default.thumbs, children: [
+          shown.map((frame, position) => /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: ImageCarousel_module_default.thumb,
+              "aria-label": labels.slide(position + 1),
+              "aria-current": position === current ? "true" : void 0,
+              onClick: () => goTo(position),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                MediaPlaceholder,
+                {
+                  aspect: "1 / 1",
+                  ...frame.src === void 0 ? {} : { src: frame.src },
+                  blurred: frame.covered === true
+                }
+              )
+            },
+            frame.id
+          )),
+          hidden > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: cx(ImageCarousel_module_default.thumb, ImageCarousel_module_default.more),
+              "aria-label": labels.more(hidden),
+              onClick: () => goTo(shown.length),
+              children: /* @__PURE__ */ jsxRuntime.jsxs(Text, { variant: "meta", children: [
+                "+",
+                hidden
+              ] })
+            }
+          )
+        ] }),
+        many && pager === "dots" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: ImageCarousel_module_default.dots, children: slides.map((frame, position) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: ImageCarousel_module_default.dot,
+            "aria-label": labels.slide(position + 1),
+            "aria-current": position === current ? "true" : void 0,
+            onClick: () => goTo(position)
+          },
+          frame.id
+        )) })
+      ]
+    }
+  );
+}
+
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/UploadProgress/UploadProgress.module.css?mds-scoped
+var UploadProgress_module_default = { "upload": "mds-UploadProgress__upload", "head": "mds-UploadProgress__head", "preview": "mds-UploadProgress__preview", "mark": "mds-UploadProgress__mark", "name": "mds-UploadProgress__name", "foot": "mds-UploadProgress__foot", "status-done": "mds-UploadProgress__status-done", "status-error": "mds-UploadProgress__status-error" };
+function UploadProgress({
+  name,
+  labels,
+  preview,
+  mark,
+  value,
+  status = "uploading",
+  detail,
+  error,
+  onCancel,
+  onRetry,
+  onRemove,
+  className,
+  ...rest
+}) {
+  const running = status === "uploading" || status === "processing";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(UploadProgress_module_default.upload, UploadProgress_module_default[`status-${status}`], className), ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: UploadProgress_module_default.head, children: [
+      preview !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: UploadProgress_module_default.preview, children: preview }),
+      mark !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: UploadProgress_module_default.mark, children: mark }),
+      /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "label", truncate: true, className: UploadProgress_module_default.name, children: name }),
+      running && onCancel !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Button, { iconOnly: true, size: "sm", variant: "ghost", "aria-label": labels.cancel, onClick: onCancel, children: /* @__PURE__ */ jsxRuntime.jsx(CloseGlyph, {}) }),
+      !running && onRemove !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Button, { iconOnly: true, size: "sm", variant: "ghost", "aria-label": labels.remove, onClick: onRemove, children: /* @__PURE__ */ jsxRuntime.jsx(CloseGlyph, {}) }),
+      status === "error" && onRetry !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", variant: "secondary", onClick: onRetry, children: labels.retry })
+    ] }),
+    running && /* @__PURE__ */ jsxRuntime.jsx(
+      ProgressBar,
+      {
+        label: `${labels[status]} ${name}`,
+        value: value ?? 0,
+        indeterminate: status === "processing",
+        ...detail === void 0 ? {} : { valueText: detail }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: UploadProgress_module_default.foot, children: status === "error" ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "meta", tone: "danger", role: "alert", children: error ?? labels.error }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      status !== "uploading" && /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "meta", children: labels[status] }),
+      detail !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "meta", children: detail })
+    ] }) })
+  ] });
+}
+
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Lightbox/Lightbox.module.css?mds-scoped
+var Lightbox_module_default = { "panel": "mds-Lightbox__panel", "bar": "mds-Lightbox__bar", "surface": "mds-Lightbox__surface", "image": "mds-Lightbox__image", "caption": "mds-Lightbox__caption" };
+var MIN_SCALE = 1;
+var MAX_SCALE = 4;
+var STEP = 1;
+var DOUBLE = 2.5;
+var WHEEL = 0.01;
+var ORIGIN = { x: 0, y: 0 };
+var clamp = (value, low, high) => Math.min(Math.max(value, low), high);
+var round = (value) => Math.round(value * 1e3) / 1e3;
+var distance = (a, b) => Math.hypot(a.x - b.x, a.y - b.y);
+function Lightbox({ open, onClose, src, alt = "", caption, labels }) {
+  const [surface, setSurface] = react.useState(null);
+  const [scale, setScale] = react.useState(MIN_SCALE);
+  const [offset, setOffset] = react.useState(ORIGIN);
+  const points = react.useRef(/* @__PURE__ */ new Map());
+  const from = react.useRef({ spread: 0, scale: MIN_SCALE, x: 0, y: 0, offset: ORIGIN });
+  const [shown, setShown] = react.useState({ src, open });
+  if (shown.src !== src || shown.open !== open) {
+    setShown({ src, open });
+    setScale(MIN_SCALE);
+    setOffset(ORIGIN);
+  }
+  react.useEffect(() => {
+    points.current.clear();
+  }, [src, open]);
+  const hold = react.useCallback(
+    (next, at2) => {
+      const box = surface?.getBoundingClientRect();
+      if (!box) return ORIGIN;
+      const room = { x: box.width * (at2 - 1) / 2, y: box.height * (at2 - 1) / 2 };
+      return { x: clamp(next.x, -room.x, room.x), y: clamp(next.y, -room.y, room.y) };
+    },
+    [surface]
+  );
+  const zoom = react.useCallback(
+    (to) => {
+      const next = clamp(round(to), MIN_SCALE, MAX_SCALE);
+      setScale(next);
+      setOffset((current) => hold(current, next));
+    },
+    [hold]
+  );
+  const at = react.useRef(scale);
+  react.useEffect(() => {
+    at.current = scale;
+  }, [scale]);
+  react.useEffect(() => {
+    if (!surface) return;
+    const onWheel = (event) => {
+      if (!event.ctrlKey) return;
+      event.preventDefault();
+      zoom(at.current * Math.exp(-event.deltaY * WHEEL));
+    };
+    surface.addEventListener("wheel", onWheel, { passive: false });
+    return () => surface.removeEventListener("wheel", onWheel);
+  }, [surface, zoom]);
+  function onPointerDown(event) {
+    points.current.set(event.pointerId, { x: event.clientX, y: event.clientY });
+    const [first, second] = [...points.current.values()];
+    if (first && second) {
+      from.current = { ...from.current, spread: distance(first, second), scale };
+      return;
+    }
+    if (first) from.current = { ...from.current, x: first.x, y: first.y, offset };
+  }
+  function onPointerMove(event) {
+    if (!points.current.has(event.pointerId)) return;
+    points.current.set(event.pointerId, { x: event.clientX, y: event.clientY });
+    const [first, second] = [...points.current.values()];
+    if (!first) return;
+    if (second) {
+      const spread = distance(first, second);
+      if (from.current.spread === 0) return;
+      zoom(from.current.scale * (spread / from.current.spread));
+      return;
+    }
+    if (scale <= MIN_SCALE) return;
+    setOffset(
+      hold(
+        {
+          x: from.current.offset.x + (first.x - from.current.x),
+          y: from.current.offset.y + (first.y - from.current.y)
+        },
+        scale
+      )
+    );
+  }
+  function onPointerUp(event) {
+    points.current.delete(event.pointerId);
+    const [rest] = [...points.current.values()];
+    if (rest) from.current = { ...from.current, x: rest.x, y: rest.y, offset };
+  }
+  const vars = {
+    "--zoom": String(round(scale)),
+    "--pan-x": `${round(offset.x)}px`,
+    "--pan-y": `${round(offset.y)}px`
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Overlay,
+    {
+      open,
+      onClose,
+      label: labels.dialog,
+      variant: "lightbox",
+      closeOnScrimClick: false,
+      panelClassName: Lightbox_module_default.panel,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Lightbox_module_default.bar, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              iconOnly: true,
+              "aria-label": labels.zoomOut,
+              variant: "ghost",
+              onMedia: true,
+              disabled: scale <= MIN_SCALE,
+              onClick: () => zoom(scale - STEP),
+              children: /* @__PURE__ */ jsxRuntime.jsx(ZoomOutGlyph, {})
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              iconOnly: true,
+              "aria-label": labels.zoomIn,
+              variant: "ghost",
+              onMedia: true,
+              disabled: scale >= MAX_SCALE,
+              onClick: () => zoom(scale + STEP),
+              children: /* @__PURE__ */ jsxRuntime.jsx(ZoomInGlyph, {})
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(Button, { iconOnly: true, "aria-label": labels.close, variant: "ghost", onMedia: true, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(CloseGlyph, {}) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: setSurface,
+            className: Lightbox_module_default.surface,
+            onPointerDown,
+            onPointerMove,
+            onPointerUp,
+            onPointerCancel: onPointerUp,
+            onDoubleClick: () => zoom(scale > MIN_SCALE ? MIN_SCALE : DOUBLE),
+            children: /* @__PURE__ */ jsxRuntime.jsx("img", { className: Lightbox_module_default.image, src, alt, draggable: false, style: vars })
+          }
+        ),
+        caption !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "meta", tone: "on-media", className: Lightbox_module_default.caption, children: caption })
+      ]
+    }
+  );
+}
+
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/VideoPlayer/VideoPlayer.module.css?mds-scoped
+var VideoPlayer_module_default = { "player": "mds-VideoPlayer__player", "frame": "mds-VideoPlayer__frame", "media": "mds-VideoPlayer__media", "covered": "mds-VideoPlayer__covered", "start": "mds-VideoPlayer__start", "startGlyph": "mds-VideoPlayer__startGlyph", "cover": "mds-VideoPlayer__cover", "controls": "mds-VideoPlayer__controls", "scrub": "mds-VideoPlayer__scrub", "time": "mds-VideoPlayer__time", "chapters": "mds-VideoPlayer__chapters", "chapter": "mds-VideoPlayer__chapter", "chapterAt": "mds-VideoPlayer__chapterAt" };
+var FIRST_FRAME_S = 1e-3;
+var SECONDS_IN_MINUTE = 60;
+var SECONDS_IN_HOUR = 3600;
+function clock(seconds) {
+  if (!Number.isFinite(seconds) || seconds < 0) return "0:00";
+  const whole = Math.floor(seconds);
+  const s = whole % SECONDS_IN_MINUTE;
+  const m = Math.floor(whole / SECONDS_IN_MINUTE) % SECONDS_IN_MINUTE;
+  const h = Math.floor(whole / SECONDS_IN_HOUR);
+  const ss = String(s).padStart(2, "0");
+  return h > 0 ? `${h}:${String(m).padStart(2, "0")}:${ss}` : `${m}:${ss}`;
+}
+function VideoPlayer({
+  src,
+  poster,
+  labels,
+  chapters,
+  chaptersLabel,
+  onChapterSelect,
+  captions,
+  captionsLabel,
+  autoPlay = false,
+  covered = false,
+  cover,
+  className,
+  ref,
+  ...rest
+}) {
+  const media = react.useRef(null);
+  const root = react.useRef(null);
+  const [playing, setPlaying] = react.useState(false);
+  const [muted, setMuted] = react.useState(false);
+  const [at, setAt] = react.useState(0);
+  const [length, setLength] = react.useState(0);
+  const [isFullscreen, setFullscreen] = react.useState(false);
+  function toggle() {
+    const el = media.current;
+    if (!el) return;
+    if (playing) el.pause();
+    else void el.play();
+  }
+  function toggleSound() {
+    const el = media.current;
+    if (!el) return;
+    const next = !muted;
+    el.muted = next;
+    setMuted(next);
+  }
+  function onMetadata(event) {
+    const el = event.currentTarget;
+    setLength(el.duration);
+    if (poster === void 0 && el.currentTime === 0) el.currentTime = FIRST_FRAME_S;
+  }
+  function goTo(seconds) {
+    const el = media.current;
+    if (el) el.currentTime = seconds;
+    setAt(seconds);
+  }
+  function toggleCaptions() {
+    const track = media.current?.textTracks?.[0];
+    if (track) track.mode = track.mode === "showing" ? "disabled" : "showing";
+  }
+  function selectChapter(chapter) {
+    goTo(chapter.at);
+    onChapterSelect?.(chapter.at);
+  }
+  react.useEffect(() => {
+    const read = () => setFullscreen(document.fullscreenElement === root.current);
+    document.addEventListener("fullscreenchange", read);
+    return () => document.removeEventListener("fullscreenchange", read);
+  }, []);
+  function toggleFullscreen() {
+    if (isFullscreen) {
+      void document.exitFullscreen?.();
+      return;
+    }
+    const box = root.current;
+    if (box?.requestFullscreen) {
+      void box.requestFullscreen();
+      return;
+    }
+    media.current?.webkitEnterFullscreen?.();
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      className: cx(VideoPlayer_module_default.player, covered && VideoPlayer_module_default.covered, className),
+      "aria-label": labels.region,
+      ref: (node) => {
+        root.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: VideoPlayer_module_default.frame, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "video",
+            {
+              ref: media,
+              className: VideoPlayer_module_default.media,
+              src,
+              poster,
+              autoPlay: autoPlay && !covered,
+              playsInline: true,
+              preload: "metadata",
+              onPlay: () => setPlaying(true),
+              onPause: () => setPlaying(false),
+              onTimeUpdate: (event) => setAt(event.currentTarget.currentTime),
+              onLoadedMetadata: onMetadata,
+              children: captions !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                "track",
+                {
+                  kind: "captions",
+                  src: captions.src,
+                  srcLang: captions.lang,
+                  label: captions.label,
+                  default: captions.defaultOn
+                }
+              )
+            }
+          ),
+          !playing && !covered && /* The picture is the target here; the control row below says the same
+             thing in words, so this one is not said twice. */
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: VideoPlayer_module_default.start, onClick: toggle, "aria-hidden": "true", tabIndex: -1, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: VideoPlayer_module_default.startGlyph, children: /* @__PURE__ */ jsxRuntime.jsx(PlayGlyph, {}) }) }),
+          cover !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: VideoPlayer_module_default.cover, children: cover })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: VideoPlayer_module_default.controls, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              iconOnly: true,
+              "aria-label": playing ? labels.pause : labels.play,
+              variant: "ghost",
+              size: "sm",
+              onClick: toggle,
+              children: playing ? /* @__PURE__ */ jsxRuntime.jsx(PauseGlyph, {}) : /* @__PURE__ */ jsxRuntime.jsx(PlayGlyph, {})
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "range",
+              className: VideoPlayer_module_default.scrub,
+              "aria-label": labels.seek,
+              min: 0,
+              max: length || 0,
+              step: 1,
+              value: Math.min(at, length || 0),
+              onChange: (event) => goTo(Number(event.target.value))
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "meta", className: VideoPlayer_module_default.time, children: `${clock(at)} / ${clock(length)}` }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              iconOnly: true,
+              "aria-label": muted ? labels.unmute : labels.mute,
+              variant: "ghost",
+              size: "sm",
+              onClick: toggleSound,
+              children: muted ? /* @__PURE__ */ jsxRuntime.jsx(VolumeOffGlyph, {}) : /* @__PURE__ */ jsxRuntime.jsx(VolumeGlyph, {})
+            }
+          ),
+          captions !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              iconOnly: true,
+              "aria-label": captionsLabel,
+              variant: "ghost",
+              size: "sm",
+              "aria-pressed": captions.defaultOn ?? false,
+              onClick: toggleCaptions,
+              children: /* @__PURE__ */ jsxRuntime.jsx(CaptionsGlyph, {})
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              iconOnly: true,
+              "aria-label": isFullscreen ? labels.exitFullscreen : labels.fullscreen,
+              variant: "ghost",
+              size: "sm",
+              onClick: toggleFullscreen,
+              children: isFullscreen ? /* @__PURE__ */ jsxRuntime.jsx(FullscreenExitGlyph, {}) : /* @__PURE__ */ jsxRuntime.jsx(FullscreenGlyph, {})
+            }
+          )
+        ] }),
+        chapters !== void 0 && chapters.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: VideoPlayer_module_default.chapters, "aria-label": chaptersLabel, children: chapters.map((chapter) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", size: "sm", className: VideoPlayer_module_default.chapter, onClick: () => selectChapter(chapter), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "meta", className: VideoPlayer_module_default.chapterAt, children: clock(chapter.at) }),
+          /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "body", children: chapter.label })
+        ] }) }, chapter.at)) })
+      ]
+    }
+  );
+}
+
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Breadcrumb/Breadcrumb.module.css?mds-scoped
+var Breadcrumb_module_default = { "crumbs": "mds-Breadcrumb__crumbs", "list": "mds-Breadcrumb__list", "item": "mds-Breadcrumb__item", "separator": "mds-Breadcrumb__separator", "link": "mds-Breadcrumb__link" };
+function Breadcrumb({
+  items,
+  label,
+  linkAs = "a",
+  className,
+  ...rest
+}) {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": label, className: cx(Breadcrumb_module_default.crumbs, className), ...rest, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: Breadcrumb_module_default.list, children: items.map((item, index) => {
+    const last = index === items.length - 1;
+    return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: Breadcrumb_module_default.item, children: [
+      index > 0 && /* @__PURE__ */ jsxRuntime.jsx(ChevronRightGlyph, { className: Breadcrumb_module_default.separator }),
+      last || item.href === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "meta", tone: last ? "primary" : "muted", "aria-current": last ? "page" : void 0, children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx(Link, { variant: "plain", size: "xs", as: linkAs, href: item.href, className: Breadcrumb_module_default.link, children: item.label })
+    ] }, `${item.label}-${index}`);
+  }) }) });
+}
 function useRovingGroup(ref, { selector, orientation = "horizontal" }) {
   return react.useCallback(
     (event) => {
@@ -1649,6 +2430,7 @@ exports.AppBar = AppBar;
 exports.Avatar = Avatar;
 exports.AvatarGroup = AvatarGroup;
 exports.Badge = Badge;
+exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
 exports.Card = Card;
 exports.CardBody = CardBody;
@@ -1668,11 +2450,14 @@ exports.Field = Field;
 exports.Heading = Heading;
 exports.Icon = Icon;
 exports.IconProvider = IconProvider;
+exports.ImageCarousel = ImageCarousel;
 exports.Inline = Inline;
 exports.Input = Input;
+exports.Lightbox = Lightbox;
 exports.Link = Link;
 exports.ListGroup = ListGroup;
 exports.ListItem = ListItem;
+exports.MediaPlaceholder = MediaPlaceholder;
 exports.Modal = Modal;
 exports.ModalBody = ModalBody;
 exports.ModalFooter = ModalFooter;
@@ -1705,6 +2490,9 @@ exports.Tag = Tag;
 exports.Text = Text;
 exports.Textarea = Textarea;
 exports.ToastProvider = ToastProvider;
+exports.UploadProgress = UploadProgress;
+exports.VideoPlayer = VideoPlayer;
+exports.VisuallyHidden = VisuallyHidden;
 exports.cx = cx;
 exports.useFieldContext = useFieldContext;
 exports.useOverlay = useOverlay;