@mittwald/flow-react-components 0.2.0-experimental.775 → 1.0.0

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

@@ -1,48 +1,25 @@
 "use client"
 /* */
-import { jsx } from 'react/jsx-runtime';
-import 'react';
-import MenuItemView from '../../../../../../views/MenuItemView.mjs';
-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 locales from '../../../../../../../../../_virtual/_.locale.json@c396072149abf62e23786da27abb7eee.mjs';
-import { useLocalizedStringFormatter } from 'react-aria';
-import 'clsx';
-import '@mittwald/react-tunnel';
-import '../../../../../../views/ListItemViewContentView.mjs';
-import '../../../../../../lib/propsContext/propsContext.mjs';
-import '../../../../../../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';
-
-const ViewModeMenuItem = (props) => {
-  const { viewMode } = props;
-  const list = useList();
-  const stringFormatter = useLocalizedStringFormatter(locales);
-  return /* @__PURE__ */ jsx(
-    MenuItemView,
-    {
-      id: viewMode,
-      onAction: () => {
-        list.viewMode.set(viewMode);
-      },
-      children: stringFormatter.format(`list.settings.viewMode.${viewMode}`)
-    }
-  );
+import { useLocalizedStringFormatter } from "../../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
+import __locale_default from "../../../../../../../../../_virtual/_16.locale.mjs";
+import { useList } from "../../../../hooks/useList.mjs";
+import MenuItemView from "../../../../../../views/MenuItemView.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/List/components/Header/components/ViewModeContextMenu/ViewModeMenuItem.tsx
+var ViewModeMenuItem = (props) => {
+	const { viewMode } = props;
+	const list = useList();
+	const stringFormatter = useLocalizedStringFormatter(__locale_default, "List");
+	return /* @__PURE__ */ jsx(MenuItemView, {
+		id: viewMode,
+		onAction: () => {
+			list.viewMode.set(viewMode);
+		},
+		children: stringFormatter.format(`settings.viewMode.${viewMode}`)
+	});
 };
-
+//#endregion
 export { ViewModeMenuItem };
-//# sourceMappingURL=ViewModeMenuItem.mjs.map
+
+//# sourceMappingURL=ViewModeMenuItem.mjs.map

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 \"react-aria\";\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);\n\n  return (\n    <MenuItemView\n      id={viewMode}\n      onAction={() => {\n        list.viewMode.set(viewMode);\n      }}\n    >\n      {stringFormatter.format(`list.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,4BAA4B,OAAO,CAAA;AAE3D,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,uBAAA,EAA0B,QAAQ,CAAA,CAAE;AAAA;AAAA,GAC9D;AAEJ;;;;"}
+{"version":3,"file":"ViewModeMenuItem.mjs","names":[],"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"],"mappings":";;;;;;;;;AAWA,IAAa,oBAA+B,UAAU;CACpD,MAAM,EAAE,aAAa;CACrB,MAAM,OAAO,QAAQ;CACrB,MAAM,kBAAkB,4BAA4B,kBAAS,MAAM;CAEnE,OACE,oBAAC,cAAD;EACE,IAAI;EACJ,gBAAgB;GACd,KAAK,SAAS,IAAI,QAAQ;EAC5B;EAEC,UAAA,gBAAgB,OAAO,qBAAqB,UAAU;CAC3C,CAAA;AAElB"}

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

@@ -1,45 +1,16 @@
 "use client"
 /* */
-import 'invariant';
-import 'react/jsx-runtime';
-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 '@mittwald/react-tunnel';
-import '../../../../views/ListItemViewContentView.mjs';
-import '../../../../lib/propsContext/propsContext.mjs';
-import '../../../../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';
-
-const useAvailableViewModes = () => {
-  const list = useList();
-  const availableViewModes = [];
-  if (list.itemView?.showList) {
-    availableViewModes.push("list");
-  }
-  if (list.table) {
-    availableViewModes.push("table");
-  }
-  if (list.itemView?.showTiles) {
-    availableViewModes.push("tiles");
-  }
-  return availableViewModes;
+import { useList } from "../../hooks/useList.mjs";
+//#region src/components/List/components/Header/lib.ts
+var useAvailableViewModes = () => {
+	const list = useList();
+	const availableViewModes = [];
+	if (list.itemView?.showList) availableViewModes.push("list");
+	if (list.table) availableViewModes.push("table");
+	if (list.itemView?.showTiles) availableViewModes.push("tiles");
+	return availableViewModes;
 };
-
+//#endregion
 export { useAvailableViewModes };
-//# sourceMappingURL=lib.mjs.map
+
+//# sourceMappingURL=lib.mjs.map

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","names":[],"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"],"mappings":";;;;AAGA,IAAa,8BAA8B;CACzC,MAAM,OAAO,QAAQ;CAErB,MAAM,qBAAqC,CAAC;CAE5C,IAAI,KAAK,UAAU,UACjB,mBAAmB,KAAK,MAAM;CAEhC,IAAI,KAAK,OACP,mBAAmB,KAAK,OAAO;CAEjC,IAAI,KAAK,UAAU,WACjB,mBAAmB,KAAK,OAAO;CAGjC,OAAO;AACT"}

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

@@ -1,60 +1,50 @@
 "use client"
 /* */
-import { jsx } from 'react/jsx-runtime';
-import 'invariant';
-import 'react-aria-components';
-import { EmptyView } from '../../views/EmptyView/EmptyView.mjs';
-import clsx from 'clsx';
-import '@mittwald/react-tunnel';
-import '../../../../views/ListItemViewContentView.mjs';
-import '../../../../lib/propsContext/propsContext.mjs';
-import '../../../../lib/propsContext/components/PropsContextProvider.mjs';
-import 'react-aria';
-import 'react';
-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 { useList } from '../../hooks/useList.mjs';
-import '../../listContext.mjs';
-import 'mobx';
-import '../../List.mjs';
-import { Item } from './components/Item/Item.mjs';
-import DivView from '../../../../views/DivView.mjs';
-import ItemsGridListView from '../../../../views/ItemsGridListView.mjs';
-import styles from './Items.module.scss.mjs';
-import { FallbackItems } from './components/FallbackItems/FallbackItems.mjs';
-
-const Items = () => {
-  const list = useList();
-  const tiles = list.viewMode.isTiles;
-  const isLoading = list.loader.useIsLoading();
-  const isInitiallyLoading = list.loader.useIsInitiallyLoading();
-  if (!list.itemView) {
-    return null;
-  }
-  const items = list.items.entries.map((item) => /* @__PURE__ */ jsx(Item, { data: item.data, id: item.id }, item.id));
-  const rootClassName = clsx(
-    styles.items,
-    isLoading && styles.isLoading,
-    tiles && styles.tiles
-  );
-  return /* @__PURE__ */ jsx(DivView, { "aria-hidden": isInitiallyLoading, "aria-busy": isLoading, children: /* @__PURE__ */ jsx(
-    ItemsGridListView,
-    {
-      className: rootClassName,
-      ...list.componentProps,
-      renderEmptyState: () => /* @__PURE__ */ jsx(EmptyView, {}),
-      layout: tiles ? "grid" : "stack",
-      tileMaxWidth: list.itemView.tileMaxWidth,
-      children: items.length === 0 && isInitiallyLoading ? /* @__PURE__ */ jsx(FallbackItems, {}) : items
-    }
-  ) });
+import DivView from "../../../../views/DivView.mjs";
+import Items_module_default from "./Items.module.mjs";
+import { useList } from "../../hooks/useList.mjs";
+import { Item } from "./components/Item/Item.mjs";
+import ItemsGridListView from "../../../../views/ItemsGridListView.mjs";
+import { FallbackItems } from "./components/FallbackItems/FallbackItems.mjs";
+import { getLoadMoreThresholdRows, useInfiniteScrollTrigger } from "./hooks/useInfiniteScrollTrigger.mjs";
+import clsx from "clsx";
+import { useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/List/components/Items/Items.tsx
+var Items = () => {
+	const list = useList();
+	const tiles = list.viewMode.isTiles;
+	const isLoading = list.loader.useIsLoading();
+	const isInitiallyLoading = list.loader.useIsInitiallyLoading();
+	const isLoadingMore = list.loader.useIsLoadingMore();
+	const triggerRef = useRef(null);
+	useInfiniteScrollTrigger(triggerRef);
+	if (!list.itemView) return null;
+	const triggerIndex = Math.max(0, list.items.entries.length - getLoadMoreThresholdRows(list.batches.batchSize));
+	const items = list.items.entries.map((item, index) => /* @__PURE__ */ jsx(Item, {
+		data: item.data,
+		id: item.id,
+		list,
+		isTile: tiles,
+		triggerRef: list.infiniteScroll && index === triggerIndex ? triggerRef : void 0
+	}, item.id));
+	const rootClassName = clsx(Items_module_default.items, isLoading && !(list.infiniteScroll && isLoadingMore) && Items_module_default.isLoading, tiles && Items_module_default.tiles);
+	const { "aria-labelledby": ariaLabelledby, "aria-label": ariaLabel, ...rest } = list.componentProps;
+	return /* @__PURE__ */ jsx(DivView, {
+		"aria-hidden": isInitiallyLoading,
+		"aria-busy": isLoading,
+		children: /* @__PURE__ */ jsx(ItemsGridListView, {
+			className: rootClassName,
+			...rest,
+			"aria-labelledby": ariaLabel ? void 0 : ariaLabelledby,
+			"aria-label": ariaLabel,
+			layout: tiles ? "grid" : "stack",
+			tileMaxWidth: list.itemView.tileMaxWidth,
+			children: items.length === 0 && isInitiallyLoading ? /* @__PURE__ */ jsx(FallbackItems, {}) : items
+		})
+	});
 };
+//#endregion
+export { Items, Items as default };
 
-export { Items };
-//# sourceMappingURL=Items.mjs.map
+//# sourceMappingURL=Items.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Items.mjs","sources":["../../../../../../../../../src/components/List/components/Items/Items.tsx"],"sourcesContent":["import { EmptyView } from \"@/components/List\";\nimport Item from \"@/components/List/components/Items/components/Item/Item\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport DivView from \"@/views/DivView\";\nimport ItemsGridListView from \"@/views/ItemsGridListView\";\nimport clsx from \"clsx\";\nimport type { FC } from \"react\";\nimport styles from \"./Items.module.scss\";\nimport { FallbackItems } from \"./components/FallbackItems\";\n\nexport const Items: FC = () => {\n  const list = useList();\n  const tiles = list.viewMode.isTiles;\n  const isLoading = list.loader.useIsLoading();\n  const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n\n  if (!list.itemView) {\n    return null;\n  }\n\n  const items = list.items.entries.map((item) => (\n    <Item key={item.id} data={item.data} id={item.id} />\n  ));\n\n  const rootClassName = clsx(\n    styles.items,\n    isLoading && styles.isLoading,\n    tiles && styles.tiles,\n  );\n\n  return (\n    <DivView aria-hidden={isInitiallyLoading} aria-busy={isLoading}>\n      <ItemsGridListView\n        className={rootClassName}\n        {...list.componentProps}\n        renderEmptyState={() => <EmptyView />}\n        layout={tiles ? \"grid\" : \"stack\"}\n        tileMaxWidth={list.itemView.tileMaxWidth}\n      >\n        {items.length === 0 && isInitiallyLoading ? <FallbackItems /> : items}\n      </ItemsGridListView>\n    </DivView>\n  );\n};\n\nexport default Items;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUO,MAAM,QAAY,MAAM;AAC7B,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,KAAA,GAAQ,KAAK,QAAA,CAAS,OAAA;AAC5B,EAAA,MAAM,SAAA,GAAY,IAAA,CAAK,MAAA,CAAO,YAAA,EAAa;AAC3C,EAAA,MAAM,kBAAA,GAAqB,IAAA,CAAK,MAAA,CAAO,qBAAA,EAAsB;AAE7D,EAAA,IAAI,CAAC,KAAK,QAAA,EAAU;AAClB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM,QAAQ,IAAA,CAAK,KAAA,CAAM,OAAA,CAAQ,GAAA,CAAI,CAAC,IAAA,qBACpC,GAAA,CAAC,IAAA,EAAA,EAAmB,IAAA,EAAM,KAAK,IAAA,EAAM,EAAA,EAAI,KAAK,EAAA,EAAA,EAAnC,IAAA,CAAK,EAAkC,CACnD,CAAA;AAED,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,KAAA;AAAA,IACP,aAAa,MAAA,CAAO,SAAA;AAAA,IACpB,SAAS,MAAA,CAAO;AAAA,GAClB;AAEA,EAAA,uBACE,GAAA,CAAC,OAAA,EAAA,EAAQ,aAAA,EAAa,kBAAA,EAAoB,aAAW,SAAA,EACnD,QAAA,kBAAA,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,aAAA;AAAA,MACV,GAAG,IAAA,CAAK,cAAA;AAAA,MACT,gBAAA,EAAkB,sBAAM,GAAA,CAAC,SAAA,EAAA,EAAU,CAAA;AAAA,MACnC,MAAA,EAAQ,QAAQ,MAAA,GAAS,OAAA;AAAA,MACzB,YAAA,EAAc,KAAK,QAAA,CAAS,YAAA;AAAA,MAE3B,gBAAM,MAAA,KAAW,CAAA,IAAK,kBAAA,mBAAqB,GAAA,CAAC,iBAAc,CAAA,GAAK;AAAA;AAAA,GAClE,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Items.mjs","names":[],"sources":["../../../../../../../../../src/components/List/components/Items/Items.tsx"],"sourcesContent":["import Item from \"@/components/List/components/Items/components/Item/Item\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport DivView from \"@/views/DivView\";\nimport ItemsGridListView from \"@/views/ItemsGridListView\";\nimport clsx from \"clsx\";\nimport type { FC } from \"react\";\nimport { useRef } from \"react\";\nimport styles from \"./Items.module.scss\";\nimport { FallbackItems } from \"./components/FallbackItems\";\nimport {\n  getLoadMoreThresholdRows,\n  useInfiniteScrollTrigger,\n} from \"./hooks/useInfiniteScrollTrigger\";\n\nexport const Items: FC = () => {\n  const list = useList();\n  const tiles = list.viewMode.isTiles;\n  const isLoading = list.loader.useIsLoading();\n  const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n  const isLoadingMore = list.loader.useIsLoadingMore();\n\n  const triggerRef = useRef<HTMLDivElement>(null);\n  useInfiniteScrollTrigger(triggerRef);\n\n  if (!list.itemView) {\n    return null;\n  }\n\n  const triggerIndex = Math.max(\n    0,\n    list.items.entries.length -\n      getLoadMoreThresholdRows(list.batches.batchSize),\n  );\n\n  const items = list.items.entries.map((item, index) => (\n    <Item\n      key={item.id}\n      data={item.data}\n      id={item.id}\n      list={list}\n      isTile={tiles}\n      triggerRef={\n        list.infiniteScroll && index === triggerIndex ? triggerRef : undefined\n      }\n    />\n  ));\n\n  const rootClassName = clsx(\n    styles.items,\n    isLoading && !(list.infiniteScroll && isLoadingMore) && styles.isLoading,\n    tiles && styles.tiles,\n  );\n\n  const {\n    \"aria-labelledby\": ariaLabelledby,\n    \"aria-label\": ariaLabel,\n    ...rest\n  } = list.componentProps;\n\n  return (\n    <DivView aria-hidden={isInitiallyLoading} aria-busy={isLoading}>\n      <ItemsGridListView\n        className={rootClassName}\n        {...rest}\n        aria-labelledby={ariaLabel ? undefined : ariaLabelledby}\n        aria-label={ariaLabel}\n        layout={tiles ? \"grid\" : \"stack\"}\n        tileMaxWidth={list.itemView.tileMaxWidth}\n      >\n        {items.length === 0 && isInitiallyLoading ? <FallbackItems /> : items}\n      </ItemsGridListView>\n    </DivView>\n  );\n};\n\nexport default Items;\n"],"mappings":";;;;;;;;;;;;;AAcA,IAAa,cAAkB;CAC7B,MAAM,OAAO,QAAQ;CACrB,MAAM,QAAQ,KAAK,SAAS;CAC5B,MAAM,YAAY,KAAK,OAAO,aAAa;CAC3C,MAAM,qBAAqB,KAAK,OAAO,sBAAsB;CAC7D,MAAM,gBAAgB,KAAK,OAAO,iBAAiB;CAEnD,MAAM,aAAa,OAAuB,IAAI;CAC9C,yBAAyB,UAAU;CAEnC,IAAI,CAAC,KAAK,UACR,OAAO;CAGT,MAAM,eAAe,KAAK,IACxB,GACA,KAAK,MAAM,QAAQ,SACjB,yBAAyB,KAAK,QAAQ,SAAS,CACnD;CAEA,MAAM,QAAQ,KAAK,MAAM,QAAQ,KAAK,MAAM,UAC1C,oBAAC,MAAD;EAEE,MAAM,KAAK;EACX,IAAI,KAAK;EACH;EACN,QAAQ;EACR,YACE,KAAK,kBAAkB,UAAU,eAAe,aAAa,KAAA;CAEhE,GARM,KAAK,EAQX,CACF;CAED,MAAM,gBAAgB,KACpB,qBAAO,OACP,aAAa,EAAE,KAAK,kBAAkB,kBAAkB,qBAAO,WAC/D,SAAS,qBAAO,KAClB;CAEA,MAAM,EACJ,mBAAmB,gBACnB,cAAc,WACd,GAAG,SACD,KAAK;CAET,OACE,oBAAC,SAAD;EAAS,eAAa;EAAoB,aAAW;EACnD,UAAA,oBAAC,mBAAD;GACE,WAAW;GACX,GAAI;GACJ,mBAAiB,YAAY,KAAA,IAAY;GACzC,cAAY;GACZ,QAAQ,QAAQ,SAAS;GACzB,cAAc,KAAK,SAAS;GAE3B,UAAA,MAAM,WAAW,KAAK,qBAAqB,oBAAC,eAAD,CAAgB,CAAA,IAAI;EAC/C,CAAA;CACZ,CAAA;AAEb"}

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

@@ -0,0 +1,17 @@
+"use client"
+/* */
+//#region src/components/List/components/Items/Items.module.scss
+var items = "flow--list--items";
+var isLoading = "flow--list--items--is-loading";
+var tiles = "flow--list--items--tiles";
+var emptyView = "flow--list--items--empty-view";
+var Items_module_default = {
+	items,
+	isLoading,
+	tiles,
+	emptyView
+};
+//#endregion
+export { Items_module_default as default, emptyView, isLoading, items, tiles };
+
+//# sourceMappingURL=Items.module.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Items.module.mjs","names":[],"sources":["../../../../../../../../../src/components/List/components/Items/Items.module.scss"],"sourcesContent":[".items {\n  display: flex;\n  flex-direction: column;\n  border-radius: var(--list-item--corner-radius);\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\n  &:empty {\n    display: none;\n  }\n\n  &.isLoading {\n    pointer-events: none;\n    opacity: 0.5;\n  }\n\n  &[data-empty=\"true\"] {\n    border: none;\n  }\n\n  &:not(.tiles) {\n    overflow: hidden;\n  }\n\n  &.tiles {\n    display: grid;\n    border: none;\n    gap: var(--list-item--spacing);\n\n    &:has(.emptyView) {\n      display: flex;\n    }\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/List/components/Items/components/FallbackItems/FallbackItems.mjs

@@ -1,16 +1,19 @@
 "use client"
 /* */
-import { jsx } from 'react/jsx-runtime';
-import { ItemContainer } from '../Item/Item.mjs';
-import { useList } from '../../../../hooks/useList.mjs';
-import { cloneElement } from 'react';
-import { ListItemSkeletonView } from '../Item/components/ListItemSkeletonView/ListItemSkeletonView.mjs';
-
-const FallbackItems = () => {
-  const list = useList();
-  const fallback = list.itemView?.loadingView ?? /* @__PURE__ */ jsx(ListItemSkeletonView, { viewMode: list.viewMode.value });
-  return Array.from(Array(list.loadingItemsCount)).map((_, i) => /* @__PURE__ */ jsx(ItemContainer, { id: i, data: i, children: cloneElement(fallback) }, i));
+import { useList } from "../../../../hooks/useList.mjs";
+import { ItemLoadingView } from "../Item/components/ItemLoadingView/ItemLoadingView.mjs";
+import { ItemContainer } from "../Item/Item.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/List/components/Items/components/FallbackItems/FallbackItems.tsx
+var FallbackItems = () => {
+	const list = useList();
+	return Array.from(Array(list.loadingItemsCount)).map((_, i) => /* @__PURE__ */ jsx(ItemContainer, {
+		id: i,
+		data: i,
+		children: /* @__PURE__ */ jsx(ItemLoadingView, {})
+	}, i));
 };
-
+//#endregion
 export { FallbackItems };
-//# sourceMappingURL=FallbackItems.mjs.map
+
+//# sourceMappingURL=FallbackItems.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"FallbackItems.mjs","sources":["../../../../../../../../../../../src/components/List/components/Items/components/FallbackItems/FallbackItems.tsx"],"sourcesContent":["import { ItemContainer } from \"@/components/List/components/Items/components/Item/Item\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport type { FC } from \"react\";\nimport { cloneElement } from \"react\";\nimport { ListItemSkeletonView } from \"../Item/components/ListItemSkeletonView/ListItemSkeletonView\";\n\nexport type FallbackItemsProps = unknown;\n\nexport const FallbackItems: FC<FallbackItemsProps> = () => {\n  const list = useList();\n  const fallback = list.itemView?.loadingView ?? (\n    <ListItemSkeletonView viewMode={list.viewMode.value} />\n  );\n\n  return Array.from(Array(list.loadingItemsCount)).map((_, i) => (\n    <ItemContainer id={i} data={i as never} key={i}>\n      {cloneElement(fallback)}\n    </ItemContainer>\n  ));\n};\n"],"names":[],"mappings":";;;;;;AAQO,MAAM,gBAAwC,MAAM;AACzD,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,QAAA,GAAW,KAAK,QAAA,EAAU,WAAA,wBAC7B,oBAAA,EAAA,EAAqB,QAAA,EAAU,IAAA,CAAK,QAAA,CAAS,KAAA,EAAO,CAAA;AAGvD,EAAA,OAAO,KAAA,CAAM,KAAK,KAAA,CAAM,IAAA,CAAK,iBAAiB,CAAC,CAAA,CAAE,IAAI,CAAC,CAAA,EAAG,sBACvD,GAAA,CAAC,aAAA,EAAA,EAAc,IAAI,CAAA,EAAG,IAAA,EAAM,GACzB,QAAA,EAAA,YAAA,CAAa,QAAQ,CAAA,EAAA,EADqB,CAE7C,CACD,CAAA;AACH;;;;"}
+{"version":3,"file":"FallbackItems.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Items/components/FallbackItems/FallbackItems.tsx"],"sourcesContent":["import { ItemContainer } from \"@/components/List/components/Items/components/Item/Item\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport type { FC } from \"react\";\nimport { ItemLoadingView } from \"../Item/components/ItemLoadingView/ItemLoadingView\";\n\nexport type FallbackItemsProps = unknown;\n\nexport const FallbackItems: FC<FallbackItemsProps> = () => {\n  const list = useList();\n\n  return Array.from(Array(list.loadingItemsCount)).map((_, i) => (\n    <ItemContainer id={i} data={i as never} key={i}>\n      <ItemLoadingView />\n    </ItemContainer>\n  ));\n};\n"],"mappings":";;;;;;;AAOA,IAAa,sBAA8C;CACzD,MAAM,OAAO,QAAQ;CAErB,OAAO,MAAM,KAAK,MAAM,KAAK,iBAAiB,CAAC,CAAC,CAAC,KAAK,GAAG,MACvD,oBAAC,eAAD;EAAe,IAAI;EAAG,MAAM;EAC1B,UAAA,oBAAC,iBAAD,CAAkB,CAAA;CACL,GAF8B,CAE9B,CAChB;AACH"}

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

@@ -1,56 +1,53 @@
 "use client"
 /* */
-import { jsx } from 'react/jsx-runtime';
-import { useGridItemProps } from './hooks/useGridItemProps.mjs';
-import { useList } from '../../../../hooks/useList.mjs';
-import ItemsGridListItemView from '../../../../../../views/ItemsGridListItemView.mjs';
-import { Suspense } from 'react';
-import styles from './Item.module.scss.mjs';
-import { ListItemSkeletonView } from './components/ListItemSkeletonView/ListItemSkeletonView.mjs';
-
-const Item = (props) => {
-  const { id, data } = props;
-  const list = useList();
-  const itemView = list.itemView;
-  const { gridItemProps, children } = useGridItemProps(props);
-  if (!itemView) {
-    return null;
-  }
-  const textValue = itemView.textValue ? itemView.textValue(data) : void 0;
-  const href = itemView.href ? itemView.href(data) : void 0;
-  const hasAction = !!gridItemProps.onAction || !!href;
-  return /* @__PURE__ */ jsx(
-    ItemsGridListItemView,
-    {
-      id,
-      textValue,
-      href,
-      target: itemView.target,
-      hasAction,
-      isTile: list.viewMode.isTiles,
-      ...gridItemProps,
-      children: /* @__PURE__ */ jsx(
-        Suspense,
-        {
-          fallback: /* @__PURE__ */ jsx(ListItemSkeletonView, { viewMode: list.viewMode.value }),
-          children
-        }
-      )
-    }
-  );
+import Item_module_default from "./Item.module.mjs";
+import { useList } from "../../../../hooks/useList.mjs";
+import { useGridItemProps } from "./hooks/useGridItemProps.mjs";
+import ItemsGridListItemView from "../../../../../../views/ItemsGridListItemView.mjs";
+import { ItemLoadingView } from "./components/ItemLoadingView/ItemLoadingView.mjs";
+import { Suspense, memo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { mergeRefs } from "@react-aria/utils";
+//#region src/components/List/components/Items/components/Item/Item.tsx
+var ItemImpl = (props) => {
+	const { id, data, triggerRef, list, isTile } = props;
+	const itemView = list.itemView;
+	const { gridItemProps, children } = useGridItemProps(props, list);
+	if (!itemView) return null;
+	const textValue = itemView.textValue ? itemView.textValue(data) : void 0;
+	const href = itemView.href ? itemView.href(data) : void 0;
+	const hasAction = !!gridItemProps.onAction || !!href;
+	const existingRef = "ref" in gridItemProps ? gridItemProps.ref : void 0;
+	const gridItemPropsWithRef = triggerRef ? {
+		...gridItemProps,
+		ref: mergeRefs(existingRef, triggerRef)
+	} : gridItemProps;
+	return /* @__PURE__ */ jsx(ItemsGridListItemView, {
+		id,
+		textValue,
+		href,
+		target: itemView.target,
+		hasAction,
+		isTile,
+		...gridItemPropsWithRef,
+		children: /* @__PURE__ */ jsx(Suspense, {
+			fallback: /* @__PURE__ */ jsx(ItemLoadingView, {}),
+			children
+		})
+	});
 };
-const ItemContainer = (props) => {
-  const list = useList();
-  return /* @__PURE__ */ jsx(
-    ItemsGridListItemView,
-    {
-      textValue: "-",
-      className: styles.item,
-      isTile: list.viewMode.isTiles,
-      children: props.children
-    }
-  );
+var Item = memo(ItemImpl, (prev, next) => prev.id === next.id && prev.data === next.data && prev.triggerRef === next.triggerRef && prev.isTile === next.isTile);
+Item.displayName = "Item";
+var ItemContainer = (props) => {
+	const list = useList();
+	return /* @__PURE__ */ jsx(ItemsGridListItemView, {
+		textValue: "-",
+		className: Item_module_default.item,
+		isTile: list.viewMode.isTiles,
+		children: props.children
+	});
 };
+//#endregion
+export { Item, Item as default, ItemContainer };
 
-export { Item, ItemContainer, Item as default };
-//# sourceMappingURL=Item.mjs.map
+//# sourceMappingURL=Item.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Item.mjs","sources":["../../../../../../../../../../../src/components/List/components/Items/components/Item/Item.tsx"],"sourcesContent":["import { useGridItemProps } from \"@/components/List/components/Items/components/Item/hooks/useGridItemProps\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport ItemsGridListItemView from \"@/views/ItemsGridListItemView\";\nimport type { FC, PropsWithChildren } from \"react\";\nimport { Suspense } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport styles from \"./Item.module.scss\";\nimport { ListItemSkeletonView } from \"./components/ListItemSkeletonView/ListItemSkeletonView\";\n\ninterface Props extends PropsWithChildren {\n  id: Key;\n  data: never;\n}\n\nexport const Item = (props: Props) => {\n  const { id, data } = props;\n  const list = useList();\n\n  const itemView = list.itemView;\n\n  const { gridItemProps, children } = useGridItemProps(props);\n\n  if (!itemView) {\n    return null;\n  }\n\n  const textValue = itemView.textValue ? itemView.textValue(data) : undefined;\n  const href = itemView.href ? itemView.href(data) : undefined;\n  const hasAction = !!gridItemProps.onAction || !!href;\n\n  return (\n    <ItemsGridListItemView\n      id={id}\n      textValue={textValue}\n      href={href}\n      target={itemView.target}\n      hasAction={hasAction}\n      isTile={list.viewMode.isTiles}\n      {...gridItemProps}\n    >\n      <Suspense\n        fallback={<ListItemSkeletonView viewMode={list.viewMode.value} />}\n      >\n        {children}\n      </Suspense>\n    </ItemsGridListItemView>\n  );\n};\n\nexport const ItemContainer: FC<Props> = (props) => {\n  const list = useList();\n  return (\n    <ItemsGridListItemView\n      textValue=\"-\"\n      className={styles.item}\n      isTile={list.viewMode.isTiles}\n    >\n      {props.children}\n    </ItemsGridListItemView>\n  );\n};\n\nexport default Item;\n"],"names":[],"mappings":";;;;;;;;AAcO,MAAM,IAAA,GAAO,CAAC,KAAA,KAAiB;AACpC,EAAA,MAAM,EAAE,EAAA,EAAI,IAAA,EAAK,GAAI,KAAA;AACrB,EAAA,MAAM,OAAO,OAAA,EAAQ;AAErB,EAAA,MAAM,WAAW,IAAA,CAAK,QAAA;AAEtB,EAAA,MAAM,EAAE,aAAA,EAAe,QAAA,EAAS,GAAI,iBAAiB,KAAK,CAAA;AAE1D,EAAA,IAAI,CAAC,QAAA,EAAU;AACb,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM,YAAY,QAAA,CAAS,SAAA,GAAY,QAAA,CAAS,SAAA,CAAU,IAAI,CAAA,GAAI,MAAA;AAClE,EAAA,MAAM,OAAO,QAAA,CAAS,IAAA,GAAO,QAAA,CAAS,IAAA,CAAK,IAAI,CAAA,GAAI,MAAA;AACnD,EAAA,MAAM,YAAY,CAAC,CAAC,aAAA,CAAc,QAAA,IAAY,CAAC,CAAC,IAAA;AAEhD,EAAA,uBACE,GAAA;AAAA,IAAC,qBAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,SAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAQ,QAAA,CAAS,MAAA;AAAA,MACjB,SAAA;AAAA,MACA,MAAA,EAAQ,KAAK,QAAA,CAAS,OAAA;AAAA,MACrB,GAAG,aAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,0BAAU,GAAA,CAAC,oBAAA,EAAA,EAAqB,QAAA,EAAU,IAAA,CAAK,SAAS,KAAA,EAAO,CAAA;AAAA,UAE9D;AAAA;AAAA;AACH;AAAA,GACF;AAEJ;AAEO,MAAM,aAAA,GAA2B,CAAC,KAAA,KAAU;AACjD,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,uBACE,GAAA;AAAA,IAAC,qBAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,GAAA;AAAA,MACV,WAAW,MAAA,CAAO,IAAA;AAAA,MAClB,MAAA,EAAQ,KAAK,QAAA,CAAS,OAAA;AAAA,MAErB,QAAA,EAAA,KAAA,CAAM;AAAA;AAAA,GACT;AAEJ;;;;"}
+{"version":3,"file":"Item.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Items/components/Item/Item.tsx"],"sourcesContent":["import { useGridItemProps } from \"@/components/List/components/Items/components/Item/hooks/useGridItemProps\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport type ListModel from \"@/components/List/model/List\";\nimport ItemsGridListItemView from \"@/views/ItemsGridListItemView\";\nimport { mergeRefs } from \"@react-aria/utils\";\nimport type { FC, PropsWithChildren, Ref } from \"react\";\nimport { memo, Suspense } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport styles from \"./Item.module.scss\";\nimport { ItemLoadingView } from \"./components/ItemLoadingView/ItemLoadingView\";\n\ninterface Props extends PropsWithChildren {\n  id: Key;\n  data: never;\n  triggerRef?: Ref<HTMLDivElement>;\n  list: ListModel<never>;\n  isTile: boolean;\n}\n\nconst ItemImpl = (props: Props) => {\n  const { id, data, triggerRef, list, isTile } = props;\n\n  const itemView = list.itemView;\n\n  const { gridItemProps, children } = useGridItemProps(props, list);\n\n  if (!itemView) {\n    return null;\n  }\n\n  const textValue = itemView.textValue ? itemView.textValue(data) : undefined;\n  const href = itemView.href ? itemView.href(data) : undefined;\n  const hasAction = !!gridItemProps.onAction || !!href;\n\n  const existingRef = \"ref\" in gridItemProps ? gridItemProps.ref : undefined;\n  const gridItemPropsWithRef = triggerRef\n    ? { ...gridItemProps, ref: mergeRefs(existingRef, triggerRef) }\n    : gridItemProps;\n\n  return (\n    <ItemsGridListItemView\n      id={id}\n      textValue={textValue}\n      href={href}\n      target={itemView.target}\n      hasAction={hasAction}\n      isTile={isTile}\n      {...gridItemPropsWithRef}\n    >\n      <Suspense fallback={<ItemLoadingView />}>{children}</Suspense>\n    </ItemsGridListItemView>\n  );\n};\n\nexport const Item = memo(\n  ItemImpl,\n  (prev, next) =>\n    prev.id === next.id &&\n    prev.data === next.data &&\n    prev.triggerRef === next.triggerRef &&\n    prev.isTile === next.isTile,\n);\nItem.displayName = \"Item\";\n\ninterface ItemContainerProps extends PropsWithChildren {\n  id?: Key;\n  data?: never;\n}\n\nexport const ItemContainer: FC<ItemContainerProps> = (props) => {\n  const list = useList();\n  return (\n    <ItemsGridListItemView\n      textValue=\"-\"\n      className={styles.item}\n      isTile={list.viewMode.isTiles}\n    >\n      {props.children}\n    </ItemsGridListItemView>\n  );\n};\n\nexport default Item;\n"],"mappings":";;;;;;;;;;;AAmBA,IAAM,YAAY,UAAiB;CACjC,MAAM,EAAE,IAAI,MAAM,YAAY,MAAM,WAAW;CAE/C,MAAM,WAAW,KAAK;CAEtB,MAAM,EAAE,eAAe,aAAa,iBAAiB,OAAO,IAAI;CAEhE,IAAI,CAAC,UACH,OAAO;CAGT,MAAM,YAAY,SAAS,YAAY,SAAS,UAAU,IAAI,IAAI,KAAA;CAClE,MAAM,OAAO,SAAS,OAAO,SAAS,KAAK,IAAI,IAAI,KAAA;CACnD,MAAM,YAAY,CAAC,CAAC,cAAc,YAAY,CAAC,CAAC;CAEhD,MAAM,cAAc,SAAS,gBAAgB,cAAc,MAAM,KAAA;CACjE,MAAM,uBAAuB,aACzB;EAAE,GAAG;EAAe,KAAK,UAAU,aAAa,UAAU;CAAE,IAC5D;CAEJ,OACE,oBAAC,uBAAD;EACM;EACO;EACL;EACN,QAAQ,SAAS;EACN;EACH;EACR,GAAI;EAEJ,UAAA,oBAAC,UAAD;GAAU,UAAU,oBAAC,iBAAD,CAAkB,CAAA;GAAI;EAAmB,CAAA;CACxC,CAAA;AAE3B;AAEA,IAAa,OAAO,KAClB,WACC,MAAM,SACL,KAAK,OAAO,KAAK,MACjB,KAAK,SAAS,KAAK,QACnB,KAAK,eAAe,KAAK,cACzB,KAAK,WAAW,KAAK,MACzB;AACA,KAAK,cAAc;AAOnB,IAAa,iBAAyC,UAAU;CAC9D,MAAM,OAAO,QAAQ;CACrB,OACE,oBAAC,uBAAD;EACE,WAAU;EACV,WAAW,oBAAO;EAClB,QAAQ,KAAK,SAAS;EAErB,UAAA,MAAM;CACc,CAAA;AAE3B"}

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

@@ -0,0 +1,17 @@
+"use client"
+/* */
+//#region src/components/List/components/Items/components/Item/Item.module.scss
+var item = "flow--list--items--item";
+var isSelected = "flow--list--items--item--is-selected";
+var hasAction = "flow--list--items--item--has-action";
+var tile = "flow--list--items--item--tile";
+var Item_module_default = {
+	item,
+	isSelected,
+	hasAction,
+	tile
+};
+//#endregion
+export { Item_module_default as default, hasAction, isSelected, item, tile };
+
+//# sourceMappingURL=Item.module.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Item.module.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Items/components/Item/Item.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.item {\n  cursor: default;\n  background-color: var(--list-item--background-color--default);\n  transition-property: background-color;\n  transition-duration: var(--transition--duration--default);\n\n  @include focus.focus;\n\n  &.item {\n    outline-offset: calc(var(--size-px--xs) * -1);\n    box-shadow: none;\n  }\n\n  &:where(.isSelected) {\n    background-color: var(--list-item--background-color--pressed);\n  }\n\n  &:not(:last-child) {\n    border-bottom: var(--list-item--border-width) var(--list-item--border-style)\n      var(--list-item--border-color);\n  }\n\n  &[data-href] {\n    cursor: pointer;\n  }\n\n  &:where(.hasAction):not(\n      &:has(:global(.flow--list--items--item--view--bottom-content):hover)\n    ) {\n    &:where(:not(.isSelected)) {\n      &:hover {\n        background-color: var(--list-item--background-color--hover);\n      }\n    }\n\n    &[data-pressed] {\n      background-color: var(--list-item--background-color--pressed);\n    }\n  }\n\n  :global(.flow--avatar) {\n    transition-property: filter;\n    transition-duration: var(--transition--duration--default);\n  }\n\n  &.tile {\n    border: none;\n    border-radius: var(--list-item--corner-radius);\n\n    &.item {\n      outline-offset: var(--size-px--xxs);\n    }\n\n    &:where(.hasAction) {\n      &:not(.isSelected) {\n        &:hover {\n          :global(.flow--avatar) {\n            filter: brightness(var(--image-button--brightness--hover));\n          }\n        }\n      }\n\n      &[data-pressed] {\n        :global(.flow--avatar) {\n          filter: brightness(var(--image-button--brightness--pressed));\n        }\n      }\n    }\n  }\n}\n"],"mappings":""}

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

@@ -1,41 +1,32 @@
 "use client"
 /* */
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import 'react';
-import '@mittwald/flow-icons';
-import '../../../../../../Icon/components/IconSetProvider.mjs';
-import '../../../../../../Icon/Icon.mjs';
-import '../../../../../../../views/IconView.mjs';
-import { IconChevronDown } from '../../../../../../Icon/components/icons/IconChevronDown.mjs';
-import { IconChevronUp } from '../../../../../../Icon/components/icons/IconChevronUp.mjs';
-import locales from '../../../../../../../../../../_virtual/_.locale.json@c396072149abf62e23786da27abb7eee.mjs';
-import { useLocalizedStringFormatter } from 'react-aria';
-import ButtonView from '../../../../../../../views/ButtonView.mjs';
-import styles from '../../../../ListItemView/ListItemView.module.scss.mjs';
-
-const AccordionButton = (props) => {
-  const { isExpanded, toggle, children, contentElementId } = props;
-  const stringFormatter = useLocalizedStringFormatter(locales);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      ButtonView,
-      {
-        className: styles.action,
-        tunnelId: "button",
-        variant: "plain",
-        color: "secondary",
-        onPress: toggle,
-        "aria-label": stringFormatter.format(
-          "list.toggleExpandButton." + (isExpanded ? "collapse" : "expand")
-        ),
-        "aria-controls": contentElementId,
-        "aria-expanded": isExpanded,
-        children: isExpanded ? /* @__PURE__ */ jsx(IconChevronUp, {}) : /* @__PURE__ */ jsx(IconChevronDown, {})
-      }
-    ),
-    isExpanded && children
-  ] });
+import { IconChevronDown } from "../../../../../../Icon/components/icons/IconChevronDown.mjs";
+import { IconChevronUp } from "../../../../../../Icon/components/icons/IconChevronUp.mjs";
+import { useLocalizedStringFormatter } from "../../../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
+import __locale_default from "../../../../../../../../../../_virtual/_16.locale.mjs";
+import ButtonView from "../../../../../../../views/ButtonView.mjs";
+import ListItemView_module_default from "../../../../ListItemView/ListItemView.module.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/List/components/Items/components/Item/components/AccordionButton.tsx
+var AccordionButton = (props) => {
+	const { isExpanded, toggle, children, contentElementId } = props;
+	const stringFormatter = useLocalizedStringFormatter(__locale_default, "List");
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ButtonView, {
+		className: ListItemView_module_default.action,
+		tunnel: {
+			id: "button",
+			component: "ListItemView"
+		},
+		variant: "plain",
+		color: "secondary",
+		onPress: toggle,
+		"aria-label": stringFormatter.format("toggleExpandButton." + (isExpanded ? "collapse" : "expand")),
+		"aria-controls": contentElementId,
+		"aria-expanded": isExpanded,
+		children: isExpanded ? /* @__PURE__ */ jsx(IconChevronUp, {}) : /* @__PURE__ */ jsx(IconChevronDown, {})
+	}), isExpanded && children] });
 };
-
+//#endregion
 export { AccordionButton };
-//# sourceMappingURL=AccordionButton.mjs.map
+
+//# sourceMappingURL=AccordionButton.mjs.map

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 \"react-aria\";\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);\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          \"list.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,4BAA4B,OAAO,CAAA;AAE3D,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,0BAAA,IAA8B,aAAa,UAAA,GAAa,QAAA;AAAA,SAC1D;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","names":[],"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: \"ListItemView\",\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"],"mappings":";;;;;;;;;;AAgBA,IAAa,mBAA8B,UAAU;CACnD,MAAM,EAAE,YAAY,QAAQ,UAAU,qBAAqB;CAC3D,MAAM,kBAAkB,4BAA4B,kBAAS,MAAM;CAEnE,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,YAAD;EACE,WAAW,4BAAO;EAClB,QAAQ;GACN,IAAI;GACJ,WAAW;EACb;EACA,SAAQ;EACR,OAAM;EACN,SAAS;EACT,cAAY,gBAAgB,OAC1B,yBAAyB,aAAa,aAAa,SACrD;EACA,iBAAe;EACf,iBAAe;EAEd,UAAA,aAAa,oBAAC,eAAD,CAAgB,CAAA,IAAI,oBAAC,iBAAD,CAAkB,CAAA;CAC1C,CAAA,GACX,cAAc,QACf,EAAA,CAAA;AAEN"}