@mittwald/flow-react-components 0.2.0-alpha.780 → 0.2.0-alpha.782

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

@@ -1,35 +1,25 @@
 "use client"
 /* */
-import { jsxs, jsx } from 'react/jsx-runtime';
-import locales from '../../../../../../../../../../../_virtual/_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs';
-import { useLocalizedStringFormatter } from 'react-aria';
-import 'react';
-import '@mittwald/flow-icons';
-import '../../../../../../../Icon/components/IconSetProvider.mjs';
-import '../../../../../../../Icon/Icon.mjs';
-import '../../../../../../../../views/IconView.mjs';
-import { IconContextMenu } from '../../../../../../../Icon/components/icons/IconContextMenu.mjs';
-import ButtonView from '../../../../../../../../views/ButtonView.mjs';
-import ContextMenuTriggerView from '../../../../../../../../views/ContextMenuTriggerView.mjs';
-
-const OptionsButton = (props) => {
-  const { className, children } = props;
-  const stringFormatter = useLocalizedStringFormatter(locales);
-  return /* @__PURE__ */ jsxs(ContextMenuTriggerView, { children: [
-    /* @__PURE__ */ jsx(
-      ButtonView,
-      {
-        variant: "plain",
-        color: "secondary",
-        className,
-        "aria-label": stringFormatter.format("list.options"),
-        tunnelId: null,
-        children: /* @__PURE__ */ jsx(IconContextMenu, {})
-      }
-    ),
-    children
-  ] });
+import IconContextMenu from "../../../../../../../Icon/components/icons/IconContextMenu.mjs";
+import "../../../../../../../Icon/components/icons/index.mjs";
+import __locale_default from "../../../../../../../../../../../_virtual/_14.locale.mjs";
+import ButtonView from "../../../../../../../../views/ButtonView.mjs";
+import ContextMenuTriggerView from "../../../../../../../../views/ContextMenuTriggerView.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLocalizedStringFormatter } from "react-aria";
+//#region src/components/List/components/Items/components/Item/components/OptionsButton/OptionsButton.tsx
+var OptionsButton = (props) => {
+	const { className, children } = props;
+	return /* @__PURE__ */ jsxs(ContextMenuTriggerView, { children: [/* @__PURE__ */ jsx(ButtonView, {
+		variant: "plain",
+		color: "secondary",
+		className,
+		"aria-label": useLocalizedStringFormatter(__locale_default).format("list.options"),
+		tunnelId: null,
+		children: /* @__PURE__ */ jsx(IconContextMenu, {})
+	}), children] });
 };
+//#endregion
+export { OptionsButton as default };
 
-export { OptionsButton };
-//# sourceMappingURL=OptionsButton.mjs.map
+//# sourceMappingURL=OptionsButton.mjs.map

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 \"react-aria\";\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);\n\n  return (\n    <ContextMenuTriggerView>\n      <ButtonView\n        variant=\"plain\"\n        color=\"secondary\"\n        className={className}\n        aria-label={stringFormatter.format(\"list.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,4BAA4B,OAAO,CAAA;AAE3D,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,cAAc,CAAA;AAAA,QACjD,QAAA,EAAU,IAAA;AAAA,QAEV,8BAAC,eAAA,EAAA,EAAgB;AAAA;AAAA,KACnB;AAAA,IACC;AAAA,GAAA,EACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"OptionsButton.mjs","names":[],"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 \"react-aria\";\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);\n\n  return (\n    <ContextMenuTriggerView>\n      <ButtonView\n        variant=\"plain\"\n        color=\"secondary\"\n        className={className}\n        aria-label={stringFormatter.format(\"list.options\")}\n        tunnelId={null}\n      >\n        <IconContextMenu />\n      </ButtonView>\n      {children}\n    </ContextMenuTriggerView>\n  );\n};\n\nexport default OptionsButton;\n"],"mappings":";;;;;;;;AAUA,IAAa,iBAA4B,UAAU;CACjD,MAAM,EAAE,WAAW,aAAa;AAGhC,QACE,qBAAC,wBAAD,EAAA,UAAA,CACE,oBAAC,YAAD;EACE,SAAQ;EACR,OAAM;EACK;EACX,cARkB,4BAA4B,iBAAQ,CAQ1B,OAAO,eAAe;EAClD,UAAU;YAEV,oBAAC,iBAAD,EAAmB,CAAA;EACR,CAAA,EACZ,SACsB,EAAA,CAAA"}

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

@@ -0,0 +1 @@
+import "./OptionsButton.mjs";

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

@@ -1,95 +1,66 @@
 "use client"
 /* */
-import { jsx } from 'react/jsx-runtime';
-import { useState, useId, useRef, useEffect } from 'react';
-import 'invariant';
-import 'react-aria-components';
-import '../../../../../../IllustratedMessage/IllustratedMessage.mjs';
-import '@mittwald/flow-icons';
-import '../../../../../../Icon/components/IconSetProvider.mjs';
-import '../../../../../../Icon/Icon.mjs';
-import '../../../../../../../views/IconView.mjs';
-import '../../../../../../Heading/Heading.mjs';
-import '../../../../../../Text/Text.mjs';
-import 'react-aria';
-import 'clsx';
-import '@mittwald/react-tunnel';
-import '../../../../../../../views/ListItemViewContentView.mjs';
-import { dynamic } from '../../../../../../../lib/propsContext/dynamicProps/dynamic.mjs';
-import '../../../../../../../lib/propsContext/propsContext.mjs';
-import { PropsContextProvider } from '../../../../../../../lib/propsContext/components/PropsContextProvider.mjs';
-import '../../../../../../../views/ButtonView.mjs';
-import '../../../../../../../views/ContextMenuTriggerView.mjs';
-import '../../../../../../ColumnLayout/ColumnLayout.mjs';
-import '../../../../ListSummary/ListSummary.mjs';
-import { useList } from '../../../../../hooks/useList.mjs';
-import '../../../../../listContext.mjs';
-import 'mobx';
-import '../../../../../List.mjs';
-import { AccordionButton } from '../components/AccordionButton.mjs';
-
-const useGridItemProps = (props) => {
-  const { data, children: childrenFromProps } = props;
-  const list = useList();
-  const itemView = list.itemView;
-  const onAction = list.onAction;
-  const [isExpanded, setIsExpanded] = useState(
-    itemView?.defaultExpanded?.(data) ?? false
-  );
-  const contentElementId = useId();
-  const itemRef = useRef(null);
-  const accordion = list.accordion;
-  const children = childrenFromProps ?? itemView?.render(data);
-  useEffect(() => {
-    if (accordion) {
-      itemRef.current?.setAttribute("aria-expanded", String(isExpanded));
-      itemRef.current?.setAttribute("aria-controls", contentElementId);
-    }
-  }, [isExpanded, contentElementId, itemRef.current, accordion]);
-  if (!accordion) {
-    return {
-      gridItemProps: {
-        onAction: onAction ? () => {
-          onAction?.(data);
-        } : void 0
-      },
-      children
-    };
-  }
-  const toggleAccordion = () => {
-    setIsExpanded((current) => !current);
-    onAction?.(data);
-  };
-  const propsContext = {
-    Content: {
-      id: dynamic((p) => p.slot === "bottom" ? contentElementId : void 0),
-      wrapWith: dynamic(
-        (p) => p.slot === "bottom" ? /* @__PURE__ */ jsx(
-          AccordionButton,
-          {
-            contentElementId,
-            toggle: toggleAccordion,
-            isExpanded
-          }
-        ) : void 0
-      )
-    }
-  };
-  return {
-    gridItemProps: {
-      ref: itemRef,
-      onAction: toggleAccordion
-    },
-    children: /* @__PURE__ */ jsx(
-      PropsContextProvider,
-      {
-        props: propsContext,
-        dependencies: [contentElementId, isExpanded],
-        children
-      }
-    )
-  };
+import PropsContextProvider from "../../../../../../../lib/propsContext/components/PropsContextProvider.mjs";
+import dynamic from "../../../../../../../lib/propsContext/dynamicProps/dynamic.mjs";
+import "../../../../../../../lib/propsContext/index.mjs";
+import { useList } from "../../../../../hooks/useList.mjs";
+import { AccordionButton } from "../components/AccordionButton.mjs";
+import "../../../../../index.mjs";
+import { useEffect, useId, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/List/components/Items/components/Item/hooks/useGridItemProps.tsx
+var useGridItemProps = (props) => {
+	const { data, children: childrenFromProps } = props;
+	const list = useList();
+	const itemView = list.itemView;
+	const onAction = list.onAction;
+	const [isExpanded, setIsExpanded] = useState(itemView?.defaultExpanded?.(data) ?? false);
+	const contentElementId = useId();
+	const itemRef = useRef(null);
+	const accordion = list.accordion;
+	const children = childrenFromProps ?? itemView?.render(data);
+	useEffect(() => {
+		if (accordion) {
+			itemRef.current?.setAttribute("aria-expanded", String(isExpanded));
+			itemRef.current?.setAttribute("aria-controls", contentElementId);
+		}
+	}, [
+		isExpanded,
+		contentElementId,
+		itemRef.current,
+		accordion
+	]);
+	if (!accordion) return {
+		gridItemProps: { onAction: onAction ? () => {
+			onAction?.(data);
+		} : void 0 },
+		children
+	};
+	const toggleAccordion = () => {
+		setIsExpanded((current) => !current);
+		onAction?.(data);
+	};
+	const propsContext = { Content: {
+		id: dynamic((p) => p.slot === "bottom" ? contentElementId : void 0),
+		wrapWith: dynamic((p) => p.slot === "bottom" ? /* @__PURE__ */ jsx(AccordionButton, {
+			contentElementId,
+			toggle: toggleAccordion,
+			isExpanded
+		}) : void 0)
+	} };
+	return {
+		gridItemProps: {
+			ref: itemRef,
+			onAction: toggleAccordion
+		},
+		children: /* @__PURE__ */ jsx(PropsContextProvider, {
+			props: propsContext,
+			dependencies: [contentElementId, isExpanded],
+			children
+		})
+	};
 };
-
+//#endregion
 export { useGridItemProps };
-//# sourceMappingURL=useGridItemProps.mjs.map
+
+//# sourceMappingURL=useGridItemProps.mjs.map

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","names":[],"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"],"mappings":";;;;;;;;;AAWA,IAAa,oBAAoB,UAAa;CAC5C,MAAM,EAAE,MAAM,UAAU,sBAAsB;CAC9C,MAAM,OAAO,SAAS;CACtB,MAAM,WAAW,KAAK;CACtB,MAAM,WAAW,KAAK;CAEtB,MAAM,CAAC,YAAY,iBAAiB,SAClC,UAAU,kBAAkB,KAAK,IAAI,MACtC;CACD,MAAM,mBAAmB,OAAO;CAChC,MAAM,UAAU,OAAuB,KAAK;CAE5C,MAAM,YAAY,KAAK;CACvB,MAAM,WAAW,qBAAqB,UAAU,OAAO,KAAK;AAE5D,iBAAgB;AACd,MAAI,WAAW;AACb,WAAQ,SAAS,aAAa,iBAAiB,OAAO,WAAW,CAAC;AAClE,WAAQ,SAAS,aAAa,iBAAiB,iBAAiB;;IAEjE;EAAC;EAAY;EAAkB,QAAQ;EAAS;EAAU,CAAC;AAE9D,KAAI,CAAC,UACH,QAAO;EACL,eAAe,EACb,UAAU,iBACA;AACJ,cAAW,KAAK;MAElB,KAAA,GACL;EACD;EACD;CAGH,MAAM,wBAAwB;AAC5B,iBAAe,YAAY,CAAC,QAAQ;AACpC,aAAW,KAAK;;CAGlB,MAAM,eAA6B,EACjC,SAAS;EACP,IAAI,SAAS,MAAO,EAAE,SAAS,WAAW,mBAAmB,KAAA,EAAW;EACxE,UAAU,SAAS,MACjB,EAAE,SAAS,WACT,oBAAC,iBAAD;GACoB;GAClB,QAAQ;GACI;GACZ,CAAA,GACA,KAAA,EACL;EACF,EACF;AAED,QAAO;EACL,eAAe;GACb,KAAK;GACL,UAAU;GACX;EACD,UACE,oBAAC,sBAAD;GACE,OAAO;GACP,cAAc,CAAC,kBAAkB,WAAW;GAE3C;GACoB,CAAA;EAE1B"}

package/dist/js/packages/components/src/components/List/components/Items/views/GridList/GridList.mjs

@@ -1,22 +1,20 @@
 "use client"
 /* */
-import { jsx } from 'react/jsx-runtime';
-import * as Aria from 'react-aria-components';
-import { EmptyView } from '../../../../views/EmptyView/EmptyView.mjs';
-
-const GridList = (props) => {
-  const { tileMaxWidth, ...rest } = props;
-  return /* @__PURE__ */ jsx(
-    Aria.GridList,
-    {
-      ...rest,
-      renderEmptyState: () => /* @__PURE__ */ jsx(EmptyView, {}),
-      style: {
-        gridTemplateColumns: `repeat(auto-fill, minmax(${tileMaxWidth}px, 1fr))`
-      }
-    }
-  );
+import { EmptyView } from "../../../../views/EmptyView/EmptyView.mjs";
+import "../../../../views/EmptyView/index.mjs";
+import { jsx } from "react/jsx-runtime";
+import * as Aria from "react-aria-components";
+//#region src/components/List/components/Items/views/GridList/GridList.tsx
+/** @flr-generate all */
+var GridList = (props) => {
+	const { tileMaxWidth, ...rest } = props;
+	return /* @__PURE__ */ jsx(Aria.GridList, {
+		...rest,
+		renderEmptyState: () => /* @__PURE__ */ jsx(EmptyView, {}),
+		style: { gridTemplateColumns: `repeat(auto-fill, minmax(${tileMaxWidth}px, 1fr))` }
+	});
 };
+//#endregion
+export { GridList as default };
 
-export { GridList };
-//# sourceMappingURL=GridList.mjs.map
+//# sourceMappingURL=GridList.mjs.map

package/dist/js/packages/components/src/components/List/components/Items/views/GridList/GridList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GridList.mjs","sources":["../../../../../../../../../../../src/components/List/components/Items/views/GridList/GridList.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { FC } from \"react\";\nimport { EmptyView } from \"@/components/List/views/EmptyView\";\n\nexport type GridListProps = Aria.GridListProps<never> & {\n  tileMaxWidth: number;\n};\n\n/** @flr-generate all */\nexport const GridList: FC<GridListProps> = (props) => {\n  const { tileMaxWidth, ...rest } = props;\n\n  return (\n    <Aria.GridList\n      {...rest}\n      renderEmptyState={() => <EmptyView />}\n      style={{\n        gridTemplateColumns: `repeat(auto-fill, minmax(${tileMaxWidth}px, 1fr))`,\n      }}\n    />\n  );\n};\n\nexport default GridList;\n"],"names":[],"mappings":";;;;AASO,MAAM,QAAA,GAA8B,CAAC,KAAA,KAAU;AACpD,EAAA,MAAM,EAAE,YAAA,EAAc,GAAG,IAAA,EAAK,GAAI,KAAA;AAElC,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA,CAAK,QAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,gBAAA,EAAkB,sBAAM,GAAA,CAAC,SAAA,EAAA,EAAU,CAAA;AAAA,MACnC,KAAA,EAAO;AAAA,QACL,mBAAA,EAAqB,4BAA4B,YAAY,CAAA,SAAA;AAAA;AAC/D;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"GridList.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Items/views/GridList/GridList.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { FC } from \"react\";\nimport { EmptyView } from \"@/components/List/views/EmptyView\";\n\nexport type GridListProps = Aria.GridListProps<never> & {\n  tileMaxWidth: number;\n};\n\n/** @flr-generate all */\nexport const GridList: FC<GridListProps> = (props) => {\n  const { tileMaxWidth, ...rest } = props;\n\n  return (\n    <Aria.GridList\n      {...rest}\n      renderEmptyState={() => <EmptyView />}\n      style={{\n        gridTemplateColumns: `repeat(auto-fill, minmax(${tileMaxWidth}px, 1fr))`,\n      }}\n    />\n  );\n};\n\nexport default GridList;\n"],"mappings":";;;;;;AASA,IAAa,YAA+B,UAAU;CACpD,MAAM,EAAE,cAAc,GAAG,SAAS;AAElC,QACE,oBAAC,KAAK,UAAN;EACE,GAAI;EACJ,wBAAwB,oBAAC,WAAD,EAAa,CAAA;EACrC,OAAO,EACL,qBAAqB,4BAA4B,aAAa,YAC/D;EACD,CAAA"}

package/dist/js/packages/components/src/components/List/components/Items/views/GridList/index.mjs

@@ -0,0 +1 @@
+import "./GridList.mjs";

package/dist/js/packages/components/src/components/List/components/Items/views/GridListItem/GridListItem.mjs

@@ -1,25 +1,19 @@
 "use client"
 /* */
-import { jsx } from 'react/jsx-runtime';
-import * as Aria from 'react-aria-components';
-import styles from '../../components/Item/Item.module.scss.mjs';
-import clsx from 'clsx';
-
-const GridListItem = (props) => {
-  const { hasAction, isTile, ...restProps } = props;
-  return /* @__PURE__ */ jsx(
-    Aria.GridListItem,
-    {
-      ...restProps,
-      className: (renderProps) => clsx(
-        styles.item,
-        hasAction && styles.hasAction,
-        isTile && styles.tile,
-        renderProps.isSelected && styles.isSelected
-      )
-    }
-  );
+import Item_module_default from "../../components/Item/Item.module.mjs";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+import * as Aria from "react-aria-components";
+//#region src/components/List/components/Items/views/GridListItem/GridListItem.tsx
+/** @flr-generate all */
+var GridListItem = (props) => {
+	const { hasAction, isTile, ...restProps } = props;
+	return /* @__PURE__ */ jsx(Aria.GridListItem, {
+		...restProps,
+		className: (renderProps) => clsx(Item_module_default.item, hasAction && Item_module_default.hasAction, isTile && Item_module_default.tile, renderProps.isSelected && Item_module_default.isSelected)
+	});
 };
+//#endregion
+export { GridListItem as default };
 
-export { GridListItem };
-//# sourceMappingURL=GridListItem.mjs.map
+//# sourceMappingURL=GridListItem.mjs.map

package/dist/js/packages/components/src/components/List/components/Items/views/GridListItem/GridListItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GridListItem.mjs","sources":["../../../../../../../../../../../src/components/List/components/Items/views/GridListItem/GridListItem.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { FC } from \"react\";\nimport styles from \"@/components/List/components/Items/components/Item/Item.module.scss\";\nimport clsx from \"clsx\";\n\nexport type GridListItemProps = Aria.GridListItemProps<never> & {\n  hasAction?: boolean;\n  isTile?: boolean;\n};\n\n/** @flr-generate all */\nexport const GridListItem: FC<GridListItemProps> = (props) => {\n  const { hasAction, isTile, ...restProps } = props;\n  return (\n    <Aria.GridListItem\n      {...restProps}\n      className={(renderProps) =>\n        clsx(\n          styles.item,\n          hasAction && styles.hasAction,\n          isTile && styles.tile,\n          renderProps.isSelected && styles.isSelected,\n        )\n      }\n    />\n  );\n};\n\nexport default GridListItem;\n"],"names":[],"mappings":";;;;;AAWO,MAAM,YAAA,GAAsC,CAAC,KAAA,KAAU;AAC5D,EAAA,MAAM,EAAE,SAAA,EAAW,MAAA,EAAQ,GAAG,WAAU,GAAI,KAAA;AAC5C,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA,CAAK,YAAA;AAAA,IAAL;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,SAAA,EAAW,CAAC,WAAA,KACV,IAAA;AAAA,QACE,MAAA,CAAO,IAAA;AAAA,QACP,aAAa,MAAA,CAAO,SAAA;AAAA,QACpB,UAAU,MAAA,CAAO,IAAA;AAAA,QACjB,WAAA,CAAY,cAAc,MAAA,CAAO;AAAA;AACnC;AAAA,GAEJ;AAEJ;;;;"}
+{"version":3,"file":"GridListItem.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Items/views/GridListItem/GridListItem.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { FC } from \"react\";\nimport styles from \"@/components/List/components/Items/components/Item/Item.module.scss\";\nimport clsx from \"clsx\";\n\nexport type GridListItemProps = Aria.GridListItemProps<never> & {\n  hasAction?: boolean;\n  isTile?: boolean;\n};\n\n/** @flr-generate all */\nexport const GridListItem: FC<GridListItemProps> = (props) => {\n  const { hasAction, isTile, ...restProps } = props;\n  return (\n    <Aria.GridListItem\n      {...restProps}\n      className={(renderProps) =>\n        clsx(\n          styles.item,\n          hasAction && styles.hasAction,\n          isTile && styles.tile,\n          renderProps.isSelected && styles.isSelected,\n        )\n      }\n    />\n  );\n};\n\nexport default GridListItem;\n"],"mappings":";;;;;;AAWA,IAAa,gBAAuC,UAAU;CAC5D,MAAM,EAAE,WAAW,QAAQ,GAAG,cAAc;AAC5C,QACE,oBAAC,KAAK,cAAN;EACE,GAAI;EACJ,YAAY,gBACV,KACE,oBAAO,MACP,aAAa,oBAAO,WACpB,UAAU,oBAAO,MACjB,YAAY,cAAc,oBAAO,WAClC;EAEH,CAAA"}

package/dist/js/packages/components/src/components/List/components/Items/views/GridListItem/index.mjs

@@ -0,0 +1 @@
+import "./GridListItem.mjs";

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

@@ -1,84 +1,58 @@
 "use client"
 /* */
-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';
-import { PropsContextProvider } from '../../../../lib/propsContext/components/PropsContextProvider.mjs';
-import { OptionsButton } from '../Items/components/Item/components/OptionsButton/OptionsButton.mjs';
-import 'invariant';
-import 'react-aria-components';
-import 'react';
-import '../../../IllustratedMessage/IllustratedMessage.mjs';
-import '@mittwald/flow-icons';
-import '../../../Icon/components/IconSetProvider.mjs';
-import '../../../Icon/Icon.mjs';
-import '../../../../views/IconView.mjs';
-import '../../../Heading/Heading.mjs';
-import '../../../Text/Text.mjs';
-import 'react-aria';
-import 'clsx';
-import '../../../ColumnLayout/ColumnLayout.mjs';
-import '../ListSummary/ListSummary.mjs';
-import { useList } from '../../hooks/useList.mjs';
-import '../../listContext.mjs';
-import 'mobx';
-import '../../List.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",
-      Button: {
-        tunnelId: null
-      }
-    },
-    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 })
-    }
-  ) });
+import PropsContextProvider from "../../../../lib/propsContext/components/PropsContextProvider.mjs";
+import dynamic from "../../../../lib/propsContext/dynamicProps/dynamic.mjs";
+import "../../../../lib/propsContext/index.mjs";
+import OptionsButton from "../Items/components/Item/components/OptionsButton/OptionsButton.mjs";
+import "../Items/components/Item/components/OptionsButton/index.mjs";
+import ListItemView_module_default from "./ListItemView.module.mjs";
+import ListItemViewContentView from "../../../../views/ListItemViewContentView.mjs";
+import { useList } from "../../hooks/useList.mjs";
+import "../../index.mjs";
+import { TunnelExit, TunnelProvider } from "@mittwald/react-tunnel";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/List/components/ListItemView/ListItemView.tsx
+var ListItemView = (props) => {
+	const { children, s, m, l } = props;
+	const list = useList();
+	const propsContext = {
+		ContextMenu: {
+			tunnelId: "button",
+			placement: "bottom right",
+			wrapWith: /* @__PURE__ */ jsx(OptionsButton, { className: ListItemView_module_default.action })
+		},
+		Button: {
+			tunnelId: "button",
+			size: dynamic(() => useList().viewMode.isTiles ? "s" : "m")
+		},
+		ActionGroup: {
+			tunnelId: "button",
+			Button: { tunnelId: null }
+		},
+		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
+		})
+	}) });
 };
+//#endregion
+export { ListItemView as default };
 
-export { ListItemView };
-//# sourceMappingURL=ListItemView.mjs.map
+//# 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","names":[],"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"],"mappings":";;;;;;;;;;;;AAgBA,IAAa,gBAAgB,UAA6B;CACxD,MAAM,EAAE,UAAU,GAAG,GAAG,MAAM;CAC9B,MAAM,OAAO,SAAS;CAEtB,MAAM,eAA6B;EACjC,aAAa;GACX,UAAU;GACV,WAAW;GACX,UAAU,oBAAC,eAAD,EAAe,WAAW,4BAAO,QAAU,CAAA;GACtD;EACD,QAAQ;GACN,UAAU;GACV,MAAM,cAAe,SAAS,CAAC,SAAS,UAAU,MAAM,IAAK;GAC9D;EACD,aAAa;GACX,UAAU;GACV,QAAQ,EACN,UAAU,MACX;GACF;EACD,QAAQ,EACN,UAAU,UACX;EACD,SAAS,EACP,UAAU,SACX;EACD,MAAM,EACJ,UAAU,QACX;EACD,SAAS,EACP,UAAU,SAAS,MAAO,EAAE,SAAS,WAAW,WAAW,KAAA,EAAW,EACvE;EACD,UAAU,EACR,UAAU,YACX;EACF;AAED,QACE,oBAAC,gBAAD,EAAA,UACE,oBAAC,yBAAD;EACE,UAAU,KAAK,SAAS;EACxB,OAAO,oBAAC,YAAD,EAAY,IAAG,SAAU,CAAA;EAChC,QAAQ,oBAAC,YAAD,EAAY,IAAG,UAAW,CAAA;EAClC,QAAQ,oBAAC,YAAD,EAAY,IAAG,UAAW,CAAA;EAClC,UAAU,oBAAC,YAAD,EAAY,IAAG,QAAS,CAAA;EAClC,QAAQ,oBAAC,YAAD,EAAY,IAAG,UAAW,CAAA;EAClC,UAAU,oBAAC,YAAD,EAAY,IAAG,YAAa,CAAA;EACnC;EACA;EACA;YAEH,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;GACoB,CAAA;EACC,CAAA,EACX,CAAA"}

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

@@ -0,0 +1,26 @@
+"use client"
+/* */
+var ListItemView_module_default = {
+	view: "flow--list--list-item-view--view",
+	checkboxContainer: "flow--list--list-item-view--checkbox-container",
+	content: "flow--list--list-item-view--content",
+	topContent: "flow--list--list-item-view--top-content",
+	bottomContent: "flow--list--list-item-view--bottom-content",
+	heading: "flow--list--list-item-view--heading",
+	header: "flow--list--list-item-view--header",
+	subTitle: "flow--list--list-item-view--sub-title",
+	text: "flow--list--list-item-view--text",
+	badge: "flow--list--list-item-view--badge",
+	listView: "flow--list--list-item-view--list-view",
+	columnLayout: "flow--list--list-item-view--column-layout",
+	contentWrapper: "flow--list--list-item-view--content-wrapper",
+	title: "flow--list--list-item-view--title",
+	action: "flow--list--list-item-view--action",
+	avatar: "flow--list--list-item-view--avatar",
+	tileView: "flow--list--list-item-view--tile-view",
+	avatarContainer: "flow--list--list-item-view--avatar-container"
+};
+//#endregion
+export { ListItemView_module_default as default };
+
+//# sourceMappingURL=ListItemView.module.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemView.module.mjs","names":[],"sources":["../../../../../../../../../src/components/List/components/ListItemView/ListItemView.module.scss"],"sourcesContent":["@use \"@/styles/mixins/containerBreakpointSizes\";\n\n.view {\n  display: flex;\n  flex-direction: column;\n\n  .checkboxContainer {\n    display: flex;\n    align-items: center;\n    flex-shrink: 0;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  .content {\n    min-width: 0;\n    display: flex;\n    gap: var(--list-item--spacing);\n    flex-grow: 1;\n    flex-wrap: wrap;\n  }\n\n  .topContent {\n    overflow-wrap: anywhere;\n    display: flex;\n  }\n\n  .bottomContent {\n    width: 100%;\n    overflow-wrap: anywhere;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .heading {\n    color: var(--text--color--default);\n    overflow-wrap: anywhere;\n  }\n\n  .header {\n    overflow-wrap: anywhere;\n    display: flex;\n    gap: var(--list-item--avatar-to-title-spacing);\n    max-width: 100%;\n  }\n\n  .subTitle {\n    font-size: var(--list-item--subtitle-font-size);\n\n    .text:not(:last-child)::after {\n      content: \"–\";\n      display: inline-block;\n      margin: 0 var(--size-rem--s);\n    }\n  }\n\n  .badge {\n    max-width: 100%;\n  }\n\n  &.listView {\n    padding: var(--list-item--padding);\n    gap: var(--list-item--spacing);\n\n    .columnLayout {\n      flex-grow: 1;\n\n      > div {\n        flex-grow: 1;\n        align-items: center;\n      }\n    }\n\n    .contentWrapper {\n      display: flex;\n      gap: var(--list-item--spacing);\n      justify-content: space-between;\n      flex-grow: 1;\n      align-items: flex-start;\n    }\n\n    .content {\n      align-items: center;\n      align-self: center;\n      max-width: 100%;\n    }\n\n    .title {\n      max-width: 100%;\n      min-width: 0;\n    }\n\n    .action {\n      margin-left: auto;\n\n      button {\n        margin-right: 0;\n      }\n    }\n\n    .header {\n      order: 0;\n      flex-grow: 1;\n      align-items: center;\n\n      &:empty,\n      .subTitle:empty {\n        display: none;\n      }\n\n      .avatar,\n      .checkboxContainer {\n        align-self: start;\n      }\n\n      .checkboxContainer {\n        height: var(--avatar--size--m);\n      }\n    }\n\n    &:has(.subTitle:not(:empty)) {\n      .action,\n      .avatar,\n      .checkboxContainer {\n        margin-top: var(--size-px--xxs);\n      }\n    }\n\n    .topContent {\n      order: 1;\n    }\n\n    :global(.flow--heading--heading-content) {\n      max-width: 100%;\n    }\n  }\n\n  &.tileView {\n    gap: var(--list-item--padding);\n    border-color: var(--list-item--border-color);\n    border-width: var(--list-item--border-width);\n    border-style: var(--list-item--border-style);\n    border-radius: var(--list-item--corner-radius);\n    align-content: flex-start;\n    height: 100%;\n    position: relative;\n    overflow: hidden;\n\n    .content {\n      flex-direction: column;\n      justify-content: flex-start;\n      align-items: flex-start;\n      padding-inline: var(--list-item--padding);\n      padding-bottom: var(--list-item--padding);\n      width: 100%;\n    }\n\n    .avatarContainer {\n      width: 100%;\n      border-bottom: var(--list-item--border-width)\n        var(--list-item--border-style) var(--list-item--border-color);\n      aspect-ratio: 16 / 9;\n\n      img {\n        overflow-clip-margin: unset;\n        aspect-ratio: 16 / 9;\n      }\n    }\n\n    .avatar {\n      width: 100%;\n      height: 100%;\n      border-radius: 0;\n\n      :global(.flow--avatar--icon) {\n        width: var(--size-px--xxl);\n        height: var(--size-px--xxl);\n      }\n\n      :global(.flow--avatar--initials) {\n        font-size: var(--size-px--xxl);\n      }\n    }\n\n    .checkboxContainer {\n      height: 100%;\n      max-height: var(--avatar--size--m);\n    }\n\n    .title {\n      width: 100%;\n      min-width: 0;\n\n      :global(.flow--heading--heading-content) {\n        position: absolute;\n        top: var(--list-item--padding);\n        left: var(--list-item--padding);\n        right: var(--list-item--padding);\n      }\n    }\n\n    .topContent,\n    .header {\n      width: 100%;\n    }\n\n    .action {\n      align-self: start;\n    }\n\n    .bottomContent {\n      margin-top: auto;\n    }\n  }\n}\n"],"mappings":""}