@once-ui-system/core 1.8.4 → 2.0.0-alpha.0

package/dist/components/Input.module.scss

@@ -1 +1,313 @@
-.base {     backdrop-filter: var(--backdrop-filter);     min-height: var(--static-space-56);      &.focused, &.filled {         border-color: var(--neutral-border-medium);     }      &:has(.placeholder):has(.floating) {         .placeholder {             padding-top: var(--static-space-12);         }     } }  .resizeHandle {     &::after {         pointer-events: none;         content: '';         position: absolute;         right: 0;         bottom: 0;         width: var(--static-space-32);         height: var(--static-space-32);         border: 1px solid var(--neutral-border-strong);         transform: translateX(50%) translateY(50%) rotate(45deg);         background-color: var(--neutral-alpha-weak);     }      ::-webkit-resizer {         display: none;     } }  .label {     position: absolute;     left: var(--static-space-16);     transition: transform 0.3s, top 0.3s, left 0.3s;     color: var(--neutral-on-background-medium);     pointer-events: none;     transform-origin: left;      &.floating {         transform: scale(0.75);     } }  .inputLabel {     top: 50%;     transform: translateY(-50%); }  .textareaLabel {     top: calc(var(--static-space-16) + var(--static-space-2)); }  .xs {     min-height: var(--static-space-40);      .label, .textareaLabel {         &.floating {             top: calc(var(--static-space-4) - var(--static-space-1));         }     }      .inputLabel, .textareaLabel {         &.floating {             transform: scale(0.6);         }     } }  .s {     min-height: var(--static-space-48);      .label, .textareaLabel {         &.floating {             top: calc(var(--static-space-4) - var(--static-space-1));         }     } }  .m {     min-height: var(--static-space-56);          .label, .textareaLabel {         &.floating {             top: calc(var(--static-space-8) - var(--static-space-2));         }     } }  .l {     min-height: var(--static-space-64);          .label {         &.floating {             top: calc(var(--static-space-8) - var(--static-space-2));         }     }      .textareaLabel {         &.floating {             top: var(--static-space-4);         }     } }  .xl {     min-height: var(--static-space-72);          .label {         &.floating {             top: calc(var(--static-space-12) - var(--static-space-2));         }     }          .textareaLabel {         &.floating {             top: var(--static-space-4);         }     } }  .input {     width: 100%;     height: 100%;     border: none;     background: none;     color: var(--neutral-on-background-strong);     padding: 0 var(--static-space-12);     outline: none;     border-radius: var(--radius-s);      &.placeholder {         padding-top: 0;     }      &.textarea.placeholder {         padding-top: var(--static-space-12);         padding-bottom: var(--static-space-12);     }      &:not(.placeholder) {         padding-top: var(--static-space-16);     }      &.placeholder.hasChildren {         padding-top: var(--static-space-16);     }      &::placeholder {         color: var(--neutral-on-background-weak);     }      &:disabled {         color: var(--neutral-on-background-weak);         cursor: not-allowed;     }      &:autofill, &:-webkit-autofill {         background-color: var(--static-transparent) !important;         -webkit-box-shadow: 0 0 0 var(--static-space-32) var(--neutral-background-medium) inset !important;         -webkit-text-fill-color: var(--neutral-on-background-strong) !important;     } }  .error {     .base {         background-color: var(--danger-background-medium);         border-color: var(--danger-border-medium);     }      .input, .prefix, .suffix {         color: var(--danger-on-background-medium);     }      .label {         color: var(--danger-on-background-weak);     }      .resizeHandle {         &::after {             border-color: var(--danger-border-medium);             background-color: var(--danger-alpha-weak);         }     } }  .prefix, .suffix {     align-self: center; }  .input[type="color"] {     opacity: 0; }
+/* Field metrics
+   ----------------------------------------------------------------------------
+   The floating label and the value are placed by where their INK falls — cap
+   height down to descender — rather than by their line boxes. A line box
+   carries invisible leading on both sides, so centring line boxes pays for
+   that leading twice: the pair drifts apart and the block rides high in the
+   field. Ratios below (cap 0.72em, ascender 0.80em, descender 0.20em) are
+   approximations that hold for Geist and most UI sans faces.
+
+   Two offsets here are structural rather than typographic. `.base` carries a
+   1px border, and Input.tsx / Textarea.tsx render the inner Column with
+   padding="4". The label is absolutely positioned against that Column, so it
+   measures from the border edge; the value additionally clears the Column's
+   padding. Both are named below — if either changes in the TSX, change it
+   here too.
+
+   `--fld-gap` is the label-to-value distance in em of the value. xs and s keep
+   the base 0.25; m, l and xl take 0.375, which reads about 2px looser at each
+   of those sizes (m 4px to 6px, l 4.5 to 6.75, xl 5 to 7.5). The pair was
+   optically tight once the label actually floated — at the small sizes the
+   label is scaled down far enough that the base ratio still reads open. The
+   field height does not change: a taller ink block re-centres, so the label
+   rises by half the increase and the value drops by half.
+
+   On touch the value is clamped to 16px so iOS Safari does not zoom on focus,
+   and its line-height is clamped with it at 1.3 — Once UI's own body-s ratio is
+   1.286, and any looser a floor would also lift sizes that never had a problem.
+   Flooring font-size alone would put
+   16px glyphs in the 16.88px line box that body-s resolves to on mobile. */
+
+/* Opt-in via the `focusRing` prop. Fields ship without one on purpose — the
+   look is the borderless native field Apple and Revolut settled on — but that
+   leaves a keyboard user with no indication of where they are, while `Card`
+   and `SmartLink` in this same library do show one. The ring is drawn on the
+   field rather than the control because the control sits inside the border and
+   the Column's padding, so its own outline would fall within the field.
+
+   Note that a text field matches `:focus-visible` however it was focused: the
+   pseudo-class always matches an element that takes keyboard input, so the
+   ring appears on a mouse click too. `:focus-visible` is still the right
+   selector — it is what the rest of the library uses, and it is what keeps
+   the ring off a field focused programmatically.
+
+   Two selectors, because focus lands in two places. A plain field focuses its
+   own control. `Select` moves focus off the trigger and into the dropdown, so
+   for most of the interaction the control is not the focused element at all —
+   it tracks focus across the whole widget instead and marks the wrapper, the
+   same descendant shape `.error .base` uses below. Same outline as the
+   `.focus-ring` utility either way, so an opted-in field matches every other
+   focusable thing on the page. */
+.base.focusRing:has(.input:focus-visible),
+.focused .base.focusRing {
+  outline: var(--static-space-2) solid var(--brand-solid-strong);
+  outline-offset: 2px;
+}
+
+.base {
+  --fld-border: 1px;
+  --fld-well: var(--static-space-4); /* Column padding="4" in the TSX */
+  --fld-gap: var(--fld-gap-loose, 0.25); /* label to value, in em of the value */
+
+  --fld-label-fs: calc(var(--font-size-label-m) * var(--font-size-label-multiplier));
+  --fld-label-lh: calc(var(--line-height-label-m) * var(--line-height-label-multiplier));
+
+  --fld-fs: var(--fld-fs-base);
+  --fld-lh: var(--fld-lh-base);
+  --fld-h: var(--fld-h-base);
+
+  --fld-cap-label: calc(var(--fld-label-fs) * 0.72 * var(--fld-label-scale));
+  --fld-cap-value: calc(var(--fld-fs) * 0.72);
+  --fld-desc-value: calc(var(--fld-fs) * 0.2);
+  --fld-gap-size: calc(var(--fld-fs) * var(--fld-gap));
+
+  --fld-ink: calc(
+    var(--fld-cap-label) + var(--fld-gap-size) + var(--fld-cap-value) + var(--fld-desc-value)
+  );
+
+  /* The box the value actually gets: the field less its border and the well. */
+  --fld-box: calc(var(--fld-h) - 2 * var(--fld-border) - 2 * var(--fld-well));
+  --fld-ink-top: calc((var(--fld-box) - var(--fld-ink)) / 2);
+
+  /* Inputs centre their ink in a fixed box; textareas grow, so they anchor to a
+     fixed top inset and share only the gap below the label. */
+  --fld-anchor: var(--fld-ink-top);
+
+  /* Distance from a text box's top edge to the cap height of its first line. */
+  --fld-lead-value: calc((var(--fld-lh) - var(--fld-fs)) / 2 + var(--fld-fs) * 0.08);
+  --fld-lead-label: calc(
+    ((var(--fld-label-lh) - var(--fld-label-fs)) / 2 + var(--fld-label-fs) * 0.08) *
+      var(--fld-label-scale)
+  );
+
+  --fld-label-top: calc(var(--fld-well) + var(--fld-anchor) - var(--fld-lead-label));
+  --fld-value-top: calc(
+    var(--fld-anchor) + var(--fld-cap-label) + var(--fld-gap-size) - var(--fld-lead-value)
+  );
+  /* A single-line <input> centres its text in its content box, so the box is
+     pinched to exactly one line — otherwise the padding above would only move
+     the text by half of itself and the ink would sit low. */
+  --fld-value-bottom: max(0px, calc(var(--fld-box) - var(--fld-value-top) - var(--fld-lh)));
+
+  backdrop-filter: var(--backdrop-filter);
+  min-height: var(--fld-h);
+
+  &:has(.textarea) {
+    --fld-anchor: var(--static-space-8);
+  }
+}
+
+@media (hover: none) and (pointer: coarse) {
+  .base {
+    --fld-fs: max(var(--fld-fs-base), 16px);
+    --fld-lh: max(var(--fld-lh-base), calc(var(--fld-fs) * 1.3));
+    --fld-h: max(var(--fld-h-base), var(--fld-h-touch));
+  }
+}
+
+.xs {
+  --fld-fs-base: calc(var(--font-size-body-s) * var(--font-size-body-multiplier));
+  --fld-lh-base: calc(var(--line-height-body-s) * var(--line-height-body-multiplier));
+  --fld-h-base: var(--static-space-40);
+  --fld-h-touch: 40px;
+  --fld-label-scale: 0.6;
+  --fld-inset: var(--static-space-12);
+}
+
+.s {
+  --fld-fs-base: calc(var(--font-size-body-s) * var(--font-size-body-multiplier));
+  --fld-lh-base: calc(var(--line-height-body-s) * var(--line-height-body-multiplier));
+  --fld-h-base: var(--static-space-48);
+  --fld-h-touch: 48px;
+  --fld-label-scale: 0.75;
+  --fld-inset: var(--static-space-12);
+}
+
+.m {
+  --fld-fs-base: calc(var(--font-size-body-m) * var(--font-size-body-multiplier));
+  --fld-lh-base: calc(var(--line-height-body-m) * var(--line-height-body-multiplier));
+  --fld-h-base: var(--static-space-56);
+  --fld-h-touch: 0px;
+  --fld-label-scale: 0.75;
+  --fld-gap-loose: 0.375;
+  --fld-inset: var(--static-space-16);
+}
+
+.l {
+  --fld-fs-base: calc(var(--font-size-body-l) * var(--font-size-body-multiplier));
+  --fld-lh-base: calc(var(--line-height-body-l) * var(--line-height-body-multiplier));
+  --fld-h-base: var(--static-space-64);
+  --fld-h-touch: 0px;
+  --fld-label-scale: 0.75;
+  --fld-gap-loose: 0.375;
+  --fld-inset: var(--static-space-16);
+}
+
+.xl {
+  --fld-fs-base: calc(var(--font-size-body-xl) * var(--font-size-body-multiplier));
+  --fld-lh-base: calc(var(--line-height-body-xl) * var(--line-height-body-multiplier));
+  --fld-h-base: var(--static-space-72);
+  --fld-h-touch: 0px;
+  --fld-label-scale: 0.75;
+  --fld-gap-loose: 0.375;
+  --fld-inset: var(--static-space-16);
+}
+
+.resizeHandle {
+  &::after {
+    pointer-events: none;
+    content: '';
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: var(--static-space-32);
+    height: var(--static-space-32);
+    border: 1px solid var(--neutral-border-strong);
+    transform: translateX(50%) translateY(50%) rotate(45deg);
+    background-color: var(--neutral-alpha-weak);
+  }
+
+  ::-webkit-resizer {
+    display: none;
+  }
+}
+
+.label {
+  position: absolute;
+  left: var(--fld-inset);
+  transition: transform 0.3s, top 0.3s, left 0.3s;
+  color: var(--neutral-on-background-medium);
+  pointer-events: none;
+  /* `left top`, not the default `left center`: scaling about the top edge makes
+     the floating label's `top` its visual top, so the placement maths above can
+     be read directly off the value. */
+  transform-origin: left top;
+
+  &.floating {
+    transform: scale(var(--fld-label-scale));
+  }
+}
+
+.inputLabel {
+  top: 50%;
+  transform: translateY(-50%);
+
+  &.floating {
+    top: var(--fld-label-top);
+  }
+}
+
+.textareaLabel {
+  top: calc(var(--static-space-16) + var(--static-space-2));
+
+  &.floating {
+    top: var(--fld-label-top);
+  }
+}
+
+.input {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background: none;
+  color: var(--neutral-on-background-strong);
+  font-size: var(--fld-fs);
+  line-height: var(--fld-lh);
+  /* The Column's padding already supplies `--fld-well` of the inset. */
+  padding: 0 calc(var(--fld-inset) - var(--fld-well));
+  outline: none;
+  border-radius: var(--radius-s);
+
+  &.textarea {
+    height: auto;
+    padding-bottom: var(--static-space-12);
+  }
+
+  &::placeholder {
+    color: var(--neutral-on-background-weak);
+  }
+
+  &:disabled {
+    color: var(--neutral-on-background-weak);
+    cursor: not-allowed;
+  }
+
+  &:autofill,
+  &:-webkit-autofill {
+    background-color: var(--static-transparent) !important;
+    -webkit-box-shadow: 0 0 0 var(--static-space-32) var(--neutral-background-medium) inset !important;
+    -webkit-text-fill-color: var(--neutral-on-background-strong) !important;
+    /* The browser fills the field without firing focus, blur or change, so
+       React never learns the field is no longer empty and the label stayed on
+       top of the filled text. An animation is the one event autofill does
+       emit: Input.tsx listens for it by name and sets the filled state. */
+    animation: onAutoFill 1ms;
+  }
+}
+
+/* The value only clears room for the label once the label is actually floating
+   above it — an input with no label keeps its text centred by the UA. */
+.base:has(.label.floating) .input {
+  padding-top: var(--fld-value-top);
+
+  &:not(.textarea) {
+    padding-bottom: var(--fld-value-bottom);
+  }
+}
+
+.error {
+  .base {
+    background-color: var(--danger-background-medium);
+    border-color: var(--danger-border-medium);
+  }
+
+  .input,
+  .prefix,
+  .suffix {
+    color: var(--danger-on-background-medium);
+  }
+
+  .label {
+    color: var(--danger-on-background-weak);
+  }
+
+  .resizeHandle {
+    &::after {
+      border-color: var(--danger-border-medium);
+      background-color: var(--danger-alpha-weak);
+    }
+  }
+}
+
+.prefix,
+.suffix {
+  align-self: center;
+}
+
+.input[type="color"] {
+  opacity: 0;
+}
+
+/* Inert by design — the animation exists only so autofill announces itself,
+   and nothing reads `--fld-autofill`. A custom property is animated rather
+   than a real one so the keyframes cannot fight any declared style, and the
+   duration is non-zero so `animationstart` is guaranteed to fire. */
+@keyframes onAutoFill {
+  from {
+    --fld-autofill: 0;
+  }
+
+  to {
+    --fld-autofill: 1;
+  }
+}

package/dist/components/InteractiveDetails.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InteractiveDetails.d.ts","sourceRoot":"","sources":["../../src/components/InteractiveDetails.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAA4B,eAAe,EAAO,MAAM,GAAG,CAAC;AAEnE,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAiCxD,CAAC;AAIH,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAC9B,YAAY,EAAE,uBAAuB,EAAE,CAAC"}
+{"version":3,"file":"InteractiveDetails.d.ts","sourceRoot":"","sources":["../../src/components/InteractiveDetails.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAA4B,eAAe,EAAO,MAAM,GAAG,CAAC;AAEnE,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAkCxD,CAAC;AAIH,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAC9B,YAAY,EAAE,uBAAuB,EAAE,CAAC"}

package/dist/components/InteractiveDetails.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Text, Column, IconButton, Row } from ".";
 const InteractiveDetails = forwardRef(({ label, description, iconButtonProps, onClick, className, id, disabled }, ref) => {
-    return (_jsxs(Column, { ref: ref, cursor: disabled ? "not-allowed" : undefined, className: className, onClick: onClick, id: id, children: [_jsxs(Row, { gap: "4", vertical: "center", children: [_jsx(Text, { as: "span", variant: "label-default-m", onBackground: disabled ? "neutral-weak" : "neutral-strong", children: label }), iconButtonProps?.tooltip && (_jsx("div", { onClick: (e) => e.stopPropagation(), children: _jsx(IconButton, { size: "s", variant: "ghost", icon: "help", ...iconButtonProps }) }))] }), description && (_jsx(Text, { as: "span", variant: "body-default-s", onBackground: "neutral-weak", children: description }))] }));
+    return (_jsxs(Column, { ref: ref, cursor: disabled ? "not-allowed" : undefined, className: className, onClick: onClick, id: id, children: [_jsxs(Row, { gap: "4", vertical: "center", children: [_jsx(Text, { as: "span", variant: "label-default-m", onBackground: disabled ? "neutral-weak" : "neutral-strong", children: label }), iconButtonProps?.tooltip && (_jsx("div", { onClick: (e) => e.stopPropagation(), children: _jsx(IconButton, { size: "s", variant: "ghost", icon: "help", "aria-label": "More information", ...iconButtonProps }) }))] }), description && (_jsx(Text, { as: "span", variant: "body-default-s", onBackground: "neutral-weak", children: description }))] }));
 });
 InteractiveDetails.displayName = "InteractiveDetails";
 export { InteractiveDetails };

package/dist/components/InteractiveDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"InteractiveDetails.js","sourceRoot":"","sources":["../../src/components/InteractiveDetails.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAmB,GAAG,EAAE,MAAM,GAAG,CAAC;AAYnE,MAAM,kBAAkB,GAAsC,UAAU,CAGtE,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,EAAE;IACnF,OAAO,CACL,MAAC,MAAM,IACL,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,EAC5C,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,EAAE,aAEN,MAAC,GAAG,IAAC,GAAG,EAAC,GAAG,EAAC,QAAQ,EAAC,QAAQ,aAC5B,KAAC,IAAI,IACH,EAAE,EAAC,MAAM,EACT,OAAO,EAAC,iBAAiB,EACzB,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,gBAAgB,YAEzD,KAAK,GACD,EACN,eAAe,EAAE,OAAO,IAAI,CAC3B,cAAK,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,YACtC,KAAC,UAAU,IAAC,IAAI,EAAC,GAAG,EAAC,OAAO,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,eAAe,GAAI,GACpE,CACP,IACG,EACL,WAAW,IAAI,CACd,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,gBAAgB,EAAC,YAAY,EAAC,cAAc,YACjE,WAAW,GACP,CACR,IACM,CACV,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAC;AAEtD,OAAO,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"InteractiveDetails.js","sourceRoot":"","sources":["../../src/components/InteractiveDetails.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAmB,GAAG,EAAE,MAAM,GAAG,CAAC;AAYnE,MAAM,kBAAkB,GAAsC,UAAU,CAGtE,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,EAAE;IACnF,OAAO,CACL,MAAC,MAAM,IACL,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,EAC5C,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,EAAE,aAEN,MAAC,GAAG,IAAC,GAAG,EAAC,GAAG,EAAC,QAAQ,EAAC,QAAQ,aAC5B,KAAC,IAAI,IACH,EAAE,EAAC,MAAM,EACT,OAAO,EAAC,iBAAiB,EACzB,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,gBAAgB,YAEzD,KAAK,GACD,EACN,eAAe,EAAE,OAAO,IAAI,CAC3B,cAAK,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,YACtC,KAAC,UAAU,IAAC,IAAI,EAAC,GAAG,EAAC,OAAO,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,gBACvC,kBAAkB,KAAK,eAAe,GAAI,GAC/C,CACP,IACG,EACL,WAAW,IAAI,CACd,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,gBAAgB,EAAC,YAAY,EAAC,cAAc,YACjE,WAAW,GACP,CACR,IACM,CACV,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAC;AAEtD,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/components/Kbd.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Kbd.d.ts","sourceRoot":"","sources":["../../src/components/Kbd.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,IAAI,EAAQ,MAAM,GAAG,CAAC;AAE/B,UAAU,QAAS,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,GAAG,8FAsBR,CAAC;AAIF,OAAO,EAAE,GAAG,EAAE,CAAC;AACf,YAAY,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"Kbd.d.ts","sourceRoot":"","sources":["../../src/components/Kbd.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,IAAI,EAAQ,MAAM,GAAG,CAAC;AAE/B,UAAU,QAAS,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,GAAG,8FA0BR,CAAC;AAIF,OAAO,EAAE,GAAG,EAAE,CAAC;AACf,YAAY,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/Kbd.js

@@ -1,7 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Flex, Text } from ".";
-const Kbd = forwardRef(({ label, children, className, style, ...rest }, ref) => (_jsx(Flex, { as: "kbd", ref: ref, horizontal: "center", minWidth: "32", background: "neutral-strong", radius: "s", paddingX: "4", paddingY: "2", onBackground: "neutral-medium", border: "neutral-strong", className: className, style: style, ...rest, children: _jsx(Text, { as: "span", variant: "label-default-s", children: label || children }) })));
+const Kbd = forwardRef(({ label, children, className, style, ...rest }, ref) => (_jsx(Flex, { as: "kbd", ref: ref, 
+    // A <kbd> belongs in a sentence. Flex is display: flex, so without this
+    // one every Kbd in prose broke the line and filled the column.
+    inline: true, fit: true, horizontal: "center", minWidth: "32", background: "neutral-strong", radius: "s", paddingX: "4", paddingY: "2", onBackground: "neutral-medium", border: "neutral-strong", className: className, style: style, ...rest, children: _jsx(Text, { as: "span", variant: "label-default-s", children: label || children }) })));
 Kbd.displayName = "Kbd";
 export { Kbd };
 //# sourceMappingURL=Kbd.js.map

package/dist/components/Kbd.js.map

@@ -1 +1 @@
-{"version":3,"file":"Kbd.js","sourceRoot":"","sources":["../../src/components/Kbd.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAa,UAAU,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AAS/B,MAAM,GAAG,GAAG,UAAU,CACpB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACvD,KAAC,IAAI,IACH,EAAE,EAAC,KAAK,EACR,GAAG,EAAE,GAAG,EACR,UAAU,EAAC,QAAQ,EACnB,QAAQ,EAAC,IAAI,EACb,UAAU,EAAC,gBAAgB,EAC3B,MAAM,EAAC,GAAG,EACV,QAAQ,EAAC,GAAG,EACZ,QAAQ,EAAC,GAAG,EACZ,YAAY,EAAC,gBAAgB,EAC7B,MAAM,EAAC,gBAAgB,EACvB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,KACR,IAAI,YAER,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,iBAAiB,YACtC,KAAK,IAAI,QAAQ,GACb,GACF,CACR,CACF,CAAC;AAEF,GAAG,CAAC,WAAW,GAAG,KAAK,CAAC;AAExB,OAAO,EAAE,GAAG,EAAE,CAAC"}
+{"version":3,"file":"Kbd.js","sourceRoot":"","sources":["../../src/components/Kbd.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAa,UAAU,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AAS/B,MAAM,GAAG,GAAG,UAAU,CACpB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACvD,KAAC,IAAI,IACH,EAAE,EAAC,KAAK,EACR,GAAG,EAAE,GAAG;IACR,wEAAwE;IACxE,+DAA+D;IAC/D,MAAM,QACN,GAAG,QACH,UAAU,EAAC,QAAQ,EACnB,QAAQ,EAAC,IAAI,EACb,UAAU,EAAC,gBAAgB,EAC3B,MAAM,EAAC,GAAG,EACV,QAAQ,EAAC,GAAG,EACZ,QAAQ,EAAC,GAAG,EACZ,YAAY,EAAC,gBAAgB,EAC7B,MAAM,EAAC,gBAAgB,EACvB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,KACR,IAAI,YAER,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,iBAAiB,YACtC,KAAK,IAAI,QAAQ,GACb,GACF,CACR,CACF,CAAC;AAEF,GAAG,CAAC,WAAW,GAAG,KAAK,CAAC;AAExB,OAAO,EAAE,GAAG,EAAE,CAAC"}

package/dist/components/Logo.d.ts

@@ -1,11 +1,23 @@
-import React from "react";
-import { TShirtSizes } from "../types";
+import type React from "react";
+import type { TShirtSizes } from "../types";
+/**
+ * A single asset, or one per theme.
+ *
+ * Passing `{ light, dark }` renders both and lets CSS pick, so one `<Logo>`
+ * covers both themes. Before this you had to render the component twice —
+ * once with `light`, once with `dark` — which meant eight elements for four
+ * client logos in a row, and two places to keep in sync for every change.
+ */
+type LogoSource = string | {
+    light: string;
+    dark: string;
+};
 interface LogoProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     className?: string;
     size?: TShirtSizes;
     style?: React.CSSProperties;
-    icon?: string;
-    wordmark?: string;
+    icon?: LogoSource;
+    wordmark?: LogoSource;
     href?: string;
     dark?: boolean;
     light?: boolean;

package/dist/components/Logo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../src/components/Logo.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAGrD,OAAO,EAAgB,WAAW,EAAE,MAAM,UAAU,CAAC;AAYrD,UAAU,SAAU,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,OAAO,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAC1C;AAED,QAAA,MAAM,IAAI,kFAyLR,CAAA;AAGF,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../src/components/Logo.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAgB,WAAW,EAAE,MAAM,UAAU,CAAC;AAW1D;;;;;;;GAOG;AACH,KAAK,UAAU,GAAG,MAAM,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAE3D,UAAU,SAAU,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,OAAO,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAC1C;AAED,QAAA,MAAM,IAAI,kFA8LT,CAAC;AAIF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/Logo.js

@@ -1,10 +1,9 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, forwardRef } from "react";
-import Link from "next/link";
 import classNames from "clsx";
-import { Flex, ContextMenu, Option, Icon, Column, Line } from ".";
-import { useToast } from "../contexts";
+import { forwardRef, useEffect } from "react";
+import { useAdapters, useToast } from "../contexts";
+import { Column, ContextMenu, Flex, Icon, Line, Option } from ".";
 const sizeMap = {
     xs: "20",
     s: "24",
@@ -18,14 +17,33 @@ const Logo = forwardRef(({ size = "m", href, icon, wordmark, className, style, d
             console.warn("Both 'icon' and 'wordmark' props are set to false. The logo will not render any content.");
         }
     }, [icon, wordmark]);
-    const content = (_jsxs(_Fragment, { children: [icon && (_jsx("img", { style: {
-                    height: `var(--static-space-${sizeMap[size]})`,
-                    width: "auto",
-                }, alt: "Trademark", src: icon })), wordmark && (_jsx("img", { style: {
-                    height: `var(--static-space-${sizeMap[size]})`,
-                    width: "auto",
-                }, alt: "Trademark", src: wordmark }))] }));
+    /**
+     * One <img> for a plain source; for a per-theme source, both, each gated by
+     * the same light-flex / dark-flex classes the `light` and `dark` props use.
+     * Rendering both rather than reading the theme at runtime keeps the
+     * component server-renderable and avoids a flash on first paint.
+     */
+    /**
+     * The copy-to-clipboard actions need one concrete file. A per-theme source
+     * has two, so they take the light asset — the one a brand page shows by
+     * default and the one someone pasting a logo almost always wants.
+     */
+    const resolveSource = (source) => typeof source === "string" ? source : source?.light;
+    const renderSource = (source) => {
+        if (!source)
+            return null;
+        const imgStyle = {
+            height: `var(--static-space-${sizeMap[size]})`,
+            width: "auto",
+        };
+        if (typeof source === "string") {
+            return _jsx("img", { style: imgStyle, alt: "Trademark", src: source });
+        }
+        return (_jsxs(_Fragment, { children: [_jsx("img", { className: "light-flex", style: imgStyle, alt: "Trademark", src: source.light }), _jsx("img", { className: "dark-flex", style: imgStyle, alt: "Trademark", src: source.dark })] }));
+    };
+    const content = (_jsxs(_Fragment, { children: [renderSource(icon), renderSource(wordmark)] }));
     const { addToast } = useToast();
+    const { Link } = useAdapters();
     const copyIconToClipboard = async () => {
         if (!icon) {
             addToast({
@@ -35,7 +53,7 @@ const Logo = forwardRef(({ size = "m", href, icon, wordmark, className, style, d
             return;
         }
         try {
-            const response = await fetch(icon);
+            const response = await fetch(resolveSource(icon));
             const svgText = await response.text();
             await navigator.clipboard.writeText(svgText);
             addToast({
@@ -60,7 +78,7 @@ const Logo = forwardRef(({ size = "m", href, icon, wordmark, className, style, d
             return;
         }
         try {
-            const response = await fetch(wordmark);
+            const response = await fetch(resolveSource(wordmark));
             const svgText = await response.text();
             await navigator.clipboard.writeText(svgText);
             addToast({
@@ -77,7 +95,7 @@ const Logo = forwardRef(({ size = "m", href, icon, wordmark, className, style, d
         }
     };
     const renderDropdownContent = () => {
-        return (_jsxs(Column, { fillWidth: true, children: [_jsxs(Column, { fillWidth: true, padding: "4", gap: "4", children: [brand?.copy && icon && (_jsx(Option, { value: "copy-icon", label: "Copy icon as SVG", hasPrefix: _jsx(Logo, { size: "xs", icon: icon, style: { opacity: 0.5 } }), onClick: copyIconToClipboard })), brand?.copy && wordmark && (_jsx(Option, { value: "copy-wordmark", label: "Copy wordmark as SVG", hasPrefix: _jsx(Icon, { size: "xs", onBackground: "neutral-weak", name: "wordmark" }), onClick: copyWordmarkToClipboard }))] }), brand?.url && (_jsxs(_Fragment, { children: [_jsx(Line, {}), _jsx(Column, { fillWidth: true, padding: "4", children: _jsx(Option, { value: "brand-guidelines", label: "Visit brand guidelines", hasPrefix: _jsx(Icon, { size: "xs", onBackground: "neutral-weak", name: "arrowUpRight" }), href: brand.url }) })] }))] }));
+        return (_jsxs(Column, { fillWidth: true, children: [_jsxs(Column, { fillWidth: true, padding: "4", gap: "4", children: [brand?.copy && icon && (_jsx(Option, { value: "copy-icon", label: "Copy icon as SVG", prefix: _jsx(Logo, { size: "xs", icon: icon, style: { opacity: 0.5 } }), onClick: copyIconToClipboard })), brand?.copy && wordmark && (_jsx(Option, { value: "copy-wordmark", label: "Copy wordmark as SVG", prefix: _jsx(Icon, { size: "xs", onBackground: "neutral-weak", name: "wordmark" }), onClick: copyWordmarkToClipboard }))] }), brand?.url && (_jsxs(_Fragment, { children: [_jsx(Line, {}), _jsx(Column, { fillWidth: true, padding: "4", children: _jsx(Option, { value: "brand-guidelines", label: "Visit brand guidelines", prefix: _jsx(Icon, { size: "xs", onBackground: "neutral-weak", name: "arrowUpRight" }), href: brand.url }) })] }))] }));
     };
     const enableContext = brand && ((brand.copy && (icon || wordmark)) || brand.url);
     const renderLogo = () => {

package/dist/components/Logo.js.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.js","sourceRoot":"","sources":["../../src/components/Logo.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Logo.js","sourceRoot":"","sources":["../../src/components/Logo.tsx"],"names":[],"mappings":"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"}

package/dist/components/Media.d.ts

@@ -1,4 +1,5 @@
-import React, { CSSProperties, ReactNode } from "react";
+import type React from "react";
+import { type CSSProperties, type ReactNode } from "react";
 import { Flex } from ".";
 export interface MediaProps extends React.ComponentProps<typeof Flex> {
     aspectRatio?: string;
@@ -12,7 +13,13 @@ export interface MediaProps extends React.ComponentProps<typeof Flex> {
     sizes?: string | number;
     priority?: boolean;
     caption?: ReactNode;
-    fill?: boolean;
+    /**
+     * Drop the intrinsic aspect ratio and let the media stretch to whatever box
+     * it is in. Named `stretch` rather than `fill` because `fill` is a layout
+     * prop on every Flex-derived component (fillWidth + fillHeight) and shadowing
+     * it here meant `<Media fill />` did not do the one thing its name promised.
+     */
+    stretch?: boolean;
     fillWidth?: boolean;
     loop?: boolean;
     autoplay?: boolean;

package/dist/components/Media.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Media.d.ts","sourceRoot":"","sources":["../../src/components/Media.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,aAAa,EAA+B,SAAS,EAAc,MAAM,OAAO,CAAC;AACjG,OAAO,EAAU,IAAI,EAA6B,MAAM,GAAG,CAAC;AAK5D,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,KAAK,gGA8OT,CAAA;AAGF,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"Media.d.ts","sourceRoot":"","sources":["../../src/components/Media.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,aAAa,EAAc,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AAEpG,OAAO,EAAU,IAAI,EAA6B,MAAM,GAAG,CAAC;AAG5D,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,KAAK,gGAgQV,CAAC;AAIF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/Media.js

@@ -1,11 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useRef, useEffect, forwardRef } from "react";
-import { Column, Flex, Row, Skeleton, ScrollLock } from ".";
-import { MediaVideoPlayer } from "./MediaVideoPlayer";
-import Image from "next/image";
 import classNames from "clsx";
-const Media = forwardRef(({ src, alt = "", fillWidth = true, fill = false, loading = false, enlarge = false, unoptimized = false, objectFit = "cover", sizes = "100vw", aspectRatio = "original", height, priority, caption, loop = true, autoplay = true, sound = false, controls = false, style, className, ...rest }, ref) => {
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { useAdapters } from "../contexts/AdapterProvider";
+import { Column, Flex, Row, ScrollLock, Skeleton } from ".";
+import { MediaVideoPlayer } from "./MediaVideoPlayer";
+const Media = forwardRef(({ src, alt = "", fillWidth = true, stretch = false, loading = false, enlarge = false, unoptimized = false, objectFit = "cover", sizes = "100vw", aspectRatio = "original", height, priority, caption, loop = true, autoplay = true, sound = false, controls = false, style, className, ...rest }, ref) => {
+    const { Image } = useAdapters();
     const [isEnlarged, setIsEnlarged] = useState(false);
     const imageRef = useRef(null);
     const handleImageClick = () => {
@@ -59,11 +60,11 @@ const Media = forwardRef(({ src, alt = "", fillWidth = true, fill = false, loadi
         };
     };
     const isYouTubeVideo = (url) => {
-        const youtubeRegex = /(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
+        const youtubeRegex = /(?:youtube\.com\/(?:[^/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
         return youtubeRegex.test(url);
     };
     const getYouTubeEmbedUrl = (url) => {
-        const match = url.match(/(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
+        const match = url.match(/(?:youtube\.com\/(?:[^/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
         if (!match)
             return "";
         const id = match[1];
@@ -86,30 +87,38 @@ const Media = forwardRef(({ src, alt = "", fillWidth = true, fill = false, loadi
     const isYouTube = isYouTubeVideo(src);
     const useCustomVideoControls = isVideo && controls;
     const canEnlarge = enlarge && !useCustomVideoControls;
-    const resolvedSizes = typeof sizes === "number"
-        ? `(max-width: ${sizes}px) 100vw, ${sizes}px`
-        : sizes;
-    return (_jsxs(_Fragment, { children: [_jsx(ScrollLock, { enabled: isEnlarged }), isEnlarged && canEnlarge && typeof document !== 'undefined' && (_jsx(Flex, { center: true, position: "fixed", background: "overlay", pointerEvents: "auto", onClick: handleOverlayClick, top: "0", left: "0", zIndex: 9, opacity: 100, cursor: "interactive", transition: "macro-medium", className: "cursor-interactive", style: {
+    const resolvedSizes = typeof sizes === "number" ? `(max-width: ${sizes}px) 100vw, ${sizes}px` : sizes;
+    return (_jsxs(_Fragment, { children: [_jsx(ScrollLock, { enabled: isEnlarged }), isEnlarged && canEnlarge && typeof document !== "undefined" && (_jsx(Flex, { center: true, position: "fixed", background: "overlay", pointerEvents: "auto", onClick: handleOverlayClick, top: "0", left: "0", zIndex: 9, opacity: 100, cursor: "interactive", transition: "macro-medium", className: "cursor-interactive", style: {
                     backdropFilter: "blur(0.5rem)",
                     width: "100vw",
                     height: "100vh",
-                } })), _jsxs(_Fragment, { children: [_jsxs(Column, { as: caption ? "figure" : undefined, ref: imageRef, fillWidth: true, overflow: "hidden", zIndex: 0, margin: "0", style: {
+                } })), _jsxs(_Fragment, { children: [_jsxs(Column, { as: caption ? "figure" : undefined, ref: imageRef, fillWidth: fillWidth, overflow: "hidden", zIndex: 0, margin: "0", style: {
                             outline: "none",
                             isolation: "isolate",
-                            height: aspectRatio === "original" ? undefined : aspectRatio ? "" : height ? `${height}rem` : "100%",
+                            height: aspectRatio === "original"
+                                ? undefined
+                                : aspectRatio
+                                    ? ""
+                                    : height
+                                        ? `${height}rem`
+                                        : "100%",
                             aspectRatio: aspectRatio === "original" ? undefined : aspectRatio,
                             borderRadius: isEnlarged ? "0" : undefined,
                             ...calculateTransform(),
                             ...style,
-                        }, onClick: handleImageClick, className: classNames(canEnlarge && !isEnlarged ? "cursor-zoom-in" : canEnlarge && isEnlarged ? "cursor-zoom-out" : undefined, className), ...rest, children: [loading && _jsx(Skeleton, { shape: "block", radius: rest.radius }), !loading && isVideo && useCustomVideoControls && (_jsx(MediaVideoPlayer, { src: src, autoplay: autoplay, loop: loop, muted: !sound, objectFit: objectFit })), !loading && isVideo && !useCustomVideoControls && (_jsx("video", { src: src, autoPlay: autoplay, loop: loop, muted: !sound, playsInline: true, style: {
+                        }, onClick: handleImageClick, className: classNames(canEnlarge && !isEnlarged
+                            ? "cursor-zoom-in"
+                            : canEnlarge && isEnlarged
+                                ? "cursor-zoom-out"
+                                : undefined, className), ...rest, children: [loading && _jsx(Skeleton, { shape: "block", radius: rest.radius }), !loading && isVideo && useCustomVideoControls && (_jsx(MediaVideoPlayer, { src: src, autoplay: autoplay, loop: loop, muted: !sound, objectFit: objectFit })), !loading && isVideo && !useCustomVideoControls && (_jsx("video", { src: src, autoPlay: autoplay, loop: loop, muted: !sound, playsInline: true, style: {
                                     width: "100%",
                                     height: "100%",
                                     objectFit: objectFit,
                                 } })), !loading && isYouTube && (_jsx("iframe", { width: "100%", height: "100%", src: getYouTubeEmbedUrl(src), frameBorder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, style: {
                                     objectFit: objectFit,
-                                } })), !loading && !isVideo && !isYouTube && (_jsx(Image, { src: src, alt: alt, sizes: isEnlarged ? "100vw" : resolvedSizes, priority: priority, unoptimized: unoptimized, fill: fill || !aspectRatio, width: fill ? undefined : 0, height: fill ? undefined : 0, style: {
+                                } })), !loading && !isVideo && !isYouTube && (_jsx(Image, { src: src, alt: alt, sizes: isEnlarged ? "100vw" : resolvedSizes, priority: priority, unoptimized: unoptimized, fill: stretch || !aspectRatio, width: stretch ? undefined : 0, height: stretch ? undefined : 0, style: {
                                     objectFit: objectFit,
-                                    aspectRatio: fill ? undefined : aspectRatio,
+                                    aspectRatio: stretch ? undefined : aspectRatio,
                                     width: aspectRatio ? "100%" : undefined,
                                     height: aspectRatio ? "100%" : undefined,
                                 } }))] }), caption && (_jsx(Row, { as: "figcaption", fillWidth: true, textVariant: "label-default-s", onBackground: "neutral-weak", paddingY: "12", paddingX: "24", horizontal: "center", align: "center", children: caption }))] })] }));