@mittwald/flow-react-components 1.2.0-next.9 → 2.0.0-next.0

package/dist/js/packages/components/src/lib/react/getPropsMerger.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"getPropsMerger.mjs","names":[],"sources":["../../../../../../../src/lib/react/getPropsMerger.ts"],"sourcesContent":["import { mergeRefs as mergeRefsFn } from \"@react-aria/utils\";\nimport { mergeProps as ariaMergeProps } from \"@react-aria/utils\";\nimport { isObjectType, sortBy } from \"remeda\";\nimport { setProperty } from \"dot-prop\";\nimport type { Ref } from \"react\";\nimport { getNestingLevel } from \"@/lib/propsContext/nestedPropsContext/lib\";\n\ninterface MergePropsOptions {\n  mergeClassNames?: boolean;\n  mergeEventHandler?: boolean;\n  mergeRefs?: boolean;\n}\n\nexport const getPropsMerger =\n  (options: MergePropsOptions = {}): typeof ariaMergeProps =>\n  (...propsList) => {\n    const {\n      mergeClassNames = true,\n      mergeEventHandler = true,\n      mergeRefs = true,\n    } = options;\n\n    const sortedByLevel = sortBy(\n      propsList,\n      getNestingLevel,\n    ) as typeof propsList;\n\n    const mergedProps = ariaMergeProps(...sortedByLevel);\n\n    if (isObjectType(mergedProps)) {\n      if (!mergeClassNames) {\n        // \"Unmerge\" className\n        for (const props of sortedByLevel) {\n          if (\n            isObjectType(props) &&\n            \"className\" in mergedProps &&\n            \"className\" in props\n          ) {\n            mergedProps.className = props.className;\n          }\n        }\n      }\n\n      if (!mergeEventHandler) {\n        // \"Unmerge\" eventHandler\n        for (const props of sortedByLevel) {\n          if (isObjectType(props)) {\n            for (const [propName, propValue] of Object.entries(props)) {\n              const isEventHandlerProp = /^on[A-Z]/.test(propName);\n              if (isEventHandlerProp) {\n                setProperty(mergedProps, propName, propValue);\n              }\n            }\n          }\n        }\n      }\n\n      if (mergeRefs) {\n        const refProps = Object.keys(mergedProps).filter(\n          (p) => p === \"ref\" || p.endsWith(\"Ref\"),\n        );\n\n        for (const refProp of refProps) {\n          const collectedRefObjects = sortedByLevel\n            .map((p) => (isObjectType(p) && refProp in p ? p[refProp] : null))\n            .filter((r): r is Ref<unknown> => r !== null);\n\n          setProperty(\n            mergedProps,\n            refProp,\n            mergeRefsFn(...collectedRefObjects),\n          );\n        }\n      }\n    }\n\n    return mergedProps;\n  };\n"],"mappings":";;;;;;;AAaA,IAAa,kBACV,UAA6B,CAAC,OAC9B,GAAG,cAAc;CAChB,MAAM,EACJ,kBAAkB,MAClB,oBAAoB,MACpB,WAAA,cAAY,SACV;CAEJ,MAAM,gBAAgB,OACpB,WACA,eACF;CAEA,MAAM,cAAc,WAAe,GAAG,aAAa;CAEnD,IAAI,aAAa,WAAW,GAAG;EAC7B,IAAI,CAAC,iBAEE;QAAA,MAAM,SAAS,eAClB,IACE,aAAa,KAAK,KAClB,eAAe,eACf,eAAe,OAEf,YAAY,YAAY,MAAM;EAAA;EAKpC,IAAI,CAAC,mBAEE;QAAA,MAAM,SAAS,eAClB,IAAI,aAAa,KAAK,GACf;SAAA,MAAM,CAAC,UAAU,cAAc,OAAO,QAAQ,KAAK,GAEtD,IAD2B,WAAW,KAAK,QACvC,GACF,YAAY,aAAa,UAAU,SAAS;GAAA;EAEhD;EAKN,IAAI,aAAW;GACb,MAAM,WAAW,OAAO,KAAK,WAAW,CAAC,CAAC,QACvC,MAAM,MAAM,SAAS,EAAE,SAAS,KAAK,CACxC;GAEA,KAAK,MAAM,WAAW,UAAU;IAC9B,MAAM,sBAAsB,cACzB,KAAK,MAAO,aAAa,CAAC,KAAK,WAAW,IAAI,EAAE,WAAW,IAAK,CAAC,CACjE,QAAQ,MAAyB,MAAM,IAAI;IAE9C,YACE,aACA,SACA,UAAY,GAAG,mBAAmB,CACpC;GACF;EACF;CACF;CAEA,OAAO;AACT"}
+{"version":3,"file":"getPropsMerger.mjs","names":[],"sources":["../../../../../../../src/lib/react/getPropsMerger.ts"],"sourcesContent":["import { mergeRefs as mergeRefsFn } from \"@react-aria/utils\";\nimport { mergeProps as ariaMergeProps } from \"@react-aria/utils\";\nimport { isObjectType, sortBy } from \"remeda\";\nimport { setProperty } from \"dot-prop\";\nimport type { Ref } from \"react\";\nimport { getNestingLevel } from \"@/lib/propsContext/nestedPropsContext/lib\";\n\ninterface MergePropsOptions {\n  mergeClassNames?: boolean;\n  mergeEventHandler?: boolean;\n  mergeRefs?: boolean;\n}\n\nexport const getPropsMerger =\n  (options: MergePropsOptions = {}): typeof ariaMergeProps =>\n  (...propsList) => {\n    const {\n      mergeClassNames = true,\n      mergeEventHandler = true,\n      mergeRefs = true,\n    } = options;\n\n    const sortedByLevel = sortBy(\n      propsList,\n      getNestingLevel,\n    ) as typeof propsList;\n\n    const mergedProps = ariaMergeProps(...sortedByLevel);\n\n    if (isObjectType(mergedProps)) {\n      if (!mergeClassNames) {\n        // \"Unmerge\" className\n        for (const props of sortedByLevel) {\n          if (\n            isObjectType(props) &&\n            \"className\" in mergedProps &&\n            \"className\" in props\n          ) {\n            mergedProps.className = props.className;\n          }\n        }\n      }\n\n      if (!mergeEventHandler) {\n        // \"Unmerge\" eventHandler\n        for (const props of sortedByLevel) {\n          if (isObjectType(props)) {\n            for (const [propName, propValue] of Object.entries(props)) {\n              const isEventHandlerProp = /^on[A-Z]/.test(propName);\n              if (isEventHandlerProp) {\n                setProperty(mergedProps, propName, propValue);\n              }\n            }\n          }\n        }\n      }\n\n      if (mergeRefs) {\n        const refProps = Object.keys(mergedProps).filter(\n          (p) => p === \"ref\" || p.endsWith(\"Ref\"),\n        );\n\n        for (const refProp of refProps) {\n          const collectedRefObjects = sortedByLevel\n            .map((p) => (isObjectType(p) && refProp in p ? p[refProp] : null))\n            // A ref nobody supplied contributes nothing. `undefined` used to\n            // survive this filter and merge into a callback ref — harmless for\n            // a ref the component attaches, fatal for one it reads instead\n            // (`anchorRef`, `triggerRef`): nothing ever calls the callback, so\n            // `.current` stays empty and the element is never found. Writing\n            // `anchorRef={condition ? ref : undefined}` was enough to hit it.\n            .filter((r): r is Ref<unknown> => r != null);\n\n          setProperty(\n            mergedProps,\n            refProp,\n            collectedRefObjects.length > 0\n              ? mergeRefsFn(...collectedRefObjects)\n              : undefined,\n          );\n        }\n      }\n    }\n\n    return mergedProps;\n  };\n"],"mappings":";;;;;;;AAaA,IAAa,kBACV,UAA6B,CAAC,OAC9B,GAAG,cAAc;CAChB,MAAM,EACJ,kBAAkB,MAClB,oBAAoB,MACpB,WAAA,cAAY,SACV;CAEJ,MAAM,gBAAgB,OACpB,WACA,eACF;CAEA,MAAM,cAAc,WAAe,GAAG,aAAa;CAEnD,IAAI,aAAa,WAAW,GAAG;EAC7B,IAAI,CAAC,iBAEE;QAAA,MAAM,SAAS,eAClB,IACE,aAAa,KAAK,KAClB,eAAe,eACf,eAAe,OAEf,YAAY,YAAY,MAAM;EAAA;EAKpC,IAAI,CAAC,mBAEE;QAAA,MAAM,SAAS,eAClB,IAAI,aAAa,KAAK,GACf;SAAA,MAAM,CAAC,UAAU,cAAc,OAAO,QAAQ,KAAK,GAEtD,IAD2B,WAAW,KAAK,QACvC,GACF,YAAY,aAAa,UAAU,SAAS;GAAA;EAEhD;EAKN,IAAI,aAAW;GACb,MAAM,WAAW,OAAO,KAAK,WAAW,CAAC,CAAC,QACvC,MAAM,MAAM,SAAS,EAAE,SAAS,KAAK,CACxC;GAEA,KAAK,MAAM,WAAW,UAAU;IAC9B,MAAM,sBAAsB,cACzB,KAAK,MAAO,aAAa,CAAC,KAAK,WAAW,IAAI,EAAE,WAAW,IAAK,CAAC,CAOjE,QAAQ,MAAyB,KAAK,IAAI;IAE7C,YACE,aACA,SACA,oBAAoB,SAAS,IACzB,UAAY,GAAG,mBAAmB,IAClC,KAAA,CACN;GACF;EACF;CACF;CAEA,OAAO;AACT"}

package/dist/js/packages/components/src/lib/react/remote.mjs

@@ -1,11 +1,51 @@
 "use client"
 /* */
-import { Children, isValidElement } from "react";
-import { isObjectType, isString } from "remeda";
+import { Children, Fragment, isValidElement } from "react";
+import { isNumber, isObjectType, isString } from "remeda";
 //#region src/lib/react/remote.ts
 function isRemoteComponentRendererProps(props) {
 	return isObjectType(props) && "element" in props && "components" in props && "receiver" in props;
 }
+/**
+* The text `children` are _themselves_ — plain strings and numbers locally,
+* `RemoteTextRenderer` elements remotely — joined and trimmed. `undefined` when
+* there is none.
+*
+* Text inside an element child is deliberately left out, because it belongs to
+* that element rather than to the component being described:
+* `<Option>Millennium Falcon <Badge>Latest</Badge></Option>` is the option
+* "Millennium Falcon", not "Millennium Falcon Latest". A fragment is grouping
+* rather than rendered output, so this looks through it.
+*
+* Use this over {@link extractTextFromFirstChild} when the question is "what
+* does this read as", not "are the children one single text node".
+*/
+var extractTextFromChildren = (children) => {
+	const text = joinTextChildren(children).trim();
+	return text === "" ? void 0 : text;
+};
+var joinTextChildren = (children) => Children.toArray(children).map((child) => {
+	if (isString(child) || isNumber(child)) return String(child);
+	if (!isValidElement(child)) return "";
+	if (isRemoteTextRenderProps(child.props)) return child.props.remote.data;
+	return child.type === Fragment ? joinTextChildren(child.props.children) : "";
+}).join("");
+/**
+* Whether `children` render any text of their own — what `Button` and `Link`
+* ask to tell a labelled control from an icon-only one. The same reading as
+* {@link extractTextFromChildren}, so fragments are transparent and children
+* that are only whitespace do not count as a label.
+*/
+var containsTextChild = (children) => extractTextFromChildren(children) !== void 0;
+/**
+* The text of `children` when they are exactly one text node — locally a
+* string, remotely a `RemoteTextRenderer` element. `undefined` for anything
+* else, including a single string next to anything at all.
+*
+* That strictness is the point for its callers: `Markdown` takes it as the
+* markdown source, and `Initials` and `Truncate` operate on the whole content.
+* For "what does this read as", use {@link extractTextFromChildren}.
+*/
 var extractTextFromFirstChild = (children) => {
 	if (Children.count(children) !== 1) return;
 	const firstChild = Children.toArray(children)[0];
@@ -15,6 +55,6 @@ function isRemoteTextRenderProps(props) {
 	return isObjectType(props) && "remote" in props && isObjectType(props.remote) && "data" in props.remote && isString(props.remote.data);
 }
 //#endregion
-export { extractTextFromFirstChild, isRemoteComponentRendererProps, isRemoteTextRenderProps };
+export { containsTextChild, extractTextFromChildren, extractTextFromFirstChild, isRemoteComponentRendererProps, isRemoteTextRenderProps };
 
 //# sourceMappingURL=remote.mjs.map

package/dist/js/packages/components/src/lib/react/remote.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"remote.mjs","names":[],"sources":["../../../../../../../src/lib/react/remote.ts"],"sourcesContent":["import type {\n  RemoteComponentRendererProps,\n  RemoteTextRendererProps,\n} from \"@mittwald/remote-dom-react/host\";\nimport { isObjectType, isString } from \"remeda\";\nimport { Children, isValidElement, type ReactNode } from \"react\";\n\nexport function isRemoteComponentRendererProps(\n  props: unknown,\n): props is RemoteComponentRendererProps {\n  return (\n    isObjectType(props) &&\n    \"element\" in props &&\n    \"components\" in props &&\n    \"receiver\" in props\n  );\n}\n\nexport const extractTextFromFirstChild = (children: ReactNode) => {\n  if (Children.count(children) !== 1) {\n    return undefined;\n  }\n\n  const firstChild = Children.toArray(children)[0];\n\n  return typeof firstChild === \"string\"\n    ? firstChild\n    : isValidElement(firstChild) && isRemoteTextRenderProps(firstChild.props)\n      ? firstChild.props.remote.data\n      : undefined;\n};\n\nexport function isRemoteTextRenderProps(\n  props: unknown,\n): props is RemoteTextRendererProps {\n  return (\n    isObjectType(props) &&\n    \"remote\" in props &&\n    isObjectType(props.remote) &&\n    \"data\" in props.remote &&\n    isString(props.remote.data)\n  );\n}\n"],"mappings":";;;;;AAOA,SAAgB,+BACd,OACuC;CACvC,OACE,aAAa,KAAK,KAClB,aAAa,SACb,gBAAgB,SAChB,cAAc;AAElB;AAEA,IAAa,6BAA6B,aAAwB;CAChE,IAAI,SAAS,MAAM,QAAQ,MAAM,GAC/B;CAGF,MAAM,aAAa,SAAS,QAAQ,QAAQ,CAAC,CAAC;CAE9C,OAAO,OAAO,eAAe,WACzB,aACA,eAAe,UAAU,KAAK,wBAAwB,WAAW,KAAK,IACpE,WAAW,MAAM,OAAO,OACxB,KAAA;AACR;AAEA,SAAgB,wBACd,OACkC;CAClC,OACE,aAAa,KAAK,KAClB,YAAY,SACZ,aAAa,MAAM,MAAM,KACzB,UAAU,MAAM,UAChB,SAAS,MAAM,OAAO,IAAI;AAE9B"}
+{"version":3,"file":"remote.mjs","names":[],"sources":["../../../../../../../src/lib/react/remote.ts"],"sourcesContent":["import type {\n  RemoteComponentRendererProps,\n  RemoteTextRendererProps,\n} from \"@mittwald/remote-dom-react/host\";\nimport { isNumber, isObjectType, isString } from \"remeda\";\nimport {\n  Children,\n  Fragment,\n  isValidElement,\n  type PropsWithChildren,\n  type ReactNode,\n} from \"react\";\n\nexport function isRemoteComponentRendererProps(\n  props: unknown,\n): props is RemoteComponentRendererProps {\n  return (\n    isObjectType(props) &&\n    \"element\" in props &&\n    \"components\" in props &&\n    \"receiver\" in props\n  );\n}\n\n/**\n * The text `children` are _themselves_ — plain strings and numbers locally,\n * `RemoteTextRenderer` elements remotely — joined and trimmed. `undefined` when\n * there is none.\n *\n * Text inside an element child is deliberately left out, because it belongs to\n * that element rather than to the component being described:\n * `<Option>Millennium Falcon <Badge>Latest</Badge></Option>` is the option\n * \"Millennium Falcon\", not \"Millennium Falcon Latest\". A fragment is grouping\n * rather than rendered output, so this looks through it.\n *\n * Use this over {@link extractTextFromFirstChild} when the question is \"what\n * does this read as\", not \"are the children one single text node\".\n */\nexport const extractTextFromChildren = (\n  children: ReactNode,\n): string | undefined => {\n  const text = joinTextChildren(children).trim();\n\n  return text === \"\" ? undefined : text;\n};\n\nconst joinTextChildren = (children: ReactNode): string =>\n  Children.toArray(children)\n    .map((child) => {\n      if (isString(child) || isNumber(child)) {\n        return String(child);\n      }\n\n      if (!isValidElement(child)) {\n        return \"\";\n      }\n\n      if (isRemoteTextRenderProps(child.props)) {\n        return child.props.remote.data;\n      }\n\n      return child.type === Fragment\n        ? joinTextChildren((child.props as PropsWithChildren).children)\n        : \"\";\n    })\n    .join(\"\");\n\n/**\n * Whether `children` render any text of their own — what `Button` and `Link`\n * ask to tell a labelled control from an icon-only one. The same reading as\n * {@link extractTextFromChildren}, so fragments are transparent and children\n * that are only whitespace do not count as a label.\n */\nexport const containsTextChild = (children: ReactNode): boolean =>\n  extractTextFromChildren(children) !== undefined;\n\n/**\n * The text of `children` when they are exactly one text node — locally a\n * string, remotely a `RemoteTextRenderer` element. `undefined` for anything\n * else, including a single string next to anything at all.\n *\n * That strictness is the point for its callers: `Markdown` takes it as the\n * markdown source, and `Initials` and `Truncate` operate on the whole content.\n * For \"what does this read as\", use {@link extractTextFromChildren}.\n */\nexport const extractTextFromFirstChild = (children: ReactNode) => {\n  if (Children.count(children) !== 1) {\n    return undefined;\n  }\n\n  const firstChild = Children.toArray(children)[0];\n\n  return typeof firstChild === \"string\"\n    ? firstChild\n    : isValidElement(firstChild) && isRemoteTextRenderProps(firstChild.props)\n      ? firstChild.props.remote.data\n      : undefined;\n};\n\nexport function isRemoteTextRenderProps(\n  props: unknown,\n): props is RemoteTextRendererProps {\n  return (\n    isObjectType(props) &&\n    \"remote\" in props &&\n    isObjectType(props.remote) &&\n    \"data\" in props.remote &&\n    isString(props.remote.data)\n  );\n}\n"],"mappings":";;;;;AAaA,SAAgB,+BACd,OACuC;CACvC,OACE,aAAa,KAAK,KAClB,aAAa,SACb,gBAAgB,SAChB,cAAc;AAElB;;;;;;;;;;;;;;;AAgBA,IAAa,2BACX,aACuB;CACvB,MAAM,OAAO,iBAAiB,QAAQ,CAAC,CAAC,KAAK;CAE7C,OAAO,SAAS,KAAK,KAAA,IAAY;AACnC;AAEA,IAAM,oBAAoB,aACxB,SAAS,QAAQ,QAAQ,CAAC,CACvB,KAAK,UAAU;CACd,IAAI,SAAS,KAAK,KAAK,SAAS,KAAK,GACnC,OAAO,OAAO,KAAK;CAGrB,IAAI,CAAC,eAAe,KAAK,GACvB,OAAO;CAGT,IAAI,wBAAwB,MAAM,KAAK,GACrC,OAAO,MAAM,MAAM,OAAO;CAG5B,OAAO,MAAM,SAAS,WAClB,iBAAkB,MAAM,MAA4B,QAAQ,IAC5D;AACN,CAAC,CAAC,CACD,KAAK,EAAE;;;;;;;AAQZ,IAAa,qBAAqB,aAChC,wBAAwB,QAAQ,MAAM,KAAA;;;;;;;;;;AAWxC,IAAa,6BAA6B,aAAwB;CAChE,IAAI,SAAS,MAAM,QAAQ,MAAM,GAC/B;CAGF,MAAM,aAAa,SAAS,QAAQ,QAAQ,CAAC,CAAC;CAE9C,OAAO,OAAO,eAAe,WACzB,aACA,eAAe,UAAU,KAAK,wBAAwB,WAAW,KAAK,IACpE,WAAW,MAAM,OAAO,OACxB,KAAA;AACR;AAEA,SAAgB,wBACd,OACkC;CAClC,OACE,aAAa,KAAK,KAClB,YAAY,SACZ,aAAa,MAAM,MAAM,KACzB,UAAU,MAAM,UAChB,SAAS,MAAM,OAAO,IAAI;AAE9B"}

package/dist/js/packages/components/src/lib/remote/useControlledHostValueProps.mjs

@@ -8,13 +8,18 @@ import { useLayoutEffect, useState } from "react";
 * by omitting values resulting from a remotely executed event handler. These
 * values are marked by the `controlledRemoteValueMarker`.
 *
-* This hook is noly necessary for text inputs. If not use the controlled input
+* This hook is only necessary for text inputs. If not used the controlled input
 * value may be corrupted by interleaved host inputs and remote events.
+*
+* @param emptyValue What the field reports while nothing has been entered —
+*   `""` for a text input, `NaN` for a number, `null` for a date range. It is
+*   the sentinel that keeps the field controlled from the first render; see
+*   that convention in the package's AGENTS.md.
 */
-var useControlledHostValueProps = (props) => {
+var useControlledHostValueProps = (props, emptyValue) => {
 	const { value: valueFromProps, onChange: onChangeFromProps, defaultValue } = props;
 	const regularValue = valueFromProps === "___flowControlledRemoteValue___" ? void 0 : valueFromProps;
-	const [value, setValue] = useState(regularValue ?? defaultValue);
+	const [value, setValue] = useState(regularValue !== void 0 ? regularValue : defaultValue !== void 0 ? defaultValue : emptyValue);
 	useLayoutEffect(() => {
 		if (regularValue !== void 0) setValue(regularValue);
 	}, [valueFromProps]);

package/dist/js/packages/components/src/lib/remote/useControlledHostValueProps.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useControlledHostValueProps.mjs","names":[],"sources":["../../../../../../../src/lib/remote/useControlledHostValueProps.ts"],"sourcesContent":["import { useLayoutEffect, useState } from \"react\";\nimport { controlledRemoteValueMarker } from \"./useControlledRemoteValueProps\";\nimport type { FieldProps } from \"@/lib/remote/types\";\n\n/**\n * Returns props with controlled value handling for remote components. It works\n * by omitting values resulting from a remotely executed event handler. These\n * values are marked by the `controlledRemoteValueMarker`.\n *\n * This hook is noly necessary for text inputs. If not use the controlled input\n * value may be corrupted by interleaved host inputs and remote events.\n */\nexport const useControlledHostValueProps = <T, P>(props: FieldProps<T, P>) => {\n  const {\n    value: valueFromProps,\n    onChange: onChangeFromProps,\n    defaultValue,\n  } = props;\n\n  const regularValue =\n    valueFromProps === controlledRemoteValueMarker ? undefined : valueFromProps;\n\n  const [value, setValue] = useState(regularValue ?? defaultValue);\n\n  useLayoutEffect(() => {\n    if (regularValue !== undefined) {\n      setValue(regularValue);\n    }\n  }, [valueFromProps]);\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const onChange = (v: any) => {\n    setValue(v);\n    onChangeFromProps?.(v);\n  };\n\n  return {\n    ...props,\n    value,\n    onChange,\n  };\n};\n"],"mappings":";;;;;;;;;;;;;AAYA,IAAa,+BAAqC,UAA4B;CAC5E,MAAM,EACJ,OAAO,gBACP,UAAU,mBACV,iBACE;CAEJ,MAAM,eACJ,mBAAA,oCAAiD,KAAA,IAAY;CAE/D,MAAM,CAAC,OAAO,YAAY,SAAS,gBAAgB,YAAY;CAE/D,sBAAsB;EACpB,IAAI,iBAAiB,KAAA,GACnB,SAAS,YAAY;CAEzB,GAAG,CAAC,cAAc,CAAC;CAGnB,MAAM,YAAY,MAAW;EAC3B,SAAS,CAAC;EACV,oBAAoB,CAAC;CACvB;CAEA,OAAO;EACL,GAAG;EACH;EACA;CACF;AACF"}
+{"version":3,"file":"useControlledHostValueProps.mjs","names":[],"sources":["../../../../../../../src/lib/remote/useControlledHostValueProps.ts"],"sourcesContent":["import { useLayoutEffect, useState } from \"react\";\nimport { controlledRemoteValueMarker } from \"./useControlledRemoteValueProps\";\nimport type { FieldProps } from \"@/lib/remote/types\";\n\n/**\n * Returns props with controlled value handling for remote components. It works\n * by omitting values resulting from a remotely executed event handler. These\n * values are marked by the `controlledRemoteValueMarker`.\n *\n * This hook is only necessary for text inputs. If not used the controlled input\n * value may be corrupted by interleaved host inputs and remote events.\n *\n * @param emptyValue What the field reports while nothing has been entered —\n *   `\"\"` for a text input, `NaN` for a number, `null` for a date range. It is\n *   the sentinel that keeps the field controlled from the first render; see\n *   that convention in the package's AGENTS.md.\n */\nexport const useControlledHostValueProps = <T, P>(\n  props: FieldProps<T, P>,\n  emptyValue: T,\n) => {\n  const {\n    value: valueFromProps,\n    onChange: onChangeFromProps,\n    defaultValue,\n  } = props;\n\n  const regularValue =\n    valueFromProps === controlledRemoteValueMarker ? undefined : valueFromProps;\n\n  /*\n   * Only `undefined` falls back, because only `undefined` reads as\n   * uncontrolled: a caller-supplied `null` controls a `DateRangePicker` with no\n   * range selected, so `??` would swallow it. The marker cannot appear on the\n   * first render, so `regularValue` is the caller's own value here.\n   */\n  const [value, setValue] = useState(\n    regularValue !== undefined\n      ? regularValue\n      : defaultValue !== undefined\n        ? defaultValue\n        : emptyValue,\n  );\n\n  useLayoutEffect(() => {\n    if (regularValue !== undefined) {\n      setValue(regularValue);\n    }\n  }, [valueFromProps]);\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const onChange = (v: any) => {\n    setValue(v);\n    onChangeFromProps?.(v);\n  };\n\n  return {\n    ...props,\n    value,\n    onChange,\n  };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAiBA,IAAa,+BACX,OACA,eACG;CACH,MAAM,EACJ,OAAO,gBACP,UAAU,mBACV,iBACE;CAEJ,MAAM,eACJ,mBAAA,oCAAiD,KAAA,IAAY;CAQ/D,MAAM,CAAC,OAAO,YAAY,SACxB,iBAAiB,KAAA,IACb,eACA,iBAAiB,KAAA,IACf,eACA,UACR;CAEA,sBAAsB;EACpB,IAAI,iBAAiB,KAAA,GACnB,SAAS,YAAY;CAEzB,GAAG,CAAC,cAAc,CAAC;CAGnB,MAAM,YAAY,MAAW;EAC3B,SAAS,CAAC;EACV,oBAAoB,CAAC;CACvB;CAEA,OAAO;EACL,GAAG;EACH;EACA;CACF;AACF"}

package/dist/js/packages/components/src/lib/types/props.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"props.mjs","names":[],"sources":["../../../../../../../src/lib/types/props.ts"],"sourcesContent":["import type { FlowComponentName } from \"@/components/propTypes\";\nimport type { ExoticComponent, HTMLAttributes } from \"react\";\n\nexport const statusTypes = [\n  \"info\",\n  \"success\",\n  \"warning\",\n  \"danger\",\n  \"unavailable\",\n] as const;\n\nexport type Status = (typeof statusTypes)[number];\n\nexport type PropsWithStatus<T extends Status = Status, P = unknown> = P & {\n  /** The elements status */\n  status?: T;\n};\n\nexport interface PropsWithTunnel {\n  /** @internal */\n  tunnel?: {\n    id: string;\n    component: FlowComponentName;\n  } | null;\n}\n\nexport interface PropsWithClassName {\n  /** The elements class name. */\n  className?: string;\n}\n\nexport type PropsWithElementType<\n  T extends keyof HTMLElementTagNameMap = never,\n> = HTMLAttributes<HTMLElement> & {\n  /** The HTML element or React component rendered as the elements root. */\n  elementType?: T | ExoticComponent;\n};\n\nexport type ContainerBreakpointSize = \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n\nexport interface PropsWithContainerBreakpointSize {\n  /**\n   * The breakpoint at which the element switches to its compact layout.\n   * Evaluated as a container query against the surrounding container, not\n   * against the viewport.\n   */\n  containerBreakpointSize?: ContainerBreakpointSize;\n}\n\nexport const alphaColors = [\n  \"dark\",\n  \"light\",\n  \"dark-static\",\n  \"light-static\",\n] as const;\n\nexport type AlphaColor = (typeof alphaColors)[number];\n\nexport function isAlphaColor(color: string): color is AlphaColor {\n  return alphaColors.includes(color as AlphaColor);\n}\n"],"mappings":";;;AAGA,IAAa,cAAc;CACzB;CACA;CACA;CACA;CACA;AACF;AAwCA,IAAa,cAAc;CACzB;CACA;CACA;CACA;AACF;AAIA,SAAgB,aAAa,OAAoC;CAC/D,OAAO,YAAY,SAAS,KAAmB;AACjD"}
+{"version":3,"file":"props.mjs","names":[],"sources":["../../../../../../../src/lib/types/props.ts"],"sourcesContent":["import type { FlowComponentName } from \"@/components/propTypes\";\nimport type { ExoticComponent, HTMLAttributes } from \"react\";\n\nexport const statusTypes = [\n  \"info\",\n  \"success\",\n  \"warning\",\n  \"danger\",\n  \"unavailable\",\n] as const;\n\nexport type Status = (typeof statusTypes)[number];\n\nexport type PropsWithStatus<T extends Status = Status, P = unknown> = P & {\n  /** The elements status */\n  status?: T;\n};\n\nexport interface PropsWithTunnel {\n  /** @internal */\n  tunnel?: {\n    id: string;\n    component: FlowComponentName;\n    /**\n     * A stable entry id instead of a generated one. Needed wherever the same\n     * component is rendered more than once for a single logical element:\n     * react-aria renders collection children twice — once into its hidden\n     * collection document, once for real — and a generated id would register\n     * each render as its own entry, so the tunnel exit renders every element\n     * twice. Must be unique among the siblings of one tunnel.\n     */\n    staticEntryId?: string;\n  } | null;\n}\n\nexport interface PropsWithClassName {\n  /** The elements class name. */\n  className?: string;\n}\n\nexport type PropsWithElementType<\n  T extends keyof HTMLElementTagNameMap = never,\n> = HTMLAttributes<HTMLElement> & {\n  /** The HTML element or React component rendered as the elements root. */\n  elementType?: T | ExoticComponent;\n};\n\nexport type ContainerBreakpointSize = \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n\nexport interface PropsWithContainerBreakpointSize {\n  /**\n   * The breakpoint at which the element switches to its compact layout.\n   * Evaluated as a container query against the surrounding container, not\n   * against the viewport.\n   */\n  containerBreakpointSize?: ContainerBreakpointSize;\n}\n\nexport const alphaColors = [\n  \"dark\",\n  \"light\",\n  \"dark-static\",\n  \"light-static\",\n] as const;\n\nexport type AlphaColor = (typeof alphaColors)[number];\n\nexport function isAlphaColor(color: string): color is AlphaColor {\n  return alphaColors.includes(color as AlphaColor);\n}\n"],"mappings":";;;AAGA,IAAa,cAAc;CACzB;CACA;CACA;CACA;CACA;AACF;AAiDA,IAAa,cAAc;CACzB;CACA;CACA;CACA;AACF;AAIA,SAAgB,aAAa,OAAoC;CAC/D,OAAO,YAAY,SAAS,KAAmB;AACjD"}

package/dist/js/packages/components/src/status/component-status.mjs

@@ -99,6 +99,10 @@ var component_status_default = {
 		"level": "stable",
 		"isNew": false
 	},
+	"@mittwald/flow-react-components#CoachMark": {
+		"level": "beta",
+		"isNew": true
+	},
 	"@mittwald/flow-react-components#CodeBlock": {
 		"level": "stable",
 		"isNew": false

package/dist/js/packages/components/src/status/component-status.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"component-status.mjs","names":[],"sources":["../../../../../../src/status/component-status.json"],"sourcesContent":["{\n  \"@mittwald/flow-react-components#AccentBox\": {\n    \"level\": \"beta\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Accordion\": {\n    \"level\": \"beta\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Action\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#ActionGroup\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Activity\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Alert\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#AlertBadge\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#AlertIcon\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#AlertText\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Align\": {\n    \"level\": \"deprecated\",\n    \"isNew\": false,\n    \"deprecationNotice\": \"Use Combine instead\"\n  },\n  \"@mittwald/flow-react-components#Autocomplete\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Avatar\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#AvatarStack\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Badge\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#BigNumber\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Breadcrumb\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#BrowserOnly\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Button\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#CartesianChart\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Chat\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Checkbox\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#CheckboxButton\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#CheckboxGroup\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#ClearPropsContext\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#CodeBlock\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#CodeEditor\": {\n    \"level\": \"stable\",\n    \"isNew\": true\n  },\n  \"@mittwald/flow-react-components#Color\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#ColumnLayout\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Combine\": {\n    \"level\": \"stable\",\n    \"isNew\": true\n  },\n  \"@mittwald/flow-react-components#ComboBox\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#ComponentDefaultsProvider\": {\n    \"level\": \"stable\",\n    \"isNew\": true\n  },\n  \"@mittwald/flow-react-components#ComponentPropsContextProvider\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Content\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#ContextMenu\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#ContextualHelp\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#CopyButton\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#CounterBadge\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#CountryOptions\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#DatePicker\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#DateRangePicker\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#DeprecationWarningProvider\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Div\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#DonutChart\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#FieldDescription\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#FieldError\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#FileCard\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#FileCardList\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#FileDropZone\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#FileField\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Flex\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Header\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#HeaderNavigation\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Heading\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Icon\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#IllustratedMessage\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Image\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#ImageCropper\": {\n    \"level\": \"stable\",\n    \"isNew\": true\n  },\n  \"@mittwald/flow-react-components#Initials\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#InlineCode\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Kbd\": {\n    \"level\": \"stable\",\n    \"isNew\": true\n  },\n  \"@mittwald/flow-react-components#Label\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#LabeledValue\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#LayoutCard\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Legend\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#LightBox\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Link\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#List\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#LoadingSpinner\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Markdown\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#MarkdownEditor\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#MenuItem\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Message\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#MessageThread\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Modal\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Navigation\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Notification\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#NotificationProvider\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#NumberField\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Option\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Overlay\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#OverlayTrigger\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#PasswordCreationField\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Popover\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#ProgressBar\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#RadioGroup\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#RangeCalendar\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Rating\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#SearchField\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Section\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#SegmentedControl\": {\n    \"level\": \"deprecated\",\n    \"isNew\": false,\n    \"deprecationNotice\": \"Use `Tabs` to switch content, or `RadioGroup` to select a value.\"\n  },\n  \"@mittwald/flow-react-components#Select\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Separator\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#SettingsProvider\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Skeleton\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#SkeletonText\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Slider\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#SuspenseTrigger\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Switch\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#TabNavigation\": {\n    \"level\": \"stable\",\n    \"isNew\": true\n  },\n  \"@mittwald/flow-react-components#Table\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Tabs\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Text\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#TextArea\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#TextField\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#TimeField\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Tooltip\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#TranslationProvider\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Truncate\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#TunnelEntry\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Wrap\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/flr-universal#Action\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/flr-universal#ActionBatch\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/flr-universal#BrowserOnly\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/flr-universal#CountryOptions\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/flr-universal#DeprecationWarningProvider\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/flr-universal#LightBox\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/flr-universal#LightBoxTrigger\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/flr-universal#List\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/flr-universal#ListItemView\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/flr-universal#Modal\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/flr-universal#ModalTrigger\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/flr-universal#NotificationProvider\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/flr-universal#Popover\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/flr-universal#PopoverTrigger\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/flr-universal#SettingsProvider\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/flr-universal#Wrap\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/nextjs#Link\": {\n    \"level\": \"deprecated\",\n    \"isNew\": false,\n    \"deprecationNotice\": \"Use RouterProvider instead\"\n  },\n  \"@mittwald/flow-react-components/nextjs#LinkProvider\": {\n    \"level\": \"deprecated\",\n    \"isNew\": false,\n    \"deprecationNotice\": \"Use RouterProvider instead\"\n  },\n  \"@mittwald/flow-react-components/nextjs#RouterProvider\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/react-hook-form#Field\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/react-hook-form#Form\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/react-hook-form#FormAction\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/react-hook-form#FormRootError\": {\n    \"level\": \"stable\",\n    \"isNew\": true\n  },\n  \"@mittwald/flow-react-components/react-hook-form#FormSettingsProvider\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/react-hook-form#ResetButton\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/react-hook-form#SubmitButton\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"component-status.mjs","names":[],"sources":["../../../../../../src/status/component-status.json"],"sourcesContent":["{\n  \"@mittwald/flow-react-components#AccentBox\": {\n    \"level\": \"beta\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Accordion\": {\n    \"level\": \"beta\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Action\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#ActionGroup\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Activity\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Alert\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#AlertBadge\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#AlertIcon\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#AlertText\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Align\": {\n    \"level\": \"deprecated\",\n    \"isNew\": false,\n    \"deprecationNotice\": \"Use Combine instead\"\n  },\n  \"@mittwald/flow-react-components#Autocomplete\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Avatar\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#AvatarStack\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Badge\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#BigNumber\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Breadcrumb\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#BrowserOnly\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Button\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#CartesianChart\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Chat\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Checkbox\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#CheckboxButton\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#CheckboxGroup\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#ClearPropsContext\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#CoachMark\": {\n    \"level\": \"beta\",\n    \"isNew\": true\n  },\n  \"@mittwald/flow-react-components#CodeBlock\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#CodeEditor\": {\n    \"level\": \"stable\",\n    \"isNew\": true\n  },\n  \"@mittwald/flow-react-components#Color\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#ColumnLayout\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Combine\": {\n    \"level\": \"stable\",\n    \"isNew\": true\n  },\n  \"@mittwald/flow-react-components#ComboBox\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#ComponentDefaultsProvider\": {\n    \"level\": \"stable\",\n    \"isNew\": true\n  },\n  \"@mittwald/flow-react-components#ComponentPropsContextProvider\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Content\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#ContextMenu\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#ContextualHelp\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#CopyButton\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#CounterBadge\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#CountryOptions\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#DatePicker\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#DateRangePicker\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#DeprecationWarningProvider\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Div\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#DonutChart\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#FieldDescription\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#FieldError\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#FileCard\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#FileCardList\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#FileDropZone\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#FileField\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Flex\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Header\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#HeaderNavigation\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Heading\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Icon\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#IllustratedMessage\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Image\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#ImageCropper\": {\n    \"level\": \"stable\",\n    \"isNew\": true\n  },\n  \"@mittwald/flow-react-components#Initials\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#InlineCode\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Kbd\": {\n    \"level\": \"stable\",\n    \"isNew\": true\n  },\n  \"@mittwald/flow-react-components#Label\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#LabeledValue\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#LayoutCard\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Legend\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#LightBox\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Link\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#List\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#LoadingSpinner\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Markdown\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#MarkdownEditor\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#MenuItem\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Message\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#MessageThread\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Modal\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Navigation\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Notification\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#NotificationProvider\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#NumberField\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Option\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Overlay\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#OverlayTrigger\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#PasswordCreationField\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Popover\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#ProgressBar\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#RadioGroup\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#RangeCalendar\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Rating\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#SearchField\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Section\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#SegmentedControl\": {\n    \"level\": \"deprecated\",\n    \"isNew\": false,\n    \"deprecationNotice\": \"Use `Tabs` to switch content, or `RadioGroup` to select a value.\"\n  },\n  \"@mittwald/flow-react-components#Select\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Separator\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#SettingsProvider\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Skeleton\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#SkeletonText\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Slider\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#SuspenseTrigger\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Switch\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#TabNavigation\": {\n    \"level\": \"stable\",\n    \"isNew\": true\n  },\n  \"@mittwald/flow-react-components#Table\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Tabs\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Text\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#TextArea\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#TextField\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#TimeField\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Tooltip\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#TranslationProvider\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Truncate\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#TunnelEntry\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components#Wrap\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/flr-universal#Action\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/flr-universal#ActionBatch\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/flr-universal#BrowserOnly\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/flr-universal#CountryOptions\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/flr-universal#DeprecationWarningProvider\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/flr-universal#LightBox\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/flr-universal#LightBoxTrigger\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/flr-universal#List\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/flr-universal#ListItemView\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/flr-universal#Modal\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/flr-universal#ModalTrigger\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/flr-universal#NotificationProvider\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/flr-universal#Popover\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/flr-universal#PopoverTrigger\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/flr-universal#SettingsProvider\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/flr-universal#Wrap\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/nextjs#Link\": {\n    \"level\": \"deprecated\",\n    \"isNew\": false,\n    \"deprecationNotice\": \"Use RouterProvider instead\"\n  },\n  \"@mittwald/flow-react-components/nextjs#LinkProvider\": {\n    \"level\": \"deprecated\",\n    \"isNew\": false,\n    \"deprecationNotice\": \"Use RouterProvider instead\"\n  },\n  \"@mittwald/flow-react-components/nextjs#RouterProvider\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/react-hook-form#Field\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/react-hook-form#Form\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/react-hook-form#FormAction\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/react-hook-form#FormRootError\": {\n    \"level\": \"stable\",\n    \"isNew\": true\n  },\n  \"@mittwald/flow-react-components/react-hook-form#FormSettingsProvider\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/react-hook-form#ResetButton\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  },\n  \"@mittwald/flow-react-components/react-hook-form#SubmitButton\": {\n    \"level\": \"stable\",\n    \"isNew\": false\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/views/ContextualHelpTriggerView.mjs

@@ -0,0 +1,16 @@
+"use client"
+/* */
+import { viewComponentContext } from "../lib/viewComponentContext/viewComponentContext.mjs";
+import { ContextualHelpTrigger } from "../components/ContextualHelp/components/ContextualHelpTrigger/ContextualHelpTrigger.mjs";
+import { memo, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/views/ContextualHelpTriggerView.tsx
+var ContextualHelpTriggerView = memo((props) => {
+	const View = useContext(viewComponentContext)["ContextualHelpTrigger"] ?? ContextualHelpTrigger;
+	return /* @__PURE__ */ jsx(View, { ...props });
+});
+ContextualHelpTriggerView.displayName = "ContextualHelpTriggerView";
+//#endregion
+export { ContextualHelpTriggerView as default };
+
+//# sourceMappingURL=ContextualHelpTriggerView.mjs.map

package/dist/js/packages/components/src/views/ContextualHelpTriggerView.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextualHelpTriggerView.mjs","names":[],"sources":["../../../../../../src/views/ContextualHelpTriggerView.tsx"],"sourcesContent":["/* prettier-ignore */\n/* This file is auto-generated with the remote-components-generator */\nimport React, { memo, type FC, useContext } from \"react\";\nimport {\n  ContextualHelpTrigger,\n  type ContextualHelpTriggerProps,\n} from \"@/components/ContextualHelp/components/ContextualHelpTrigger/ContextualHelpTrigger\";\nimport { viewComponentContext } from \"@/lib/viewComponentContext/viewComponentContext\";\n\nconst ContextualHelpTriggerView: FC<ContextualHelpTriggerProps> = memo(\n  (props) => {\n    const View =\n      useContext(viewComponentContext)[\"ContextualHelpTrigger\"] ??\n      ContextualHelpTrigger;\n    return <View {...props} />;\n  },\n);\nContextualHelpTriggerView.displayName = \"ContextualHelpTriggerView\";\n\nexport default ContextualHelpTriggerView;\n"],"mappings":";;;;;;;AASA,IAAM,4BAA4D,MAC/D,UAAU;CACT,MAAM,OACJ,WAAW,oBAAoB,CAAC,CAAC,4BACjC;CACF,OAAO,oBAAC,MAAD,EAAM,GAAI,MAAQ,CAAA;AAC3B,CACF;AACA,0BAA0B,cAAc"}

package/dist/js/packages/design-tokens/dist/json-runtime/all-dark.mjs

@@ -2417,6 +2417,10 @@ var notification = {
 		"value": "355px",
 		"path": ["notification", "width"]
 	},
+	"max-width": {
+		"value": "calc(100dvw - 2 * 32px)",
+		"path": ["notification", "max-width"]
+	},
 	"heading-to-text-spacing": {
 		"value": "0.25rem",
 		"path": ["notification", "heading-to-text-spacing"]
@@ -4989,6 +4993,10 @@ var all_dark_default = {
 		}
 	},
 	tabs,
+	"coach-mark": { "max-width": {
+		"value": "360px",
+		"path": ["coach-mark", "max-width"]
+	} },
 	"contextual-help": { "max-width": {
 		"value": "500px",
 		"path": ["contextual-help", "max-width"]