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

package/dist/js/packages/components/src/components/List/components/Header/components/AllFiltersModal/ViewModeAccordion.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ViewModeAccordion.mjs","sources":["../../../../../../../../../../../src/components/List/components/Header/components/AllFiltersModal/ViewModeAccordion.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport AccordionView from \"@/views/AccordionView\";\nimport HeadingView from \"@/views/HeadingView\";\nimport ContentView from \"@/views/ContentView\";\nimport RadioGroupView from \"@/views/RadioGroupView\";\nimport RadioView from \"@/views/RadioView\";\nimport { useAvailableViewModes } from \"@/components/List/components/Header/lib\";\nimport { useList } from \"@/components/List\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../../../locales/*.locale.json\";\n\nexport const ViewModeAccordion: FC = () => {\n  const list = useList();\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n  const availableViewModes = useAvailableViewModes();\n  const selectedViewMode = list.viewMode.value;\n\n  return (\n    <AccordionView>\n      <HeadingView>{stringFormatter.format(\"settings.viewMode\")}</HeadingView>\n      <ContentView>\n        <RadioGroupView value={selectedViewMode} m={[1, 1]}>\n          {availableViewModes.map((v) => (\n            <RadioView key={v} value={v} onPress={() => list.viewMode.set(v)}>\n              {stringFormatter.format(`settings.viewMode.${v}`)}\n            </RadioView>\n          ))}\n        </RadioGroupView>\n      </ContentView>\n    </AccordionView>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAM,oBAAwB,MAAM;AACzC,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,MAAM,CAAA;AAEnE,EAAA,MAAM,qBAAqB,qBAAA,EAAsB;AACjD,EAAA,MAAM,gBAAA,GAAmB,KAAK,QAAA,CAAS,KAAA;AAEvC,EAAA,4BACG,aAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,WAAA,EAAA,EAAa,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,mBAAmB,CAAA,EAAE,CAAA;AAAA,oBAC1D,GAAA,CAAC,WAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,OAAO,gBAAA,EAAkB,CAAA,EAAG,CAAC,CAAA,EAAG,CAAC,CAAA,EAC9C,QAAA,EAAA,kBAAA,CAAmB,GAAA,CAAI,CAAC,sBACvB,GAAA,CAAC,SAAA,EAAA,EAAkB,KAAA,EAAO,CAAA,EAAG,SAAS,MAAM,IAAA,CAAK,QAAA,CAAS,GAAA,CAAI,CAAC,CAAA,EAC5D,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,CAAA,kBAAA,EAAqB,CAAC,CAAA,CAAE,CAAA,EAAA,EADlC,CAEhB,CACD,GACH,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ViewModeAccordion.mjs","sources":["../../../../../../../../../../../src/components/List/components/Header/components/AllFiltersModal/ViewModeAccordion.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport AccordionView from \"@/views/AccordionView\";\nimport HeadingView from \"@/views/HeadingView\";\nimport ContentView from \"@/views/ContentView\";\nimport RadioGroupView from \"@/views/RadioGroupView\";\nimport RadioView from \"@/views/RadioView\";\nimport { useAvailableViewModes } from \"@/components/List/components/Header/lib\";\nimport { useList } from \"@/components/List\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../../../locales/*.locale.json\";\n\nexport const ViewModeAccordion: FC = () => {\n  const list = useList();\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n  const availableViewModes = useAvailableViewModes();\n  const selectedViewMode = list.viewMode.value;\n\n  return (\n    <AccordionView>\n      <HeadingView>{stringFormatter.format(\"settings.viewMode\")}</HeadingView>\n      <ContentView>\n        <RadioGroupView value={selectedViewMode} m={[1, 1]}>\n          {availableViewModes.map((v) => (\n            <RadioView key={v} value={v} onPress={() => list.viewMode.set(v)}>\n              {stringFormatter.format(`settings.viewMode.${v}`)}\n            </RadioView>\n          ))}\n        </RadioGroupView>\n      </ContentView>\n    </AccordionView>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAM,oBAAwB,MAAM;AACzC,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,MAAM,CAAA;AAEnE,EAAA,MAAM,qBAAqB,qBAAA,EAAsB;AACjD,EAAA,MAAM,gBAAA,GAAmB,KAAK,QAAA,CAAS,KAAA;AAEvC,EAAA,4BACG,aAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,WAAA,EAAA,EAAa,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,mBAAmB,CAAA,EAAE,CAAA;AAAA,oBAC1D,GAAA,CAAC,WAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,OAAO,gBAAA,EAAkB,CAAA,EAAG,CAAC,CAAA,EAAG,CAAC,CAAA,EAC9C,QAAA,EAAA,kBAAA,CAAmB,GAAA,CAAI,CAAC,sBACvB,GAAA,CAAC,SAAA,EAAA,EAAkB,KAAA,EAAO,CAAA,EAAG,SAAS,MAAM,IAAA,CAAK,QAAA,CAAS,GAAA,CAAI,CAAC,CAAA,EAC5D,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,CAAA,kBAAA,EAAqB,CAAC,CAAA,CAAE,CAAA,EAAA,EADlC,CAEhB,CACD,GACH,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/js/packages/components/src/components/List/components/Header/components/FilterContextMenu/FilterContextMenus.mjs

@@ -4,28 +4,25 @@ import { jsx } from 'react/jsx-runtime';
 import 'invariant';
 import 'react-aria-components';
 import '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/Header/components/FilterContextMenu/FilterContextMenus.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FilterContextMenus.mjs","sources":["../../../../../../../../../../../src/components/List/components/Header/components/FilterContextMenu/FilterContextMenus.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useList } from \"@/components/List\";\nimport { FilterContextMenu } from \"@/components/List/components/Header/components/FilterContextMenu/FilterContextMenu\";\nimport { DateRangeFilterPopover } from \"@/components/List/components/Header/components/FilterContextMenu/DateRangeFilterPopover\";\nimport { DateRangeFilter } from \"@/components/List/model/filter/DateRangeFilter\";\n\ninterface Props {\n  isDisabled?: boolean;\n}\n\nexport const FilterContextMenus: FC<Props> = (props) => {\n  const { isDisabled } = props;\n  const list = useList();\n\n  return list.filters\n    .filter((f) => f.priority === \"primary\")\n    .map((filter) =>\n      filter instanceof DateRangeFilter ? (\n        <DateRangeFilterPopover\n          key={filter.property}\n          filter={filter}\n          isDisabled={isDisabled}\n        />\n      ) : (\n        <FilterContextMenu\n          key={filter.property}\n          filter={filter}\n          isDisabled={isDisabled}\n        />\n      ),\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUO,MAAM,kBAAA,GAAgC,CAAC,KAAA,KAAU;AACtD,EAAA,MAAM,EAAE,YAAW,GAAI,KAAA;AACvB,EAAA,MAAM,OAAO,OAAA,EAAQ;AAErB,EAAA,OAAO,IAAA,CAAK,QACT,MAAA,CAAO,CAAC,MAAM,CAAA,CAAE,QAAA,KAAa,SAAS,CAAA,CACtC,GAAA;AAAA,IAAI,CAAC,MAAA,KACJ,MAAA,YAAkB,eAAA,mBAChB,GAAA;AAAA,MAAC,sBAAA;AAAA,MAAA;AAAA,QAEC,MAAA;AAAA,QACA;AAAA,OAAA;AAAA,MAFK,MAAA,CAAO;AAAA,KAGd,mBAEA,GAAA;AAAA,MAAC,iBAAA;AAAA,MAAA;AAAA,QAEC,MAAA;AAAA,QACA;AAAA,OAAA;AAAA,MAFK,MAAA,CAAO;AAAA;AAGd,GAEJ;AACJ;;;;"}
+{"version":3,"file":"FilterContextMenus.mjs","sources":["../../../../../../../../../../../src/components/List/components/Header/components/FilterContextMenu/FilterContextMenus.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useList } from \"@/components/List\";\nimport { FilterContextMenu } from \"@/components/List/components/Header/components/FilterContextMenu/FilterContextMenu\";\nimport { DateRangeFilterPopover } from \"@/components/List/components/Header/components/FilterContextMenu/DateRangeFilterPopover\";\nimport { DateRangeFilter } from \"@/components/List/model/filter/DateRangeFilter\";\n\ninterface Props {\n  isDisabled?: boolean;\n}\n\nexport const FilterContextMenus: FC<Props> = (props) => {\n  const { isDisabled } = props;\n  const list = useList();\n\n  return list.filters\n    .filter((f) => f.priority === \"primary\")\n    .map((filter) =>\n      filter instanceof DateRangeFilter ? (\n        <DateRangeFilterPopover\n          key={filter.property}\n          filter={filter}\n          isDisabled={isDisabled}\n        />\n      ) : (\n        <FilterContextMenu\n          key={filter.property}\n          filter={filter}\n          isDisabled={isDisabled}\n        />\n      ),\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUO,MAAM,kBAAA,GAAgC,CAAC,KAAA,KAAU;AACtD,EAAA,MAAM,EAAE,YAAW,GAAI,KAAA;AACvB,EAAA,MAAM,OAAO,OAAA,EAAQ;AAErB,EAAA,OAAO,IAAA,CAAK,QACT,MAAA,CAAO,CAAC,MAAM,CAAA,CAAE,QAAA,KAAa,SAAS,CAAA,CACtC,GAAA;AAAA,IAAI,CAAC,MAAA,KACJ,MAAA,YAAkB,eAAA,mBAChB,GAAA;AAAA,MAAC,sBAAA;AAAA,MAAA;AAAA,QAEC,MAAA;AAAA,QACA;AAAA,OAAA;AAAA,MAFK,MAAA,CAAO;AAAA,KAGd,mBAEA,GAAA;AAAA,MAAC,iBAAA;AAAA,MAAA;AAAA,QAEC,MAAA;AAAA,QACA;AAAA,OAAA;AAAA,MAFK,MAAA,CAAO;AAAA;AAGd,GAEJ;AACJ;;;;"}

package/dist/js/packages/components/src/components/List/components/Header/components/SortingContextMenu/SortingMenuItem.mjs

@@ -6,27 +6,24 @@ import MenuItemView from '../../../../../../views/MenuItemView.mjs';
 import 'invariant';
 import 'react-aria-components';
 import '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 'react-aria';
+import '../../../../../ColumnLayout/ColumnLayout.mjs';
+import '../../../ListSummary/ListSummary.mjs';
+import '../../../../../../views/DivView.mjs';
 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/Header/components/SortingContextMenu/SortingMenuItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SortingMenuItem.mjs","sources":["../../../../../../../../../../../src/components/List/components/Header/components/SortingContextMenu/SortingMenuItem.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport type { Sorting } from \"@/components/List/model/sorting/Sorting\";\nimport MenuItemView from \"@/views/MenuItemView\";\nimport { useList } from \"@/components/List\";\n\ninterface Props {\n  sorting: Sorting<never>;\n}\n\nexport const SortingMenuItem: FC<Props> = (props) => {\n  const { sorting } = props;\n\n  const list = useList();\n\n  return (\n    <MenuItemView\n      id={sorting.id}\n      onAction={() => {\n        list.getSorting(sorting.id).enable();\n      }}\n    >\n      {`${sorting.name ?? sorting.property} ${sorting.directionName ?? \"\"}`.trim()}\n    </MenuItemView>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUO,MAAM,eAAA,GAA6B,CAAC,KAAA,KAAU;AACnD,EAAA,MAAM,EAAE,SAAQ,GAAI,KAAA;AAEpB,EAAA,MAAM,OAAO,OAAA,EAAQ;AAErB,EAAA,uBACE,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,IAAI,OAAA,CAAQ,EAAA;AAAA,MACZ,UAAU,MAAM;AACd,QAAA,IAAA,CAAK,UAAA,CAAW,OAAA,CAAQ,EAAE,CAAA,CAAE,MAAA,EAAO;AAAA,MACrC,CAAA;AAAA,MAEC,QAAA,EAAA,CAAA,EAAG,OAAA,CAAQ,IAAA,IAAQ,OAAA,CAAQ,QAAQ,IAAI,OAAA,CAAQ,aAAA,IAAiB,EAAE,CAAA,CAAA,CAAG,IAAA;AAAK;AAAA,GAC7E;AAEJ;;;;"}
+{"version":3,"file":"SortingMenuItem.mjs","sources":["../../../../../../../../../../../src/components/List/components/Header/components/SortingContextMenu/SortingMenuItem.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport type { Sorting } from \"@/components/List/model/sorting/Sorting\";\nimport MenuItemView from \"@/views/MenuItemView\";\nimport { useList } from \"@/components/List\";\n\ninterface Props {\n  sorting: Sorting<never>;\n}\n\nexport const SortingMenuItem: FC<Props> = (props) => {\n  const { sorting } = props;\n\n  const list = useList();\n\n  return (\n    <MenuItemView\n      id={sorting.id}\n      onAction={() => {\n        list.getSorting(sorting.id).enable();\n      }}\n    >\n      {`${sorting.name ?? sorting.property} ${sorting.directionName ?? \"\"}`.trim()}\n    </MenuItemView>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUO,MAAM,eAAA,GAA6B,CAAC,KAAA,KAAU;AACnD,EAAA,MAAM,EAAE,SAAQ,GAAI,KAAA;AAEpB,EAAA,MAAM,OAAO,OAAA,EAAQ;AAErB,EAAA,uBACE,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,IAAI,OAAA,CAAQ,EAAA;AAAA,MACZ,UAAU,MAAM;AACd,QAAA,IAAA,CAAK,UAAA,CAAW,OAAA,CAAQ,EAAE,CAAA,CAAE,MAAA,EAAO;AAAA,MACrC,CAAA;AAAA,MAEC,QAAA,EAAA,CAAA,EAAG,OAAA,CAAQ,IAAA,IAAQ,OAAA,CAAQ,QAAQ,IAAI,OAAA,CAAQ,aAAA,IAAiB,EAAE,CAAA,CAAA,CAAG,IAAA;AAAK;AAAA,GAC7E;AAEJ;;;;"}

package/dist/js/packages/components/src/components/List/components/Header/components/ViewModeContextMenu/ViewModeContextMenu.mjs

@@ -6,21 +6,18 @@ import { useLocalizedStringFormatter } from '../../../../../TranslationProvider/
 import 'invariant';
 import 'react-aria-components';
 import '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 '../../../../../ColumnLayout/ColumnLayout.mjs';
+import '../../../ListSummary/ListSummary.mjs';
+import '../../../../../../views/DivView.mjs';
 import 'react';
 import '@mittwald/flow-icons';
 import '../../../../../Icon/components/IconSetProvider.mjs';
 import '../../../../../Icon/Icon.mjs';
 import '../../../../../../views/IconView.mjs';
 import { IconView } from '../../../../../Icon/components/icons/IconView.mjs';
-import ButtonView from '../../../../../../views/ButtonView.mjs';
-import ContextMenuTriggerView from '../../../../../../views/ContextMenuTriggerView.mjs';
-import '../../../../../ColumnLayout/ColumnLayout.mjs';
-import '../../../ListSummary/ListSummary.mjs';
-import '../../../../../../views/DivView.mjs';
 import '../../../../../../views/IllustratedMessageView.mjs';
 import '../../../../../../views/HeadingView.mjs';
 import TextView from '../../../../../../views/TextView.mjs';
@@ -32,9 +29,11 @@ import { useList } from '../../../../hooks/useList.mjs';
 import '../../../../listContext.mjs';
 import 'mobx';
 import '../../../../List.mjs';
+import ButtonView from '../../../../../../views/ButtonView.mjs';
 import { ViewModeMenuItem } from './ViewModeMenuItem.mjs';
 import { useAvailableViewModes } from '../../lib.mjs';
 import headerStyles from '../../Header.module.css.mjs';
+import ContextMenuTriggerView from '../../../../../../views/ContextMenuTriggerView.mjs';
 import ContextMenuView from '../../../../../../views/ContextMenuView.mjs';
 
 const ViewModeContextMenu = (props) => {

package/dist/js/packages/components/src/components/List/components/Header/components/ViewModeContextMenu/ViewModeContextMenu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ViewModeContextMenu.mjs","sources":["../../../../../../../../../../../src/components/List/components/Header/components/ViewModeContextMenu/ViewModeContextMenu.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { useList } from \"@/components/List\";\nimport { IconView } from \"@/components/Icon/components/icons\";\nimport ButtonView from \"@/views/ButtonView\";\nimport TextView from \"@/views/TextView\";\nimport { ViewModeMenuItem } from \"@/components/List/components/Header/components/ViewModeContextMenu/ViewModeMenuItem\";\nimport { useAvailableViewModes } from \"@/components/List/components/Header/lib\";\nimport styles from \"@/components/List/components/Header/Header.module.css\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\nimport ContextMenuView from \"@/views/ContextMenuView\";\n\ninterface Props {\n  isDisabled?: boolean;\n}\n\nexport const ViewModeContextMenu: FC<Props> = (props) => {\n  const { isDisabled } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n  const list = useList();\n  const selectedViewMode = list.viewMode.value;\n\n  const availableViewModes = useAvailableViewModes();\n\n  if (availableViewModes.length <= 1) {\n    return null;\n  }\n\n  return (\n    <ContextMenuTriggerView>\n      <ButtonView\n        variant=\"outline\"\n        color=\"secondary\"\n        aria-label={stringFormatter.format(\"settings\")}\n        className={styles.hideOnMobile}\n        isDisabled={isDisabled}\n      >\n        <TextView>\n          {stringFormatter.format(`settings.viewMode.${selectedViewMode}`)}\n        </TextView>\n        <IconView />\n      </ButtonView>\n      <ContextMenuView selectionMode=\"single\" selectedKeys={[selectedViewMode]}>\n        {availableViewModes.map((viewMode) => (\n          <ViewModeMenuItem viewMode={viewMode} key={viewMode} />\n        ))}\n      </ContextMenuView>\n    </ContextMenuTriggerView>\n  );\n};\n"],"names":["styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBO,MAAM,mBAAA,GAAiC,CAAC,KAAA,KAAU;AACvD,EAAA,MAAM,EAAE,YAAW,GAAI,KAAA;AAEvB,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,MAAM,CAAA;AACnE,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,gBAAA,GAAmB,KAAK,QAAA,CAAS,KAAA;AAEvC,EAAA,MAAM,qBAAqB,qBAAA,EAAsB;AAEjD,EAAA,IAAI,kBAAA,CAAmB,UAAU,CAAA,EAAG;AAClC,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,4BACG,sBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,SAAA;AAAA,QACR,KAAA,EAAM,WAAA;AAAA,QACN,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,UAAU,CAAA;AAAA,QAC7C,WAAWA,YAAA,CAAO,YAAA;AAAA,QAClB,UAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,YACE,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,CAAA,kBAAA,EAAqB,gBAAgB,EAAE,CAAA,EACjE,CAAA;AAAA,8BACC,QAAA,EAAA,EAAS;AAAA;AAAA;AAAA,KACZ;AAAA,wBACC,eAAA,EAAA,EAAgB,aAAA,EAAc,QAAA,EAAS,YAAA,EAAc,CAAC,gBAAgB,CAAA,EACpE,QAAA,EAAA,kBAAA,CAAmB,GAAA,CAAI,CAAC,QAAA,qBACvB,GAAA,CAAC,oBAAiB,QAAA,EAAA,EAAyB,QAAU,CACtD,CAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ViewModeContextMenu.mjs","sources":["../../../../../../../../../../../src/components/List/components/Header/components/ViewModeContextMenu/ViewModeContextMenu.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { useList } from \"@/components/List\";\nimport { IconView } from \"@/components/Icon/components/icons\";\nimport ButtonView from \"@/views/ButtonView\";\nimport TextView from \"@/views/TextView\";\nimport { ViewModeMenuItem } from \"@/components/List/components/Header/components/ViewModeContextMenu/ViewModeMenuItem\";\nimport { useAvailableViewModes } from \"@/components/List/components/Header/lib\";\nimport styles from \"@/components/List/components/Header/Header.module.css\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\nimport ContextMenuView from \"@/views/ContextMenuView\";\n\ninterface Props {\n  isDisabled?: boolean;\n}\n\nexport const ViewModeContextMenu: FC<Props> = (props) => {\n  const { isDisabled } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n  const list = useList();\n  const selectedViewMode = list.viewMode.value;\n\n  const availableViewModes = useAvailableViewModes();\n\n  if (availableViewModes.length <= 1) {\n    return null;\n  }\n\n  return (\n    <ContextMenuTriggerView>\n      <ButtonView\n        variant=\"outline\"\n        color=\"secondary\"\n        aria-label={stringFormatter.format(\"settings\")}\n        className={styles.hideOnMobile}\n        isDisabled={isDisabled}\n      >\n        <TextView>\n          {stringFormatter.format(`settings.viewMode.${selectedViewMode}`)}\n        </TextView>\n        <IconView />\n      </ButtonView>\n      <ContextMenuView selectionMode=\"single\" selectedKeys={[selectedViewMode]}>\n        {availableViewModes.map((viewMode) => (\n          <ViewModeMenuItem viewMode={viewMode} key={viewMode} />\n        ))}\n      </ContextMenuView>\n    </ContextMenuTriggerView>\n  );\n};\n"],"names":["styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBO,MAAM,mBAAA,GAAiC,CAAC,KAAA,KAAU;AACvD,EAAA,MAAM,EAAE,YAAW,GAAI,KAAA;AAEvB,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,MAAM,CAAA;AACnE,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,gBAAA,GAAmB,KAAK,QAAA,CAAS,KAAA;AAEvC,EAAA,MAAM,qBAAqB,qBAAA,EAAsB;AAEjD,EAAA,IAAI,kBAAA,CAAmB,UAAU,CAAA,EAAG;AAClC,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,4BACG,sBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,SAAA;AAAA,QACR,KAAA,EAAM,WAAA;AAAA,QACN,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,UAAU,CAAA;AAAA,QAC7C,WAAWA,YAAA,CAAO,YAAA;AAAA,QAClB,UAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,YACE,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,CAAA,kBAAA,EAAqB,gBAAgB,EAAE,CAAA,EACjE,CAAA;AAAA,8BACC,QAAA,EAAA,EAAS;AAAA;AAAA;AAAA,KACZ;AAAA,wBACC,eAAA,EAAA,EAAgB,aAAA,EAAc,QAAA,EAAS,YAAA,EAAc,CAAC,gBAAgB,CAAA,EACpE,QAAA,EAAA,kBAAA,CAAmB,GAAA,CAAI,CAAC,QAAA,qBACvB,GAAA,CAAC,oBAAiB,QAAA,EAAA,EAAyB,QAAU,CACtD,CAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/js/packages/components/src/components/List/components/Header/components/ViewModeContextMenu/ViewModeMenuItem.mjs

@@ -6,25 +6,22 @@ import MenuItemView from '../../../../../../views/MenuItemView.mjs';
 import 'invariant';
 import 'react-aria-components';
 import '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 locales from '../../../../../../../../../_virtual/_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs';
-import { useLocalizedStringFormatter } from '../../../../../TranslationProvider/useLocalizedStringFormatter.mjs';
+import '../../../../../ColumnLayout/ColumnLayout.mjs';
+import '../../../ListSummary/ListSummary.mjs';
+import '../../../../../../views/DivView.mjs';
 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 locales from '../../../../../../../../../_virtual/_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs';
 import '../../../../../../views/IllustratedMessageView.mjs';
 import '../../../../../../views/HeadingView.mjs';
 import '../../../../../../views/TextView.mjs';
 import '../../../../../TranslationProvider/TranslationProvider.mjs';
+import { useLocalizedStringFormatter } from '../../../../../TranslationProvider/useLocalizedStringFormatter.mjs';
 import '../../../../../IllustratedMessage/IllustratedMessage.mjs';
 import '../../../../../Heading/Heading.mjs';
 import '../../../../../Text/Text.mjs';

package/dist/js/packages/components/src/components/List/components/Header/components/ViewModeContextMenu/ViewModeMenuItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ViewModeMenuItem.mjs","sources":["../../../../../../../../../../../src/components/List/components/Header/components/ViewModeContextMenu/ViewModeMenuItem.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport MenuItemView from \"@/views/MenuItemView\";\nimport type { ListViewMode } from \"@/components/List/model/types\";\nimport { useList } from \"@/components/List\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../../../locales/*.locale.json\";\n\ninterface Props {\n  viewMode: ListViewMode;\n}\n\nexport const ViewModeMenuItem: FC<Props> = (props) => {\n  const { viewMode } = props;\n  const list = useList();\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n  return (\n    <MenuItemView\n      id={viewMode}\n      onAction={() => {\n        list.viewMode.set(viewMode);\n      }}\n    >\n      {stringFormatter.format(`settings.viewMode.${viewMode}`)}\n    </MenuItemView>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAM,gBAAA,GAA8B,CAAC,KAAA,KAAU;AACpD,EAAA,MAAM,EAAE,UAAS,GAAI,KAAA;AACrB,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,MAAM,CAAA;AAEnE,EAAA,uBACE,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAI,QAAA;AAAA,MACJ,UAAU,MAAM;AACd,QAAA,IAAA,CAAK,QAAA,CAAS,IAAI,QAAQ,CAAA;AAAA,MAC5B,CAAA;AAAA,MAEC,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,CAAA,kBAAA,EAAqB,QAAQ,CAAA,CAAE;AAAA;AAAA,GACzD;AAEJ;;;;"}
+{"version":3,"file":"ViewModeMenuItem.mjs","sources":["../../../../../../../../../../../src/components/List/components/Header/components/ViewModeContextMenu/ViewModeMenuItem.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport MenuItemView from \"@/views/MenuItemView\";\nimport type { ListViewMode } from \"@/components/List/model/types\";\nimport { useList } from \"@/components/List\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../../../locales/*.locale.json\";\n\ninterface Props {\n  viewMode: ListViewMode;\n}\n\nexport const ViewModeMenuItem: FC<Props> = (props) => {\n  const { viewMode } = props;\n  const list = useList();\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n  return (\n    <MenuItemView\n      id={viewMode}\n      onAction={() => {\n        list.viewMode.set(viewMode);\n      }}\n    >\n      {stringFormatter.format(`settings.viewMode.${viewMode}`)}\n    </MenuItemView>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAM,gBAAA,GAA8B,CAAC,KAAA,KAAU;AACpD,EAAA,MAAM,EAAE,UAAS,GAAI,KAAA;AACrB,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,MAAM,CAAA;AAEnE,EAAA,uBACE,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAI,QAAA;AAAA,MACJ,UAAU,MAAM;AACd,QAAA,IAAA,CAAK,QAAA,CAAS,IAAI,QAAQ,CAAA;AAAA,MAC5B,CAAA;AAAA,MAEC,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,CAAA,kBAAA,EAAqB,QAAQ,CAAA,CAAE;AAAA;AAAA,GACzD;AAEJ;;;;"}

package/dist/js/packages/components/src/components/List/components/Header/lib.mjs

@@ -4,28 +4,25 @@ import 'invariant';
 import 'react/jsx-runtime';
 import 'react-aria-components';
 import '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/Header/lib.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lib.mjs","sources":["../../../../../../../../../src/components/List/components/Header/lib.ts"],"sourcesContent":["import type { ListViewMode } from \"@/components/List/model/types\";\nimport { useList } from \"@/components/List\";\n\nexport const useAvailableViewModes = () => {\n  const list = useList();\n\n  const availableViewModes: ListViewMode[] = [];\n\n  if (list.itemView?.showList) {\n    availableViewModes.push(\"list\");\n  }\n  if (list.table) {\n    availableViewModes.push(\"table\");\n  }\n  if (list.itemView?.showTiles) {\n    availableViewModes.push(\"tiles\");\n  }\n\n  return availableViewModes;\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGO,MAAM,wBAAwB,MAAM;AACzC,EAAA,MAAM,OAAO,OAAA,EAAQ;AAErB,EAAA,MAAM,qBAAqC,EAAC;AAE5C,EAAA,IAAI,IAAA,CAAK,UAAU,QAAA,EAAU;AAC3B,IAAA,kBAAA,CAAmB,KAAK,MAAM,CAAA;AAAA,EAChC;AACA,EAAA,IAAI,KAAK,KAAA,EAAO;AACd,IAAA,kBAAA,CAAmB,KAAK,OAAO,CAAA;AAAA,EACjC;AACA,EAAA,IAAI,IAAA,CAAK,UAAU,SAAA,EAAW;AAC5B,IAAA,kBAAA,CAAmB,KAAK,OAAO,CAAA;AAAA,EACjC;AAEA,EAAA,OAAO,kBAAA;AACT;;;;"}
+{"version":3,"file":"lib.mjs","sources":["../../../../../../../../../src/components/List/components/Header/lib.ts"],"sourcesContent":["import type { ListViewMode } from \"@/components/List/model/types\";\nimport { useList } from \"@/components/List\";\n\nexport const useAvailableViewModes = () => {\n  const list = useList();\n\n  const availableViewModes: ListViewMode[] = [];\n\n  if (list.itemView?.showList) {\n    availableViewModes.push(\"list\");\n  }\n  if (list.table) {\n    availableViewModes.push(\"table\");\n  }\n  if (list.itemView?.showTiles) {\n    availableViewModes.push(\"tiles\");\n  }\n\n  return availableViewModes;\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGO,MAAM,wBAAwB,MAAM;AACzC,EAAA,MAAM,OAAO,OAAA,EAAQ;AAErB,EAAA,MAAM,qBAAqC,EAAC;AAE5C,EAAA,IAAI,IAAA,CAAK,UAAU,QAAA,EAAU;AAC3B,IAAA,kBAAA,CAAmB,KAAK,MAAM,CAAA;AAAA,EAChC;AACA,EAAA,IAAI,KAAK,KAAA,EAAO;AACd,IAAA,kBAAA,CAAmB,KAAK,OAAO,CAAA;AAAA,EACjC;AACA,EAAA,IAAI,IAAA,CAAK,UAAU,SAAA,EAAW;AAC5B,IAAA,kBAAA,CAAmB,KAAK,OAAO,CAAA;AAAA,EACjC;AAEA,EAAA,OAAO,kBAAA;AACT;;;;"}

package/dist/js/packages/components/src/components/List/components/Items/components/Item/components/AccordionButton.mjs

@@ -21,7 +21,10 @@ const AccordionButton = (props) => {
       ButtonView,
       {
         className: styles.action,
-        tunnelId: "button",
+        tunnel: {
+          id: "button",
+          component: "Accordion"
+        },
         variant: "plain",
         color: "secondary",
         onPress: toggle,

package/dist/js/packages/components/src/components/List/components/Items/components/Item/components/AccordionButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionButton.mjs","sources":["../../../../../../../../../../../../src/components/List/components/Items/components/Item/components/AccordionButton.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport {\n  IconChevronDown,\n  IconChevronUp,\n} from \"@/components/Icon/components/icons\";\nimport locales from \"../../../../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport ButtonView from \"@/views/ButtonView\";\nimport styles from \"../../../../ListItemView/ListItemView.module.scss\";\n\ninterface Props extends PropsWithChildren {\n  isExpanded: boolean;\n  toggle: () => void;\n  contentElementId: string;\n}\n\nexport const AccordionButton: FC<Props> = (props) => {\n  const { isExpanded, toggle, children, contentElementId } = props;\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n  return (\n    <>\n      <ButtonView\n        className={styles.action}\n        tunnelId=\"button\"\n        variant=\"plain\"\n        color=\"secondary\"\n        onPress={toggle}\n        aria-label={stringFormatter.format(\n          \"toggleExpandButton.\" + (isExpanded ? \"collapse\" : \"expand\"),\n        )}\n        aria-controls={contentElementId}\n        aria-expanded={isExpanded}\n      >\n        {isExpanded ? <IconChevronUp /> : <IconChevronDown />}\n      </ButtonView>\n      {isExpanded && children}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AAgBO,MAAM,eAAA,GAA6B,CAAC,KAAA,KAAU;AACnD,EAAA,MAAM,EAAE,UAAA,EAAY,MAAA,EAAQ,QAAA,EAAU,kBAAiB,GAAI,KAAA;AAC3D,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,MAAM,CAAA;AAEnE,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,WAAW,MAAA,CAAO,MAAA;AAAA,QAClB,QAAA,EAAS,QAAA;AAAA,QACT,OAAA,EAAQ,OAAA;AAAA,QACR,KAAA,EAAM,WAAA;AAAA,QACN,OAAA,EAAS,MAAA;AAAA,QACT,cAAY,eAAA,CAAgB,MAAA;AAAA,UAC1B,qBAAA,IAAyB,aAAa,UAAA,GAAa,QAAA;AAAA,SACrD;AAAA,QACA,eAAA,EAAe,gBAAA;AAAA,QACf,eAAA,EAAe,UAAA;AAAA,QAEd,QAAA,EAAA,UAAA,mBAAa,GAAA,CAAC,aAAA,EAAA,EAAc,CAAA,uBAAM,eAAA,EAAA,EAAgB;AAAA;AAAA,KACrD;AAAA,IACC,UAAA,IAAc;AAAA,GAAA,EACjB,CAAA;AAEJ;;;;"}
+{"version":3,"file":"AccordionButton.mjs","sources":["../../../../../../../../../../../../src/components/List/components/Items/components/Item/components/AccordionButton.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport {\n  IconChevronDown,\n  IconChevronUp,\n} from \"@/components/Icon/components/icons\";\nimport locales from \"../../../../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport ButtonView from \"@/views/ButtonView\";\nimport styles from \"../../../../ListItemView/ListItemView.module.scss\";\n\ninterface Props extends PropsWithChildren {\n  isExpanded: boolean;\n  toggle: () => void;\n  contentElementId: string;\n}\n\nexport const AccordionButton: FC<Props> = (props) => {\n  const { isExpanded, toggle, children, contentElementId } = props;\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n  return (\n    <>\n      <ButtonView\n        className={styles.action}\n        tunnel={{\n          id: \"button\",\n          component: \"Accordion\",\n        }}\n        variant=\"plain\"\n        color=\"secondary\"\n        onPress={toggle}\n        aria-label={stringFormatter.format(\n          \"toggleExpandButton.\" + (isExpanded ? \"collapse\" : \"expand\"),\n        )}\n        aria-controls={contentElementId}\n        aria-expanded={isExpanded}\n      >\n        {isExpanded ? <IconChevronUp /> : <IconChevronDown />}\n      </ButtonView>\n      {isExpanded && children}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AAgBO,MAAM,eAAA,GAA6B,CAAC,KAAA,KAAU;AACnD,EAAA,MAAM,EAAE,UAAA,EAAY,MAAA,EAAQ,QAAA,EAAU,kBAAiB,GAAI,KAAA;AAC3D,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,MAAM,CAAA;AAEnE,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,WAAW,MAAA,CAAO,MAAA;AAAA,QAClB,MAAA,EAAQ;AAAA,UACN,EAAA,EAAI,QAAA;AAAA,UACJ,SAAA,EAAW;AAAA,SACb;AAAA,QACA,OAAA,EAAQ,OAAA;AAAA,QACR,KAAA,EAAM,WAAA;AAAA,QACN,OAAA,EAAS,MAAA;AAAA,QACT,cAAY,eAAA,CAAgB,MAAA;AAAA,UAC1B,qBAAA,IAAyB,aAAa,UAAA,GAAa,QAAA;AAAA,SACrD;AAAA,QACA,eAAA,EAAe,gBAAA;AAAA,QACf,eAAA,EAAe,UAAA;AAAA,QAEd,QAAA,EAAA,UAAA,mBAAa,GAAA,CAAC,aAAA,EAAA,EAAc,CAAA,uBAAM,eAAA,EAAA,EAAgB;AAAA;AAAA,KACrD;AAAA,IACC,UAAA,IAAc;AAAA,GAAA,EACjB,CAAA;AAEJ;;;;"}

package/dist/js/packages/components/src/components/List/components/Items/components/Item/components/OptionsButton/OptionsButton.mjs

@@ -23,7 +23,7 @@ const OptionsButton = (props) => {
         color: "secondary",
         className,
         "aria-label": stringFormatter.format("options"),
-        tunnelId: null,
+        tunnel: null,
         children: /* @__PURE__ */ jsx(IconContextMenu, {})
       }
     ),

package/dist/js/packages/components/src/components/List/components/Items/components/Item/components/OptionsButton/OptionsButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"OptionsButton.mjs","sources":["../../../../../../../../../../../../../src/components/List/components/Items/components/Item/components/OptionsButton/OptionsButton.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport locales from \"../../../../../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { IconContextMenu } from \"@/components/Icon/components/icons\";\nimport ButtonView from \"@/views/ButtonView\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\n\ninterface Props extends PropsWithChildren, PropsWithClassName {}\n\nexport const OptionsButton: FC<Props> = (props) => {\n  const { className, children } = props;\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n  return (\n    <ContextMenuTriggerView>\n      <ButtonView\n        variant=\"plain\"\n        color=\"secondary\"\n        className={className}\n        aria-label={stringFormatter.format(\"options\")}\n        tunnelId={null}\n      >\n        <IconContextMenu />\n      </ButtonView>\n      {children}\n    </ContextMenuTriggerView>\n  );\n};\n\nexport default OptionsButton;\n"],"names":[],"mappings":";;;;;;;;;;;;AAUO,MAAM,aAAA,GAA2B,CAAC,KAAA,KAAU;AACjD,EAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAS,GAAI,KAAA;AAChC,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,MAAM,CAAA;AAEnE,EAAA,4BACG,sBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,OAAA;AAAA,QACR,KAAA,EAAM,WAAA;AAAA,QACN,SAAA;AAAA,QACA,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,SAAS,CAAA;AAAA,QAC5C,QAAA,EAAU,IAAA;AAAA,QAEV,8BAAC,eAAA,EAAA,EAAgB;AAAA;AAAA,KACnB;AAAA,IACC;AAAA,GAAA,EACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"OptionsButton.mjs","sources":["../../../../../../../../../../../../../src/components/List/components/Items/components/Item/components/OptionsButton/OptionsButton.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport locales from \"../../../../../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { IconContextMenu } from \"@/components/Icon/components/icons\";\nimport ButtonView from \"@/views/ButtonView\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\n\ninterface Props extends PropsWithChildren, PropsWithClassName {}\n\nexport const OptionsButton: FC<Props> = (props) => {\n  const { className, children } = props;\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n  return (\n    <ContextMenuTriggerView>\n      <ButtonView\n        variant=\"plain\"\n        color=\"secondary\"\n        className={className}\n        aria-label={stringFormatter.format(\"options\")}\n        tunnel={null}\n      >\n        <IconContextMenu />\n      </ButtonView>\n      {children}\n    </ContextMenuTriggerView>\n  );\n};\n\nexport default OptionsButton;\n"],"names":[],"mappings":";;;;;;;;;;;;AAUO,MAAM,aAAA,GAA2B,CAAC,KAAA,KAAU;AACjD,EAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAS,GAAI,KAAA;AAChC,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,MAAM,CAAA;AAEnE,EAAA,4BACG,sBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,OAAA;AAAA,QACR,KAAA,EAAM,WAAA;AAAA,QACN,SAAA;AAAA,QACA,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,SAAS,CAAA;AAAA,QAC5C,MAAA,EAAQ,IAAA;AAAA,QAER,8BAAC,eAAA,EAAA,EAAgB;AAAA;AAAA,KACnB;AAAA,IACC;AAAA,GAAA,EACH,CAAA;AAEJ;;;;"}

package/dist/js/packages/components/src/components/List/components/Items/components/Item/hooks/useGridItemProps.mjs

@@ -5,28 +5,25 @@ import { useState, useId, useRef, useEffect } from 'react';
 import 'invariant';
 import 'react-aria-components';
 import 'clsx';
-import '@mittwald/react-tunnel';
-import '../../../../../../../views/ListItemViewContentView.mjs';
+import '../../../../ListItemView/ListItemView.mjs';
 import { dynamic } from '../../../../../../../lib/propsContext/dynamicProps/dynamic.mjs';
 import '../../../../../../../lib/propsContext/propsContext.mjs';
 import { PropsContextProvider } from '../../../../../../../lib/propsContext/components/PropsContextProvider.mjs';
-import '../../../../../../TranslationProvider/TranslationProvider.mjs';
-import 'remeda';
-import 'intl-messageformat';
-import '@react-aria/i18n';
-import 'react-aria';
+import '../../../../../../ColumnLayout/ColumnLayout.mjs';
+import '../../../../ListSummary/ListSummary.mjs';
+import '../../../../../../../views/DivView.mjs';
 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/Items/components/Item/hooks/useGridItemProps.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useGridItemProps.mjs","sources":["../../../../../../../../../../../../src/components/List/components/Items/components/Item/hooks/useGridItemProps.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport { useList } from \"@/components/List\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport { AccordionButton } from \"@/components/List/components/Items/components/Item/components/AccordionButton\";\n\ninterface P extends PropsWithChildren {\n  data: never;\n}\n\nexport const useGridItemProps = (props: P) => {\n  const { data, children: childrenFromProps } = props;\n  const list = useList();\n  const itemView = list.itemView;\n  const onAction = list.onAction;\n\n  const [isExpanded, setIsExpanded] = useState(\n    itemView?.defaultExpanded?.(data) ?? false,\n  );\n  const contentElementId = useId();\n  const itemRef = useRef<HTMLDivElement>(null);\n\n  const accordion = list.accordion;\n  const children = childrenFromProps ?? itemView?.render(data);\n\n  useEffect(() => {\n    if (accordion) {\n      itemRef.current?.setAttribute(\"aria-expanded\", String(isExpanded));\n      itemRef.current?.setAttribute(\"aria-controls\", contentElementId);\n    }\n  }, [isExpanded, contentElementId, itemRef.current, accordion]);\n\n  if (!accordion) {\n    return {\n      gridItemProps: {\n        onAction: onAction\n          ? () => {\n              onAction?.(data);\n            }\n          : undefined,\n      },\n      children,\n    };\n  }\n\n  const toggleAccordion = () => {\n    setIsExpanded((current) => !current);\n    onAction?.(data);\n  };\n\n  const propsContext: PropsContext = {\n    Content: {\n      id: dynamic((p) => (p.slot === \"bottom\" ? contentElementId : undefined)),\n      wrapWith: dynamic((p) =>\n        p.slot === \"bottom\" ? (\n          <AccordionButton\n            contentElementId={contentElementId}\n            toggle={toggleAccordion}\n            isExpanded={isExpanded}\n          />\n        ) : undefined,\n      ),\n    },\n  };\n\n  return {\n    gridItemProps: {\n      ref: itemRef,\n      onAction: toggleAccordion,\n    },\n    children: (\n      <PropsContextProvider\n        props={propsContext}\n        dependencies={[contentElementId, isExpanded]}\n      >\n        {children}\n      </PropsContextProvider>\n    ),\n  };\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAM,gBAAA,GAAmB,CAAC,KAAA,KAAa;AAC5C,EAAA,MAAM,EAAE,IAAA,EAAM,QAAA,EAAU,iBAAA,EAAkB,GAAI,KAAA;AAC9C,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,WAAW,IAAA,CAAK,QAAA;AACtB,EAAA,MAAM,WAAW,IAAA,CAAK,QAAA;AAEtB,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,QAAA;AAAA,IAClC,QAAA,EAAU,eAAA,GAAkB,IAAI,CAAA,IAAK;AAAA,GACvC;AACA,EAAA,MAAM,mBAAmB,KAAA,EAAM;AAC/B,EAAA,MAAM,OAAA,GAAU,OAAuB,IAAI,CAAA;AAE3C,EAAA,MAAM,YAAY,IAAA,CAAK,SAAA;AACvB,EAAA,MAAM,QAAA,GAAW,iBAAA,IAAqB,QAAA,EAAU,MAAA,CAAO,IAAI,CAAA;AAE3D,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,SAAA,EAAW;AACb,MAAA,OAAA,CAAQ,OAAA,EAAS,YAAA,CAAa,eAAA,EAAiB,MAAA,CAAO,UAAU,CAAC,CAAA;AACjE,MAAA,OAAA,CAAQ,OAAA,EAAS,YAAA,CAAa,eAAA,EAAiB,gBAAgB,CAAA;AAAA,IACjE;AAAA,EACF,GAAG,CAAC,UAAA,EAAY,kBAAkB,OAAA,CAAQ,OAAA,EAAS,SAAS,CAAC,CAAA;AAE7D,EAAA,IAAI,CAAC,SAAA,EAAW;AACd,IAAA,OAAO;AAAA,MACL,aAAA,EAAe;AAAA,QACb,QAAA,EAAU,WACN,MAAM;AACJ,UAAA,QAAA,GAAW,IAAI,CAAA;AAAA,QACjB,CAAA,GACA;AAAA,OACN;AAAA,MACA;AAAA,KACF;AAAA,EACF;AAEA,EAAA,MAAM,kBAAkB,MAAM;AAC5B,IAAA,aAAA,CAAc,CAAC,OAAA,KAAY,CAAC,OAAO,CAAA;AACnC,IAAA,QAAA,GAAW,IAAI,CAAA;AAAA,EACjB,CAAA;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,OAAA,EAAS;AAAA,MACP,EAAA,EAAI,QAAQ,CAAC,CAAA,KAAO,EAAE,IAAA,KAAS,QAAA,GAAW,mBAAmB,MAAU,CAAA;AAAA,MACvE,QAAA,EAAU,OAAA;AAAA,QAAQ,CAAC,CAAA,KACjB,CAAA,CAAE,IAAA,KAAS,QAAA,mBACT,GAAA;AAAA,UAAC,eAAA;AAAA,UAAA;AAAA,YACC,gBAAA;AAAA,YACA,MAAA,EAAQ,eAAA;AAAA,YACR;AAAA;AAAA,SACF,GACE;AAAA;AACN;AACF,GACF;AAEA,EAAA,OAAO;AAAA,IACL,aAAA,EAAe;AAAA,MACb,GAAA,EAAK,OAAA;AAAA,MACL,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,QAAA,kBACE,GAAA;AAAA,MAAC,oBAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,YAAA;AAAA,QACP,YAAA,EAAc,CAAC,gBAAA,EAAkB,UAAU,CAAA;AAAA,QAE1C;AAAA;AAAA;AACH,GAEJ;AACF;;;;"}
+{"version":3,"file":"useGridItemProps.mjs","sources":["../../../../../../../../../../../../src/components/List/components/Items/components/Item/hooks/useGridItemProps.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport { useList } from \"@/components/List\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport { AccordionButton } from \"@/components/List/components/Items/components/Item/components/AccordionButton\";\n\ninterface P extends PropsWithChildren {\n  data: never;\n}\n\nexport const useGridItemProps = (props: P) => {\n  const { data, children: childrenFromProps } = props;\n  const list = useList();\n  const itemView = list.itemView;\n  const onAction = list.onAction;\n\n  const [isExpanded, setIsExpanded] = useState(\n    itemView?.defaultExpanded?.(data) ?? false,\n  );\n  const contentElementId = useId();\n  const itemRef = useRef<HTMLDivElement>(null);\n\n  const accordion = list.accordion;\n  const children = childrenFromProps ?? itemView?.render(data);\n\n  useEffect(() => {\n    if (accordion) {\n      itemRef.current?.setAttribute(\"aria-expanded\", String(isExpanded));\n      itemRef.current?.setAttribute(\"aria-controls\", contentElementId);\n    }\n  }, [isExpanded, contentElementId, itemRef.current, accordion]);\n\n  if (!accordion) {\n    return {\n      gridItemProps: {\n        onAction: onAction\n          ? () => {\n              onAction?.(data);\n            }\n          : undefined,\n      },\n      children,\n    };\n  }\n\n  const toggleAccordion = () => {\n    setIsExpanded((current) => !current);\n    onAction?.(data);\n  };\n\n  const propsContext: PropsContext = {\n    Content: {\n      id: dynamic((p) => (p.slot === \"bottom\" ? contentElementId : undefined)),\n      wrapWith: dynamic((p) =>\n        p.slot === \"bottom\" ? (\n          <AccordionButton\n            contentElementId={contentElementId}\n            toggle={toggleAccordion}\n            isExpanded={isExpanded}\n          />\n        ) : undefined,\n      ),\n    },\n  };\n\n  return {\n    gridItemProps: {\n      ref: itemRef,\n      onAction: toggleAccordion,\n    },\n    children: (\n      <PropsContextProvider\n        props={propsContext}\n        dependencies={[contentElementId, isExpanded]}\n      >\n        {children}\n      </PropsContextProvider>\n    ),\n  };\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAM,gBAAA,GAAmB,CAAC,KAAA,KAAa;AAC5C,EAAA,MAAM,EAAE,IAAA,EAAM,QAAA,EAAU,iBAAA,EAAkB,GAAI,KAAA;AAC9C,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,WAAW,IAAA,CAAK,QAAA;AACtB,EAAA,MAAM,WAAW,IAAA,CAAK,QAAA;AAEtB,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,QAAA;AAAA,IAClC,QAAA,EAAU,eAAA,GAAkB,IAAI,CAAA,IAAK;AAAA,GACvC;AACA,EAAA,MAAM,mBAAmB,KAAA,EAAM;AAC/B,EAAA,MAAM,OAAA,GAAU,OAAuB,IAAI,CAAA;AAE3C,EAAA,MAAM,YAAY,IAAA,CAAK,SAAA;AACvB,EAAA,MAAM,QAAA,GAAW,iBAAA,IAAqB,QAAA,EAAU,MAAA,CAAO,IAAI,CAAA;AAE3D,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,SAAA,EAAW;AACb,MAAA,OAAA,CAAQ,OAAA,EAAS,YAAA,CAAa,eAAA,EAAiB,MAAA,CAAO,UAAU,CAAC,CAAA;AACjE,MAAA,OAAA,CAAQ,OAAA,EAAS,YAAA,CAAa,eAAA,EAAiB,gBAAgB,CAAA;AAAA,IACjE;AAAA,EACF,GAAG,CAAC,UAAA,EAAY,kBAAkB,OAAA,CAAQ,OAAA,EAAS,SAAS,CAAC,CAAA;AAE7D,EAAA,IAAI,CAAC,SAAA,EAAW;AACd,IAAA,OAAO;AAAA,MACL,aAAA,EAAe;AAAA,QACb,QAAA,EAAU,WACN,MAAM;AACJ,UAAA,QAAA,GAAW,IAAI,CAAA;AAAA,QACjB,CAAA,GACA;AAAA,OACN;AAAA,MACA;AAAA,KACF;AAAA,EACF;AAEA,EAAA,MAAM,kBAAkB,MAAM;AAC5B,IAAA,aAAA,CAAc,CAAC,OAAA,KAAY,CAAC,OAAO,CAAA;AACnC,IAAA,QAAA,GAAW,IAAI,CAAA;AAAA,EACjB,CAAA;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,OAAA,EAAS;AAAA,MACP,EAAA,EAAI,QAAQ,CAAC,CAAA,KAAO,EAAE,IAAA,KAAS,QAAA,GAAW,mBAAmB,MAAU,CAAA;AAAA,MACvE,QAAA,EAAU,OAAA;AAAA,QAAQ,CAAC,CAAA,KACjB,CAAA,CAAE,IAAA,KAAS,QAAA,mBACT,GAAA;AAAA,UAAC,eAAA;AAAA,UAAA;AAAA,YACC,gBAAA;AAAA,YACA,MAAA,EAAQ,eAAA;AAAA,YACR;AAAA;AAAA,SACF,GACE;AAAA;AACN;AACF,GACF;AAEA,EAAA,OAAO;AAAA,IACL,aAAA,EAAe;AAAA,MACb,GAAA,EAAK,OAAA;AAAA,MACL,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,QAAA,kBACE,GAAA;AAAA,MAAC,oBAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,YAAA;AAAA,QACP,YAAA,EAAc,CAAC,gBAAA,EAAkB,UAAU,CAAA;AAAA,QAE1C;AAAA;AAAA;AACH,GAEJ;AACF;;;;"}

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

@@ -2,7 +2,6 @@
 /* */
 import { jsx } from 'react/jsx-runtime';
 import styles from './ListItemView.module.scss.mjs';
-import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
 import ListItemViewContentView from '../../../../views/ListItemViewContentView.mjs';
 import { dynamic } from '../../../../lib/propsContext/dynamicProps/dynamic.mjs';
 import '../../../../lib/propsContext/propsContext.mjs';
@@ -34,59 +33,93 @@ import { useList } from '../../hooks/useList.mjs';
 import '../../listContext.mjs';
 import 'mobx';
 import '../../List.mjs';
+import { flowComponent } from '../../../../lib/componentFactory/flowComponent.mjs';
+import { UiComponentTunnelExit } from '../../../UiComponentTunnel/UiComponentTunnelExit.mjs';
 
-const ListItemView = (props) => {
-  const { children, s, m, l } = props;
-  const list = useList();
-  const propsContext = {
-    ContextMenu: {
-      tunnelId: "button",
-      placement: "bottom right",
-      wrapWith: /* @__PURE__ */ jsx(OptionsButton, { className: styles.action })
-    },
-    Button: {
-      tunnelId: "button",
-      size: dynamic(() => useList().viewMode.isTiles ? "s" : "m")
-    },
-    ActionGroup: {
-      tunnelId: "button",
+const ListItemView = flowComponent(
+  "ListItemView",
+  (props) => {
+    const { children, s, m, l } = props;
+    const list = useList();
+    const propsContext = {
+      ContextMenu: {
+        tunnel: {
+          id: "button",
+          component: "ListItemView"
+        },
+        placement: "bottom right",
+        wrapWith: /* @__PURE__ */ jsx(OptionsButton, { className: styles.action })
+      },
       Button: {
-        tunnelId: null
+        tunnel: {
+          id: "button",
+          component: "ListItemView"
+        },
+        size: dynamic(() => useList().viewMode.isTiles ? "s" : "m")
+      },
+      ActionGroup: {
+        tunnel: {
+          id: "button",
+          component: "ListItemView"
+        },
+        Button: {
+          tunnel: null
+        }
+      },
+      Avatar: {
+        tunnel: {
+          id: "avatar",
+          component: "ListItemView"
+        }
+      },
+      Heading: {
+        tunnel: {
+          id: "title",
+          component: "ListItemView"
+        }
+      },
+      Text: {
+        tunnel: {
+          id: "text",
+          component: "ListItemView"
+        }
+      },
+      Content: {
+        tunnel: dynamic(
+          (p) => p.slot === "bottom" ? {
+            id: "bottom",
+            component: "ListItemView"
+          } : void 0
+        )
+      },
+      Checkbox: {
+        tunnel: {
+          id: "checkbox",
+          component: "ListItemView"
+        }
       }
-    },
-    Avatar: {
-      tunnelId: "avatar"
-    },
-    Heading: {
-      tunnelId: "title"
-    },
-    Text: {
-      tunnelId: "text"
-    },
-    Content: {
-      tunnelId: dynamic((p) => p.slot === "bottom" ? "bottom" : void 0)
-    },
-    Checkbox: {
-      tunnelId: "checkbox"
-    }
-  };
-  return /* @__PURE__ */ jsx(TunnelProvider, { children: /* @__PURE__ */ jsx(
-    ListItemViewContentView,
-    {
-      viewMode: list.viewMode.value,
-      title: /* @__PURE__ */ jsx(TunnelExit, { id: "title" }),
-      avatar: /* @__PURE__ */ jsx(TunnelExit, { id: "avatar" }),
-      button: /* @__PURE__ */ jsx(TunnelExit, { id: "button" }),
-      subTitle: /* @__PURE__ */ jsx(TunnelExit, { id: "text" }),
-      bottom: /* @__PURE__ */ jsx(TunnelExit, { id: "bottom" }),
-      checkbox: /* @__PURE__ */ jsx(TunnelExit, { id: "checkbox" }),
-      s,
-      m,
-      l,
-      children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children })
-    }
-  ) });
-};
+    };
+    return /* @__PURE__ */ jsx(
+      ListItemViewContentView,
+      {
+        viewMode: list.viewMode.value,
+        title: /* @__PURE__ */ jsx(UiComponentTunnelExit, { id: "title", component: "ListItemView" }),
+        avatar: /* @__PURE__ */ jsx(UiComponentTunnelExit, { id: "avatar", component: "ListItemView" }),
+        button: /* @__PURE__ */ jsx(UiComponentTunnelExit, { id: "button", component: "ListItemView" }),
+        subTitle: /* @__PURE__ */ jsx(UiComponentTunnelExit, { id: "text", component: "ListItemView" }),
+        bottom: /* @__PURE__ */ jsx(UiComponentTunnelExit, { id: "bottom", component: "ListItemView" }),
+        checkbox: /* @__PURE__ */ jsx(UiComponentTunnelExit, { id: "checkbox", component: "ListItemView" }),
+        s,
+        m,
+        l,
+        children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children })
+      }
+    );
+  },
+  {
+    type: "layout"
+  }
+);
 
 export { ListItemView };
 //# sourceMappingURL=ListItemView.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListItemView.mjs","sources":["../../../../../../../../../src/components/List/components/ListItemView/ListItemView.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./ListItemView.module.scss\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport ListItemViewContentView from \"@/views/ListItemViewContentView\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { OptionsButton } from \"@/components/List/components/Items/components/Item/components/OptionsButton\";\nimport { useList } from \"@/components/List\";\nimport type { ColumnLayoutProps } from \"@/components/ColumnLayout\";\n\nexport type ListItemViewProps = PropsWithChildren &\n  Pick<ColumnLayoutProps, \"s\" | \"m\" | \"l\">;\n\nexport const ListItemView = (props: ListItemViewProps) => {\n  const { children, s, m, l } = props;\n  const list = useList();\n\n  const propsContext: PropsContext = {\n    ContextMenu: {\n      tunnelId: \"button\",\n      placement: \"bottom right\",\n      wrapWith: <OptionsButton className={styles.action} />,\n    },\n    Button: {\n      tunnelId: \"button\",\n      size: dynamic(() => (useList().viewMode.isTiles ? \"s\" : \"m\")),\n    },\n    ActionGroup: {\n      tunnelId: \"button\",\n      Button: {\n        tunnelId: null,\n      },\n    },\n    Avatar: {\n      tunnelId: \"avatar\",\n    },\n    Heading: {\n      tunnelId: \"title\",\n    },\n    Text: {\n      tunnelId: \"text\",\n    },\n    Content: {\n      tunnelId: dynamic((p) => (p.slot === \"bottom\" ? \"bottom\" : undefined)),\n    },\n    Checkbox: {\n      tunnelId: \"checkbox\",\n    },\n  };\n\n  return (\n    <TunnelProvider>\n      <ListItemViewContentView\n        viewMode={list.viewMode.value}\n        title={<TunnelExit id=\"title\" />}\n        avatar={<TunnelExit id=\"avatar\" />}\n        button={<TunnelExit id=\"button\" />}\n        subTitle={<TunnelExit id=\"text\" />}\n        bottom={<TunnelExit id=\"bottom\" />}\n        checkbox={<TunnelExit id=\"checkbox\" />}\n        s={s}\n        m={m}\n        l={l}\n      >\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </ListItemViewContentView>\n    </TunnelProvider>\n  );\n};\n\nexport default ListItemView;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBO,MAAM,YAAA,GAAe,CAAC,KAAA,KAA6B;AACxD,EAAA,MAAM,EAAE,QAAA,EAAU,CAAA,EAAG,CAAA,EAAG,GAAE,GAAI,KAAA;AAC9B,EAAA,MAAM,OAAO,OAAA,EAAQ;AAErB,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,WAAA,EAAa;AAAA,MACX,QAAA,EAAU,QAAA;AAAA,MACV,SAAA,EAAW,cAAA;AAAA,MACX,QAAA,kBAAU,GAAA,CAAC,aAAA,EAAA,EAAc,SAAA,EAAW,OAAO,MAAA,EAAQ;AAAA,KACrD;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,QAAA,EAAU,QAAA;AAAA,MACV,IAAA,EAAM,QAAQ,MAAO,OAAA,GAAU,QAAA,CAAS,OAAA,GAAU,MAAM,GAAI;AAAA,KAC9D;AAAA,IACA,WAAA,EAAa;AAAA,MACX,QAAA,EAAU,QAAA;AAAA,MACV,MAAA,EAAQ;AAAA,QACN,QAAA,EAAU;AAAA;AACZ,KACF;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,OAAA,EAAS;AAAA,MACP,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,OAAA,EAAS;AAAA,MACP,QAAA,EAAU,QAAQ,CAAC,CAAA,KAAO,EAAE,IAAA,KAAS,QAAA,GAAW,WAAW,MAAU;AAAA,KACvE;AAAA,IACA,QAAA,EAAU;AAAA,MACR,QAAA,EAAU;AAAA;AACZ,GACF;AAEA,EAAA,2BACG,cAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,IAAC,uBAAA;AAAA,IAAA;AAAA,MACC,QAAA,EAAU,KAAK,QAAA,CAAS,KAAA;AAAA,MACxB,KAAA,kBAAO,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,OAAA,EAAQ,CAAA;AAAA,MAC9B,MAAA,kBAAQ,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,QAAA,EAAS,CAAA;AAAA,MAChC,MAAA,kBAAQ,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,QAAA,EAAS,CAAA;AAAA,MAChC,QAAA,kBAAU,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,MAAA,EAAO,CAAA;AAAA,MAChC,MAAA,kBAAQ,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,QAAA,EAAS,CAAA;AAAA,MAChC,QAAA,kBAAU,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,UAAA,EAAW,CAAA;AAAA,MACpC,CAAA;AAAA,MACA,CAAA;AAAA,MACA,CAAA;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EACH;AAAA;AAAA,GACF,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ListItemView.mjs","sources":["../../../../../../../../../src/components/List/components/ListItemView/ListItemView.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./ListItemView.module.scss\";\nimport ListItemViewContentView from \"@/views/ListItemViewContentView\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { OptionsButton } from \"@/components/List/components/Items/components/Item/components/OptionsButton\";\nimport { useList } from \"@/components/List\";\nimport type { ColumnLayoutProps } from \"@/components/ColumnLayout\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport type ListItemViewProps = PropsWithChildren &\n  Pick<ColumnLayoutProps, \"s\" | \"m\" | \"l\">;\n\nexport const ListItemView = flowComponent(\n  \"ListItemView\",\n  (props: ListItemViewProps) => {\n    const { children, s, m, l } = props;\n    const list = useList();\n\n    const propsContext: PropsContext = {\n      ContextMenu: {\n        tunnel: {\n          id: \"button\",\n          component: \"ListItemView\",\n        },\n        placement: \"bottom right\",\n        wrapWith: <OptionsButton className={styles.action} />,\n      },\n      Button: {\n        tunnel: {\n          id: \"button\",\n          component: \"ListItemView\",\n        },\n        size: dynamic(() => (useList().viewMode.isTiles ? \"s\" : \"m\")),\n      },\n      ActionGroup: {\n        tunnel: {\n          id: \"button\",\n          component: \"ListItemView\",\n        },\n        Button: {\n          tunnel: null,\n        },\n      },\n      Avatar: {\n        tunnel: {\n          id: \"avatar\",\n          component: \"ListItemView\",\n        },\n      },\n      Heading: {\n        tunnel: {\n          id: \"title\",\n          component: \"ListItemView\",\n        },\n      },\n      Text: {\n        tunnel: {\n          id: \"text\",\n          component: \"ListItemView\",\n        },\n      },\n      Content: {\n        tunnel: dynamic((p) =>\n          p.slot === \"bottom\"\n            ? {\n                id: \"bottom\",\n                component: \"ListItemView\",\n              }\n            : undefined,\n        ),\n      },\n      Checkbox: {\n        tunnel: {\n          id: \"checkbox\",\n          component: \"ListItemView\",\n        },\n      },\n    };\n\n    return (\n      <ListItemViewContentView\n        viewMode={list.viewMode.value}\n        title={<UiComponentTunnelExit id=\"title\" component=\"ListItemView\" />}\n        avatar={<UiComponentTunnelExit id=\"avatar\" component=\"ListItemView\" />}\n        button={<UiComponentTunnelExit id=\"button\" component=\"ListItemView\" />}\n        subTitle={<UiComponentTunnelExit id=\"text\" component=\"ListItemView\" />}\n        bottom={<UiComponentTunnelExit id=\"bottom\" component=\"ListItemView\" />}\n        checkbox={\n          <UiComponentTunnelExit id=\"checkbox\" component=\"ListItemView\" />\n        }\n        s={s}\n        m={m}\n        l={l}\n      >\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </ListItemViewContentView>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default ListItemView;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBO,MAAM,YAAA,GAAe,aAAA;AAAA,EAC1B,cAAA;AAAA,EACA,CAAC,KAAA,KAA6B;AAC5B,IAAA,MAAM,EAAE,QAAA,EAAU,CAAA,EAAG,CAAA,EAAG,GAAE,GAAI,KAAA;AAC9B,IAAA,MAAM,OAAO,OAAA,EAAQ;AAErB,IAAA,MAAM,YAAA,GAA6B;AAAA,MACjC,WAAA,EAAa;AAAA,QACX,MAAA,EAAQ;AAAA,UACN,EAAA,EAAI,QAAA;AAAA,UACJ,SAAA,EAAW;AAAA,SACb;AAAA,QACA,SAAA,EAAW,cAAA;AAAA,QACX,QAAA,kBAAU,GAAA,CAAC,aAAA,EAAA,EAAc,SAAA,EAAW,OAAO,MAAA,EAAQ;AAAA,OACrD;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,MAAA,EAAQ;AAAA,UACN,EAAA,EAAI,QAAA;AAAA,UACJ,SAAA,EAAW;AAAA,SACb;AAAA,QACA,IAAA,EAAM,QAAQ,MAAO,OAAA,GAAU,QAAA,CAAS,OAAA,GAAU,MAAM,GAAI;AAAA,OAC9D;AAAA,MACA,WAAA,EAAa;AAAA,QACX,MAAA,EAAQ;AAAA,UACN,EAAA,EAAI,QAAA;AAAA,UACJ,SAAA,EAAW;AAAA,SACb;AAAA,QACA,MAAA,EAAQ;AAAA,UACN,MAAA,EAAQ;AAAA;AACV,OACF;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,MAAA,EAAQ;AAAA,UACN,EAAA,EAAI,QAAA;AAAA,UACJ,SAAA,EAAW;AAAA;AACb,OACF;AAAA,MACA,OAAA,EAAS;AAAA,QACP,MAAA,EAAQ;AAAA,UACN,EAAA,EAAI,OAAA;AAAA,UACJ,SAAA,EAAW;AAAA;AACb,OACF;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,MAAA,EAAQ;AAAA,UACN,EAAA,EAAI,MAAA;AAAA,UACJ,SAAA,EAAW;AAAA;AACb,OACF;AAAA,MACA,OAAA,EAAS;AAAA,QACP,MAAA,EAAQ,OAAA;AAAA,UAAQ,CAAC,CAAA,KACf,CAAA,CAAE,IAAA,KAAS,QAAA,GACP;AAAA,YACE,EAAA,EAAI,QAAA;AAAA,YACJ,SAAA,EAAW;AAAA,WACb,GACA;AAAA;AACN,OACF;AAAA,MACA,QAAA,EAAU;AAAA,QACR,MAAA,EAAQ;AAAA,UACN,EAAA,EAAI,UAAA;AAAA,UACJ,SAAA,EAAW;AAAA;AACb;AACF,KACF;AAEA,IAAA,uBACE,GAAA;AAAA,MAAC,uBAAA;AAAA,MAAA;AAAA,QACC,QAAA,EAAU,KAAK,QAAA,CAAS,KAAA;AAAA,QACxB,uBAAO,GAAA,CAAC,qBAAA,EAAA,EAAsB,EAAA,EAAG,OAAA,EAAQ,WAAU,cAAA,EAAe,CAAA;AAAA,QAClE,wBAAQ,GAAA,CAAC,qBAAA,EAAA,EAAsB,EAAA,EAAG,QAAA,EAAS,WAAU,cAAA,EAAe,CAAA;AAAA,QACpE,wBAAQ,GAAA,CAAC,qBAAA,EAAA,EAAsB,EAAA,EAAG,QAAA,EAAS,WAAU,cAAA,EAAe,CAAA;AAAA,QACpE,0BAAU,GAAA,CAAC,qBAAA,EAAA,EAAsB,EAAA,EAAG,MAAA,EAAO,WAAU,cAAA,EAAe,CAAA;AAAA,QACpE,wBAAQ,GAAA,CAAC,qBAAA,EAAA,EAAsB,EAAA,EAAG,QAAA,EAAS,WAAU,cAAA,EAAe,CAAA;AAAA,QACpE,0BACE,GAAA,CAAC,qBAAA,EAAA,EAAsB,EAAA,EAAG,UAAA,EAAW,WAAU,cAAA,EAAe,CAAA;AAAA,QAEhE,CAAA;AAAA,QACA,CAAA;AAAA,QACA,CAAA;AAAA,QAEA,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EACH;AAAA;AAAA,KACF;AAAA,EAEJ,CAAA;AAAA,EACA;AAAA,IACE,IAAA,EAAM;AAAA;AAEV;;;;"}