@design-edito/tools 0.4.22 → 0.4.23

package/agnostic/colors/index.d.ts

@@ -1,12 +1,12 @@
-export * as contrast from './contrast/index.js'
 export * as channels from './channels/index.js'
-export * as convert from './convert/index.js'
-export * as distance from './distance/index.js'
+export * as contrast from './contrast/index.js'
 export * as grayscale from './grayscale/index.js'
-export * as invert from './invert/index.js'
+export * as distance from './distance/index.js'
 export * as lerp from './lerp/index.js'
 export * as luminance from './luminance/index.js'
 export * as palette from './palette/index.js'
+export * as convert from './convert/index.js'
 export * as rotate from './rotate/index.js'
 export * as tidy from './tidy/index.js'
 export * as typechecks from './typechecks/index.js'
+export * as invert from './invert/index.js'

package/agnostic/colors/index.js

@@ -1,12 +1,12 @@
-export * as contrast from './contrast/index.js'
 export * as channels from './channels/index.js'
-export * as convert from './convert/index.js'
-export * as distance from './distance/index.js'
+export * as contrast from './contrast/index.js'
 export * as grayscale from './grayscale/index.js'
-export * as invert from './invert/index.js'
+export * as distance from './distance/index.js'
 export * as lerp from './lerp/index.js'
 export * as luminance from './luminance/index.js'
 export * as palette from './palette/index.js'
+export * as convert from './convert/index.js'
 export * as rotate from './rotate/index.js'
 export * as tidy from './tidy/index.js'
 export * as typechecks from './typechecks/index.js'
+export * as invert from './invert/index.js'

package/agnostic/css/index.d.ts

@@ -1,6 +1,6 @@
-export * as clss from './clss/index.js'
 export * as bem from './bem/index.js'
+export * as clss from './clss/index.js'
 export * as generateNiceColor from './generate-nice-color/index.js'
 export * as isValidCssClassName from './is-valid-css-class-name/index.js'
-export * as scale from './scale/index.js'
 export * as stylesSet from './styles-set/index.js'
+export * as scale from './scale/index.js'

package/agnostic/css/index.js

@@ -1,6 +1,6 @@
-export * as clss from './clss/index.js'
 export * as bem from './bem/index.js'
+export * as clss from './clss/index.js'
 export * as generateNiceColor from './generate-nice-color/index.js'
 export * as isValidCssClassName from './is-valid-css-class-name/index.js'
-export * as scale from './scale/index.js'
 export * as stylesSet from './styles-set/index.js'
+export * as scale from './scale/index.js'

package/agnostic/html/hyper-json/smart-tags/coalesced/index.d.ts

@@ -2,20 +2,19 @@ export * as add from './add/index.js'
 export * as addclass from './addclass/index.js'
 export * as and from './and/index.js'
 export * as append from './append/index.js'
-export * as at from './at/index.js'
 export * as call from './call/index.js'
+export * as at from './at/index.js'
 export * as clone from './clone/index.js'
 export * as deleteproperties from './deleteproperties/index.js'
-export * as getattribute from './getattribute/index.js'
-export * as getproperties from './getproperties/index.js'
 export * as equals from './equals/index.js'
+export * as getproperties from './getproperties/index.js'
 export * as getproperty from './getproperty/index.js'
 export * as hjparse from './hjparse/index.js'
 export * as hjstringify from './hjstringify/index.js'
 export * as if from './if/index.js'
 export * as initialize from './initialize/index.js'
 export * as join from './join/index.js'
-export * as length from './length/index.js'
+export * as getattribute from './getattribute/index.js'
 export * as map from './map/index.js'
 export * as negate from './negate/index.js'
 export * as notrailing from './notrailing/index.js'
@@ -23,30 +22,31 @@ export * as or from './or/index.js'
 export * as pickrandom from './pickrandom/index.js'
 export * as populate from './populate/index.js'
 export * as print from './print/index.js'
+export * as length from './length/index.js'
 export * as push from './push/index.js'
 export * as pusheach from './pusheach/index.js'
 export * as recordtoarray from './recordtoarray/index.js'
 export * as removeattribute from './removeattribute/index.js'
-export * as removeclass from './removeclass/index.js'
 export * as renameproperty from './renameproperty/index.js'
-export * as select from './select/index.js'
+export * as removeclass from './removeclass/index.js'
 export * as replace from './replace/index.js'
+export * as select from './select/index.js'
 export * as set from './set/index.js'
 export * as setattribute from './setattribute/index.js'
 export * as setproperty from './setproperty/index.js'
 export * as sorton from './sorton/index.js'
-export * as spread from './spread/index.js'
 export * as split from './split/index.js'
+export * as spread from './spread/index.js'
 export * as toarray from './toarray/index.js'
 export * as toboolean from './toboolean/index.js'
 export * as toelement from './toelement/index.js'
-export * as toggleclass from './toggleclass/index.js'
 export * as tonodelist from './tonodelist/index.js'
 export * as tonull from './tonull/index.js'
+export * as tonumber from './tonumber/index.js'
 export * as torecord from './torecord/index.js'
-export * as tostring from './tostring/index.js'
 export * as toref from './toref/index.js'
-export * as transformselected from './transformselected/index.js'
+export * as tostring from './tostring/index.js'
 export * as totext from './totext/index.js'
+export * as toggleclass from './toggleclass/index.js'
+export * as transformselected from './transformselected/index.js'
 export * as trim from './trim/index.js'
-export * as tonumber from './tonumber/index.js'

package/agnostic/html/hyper-json/smart-tags/coalesced/index.js

@@ -2,20 +2,19 @@ export * as add from './add/index.js'
 export * as addclass from './addclass/index.js'
 export * as and from './and/index.js'
 export * as append from './append/index.js'
-export * as at from './at/index.js'
 export * as call from './call/index.js'
+export * as at from './at/index.js'
 export * as clone from './clone/index.js'
 export * as deleteproperties from './deleteproperties/index.js'
-export * as getattribute from './getattribute/index.js'
-export * as getproperties from './getproperties/index.js'
 export * as equals from './equals/index.js'
+export * as getproperties from './getproperties/index.js'
 export * as getproperty from './getproperty/index.js'
 export * as hjparse from './hjparse/index.js'
 export * as hjstringify from './hjstringify/index.js'
 export * as if from './if/index.js'
 export * as initialize from './initialize/index.js'
 export * as join from './join/index.js'
-export * as length from './length/index.js'
+export * as getattribute from './getattribute/index.js'
 export * as map from './map/index.js'
 export * as negate from './negate/index.js'
 export * as notrailing from './notrailing/index.js'
@@ -23,30 +22,31 @@ export * as or from './or/index.js'
 export * as pickrandom from './pickrandom/index.js'
 export * as populate from './populate/index.js'
 export * as print from './print/index.js'
+export * as length from './length/index.js'
 export * as push from './push/index.js'
 export * as pusheach from './pusheach/index.js'
 export * as recordtoarray from './recordtoarray/index.js'
 export * as removeattribute from './removeattribute/index.js'
-export * as removeclass from './removeclass/index.js'
 export * as renameproperty from './renameproperty/index.js'
-export * as select from './select/index.js'
+export * as removeclass from './removeclass/index.js'
 export * as replace from './replace/index.js'
+export * as select from './select/index.js'
 export * as set from './set/index.js'
 export * as setattribute from './setattribute/index.js'
 export * as setproperty from './setproperty/index.js'
 export * as sorton from './sorton/index.js'
-export * as spread from './spread/index.js'
 export * as split from './split/index.js'
+export * as spread from './spread/index.js'
 export * as toarray from './toarray/index.js'
 export * as toboolean from './toboolean/index.js'
 export * as toelement from './toelement/index.js'
-export * as toggleclass from './toggleclass/index.js'
 export * as tonodelist from './tonodelist/index.js'
 export * as tonull from './tonull/index.js'
+export * as tonumber from './tonumber/index.js'
 export * as torecord from './torecord/index.js'
-export * as tostring from './tostring/index.js'
 export * as toref from './toref/index.js'
-export * as transformselected from './transformselected/index.js'
+export * as tostring from './tostring/index.js'
 export * as totext from './totext/index.js'
+export * as toggleclass from './toggleclass/index.js'
+export * as transformselected from './transformselected/index.js'
 export * as trim from './trim/index.js'
-export * as tonumber from './tonumber/index.js'

package/agnostic/html/hyper-json/smart-tags/isolated/index.d.ts

@@ -2,12 +2,12 @@ export * as any from './any/index.js'
 export * as array from './array/index.js'
 export * as boolean from './boolean/index.js'
 export * as element from './element/index.js'
-export * as get from './get/index.js'
 export * as guess from './guess/index.js'
+export * as get from './get/index.js'
 export * as nodelist from './nodelist/index.js'
 export * as number from './number/index.js'
 export * as record from './record/index.js'
-export * as null from './null/index.js'
 export * as ref from './ref/index.js'
 export * as string from './string/index.js'
 export * as text from './text/index.js'
+export * as null from './null/index.js'

package/agnostic/html/hyper-json/smart-tags/isolated/index.js

@@ -2,12 +2,12 @@ export * as any from './any/index.js'
 export * as array from './array/index.js'
 export * as boolean from './boolean/index.js'
 export * as element from './element/index.js'
-export * as get from './get/index.js'
 export * as guess from './guess/index.js'
+export * as get from './get/index.js'
 export * as nodelist from './nodelist/index.js'
 export * as number from './number/index.js'
 export * as record from './record/index.js'
-export * as null from './null/index.js'
 export * as ref from './ref/index.js'
 export * as string from './string/index.js'
 export * as text from './text/index.js'
+export * as null from './null/index.js'

package/agnostic/html/index.d.ts

@@ -1,10 +1,10 @@
-export * as deepSelect from './deep-select/index.js'
 export * as getNodeAncestors from './get-node-ancestors/index.js'
 export * as getPositionInsideParent from './get-position-inside-parent/index.js'
+export * as deepSelect from './deep-select/index.js'
 export * as hyperJson from './hyper-json/index.js'
-export * as insertNode from './insert-node/index.js'
 export * as placeholders from './placeholders/index.js'
-export * as replaceInElement from './replace-in-element/index.js'
 export * as selectorToElement from './selector-to-element/index.js'
 export * as stringToNodes from './string-to-nodes/index.js'
 export * as watchSelection from './watch-selection/index.js'
+export * as insertNode from './insert-node/index.js'
+export * as replaceInElement from './replace-in-element/index.js'

package/agnostic/html/index.js

@@ -1,10 +1,10 @@
-export * as deepSelect from './deep-select/index.js'
 export * as getNodeAncestors from './get-node-ancestors/index.js'
 export * as getPositionInsideParent from './get-position-inside-parent/index.js'
+export * as deepSelect from './deep-select/index.js'
 export * as hyperJson from './hyper-json/index.js'
-export * as insertNode from './insert-node/index.js'
 export * as placeholders from './placeholders/index.js'
-export * as replaceInElement from './replace-in-element/index.js'
 export * as selectorToElement from './selector-to-element/index.js'
 export * as stringToNodes from './string-to-nodes/index.js'
 export * as watchSelection from './watch-selection/index.js'
+export * as insertNode from './insert-node/index.js'
+export * as replaceInElement from './replace-in-element/index.js'

package/agnostic/misc/index.d.ts

@@ -1,12 +1,12 @@
 export * as assert from './assert/index.js'
 export * as cast from './cast/index.js'
+export * as connection from './connection/index.js'
 export * as crawler from './crawler/index.js'
 export * as crossenv from './crossenv/index.js'
-export * as isConstructorFunction from './is-constructor-function/index.js'
+export * as dataSize from './data-size/index.js'
 export * as isNullish from './is-nullish/index.js'
-export * as logs from './logs/index.js'
+export * as isConstructorFunction from './is-constructor-function/index.js'
 export * as loremIpsum from './lorem-ipsum/index.js'
-export * as connection from './connection/index.js'
-export * as dataSize from './data-size/index.js'
-export * as outcome from './outcome/index.js'
 export * as normalizeExtension from './normalize-extension/index.js'
+export * as outcome from './outcome/index.js'
+export * as logs from './logs/index.js'

package/agnostic/misc/index.js

@@ -1,12 +1,12 @@
 export * as assert from './assert/index.js'
 export * as cast from './cast/index.js'
+export * as connection from './connection/index.js'
 export * as crawler from './crawler/index.js'
 export * as crossenv from './crossenv/index.js'
-export * as isConstructorFunction from './is-constructor-function/index.js'
+export * as dataSize from './data-size/index.js'
 export * as isNullish from './is-nullish/index.js'
-export * as logs from './logs/index.js'
+export * as isConstructorFunction from './is-constructor-function/index.js'
 export * as loremIpsum from './lorem-ipsum/index.js'
-export * as connection from './connection/index.js'
-export * as dataSize from './data-size/index.js'
-export * as outcome from './outcome/index.js'
 export * as normalizeExtension from './normalize-extension/index.js'
+export * as outcome from './outcome/index.js'
+export * as logs from './logs/index.js'

package/agnostic/numbers/index.d.ts

@@ -1,6 +1,6 @@
 export * as absoluteModulo from './absolute-modulo/index.js'
 export * as approximateRational from './approximate-rational/index.js'
 export * as clamp from './clamp/index.js'
+export * as interpolate from './interpolate/index.js'
 export * as geometricProgressions from './geometric-progressions/index.js'
 export * as round from './round/index.js'
-export * as interpolate from './interpolate/index.js'

package/agnostic/numbers/index.js

@@ -1,6 +1,6 @@
 export * as absoluteModulo from './absolute-modulo/index.js'
 export * as approximateRational from './approximate-rational/index.js'
 export * as clamp from './clamp/index.js'
+export * as interpolate from './interpolate/index.js'
 export * as geometricProgressions from './geometric-progressions/index.js'
 export * as round from './round/index.js'
-export * as interpolate from './interpolate/index.js'

package/agnostic/objects/index.d.ts

@@ -1,9 +1,9 @@
 export * as deepGetProperty from './deep-get-property/index.js'
 export * as enums from './enums/index.js'
-export * as flattenGetters from './flatten-getters/index.js'
+export * as isObject from './is-object/index.js'
 export * as isRecord from './is-record/index.js'
 export * as recordFormat from './record-format/index.js'
-export * as recordMap from './record-map/index.js'
+export * as flattenGetters from './flatten-getters/index.js'
 export * as sortKeys from './sort-keys/index.js'
+export * as recordMap from './record-map/index.js'
 export * as validation from './validation/index.js'
-export * as isObject from './is-object/index.js'

package/agnostic/objects/index.js

@@ -1,9 +1,9 @@
 export * as deepGetProperty from './deep-get-property/index.js'
 export * as enums from './enums/index.js'
-export * as flattenGetters from './flatten-getters/index.js'
+export * as isObject from './is-object/index.js'
 export * as isRecord from './is-record/index.js'
 export * as recordFormat from './record-format/index.js'
-export * as recordMap from './record-map/index.js'
+export * as flattenGetters from './flatten-getters/index.js'
 export * as sortKeys from './sort-keys/index.js'
+export * as recordMap from './record-map/index.js'
 export * as validation from './validation/index.js'
-export * as isObject from './is-object/index.js'

package/agnostic/sanitization/index.d.ts

@@ -1,4 +1,4 @@
-export * as fileName from './file-name/index.js'
 export * as html from './html/index.js'
+export * as fileName from './file-name/index.js'
 export * as path from './path/index.js'
 export * as userInput from './user-input/index.js'

package/agnostic/sanitization/index.js

@@ -1,4 +1,4 @@
-export * as fileName from './file-name/index.js'
 export * as html from './html/index.js'
+export * as fileName from './file-name/index.js'
 export * as path from './path/index.js'
 export * as userInput from './user-input/index.js'

package/agnostic/strings/index.d.ts

@@ -1,8 +1,8 @@
+export * as charCodes from './char-codes/index.js'
 export * as matches from './matches/index.js'
 export * as normalizeIndent from './normalize-indent/index.js'
-export * as charCodes from './char-codes/index.js'
-export * as parseTable from './parse-table/index.js'
 export * as replaceAll from './replace-all/index.js'
 export * as splitTrim from './split-trim/index.js'
+export * as parseTable from './parse-table/index.js'
 export * as toAlphanum from './to-alphanum/index.js'
 export * as trim from './trim/index.js'

package/agnostic/strings/index.js

@@ -1,8 +1,8 @@
+export * as charCodes from './char-codes/index.js'
 export * as matches from './matches/index.js'
 export * as normalizeIndent from './normalize-indent/index.js'
-export * as charCodes from './char-codes/index.js'
-export * as parseTable from './parse-table/index.js'
 export * as replaceAll from './replace-all/index.js'
 export * as splitTrim from './split-trim/index.js'
+export * as parseTable from './parse-table/index.js'
 export * as toAlphanum from './to-alphanum/index.js'
 export * as trim from './trim/index.js'

package/agnostic/time/index.d.ts

@@ -1,5 +1,5 @@
-export * as dates from './dates/index.js'
 export * as duration from './duration/index.js'
-export * as wait from './wait/index.js'
 export * as transitions from './transitions/index.js'
+export * as wait from './wait/index.js'
 export * as timeout from './timeout/index.js'
+export * as dates from './dates/index.js'

package/agnostic/time/index.js

@@ -1,5 +1,5 @@
-export * as dates from './dates/index.js'
 export * as duration from './duration/index.js'
-export * as wait from './wait/index.js'
 export * as transitions from './transitions/index.js'
+export * as wait from './wait/index.js'
 export * as timeout from './timeout/index.js'
+export * as dates from './dates/index.js'

package/components/Button/index.d.ts

@@ -1,4 +1,4 @@
-import { type FunctionComponent, type ButtonHTMLAttributes, type ReactNode } from 'react';
+import { type FunctionComponent, type ButtonHTMLAttributes } from 'react';
 import type { WithClassName } from '../utils/types.js';
 /**
  * Props for the {@link Button} component.
@@ -6,14 +6,9 @@ import type { WithClassName } from '../utils/types.js';
  * Extends all native {@link ButtonHTMLAttributes} and {@link WithClassName}
  * with optional label and error content.
  *
- * @property label - Content rendered as the button label.
- * @property error - Content rendered to convey an error state associated with the button.
  * @property className - Additional class name(s) applied to the root element.
  */
-export type Props = ButtonHTMLAttributes<HTMLButtonElement> & WithClassName<{
-    label?: ReactNode;
-    error?: ReactNode;
-}>;
+export type Props = ButtonHTMLAttributes<HTMLButtonElement> & WithClassName<Record<string, unknown>>;
 /**
  * Base button component.
  *

package/components/Button/index.js

@@ -13,8 +13,8 @@ import cssModule from './styles.module.css';
  * @see {@link Props}
  * @returns A styled native button element.
  */
-export const Button = ({ label, error, className, ...rest }) => {
+export const Button = ({ className, ...rest }) => {
     const c = clss(publicClassName, { cssModule });
     const rootClss = mergeClassNames(c(null), className);
-    return _jsx("button", { ...rest, className: c(rootClss) });
+    return _jsx("button", { ...rest, className: rootClss });
 };

package/components/Iframe/index.d.ts

@@ -1,48 +1,30 @@
-import { type FunctionComponent, type IframeHTMLAttributes, type PropsWithChildren } from 'react';
+import { type FunctionComponent, type IframeHTMLAttributes } from 'react';
 import type { WithClassName } from '../utils/types.js';
 /**
  * Props for the {@link Iframe} component.
  *
- * Extends native {@link IframeHTMLAttributes} with optional class name support.
+ * Extends native {@link IframeHTMLAttributes} with class name support and
+ * automatic height adjustment.
  *
- * @property className - Additional class name(s) applied to the root element.
- * @property children - React content rendered as the iframe document body.
- * @property srcDoc - Raw HTML string used as iframe content when `children` is not provided.
- *
- * @remarks
- * This component behaves as a hybrid between a native `<iframe>` and a React renderer.
- *
- * Rendering priority:
- * - `children` takes precedence over `srcDoc` when provided.
- * - If `children` is `null` or `undefined`, `srcDoc` is used directly.
- *
- * When `children` is provided, it is converted to static HTML using
- * `renderToStaticMarkup` and injected into a complete HTML document:
- * `<!doctype html><html><body>...</body></html>`.
+ * @property autoHeight - Enables automatic iframe height adjustment based on
+ * document content size. Only supported with `srcDoc`.
+ * @property className - Optional additional class names applied to the iframe.
+ * @property style - Optional inline style applied to the iframe.
+ * @property srcDoc - Raw HTML string rendered inside the iframe.
  */
-export type Props = PropsWithChildren<WithClassName<Record<never, never>>> & Omit<IframeHTMLAttributes<HTMLIFrameElement>, 'children'>;
+export type Props = WithClassName<{
+    autoHeight?: boolean;
+}> & Omit<IframeHTMLAttributes<HTMLIFrameElement>, 'children'>;
 /**
- * Iframe component with React-to-HTML rendering support.
- *
- * Renders either:
- * - A raw HTML string via the `srcDoc` attribute, or
- * - A ReactNode rendered into static HTML via `renderToStaticMarkup`.
- *
- * ### Rendering strategy
- * 1. If `children` is defined (non-nullish), it is rendered to static HTML
- *    and used as iframe content.
- * 2. Otherwise, `srcDoc` is used as-is.
+ * Iframe component with optional automatic height adjustment.
  *
- * The resulting content is wrapped in a minimal HTML document:
- * `<!doctype html><html><body>...</body></html>`.
+ * When `autoHeight` is enabled, the iframe injects a script that measures
+ * document height and sends updates to the parent via `postMessage`.
  *
- * ### Notes
- * - The iframe content is static (no hydration, no client-side React inside iframe).
- * - `children` overrides `srcDoc`.
- * - Useful for embedding server-rendered UI fragments or documentation blocks.
+ * The parent component updates the iframe height via React state and `style`
+ * prop (no direct DOM mutation).
  *
  * @param props - Component properties.
  * @see {@link Props}
- * @returns A styled iframe element with computed HTML document content.
  */
 export declare const Iframe: FunctionComponent<Props>;

package/components/Iframe/index.js

@@ -1,43 +1,83 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { renderToStaticMarkup } from 'react-dom/server';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { clss } from '../../agnostic/css/clss/index.js';
+import { randomHash } from '../../agnostic/random/uuid/index.js';
 import { mergeClassNames } from '../utils/index.js';
 import { iframe as publicClassName } from '../public-classnames.js';
 import cssModule from './styles.module.css';
-import { isNotNullish } from '../../agnostic/misc/is-nullish/index.js';
+const innerAutoHeightNitifier = (messageType) => `<script>
+  (() => {
+    const notify = () => {
+      const height = Math.max(
+        document.body?.scrollHeight ?? 0,
+        document.documentElement?.scrollHeight ?? 0
+      )
+      window.parent.postMessage({
+        type: '${messageType}',
+        height
+      }, '*')
+    }
+    window.addEventListener('load', notify)
+    const observer = new ResizeObserver(notify)
+    observer.observe(document.body)
+    observer.observe(document.documentElement)
+    notify()
+  })()
+</script>`;
 /**
- * Iframe component with React-to-HTML rendering support.
+ * Iframe component with optional automatic height adjustment.
  *
- * Renders either:
- * - A raw HTML string via the `srcDoc` attribute, or
- * - A ReactNode rendered into static HTML via `renderToStaticMarkup`.
+ * When `autoHeight` is enabled, the iframe injects a script that measures
+ * document height and sends updates to the parent via `postMessage`.
  *
- * ### Rendering strategy
- * 1. If `children` is defined (non-nullish), it is rendered to static HTML
- *    and used as iframe content.
- * 2. Otherwise, `srcDoc` is used as-is.
- *
- * The resulting content is wrapped in a minimal HTML document:
- * `<!doctype html><html><body>...</body></html>`.
- *
- * ### Notes
- * - The iframe content is static (no hydration, no client-side React inside iframe).
- * - `children` overrides `srcDoc`.
- * - Useful for embedding server-rendered UI fragments or documentation blocks.
+ * The parent component updates the iframe height via React state and `style`
+ * prop (no direct DOM mutation).
  *
  * @param props - Component properties.
  * @see {@link Props}
- * @returns A styled iframe element with computed HTML document content.
  */
-export const Iframe = ({ className, children, srcDoc, ...iframeProps }) => {
+export const Iframe = ({ autoHeight = false, className, srcDoc, style, ...iframeProps }) => {
+    const iframeRef = useRef(null);
+    const [height, setHeight] = useState(null);
+    const [innerMessageType] = useState(`_${randomHash(10)}`);
+    // Fx. dep. `autoHeight` - Handles messages from iframe content when autoHeight is enabled.
+    useEffect(() => {
+        if (!autoHeight)
+            return;
+        const handleMessage = (event) => {
+            const iframe = iframeRef.current;
+            if (iframe === null
+                || event.source !== iframe.contentWindow
+                || typeof event.data !== 'object'
+                || event.data === null
+                || event.data.type !== innerMessageType
+                || typeof event.data.height !== 'number')
+                return;
+            setHeight(event.data.height);
+        };
+        window.addEventListener('message', handleMessage);
+        return () => window.removeEventListener('message', handleMessage);
+    }, [autoHeight]);
+    const iframeStyle = useMemo(() => {
+        const base = style ?? {};
+        if (!autoHeight || height === null)
+            return base;
+        return { ...base, height: `${height}px` };
+    }, [style, autoHeight, height]);
     const c = clss(publicClassName, { cssModule });
     const rootClss = mergeClassNames(c(), className);
     const html = useMemo(() => {
-        const body = isNotNullish(children)
-            ? renderToStaticMarkup(children)
-            : srcDoc;
-        return `<!doctype html><html><body>${body}</body></html>`;
-    }, [children, srcDoc]);
-    return _jsx("iframe", { ...iframeProps, className: rootClss, srcDoc: html });
+        const autoHeightScript = autoHeight
+            ? innerAutoHeightNitifier(innerMessageType)
+            : '';
+        return `<!doctype html>
+      <html>
+        <body>
+          ${srcDoc ?? ''}
+          ${autoHeightScript}
+        </body>
+      </html>
+    `;
+    }, [srcDoc, autoHeight]);
+    return _jsx("iframe", { ...iframeProps, ref: iframeRef, className: rootClss, style: iframeStyle, srcDoc: html });
 };