@studiolxd/brand 49.16.0 → 49.17.0

package/CHANGELOG.md

@@ -7,6 +7,33 @@ El paquete sigue [semver](https://semver.org/lang/es/): **patch** para bug fixes
 regeneración de `dist`, **minor** para componentes/props/variantes/tokens nuevos, **major**
 para breaking changes.
 
+## [49.17.0] — 2026-10-03
+
+> **Minor.** Componente nuevo: `EmbedFrame`, el marco embebido del sistema, y las tres
+> props de alto que lo colocan sin CSS de consumidor.
+
+### `EmbedFrame` — nuevo
+
+- Pinta un `<iframe>` que **llena su contenedor**: todo el ancho y todo el alto, sin
+  borde ni fondo propios; el desplazamiento ocurre dentro del documento embebido. En
+  una columna flexible con alto toma el que dejan sus hermanos.
+- `title` **obligatorio** (nombre accesible del marco), `src`, `ref` al `<iframe>`
+  (para `contentWindow` y `postMessage`) y los atributos nativos (`allow`, `sandbox`,
+  `loading`, `referrerPolicy`, `name`, `onLoad`, `srcDoc`…). No acepta `width`,
+  `height` ni `frameBorder`.
+- `fill?: 'container' | 'viewport'` (por defecto `container`): con `viewport` mide el
+  alto de la ventana, para cuando no hay contenedor con alto.
+- Sin tokens propios. Import: `@studiolxd/brand/embed-frame` (también en el barril).
+
+### Props nuevas para ocupar el alto
+
+- **`Stack fill`**: la pila ocupa el alto de su contenedor (`block-size: 100%`), y lo que
+  crece dentro se queda con lo que dejan las demás piezas.
+- **`ScrollArea fill`**: el área ocupa el alto que dejan sus hermanos en una columna con
+  alto. Solo desde `md`; por debajo mide su contenido.
+- **`AppShell contentFlush`**: el contenido principal a sangre, sin relleno de sección
+  (respeta la zona segura del dispositivo). Story nueva «Contenido a sangre».
+
 ## [49.16.0] — 2026-10-02
 
 > **Minor.** Los iconos, en una sola familia de tamaño y trazo: todo glifo cabe en el

package/dist/_types/atoms/EmbedFrame/EmbedFrame.d.ts

@@ -0,0 +1,33 @@
+import './EmbedFrame.css';
+export interface EmbedFrameProps extends Omit<React.ComponentPropsWithoutRef<'iframe'>, 'title' | 'width' | 'height' | 'frameBorder'> {
+    /**
+     * Nombre accesible del marco: lo que anuncia el lector de pantalla al entrar
+     * en él. Obligatorio — un `<iframe>` sin título es un hueco sin nombre.
+     */
+    title: string;
+    /** Dirección del documento que se pinta dentro. */
+    src?: string;
+    /**
+     * Qué alto llena. `container` (por defecto): el de la caja que le dan.
+     * `viewport`: el de la ventana, para cuando el marco no tiene un contenedor
+     * con alto —solo en la página, o como celda de `Columns`—.
+     */
+    fill?: 'container' | 'viewport';
+    /** Se añade DESPUÉS de las clases propias. */
+    className?: string;
+}
+/**
+ * Un documento dentro de la página: el `<iframe>` del sistema. Ocupa todo el
+ * ancho y todo el alto de su contenedor, sin borde ni fondo propios, y el
+ * desplazamiento ocurre dentro del documento embebido, no en la página.
+ *
+ * **El alto lo pone el contenedor**: el marco llena la caja que le dan. Dentro
+ * de `AppShell` esa caja es el contenido principal, que ya mide el resto de la
+ * ventana bajo la cabecera y junto a la barra lateral. Sin contenedor con alto,
+ * `fill="viewport"` le da el de la ventana.
+ *
+ * `ref` apunta al `<iframe>` —de ahí sale `contentWindow` para `postMessage`—
+ * y `{...rest}` (`allow`, `sandbox`, `loading`, `referrerPolicy`, `name`,
+ * `onLoad`, `aria-*`, `data-*`…) se reenvía tal cual.
+ */
+export declare const EmbedFrame: import("react").ForwardRefExoticComponent<EmbedFrameProps & import("react").RefAttributes<HTMLIFrameElement>>;

package/dist/_types/atoms/ScrollArea/ScrollArea.d.ts

@@ -12,6 +12,13 @@ export interface ScrollAreaProps extends Omit<React.ComponentPropsWithoutRef<typ
      * que decir de qué es; sin él el lector solo anuncia «región desplazable».
      */
     label?: string;
+    /**
+     * Ocupa el alto que dejan sus hermanos en una columna con alto (`Stack fill`,
+     * la celda estirada de `Columns`), en vez de medirlo quien lo usa. Desde
+     * `md`; por debajo mide su contenido, porque ahí la columna ya no tiene alto
+     * propio (en móvil `Columns` apila).
+     */
+    fill?: boolean;
     children: ReactNode;
     /** Se añade DESPUÉS de las clases propias. */
     className?: string;
@@ -21,8 +28,8 @@ export interface ScrollAreaProps extends Omit<React.ComponentPropsWithoutRef<typ
  * Area): la lista de un panel lateral, el resultado largo de una consulta, el
  * lienzo de un editor.
  *
- * **El alto lo pone quien lo usa** (`className` o el contenedor): el componente
- * no decide cuánto mide el hueco, solo cómo se desplaza dentro.
+ * **El alto lo pone quien lo usa** (`className`, el contenedor o `fill`): el
+ * componente no decide cuánto mide el hueco, solo cómo se desplaza dentro.
  *
  * Base UI hace la zona alcanzable con el teclado cuando de verdad hay
  * desplazamiento, y la barra aparece al usarla.

package/dist/_types/atoms/Stack/Stack.d.ts

@@ -23,6 +23,12 @@ export interface StackProps extends React.ComponentPropsWithoutRef<'div'> {
      * (un enlace de vuelta sobre la cabecera).
      */
     mobileOrder?: 'normal' | 'reverse';
+    /**
+     * Ocupa el alto de su contenedor. Con él, la pila es una columna con alto y
+     * una pieza que crece (`EmbedFrame`, `ScrollArea fill`) se queda con lo que
+     * dejan las demás. Para la raíz del contenido de `AppShell`.
+     */
+    fill?: boolean;
     children: ReactNode;
     /** Se añade DESPUÉS de las clases propias. */
     className?: string;
@@ -36,4 +42,4 @@ export interface StackProps extends React.ComponentPropsWithoutRef<'div'> {
  * pila puede ser el grupo con nombre accesible que pide un formulario sin
  * tener que envolverla en un elemento nativo aparte.
  */
-export declare function Stack({ gap, align, mobileOrder, children, className, ...rest }: StackProps): import("react/jsx-runtime").JSX.Element;
+export declare function Stack({ gap, align, mobileOrder, fill, children, className, ...rest }: StackProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/sections/AppShell/AppShell.d.ts

@@ -20,6 +20,14 @@ export interface AppShellProps {
     /** La barra lateral: un `Sidebar`. Columna en escritorio, cajón en móvil. */
     sidebar: ReactNode;
     children: ReactNode;
+    /**
+     * Contenido a sangre: sin el relleno de sección del contenido principal, que
+     * llega al borde de la cabecera y de la sidebar. Para lo que trae sus propios
+     * márgenes —un `EmbedFrame` con el reproductor de un curso, cuyos márgenes
+     * son del tema del curso y no del armazón—. Respeta la zona segura del
+     * dispositivo.
+     */
+    contentFlush?: boolean;
     /** Estado inicial de la sidebar en escritorio (en móvil siempre arranca cerrada). */
     defaultSidebar?: SidebarState;
     /** Estado controlado de la sidebar en escritorio. */
@@ -51,4 +59,4 @@ export interface AppShellMessages {
  * modo y su asa) y `SidebarNav` (rail). Persistir el estado es del producto:
  * `onSidebarChange` / `onSidebarWidthChange` avisan de cada cambio.
  */
-export declare function AppShell({ banner, header, sidebar, children, defaultSidebar, sidebarState, onSidebarChange, defaultSidebarWidth, onSidebarWidthChange, skipLabel, }: AppShellProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppShell({ banner, header, sidebar, children, contentFlush, defaultSidebar, sidebarState, onSidebarChange, defaultSidebarWidth, onSidebarWidthChange, skipLabel, }: AppShellProps): import("react/jsx-runtime").JSX.Element;

package/dist/app-shell.css

@@ -1 +1 @@
-.app-shell{--app-shell-sidebar-width:var(--sidebar-width);--app-shell-banner-height:0px;--app-shell-chrome-block-start:calc(var(--app-shell-banner-height) + var(--app-header-height) + env(safe-area-inset-top));flex-direction:column;block-size:100dvh;display:flex;overflow:clip}.app-shell__banner{flex-shrink:0}.app-shell__body{flex:1;min-block-size:0;display:flex;position:relative}.app-shell__content{min-inline-size:0;padding-inline:var(--section-padding-inline);padding-block:var(--section-padding-block-lg);flex:1;padding-block-end:max(var(--section-padding-block-lg), env(safe-area-inset-bottom));padding-inline-end:max(var(--section-padding-inline), env(safe-area-inset-right));overflow:auto}.app-shell__backdrop{inset:0;background-color:var(--sidebar-backdrop-bg);opacity:var(--sidebar-backdrop-opacity);z-index:var(--sidebar-backdrop-z-index);position:fixed;inset-block-start:var(--app-shell-chrome-block-start)}
+.app-shell{--app-shell-sidebar-width:var(--sidebar-width);--app-shell-banner-height:0px;--app-shell-chrome-block-start:calc(var(--app-shell-banner-height) + var(--app-header-height) + env(safe-area-inset-top));flex-direction:column;block-size:100dvh;display:flex;overflow:clip}.app-shell__banner{flex-shrink:0}.app-shell__body{flex:1;min-block-size:0;display:flex;position:relative}.app-shell__content{min-inline-size:0;padding-inline:var(--section-padding-inline);padding-block:var(--section-padding-block-lg);flex:1;padding-block-end:max(var(--section-padding-block-lg), env(safe-area-inset-bottom));padding-inline-end:max(var(--section-padding-inline), env(safe-area-inset-right));overflow:auto}.app-shell__content.app-shell__content--flush{padding-block:0;padding-inline:0;padding-block-end:env(safe-area-inset-bottom);padding-inline-end:env(safe-area-inset-right)}.app-shell__backdrop{inset:0;background-color:var(--sidebar-backdrop-bg);opacity:var(--sidebar-backdrop-opacity);z-index:var(--sidebar-backdrop-z-index);position:fixed;inset-block-start:var(--app-shell-chrome-block-start)}

package/dist/app-shell.js

@@ -17,63 +17,63 @@ function p() {
 		return n(), e.addEventListener("change", n), () => e.removeEventListener("change", n);
 	}, []), e;
 }
-function m({ banner: i, header: f, sidebar: m, children: h, defaultSidebar: g = "open", sidebarState: _, onSidebarChange: v, defaultSidebarWidth: y, onSidebarWidthChange: b, skipLabel: x }) {
-	let S = e("appShell"), C = p(), [w, T] = l(g), [E, D] = l(!1), [O, k] = l(y), A = C ? _ ?? w : E ? "open" : "closed", j = o((e) => {
-		C ? (T(e), v?.(e)) : D(e === "open");
-	}, [C, v]), M = o(() => j(A === "open" ? "closed" : "open"), [j, A]), N = o(() => j("closed"), [j]), P = o((e) => {
-		k(e), b?.(e);
-	}, [b]);
+function m({ banner: i, header: f, sidebar: m, children: h, contentFlush: g = !1, defaultSidebar: _ = "open", sidebarState: v, onSidebarChange: y, defaultSidebarWidth: b, onSidebarWidthChange: x, skipLabel: S }) {
+	let C = e("appShell"), w = p(), [T, E] = l(_), [D, O] = l(!1), [k, A] = l(b), j = w ? v ?? T : D ? "open" : "closed", M = o((e) => {
+		w ? (E(e), y?.(e)) : O(e === "open");
+	}, [w, y]), N = o(() => M(j === "open" ? "closed" : "open"), [M, j]), P = o(() => M("closed"), [M]), F = o((e) => {
+		A(e), x?.(e);
+	}, [x]);
 	s(() => {
-		if (C || !E) return;
+		if (w || !D) return;
 		let e = (e) => {
-			e.key === "Escape" && D(!1);
+			e.key === "Escape" && O(!1);
 		};
 		document.addEventListener("keydown", e);
 		let t = document.body.style.overflow;
 		return document.body.style.overflow = "hidden", () => {
 			document.removeEventListener("keydown", e), document.body.style.overflow = t;
 		};
-	}, [C, E]);
-	let F = c(() => ({
-		sidebar: A,
-		setSidebar: j,
-		sidebarWidth: O ?? 0,
-		setSidebarWidth: P,
-		toggleSidebar: M,
-		closeSidebar: N,
-		isDesktop: C
+	}, [w, D]);
+	let I = c(() => ({
+		sidebar: j,
+		setSidebar: M,
+		sidebarWidth: k ?? 0,
+		setSidebarWidth: F,
+		toggleSidebar: N,
+		closeSidebar: P,
+		isDesktop: w
 	}), [
-		A,
 		j,
-		O,
-		P,
 		M,
+		k,
+		F,
 		N,
-		C
-	]), [I, L] = l(0), R = o((e) => {
+		P,
+		w
+	]), [L, R] = l(0), z = o((e) => {
 		if (!e) return;
-		let t = () => L(e.getBoundingClientRect().height);
+		let t = () => R(e.getBoundingClientRect().height);
 		if (t(), typeof ResizeObserver > "u") return;
 		let n = new ResizeObserver(t);
 		return n.observe(e), () => {
-			n.disconnect(), L(0);
+			n.disconnect(), R(0);
 		};
-	}, []), z = n({
-		"--app-shell-sidebar-width": O ? `${O}px` : void 0,
-		"--app-shell-banner-height": i ? `${I}px` : void 0
-	}), B = !C && E;
+	}, []), B = n({
+		"--app-shell-sidebar-width": k ? `${k}px` : void 0,
+		"--app-shell-banner-height": i ? `${L}px` : void 0
+	}), V = !w && D;
 	return /* @__PURE__ */ u(a.Provider, {
-		value: F,
+		value: I,
 		children: /* @__PURE__ */ d(r, { children: [/* @__PURE__ */ u(t, {
 			href: "#main-content",
-			children: S("skipToContent", x)
+			children: C("skipToContent", S)
 		}), /* @__PURE__ */ d("div", {
-			ref: z,
+			ref: B,
 			className: "app-shell",
-			"data-sidebar": A,
+			"data-sidebar": j,
 			children: [
 				i && /* @__PURE__ */ u("div", {
-					ref: R,
+					ref: z,
 					className: "app-shell__banner",
 					children: i
 				}),
@@ -82,16 +82,16 @@ function m({ banner: i, header: f, sidebar: m, children: h, defaultSidebar: g =
 					className: "app-shell__body",
 					children: [
 						m,
-						B && /* @__PURE__ */ u("div", {
+						V && /* @__PURE__ */ u("div", {
 							className: "app-shell__backdrop",
-							onClick: N,
+							onClick: P,
 							"aria-hidden": "true"
 						}),
 						/* @__PURE__ */ u("main", {
 							id: "main-content",
 							tabIndex: -1,
-							className: "app-shell__content",
-							inert: B || void 0,
+							className: g ? "app-shell__content app-shell__content--flush" : "app-shell__content",
+							inert: V || void 0,
 							children: h
 						})
 					]

package/dist/embed-frame.css

@@ -0,0 +1 @@
+.embed-frame{border:0;flex:auto;block-size:100%;min-block-size:0;inline-size:100%;display:block}.embed-frame.embed-frame--viewport{block-size:100dvh}

package/dist/embed-frame.js

@@ -0,0 +1,18 @@
+import './embed-frame.css';
+import { forwardRef as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/stories/atoms/EmbedFrame/EmbedFrame.tsx
+var n = e(function({ title: e, fill: n = "container", className: r, ...i }, a) {
+	return /* @__PURE__ */ t("iframe", {
+		ref: a,
+		className: [
+			"embed-frame",
+			n === "viewport" ? "embed-frame--viewport" : "",
+			r
+		].filter(Boolean).join(" "),
+		title: e,
+		...i
+	});
+});
+//#endregion
+export { n as EmbedFrame };

package/dist/scroll-area.css

@@ -1 +1 @@
-.scroll-area{position:relative;overflow:hidden}.scroll-area__viewport{overscroll-behavior:contain;block-size:100%}.scroll-area__viewport:focus-visible{outline:var(--scroll-area-focus-ring-width) solid var(--scroll-area-focus-ring-color);outline-offset:var(--scroll-area-focus-ring-offset)}.scroll-area__scrollbar{background-color:var(--scroll-area-scrollbar-bg);opacity:0;transition:opacity var(--scroll-area-transition-duration) var(--scroll-area-transition-easing);display:flex}.scroll-area__scrollbar[data-orientation=vertical]{inline-size:var(--scroll-area-scrollbar-size)}.scroll-area__scrollbar[data-orientation=horizontal]{block-size:var(--scroll-area-scrollbar-size);flex-direction:column}.scroll-area__scrollbar[data-orientation=vertical][data-has-overflow-y][data-hovering],.scroll-area__scrollbar[data-orientation=vertical][data-has-overflow-y][data-scrolling],.scroll-area__scrollbar[data-orientation=horizontal][data-has-overflow-x][data-hovering],.scroll-area__scrollbar[data-orientation=horizontal][data-has-overflow-x][data-scrolling]{opacity:1}.scroll-area__scrollbar[data-orientation=vertical]:not([data-has-overflow-y]),.scroll-area__scrollbar[data-orientation=horizontal]:not([data-has-overflow-x]){visibility:hidden;pointer-events:none}.scroll-area__thumb{background-color:var(--scroll-area-thumb-bg);border-radius:var(--scroll-area-thumb-border-radius);transition:background-color var(--scroll-area-transition-duration) var(--scroll-area-transition-easing);flex:1}.scroll-area__thumb:hover,.scroll-area__scrollbar[data-scrolling] .scroll-area__thumb{background-color:var(--scroll-area-thumb-hover-bg)}.scroll-area__corner{background-color:var(--scroll-area-scrollbar-bg)}
+.scroll-area{position:relative;overflow:hidden}@media (width>=768px){.scroll-area.scroll-area--fill{flex:1 1 0;min-block-size:0}}.scroll-area__viewport{overscroll-behavior:contain;block-size:100%}.scroll-area__viewport:focus-visible{outline:var(--scroll-area-focus-ring-width) solid var(--scroll-area-focus-ring-color);outline-offset:var(--scroll-area-focus-ring-offset)}.scroll-area__scrollbar{background-color:var(--scroll-area-scrollbar-bg);opacity:0;transition:opacity var(--scroll-area-transition-duration) var(--scroll-area-transition-easing);display:flex}.scroll-area__scrollbar[data-orientation=vertical]{inline-size:var(--scroll-area-scrollbar-size)}.scroll-area__scrollbar[data-orientation=horizontal]{block-size:var(--scroll-area-scrollbar-size);flex-direction:column}.scroll-area__scrollbar[data-orientation=vertical][data-has-overflow-y][data-hovering],.scroll-area__scrollbar[data-orientation=vertical][data-has-overflow-y][data-scrolling],.scroll-area__scrollbar[data-orientation=horizontal][data-has-overflow-x][data-hovering],.scroll-area__scrollbar[data-orientation=horizontal][data-has-overflow-x][data-scrolling]{opacity:1}.scroll-area__scrollbar[data-orientation=vertical]:not([data-has-overflow-y]),.scroll-area__scrollbar[data-orientation=horizontal]:not([data-has-overflow-x]){visibility:hidden;pointer-events:none}.scroll-area__thumb{background-color:var(--scroll-area-thumb-bg);border-radius:var(--scroll-area-thumb-border-radius);transition:background-color var(--scroll-area-transition-duration) var(--scroll-area-transition-easing);flex:1}.scroll-area__thumb:hover,.scroll-area__scrollbar[data-scrolling] .scroll-area__thumb{background-color:var(--scroll-area-thumb-hover-bg)}.scroll-area__corner{background-color:var(--scroll-area-scrollbar-bg)}

package/dist/scroll-area.js

@@ -4,32 +4,36 @@ import { forwardRef as e } from "react";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 import { ScrollArea as r } from "@base-ui/react/scroll-area";
 //#region src/stories/atoms/ScrollArea/ScrollArea.tsx
-var i = e(function({ orientation: e = "vertical", label: i, children: a, className: o, ...s }, c) {
-	let l = e === "vertical" || e === "both", u = e === "horizontal" || e === "both";
+var i = e(function({ orientation: e = "vertical", label: i, fill: a = !1, children: o, className: s, ...c }, l) {
+	let u = e === "vertical" || e === "both", d = e === "horizontal" || e === "both";
 	return /* @__PURE__ */ n(r.Root, {
-		ref: c,
-		className: ["scroll-area", o].filter(Boolean).join(" "),
-		...s,
+		ref: l,
+		className: [
+			"scroll-area",
+			a ? "scroll-area--fill" : "",
+			s
+		].filter(Boolean).join(" "),
+		...c,
 		children: [
 			/* @__PURE__ */ t(r.Viewport, {
 				className: "scroll-area__viewport",
 				role: i ? "region" : void 0,
 				"aria-label": i,
-				children: a
+				children: o
 			}),
-			l && /* @__PURE__ */ t(r.Scrollbar, {
+			u && /* @__PURE__ */ t(r.Scrollbar, {
 				keepMounted: !0,
 				orientation: "vertical",
 				className: "scroll-area__scrollbar",
 				children: /* @__PURE__ */ t(r.Thumb, { className: "scroll-area__thumb" })
 			}),
-			u && /* @__PURE__ */ t(r.Scrollbar, {
+			d && /* @__PURE__ */ t(r.Scrollbar, {
 				keepMounted: !0,
 				orientation: "horizontal",
 				className: "scroll-area__scrollbar",
 				children: /* @__PURE__ */ t(r.Thumb, { className: "scroll-area__thumb" })
 			}),
-			l && u && /* @__PURE__ */ t(r.Corner, { className: "scroll-area__corner" })
+			u && d && /* @__PURE__ */ t(r.Corner, { className: "scroll-area__corner" })
 		]
 	});
 });

package/dist/stack.css

@@ -1 +1 @@
-.stack{align-items:flex-start;gap:var(--stack-gap-md);flex-direction:column;display:flex}.stack>*{max-inline-size:100%}.stack.stack--gap-sm{gap:var(--stack-gap-sm)}.stack.stack--gap-lg{gap:var(--stack-gap-lg)}.stack.stack--align-stretch{align-items:stretch}.stack.stack--mobile-reverse{flex-direction:column-reverse}@media (width>=768px){.stack.stack--mobile-reverse{flex-direction:column}}
+.stack{align-items:flex-start;gap:var(--stack-gap-md);flex-direction:column;display:flex}.stack>*{max-inline-size:100%}.stack.stack--gap-sm{gap:var(--stack-gap-sm)}.stack.stack--gap-lg{gap:var(--stack-gap-lg)}.stack.stack--align-stretch{align-items:stretch}.stack.stack--fill{block-size:100%;min-block-size:0}.stack.stack--mobile-reverse{flex-direction:column-reverse}@media (width>=768px){.stack.stack--mobile-reverse{flex-direction:column}}

package/dist/stack.js

@@ -1,17 +1,18 @@
 import './stack.css';
 import { jsx as e } from "react/jsx-runtime";
 //#region src/stories/atoms/Stack/Stack.tsx
-function t({ gap: t = "md", align: n = "start", mobileOrder: r = "normal", children: i, className: a, ...o }) {
+function t({ gap: t = "md", align: n = "start", mobileOrder: r = "normal", fill: i = !1, children: a, className: o, ...s }) {
 	return /* @__PURE__ */ e("div", {
 		className: [
 			"stack",
 			t === "md" ? "" : `stack--gap-${t}`,
 			n === "stretch" ? "stack--align-stretch" : "",
 			r === "reverse" ? "stack--mobile-reverse" : "",
-			a
+			i ? "stack--fill" : "",
+			o
 		].filter(Boolean).join(" "),
-		...o,
-		children: i
+		...s,
+		children: a
 	});
 }
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiolxd/brand",
-  "version": "49.16.0",
+  "version": "49.17.0",
   "description": "El sistema de diseño de Studio LXD: componentes React, tokens y documentación de la suite SLXD.",
   "repository": {
     "type": "git",
@@ -398,6 +398,11 @@
       "import": "./dist/hero.js",
       "default": "./dist/hero.js"
     },
+    "./embed-frame": {
+      "types": "./dist/_types/atoms/EmbedFrame/EmbedFrame.d.ts",
+      "import": "./dist/embed-frame.js",
+      "default": "./dist/embed-frame.js"
+    },
     "./error-text": {
       "types": "./dist/_types/atoms/ErrorText/ErrorText.d.ts",
       "import": "./dist/error-text.js",