@mittwald/flow-react-components 0.2.0-alpha.804 → 0.2.0-alpha.806

package/dist/js/packages/components/src/components/List/components/Table/Table.mjs

@@ -4,28 +4,25 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import 'invariant';
 import 'react-aria-components';
 import clsx from 'clsx';
-import '@mittwald/react-tunnel';
-import '../../../../views/ListItemViewContentView.mjs';
+import '../ListItemView/ListItemView.mjs';
 import '../../../../lib/propsContext/propsContext.mjs';
 import '../../../../lib/propsContext/components/PropsContextProvider.mjs';
-import '../../../TranslationProvider/TranslationProvider.mjs';
-import 'remeda';
-import 'intl-messageformat';
-import '@react-aria/i18n';
+import '../../../ColumnLayout/ColumnLayout.mjs';
+import '../ListSummary/ListSummary.mjs';
+import '../../../../views/DivView.mjs';
 import 'react';
-import 'react-aria';
 import '@mittwald/flow-icons';
 import '../../../Icon/components/IconSetProvider.mjs';
 import '../../../Icon/Icon.mjs';
 import '../../../../views/IconView.mjs';
-import '../../../../views/ButtonView.mjs';
-import '../../../../views/ContextMenuTriggerView.mjs';
-import '../../../ColumnLayout/ColumnLayout.mjs';
-import '../ListSummary/ListSummary.mjs';
-import '../../../../views/DivView.mjs';
 import '../../../../views/IllustratedMessageView.mjs';
 import '../../../../views/HeadingView.mjs';
 import '../../../../views/TextView.mjs';
+import '../../../TranslationProvider/TranslationProvider.mjs';
+import 'remeda';
+import 'intl-messageformat';
+import '@react-aria/i18n';
+import 'react-aria';
 import '../../../IllustratedMessage/IllustratedMessage.mjs';
 import '../../../Heading/Heading.mjs';
 import '../../../Text/Text.mjs';

package/dist/js/packages/components/src/components/List/components/Table/Table.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Table.mjs","sources":["../../../../../../../../../src/components/List/components/Table/Table.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useList } from \"@/components/List\";\nimport styles from \"./Table.module.css\";\nimport clsx from \"clsx\";\nimport TableView from \"@/views/TableView\";\nimport TableHeaderView from \"@/views/TableHeaderView\";\nimport TableBodyView from \"@/views/TableBodyView\";\nimport TableRowView from \"@/views/TableRowView\";\nimport TableCellView from \"@/views/TableCellView\";\nimport TableColumnView from \"@/views/TableColumnView\";\nimport { TableBodyLoadingView } from \"@/components/List/components/Table/components/TableBodyLoadingView\";\nimport ListEmptyViewContainerView from \"@/views/ListEmptyViewContainerView\";\n\nexport const Table: FC = () => {\n  const list = useList();\n  const table = list.table;\n  const listIsEmpty = list.useIsEmpty();\n\n  const isLoading = list.loader.useIsLoading();\n  const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n\n  if (!table) {\n    return null;\n  }\n\n  if (listIsEmpty) {\n    return (\n      <ListEmptyViewContainerView\n        viewType={list.getEmptyViewType()}\n        emptySearchResultView={list.emptySearchResultView}\n        emptyView={list.emptyView}\n      />\n    );\n  }\n\n  const rowAction = table.list.onAction;\n\n  const tableClassName = clsx(\n    styles.table,\n    isLoading && styles.isLoading,\n    table.componentProps.className,\n  );\n\n  const rows = list.items.entries.map((item) => (\n    <TableRowView\n      className={(props) =>\n        clsx(\n          styles.row,\n          rowAction && styles.hasAction,\n          table.body.row.componentProps.className,\n          props.isSelected && styles.isSelected,\n        )\n      }\n      key={item.id}\n      id={item.id}\n      onAction={rowAction ? () => rowAction(item.data) : undefined}\n      {...table.body.row.componentProps}\n    >\n      {table.body.row?.cells.map((cell, i) => (\n        <TableCellView key={i} {...cell.componentProps}>\n          {cell.renderFn ? cell.renderFn(item.data, list) : undefined}\n        </TableCellView>\n      ))}\n    </TableRowView>\n  ));\n\n  return (\n    <TableView\n      {...list.componentProps}\n      {...table.componentProps}\n      className={tableClassName}\n      aria-hidden={isInitiallyLoading}\n      aria-busy={isLoading}\n    >\n      <TableHeaderView {...table.header.componentProps}>\n        {table.header.columns.map((col, i) => (\n          <TableColumnView key={i} {...col.componentProps} />\n        ))}\n      </TableHeaderView>\n      <TableBodyView {...table.body.componentProps}>\n        {isInitiallyLoading ? <TableBodyLoadingView /> : rows}\n      </TableBodyView>\n    </TableView>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Table.mjs","sources":["../../../../../../../../../src/components/List/components/Table/Table.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useList } from \"@/components/List\";\nimport styles from \"./Table.module.css\";\nimport clsx from \"clsx\";\nimport TableView from \"@/views/TableView\";\nimport TableHeaderView from \"@/views/TableHeaderView\";\nimport TableBodyView from \"@/views/TableBodyView\";\nimport TableRowView from \"@/views/TableRowView\";\nimport TableCellView from \"@/views/TableCellView\";\nimport TableColumnView from \"@/views/TableColumnView\";\nimport { TableBodyLoadingView } from \"@/components/List/components/Table/components/TableBodyLoadingView\";\nimport ListEmptyViewContainerView from \"@/views/ListEmptyViewContainerView\";\n\nexport const Table: FC = () => {\n  const list = useList();\n  const table = list.table;\n  const listIsEmpty = list.useIsEmpty();\n\n  const isLoading = list.loader.useIsLoading();\n  const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n\n  if (!table) {\n    return null;\n  }\n\n  if (listIsEmpty) {\n    return (\n      <ListEmptyViewContainerView\n        viewType={list.getEmptyViewType()}\n        emptySearchResultView={list.emptySearchResultView}\n        emptyView={list.emptyView}\n      />\n    );\n  }\n\n  const rowAction = table.list.onAction;\n\n  const tableClassName = clsx(\n    styles.table,\n    isLoading && styles.isLoading,\n    table.componentProps.className,\n  );\n\n  const rows = list.items.entries.map((item) => (\n    <TableRowView\n      className={(props) =>\n        clsx(\n          styles.row,\n          rowAction && styles.hasAction,\n          table.body.row.componentProps.className,\n          props.isSelected && styles.isSelected,\n        )\n      }\n      key={item.id}\n      id={item.id}\n      onAction={rowAction ? () => rowAction(item.data) : undefined}\n      {...table.body.row.componentProps}\n    >\n      {table.body.row?.cells.map((cell, i) => (\n        <TableCellView key={i} {...cell.componentProps}>\n          {cell.renderFn ? cell.renderFn(item.data, list) : undefined}\n        </TableCellView>\n      ))}\n    </TableRowView>\n  ));\n\n  return (\n    <TableView\n      {...list.componentProps}\n      {...table.componentProps}\n      className={tableClassName}\n      aria-hidden={isInitiallyLoading}\n      aria-busy={isLoading}\n    >\n      <TableHeaderView {...table.header.componentProps}>\n        {table.header.columns.map((col, i) => (\n          <TableColumnView key={i} {...col.componentProps} />\n        ))}\n      </TableHeaderView>\n      <TableBodyView {...table.body.componentProps}>\n        {isInitiallyLoading ? <TableBodyLoadingView /> : rows}\n      </TableBodyView>\n    </TableView>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/js/packages/components/src/components/MarkdownEditor/MarkdownEditor.mjs

@@ -9,7 +9,6 @@ import { Toolbar } from './components/Toolbar.mjs';
 import clsx from 'clsx';
 import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
 import { useObjectRef } from '@react-aria/utils';
-import { TunnelProvider } from '@mittwald/react-tunnel';
 import { modifyValueByMarkdownSyntax, scrollToCursor } from './lib/modifyValueByMarkdownSyntax.mjs';
 import { modifyValueByType } from './lib/modifyValueByType.mjs';
 import { useControlledHostValueProps } from '../../lib/remote/useControlledHostValueProps.mjs';
@@ -69,7 +68,7 @@ const MarkdownEditor = flowComponent("MarkdownEditor", (props) => {
     });
     onChange(newValue);
   };
-  return /* @__PURE__ */ jsx("div", { className: rootClassName, children: /* @__PURE__ */ jsx(TunnelProvider, { children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: rootClassName, children: /* @__PURE__ */ jsxs(
     TextArea,
     {
       ...rest,
@@ -106,7 +105,7 @@ const MarkdownEditor = flowComponent("MarkdownEditor", (props) => {
         )
       ]
     }
-  ) }) });
+  ) });
 });
 
 export { MarkdownEditor };

package/dist/js/packages/components/src/components/MarkdownEditor/MarkdownEditor.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownEditor.mjs","sources":["../../../../../../../src/components/MarkdownEditor/MarkdownEditor.tsx"],"sourcesContent":["import { type KeyboardEventHandler, useState } from \"react\";\nimport styles from \"./MarkdownEditor.module.scss\";\nimport { Markdown, type MarkdownProps } from \"@/components/Markdown\";\nimport { TextArea, type TextAreaProps } from \"@/components/TextArea\";\nimport { Toolbar } from \"@/components/MarkdownEditor/components/Toolbar\";\nimport clsx from \"clsx\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { TunnelProvider } from \"@mittwald/react-tunnel\";\nimport {\n  modifyValueByMarkdownSyntax,\n  scrollToCursor,\n} from \"@/components/MarkdownEditor/lib/modifyValueByMarkdownSyntax\";\nimport {\n  type InsertType,\n  modifyValueByType,\n} from \"@/components/MarkdownEditor/lib/modifyValueByType\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\n\nexport type MarkdownEditorMode = \"editor\" | \"preview\";\n\nexport interface MarkdownEditorProps\n  extends TextAreaProps, Pick<MarkdownProps, \"headingOffset\"> {}\n\n/** @flr-generate all */\nexport const MarkdownEditor = flowComponent(\"MarkdownEditor\", (props) => {\n  const {\n    isDisabled,\n    isReadOnly,\n    children,\n    className,\n    rows = 5,\n    autoResizeMaxRows,\n    headingOffset,\n    value,\n    onChange,\n    ref,\n    ...rest\n  } = useControlledHostValueProps(props);\n\n  const inputRef = useObjectRef(ref);\n  const [mode, setMode] = useState<MarkdownEditorMode>(\"editor\");\n\n  const rootClassName = clsx(\n    styles.markdownEditor,\n    className,\n    styles[`mode-${mode}`],\n  );\n\n  const handleKeyDown: KeyboardEventHandler = (event) => {\n    if (event.key !== \"Enter\") {\n      return;\n    }\n\n    const modifyParams = modifyValueByMarkdownSyntax(value, inputRef);\n    if (!modifyParams) {\n      return;\n    }\n\n    const { newValue, newSelectionStart, newSelectionEnd } = modifyParams;\n\n    requestAnimationFrame(() => {\n      if (inputRef.current) {\n        inputRef.current.value = newValue;\n        inputRef.current?.setSelectionRange(newSelectionStart, newSelectionEnd);\n        scrollToCursor(newValue, inputRef.current);\n      }\n    });\n\n    event.preventDefault();\n    onChange(newValue);\n  };\n\n  const handleToolButtonPressed = (type: InsertType) => {\n    const { newValue, newSelectionStart, newSelectionEnd } = modifyValueByType(\n      value,\n      type,\n      inputRef,\n    );\n\n    requestAnimationFrame(() => {\n      if (inputRef.current) {\n        inputRef.current.value = newValue;\n        inputRef.current.setSelectionRange(newSelectionStart, newSelectionEnd);\n        inputRef.current.focus();\n      }\n    });\n\n    onChange(newValue);\n  };\n\n  return (\n    <div className={rootClassName}>\n      <TunnelProvider>\n        <TextArea\n          {...rest}\n          aria-hidden={mode === \"preview\"}\n          isReadOnly={isReadOnly || mode === \"preview\"}\n          isDisabled={isDisabled}\n          ref={inputRef}\n          value={value}\n          rows={rows}\n          autoResizeMaxRows={autoResizeMaxRows}\n          onChange={onChange}\n          onKeyDown={handleKeyDown}\n        >\n          {mode === \"preview\" && (\n            <Markdown\n              headingOffset={headingOffset}\n              className={styles.markdown}\n              style={{\n                height: inputRef.current?.offsetHeight,\n              }}\n            >\n              {value}\n            </Markdown>\n          )}\n          {children}\n          <Toolbar\n            currentMode={mode}\n            isDisabled={isDisabled}\n            onModeChange={setMode}\n            onToolPressed={handleToolButtonPressed}\n          />\n        </TextArea>\n      </TunnelProvider>\n    </div>\n  );\n});\n\nexport default MarkdownEditor;\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAyBO,MAAM,cAAA,GAAiB,aAAA,CAAc,gBAAA,EAAkB,CAAC,KAAA,KAAU;AACvE,EAAA,MAAM;AAAA,IACJ,UAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,IAAA,GAAO,CAAA;AAAA,IACP,iBAAA;AAAA,IACA,aAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,4BAA4B,KAAK,CAAA;AAErC,EAAA,MAAM,QAAA,GAAW,aAAa,GAAG,CAAA;AACjC,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAA6B,QAAQ,CAAA;AAE7D,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,cAAA;AAAA,IACP,SAAA;AAAA,IACA,MAAA,CAAO,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE;AAAA,GACvB;AAEA,EAAA,MAAM,aAAA,GAAsC,CAAC,KAAA,KAAU;AACrD,IAAA,IAAI,KAAA,CAAM,QAAQ,OAAA,EAAS;AACzB,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,YAAA,GAAe,2BAAA,CAA4B,KAAA,EAAO,QAAQ,CAAA;AAChE,IAAA,IAAI,CAAC,YAAA,EAAc;AACjB,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,EAAE,QAAA,EAAU,iBAAA,EAAmB,eAAA,EAAgB,GAAI,YAAA;AAEzD,IAAA,qBAAA,CAAsB,MAAM;AAC1B,MAAA,IAAI,SAAS,OAAA,EAAS;AACpB,QAAA,QAAA,CAAS,QAAQ,KAAA,GAAQ,QAAA;AACzB,QAAA,QAAA,CAAS,OAAA,EAAS,iBAAA,CAAkB,iBAAA,EAAmB,eAAe,CAAA;AACtE,QAAA,cAAA,CAAe,QAAA,EAAU,SAAS,OAAO,CAAA;AAAA,MAC3C;AAAA,IACF,CAAC,CAAA;AAED,IAAA,KAAA,CAAM,cAAA,EAAe;AACrB,IAAA,QAAA,CAAS,QAAQ,CAAA;AAAA,EACnB,CAAA;AAEA,EAAA,MAAM,uBAAA,GAA0B,CAAC,IAAA,KAAqB;AACpD,IAAA,MAAM,EAAE,QAAA,EAAU,iBAAA,EAAmB,eAAA,EAAgB,GAAI,iBAAA;AAAA,MACvD,KAAA;AAAA,MACA,IAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAA,qBAAA,CAAsB,MAAM;AAC1B,MAAA,IAAI,SAAS,OAAA,EAAS;AACpB,QAAA,QAAA,CAAS,QAAQ,KAAA,GAAQ,QAAA;AACzB,QAAA,QAAA,CAAS,OAAA,CAAQ,iBAAA,CAAkB,iBAAA,EAAmB,eAAe,CAAA;AACrE,QAAA,QAAA,CAAS,QAAQ,KAAA,EAAM;AAAA,MACzB;AAAA,IACF,CAAC,CAAA;AAED,IAAA,QAAA,CAAS,QAAQ,CAAA;AAAA,EACnB,CAAA;AAEA,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,EACd,8BAAC,cAAA,EAAA,EACC,QAAA,kBAAA,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,eAAa,IAAA,KAAS,SAAA;AAAA,MACtB,UAAA,EAAY,cAAc,IAAA,KAAS,SAAA;AAAA,MACnC,UAAA;AAAA,MACA,GAAA,EAAK,QAAA;AAAA,MACL,KAAA;AAAA,MACA,IAAA;AAAA,MACA,iBAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA,EAAW,aAAA;AAAA,MAEV,QAAA,EAAA;AAAA,QAAA,IAAA,KAAS,SAAA,oBACR,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,aAAA;AAAA,YACA,WAAW,MAAA,CAAO,QAAA;AAAA,YAClB,KAAA,EAAO;AAAA,cACL,MAAA,EAAQ,SAAS,OAAA,EAAS;AAAA,aAC5B;AAAA,YAEC,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,QAED,QAAA;AAAA,wBACD,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,WAAA,EAAa,IAAA;AAAA,YACb,UAAA;AAAA,YACA,YAAA,EAAc,OAAA;AAAA,YACd,aAAA,EAAe;AAAA;AAAA;AACjB;AAAA;AAAA,KAEJ,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"MarkdownEditor.mjs","sources":["../../../../../../../src/components/MarkdownEditor/MarkdownEditor.tsx"],"sourcesContent":["import { type KeyboardEventHandler, useState } from \"react\";\nimport styles from \"./MarkdownEditor.module.scss\";\nimport { Markdown, type MarkdownProps } from \"@/components/Markdown\";\nimport { TextArea, type TextAreaProps } from \"@/components/TextArea\";\nimport { Toolbar } from \"@/components/MarkdownEditor/components/Toolbar\";\nimport clsx from \"clsx\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport {\n  modifyValueByMarkdownSyntax,\n  scrollToCursor,\n} from \"@/components/MarkdownEditor/lib/modifyValueByMarkdownSyntax\";\nimport {\n  type InsertType,\n  modifyValueByType,\n} from \"@/components/MarkdownEditor/lib/modifyValueByType\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\n\nexport type MarkdownEditorMode = \"editor\" | \"preview\";\n\nexport interface MarkdownEditorProps\n  extends TextAreaProps, Pick<MarkdownProps, \"headingOffset\"> {}\n\n/** @flr-generate all */\nexport const MarkdownEditor = flowComponent(\"MarkdownEditor\", (props) => {\n  const {\n    isDisabled,\n    isReadOnly,\n    children,\n    className,\n    rows = 5,\n    autoResizeMaxRows,\n    headingOffset,\n    value,\n    onChange,\n    ref,\n    ...rest\n  } = useControlledHostValueProps(props);\n\n  const inputRef = useObjectRef(ref);\n  const [mode, setMode] = useState<MarkdownEditorMode>(\"editor\");\n\n  const rootClassName = clsx(\n    styles.markdownEditor,\n    className,\n    styles[`mode-${mode}`],\n  );\n\n  const handleKeyDown: KeyboardEventHandler = (event) => {\n    if (event.key !== \"Enter\") {\n      return;\n    }\n\n    const modifyParams = modifyValueByMarkdownSyntax(value, inputRef);\n    if (!modifyParams) {\n      return;\n    }\n\n    const { newValue, newSelectionStart, newSelectionEnd } = modifyParams;\n\n    requestAnimationFrame(() => {\n      if (inputRef.current) {\n        inputRef.current.value = newValue;\n        inputRef.current?.setSelectionRange(newSelectionStart, newSelectionEnd);\n        scrollToCursor(newValue, inputRef.current);\n      }\n    });\n\n    event.preventDefault();\n    onChange(newValue);\n  };\n\n  const handleToolButtonPressed = (type: InsertType) => {\n    const { newValue, newSelectionStart, newSelectionEnd } = modifyValueByType(\n      value,\n      type,\n      inputRef,\n    );\n\n    requestAnimationFrame(() => {\n      if (inputRef.current) {\n        inputRef.current.value = newValue;\n        inputRef.current.setSelectionRange(newSelectionStart, newSelectionEnd);\n        inputRef.current.focus();\n      }\n    });\n\n    onChange(newValue);\n  };\n\n  return (\n    <div className={rootClassName}>\n      <TextArea\n        {...rest}\n        aria-hidden={mode === \"preview\"}\n        isReadOnly={isReadOnly || mode === \"preview\"}\n        isDisabled={isDisabled}\n        ref={inputRef}\n        value={value}\n        rows={rows}\n        autoResizeMaxRows={autoResizeMaxRows}\n        onChange={onChange}\n        onKeyDown={handleKeyDown}\n      >\n        {mode === \"preview\" && (\n          <Markdown\n            headingOffset={headingOffset}\n            className={styles.markdown}\n            style={{\n              height: inputRef.current?.offsetHeight,\n            }}\n          >\n            {value}\n          </Markdown>\n        )}\n        {children}\n        <Toolbar\n          currentMode={mode}\n          isDisabled={isDisabled}\n          onModeChange={setMode}\n          onToolPressed={handleToolButtonPressed}\n        />\n      </TextArea>\n    </div>\n  );\n});\n\nexport default MarkdownEditor;\n"],"names":[],"mappings":"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"}

package/dist/js/packages/components/src/components/Navigation/Navigation.mjs

@@ -5,8 +5,8 @@ import styles from './Navigation.module.scss.mjs';
 import clsx from 'clsx';
 import '../../lib/propsContext/propsContext.mjs';
 import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
-import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
 import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+import { UiComponentTunnelExit } from '../UiComponentTunnel/UiComponentTunnelExit.mjs';
 
 const Navigation = flowComponent("Navigation", (props) => {
   const { className, children, ref, ...rest } = props;
@@ -28,16 +28,19 @@ const Navigation = flowComponent("Navigation", (props) => {
       props: {
         Link: {
           ...linkPropsContext,
-          tunnelId: "links"
+          tunnel: {
+            id: "links",
+            component: "Navigation"
+          }
         },
         NavigationGroup: {
           Link: linkPropsContext
         }
       },
-      children: /* @__PURE__ */ jsx(TunnelProvider, { children: /* @__PURE__ */ jsxs("nav", { className: rootClassName, role: "navigation", ...rest, ref, children: [
-        /* @__PURE__ */ jsx("ul", { children: /* @__PURE__ */ jsx(TunnelExit, { id: "links" }) }),
+      children: /* @__PURE__ */ jsxs("nav", { className: rootClassName, role: "navigation", ...rest, ref, children: [
+        /* @__PURE__ */ jsx("ul", { children: /* @__PURE__ */ jsx(UiComponentTunnelExit, { id: "links", component: "Navigation" }) }),
         children
-      ] }) })
+      ] })
     }
   );
 });

package/dist/js/packages/components/src/components/Navigation/Navigation.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.mjs","sources":["../../../../../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport styles from \"./Navigation.module.scss\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { ComponentPropsContext } from \"@/lib/propsContext/types\";\n\nexport interface NavigationProps\n  extends\n    PropsWithChildren<ComponentProps<\"nav\">>,\n    PropsWithClassName,\n    FlowComponentProps<HTMLElement> {}\n\n/** @flr-generate all */\nexport const Navigation = flowComponent(\"Navigation\", (props) => {\n  const { className, children, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.navigation, className);\n\n  const linkPropsContext: ComponentPropsContext<\"Link\"> = {\n    wrapWith: <li />,\n    className: styles.item,\n    unstyled: true,\n    Icon: {\n      className: styles.icon,\n      size: \"m\",\n    },\n    Badge: { className: styles.badge },\n    CounterBadge: { className: styles.badge },\n  };\n\n  return (\n    <PropsContextProvider\n      props={{\n        Link: {\n          ...linkPropsContext,\n          tunnelId: \"links\",\n        },\n        NavigationGroup: {\n          Link: linkPropsContext,\n        },\n      }}\n    >\n      <TunnelProvider>\n        <nav className={rootClassName} role=\"navigation\" {...rest} ref={ref}>\n          <ul>\n            <TunnelExit id=\"links\" />\n          </ul>\n          {children}\n        </nav>\n      </TunnelProvider>\n    </PropsContextProvider>\n  );\n});\n\nexport default Navigation;\n"],"names":[],"mappings":";;;;;;;;AAmBO,MAAM,UAAA,GAAa,aAAA,CAAc,YAAA,EAAc,CAAC,KAAA,KAAU;AAC/D,EAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAE9C,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,UAAA,EAAY,SAAS,CAAA;AAEvD,EAAA,MAAM,gBAAA,GAAkD;AAAA,IACtD,QAAA,sBAAW,IAAA,EAAA,EAAG,CAAA;AAAA,IACd,WAAW,MAAA,CAAO,IAAA;AAAA,IAClB,QAAA,EAAU,IAAA;AAAA,IACV,IAAA,EAAM;AAAA,MACJ,WAAW,MAAA,CAAO,IAAA;AAAA,MAClB,IAAA,EAAM;AAAA,KACR;AAAA,IACA,KAAA,EAAO,EAAE,SAAA,EAAW,MAAA,CAAO,KAAA,EAAM;AAAA,IACjC,YAAA,EAAc,EAAE,SAAA,EAAW,MAAA,CAAO,KAAA;AAAM,GAC1C;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,oBAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO;AAAA,QACL,IAAA,EAAM;AAAA,UACJ,GAAG,gBAAA;AAAA,UACH,QAAA,EAAU;AAAA,SACZ;AAAA,QACA,eAAA,EAAiB;AAAA,UACf,IAAA,EAAM;AAAA;AACR,OACF;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,cAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,eAAe,IAAA,EAAK,YAAA,EAAc,GAAG,IAAA,EAAM,GAAA,EACzD,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,IAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,SAAQ,CAAA,EACzB,CAAA;AAAA,QACC;AAAA,OAAA,EACH,CAAA,EACF;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Navigation.mjs","sources":["../../../../../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport styles from \"./Navigation.module.scss\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { ComponentPropsContext } from \"@/lib/propsContext/types\";\nimport { UiComponentTunnelExit } from \"../UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface NavigationProps\n  extends\n    PropsWithChildren<ComponentProps<\"nav\">>,\n    PropsWithClassName,\n    FlowComponentProps<HTMLElement> {}\n\n/** @flr-generate all */\nexport const Navigation = flowComponent(\"Navigation\", (props) => {\n  const { className, children, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.navigation, className);\n\n  const linkPropsContext: ComponentPropsContext<\"Link\"> = {\n    wrapWith: <li />,\n    className: styles.item,\n    unstyled: true,\n    Icon: {\n      className: styles.icon,\n      size: \"m\",\n    },\n    Badge: { className: styles.badge },\n    CounterBadge: { className: styles.badge },\n  };\n\n  return (\n    <PropsContextProvider\n      props={{\n        Link: {\n          ...linkPropsContext,\n          tunnel: {\n            id: \"links\",\n            component: \"Navigation\",\n          },\n        },\n        NavigationGroup: {\n          Link: linkPropsContext,\n        },\n      }}\n    >\n      <nav className={rootClassName} role=\"navigation\" {...rest} ref={ref}>\n        <ul>\n          <UiComponentTunnelExit id=\"links\" component=\"Navigation\" />\n        </ul>\n        {children}\n      </nav>\n    </PropsContextProvider>\n  );\n});\n\nexport default Navigation;\n"],"names":[],"mappings":";;;;;;;;AAmBO,MAAM,UAAA,GAAa,aAAA,CAAc,YAAA,EAAc,CAAC,KAAA,KAAU;AAC/D,EAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAE9C,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,UAAA,EAAY,SAAS,CAAA;AAEvD,EAAA,MAAM,gBAAA,GAAkD;AAAA,IACtD,QAAA,sBAAW,IAAA,EAAA,EAAG,CAAA;AAAA,IACd,WAAW,MAAA,CAAO,IAAA;AAAA,IAClB,QAAA,EAAU,IAAA;AAAA,IACV,IAAA,EAAM;AAAA,MACJ,WAAW,MAAA,CAAO,IAAA;AAAA,MAClB,IAAA,EAAM;AAAA,KACR;AAAA,IACA,KAAA,EAAO,EAAE,SAAA,EAAW,MAAA,CAAO,KAAA,EAAM;AAAA,IACjC,YAAA,EAAc,EAAE,SAAA,EAAW,MAAA,CAAO,KAAA;AAAM,GAC1C;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,oBAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO;AAAA,QACL,IAAA,EAAM;AAAA,UACJ,GAAG,gBAAA;AAAA,UACH,MAAA,EAAQ;AAAA,YACN,EAAA,EAAI,OAAA;AAAA,YACJ,SAAA,EAAW;AAAA;AACb,SACF;AAAA,QACA,eAAA,EAAiB;AAAA,UACf,IAAA,EAAM;AAAA;AACR,OACF;AAAA,MAEA,QAAA,kBAAA,IAAA,CAAC,SAAI,SAAA,EAAW,aAAA,EAAe,MAAK,YAAA,EAAc,GAAG,MAAM,GAAA,EACzD,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,QACC,QAAA,kBAAA,GAAA,CAAC,qBAAA,EAAA,EAAsB,IAAG,OAAA,EAAQ,SAAA,EAAU,cAAa,CAAA,EAC3D,CAAA;AAAA,QACC;AAAA,OAAA,EACH;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}

package/dist/js/packages/components/src/components/Navigation/components/NavigationGroup/NavigationGroup.mjs

@@ -1,15 +1,15 @@
 "use client"
 /* */
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId } from 'react';
 import clsx from 'clsx';
 import styles from './NavigationGroup.module.scss.mjs';
 import '../../../../lib/propsContext/propsContext.mjs';
 import { PropsContextProvider } from '../../../../lib/propsContext/components/PropsContextProvider.mjs';
-import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
 import { Accordion } from '../../../Accordion/Accordion.mjs';
 import { Content } from '../../../Content/Content.mjs';
 import { flowComponent } from '../../../../lib/componentFactory/flowComponent.mjs';
+import { UiComponentTunnelExit } from '../../../UiComponentTunnel/UiComponentTunnelExit.mjs';
 
 const NavigationGroup = flowComponent("NavigationGroup", (props) => {
   const { children, className, collapsable, ...rest } = props;
@@ -25,27 +25,21 @@ const NavigationGroup = flowComponent("NavigationGroup", (props) => {
       className: styles.label
     },
     Link: {
-      tunnelId: "groupLinks"
+      tunnel: {
+        id: "groupLinks",
+        component: "NavigationGroup"
+      }
     }
   };
-  if (collapsable) {
-    return /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx(TunnelProvider, { children: /* @__PURE__ */ jsxs(Accordion, { defaultExpanded: true, className: rootClassName, children: [
-      children,
-      /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsx("ul", { children: /* @__PURE__ */ jsx(TunnelExit, { id: "groupLinks" }) }) })
-    ] }) }) });
-  }
-  return /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx(TunnelProvider, { children: /* @__PURE__ */ jsxs(
-    "section",
-    {
-      "aria-labelledby": generatedId,
-      className: rootClassName,
-      ...rest,
-      children: [
-        children,
-        /* @__PURE__ */ jsx("ul", { children: /* @__PURE__ */ jsx(TunnelExit, { id: "groupLinks" }) })
-      ]
-    }
-  ) }) });
+  const collapsableUi = /* @__PURE__ */ jsxs(Accordion, { defaultExpanded: true, children: [
+    children,
+    /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsx("ul", { children: /* @__PURE__ */ jsx(UiComponentTunnelExit, { id: "groupLinks", component: "NavigationGroup" }) }) })
+  ] });
+  const defaultUi = /* @__PURE__ */ jsxs("section", { "aria-labelledby": generatedId, className: rootClassName, ...rest, children: [
+    children,
+    /* @__PURE__ */ jsx("ul", { children: /* @__PURE__ */ jsx(UiComponentTunnelExit, { id: "groupLinks", component: "NavigationGroup" }) })
+  ] });
+  return /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, dependencies: [generatedId], children: collapsable ? collapsableUi : defaultUi });
 });
 
 export { NavigationGroup };

package/dist/js/packages/components/src/components/Navigation/components/NavigationGroup/NavigationGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationGroup.mjs","sources":["../../../../../../../../../src/components/Navigation/components/NavigationGroup/NavigationGroup.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport { useId } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./NavigationGroup.module.scss\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport { Accordion } from \"@/components/Accordion\";\nimport { Content } from \"@/components/Content\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\n\nexport interface NavigationGroupProps\n  extends\n    PropsWithChildren<ComponentProps<\"section\">>,\n    FlowComponentProps<HTMLElement> {\n  collapsable?: boolean;\n}\n\n/** @flr-generate all */\nexport const NavigationGroup = flowComponent(\"NavigationGroup\", (props) => {\n  const { children, className, collapsable, ...rest } = props;\n\n  const rootClassName = clsx(\n    styles.navigationGroup,\n    collapsable && styles.collapsable,\n    className,\n  );\n\n  const generatedId = useId();\n\n  const propsContext: PropsContext = {\n    Label: {\n      id: generatedId,\n      className: styles.label,\n    },\n    Link: {\n      tunnelId: \"groupLinks\",\n    },\n  };\n\n  if (collapsable) {\n    return (\n      <PropsContextProvider props={propsContext}>\n        <TunnelProvider>\n          <Accordion defaultExpanded className={rootClassName}>\n            {children}\n            <Content>\n              <ul>\n                <TunnelExit id=\"groupLinks\" />\n              </ul>\n            </Content>\n          </Accordion>\n        </TunnelProvider>\n      </PropsContextProvider>\n    );\n  }\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <TunnelProvider>\n        <section\n          aria-labelledby={generatedId}\n          className={rootClassName}\n          {...rest}\n        >\n          {children}\n          <ul>\n            <TunnelExit id=\"groupLinks\" />\n          </ul>\n        </section>\n      </TunnelProvider>\n    </PropsContextProvider>\n  );\n});\n\nexport default NavigationGroup;\n"],"names":[],"mappings":";;;;;;;;;;;AAqBO,MAAM,eAAA,GAAkB,aAAA,CAAc,iBAAA,EAAmB,CAAC,KAAA,KAAU;AACzE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,WAAA,EAAa,GAAG,MAAK,GAAI,KAAA;AAEtD,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,eAAA;AAAA,IACP,eAAe,MAAA,CAAO,WAAA;AAAA,IACtB;AAAA,GACF;AAEA,EAAA,MAAM,cAAc,KAAA,EAAM;AAE1B,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,KAAA,EAAO;AAAA,MACL,EAAA,EAAI,WAAA;AAAA,MACJ,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,QAAA,EAAU;AAAA;AACZ,GACF;AAEA,EAAA,IAAI,WAAA,EAAa;AACf,IAAA,uBACE,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,QAAA,kBAAA,GAAA,CAAC,cAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,SAAA,EAAA,EAAU,eAAA,EAAe,IAAA,EAAC,SAAA,EAAW,aAAA,EACnC,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,sBACD,GAAA,CAAC,WACC,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EACC,8BAAC,UAAA,EAAA,EAAW,EAAA,EAAG,YAAA,EAAa,CAAA,EAC9B,CAAA,EACF;AAAA,KAAA,EACF,GACF,CAAA,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,8BAAC,cAAA,EAAA,EACC,QAAA,kBAAA,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,iBAAA,EAAiB,WAAA;AAAA,MACjB,SAAA,EAAW,aAAA;AAAA,MACV,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,4BACA,IAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,cAAa,CAAA,EAC9B;AAAA;AAAA;AAAA,KAEJ,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"NavigationGroup.mjs","sources":["../../../../../../../../../src/components/Navigation/components/NavigationGroup/NavigationGroup.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport { useId } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./NavigationGroup.module.scss\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { Accordion } from \"@/components/Accordion\";\nimport { Content } from \"@/components/Content\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface NavigationGroupProps\n  extends\n    PropsWithChildren<ComponentProps<\"section\">>,\n    FlowComponentProps<HTMLElement> {\n  collapsable?: boolean;\n}\n\n/** @flr-generate all */\nexport const NavigationGroup = flowComponent(\"NavigationGroup\", (props) => {\n  const { children, className, collapsable, ...rest } = props;\n\n  const rootClassName = clsx(\n    styles.navigationGroup,\n    collapsable && styles.collapsable,\n    className,\n  );\n\n  const generatedId = useId();\n\n  const propsContext: PropsContext = {\n    Label: {\n      id: generatedId,\n      className: styles.label,\n    },\n    Link: {\n      tunnel: {\n        id: \"groupLinks\",\n        component: \"NavigationGroup\",\n      },\n    },\n  };\n\n  const collapsableUi = (\n    <Accordion defaultExpanded>\n      {children}\n      <Content>\n        <ul>\n          <UiComponentTunnelExit id=\"groupLinks\" component=\"NavigationGroup\" />\n        </ul>\n      </Content>\n    </Accordion>\n  );\n\n  const defaultUi = (\n    <section aria-labelledby={generatedId} className={rootClassName} {...rest}>\n      {children}\n      <ul>\n        <UiComponentTunnelExit id=\"groupLinks\" component=\"NavigationGroup\" />\n      </ul>\n    </section>\n  );\n\n  return (\n    <PropsContextProvider props={propsContext} dependencies={[generatedId]}>\n      {collapsable ? collapsableUi : defaultUi}\n    </PropsContextProvider>\n  );\n});\n\nexport default NavigationGroup;\n"],"names":[],"mappings":";;;;;;;;;;;AAqBO,MAAM,eAAA,GAAkB,aAAA,CAAc,iBAAA,EAAmB,CAAC,KAAA,KAAU;AACzE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,WAAA,EAAa,GAAG,MAAK,GAAI,KAAA;AAEtD,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,eAAA;AAAA,IACP,eAAe,MAAA,CAAO,WAAA;AAAA,IACtB;AAAA,GACF;AAEA,EAAA,MAAM,cAAc,KAAA,EAAM;AAE1B,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,KAAA,EAAO;AAAA,MACL,EAAA,EAAI,WAAA;AAAA,MACJ,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,MAAA,EAAQ;AAAA,QACN,EAAA,EAAI,YAAA;AAAA,QACJ,SAAA,EAAW;AAAA;AACb;AACF,GACF;AAEA,EAAA,MAAM,aAAA,mBACJ,IAAA,CAAC,SAAA,EAAA,EAAU,eAAA,EAAe,IAAA,EACvB,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,oBACD,GAAA,CAAC,OAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,qBAAA,EAAA,EAAsB,EAAA,EAAG,YAAA,EAAa,SAAA,EAAU,iBAAA,EAAkB,CAAA,EACrE,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAGF,EAAA,MAAM,SAAA,wBACH,SAAA,EAAA,EAAQ,iBAAA,EAAiB,aAAa,SAAA,EAAW,aAAA,EAAgB,GAAG,IAAA,EAClE,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,oBACD,GAAA,CAAC,QACC,QAAA,kBAAA,GAAA,CAAC,qBAAA,EAAA,EAAsB,IAAG,YAAA,EAAa,SAAA,EAAU,mBAAkB,CAAA,EACrE;AAAA,GAAA,EACF,CAAA;AAGF,EAAA,uBACE,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAAc,YAAA,EAAc,CAAC,WAAW,CAAA,EAClE,QAAA,EAAA,WAAA,GAAc,aAAA,GAAgB,SAAA,EACjC,CAAA;AAEJ,CAAC;;;;"}

package/dist/js/packages/components/src/components/NumberField/NumberField.mjs

@@ -34,7 +34,7 @@ const NumberField = flowComponent("NumberField", (props) => {
     FieldErrorCaptureContext,
     fieldProps,
     fieldPropsContext
-  } = useFieldComponent(props);
+  } = useFieldComponent(props, "NumberField");
   const rootClassName = clsx(formFieldStyles.formField, className);
   return /* @__PURE__ */ jsxs(
     Aria.NumberField,

package/dist/js/packages/components/src/components/NumberField/NumberField.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NumberField.mjs","sources":["../../../../../../../src/components/NumberField/NumberField.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"../FormField/FormField.module.scss\";\nimport styles from \"./NumberField.module.scss\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport {\n  IconChevronDown,\n  IconChevronUp,\n  IconMinus,\n  IconPlus,\n} from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\n\nexport interface NumberFieldProps\n  extends\n    PropsWithChildren<Omit<Aria.NumberFieldProps, \"children\">>,\n    FlowComponentProps<HTMLInputElement> {}\n\n/** @flr-generate all */\nexport const NumberField = flowComponent(\"NumberField\", (props) => {\n  const {\n    children,\n    className,\n    isWheelDisabled = true,\n    ref,\n    ...rest\n  } = useControlledHostValueProps(props);\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props);\n\n  const rootClassName = clsx(formFieldStyles.formField, className);\n\n  return (\n    <Aria.NumberField\n      {...rest}\n      isWheelDisabled={isWheelDisabled}\n      className={clsx(rootClassName, fieldProps.className)}\n    >\n      <PropsContextProvider props={fieldPropsContext}>\n        <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n        <FieldErrorView />\n      </PropsContextProvider>\n      <Aria.Group className={styles.group}>\n        <Button\n          ariaSlot=\"decrement\"\n          className={styles.decrementButton}\n          size=\"s\"\n          variant=\"plain\"\n          color=\"secondary\"\n        >\n          <IconChevronDown />\n          <IconMinus className={styles.coarsePointerIcon} />\n        </Button>\n        <Aria.Input className={styles.input} ref={ref} />\n        <Button\n          ariaSlot=\"increment\"\n          className={styles.incrementButton}\n          size=\"s\"\n          variant=\"plain\"\n          color=\"secondary\"\n        >\n          <IconChevronUp />\n          <IconPlus className={styles.coarsePointerIcon} />\n        </Button>\n      </Aria.Group>\n    </Aria.NumberField>\n  );\n});\n\nexport default NumberField;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAwBO,MAAM,WAAA,GAAc,aAAA,CAAc,aAAA,EAAe,CAAC,KAAA,KAAU;AACjE,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,eAAA,GAAkB,IAAA;AAAA,IAClB,GAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,4BAA4B,KAAK,CAAA;AAErC,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,eAAA,CAAgB,SAAA,EAAW,SAAS,CAAA;AAE/D,EAAA,uBACE,IAAA;AAAA,IAAC,IAAA,CAAK,WAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,eAAA;AAAA,MACA,SAAA,EAAW,IAAA,CAAK,aAAA,EAAe,UAAA,CAAW,SAAS,CAAA;AAAA,MAEnD,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,oBAAA,EAAA,EAAqB,OAAO,iBAAA,EAC3B,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,4BAA0B,QAAA,EAAS,CAAA;AAAA,8BACnC,cAAA,EAAA,EAAe;AAAA,SAAA,EAClB,CAAA;AAAA,6BACC,IAAA,CAAK,KAAA,EAAL,EAAW,SAAA,EAAW,OAAO,KAAA,EAC5B,QAAA,EAAA;AAAA,0BAAA,IAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,QAAA,EAAS,WAAA;AAAA,cACT,WAAW,MAAA,CAAO,eAAA;AAAA,cAClB,IAAA,EAAK,GAAA;AAAA,cACL,OAAA,EAAQ,OAAA;AAAA,cACR,KAAA,EAAM,WAAA;AAAA,cAEN,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,eAAA,EAAA,EAAgB,CAAA;AAAA,gCACjB,GAAA,CAAC,SAAA,EAAA,EAAU,SAAA,EAAW,MAAA,CAAO,iBAAA,EAAmB;AAAA;AAAA;AAAA,WAClD;AAAA,8BACC,IAAA,CAAK,KAAA,EAAL,EAAW,SAAA,EAAW,MAAA,CAAO,OAAO,GAAA,EAAU,CAAA;AAAA,0BAC/C,IAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,QAAA,EAAS,WAAA;AAAA,cACT,WAAW,MAAA,CAAO,eAAA;AAAA,cAClB,IAAA,EAAK,GAAA;AAAA,cACL,OAAA,EAAQ,OAAA;AAAA,cACR,KAAA,EAAM,WAAA;AAAA,cAEN,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,aAAA,EAAA,EAAc,CAAA;AAAA,gCACf,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAW,MAAA,CAAO,iBAAA,EAAmB;AAAA;AAAA;AAAA;AACjD,SAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}
+{"version":3,"file":"NumberField.mjs","sources":["../../../../../../../src/components/NumberField/NumberField.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"../FormField/FormField.module.scss\";\nimport styles from \"./NumberField.module.scss\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport {\n  IconChevronDown,\n  IconChevronUp,\n  IconMinus,\n  IconPlus,\n} from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\n\nexport interface NumberFieldProps\n  extends\n    PropsWithChildren<Omit<Aria.NumberFieldProps, \"children\">>,\n    FlowComponentProps<HTMLInputElement> {}\n\n/** @flr-generate all */\nexport const NumberField = flowComponent(\"NumberField\", (props) => {\n  const {\n    children,\n    className,\n    isWheelDisabled = true,\n    ref,\n    ...rest\n  } = useControlledHostValueProps(props);\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"NumberField\");\n\n  const rootClassName = clsx(formFieldStyles.formField, className);\n\n  return (\n    <Aria.NumberField\n      {...rest}\n      isWheelDisabled={isWheelDisabled}\n      className={clsx(rootClassName, fieldProps.className)}\n    >\n      <PropsContextProvider props={fieldPropsContext}>\n        <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n        <FieldErrorView />\n      </PropsContextProvider>\n      <Aria.Group className={styles.group}>\n        <Button\n          ariaSlot=\"decrement\"\n          className={styles.decrementButton}\n          size=\"s\"\n          variant=\"plain\"\n          color=\"secondary\"\n        >\n          <IconChevronDown />\n          <IconMinus className={styles.coarsePointerIcon} />\n        </Button>\n        <Aria.Input className={styles.input} ref={ref} />\n        <Button\n          ariaSlot=\"increment\"\n          className={styles.incrementButton}\n          size=\"s\"\n          variant=\"plain\"\n          color=\"secondary\"\n        >\n          <IconChevronUp />\n          <IconPlus className={styles.coarsePointerIcon} />\n        </Button>\n      </Aria.Group>\n    </Aria.NumberField>\n  );\n});\n\nexport default NumberField;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAwBO,MAAM,WAAA,GAAc,aAAA,CAAc,aAAA,EAAe,CAAC,KAAA,KAAU;AACjE,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,eAAA,GAAkB,IAAA;AAAA,IAClB,GAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,4BAA4B,KAAK,CAAA;AAErC,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,iBAAA,CAAkB,KAAA,EAAO,aAAa,CAAA;AAE1C,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,eAAA,CAAgB,SAAA,EAAW,SAAS,CAAA;AAE/D,EAAA,uBACE,IAAA;AAAA,IAAC,IAAA,CAAK,WAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,eAAA;AAAA,MACA,SAAA,EAAW,IAAA,CAAK,aAAA,EAAe,UAAA,CAAW,SAAS,CAAA;AAAA,MAEnD,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,oBAAA,EAAA,EAAqB,OAAO,iBAAA,EAC3B,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,4BAA0B,QAAA,EAAS,CAAA;AAAA,8BACnC,cAAA,EAAA,EAAe;AAAA,SAAA,EAClB,CAAA;AAAA,6BACC,IAAA,CAAK,KAAA,EAAL,EAAW,SAAA,EAAW,OAAO,KAAA,EAC5B,QAAA,EAAA;AAAA,0BAAA,IAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,QAAA,EAAS,WAAA;AAAA,cACT,WAAW,MAAA,CAAO,eAAA;AAAA,cAClB,IAAA,EAAK,GAAA;AAAA,cACL,OAAA,EAAQ,OAAA;AAAA,cACR,KAAA,EAAM,WAAA;AAAA,cAEN,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,eAAA,EAAA,EAAgB,CAAA;AAAA,gCACjB,GAAA,CAAC,SAAA,EAAA,EAAU,SAAA,EAAW,MAAA,CAAO,iBAAA,EAAmB;AAAA;AAAA;AAAA,WAClD;AAAA,8BACC,IAAA,CAAK,KAAA,EAAL,EAAW,SAAA,EAAW,MAAA,CAAO,OAAO,GAAA,EAAU,CAAA;AAAA,0BAC/C,IAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,QAAA,EAAS,WAAA;AAAA,cACT,WAAW,MAAA,CAAO,eAAA;AAAA,cAClB,IAAA,EAAK,GAAA;AAAA,cACL,OAAA,EAAQ,OAAA;AAAA,cACR,KAAA,EAAM,WAAA;AAAA,cAEN,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,aAAA,EAAA,EAAc,CAAA;AAAA,gCACf,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAW,MAAA,CAAO,iBAAA,EAAmB;AAAA;AAAA;AAAA;AACjD,SAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}

package/dist/js/packages/components/src/components/PasswordCreationField/PasswordCreationField.mjs

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useMemo, useDeferredValue } from 'react';
 import { dynamic } from '../../lib/propsContext/dynamicProps/dynamic.mjs';
 import '../../lib/propsContext/propsContext.mjs';
@@ -9,7 +9,6 @@ import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
 import styles from './PasswordCreationField.module.scss.mjs';
 import * as Aria from 'react-aria-components';
 import clsx from 'clsx';
-import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
 import '../Action/Action.mjs';
 import { useLocalizedStringFormatter } from '../TranslationProvider/useLocalizedStringFormatter.mjs';
 import '@react-aria/live-announcer';
@@ -30,6 +29,7 @@ import { usePolicyValidationResult } from './lib/usePolicyValidationResult.mjs';
 import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
 import { FieldError } from '../FieldError/FieldError.mjs';
 import { useControlledHostValueProps } from '../../lib/remote/useControlledHostValueProps.mjs';
+import { UiComponentTunnelExit } from '../UiComponentTunnel/UiComponentTunnelExit.mjs';
 
 const PasswordCreationField = flowComponent(
   "PasswordCreationField",
@@ -52,7 +52,7 @@ const PasswordCreationField = flowComponent(
       FieldErrorCaptureContext,
       fieldProps,
       fieldPropsContext
-    } = useFieldComponent(props);
+    } = useFieldComponent(props, "PasswordCreationField");
     const [isLoading, setIsLoading] = useState(false);
     const translate = useLocalizedStringFormatter(
       locales,
@@ -144,7 +144,10 @@ const PasswordCreationField = flowComponent(
     const propsContext = {
       ...fieldPropsContext,
       Button: {
-        tunnelId: "button",
+        tunnel: {
+          id: "button",
+          component: "PasswordCreationField"
+        },
         size: "m",
         variant: "plain",
         color: "secondary",
@@ -152,7 +155,10 @@ const PasswordCreationField = flowComponent(
         className: styles.button
       },
       CopyButton: {
-        tunnelId: "button",
+        tunnel: {
+          id: "button",
+          component: "PasswordCreationField"
+        },
         size: "m",
         variant: "plain",
         color: "secondary",
@@ -184,7 +190,7 @@ const PasswordCreationField = flowComponent(
         })
       }
     };
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(
       Aria.TextField,
       {
         ...rest,
@@ -196,7 +202,7 @@ const PasswordCreationField = flowComponent(
         isDisabled,
         isInvalid,
         isRequired,
-        children: /* @__PURE__ */ jsxs(TunnelProvider, { children: [
+        children: [
           /* @__PURE__ */ jsxs(FieldErrorCaptureContext, { children: [
             /* @__PURE__ */ jsx(FieldError, { children: latestValidationErrorText }),
             /* @__PURE__ */ jsxs(
@@ -229,7 +235,13 @@ const PasswordCreationField = flowComponent(
                               onPress: togglePasswordVisibilityHandler
                             }
                           ),
-                          /* @__PURE__ */ jsx(TunnelExit, { id: "button" })
+                          /* @__PURE__ */ jsx(
+                            UiComponentTunnelExit,
+                            {
+                              id: "button",
+                              component: "PasswordCreationField"
+                            }
+                          )
                         ] }),
                         /* @__PURE__ */ jsx(
                           ComplexityIndicator,
@@ -249,7 +261,7 @@ const PasswordCreationField = flowComponent(
             )
           ] }),
           /* @__PURE__ */ jsx(FieldErrorView, {})
-        ] })
+        ]
       }
     );
   }

package/dist/js/packages/components/src/components/PasswordCreationField/PasswordCreationField.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordCreationField.mjs","sources":["../../../../../../../src/components/PasswordCreationField/PasswordCreationField.tsx"],"sourcesContent":["import {\n  type PropsWithChildren,\n  useState,\n  type ClipboardEvent,\n  useDeferredValue,\n  useMemo,\n} from \"react\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport styles from \"./PasswordCreationField.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport { type ActionFn } from \"@/components/Action\";\nimport getStateFromLatestPolicyValidationResult from \"@/components/PasswordCreationField/lib/getStateFromLatestPolicyValidationResult\";\nimport locales from \"./locales/*.locale.json\";\nimport generateValidationTranslation from \"@/components/PasswordCreationField/lib/generateValidationTranslation\";\nimport FieldDescription from \"@/components/FieldDescription\";\nimport ComplexityIndicator from \"@/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator\";\nimport { generatePassword } from \"@/components/PasswordCreationField/worker/generatePassword\";\nimport TogglePasswordVisibilityButton from \"@/components/PasswordCreationField/components/TogglePasswordVisibilityButton/TogglePasswordVisibilityButton\";\nimport { ValidationResultButton } from \"@/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton\";\nimport { PasswordGenerateButton } from \"@/components/PasswordCreationField/components/PasswordGenerateButton/PasswordGenerateButton\";\nimport type {\n  PolicyValidationResult,\n  PolicyGenericDeclaration,\n  RuleValidationResult,\n} from \"@/integrations/@mittwald/password-tools-js\";\nimport {\n  defaultPasswordCreationPolicy,\n  Policy,\n} from \"@/integrations/@mittwald/password-tools-js\";\nimport { usePolicyValidationResult } from \"@/components/PasswordCreationField/lib/usePolicyValidationResult\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { FieldError } from \"@/components/FieldError\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\n\nexport interface PasswordCreationFieldProps\n  extends\n    PropsWithChildren<\n      Omit<Aria.TextFieldProps, \"children\" | \"value\" | \"defaultValue\"> &\n        Partial<Pick<Aria.FieldErrorRenderProps, \"validationErrors\">>\n    >,\n    FlowComponentProps<HTMLInputElement> {\n  value?: string;\n  onValidationResult?: (result: { password: string; isValid: boolean }) => void;\n  defaultValue?: string;\n  placeholder?: string;\n  validationPolicy?: PolicyGenericDeclaration;\n}\n\nexport interface ResolvedPolicyValidationResult extends Omit<\n  PolicyValidationResult,\n  \"isValid\"\n> {\n  isValid: boolean | \"indeterminate\";\n  ruleResults: RuleValidationResult[];\n}\n\n/** @flr-generate all */\nexport const PasswordCreationField = flowComponent(\n  \"PasswordCreationField\",\n  (props) => {\n    const {\n      children,\n      className,\n      ref,\n      isDisabled,\n      onValidationResult,\n      isInvalid: invalidFromProps,\n      validationPolicy:\n        validationPolicyFromProps = defaultPasswordCreationPolicy,\n      isRequired,\n      value,\n      onChange,\n      ...rest\n    } = useControlledHostValueProps(props);\n\n    const {\n      FieldErrorView,\n      FieldErrorCaptureContext,\n      fieldProps,\n      fieldPropsContext,\n    } = useFieldComponent(props);\n\n    const [isLoading, setIsLoading] = useState(false);\n    const translate = useLocalizedStringFormatter(\n      locales,\n      \"PasswordCreationField\",\n    );\n\n    const validationPolicy = useMemo(\n      () => Policy.fromDeclaration(validationPolicyFromProps),\n      [validationPolicyFromProps],\n    );\n\n    const deferredValue = useDeferredValue(value ?? \"\");\n\n    const [isPasswordRevealed, setIsPasswordRevealed] = useState(false);\n    const initialPolicyValidationState: ResolvedPolicyValidationResult = {\n      isValid: true,\n      complexity: {\n        min: validationPolicy.minComplexity,\n        actual: 4,\n        warning: null,\n      },\n      ruleResults: [],\n    };\n\n    const [policyValidationResult, setPolicyValidationResult] = useState(\n      initialPolicyValidationState,\n    );\n    usePolicyValidationResult(\n      validationPolicy,\n      deferredValue,\n      () => {\n        if (isEmptyValue) {\n          return;\n        }\n\n        setIsLoading(() => true);\n      },\n      ({ password, isValid, results }) => {\n        if (isEmptyValue) {\n          setPolicyValidationResult(() => ({\n            ...results,\n            isValid: true,\n          }));\n          return;\n        }\n\n        setIsLoading(() => false);\n        setPolicyValidationResult(() => results);\n        onValidationResult?.({ password, isValid });\n      },\n    );\n\n    const isEmptyValue = !value;\n    const stateFromValidationResult = getStateFromLatestPolicyValidationResult(\n      isEmptyValue,\n      policyValidationResult,\n    );\n    let latestValidationErrorText = undefined;\n    if (stateFromValidationResult) {\n      const [translationKey, translationValues] = generateValidationTranslation(\n        stateFromValidationResult,\n      );\n      latestValidationErrorText = translate.format(\n        translationKey,\n        translationValues,\n      );\n    }\n\n    const isValidFromValidationResult =\n      !isEmptyValue && stateFromValidationResult?.isValid;\n    const isInvalidFromValidationResult =\n      !isEmptyValue && !stateFromValidationResult?.isValid;\n    const isInvalid = invalidFromProps || isInvalidFromValidationResult;\n\n    const setOptimisticPolicyValidationResult = (\n      state: Partial<ResolvedPolicyValidationResult> = {},\n    ) => {\n      setIsLoading(() => false);\n      setPolicyValidationResult(() => ({\n        ...initialPolicyValidationState,\n        ...state,\n        isValid: true,\n      }));\n    };\n\n    const onPasswordGenerateHandler: ActionFn = async () => {\n      const generatedPassword = await generatePassword(validationPolicy);\n      setOptimisticPolicyValidationResult();\n      setIsPasswordRevealed(true);\n      onChange(generatedPassword);\n    };\n\n    const onPasswordPasteHandler = (event: ClipboardEvent) => {\n      const pastedValue = event.clipboardData?.getData(\"text\");\n      if (typeof pastedValue === \"string\" && pastedValue !== value) {\n        setOptimisticPolicyValidationResult({\n          isValid: \"indeterminate\",\n        });\n      }\n    };\n\n    const togglePasswordVisibilityHandler = () => {\n      setIsPasswordRevealed((old) => !old);\n    };\n\n    const propsContext: PropsContext = {\n      ...fieldPropsContext,\n      Button: {\n        tunnelId: \"button\",\n        size: \"m\",\n        variant: \"plain\",\n        color: \"secondary\",\n        isDisabled: isDisabled,\n        className: styles.button,\n      },\n      CopyButton: {\n        tunnelId: \"button\",\n        size: \"m\",\n        variant: \"plain\",\n        color: \"secondary\",\n        isDisabled: isDisabled,\n        className: styles.button,\n        text: value,\n      },\n      Label: {\n        ...fieldPropsContext.Label,\n        children: dynamic((localProps) => {\n          return (\n            <>\n              {localProps.children}\n              <PasswordGenerateButton\n                isDisabled={isDisabled}\n                onGeneratePasswordAction={onPasswordGenerateHandler}\n              />\n              <ValidationResultButton\n                isEmptyValue={isEmptyValue}\n                isDisabled={isDisabled}\n                policyValidationResult={policyValidationResult}\n              />\n            </>\n          );\n        }),\n      },\n    };\n\n    return (\n      <Aria.TextField\n        {...rest}\n        value={value}\n        type={isPasswordRevealed ? \"text\" : \"password\"}\n        onChange={onChange}\n        onPaste={onPasswordPasteHandler}\n        className={clsx(className, fieldProps.className)}\n        isDisabled={isDisabled}\n        isInvalid={isInvalid}\n        isRequired={isRequired}\n      >\n        <TunnelProvider>\n          <FieldErrorCaptureContext>\n            <FieldError>{latestValidationErrorText}</FieldError>\n            <PropsContextProvider\n              props={propsContext}\n              dependencies={[\n                isDisabled,\n                isRequired,\n                value,\n                policyValidationResult,\n                isEmptyValue,\n              ]}\n            >\n              {children}\n              <Aria.Group\n                isDisabled={isDisabled}\n                className={clsx(styles.inputGroup)}\n              >\n                <Aria.Input ref={ref} className={styles.input} />\n                <Aria.Group className={styles.buttonContainer}>\n                  <TogglePasswordVisibilityButton\n                    className={styles.button}\n                    isVisible={isPasswordRevealed}\n                    isDisabled={isDisabled}\n                    onPress={togglePasswordVisibilityHandler}\n                  />\n                  <TunnelExit id=\"button\" />\n                </Aria.Group>\n                <ComplexityIndicator\n                  isEmptyValue={isEmptyValue}\n                  isLoading={isLoading}\n                  policyValidationResult={policyValidationResult}\n                  validationResultState={stateFromValidationResult}\n                />\n              </Aria.Group>\n              {isValidFromValidationResult && (\n                <FieldDescription>{latestValidationErrorText}</FieldDescription>\n              )}\n            </PropsContextProvider>\n          </FieldErrorCaptureContext>\n          <FieldErrorView />\n        </TunnelProvider>\n      </Aria.TextField>\n    );\n  },\n);\n\nexport default PasswordCreationField;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"PasswordCreationField.mjs","sources":["../../../../../../../src/components/PasswordCreationField/PasswordCreationField.tsx"],"sourcesContent":["import {\n  type PropsWithChildren,\n  useState,\n  type ClipboardEvent,\n  useDeferredValue,\n  useMemo,\n} from \"react\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport styles from \"./PasswordCreationField.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { type ActionFn } from \"@/components/Action\";\nimport getStateFromLatestPolicyValidationResult from \"@/components/PasswordCreationField/lib/getStateFromLatestPolicyValidationResult\";\nimport locales from \"./locales/*.locale.json\";\nimport generateValidationTranslation from \"@/components/PasswordCreationField/lib/generateValidationTranslation\";\nimport FieldDescription from \"@/components/FieldDescription\";\nimport ComplexityIndicator from \"@/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator\";\nimport { generatePassword } from \"@/components/PasswordCreationField/worker/generatePassword\";\nimport TogglePasswordVisibilityButton from \"@/components/PasswordCreationField/components/TogglePasswordVisibilityButton/TogglePasswordVisibilityButton\";\nimport { ValidationResultButton } from \"@/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton\";\nimport { PasswordGenerateButton } from \"@/components/PasswordCreationField/components/PasswordGenerateButton/PasswordGenerateButton\";\nimport type {\n  PolicyValidationResult,\n  PolicyGenericDeclaration,\n  RuleValidationResult,\n} from \"@/integrations/@mittwald/password-tools-js\";\nimport {\n  defaultPasswordCreationPolicy,\n  Policy,\n} from \"@/integrations/@mittwald/password-tools-js\";\nimport { usePolicyValidationResult } from \"@/components/PasswordCreationField/lib/usePolicyValidationResult\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { FieldError } from \"@/components/FieldError\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { UiComponentTunnelExit } from \"../UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface PasswordCreationFieldProps\n  extends\n    PropsWithChildren<\n      Omit<Aria.TextFieldProps, \"children\" | \"value\" | \"defaultValue\"> &\n        Partial<Pick<Aria.FieldErrorRenderProps, \"validationErrors\">>\n    >,\n    FlowComponentProps<HTMLInputElement> {\n  value?: string;\n  onValidationResult?: (result: { password: string; isValid: boolean }) => void;\n  defaultValue?: string;\n  placeholder?: string;\n  validationPolicy?: PolicyGenericDeclaration;\n}\n\nexport interface ResolvedPolicyValidationResult extends Omit<\n  PolicyValidationResult,\n  \"isValid\"\n> {\n  isValid: boolean | \"indeterminate\";\n  ruleResults: RuleValidationResult[];\n}\n\n/** @flr-generate all */\nexport const PasswordCreationField = flowComponent(\n  \"PasswordCreationField\",\n  (props) => {\n    const {\n      children,\n      className,\n      ref,\n      isDisabled,\n      onValidationResult,\n      isInvalid: invalidFromProps,\n      validationPolicy:\n        validationPolicyFromProps = defaultPasswordCreationPolicy,\n      isRequired,\n      value,\n      onChange,\n      ...rest\n    } = useControlledHostValueProps(props);\n\n    const {\n      FieldErrorView,\n      FieldErrorCaptureContext,\n      fieldProps,\n      fieldPropsContext,\n    } = useFieldComponent(props, \"PasswordCreationField\");\n\n    const [isLoading, setIsLoading] = useState(false);\n    const translate = useLocalizedStringFormatter(\n      locales,\n      \"PasswordCreationField\",\n    );\n\n    const validationPolicy = useMemo(\n      () => Policy.fromDeclaration(validationPolicyFromProps),\n      [validationPolicyFromProps],\n    );\n\n    const deferredValue = useDeferredValue(value ?? \"\");\n\n    const [isPasswordRevealed, setIsPasswordRevealed] = useState(false);\n    const initialPolicyValidationState: ResolvedPolicyValidationResult = {\n      isValid: true,\n      complexity: {\n        min: validationPolicy.minComplexity,\n        actual: 4,\n        warning: null,\n      },\n      ruleResults: [],\n    };\n\n    const [policyValidationResult, setPolicyValidationResult] = useState(\n      initialPolicyValidationState,\n    );\n    usePolicyValidationResult(\n      validationPolicy,\n      deferredValue,\n      () => {\n        if (isEmptyValue) {\n          return;\n        }\n\n        setIsLoading(() => true);\n      },\n      ({ password, isValid, results }) => {\n        if (isEmptyValue) {\n          setPolicyValidationResult(() => ({\n            ...results,\n            isValid: true,\n          }));\n          return;\n        }\n\n        setIsLoading(() => false);\n        setPolicyValidationResult(() => results);\n        onValidationResult?.({ password, isValid });\n      },\n    );\n\n    const isEmptyValue = !value;\n    const stateFromValidationResult = getStateFromLatestPolicyValidationResult(\n      isEmptyValue,\n      policyValidationResult,\n    );\n    let latestValidationErrorText = undefined;\n    if (stateFromValidationResult) {\n      const [translationKey, translationValues] = generateValidationTranslation(\n        stateFromValidationResult,\n      );\n      latestValidationErrorText = translate.format(\n        translationKey,\n        translationValues,\n      );\n    }\n\n    const isValidFromValidationResult =\n      !isEmptyValue && stateFromValidationResult?.isValid;\n    const isInvalidFromValidationResult =\n      !isEmptyValue && !stateFromValidationResult?.isValid;\n    const isInvalid = invalidFromProps || isInvalidFromValidationResult;\n\n    const setOptimisticPolicyValidationResult = (\n      state: Partial<ResolvedPolicyValidationResult> = {},\n    ) => {\n      setIsLoading(() => false);\n      setPolicyValidationResult(() => ({\n        ...initialPolicyValidationState,\n        ...state,\n        isValid: true,\n      }));\n    };\n\n    const onPasswordGenerateHandler: ActionFn = async () => {\n      const generatedPassword = await generatePassword(validationPolicy);\n      setOptimisticPolicyValidationResult();\n      setIsPasswordRevealed(true);\n      onChange(generatedPassword);\n    };\n\n    const onPasswordPasteHandler = (event: ClipboardEvent) => {\n      const pastedValue = event.clipboardData?.getData(\"text\");\n      if (typeof pastedValue === \"string\" && pastedValue !== value) {\n        setOptimisticPolicyValidationResult({\n          isValid: \"indeterminate\",\n        });\n      }\n    };\n\n    const togglePasswordVisibilityHandler = () => {\n      setIsPasswordRevealed((old) => !old);\n    };\n\n    const propsContext: PropsContext = {\n      ...fieldPropsContext,\n      Button: {\n        tunnel: {\n          id: \"button\",\n          component: \"PasswordCreationField\",\n        },\n        size: \"m\",\n        variant: \"plain\",\n        color: \"secondary\",\n        isDisabled: isDisabled,\n        className: styles.button,\n      },\n      CopyButton: {\n        tunnel: {\n          id: \"button\",\n          component: \"PasswordCreationField\",\n        },\n        size: \"m\",\n        variant: \"plain\",\n        color: \"secondary\",\n        isDisabled: isDisabled,\n        className: styles.button,\n        text: value,\n      },\n      Label: {\n        ...fieldPropsContext.Label,\n        children: dynamic((localProps) => {\n          return (\n            <>\n              {localProps.children}\n              <PasswordGenerateButton\n                isDisabled={isDisabled}\n                onGeneratePasswordAction={onPasswordGenerateHandler}\n              />\n              <ValidationResultButton\n                isEmptyValue={isEmptyValue}\n                isDisabled={isDisabled}\n                policyValidationResult={policyValidationResult}\n              />\n            </>\n          );\n        }),\n      },\n    };\n\n    return (\n      <Aria.TextField\n        {...rest}\n        value={value}\n        type={isPasswordRevealed ? \"text\" : \"password\"}\n        onChange={onChange}\n        onPaste={onPasswordPasteHandler}\n        className={clsx(className, fieldProps.className)}\n        isDisabled={isDisabled}\n        isInvalid={isInvalid}\n        isRequired={isRequired}\n      >\n        <FieldErrorCaptureContext>\n          <FieldError>{latestValidationErrorText}</FieldError>\n          <PropsContextProvider\n            props={propsContext}\n            dependencies={[\n              isDisabled,\n              isRequired,\n              value,\n              policyValidationResult,\n              isEmptyValue,\n            ]}\n          >\n            {children}\n            <Aria.Group\n              isDisabled={isDisabled}\n              className={clsx(styles.inputGroup)}\n            >\n              <Aria.Input ref={ref} className={styles.input} />\n              <Aria.Group className={styles.buttonContainer}>\n                <TogglePasswordVisibilityButton\n                  className={styles.button}\n                  isVisible={isPasswordRevealed}\n                  isDisabled={isDisabled}\n                  onPress={togglePasswordVisibilityHandler}\n                />\n                <UiComponentTunnelExit\n                  id=\"button\"\n                  component=\"PasswordCreationField\"\n                />\n              </Aria.Group>\n              <ComplexityIndicator\n                isEmptyValue={isEmptyValue}\n                isLoading={isLoading}\n                policyValidationResult={policyValidationResult}\n                validationResultState={stateFromValidationResult}\n              />\n            </Aria.Group>\n            {isValidFromValidationResult && (\n              <FieldDescription>{latestValidationErrorText}</FieldDescription>\n            )}\n          </PropsContextProvider>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </Aria.TextField>\n    );\n  },\n);\n\nexport default PasswordCreationField;\n"],"names":[],"mappings":"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"}

package/dist/js/packages/components/src/components/PasswordCreationField/components/TogglePasswordVisibilityButton/TogglePasswordVisibilityButton.mjs

@@ -35,7 +35,7 @@ const TogglePasswordVisibilityButton = ({
     {
       className,
       size: "m",
-      tunnelId: null,
+      tunnel: null,
       variant: "plain",
       color: "secondary",
       isDisabled,

package/dist/js/packages/components/src/components/PasswordCreationField/components/TogglePasswordVisibilityButton/TogglePasswordVisibilityButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TogglePasswordVisibilityButton.mjs","sources":["../../../../../../../../../src/components/PasswordCreationField/components/TogglePasswordVisibilityButton/TogglePasswordVisibilityButton.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport { Tooltip, TooltipTrigger } from \"@/components/Tooltip\";\nimport Button from \"@/components/Button\";\nimport { IconHide, IconShow } from \"@/components/Icon/components/icons\";\nimport { Action, type ActionFn } from \"@/components/Action\";\nimport locales from \"./../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\n\ninterface Props extends PropsWithClassName {\n  isDisabled?: boolean;\n  isVisible: boolean;\n  onPress: ActionFn;\n}\n\n/** @internal */\nexport const TogglePasswordVisibilityButton: FC<Props> = ({\n  isVisible,\n  isDisabled = false,\n  onPress,\n  className,\n}) => {\n  const translate = useLocalizedStringFormatter(\n    locales,\n    \"PasswordCreationField\",\n  );\n\n  const icon = isVisible ? <IconHide /> : <IconShow />;\n  const tooltipText = translate.format(\n    \"button.generate.tooltip.\" + (isVisible ? \"hide\" : \"show\"),\n  );\n\n  return (\n    <Action onAction={onPress}>\n      <TooltipTrigger>\n        <Button\n          className={className}\n          size=\"m\"\n          tunnelId={null}\n          variant=\"plain\"\n          color=\"secondary\"\n          isDisabled={isDisabled}\n          data-component=\"toggleRevealPassword\"\n          aria-label={tooltipText}\n        >\n          {icon}\n          <Tooltip>{tooltipText}</Tooltip>\n        </Button>\n      </TooltipTrigger>\n    </Action>\n  );\n};\n\nexport default TogglePasswordVisibilityButton;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAgBO,MAAM,iCAA4C,CAAC;AAAA,EACxD,SAAA;AAAA,EACA,UAAA,GAAa,KAAA;AAAA,EACb,OAAA;AAAA,EACA;AACF,CAAA,KAAM;AACJ,EAAA,MAAM,SAAA,GAAY,2BAAA;AAAA,IAChB,OAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,MAAM,OAAO,SAAA,mBAAY,GAAA,CAAC,QAAA,EAAA,EAAS,CAAA,uBAAM,QAAA,EAAA,EAAS,CAAA;AAClD,EAAA,MAAM,cAAc,SAAA,CAAU,MAAA;AAAA,IAC5B,0BAAA,IAA8B,YAAY,MAAA,GAAS,MAAA;AAAA,GACrD;AAEA,EAAA,uBACE,GAAA,CAAC,MAAA,EAAA,EAAO,QAAA,EAAU,OAAA,EAChB,8BAAC,cAAA,EAAA,EACC,QAAA,kBAAA,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,IAAA,EAAK,GAAA;AAAA,MACL,QAAA,EAAU,IAAA;AAAA,MACV,OAAA,EAAQ,OAAA;AAAA,MACR,KAAA,EAAM,WAAA;AAAA,MACN,UAAA;AAAA,MACA,gBAAA,EAAe,sBAAA;AAAA,MACf,YAAA,EAAY,WAAA;AAAA,MAEX,QAAA,EAAA;AAAA,QAAA,IAAA;AAAA,wBACD,GAAA,CAAC,WAAS,QAAA,EAAA,WAAA,EAAY;AAAA;AAAA;AAAA,KAE1B,CAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TogglePasswordVisibilityButton.mjs","sources":["../../../../../../../../../src/components/PasswordCreationField/components/TogglePasswordVisibilityButton/TogglePasswordVisibilityButton.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport { Tooltip, TooltipTrigger } from \"@/components/Tooltip\";\nimport Button from \"@/components/Button\";\nimport { IconHide, IconShow } from \"@/components/Icon/components/icons\";\nimport { Action, type ActionFn } from \"@/components/Action\";\nimport locales from \"./../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\n\ninterface Props extends PropsWithClassName {\n  isDisabled?: boolean;\n  isVisible: boolean;\n  onPress: ActionFn;\n}\n\n/** @internal */\nexport const TogglePasswordVisibilityButton: FC<Props> = ({\n  isVisible,\n  isDisabled = false,\n  onPress,\n  className,\n}) => {\n  const translate = useLocalizedStringFormatter(\n    locales,\n    \"PasswordCreationField\",\n  );\n\n  const icon = isVisible ? <IconHide /> : <IconShow />;\n  const tooltipText = translate.format(\n    \"button.generate.tooltip.\" + (isVisible ? \"hide\" : \"show\"),\n  );\n\n  return (\n    <Action onAction={onPress}>\n      <TooltipTrigger>\n        <Button\n          className={className}\n          size=\"m\"\n          tunnel={null}\n          variant=\"plain\"\n          color=\"secondary\"\n          isDisabled={isDisabled}\n          data-component=\"toggleRevealPassword\"\n          aria-label={tooltipText}\n        >\n          {icon}\n          <Tooltip>{tooltipText}</Tooltip>\n        </Button>\n      </TooltipTrigger>\n    </Action>\n  );\n};\n\nexport default TogglePasswordVisibilityButton;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAgBO,MAAM,iCAA4C,CAAC;AAAA,EACxD,SAAA;AAAA,EACA,UAAA,GAAa,KAAA;AAAA,EACb,OAAA;AAAA,EACA;AACF,CAAA,KAAM;AACJ,EAAA,MAAM,SAAA,GAAY,2BAAA;AAAA,IAChB,OAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,MAAM,OAAO,SAAA,mBAAY,GAAA,CAAC,QAAA,EAAA,EAAS,CAAA,uBAAM,QAAA,EAAA,EAAS,CAAA;AAClD,EAAA,MAAM,cAAc,SAAA,CAAU,MAAA;AAAA,IAC5B,0BAAA,IAA8B,YAAY,MAAA,GAAS,MAAA;AAAA,GACrD;AAEA,EAAA,uBACE,GAAA,CAAC,MAAA,EAAA,EAAO,QAAA,EAAU,OAAA,EAChB,8BAAC,cAAA,EAAA,EACC,QAAA,kBAAA,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,IAAA,EAAK,GAAA;AAAA,MACL,MAAA,EAAQ,IAAA;AAAA,MACR,OAAA,EAAQ,OAAA;AAAA,MACR,KAAA,EAAM,WAAA;AAAA,MACN,UAAA;AAAA,MACA,gBAAA,EAAe,sBAAA;AAAA,MACf,YAAA,EAAY,WAAA;AAAA,MAEX,QAAA,EAAA;AAAA,QAAA,IAAA;AAAA,wBACD,GAAA,CAAC,WAAS,QAAA,EAAA,WAAA,EAAY;AAAA;AAAA;AAAA,KAE1B,CAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/js/packages/components/src/components/RadioGroup/RadioGroup.mjs

@@ -1,18 +1,18 @@
 "use client"
 /* */
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import styles from './RadioGroup.module.scss.mjs';
 import * as Aria from 'react-aria-components';
 import clsx from 'clsx';
 import '../../lib/propsContext/propsContext.mjs';
 import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
 import { ColumnLayout } from '../ColumnLayout/ColumnLayout.mjs';
-import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
 import formFieldStyles from '../FormField/FormField.module.scss.mjs';
 import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
 import { useObjectRef } from '@react-aria/utils';
 import { useMakeFocusable } from '../../lib/hooks/dom/useMakeFocusable.mjs';
 import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
+import { UiComponentTunnelExit } from '../UiComponentTunnel/UiComponentTunnelExit.mjs';
 
 const RadioGroup = flowComponent("RadioGroup", (props) => {
   const { children, className, s, m, l, ref, ...rest } = props;
@@ -21,28 +21,34 @@ const RadioGroup = flowComponent("RadioGroup", (props) => {
     FieldErrorCaptureContext,
     fieldProps,
     fieldPropsContext
-  } = useFieldComponent(props);
+  } = useFieldComponent(props, "RadioGroup");
   const rootClassName = clsx(formFieldStyles.formField, className);
   const propsContext = {
     RadioButton: {
-      tunnelId: "radioButtons"
+      tunnel: {
+        id: "radioButtons",
+        component: "RadioGroup"
+      }
     },
     Radio: {
-      tunnelId: "radios"
+      tunnel: {
+        id: "radios",
+        component: "RadioGroup"
+      }
     },
     ...fieldPropsContext
   };
   const localRadioRef = useObjectRef(ref);
   useMakeFocusable(localRadioRef);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     Aria.RadioGroup,
     {
       ...rest,
       className: clsx(rootClassName, fieldProps.className),
       ref: localRadioRef,
-      children: /* @__PURE__ */ jsxs(TunnelProvider, { children: [
+      children: [
         /* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsxs(PropsContextProvider, { props: propsContext, children: [
-          /* @__PURE__ */ jsx(ColumnLayout, { s, m, l, className: styles.radioGroup, children: /* @__PURE__ */ jsx(TunnelExit, { id: "radioButtons" }) }),
+          /* @__PURE__ */ jsx(ColumnLayout, { s, m, l, className: styles.radioGroup, children: /* @__PURE__ */ jsx(UiComponentTunnelExit, { id: "radioButtons", component: "RadioGroup" }) }),
           /* @__PURE__ */ jsx(
             ColumnLayout,
             {
@@ -51,13 +57,13 @@ const RadioGroup = flowComponent("RadioGroup", (props) => {
               l: l ?? [1],
               rowGap: "s",
               className: styles.radioGroup,
-              children: /* @__PURE__ */ jsx(TunnelExit, { id: "radios" })
+              children: /* @__PURE__ */ jsx(UiComponentTunnelExit, { id: "radios", component: "RadioGroup" })
             }
           ),
           children
         ] }) }),
         /* @__PURE__ */ jsx(FieldErrorView, {})
-      ] })
+      ]
     }
   );
 });